/* ============================================================ BRAND JUNGLE — RONDA 38 Capa de correccion. Se carga la ultima en el , despues de round37.css. round36.css y round37.css quedan congelados. #1 Franja clara de 2px en el borde superior de la pagina #3 Rebalanceo del footer al perder la columna de contacto #5 Contraste del panel "Your recommended path" #6 Cebado del bosque (la parte CSS; el resto va en el JS) #2 (selector EN/ES) y #7 (tiers BASIC/MID/HEAVY) son cambios de HTML: se eliminaron de los dos Blade. El CSS de .lang-switch y .journey-tiers se deja en sus hojas, sin uso, por si vuelven. #4 (boton del FAQ) es un cambio de HTML: se movio de la cola del hero al interior de la seccion #faq. ============================================================ */ /* ------------------------------------------------------------ #1 — FRANJA CLARA DE 2px ARRIBA .site-header mide 78px reales (64 de .nav + 14 de padding-block superior). El token que lo compensa via margin-bottom negativo valia 76px (72 en movil), asi que
arrancaba 2px por debajo del borde y por ese hueco asomaba el platinum del body. Se corrige el token, no el sintoma: --header-h alimenta ademas el padding-top del hero y el scroll-margin-top de los anclajes, y las tres medidas deben hablar del mismo header. ------------------------------------------------------------ */ :root { --header-h: 78px; } @media (max-width: 719px) { /* luxe.css lo bajaba a 72px aqui; el header mide 78 en todos los anchos, el nav no cambia de alto en el breakpoint */ :root { --header-h: 78px; } } /* ------------------------------------------------------------ #3 — FOOTER SIN LA COLUMNA DE CONTACTO Eran tres columnas (1.5fr 1fr 1fr): marca | navegacion | contacto. Al caer la tercera, se rebalancea a dos y la navegacion se alinea al borde derecho: la marca conserva su peso y el footer cierra por el lado opuesto en vez de dejar un hueco donde estaba el contacto. ------------------------------------------------------------ */ .footer-grid { grid-template-columns: 1.2fr 1fr; } .footer-grid .footer-nav { justify-self: end; text-align: right; } @media (max-width: 719px) { /* En una sola columna la alineacion a la derecha no aplica */ .footer-grid { grid-template-columns: 1fr; } .footer-grid .footer-nav { justify-self: start; text-align: left; } } /* ------------------------------------------------------------ #5 — CONTRASTE DEL PANEL "YOUR RECOMMENDED PATH" El panel se diseno sobre fondo claro y luego el fondo paso a cristal oscuro (rgba(40,46,2,.58)), pero los colores de texto siguieron apuntando a la paleta clara: el titulo quedaba en #000200 sobre verde oscuro, 1.31:1 medido. Ilegible. Se reasigna la escala sobre platinum manteniendo la jerarquia en tres pesos. Contrastes medidos sobre el fondo real: titulo ~15:1 cuerpo ~9:1 auxiliar ~7:1 eyebrow ~9:1 Todos por encima de AA (4.5:1). ------------------------------------------------------------ */ /* Titulo del plan recomendado */ .journey-panel .reco-variant { color: var(--c-platinum, #fafbf8); } /* Eyebrow: BRAND / BRAND + WEB / MARKETING + CONTENT / FULL ECOSYSTEM */ .journey-panel .reco-variant b { color: #dcdc62; } /* Cuerpo: descripcion del plan, etiquetas del formulario y enlaces */ .journey-panel .reco-line, .journey-panel .form-field label, .journey-panel .reco-alt a, .journey-panel .reco-extra a { color: rgba(250, 251, 248, 0.72); } /* Auxiliar: kicker en cursiva y notas sueltas */ .journey-panel .reco-kicker, .journey-panel .form-note { color: rgba(250, 251, 248, 0.62); } /* Enlaces: el subrayado tambien venia de la paleta clara */ .journey-panel .reco-alt a, .journey-panel .reco-extra a { text-decoration-color: rgba(250, 251, 248, 0.4); } .journey-panel .reco-alt a:hover, .journey-panel .reco-alt a:focus-visible, .journey-panel .reco-extra a:hover, .journey-panel .reco-extra a:focus-visible { color: var(--c-platinum, #fafbf8); text-decoration-color: currentColor; } /* Boton de cierre del panel */ .journey-panel .journey-close { color: rgba(250, 251, 248, 0.72); } .journey-panel .journey-close:hover, .journey-panel .journey-close:focus-visible { color: var(--c-platinum, #fafbf8); } /* ------------------------------------------------------------ #6 — CEBADO DEL BOSQUE (parte CSS) Las ramas crecen con una transicion de stroke-dashoffset desde su longitud (--L) hasta 0. En la primera apertura --L se medía despues de insertar los , asi que el primer calculo de estilo caia en el fallback de var(--L, 0): las ramas nacian ya dibujadas y no habia nada que animar. A partir de la segunda apertura los ya existian con --L puesto y si animaba. discovery-forest.js marca ahora el stage con .is-priming mientras construye. Esta regla suspende las transiciones en ese intervalo para que el estado cerrado quede fijado sin animarse. ------------------------------------------------------------ */ .discovery-stage.is-priming .discovery-branch, .discovery-stage.is-priming .discovery-leaf, .discovery-stage.is-priming .discovery-mote { transition: none !important; animation: none !important; }