/* ============================================================ BRAND JUNGLE — RONDA 37 Capa de correccion. Se carga la ultima en el de cada pagina, despues de round36.css en la home y despues de dashboards.css en los casos. round36.css queda congelado. #1 Altura fija de los dashboards al cambiar de modulo #2 Heading de WHY US en negro #3 Resplandor del mockup de Harmony mas prominente #6 Parpadeo al pasar el cursor por la galeria de Los Espiritus #4 (header estatico) va en shell.css: hay que desactivar un !important y pelearlo desde aqui dejaria dos reglas en hojas distintas discutiendo por el mismo header. #5 (mockup de ExplorActive) y #7 (footer) son cambios de HTML. ============================================================ */ /* ------------------------------------------------------------ #1 — ALTURA FIJA DE LOS DASHBOARDS El marco no debe crecer ni encoger segun el modulo activo. En escritorio ya era constante: dashboards.css fija .pf-body y .crm-body. El problema estaba debajo de 899px, donde la misma hoja devolvia height:auto y cada panel volvia a medir lo suyo. Se fija el AREA DE PANELES, no el contenedor entero. Asi la navegacion conserva su alto natural — que en movil varia porque las pestanas hacen wrap — y solo el marco del panel queda quieto. Alturas medidas en navegador sobre el panel mas alto de cada idioma, con margen para que ninguno necesite scroll interno: home panel mas alto 582px -> 600px harmony panel mas alto 579px -> 600px (la variante html[lang="es"] se retiro con la web en espanol) ------------------------------------------------------------ */ @media (max-width: 899px) { #platform .pf-main, #plataforma .pf-main { height: 600px; min-height: 600px; overflow: hidden; } #platform .pf-panel, #plataforma .pf-panel { height: 100%; overflow: hidden; } /* Si algun modulo crece con contenido futuro, que scrollee por dentro en lugar de estirar el marco. */ #platform .pf-panel > *:not(.pf-panel-foot), #plataforma .pf-panel > *:not(.pf-panel-foot) { min-height: 0; } .crm-body { height: 600px; min-height: 600px; overflow: hidden; } .crm-panel { height: 100%; overflow: hidden; } } /* ------------------------------------------------------------ #2 — HEADING DE WHY US EN NEGRO round36.css:1420 ya pedia negro con var(--c-ink, #000200), pero el fallback nunca llegaba a disparar: theme.css incluye #why en una lista de IDs de banda oscura que redefine --c-ink como var(--tx-1), y --tx-1 es #fafbf8 en el :root del tema oscuro. El resultado era platino sobre banda clara. Se corrige el token en el ambito de la seccion, no el color del h2: asi arrastra tambien a los th de las filas de comparacion, que heredan de --c-ink por el mismo camino. ------------------------------------------------------------ */ #why { --c-ink: #000200; --tx-1: #000200; } /* ------------------------------------------------------------ #3 — RESPLANDOR DEL MOCKUP DE HARMONY MAS PROMINENTE El gradiente ya existia en shell.css (.laptop::before/::after) pero se leia apagado por tres motivos: el blur diluia el pico antes de salir del marco, el inset era corto y dejaba la parte luminosa debajo del bezel, y sobre el negro de Harmony los verdes de baja alfa se apagaban. Se escala desde fuera del marco en vez de por debajo. Acotado a #solution-web: .laptop lo usan Harmony y ExplorActive, y ExplorActive no entraba en esta correccion. Se conserva la paleta verde de Brand Jungle. Meter el lima de Harmony (#C7FF00) daria mas contraste sobre esta pagina, pero cambiaria la firma de estudio del mockup y eso no se pidio. ------------------------------------------------------------ */ #solution-web .laptop::before { inset: -26% -20% -34%; background: radial-gradient(52% 46% at 50% 46%, rgba(169, 220, 92, 0.52) 0%, transparent 68%), radial-gradient(72% 62% at 50% 56%, rgba(156, 176, 1, 0.40) 0%, transparent 72%), radial-gradient(96% 84% at 50% 64%, rgba(63, 122, 24, 0.30) 0%, transparent 78%), radial-gradient(124% 104% at 50% 72%, rgba(40, 46, 2, 0.26) 0%, transparent 84%); filter: blur(72px); } #solution-web .laptop::after { inset: -5% -4% -10%; background: radial-gradient(64% 62% at 50% 50%, rgba(169, 220, 92, 0.30) 0%, transparent 70%); filter: blur(32px); } /* ------------------------------------------------------------ #6 — PARPADEO EN LA GALERIA DE LOS ESPIRITUS La correccion #69 envolvio cada imagen en un para el visor, pero .img-slot.filled img (0,2,1) seguia ganando a .eco-zoom img (0,1,1) y dejaba la imagen absoluta anclada al .img-slot: se escapaba del boton, que quedaba en 213x0px. Al entrar el cursor, el transform del :hover convertia al boton en bloque contenedor y la imagen saltaba a inset:0 de una caja de cero alto. Desaparecia, el cursor dejaba de estar encima, el hover se apagaba, la imagen volvia. Ese era el bucle. De paso, el clic tampoco llegaba nunca al visor. Se hace que el boton ocupe el hueco y la imagen se ancle a el: asi el transform ya no cambia el bloque contenedor de nada. ------------------------------------------------------------ */ .img-slot.filled .eco-zoom { position: absolute; inset: 0; width: 100%; height: 100%; } .img-slot.filled .eco-zoom img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* El translateY(-3px) descubria el borde superior del .img-slot, que tiene fondo propio y overflow:hidden. El mismo gesto con escala se queda dentro del hueco. */ @media (hover: hover) { .img-slot.filled .eco-zoom:hover { transform: none; } .img-slot.filled .eco-zoom:hover img { transform: scale(1.04); } .img-slot.filled .eco-zoom img { transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); } } /* ------------------------------------------------------------ #8 — FOOTER SIN ENLACES DIRECTOS A LOS CASOS Revierte la cuarta columna que introdujo el #7. Queda el enlace "Portfolio" de la columna de secciones. Las rejillas vuelven a 1.5fr 1fr 1fr, que es lo que ya definen sections.css y shell.css, asi que aqui no hace falta redeclararlas. ------------------------------------------------------------ */ /* ------------------------------------------------------------ #9 — HEADER MOVIL IGUAL EN TODAS LAS PAGINAS Habia dos hojas de header conviviendo: la home usa sections.css + round36.css, las tres paginas de caso usan header.css, y la home ES se quedaba sin las mejoras de la ronda 36 por no cargar round36.css. Resultado: 16 diferencias en cada caso y 2 en la ES. Se porta aqui el bloque canonico de la home (round36.css:303-317) con selectores que ganan a header.css. El z-index NO se iguala: la home usa 50 y los casos 60. En los casos el hero sube 88px por detras del header (correccion #82 de ExplorActive) y ese margen esta trabajando. Tocarlo seria volver sobre lo que arreglo el #4. Tampoco se toca el background:transparent!important de ExplorActive: es intencional para que la foto pase por detras. ------------------------------------------------------------ */ .site-header { padding-top: 14px; padding-bottom: 0; } .site-header .nav { position: static; width: min(1200px, 100% - clamp(2.5rem, 5vw, 5rem)); max-width: 100%; margin-inline: auto; backdrop-filter: blur(18px) saturate(1.3); border-color: rgba(250, 251, 248, 0.13); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.10); padding-left: 16px; padding-right: 24px; } /* base.css define .wordmark, pero las paginas de caso no la cargan: salia 16px sin tracking en vez de 17px / 0.14em. */ .site-header .wordmark, .site-header .nav-brand-text { font-size: 1.0625rem; letter-spacing: 0.14em; } /* Los mismos escalones de ancho que la home (platform.css + redesign.css). header.css daba calc(100% - 24px) en su unico breakpoint y la pildora salia 8px mas ancha en los casos. */ @media (max-width: 1023px) { .site-header .nav { width: calc(100% - 100px); } } @media (max-width: 719px) { .site-header .nav { width: calc(100% - 2rem); padding-right: 1.5rem; padding-left: 1rem; } .site-header .nav-logo { width: 78px; height: 78px; margin-block: -9px; } .site-header .nav-toggle { margin-left: 0.5rem; margin-right: 0; } .site-header .nav-brand-text, .site-header .wordmark { font-size: 0.875rem; letter-spacing: 0.1em; } } @media (max-width: 419px) { .site-header .nav { width: calc(100% - 1.5rem); padding-left: 0.875rem; padding-right: 1.125rem; } .site-header .nav-logo { width: 68px; height: 68px; margin-block: -7px; } .site-header .nav-brand-text, .site-header .wordmark { font-size: 0.8125rem; } } /* ------------------------------------------------------------ #11 — AIRE BAJO EL PARRAFO DE "THE WEBSITE" (ExplorActive) El .section-lede tenia margin-bottom:0 y el .website-pin-outer no aporta margen propio: el parrafo acababa y el mockup empezaba en el mismo pixel. ------------------------------------------------------------ */ .website-section .section-lede { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); } /* ------------------------------------------------------------ #12 — TITULAR DE "THE WEBSITE" INVISIBLE (ExplorActive) El h3 lleva color:var(--cream) en estilo inline y la seccion es cream: color y fondo identicos, rgb(249,254,231) los dos. Mismo patron que el #2 de WHY US — un color de banda oscura que quedo sobre banda clara. Se usa el tinte del parrafo de debajo, que si se lee. Hace falta !important porque el color va inline. ------------------------------------------------------------ */ .website-section .section-head { color: var(--ink, #1a2410) !important; } /* ------------------------------------------------------------ #13 — HEADER DE LA MICROWEBSITE SOBRE LA FOTO DEL HERO La .mini-nav era sticky dentro del flujo: ocupaba 72px y empujaba el track hacia abajo, dejando ver el fondo cream del viewport por encima de la imagen. Esa era la banda blanca. Nav y track comparten celda de grid, asi que el track arranca en 0 y la nav se superpone. Sin offsets ni alturas calculadas: el logo va en vw y el padding en %, cualquier numero fijo se desalinearia al cambiar de viewport. ------------------------------------------------------------ */ #laptopViewport { display: grid; grid-template-columns: 1fr; } #laptopViewport > .mini-nav { grid-area: 1 / 1; align-self: start; position: sticky; top: 0; z-index: 10; } #laptopViewport > .laptop-track { grid-area: 1 / 1; } /* ------------------------------------------------------------ #14 — CENTRAR EL ULTIMO PANEL DEL MICROSITE (ExplorActive) .mini-outro ya tenia justify-content:center, pero el margin-top:auto del pie absorbia todo el espacio libre antes de que justify-content pudiera repartirlo, y empujaba los dos primeros bloques contra el techo. El padding 6% 7% 0 sumaba otros 54px de desvio al no tener contrapeso abajo. Acotado a .laptop-track para no tocar el margin-top:auto de los otros paneles, donde el pie si debe ir abajo. ------------------------------------------------------------ */ .laptop-track .mini-outro { padding-block: 7%; } .laptop-track .mini-outro > .mini-footer { margin-top: 0; } /* ============================================================ #7 · Las preguntas del FAQ como encabezados reales ------------------------------------------------------------ Eran sueltos: Google las leía por el FAQPage, pero un crawler que recorre la estructura de encabezados no veía ninguna de las 20 — y eso es justo lo que le vendemos al cliente (AEO/GEO). Ahora van en

. El sigue siendo flex, así que el h3 pasa a ser su primer item y el "+" de ::after el segundo: el render no cambia ni un pixel, sólo hay que anular el estilo propio del h3. ============================================================ */ .faq-item summary > .faq-q { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; } /* ============================================================ #8 · Captura de leads: honeypot y confirmación ------------------------------------------------------------ Estas clases las pinta el JS (journey.js y discovery-form.js) y venían de sections-dark.css / base.css en la rama que ya tenía backend. El v37 se ramificó antes, así que aquí no existían: el honeypot se veía en pantalla con su etiqueta "Leave this field empty", y la confirmación salía sin estilo. ============================================================ */ /* Fuera de la vista Y del tabbing. Si esto falta, el campo trampa se ve — y además invita a rellenarlo, que es justo lo contrario. */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Sustituye al formulario tras guardar. Los tres formularios comparten este bloque y los tres viven sobre fondo oscuro. Entra con un fade+lift corto — sólo transform y opacity, nada que provoque layout. */ .lead-done { border-left: 2px solid var(--c-chartreuse); padding: 1.25rem 0 0.25rem 1.25rem; outline: none; animation: lead-done-in var(--dur-reveal) var(--ease-out) both; } @media (prefers-reduced-motion: reduce) { .lead-done { animation: none; } } @keyframes lead-done-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .lead-done-title { font-family: var(--f-display); font-size: var(--fs-h3); line-height: 1.15; color: var(--c-white); margin: 0 0 0.5rem; } .lead-done-text { font-size: var(--fs-body); color: var(--c-platinum); margin: 0 0 1.5rem; max-width: 46ch; } .lead-done-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } @media (max-width: 479px) { .lead-done-actions { flex-direction: column; align-items: stretch; } }