/* ══════════════════════════════════════════════════════════════ LA CALCULADORA DENTRO DE UNA PÁGINA DE SERVICIO ══════════════════════════════════════════════════════════════ Son las mismas piezas de adorna-tu-negocio/estilo.css: el recuadro negro del total con la franja CMYK arriba, las opciones de material, los campos de medida y el aviso amarillo del mínimo. Están copiadas acá y no compartidas porque estilo.css trae ADEMÁS la base entera del sitio (nav, hero, pie), que estas páginas ya tienen escrita adentro. SI SE TOCA EL ASPECTO DE LA CALCULADORA HAY QUE TOCAR LOS DOS ARCHIVOS, o Adorná y las páginas de servicio quedan distintas. Las variables de color (--negro, --amarillo, --cian…) las define la página. Son las mismas en las dos partes del sitio. ══════════════════════════════════════════════════════════════ */ /* La sección entera, sobre gris claro para despegarla del texto de arriba: es la parte donde se hace algo, no donde se lee. */ .calc-section{background:var(--gris-claro);padding:70px 5%;border-top:1.5px solid var(--gris-medio);border-bottom:1.5px solid var(--gris-medio)} .calc-bajada{color:var(--gris-texto);font-size:1rem;max-width:640px;margin:-1.6rem 0 2.4rem} .calc-nombre{ font-family:'Barlow Condensed',sans-serif;font-size:clamp(1.5rem,3.5vw,2.1rem);font-weight:900; text-transform:uppercase;letter-spacing:.02em;line-height:1.05;margin:1.5rem 0 .6rem;color:var(--negro); } /* El minmax(0,…) tiene que estar TAMBIÉN en una sola columna. Con `1fr` a secas la columna no puede achicarse por debajo de su contenido, y el dibujo del producto, que trae un viewBox de 400 px, empujaba la página entera 30 px para afuera en el celular: aparecía scroll horizontal. */ .ficha-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.6rem;align-items:start} @media(max-width:840px){.ficha-grid{grid-template-columns:minmax(0,1fr);gap:2rem}} .ficha-ilu{background:var(--blanco);border:1.5px solid var(--gris-medio);border-radius:3px} .ficha-ilu svg{display:block;width:100%;height:auto} .ficha-que{color:var(--gris-texto);font-size:1rem;margin-bottom:1.4rem} .ficha-notas{list-style:none;display:flex;flex-direction:column;gap:.55rem;margin-bottom:1.8rem} .ficha-notas li{display:flex;gap:.65rem;align-items:flex-start;font-size:.92rem;color:var(--gris-texto)} .ficha-notas i{color:var(--cian-texto);margin-top:4px;flex-shrink:0;width:14px;text-align:center} .ficha-notas strong{color:var(--negro)} /* Los links de las notas cruzan a la otra página (del vinilo impreso al sticker con corte). Van subrayados y no solo en color: adentro de un párrafo gris, el color solo no alcanza. */ .ficha-notas a,.ficha-que a{color:var(--cian-texto);font-weight:600;text-decoration:underline;text-underline-offset:2px} .ficha-notas a:hover,.ficha-que a:hover{color:var(--negro)} /* ── Cómo tomar la medida ─────────────────────────────────── */ /* Es una ayuda, no una promesa de venta: gris y con la regla adelante. Va en la columna izquierda a propósito, porque en el celular esa columna queda ARRIBA de los campos de ancho y alto, justo antes de que el cliente tipee el número. */ .medir{ margin-top:1.6rem;background:var(--blanco);border-left:3px solid var(--cian); border:1.5px solid var(--gris-medio);border-left:3px solid var(--cian); padding:1.1rem 1.2rem;border-radius:0 3px 3px 0; } .medir h4{ font-family:'Barlow Condensed',sans-serif;font-size:.92rem;font-weight:700; letter-spacing:.12em;text-transform:uppercase;color:var(--negro);margin-bottom:.7rem; } .medir h4 i{color:var(--cian-texto);margin-right:.4rem} .medir ul{list-style:none;display:flex;flex-direction:column;gap:.55rem} .medir li{position:relative;padding-left:1.1rem;font-size:.86rem;line-height:1.5;color:var(--gris-texto)} .medir li::before{content:'';position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--cian)} /* ── Los pasos ─────────────────────────────────────────────── */ .bloque{margin-bottom:1.7rem} .bloque-titulo{ font-family:'Barlow Condensed',sans-serif;font-size:.82rem;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--gris-suave);margin-bottom:.7rem; } /* ── Paso 1: qué vas a imprimir ────────────────────────────── */ /* Chips y no radios: son caminos distintos, no variantes del mismo producto. Al elegir uno cambia el dibujo, la explicación y la lista de materiales. SE ENVUELVEN, NO SE DESLIZAN (07/09/2026, lo pidió el dueño). Antes en el celular eran una fila que se arrastraba con el dedo, para no comer dos renglones. Estaba mal: lo que queda fuera de pantalla no existe, y el que entra elige entre los dos que ve sin enterarse de los otros. Dos renglones cuestan 40 px; no enterarse cuesta la venta. */ .calc-chips{display:flex;gap:.5rem;flex-wrap:wrap} .calc-chip{ background:var(--blanco);border:1.5px solid var(--gris-medio);border-radius:999px;cursor:pointer; font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.86rem;letter-spacing:.06em; text-transform:uppercase;padding:.5rem 1rem;color:var(--gris-texto);transition:all .15s; } .calc-chip:hover{border-color:var(--negro);color:var(--negro)} .calc-chip.elegido{background:var(--negro);border-color:var(--negro);color:var(--blanco)} /* ── Elegir material ───────────────────────────────────────── */ .opciones{display:flex;flex-direction:column;gap:.5rem} .opcion{ display:flex;align-items:flex-start;gap:.7rem;border:1.5px solid var(--gris-medio);border-radius:3px; padding:.8rem .9rem;cursor:pointer;transition:border-color .2s,background .2s;background:var(--blanco); } .opcion:hover{border-color:var(--gris-suave)} .opcion input{margin-top:4px;accent-color:var(--cian-texto);flex-shrink:0} .opcion.elegida{border-color:var(--negro);background:#fcfcfc} .opcion-txt{flex:1;min-width:0} .opcion-nombre{font-weight:600;font-size:.94rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem} .opcion-precio{font-family:'Barlow Condensed',sans-serif;font-weight:700;color:var(--negro);white-space:nowrap} .opcion-desc{font-size:.83rem;color:var(--gris-suave);line-height:1.4;margin-top:.15rem} .tag-rec{ background:var(--amarillo);color:var(--negro);font-family:'Barlow Condensed',sans-serif;font-weight:700; font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:2px; } /* En la lista de terminaciones el "a consultar" va en gris, para que no se lea como un monto. */ .opcion-consultar{color:var(--gris-suave)!important;font-weight:600;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase} /* ── Medidas ───────────────────────────────────────────────── */ .medidas{display:flex;gap:.7rem;flex-wrap:wrap;align-items:flex-end} .campo{display:flex;flex-direction:column;gap:.3rem} .campo label{ font-family:'Barlow Condensed',sans-serif;font-size:.74rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--gris-suave); } .campo input{ width:110px;padding:.65rem .7rem;border:1.5px solid var(--gris-medio);border-radius:3px; font-family:'Barlow',sans-serif;font-size:1.05rem;font-weight:600;color:var(--negro);background:var(--blanco); } /* El outline se deja: sin él, el que navega con teclado no sabe dónde está parado justo en el campo donde escribe la medida. */ .campo input:focus{outline:2px solid var(--cian-texto);outline-offset:1px;border-color:var(--cian-texto)} .campo-x{font-family:'Barlow Condensed',sans-serif;font-size:1.2rem;color:var(--gris-suave);padding-bottom:.7rem;font-weight:700} .atajos{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.85rem} .atajo{ background:var(--blanco);border:1.5px solid var(--gris-medio);border-radius:2px;cursor:pointer; font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.82rem;letter-spacing:.04em; padding:.4rem .7rem;color:var(--gris-texto);transition:all .15s; } .atajo:hover{border-color:var(--negro);color:var(--negro)} /* El que coincide con la medida que hay puesta. Al entrar, la calculadora ya viene con una medida cargada: sin esto no se entiende de dónde salió el número que está en los campos. */ .atajo.elegido{border-color:var(--negro);background:var(--negro);color:var(--blanco)} /* ── El total ──────────────────────────────────────────────── */ .total{background:var(--negro);border-radius:3px;padding:1.5rem 1.6rem;margin-top:1.9rem;position:relative;overflow:hidden} .total::before{ content:'';position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,var(--cian),var(--magenta),var(--amarillo)); } .total-linea{ display:flex;justify-content:space-between;align-items:baseline;gap:1rem; color:rgba(255,255,255,.55);font-size:.88rem;padding:.18rem 0; } .total-linea b{color:rgba(255,255,255,.9);font-weight:600} .total-plata{ display:flex;justify-content:space-between;align-items:baseline;gap:1rem; margin-top:.9rem;padding-top:.9rem;border-top:1px solid #262626; } .total-plata span{ font-family:'Barlow Condensed',sans-serif;font-size:.86rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:rgba(255,255,255,.55); } .total-plata strong{ font-family:'Barlow Condensed',sans-serif;font-size:clamp(2rem,5vw,2.7rem);font-weight:900; color:var(--amarillo);line-height:1;letter-spacing:.01em; } .total-aclara{color:rgba(255,255,255,.4);font-size:.78rem;margin-top:.8rem;line-height:1.5} /* La terminación pedida va DEBAJO del total y sin monto: no suma al número grande, se cotiza aparte. Por eso va en cian y no en amarillo, que es el color del precio. */ .total-extra{ display:flex;justify-content:space-between;align-items:baseline;gap:1rem; margin-top:.7rem;padding-top:.7rem;border-top:1px dashed #2e2e2e; color:rgba(255,255,255,.7);font-size:.86rem; } .total-extra i{color:var(--cian-texto);font-size:.72rem;margin-right:.35rem} .total-extra b{ font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.06em; text-transform:uppercase;font-size:.8rem;color:var(--cian-texto);white-space:nowrap; } /* ── El aviso del mínimo ───────────────────────────────────── */ .minimo{ background:#fffbe6;border:1.5px solid var(--amarillo);border-left-width:4px;border-radius:3px; padding:1rem 1.1rem;margin-top:1.9rem; } .minimo h4{ font-family:'Barlow Condensed',sans-serif;font-size:1rem;font-weight:900;text-transform:uppercase; letter-spacing:.04em;margin-bottom:.35rem;display:flex;align-items:center;gap:.5rem; } .minimo p{font-size:.9rem;color:var(--gris-texto);line-height:1.55} .minimo b{color:var(--negro)} .minimo-btn{ background:var(--negro);color:var(--blanco);border:none;border-radius:2px;cursor:pointer;margin-top:.75rem; font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.1em; text-transform:uppercase;padding:.6rem 1rem;transition:background .2s; } .minimo-btn:hover{background:#333} /* ── El pedido ─────────────────────────────────────────────── */ .pedido{margin-top:1.9rem} .diseno{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.1rem} .diseno button{ flex:1;min-width:150px;background:var(--blanco);border:1.5px solid var(--gris-medio);border-radius:3px; cursor:pointer;padding:.7rem .8rem;font-family:'Barlow',sans-serif;font-size:.88rem;color:var(--gris-texto); transition:all .2s;text-align:center; } .diseno button:hover{border-color:var(--gris-suave)} .diseno button.elegida{border-color:var(--negro);background:#fcfcfc;color:var(--negro);font-weight:600} .diseno-nota{ background:var(--blanco);border:1.5px solid var(--gris-medio);border-left:3px solid var(--cian); padding:.8rem .95rem;border-radius:0 3px 3px 0;font-size:.86rem;line-height:1.5; color:var(--gris-texto);margin-bottom:1.1rem; } .diseno-nota[hidden]{display:none} .diseno-nota a{color:var(--cian-texto);font-weight:600;text-decoration:underline;text-underline-offset:2px} .diseno-nota a:hover{color:var(--negro)} .diseno-nota strong{color:var(--negro)} /* El verde de WhatsApp y no el amarillo: es el botón que termina el camino, y tiene que leerse distinto de los demás de la página. VA CON DOS CLASES (a.btn-primary.btn-wsp) a propósito: el