/* La home carga PRIMERO sistema-2026.css y luego este archivo. Aqui solo queda lo suyo: hero 3D, ticker, mosaico de Coque y contacto. */ /* ══════════════════════════════════════════════════════════════════════════ Ideavia 2026 · CSS de la HOME Extraido de index.html el 12-08-2026. Contenido IDENTICO, mismo orden: la extraccion no cambia ni una regla, solo saca 277 KB del HTML. NO ES EL SISTEMA. El sistema compartido es `sistema-2026.css`, que usan la agencia y los bocetos. Entre los dos hay 53 selectores con el MISMO nombre y VALOR DISTINTO -- .lead, .claim, .link, .logo svg, .pie, .paso .n y 47 mas -- y 25 reglas del sistema que tocarian elementos de la home. Fundirlos es el paso 2 y son decisiones de diseno, no un copiar y pegar. Lista en BOCETOS/_ESTADO.md. Mientras haya dos archivos, un cambio de sistema hay que aplicarlo en los dos. ══════════════════════════════════════════════════════════════════════════ */ /* ── LAS FUENTES SE SIRVEN COMO ARCHIVO (13-08-2026) ────────────────────────── Aqui habia tres /* La cursiva de verdad: `.nota` la pide y sin cara italica el navegador inclina la redonda. */ :root{ /* == FAMILIA DE COLOR · UN SOLO SITIO, cerrada el 13-08-2026 ================ Esta era la unica definicion de tinta que habia que leer, y durante meses no lo fue: el archivo tenia TRES :root con tinta (este, y otros dos al final, restos de la consolidacion del tema rojo) y mandaba el ultimo. Quien editaba este de arriba no cambiaba nada — paso el 12-08-2026. Fundidos aqui con los valores que ya ganaban, asi que el render NO cambia. No hay gris neutro en el sitio: los "grises" son el rojo de marca oscurecido. El dato que lo sostiene: el rojo PURO da 3,98:1 sobre blanco y no cumple AA en texto de cuerpo; --tinta da 5,13:1 y --tinta-secundaria 4,61:1, que es mas claro que el principal y mas oscuro que el rojo de marca — la unica manera de tener dos niveles que cumplan los dos. IDENTICOS a los de sistema-2026.css. Si se toca uno, se toca el otro. ==== */ --rojo:#E84332; /* rojo de marca (05-08-2026) */ --tinta:color-mix(in srgb, var(--rojo) 86%, #000); --tinta-secundaria:color-mix(in srgb, var(--rojo) 92%, #000); --tinta-clara:color-mix(in srgb, var(--tinta) 52%, #fff); /* Alias heredado: `--tinta-roja` tiene 10 usos repartidos por el archivo y dos nombres para el mismo color es como empezo este lio. Apunta a --tinta, asi que los cuatro tokens de arriba son BYTE A BYTE los de sistema-2026.css. */ --tinta-roja:var(--tinta); --linea:color-mix(in srgb, var(--rojo) 28%, #fff); --blanco:#fff; --kern:0em; /* kerning que une las letras de la display · solo la home */ --marco:1440px; --lat:80px; } /* El desplazamiento suave no se le impone a quien ha pedido que no. Va pegado a la regla que lo enciende, no en el bloque de reduced-motion del final: si se separan, alguien mueve una y se olvida de la otra. (Familia `html` de la fusion, cerrada el 13-08-2026: gana el sistema.) */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} } body{ background:var(--blanco); color:var(--tinta); /* Sin "Fira Sans Light" en la pila: aqui las tres fuentes van incrustadas en base64 (pesos 300, 400 y 500), asi que "Fira Sans" no puede fallar y esa segunda entrada no se alcanzaba nunca. En el sistema el mismo mapeo se hace donde toca, dentro del @font-face. (Familia `body` de la fusion, 13-08-2026: gana el sistema.) */ font-family:"Fira Sans",Helvetica,Arial,sans-serif; font-weight:300; font-size:18px; line-height:1.6; } /* ---------- utilidades de boceto ---------- */ /* caja roja = imagen o ilustración pendiente *//* `.img span` retirada de la home: ninguna pantalla en produccion la usa */ /* Proporciones. LA TARJETA DE CASO ES 3:4 — cerrado el 12-08-2026. Ya estaba asi mas abajo, en la regla de .caso-foto: la decision no cambio codigo, corrigio la guia del 25-07. OJO: `.caso .img` gana por especificidad a `.r-4x5`. No poner r-4x5 dentro de un .caso. TERCERA COPIA DE ESTA REGLA: esta, la de BOCETOS/sistema-2026.css y la de produccion/sistema-2026.css. Si se tocan las proporciones, se tocan las tres o se desincronizan — es el mismo motivo por el que hay que fundir el CSS de la home. */ /* editorial y apoyo · NUNCA dentro de .caso */ /* tarjeta y fotografia de caso */ /* tipografía */ .display{ font-family:"Fira Sans",sans-serif; font-weight:400;color:var(--rojo); letter-spacing:var(--kern); line-height:.92; text-transform:lowercase; } h1.display{font-size:clamp(56px,12.5vw,196px)} h2.display{font-size:clamp(38px,6.2vw,84px);line-height:.98} h3.display{font-size:clamp(30px,3.4vw,46px)} h2.trabajo{font-size:32px;font-weight:300;letter-spacing:-.01em;line-height:1.2} /* `.lead` retirada: la home NO la usa —usa `.lead-form`, que es otra clase y se queda—. Solo agencia usa `.lead`, y agencia carga el sistema, asi que la unica version que ha pintado algo es la de alli. (13-08-2026.) */ /* Sin `color`: lo hereda de body, y fijarlo aqui pintaria rojo sobre rojo el dia que un .txt caiga dentro de un bloque invertido. (Familia tipografia, 13-08.) */ /* Un renglon entero entre parrafos, no 18 px. `1.6em` es exactamente el `line-height` del cuerpo, asi que el hueco entre parrafos mide lo mismo que una linea y la mancha respira con un ritmo, en vez de con un numero suelto. Ademas escala si cambia el cuerpo; 18px fijos, no. (Familia tipografia, 13-08-2026: gana el sistema. Es el UNICO de los ocho que cambia lo que se ve.) */ /* botones *//* `.btn.sec` retirada: la home no la usa. La buena vive en el sistema, y ademas es la que cumple AA: `var(--tinta)` da 5,13:1 sobre blanco y el rojo de marca se queda en 3,98, que no vale para texto de 15 px. *//* `.btn.inv` retirada: la home no la usa. La buena vive en el sistema, y ademas es la que cumple AA: `var(--tinta)` da 5,13:1 sobre blanco y el rojo de marca se queda en 3,98, que no vale para texto de 15 px. *//* Identico al sistema. La home lo declaraba dos veces —`var(--rojo)` y luego `var(--tinta-roja)`, que gana— y `--tinta-roja` es un alias de `--tinta`: o sea que ya pintaba este color. Se escribe una sola vez y como el sistema. */ /* ---------- 01 cabecera ---------- *//* FAMILIA LOGOTIPO, cerrada el 13-08-2026. Mecanismo del SISTEMA, tamano de la HOME, que es la pantalla aprobada: - El color va en el CONTENEDOR y el trazado hereda con fill:currentColor, asi que un solo trazado sirve para el rojo de la cabecera y el blanco del pie. Fijar el fill en el SVG, como hacia la home, obliga a duplicarlo. - 121 px de ancho = 28 px de alto con este viewBox (relacion 4,329), que es la medida del mockup. El sistema llevaba 132 px: el logotipo era un 9 % mas grande en las fichas que en la home y cambiaba de tamano al pasar de una a otra. - El rojo es el de MARCA a pelo, no la tinta roja del texto: es marca, no lectura. *//* Filete rojo debajo, no cambio de color. En la home el marcador de pagina activa era INVISIBLE: `.nav a` es `var(--tinta)` y `.nav a.on` acababa en `var(--tinta-roja)`, que es el mismo color. Viene de la consolidacion del tema rojo, no de la fusion. (13-08-2026: gana el sistema.) */ /* ---------- 02 hero ---------- */ .hero{padding:110px 0 96px} .apostilla{font-size:16px;color:var(--tinta-secundaria);text-align:right;max-width:var(--marco);margin-top:14px} /* `.claim` retirada: la home no la usa en ningun sitio (comprobado 13-08-2026). La buena vive en sistema-2026.css. */ /* ---------- 03 logos ---------- */ .logos{display:grid;grid-template-columns:repeat(5,1fr);gap:16px} .logos .img{height:92px;font-size:11px} /* ---------- 05 dos caminos ---------- */ .caminos{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linea);border:1px solid var(--linea)} .camino{background:#fff;padding:48px;display:flex;flex-direction:column} .camino .btns{margin-top:auto;padding-top:40px} .camino .img{margin-bottom:32px} .camino ul{list-style:none;margin:28px 0 0;border-top:1px solid var(--linea)} .camino li{font-size:15px;padding:11px 0;border-bottom:1px solid var(--linea);color:var(--tinta-secundaria)} /* ---------- 06 casos ---------- */ .casos{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}/* `.caso .img` retirada de la home: ninguna pantalla en produccion la usa; y la del sistema lleva el 3:4 decidido */ /* ---------- 07 territorio ---------- */ /* `.cifras` retirada: la home no la usa. La buena vive en sistema-2026.css. */ /* `.cifra .n` retirada: la home no la usa en ningun sitio (comprobado 13-08-2026). La buena vive en sistema-2026.css. */ /* ---------- 08 pasos ---------- *//* `.paso` retirada de la home: ninguna pantalla en produccion la usa todavia *//* `.paso .n` retirada de la home: ninguna pantalla en produccion la usa todavia *//* `.paso h3` retirada de la home: ninguna pantalla en produccion la usa todavia */ /* ---------- 09 faq ---------- */ /* ---------- 10 cierre ---------- *//* `.cierre` retirada: la home no tiene ese elemento en su pie (comprobado 13-08-2026). La buena vive en sistema-2026.css. */ .cierre .display{color:#fff}/* `.cierre p` retirada: la home no tiene ese elemento en su pie (comprobado 13-08-2026). La buena vive en sistema-2026.css. */ .cierre .meta{color:rgba(255,255,255,.75);margin-top:36px} /* ---------- 11 pie ---------- *//* Gana el sistema. Dos cosas: `color:#fff` —hoy la home no lo necesita porque su pie solo lleva el logotipo, pero lo necesitara en cuanto se le pongan las columnas y los legales, que son obligatorios antes de publicar— y 96 px de relleno abajo en vez de 233. Los 233 eran el aire del mockup cuando el pie era solo el logotipo; con contenido debajo sobran. (13-08-2026.) *//* `.pie-grid` retirada: la home no tiene ese elemento en su pie (comprobado 13-08-2026). La buena vive en sistema-2026.css. *//* `.pie h4` retirada: la home no tiene ese elemento en su pie (comprobado 13-08-2026). La buena vive en sistema-2026.css. *//* `.pie ul` retirada: la home no tiene ese elemento en su pie (comprobado 13-08-2026). La buena vive en sistema-2026.css. *//* `.pie li` retirada: la home no tiene ese elemento en su pie (comprobado 13-08-2026). La buena vive en sistema-2026.css. */ .aviso{border:1px solid var(--rojo);color:var(--rojo);padding:14px 18px;font-size:13px;margin-top:20px;line-height:1.5}/* `.legal` retirada: la home no tiene ese elemento en su pie (comprobado 13-08-2026). La buena vive en sistema-2026.css. */ /* ---------- leyenda del boceto ---------- *//* `.leyenda` retirada de la home: andamiaje de boceto *//* `.leyenda .wrap` retirada de la home: andamiaje de boceto *//* `.alerta` retirada de la home: andamiaje de boceto, ninguna pantalla de produccion la usa */ .sin-tilde{color:var(--rojo);font-size:12px;letter-spacing:.06em;text-transform:uppercase;display:block;margin-top:14px;font-style:normal} /* ---------- responsive ---------- */ @media(max-width:900px){ :root{--lat:20px} body{font-size:17px} .nav{display:none} .bloque{padding:64px 0} .hero{padding:56px 0 64px} .logos{grid-template-columns:repeat(2,1fr)} /* `.cifras` retirada: la home no la usa en ningun sitio (comprobado 13-08-2026). La buena vive en sistema-2026.css. */ .camino{padding:32px} .lead{max-width:none} .apostilla{text-align:left} } /* ---------- capas del claim ---------- */ .claim-asp{font-size:clamp(24px,3.1vw,42px);line-height:1.22;font-weight:300; letter-spacing:-.018em;max-width:23ch;margin-top:52px} .claim-lit{font-size:clamp(16px,1.35vw,19px);color:var(--tinta-secundaria);max-width:52ch;margin-top:22px} /* ---------- rótulo display de los dos caminos ---------- */ .rotulo-display{font-family:"Fira Sans",sans-serif;color:var(--rojo); letter-spacing:var(--kern);font-size:clamp(34px,3.6vw,52px);line-height:1; text-transform:lowercase;margin-bottom:22px} /* `.literal` retirada: la home no la usa en ningun sitio (comprobado 13-08-2026). La buena vive en sistema-2026.css. */ /* ---------- bloque del estándar ---------- */ .estandar .logos{grid-template-columns:repeat(5,1fr)} /* INICIO HERO 3D + TICKER (generado por scripts/integrar_hero_y_ticker_en_home.py) */ :root{ --rojo:#E84332; /* rojo de marca */ --grafito:#222323; /* las palabras de la nube */ /* ---- parámetros de la escena (tocar aquí, no en el JS) ---- */ --perspectiva: 1400px; /* Alto de la pieza dibujada, no cuerpo tipográfico. Calibrado para que cada palabra (21,06px con cuerpo 11 y 38,30px con cuerpo 20): 21,06/4,7944 y 38,30/4,7944. */ --cosa-min: 4.4px; --cosa-max: 8px; --cosa-ratio: 4.7944; /* ancho/alto de la pieza "cosa" */ /* Supermuestreo de la nube. El navegador rasteriza cada palabra al tamaño que ocupa máximo; subirlo solo cuesta memoria de textura, que aquí es despreciable. */ --cosa-ss: 4; /* La pieza dibujada de "cosa", una sola vez: la comparten las 160 palabras. */ --pieza-cosa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='57.08 44.7 509.52 106.27'%3E%3Cpath d='M463.1,59.5c0.1-2,0.3-3.7,0.4-5.8h23.2v62.6c21.5-21.1,42-41.3,62.7-61.7c5.8,5.5,11.2,10.7,17.2,16.4 c-3.4,3.5-6.2,6.6-9.2,9.5c-21.9,21.7-43.9,43.3-65.8,65.1c-4,4.7-3.2,4.7-11.7,4.6c-5.5-0.4-11-0.1-17-0.1c-0.2-2.6-0.5-4.9-0.7-8 c-13.7,8.6-28,10.6-42.7,4.4c-14.6-6.1-22.8-17.8-27.3-34c-5.8,6.1-10.9,11.7-16.2,17.1c-8.7,8.8-17.9,17-30.5,19.9 c-10.3,2.4-20.5,2-30.2-2.2c-3.1-1.3-6.1-3.5-8.4-5.9c-4.7-5-4.7-11.1-0.6-16.4c3.9-5.1,10.1-6.7,16.1-4c1.7,0.8,3.2,1.9,4.8,3 c5.5,3.5,10.7,1,11.6-5.6c1-7.1-1.4-13.4-4.8-19.4c-3.3-5.9-7.1-11.5-10.7-17.2c-8,8.2-15.6,16.5-23.7,24.2 c-10.1,9.6-22.2,14.9-36.4,14.7c-3,0-4.3,1.2-5.7,3.7c-9.3,16.1-23,25.4-41.9,25.7c-20,0.3-35.2-9.8-43-28.2 c-0.5-1.2-0.9-2.3-1.5-3.9c-5.1,4.5-9.9,9-15,13.2c-14.5,11.9-30.9,18.9-49.9,18.9c-24.7,0.1-42.9-15.2-48.3-40.4 c-4.3-20.3,8.8-44.2,29.3-53.4c17.2-7.7,33.5-7.1,48.2,5.5c2.4,2.1,4.3,5,5.8,7.9c2.4,4.5,2.6,9-0.9,13.3c-3.6,4.5-8.3,6.3-13.9,5.2 c-2-0.4-4.1-1.8-5.4-3.4c-10.6-13.4-27.3-11.6-35.7,4.1c-4.3,7.9-3.9,17.7,1,25.3c5.6,8.6,14,12.2,24.2,11.7 c12.9-0.7,23.9-6.6,32.8-15.3c10.7-10.3,20.9-21.1,30.3-32.6c9.9-12.1,20.7-22,36.3-25.7c22.2-5.2,55.5,10.1,55.5,42.7 c0,0.8,0.1,1.5,0.2,2.4c7.7-1,14.1-4.4,19.3-9.6c11.2-11.1,22.2-22.5,33.2-33.8c1.7-1.7,3.4-3.4,5-5.1c5.6-6.1,12.4-4.5,16.8-1.8 c5.6,3.6,7,8.1,4.3,15.2c-1.2,3.1-0.8,5.6,0.9,8.4c5.4,9.2,10.7,18.5,15.8,28c1.5,2.7,2,5.9,3.2,9.7c4.4-4.3,8.7-8.6,13-12.8 c10.7-10.4,20.9-21.2,32.1-30.9C421,54.5,435.2,51,450.5,54.6C454.8,55.6,458.7,57.8,463.1,59.5z M462.2,101.8 c0.1-12.9-10.3-24.7-21.8-24.8c-13.1-0.1-25.3,11.4-25.6,24.2c-0.3,12.8,10.5,24.2,23.3,24.3C451.6,125.7,462,115.4,462.2,101.8z M217.7,76c-12.1-0.1-23.8,10.1-25.2,21.9c-1.5,13.1,6.5,25.3,18.6,28.2c9.8,2.4,21.6-3.9,23.4-12.3 C219.7,107.2,214.6,95.8,217.7,76z M244.8,94.6c0.5-0.4,0.6-0.5,1.2-1c-0.7-3-1.1-6-2.2-8.8c-0.1-0.3-0.3-0.5-0.6-0.7 c-1.6-1.2-4.1-0.5-4.9,1.4c-0.1,0.3-0.2,0.7-0.2,1C238.5,90.7,241.3,93,244.8,94.6z'/%3E%3C/svg%3E"); /* Tamaño fijo en escritorio, decidido por dirección el 05-08-2026: 847px de ancho. (Antes era 62.5vw, calibrado contra el PNG del prototipo original.) */ --marca-ancho: min(847px, 86vw); --marca-alto: calc(var(--marca-ancho) / 6.4336); /* la relación de "otra cosa" */ /* Las dos líneas en Fira. El cuerpo va atado al ancho del lettering (0,0273), que es composición aguanta a cualquier ancho de pantalla en vez de descuadrarse. */ --linea-tam: clamp(15px, calc(var(--marca-ancho) * .0273), 40px); --linea-arriba: .120; /* centro de "si buscas", en altos de lettering desde su borde superior */ --linea-abajo: .286; /* centro de "somos tu agencia", desde el borde inferior */ } /* ══════ HERO ══════ */ .hero3d{ position:relative; height:100vh;min-height:620px; display:grid;place-items:center; overflow:hidden; perspective: var(--perspectiva); perspective-origin:50% 46%; cursor:grab; user-select:none; -webkit-user-select:none; } .hero3d.arrastrando{cursor:grabbing} /* el mundo 3D: recibe UNA sola transform por frame */ .mundo{ position:absolute;inset:0; transform-style:preserve-3d; will-change:transform; pointer-events:none; } /* Cada palabra suelta. Tampoco es tipografía: es la misma pieza dibujada de "cosa", aplicada como máscara sobre un color plano. Una sola imagen para las 160. */ .cosa{ position:absolute;top:50%;left:50%; height:calc(var(--tam) * var(--cosa-ss)); width:calc(var(--tam) * var(--cosa-ss) * var(--cosa-ratio)); background-color:var(--grafito); opacity:var(--op,1); /* El scale va el último: se aplica antes que los desplazamientos, así que la palabra acaba centrada en (x,y,z) y con el mismo tamaño en pantalla que sin supermuestrear. */ transform:translate3d(-50%,-50%,0) translate3d(var(--x),var(--y),var(--z)) scale(calc(1 / var(--cosa-ss))); transform-style:preserve-3d; -webkit-mask:var(--pieza-cosa) center/contain no-repeat; mask:var(--pieza-cosa) center/contain no-repeat; } /* el logotipo: plano propio, giro amortiguado, nunca ilegible. Sin preserve-3d a propósito: no tiene hijos en 3D y la máscara lo aplanaría igual. */ .marca{ position:relative;z-index:5; will-change:transform; pointer-events:none; text-align:center; } /* El titular es UN h1 con las tres líneas dentro: "si buscas" + la pieza + "somos tu agencia". El texto que lee un buscador es exactamente el que se ve, ni más ni menos. */ .titular{ position:relative; width:var(--marca-ancho); margin-inline:auto; font-weight:300; /* line-height:0 aquí y 1 en cada .linea: los saltos de línea del marcado, entre el SVG y los , generan cajas de línea anónimas que descuadraban el bloque casi 50px. */ line-height:0; } /* El lettering NO es tipografía: es la pieza dibujada, en SVG y en línea. Va con fill:currentColor, así el rojo se cambia en un sitio (--rojo) y no hay fondo blanco que tape la nube. El alto lo pone la propia relación del SVG. */ .titular .pieza{ display:block; color:var(--rojo); } .titular .pieza svg{ display:block; width:100%; height:auto; fill:currentColor; } .linea{ display:block; font-size:var(--linea-tam); line-height:1; color:var(--grafito); } /* "si buscas" va en absoluto: cae DENTRO de la banda del lettering, aprovechando el blanco que deja la letra script por encima de su altura de equis. Si fuera en flujo habría que sacarlo con un margen negativo y el bloque se desbordaría por arriba. */ .linea.arriba{ position:absolute;left:0;right:0; top:calc(var(--marca-alto) * var(--linea-arriba)); transform:translateY(-50%); } .linea.abajo{ margin-top:calc(var(--marca-alto) * var(--linea-abajo) - .5em); } /* texto real del h1, disponible para lectores y buscadores, invisible en pantalla */ .oculto{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0; } /* pista de interacción, se desvanece al primer arrastre */ .pista{ position:absolute;bottom:42px;left:50%;transform:translateX(-50%); font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-secundaria); transition:opacity .4s ease;z-index:6;pointer-events:none; } .hero3d.tocado .pista{opacity:0} .hero3d.sin-arrastre .pista{display:none} /* ══════ PANEL DE PRUEBAS (fuera de la web final) ══════ */ .panel{ position:fixed;right:16px;bottom:16px;z-index:50; background:#fff;border:1px solid var(--linea);padding:14px 16px; font-size:12px;line-height:1.7;color:var(--tinta-secundaria);min-width:230px; } .panel h4{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta); margin-bottom:10px;font-weight:500} .panel label{display:grid;grid-template-columns:1fr 104px 52px;align-items:center;gap:8px} .panel input[type=range]{width:104px;accent-color:var(--rojo)} .panel .val{color:var(--tinta);font-variant-numeric:tabular-nums;text-align:right; font-weight:500;font-size:12px} .panel .fps{color:var(--rojo);font-variant-numeric:tabular-nums} .panel .salida{margin-top:12px;padding-top:10px;border-top:1px solid var(--linea); font-family:Consolas,monospace;font-size:11px;line-height:1.65;color:var(--tinta); white-space:pre-line;user-select:all} .panel button{margin-top:8px;width:100%;padding:7px 10px;font:inherit;font-size:11px; letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--rojo); border:0;cursor:pointer} .panel button:hover{background:#c9301f} @media (max-width:900px){ .panel{display:none} } @media (prefers-reduced-motion:reduce){ .pista{display:none} } /* ---------- 01 + 01b · hero 3D y ticker, los dos en el primer vistazo ---------- El ticker entra por encima del pliegue a proposito: once logotipos de restaurantes y bodegas clasifican la agencia mas rapido que cualquier titular, y ademas el movimiento avisa de que hay pagina por debajo, que es lo que un hero a pantalla completa mata. Para que encajen solos, las piezas del ticker se declaran como variables y el alto del hero se calcula restandolas. Asi hay UNA fuente de verdad: si cambia el tamano de los logotipos o el hueco, el hero se ajusta sin tocar dos numeros a mano. */ :root{ /* El comp daba 62 / 34 / 170 (los JPG a tamano nativo), pero en escritorio el ticker se comia demasiado alto y dejaba al hero en una franja. Al bajar el logotipo, el hero recupera ese espacio automaticamente: su alto se calcula restando estos. */ --tk-arriba: 54px; /* del comp eran 62 */ --tk-titulo: 26px; /* 22px de cuerpo x 1,2 de interlinea */ --tk-sangria: 40px; /* la entradilla entra menos que el margen de pagina (80px): la tira sangra hasta el borde y asi se acercan las dos */ --tk-hueco: 28px; /* del comp eran 34 */ --tk-logo: 110px; /* del comp eran 170, el alto nativo de los JPG (366x170) */ --tk-gap: 48px; /* hueco entre logotipos, y entre las dos pistas */ --tk-aire: 28px; /* lo que queda por debajo de la tira dentro del pliegue: sin esto la fila acaba pegada al canto y parece cortada */ --alto-cabecera: 77px; /* 76 de la cabecera pegajosa + su filete */ --alto-ticker: calc(var(--tk-arriba) + var(--tk-titulo) + var(--tk-hueco) + var(--tk-logo) + var(--tk-aire)); } /* svh y no vh: en movil, vh cuenta la ventana SIN la barra del navegador, asi que el ticker se iria por debajo del pliegue justo al cargar, que es cuando la barra se ve. */ .hero3d{ height:calc(100vh - var(--alto-cabecera) - var(--alto-ticker)); height:calc(100svh - var(--alto-cabecera) - var(--alto-ticker)); min-height:380px; border-top:0; } /* home2.jpg trabaja a sangre con margenes de 80px, no con el marco de 1440 del boceto: la entradilla va al margen de pagina y la tira sangra hasta el borde. */ .clientes{padding:var(--tk-arriba) 0 96px;border-top:0} .wrap-ancho{padding:0 var(--tk-sangria)} /* En redonda y sin negrita: es una entradilla, no un titular. Quien manda aqui son los logotipos. Solo "otras" va subrayado, que es el guino al display de la marca. */ .clientes-titulo{ font-weight:300;font-size:22px;line-height:1.2;color:var(--rojo); margin:0 0 var(--tk-hueco); } .clientes-titulo .subr{ text-decoration:underline; text-underline-offset:.22em; text-decoration-thickness:1px; } .tira{display:flex;gap:var(--tk-gap);overflow:hidden} .tira-pista{ display:flex;flex:none;gap:var(--tk-gap); list-style:none;margin:0;padding:0; animation:desfile 64s linear infinite; } /* Las dos pistas se mueven lo que mide una MAS el hueco entre ellas: al acabar, la segunda cae justo donde arranco la primera y el salto no se ve. */ @keyframes desfile{ to{ transform:translateX(calc(-100% - var(--tk-gap))) } } .tira-pista li{flex:none;width:calc(var(--tk-logo) * 366 / 170);height:var(--tk-logo)} .tira-pista img{display:block;width:100%;height:100%;object-fit:contain} .tira:hover .tira-pista{animation-play-state:paused} /* Ventana baja de escritorio (un portatil de 1366x768 deja unos 610px de viewport): con el reparto de arriba el hero toparia con su minimo y el ticker se iria por debajo del pliegue. Aqui el ticker adelgaza y el hero puede bajar mas. */ @media (min-width:901px) and (max-height:820px){ :root{--tk-arriba:40px; --tk-hueco:24px; --tk-logo:92px; --tk-aire:20px} .hero3d{min-height:300px} } /* En movil el reparto se aprieta: los logotipos bajan a 100px de alto para que al hero le quede sitio suficiente donde respirar. */ @media (max-width:900px){ :root{ --tk-arriba:40px; --tk-titulo:22px; --tk-hueco:24px; --tk-logo:100px; --tk-gap:32px; --tk-aire:20px; --tk-sangria:var(--lat); } .clientes{padding-bottom:56px} .clientes-titulo{font-size:18px} } @media (prefers-reduced-motion:reduce){ .tira-pista{animation:none} } /* FIN HERO 3D + TICKER */ /* INICIO BLOQUE REEL (generado por scripts/integrar_reel_en_home.py) */ /* ---------- 03 bloque de marca con el reel ---------- */ /* Dos columnas con las proporciones del mockup. Grid y no flex porque esto es una rejilla de verdad (dos pistas fijas), no un flujo que reparte sobrante. */ .marca-reel{ display:grid; grid-template-columns:590fr 619fr; /* 768 y 805 del mockup, a escala 0,7688 */ gap:71px; /* el canal de 92 px del mockup, a la misma escala */ align-items:start; } /* aspect-ratio reserva el hueco antes de que llegue el video: cero salto de layout. El valor es el nativo del archivo, no un 4:5 redondeado. */ .reel{position:relative;aspect-ratio:768/954;background:var(--rojo);overflow:hidden} .reel-video{display:block;width:100%;height:100%;object-fit:cover} .marca-reel .reel-titular{ /* Mismos valores que el h1-hub de boceto-casos.html («Casos de branding, packaging y digital...»), que es la relacion titulo/parrafo que el cliente ha dado por buena. Sustituye a los 47px/1.19 sacados del mockup: la referencia ahora es casos, no el JPG. El cuerpo ya coincidia: los dos bocetos van a 18px/1.6 heredados del body. */ /* El clamp de casos es clamp(26px,3vw,42px), y ese 3vw solo alcanza los 42 px a partir de 1400 px de ventana: por debajo de 768 se queda clavado en el minimo de 26, donde la jerarquia contra el cuerpo cae de 2,33 a 1,44 y el titular deja de serlo. La rampa se recalibra sin tocar el maximo, que es el tamaño que el cliente aprobo en escritorio. */ font-size:clamp(32px,2.6vw + 12px,42px); /* llega a 42 a los 1154 px, no a los 1400 */ /* El max-width:22ch va con el tamaño: en casos es lo que gobierna el quiebre. Sin el, a 42px el titular se va a dos lineas y pierde el corte de tres del mockup. */ max-width:22ch; /* Tracking NORMAL, no el -.055em de la display ni un negativo suave: con cualquier valor negativo cabe una palabra mas por linea. */ font-weight:300;letter-spacing:0;line-height:1.15; margin-bottom:22px; /* medido en pantalla: deja 78 px de linea a linea, como el mockup */ } /* El cuerpo NO se escala con el ancho: 18px es el del boceto y el rango legible. Lo que se respeta del mockup es la proporcion de columnas y la medida de linea. */ /* Las frases destacadas van SOLO en negrita, sin fondo. Llegaron a llevar un resaltado de rojo solido con texto blanco, y con la pagina entera en rojo dejo de tener sentido: sobre un texto que ya es rojo, un bloque rojo mas no destaca, solo ensucia. Lo dijo el cliente el 09-08-2026 y es correcto. Peso 500 y no 700: el cuerpo va en Light 300, asi que 500 ya marca de sobra y 700 pesaria demasiado al lado de una Light. */ .marca-reel .txt b, .marca-reel .txt .resalte{font-weight:500} .marca-reel .txt{max-width:none} .marca-reel .txt + .txt{margin-top:1.6em} /* en el mockup el hueco es una linea vacia exacta */ /* Caja del mockup (175x71) con el rotulo dentro. En minusculas, como se rotulan los dos territorios en todo el sitio. 24px no es capricho: el blanco sobre el rojo de marca da 3,98:1 de contraste, que NO llega al 4,5:1 que pide WCAG para texto normal pero si cumple el 3:1 de texto grande, y grande empieza en 24px. Por debajo de ahi el boton incumple. */ /* Eran 93 px, los 128 del mockup a escala. Pero el mockup no llevaba el parrafo que presenta los dos caminos; con el, los botones se descolgaban 145 px por debajo del video, cuando en el mockup cierran a la altura de su pie. Se recorta el aire aqui, que es lo que sobra, en vez de tocar el resto del ritmo. */ .marca-reel .btns{gap:16px;margin-top:52px} /* Un solo salto. A 1080 px la columna de texto mide ~444 px, que es justo lo que pide el titular a 22ch de su tamaño; por debajo de ahi se parte en cuatro lineas en una columna estrecha. Ese es el punto donde las dos columnas dejan de funcionar, no los 900 px que habia puesto a ojo. */ @media (max-width:1080px){ /* El --lat:80px del boceto deja 230 px de contenido en un movil de 390: inusable. Es un problema del sistema, no de este bloque; se corrige aqui y hay que llevarlo al boceto entero. */ .bloque-reel > .wrap{padding-left:24px;padding-right:24px} .marca-reel{grid-template-columns:1fr;gap:40px} .reel{max-width:420px} .marca-reel .reel-titular{margin-bottom:22px} .marca-reel .btns{margin-top:56px} } /* FIN BLOQUE REEL */ /* INICIO BLOQUE COQUE (generado por scripts/build_bloque_coque.py) */ /* ---------- 04 el caso de Coque ---------- */ .coque{ display:grid; grid-template-columns:659fr 466fr; /* 838 y 597 del mockup, a escala 0,781 */ gap:155px; /* el canal de 198 px del mockup */ align-items:start; } /* «Now playing:» con el triangulo de play. Triangulo de bordes CSS y no un SVG ni una imagen: son tres declaraciones, escala con la fuente y no pide un archivo mas. */ .ahora::before{ content:"";flex:none; border-style:solid;border-width:17px 0 17px 26px; /* 33x43 del mockup, a escala */ border-color:transparent transparent transparent var(--rojo); } .coque .titular-caso{ font-size:clamp(32px,2.6vw + 12px,42px); /* el mismo titular que el bloque del reel */ /* 27ch y no los 22ch del reel: cada titular tiene su caja en el PSD. La de aqui mide 838 px con la display a 61 px, o sea 13,7em ~ 27ch; con 22ch rompe en cuatro lineas y el mockup lo parte en tres. */ max-width:27ch;font-weight:300;letter-spacing:0;line-height:1.15; margin-bottom:25px; /* 94 px del mockup a escala 0,781 = 73 top-to-top */ } .coque .txt{max-width:none} .coque .txt + .txt{margin-top:1.6em} .coque .btns{margin-top:133px} /* 170 px del mockup, a escala 0,781 */ /* El mosaico es un dibujo plano de bordes duros: PNG, no JPEG. A 122 KB no compensa ahorrar 70 y meter artefactos en cada filo. */ .coque-mosaico{display:block;width:100%;height:auto} @media (max-width:1080px){ .coque{grid-template-columns:1fr;gap:48px} /* el mosaico baja DEBAJO del texto, no encima: el titular tiene que seguir abriendo */ .coque .coque-figura{order:2;max-width:420px} .coque .titular-caso{margin-bottom:32px} .coque .btns{margin-top:56px} .bloque-coque > .wrap{padding-left:24px;padding-right:24px} } /* FIN BLOQUE COQUE */ /* INICIO MOSAICO COQUE (generado por scripts/build_mosaico_animado.py) */ /* ---------- el mosaico de Coque, en piezas ---------- */ /* Mismo mecanismo que la landing de Coque: un disco por pieza, todas girando a una duracion compartida. Los tonos son los de la ilustracion, medidos en la imagen del PSD; el rojo NO es el de Ideavia (#E84332) sino el de la propia ilustracion de Coque: es la identidad del cliente y heredarle nuestro rojo la falsearia. */ .mosaico{ --spin-duration:18s; /* el mismo valor que usa la landing de Coque */ --pz:69%; /* el disco ocupa 69 % de su celda, como en el mockup */ --n:#292929; --g:#939393; --c:#CFCFCF; --r:#FD352C; display:grid;grid-template-columns:repeat(5,1fr); gap:0;width:100%;aspect-ratio:597/720; } .pz-celda{display:flex;align-items:center;justify-content:center} .pz{ width:var(--pz);aspect-ratio:1;border-radius:50%; position:relative; animation:pz-giro var(--spin-duration) linear infinite; /* Delay negativo = arranca ya girada, en la orientacion que tiene en el mockup. --ini va SIN unidad a proposito: con 'deg', `var(--ini)/360` sigue siendo un angulo y un angulo por un tiempo no es una operacion valida, el calc entero queda invalido y todas las piezas arrancan a cero. Sin unidad es un numero puro y multiplica bien. */ animation-delay:calc(var(--ini) / 360 * var(--spin-duration) * -1); transform-origin:50% 50%; will-change:transform; } @keyframes pz-giro{ from{transform:rotate(0)} to{transform:rotate(360deg)} } .pz--disco {background:var(--t1)} .pz--media {background:linear-gradient(90deg,transparent 50%,var(--t1) 50%)} .pz--tres {background:conic-gradient(transparent 0deg 90deg,var(--t1) 90deg 360deg)} .pz--cuarto {background:conic-gradient(var(--t2) 0deg 90deg,var(--t1) 90deg 360deg)} .pz--bicolor{background:linear-gradient(160deg,var(--t2) 50%,var(--t1) 50%)} /* El rabito de la Q. Regla del cliente (09-08-2026): va RADIAL —su eje largo apunta al centro del disco, como un radio— y solo asoma fuera del circulo un tercio de su altura. Puesto en vertical y centrado en horizontal ya es radial, asi que NO lleva rotate: el giro se lo da el disco, que es quien rota. Antes iba con un rotate(31deg) fijo copiado del mockup y por eso salia de traves en cuanto la pieza giraba. La cuenta, en % de la caja del disco (el lado son 2R, o sea el radio es el 50 %): alto h = 46 % -> fuera h/3 = 15,3 % -> el extremo exterior queda a R + h/3 centro del rabito a R - h/6 = 50 - 7,7 = 42,3 % por debajo del centro del disco top = 50 + 42,3 - h/2 = 69,3 % left = 50 - 29/2 = 35,5 % */ .pz--marca{background:var(--t1)} .pz--marca::after{ content:"";position:absolute; left:35.5%;top:69.3%;width:29%;height:46%; background:var(--n); } /* El mosaico es ilustracion: si el sistema pide menos movimiento, se queda quieto. */ @media (prefers-reduced-motion: reduce){ .pz{animation:none} } /* FIN MOSAICO COQUE */ /* INICIO BLOQUE CASOS (generado por scripts/build_bloque_casos.py) */ /* ---------- 05 rejilla de casos ---------- */ /* Iba sobre una banda gris a sangre, como en el mockup. Fuera desde el 09-08-2026: al hacer scroll parecia un pie de pagina y cortaba la lectura antes de tiempo. Ahora va sobre el blanco del resto, y la separacion la hace el filete de .bloque, como en cualquier otra seccion, mas el aire de arriba y abajo. */ .bloque-casos{padding:57px 0 82px} .casos-rejilla{ display:grid;grid-template-columns:repeat(3,1fr); gap:30px; /* el hueco de 41 px del mockup, a escala */ } /* Las tres fotos del PSD tienen proporciones distintas (0,766 / 0,752 / 0,744). En una rejilla eso se ve: se normalizan a 3:4 con object-fit para que midan las tres igual, que es como estan puestas en el mockup. */ .caso-foto{ display:block;width:100%; /* height:auto es imprescindible: los atributos width/height del se mapean a las propiedades CSS, y con una altura fija en px el aspect-ratio no se aplica —solo actua cuando una de las dos dimensiones es auto—. Sin esto las fotos salen a 0,543 en vez de 3:4. Los atributos se mantienen porque reservan el hueco antes de que carguen. */ height:auto;aspect-ratio:3/4;object-fit:cover; background:var(--linea);margin-bottom:17px; } /* La tarjeta entera es un enlace, asi que hay que quitarle el azul y el subrayado del navegador o el rotulo y el titular dejan de leerse como texto. El foco SI se marca: es la unica pista que tiene quien navega con teclado. */ .casos-rejilla .rotulo{margin-bottom:17px} .casos-rejilla .chips{margin-top:26px} @media (max-width:1080px){ .casos-rejilla{grid-template-columns:1fr;gap:48px} .bloque-casos > .wrap{padding-left:24px;padding-right:24px} } /* FIN BLOQUE CASOS */ /* INICIO BLOQUE CONTACTO (generado por scripts/build_bloque_contacto.py) */ /* ---------- 06 contacto: la ilustracion y el formulario ---------- */ .contacto{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start} /* ---------- la ilustracion del pasatiempo, vectorial y animada ---------- Era un JPG vertical de cuatro lineas (583x770). El vector es apaisado de tres, proporcion 1,274, asi que el tope de 583px —que era el ancho nativo del JPG— ya no significa nada: la pieza ocupa su columna entera. */ /* El negro del pasatiempo. Es la unica excepcion a «todo el texto va en rojo», y es deliberada: aqui no hay texto, hay el dibujo de una hoja impresa. Lo que viene impreso —puntos, numeros, instruccion— es tinta negra; lo que se dibuja encima es el rojo de marca. Ese contraste es la ilustracion. #2B2421 es el negro calido del original, no un neutro puro. */ .contacto-ilu{display:block;width:100%;height:auto;--ilu-negro:#2B2421} .contacto-ilu .ilu-linea{fill:var(--rojo)} .contacto-ilu .ilu-punto{fill:var(--ilu-negro);transform-box:fill-box;transform-origin:center} .contacto-ilu .ilu-blanco{fill:var(--blanco)} .contacto-ilu .ilu-lapiz{fill:var(--rojo)} .contacto-ilu .ilu-cifra, .contacto-ilu .ilu-instruccion{font-family:"Fira Sans",Helvetica,Arial,sans-serif; font-weight:300;font-size:12px;fill:var(--ilu-negro)} /* Destino del boton «Hablemos» de la cabecera. La cabecera es sticky, asi que el ancla tiene que dejarle su alto libre o el titular queda debajo: mide 77px en escritorio y 139 por debajo de 900, donde la fila se parte en dos. Se le suman 16 de aire. El desplazamiento suave ya lo pone html{scroll-behavior:smooth}, y ese mismo sistema lo desactiva con prefers-reduced-motion. */ /* MEDIDO EL 28-08-2026, porque el numero de arriba se habia quedado viejo. La cabecera NO se parte en dos filas a los 900: se parte cuando el contenido envuelve, entre 430 y 480 px. No hay media query que lo cause, asi que no hay corte que copiar. Alturas reales medidas: 77 px a 1280, 81 px de 480 a 900, y 139 px por debajo de 430. Con el corte en 900 el tramo intermedio se llevaba 155 px teniendo una cabecera de 81, o sea 74 px de aire de mas: el formulario aterrizaba visiblemente bajo. A cada tramo, su altura + 16 de aire. El limite de abajo se pone en 479 y no en 460 a proposito: pasarse de margen solo deja aire, quedarse corto esconde el titular debajo de la cabecera. */ #hablemos{scroll-margin-top:93px} /* 97 = 81 de cabecera + 16 de aire. OJO A UN ESPEJISMO: la cabecera de la HOME mide 81 px por debajo de 900, y la de agencia.html 75, con el MISMO marcado. La diferencia la mete esta hoja, que solo carga en la home. Al medir alturas de cabecera para calibrar un ancla, medir EN LA PAGINA DEL ANCLA: #hablemos solo existe aqui, asi que la referencia buena es 81. Quitar el selector de idioma del menu el 28-08-2026 NO cambio esta altura; lo parecio por medir en agencia. */ @media (max-width:900px){ #hablemos{scroll-margin-top:97px} } /* EN MOVIL, ENCUADRE ELEGIDO A OJO POR EL USUARIO el 28-08-2026, y por eso NO sigue la formula de cabecera + 16. Son 55 px: la seccion arranca por debajo de la cabecera de 139 y se le comen los primeros 84 px. No es un descuido — ahi empieza la ilustracion del pasatiempo y el titular cae mucho mas abajo, asi que el recorte encuadra mejor. Si alguna vez cambia lo que hay al principio de la seccion, este numero deja de valer y hay que volver a elegirlo mirando. */ @media (max-width:479px){ #hablemos{scroll-margin-top:55px} } /* El estado base es la ilustracion HECHA. Los puntos solo se apagan cuando el guion ya ha confirmado que va a animarla (.ilu-lista), y la tinta roja solo se enmascara en ese mismo momento. Sin JavaScript, si falla, o si el observador no dispara, se ve la ilustracion entera. Nunca en blanco. */ .contacto-ilu.ilu-lista .ilu-punto{opacity:0} @media (prefers-reduced-motion: reduce){ .contacto-ilu.ilu-lista .ilu-punto{opacity:1} } .contacto .lead-form{font-size:22px;line-height:1.5;font-weight:300;margin-bottom:48px} /* La negrita del lead va en 500, la del resto del sitio. Sin esto el navegador la sintetizaba desde el 300 y salia en 400: mas fina que cualquier otra negrita de la pagina. (19-08-2026) */ .contacto .lead-form b{font-weight:500} /* El lead de contacto era un solo h2 con cuatro frases dentro: el lector de pantalla lo recitaba entero como rotulo y diluia el pasaje citable. Se partio en h2 (la frase gancho) + p (el resto). Estas dos reglas anulan los margenes entre ambos para que el bloque siga viendose exactamente igual. (25-08-2026) */ .contacto .lead-form-titulo{margin-bottom:0} .contacto .lead-form-texto{margin-top:0} /* Campos reales, no una imagen de formulario. El label existe SIEMPRE aunque no se vea: un placeholder no es una etiqueta —desaparece al escribir y muchos lectores de pantalla no lo anuncian—. */ .campo label{ position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap; } .campo input,.campo textarea{ width:100%;font:inherit;font-size:16px;color:var(--tinta); padding:14px 18px;border:1px solid var(--linea);background:#fff;border-radius:0; } .campo textarea{min-height:170px;resize:vertical} .campo input::placeholder,.campo textarea::placeholder{color:var(--tinta-clara)} .privacidad a{color:var(--tinta)} .contacto .btn-enviar{min-width:181px;min-height:74px;font-size:24px; display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--rojo);background:var(--rojo);color:#fff;cursor:pointer; font-family:inherit;font-weight:300;letter-spacing:.01em} @media (max-width:1080px){ .contacto{grid-template-columns:1fr;gap:40px} .bloque-contacto > .wrap{padding-left:24px;padding-right:24px} /* En una columna la ilustracion manda, asi que se sale de los 24px de la caja y deja solo 8 de aire a cada lado. Los numeros son diminutos a este tamano y cada punto de ancho cuenta; el formulario se queda donde estaba. */ .contacto-ilu{margin-inline:-16px;width:calc(100% + 32px);max-width:none} } /* FIN BLOQUE CONTACTO */ /* INICIO PIE (generado por scripts/build_pie.py) */ /* ---------- 07 pie ---------- */ /* Va a sangre: el color lo pone el