de field_descripcion) y esta hoja lo estiliza por descendencia. La PLANTILLA aporta logo, eyebrow, gráfico, botones y banda de pie. ========================================================================== */ /* ============================================================================ §1 · TOKENS SCOPEADOS (spec §5). Nunca en el ámbito raíz del documento. ========================================================================== */ body:has(.splash-2026), .splash-2026 { --sp-canvas: #FFFFFF; /* lienzo. La crema es superficie, no lienzo */ --sp-crema: #FDF8EE; /* superficie de sección: ficha y sello pendiente */ --sp-hundido: #F4F7F3; /* carril del medidor, insignia, hover del fantasma */ --sp-tinta: #1D1F1C; --sp-tinta-2: #4F5A4C; --sp-bosque: #31562D; --sp-bosque-2: #26452A; /* hover del primario */ --sp-bosque-deep: #22401F; /* banda noche verde */ --sp-terracota: #D2603A; /* SOLO gráfico y numeral grande (spec §9, par 12) */ --sp-sol: #FBBB0E; /* SOLO anillo de foco sobre oscuro */ --sp-sol-glow: rgba(251, 187, 14, .35); --sp-hairline: rgba(49, 86, 45, .16); --sp-borde: #8A968A; /* bordes de componente que deben verse (3:1) */ --sp-r-tarjeta: 16px; --sp-r-sello: 24px; --sp-r-pildora: 999px; --sp-font: "Outfit", "Helvetica Neue", Arial, sans-serif; --sp-display: "Fraunces", Georgia, serif; --sp-ease: cubic-bezier(.16, 1, .3, 1); --sp-spring: cubic-bezier(.34, 1.56, .64, 1); } body:has(.splash-2026) { margin: 0; background: var(--sp-canvas); } /* ============================================================================ §2 · ARMAZÓN SIN `min-height`, y es deliberado (defecto D2 del veredicto visual del 4-sep-2026). Con `min-height: 100dvh` + el `margin-top: auto` del pie, el hueco botones → colinas se lo comía el sobrante del viewport y salía distinto en cada pantalla: 140 px en la del 100 % en francés y 179 en la del 50 % en castellano, donde el spec §3 pide 96 fijos. Sin alto mínimo, el `auto` queda inerte y el salto lo da el `padding-top` del pie, idéntico en las cuatro. El `margin-top: auto` se conserva porque no estorba y sostiene la banda abajo si alguna vez el mensaje se queda muy corto. ========================================================================== */ .splash-2026 { display: flex; flex-direction: column; background: var(--sp-canvas); color: var(--sp-tinta); font-family: var(--sp-font); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; } .splash-2026 ::selection { background: var(--sp-sol-glow); color: var(--sp-tinta); } /* Contenedores. `box-sizing` explícito: no se da por hecho el reboot. */ .splash-2026__top, .splash-2026__escena, .splash-2026__noche-inner { box-sizing: border-box; width: 100%; margin-right: auto; margin-left: auto; padding-right: 20px; padding-left: 20px; } .splash-2026__top, .splash-2026__noche-inner { max-width: 1160px; } /* 1120 + 2×20 de padding */ .splash-2026__escena { max-width: 760px; } /* 720 + 2×20 de padding */ /* ============================================================================ §3 · BARRA SUPERIOR (spec §6.1) Logo canónico (aro VERDE) + marca. Nada a la derecha, y el logo NO es enlace: el orden de tabulación que fija el spec §8 es primario → fantasma → contacto. ========================================================================== */ /* `position: static` NO es decorativo: css/style.css:18816 declara `header { position: fixed; top: 0; ... }` para TODA la web, y sin esta línea la barra sale de flujo y se pisa con el gráfico en móvil (medido: a 390 px la barra ocupa 0-56 y el gráfico arranca en 40). Ganamos por especificidad de clase, sin forzar nada. */ .splash-2026__top { position: static; display: flex; flex: none; align-items: center; min-height: 56px; padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--sp-hairline); } .splash-2026__marca { display: inline-flex; align-items: center; gap: 10px; color: var(--sp-bosque); font-size: 17px; font-weight: 600; letter-spacing: -.01em; } /* style.css:18400 tiene un `img { width: 100% }` global. De ahí el ancho explícito, y de ahí que el logo se declare cuadrado (spec §6.1). */ .splash-2026__logo { flex: none; width: 36px; height: 36px; } /* ============================================================================ §4 · ESCENA ========================================================================== */ .splash-2026__escena { flex: none; padding-top: 40px; text-align: center; } .splash-2026__grafico { display: flex; justify-content: center; } /* ---------------------------------------------------------------- Eyebrow */ .splash-2026__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 20px 0 0; color: var(--sp-bosque); font-size: 12px; font-weight: 700; letter-spacing: .18em; line-height: 1.3; text-transform: uppercase; } /* La calidez de la terracota vive AQUÍ, en la regla, no en el texto: 3,84:1 sobre blanco basta para un elemento gráfico (1.4.11) y no para 13 px de texto (1.4.3). Spec §9, desviación medida. */ .splash-2026__eyebrow::before { content: ""; flex: none; width: 20px; height: 2px; border-radius: 2px; background: var(--sp-terracota); } /* ============================================================================ §5 · EL MENSAJE DEL NODO field_descripcion (html_basico) llega SIN clases:
. Se estiliza por descendencia y NADA más recibe estilo — un tercer
se vería como texto corrido, a propósito. ========================================================================== */ .splash-2026__mensaje { margin: 0; } .splash-2026__mensaje > h1 { max-width: 640px; margin: 10px auto 0; color: var(--sp-bosque); font-family: var(--sp-display); font-size: clamp(2rem, 4.6vw, 2.9rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.08; text-wrap: balance; } /* El lead */ .splash-2026__mensaje > p:first-of-type { max-width: 46ch; margin: 14px auto 0; color: var(--sp-tinta-2); font-size: 17px; font-weight: 400; line-height: 1.55; } /* La ficha: tarjeta crema. Sobre lienzo blanco es 1,06:1 — el hairline es obligatorio, no decorativo (spec §5, regla 4). */ .splash-2026__mensaje > p:nth-of-type(2) { box-sizing: border-box; max-width: 540px; margin: 24px auto 0; padding: 16px; border: 1px solid var(--sp-hairline); border-radius: var(--sp-r-tarjeta); background: var(--sp-crema); color: var(--sp-tinta); font-size: 16px; font-weight: 400; line-height: 1.55; text-align: left; } /* ============================================================================ §6 · GRÁFICO POR VARIANTE (spec §6.2) Lenguaje: sellado = decidido · insignia = en curso · medidor = a medias. ========================================================================== */ /* La trampa de redesign-2026.css:91-111: la familia "Material Icons Round" está declarada SOLO para .home-2026/.site-header/.site-footer/#mobile-drawer/ .sticky-cta. Sin repetir el bloque aquí, la ligadura sale como la palabra `account_balance` en texto plano. Se repite scopeado; no se toca aquella hoja. */ .splash-2026 .material-icons-round { display: inline-block; direction: ltr; font-family: "Material Icons Round"; font-feature-settings: "liga"; font-style: normal; font-weight: normal; letter-spacing: normal; line-height: 1; text-rendering: optimizeLegibility; text-transform: none; white-space: nowrap; word-wrap: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ------------------------------------------------------------------ Sellos */ .splash-2026__sello { position: relative; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 18px; transform: rotate(-2deg); } .splash-2026__sello::before { content: ""; position: absolute; inset: 6px; border-radius: 13px; } .splash-2026__sello--pendiente { border: 1px solid var(--sp-borde); background: var(--sp-crema); } .splash-2026__sello--pendiente::before { border: 1.5px dashed var(--sp-terracota); } .splash-2026__sello--pendiente .material-icons-round { color: var(--sp-bosque); font-size: 28px; } .splash-2026__sello--hecho { background: var(--sp-bosque); /* Sombra con tinte verde, nunca negro plano (DESIGN.md §1). */ box-shadow: 0 12px 30px -12px rgba(49, 86, 45, .5); } .splash-2026__sello--hecho::before { border: 1.5px dashed rgba(253, 248, 238, .45); } .splash-2026__sello--hecho .material-icons-round { color: #FFFFFF; font-size: 32px; } /* --------------------------------------------------------------- Insignia */ /* Sin rotación: todavía no se ha sellado nada. */ /* Borde de 1,5 px y ligadura grande: con 1 px y 30/36 px de icono, el `hourglass_empty` —que es de trazo fino y hueco— quedaba como un signo diminuto perdido en un disco casi blanco, y la pantalla arrancaba en falso frente a los otros tres gráficos (defecto D4). */ .splash-2026__insignia { display: grid; place-items: center; width: 72px; height: 72px; border: 1.5px solid var(--sp-borde); border-radius: 50%; background: var(--sp-hundido); } .splash-2026__insignia .material-icons-round { color: var(--sp-bosque); font-size: 34px; } /* Pago rechazado: la MISMA insignia (nada se ha sellado) con el anillo en terracota. Es elemento gráfico, no texto, así que le basta con 3:1 — y aquí la regla de color de la marca se cumple sola: cero rojo, cero aspa. El icono se queda en bosque; el que avisa es el anillo. */ .splash-2026__insignia--rechazado { border-color: var(--sp-terracota); } /* ---------------------------------------------------------------- Medidor */ /* Sin `gap`: los tres tramos llevan su propio salto (12 px del numeral a la barra, 8 px de la barra a las etiquetas). */ .splash-2026__medidor { display: flex; flex-direction: column; align-items: center; width: 100%; } /* El padding-bottom es la itálica de Fraunces: sin él, el descendente se corta. */ .splash-2026__numeral { margin: 0; padding-bottom: 4px; color: var(--sp-terracota); font-family: var(--sp-display); font-size: clamp(3.2rem, 6vw, 4.2rem); font-style: italic; font-weight: 700; line-height: 1.1; } .splash-2026__numeral-pct { color: var(--sp-tinta-2); font-size: .55em; } /* En móvil la barra ocupa el ancho de la escena; en escritorio, los 240 px del spec §6.2.b. */ .splash-2026__barra { box-sizing: border-box; width: 100%; margin-top: 12px; height: 8px; overflow: hidden; /* El borde va en `--sp-borde` (3,08:1 sobre blanco) y no en el hairline al 16 %: sobre 8 px de alto aquel no existe y la barra parecía TERMINARSE a la mitad en vez de estar llena hasta la mitad. El componente que comunica «a medias» solo comunica si se ve el tramo que falta (defecto D5). */ border: 1px solid var(--sp-borde); border-radius: var(--sp-r-pildora); background: var(--sp-hundido); } .splash-2026__barra-relleno { display: block; width: 100%; height: 100%; border-radius: var(--sp-r-pildora); background: var(--sp-bosque); transform: scaleX(.5); transform-origin: left; } /* Las micro-etiquetas son TEXTO REAL y quedan fuera del `aria-hidden` (spec §6.2.b, defecto D6): el numeral y la barra son decorativos, esto no. Se alinean a los extremos del carril, así que comparten su ancho. */ .splash-2026__medidor-labels { display: flex; justify-content: space-between; width: 100%; margin-top: 8px; } .splash-2026__medidor-label { color: var(--sp-tinta-2); font-size: 12px; font-weight: 600; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; } /* ============================================================================ §7 · BOTONES (spec §6.4) Un solo acento de acción en la página: bosque. Cero dorado. ========================================================================== */ .splash-2026__acciones { display: flex; flex-direction: column; gap: 12px; max-width: 540px; margin: 32px auto 0; } /* Con ficha, el salto se acorta (spec §3): el hueco ya lo abre la tarjeta. */ .splash-2026__mensaje:has(> p:nth-of-type(2)) + .splash-2026__acciones { margin-top: 24px; } .splash-2026__cta { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; /* Los 28 px son la intención; en la práctica css/font-fix.css:154-166 los baja a 16 con una declaración forzada sobre `[class*="cta"]`, que captura esta clase BEM por subcadena. No se pelea con una forzada más (esta hoja no lleva ninguna) ni se renombra la clase, que es contrato: en escritorio el ancho lo fija `flex-basis` —que esa regla no toca— y en móvil el botón va a ancho completo, así que el relleno lateral no llega a verse. */ padding: 0 28px; border: 1px solid transparent; border-radius: var(--sp-r-pildora); font-family: var(--sp-font); font-size: 17px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap; transition: background-color .2s var(--sp-ease), border-color .2s var(--sp-ease), color .2s var(--sp-ease), transform .12s var(--sp-ease); } .splash-2026__cta:active { transform: translateY(1px); } .splash-2026__cta--primario { border-color: var(--sp-bosque); background: var(--sp-bosque); color: #FFFFFF; } .splash-2026__cta--primario:hover, .splash-2026__cta--primario:focus { border-color: var(--sp-bosque-2); background: var(--sp-bosque-2); color: #FFFFFF; } .splash-2026__cta--fantasma { border-color: var(--sp-borde); background: transparent; color: var(--sp-bosque); } .splash-2026__cta--fantasma:hover, .splash-2026__cta--fantasma:focus { border-color: var(--sp-bosque); background: var(--sp-hundido); color: var(--sp-bosque); } /* ============================================================================ §8 · COLINAS + BANDA «NOCHE VERDE» (spec §6.5) Esta página no tiene pie (page--node--splash.html.twig = {{ page.content }}): sin la banda, la familia se queda sin contacto y sin marca. Aparece UNA vez. ========================================================================== */ .splash-2026__pie { margin-top: auto; padding-top: 56px; } .splash-2026__colinas { display: block; width: 100%; height: 64px; } /* El −1 px mata la costura de subpíxel entre el SVG y la banda. Los 84 px de abajo son sitio medido para los widgets flotantes que inyectan por JS `layoscamp_chatbot` y `layoscamp_core/popup`, y que NO dependen de la plantilla de página: la burbuja de chat va `position: fixed; bottom: 16px; height: 52px` a ≤480 px (chatbot.css:481-484), o sea que ocupa los 68 px de abajo del viewport, justo donde caía la línea de contacto con los 36 px de antes. Con 84 quedan 16 px de aire. En escritorio no hace falta: el widget está pegado a la izquierda y el contacto va centrado. Defecto D3. */ .splash-2026__noche { margin-top: -1px; padding: 32px 0 84px; background: var(--sp-bosque-deep); } .splash-2026__noche-inner { text-align: center; } /* Juicio visual, ronda 2 (R2-1): en móvil la burbuja del chat vive en el fondo del VIEWPORT, no del documento, y en la lista de espera (la página más corta) tapaba el «+34» del teléfono sin desplazar. Un canal lateral simétrico de 84 px deja fuera de su alcance los 68 px de la izquierda; el flex-wrap ya existente parte el contacto en dos líneas centradas. Los 84 px de abajo se quedan. */ @media (max-width: 480px) { .splash-2026__noche-inner { padding-right: 84px; padding-left: 84px; } } /* Badge heritage de DESIGN.md §3: una sola vez por documento. */ .splash-2026__sello-1985 { display: inline-block; margin: 0; padding: 6px 14px; border: 1px solid rgba(253, 248, 238, .5); border-radius: var(--sp-r-pildora); color: var(--sp-crema); font-size: 12px; font-weight: 700; letter-spacing: .22em; line-height: 1.4; text-transform: uppercase; } .splash-2026__contacto { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 12px; margin: 12px 0 0; color: var(--sp-crema); font-size: 16px; font-weight: 400; } /* font-fix.css:207 baja a `min-height:auto` los enlaces dentro de
; aquí el objetivo táctil se repone por clase (spec §7). */ .splash-2026__contacto a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sp-crema); text-decoration: underline; text-underline-offset: 4px; } .splash-2026__contacto-sep { opacity: .55; } /* ============================================================================ §9 · FOCO (WCAG 2.4.7 y 2.4.11) El anillo NUNCA se expresa solo con un box-shadow claro: ese es el defecto de 1,25:1 que arrastra CampRooming y aquí no se repite. El glow es decorativo. ========================================================================== */ .splash-2026 :focus-visible { outline: 3px solid var(--sp-bosque); outline-offset: 2px; border-radius: 4px; } /* Corrección sobre el spec: la regla de arriba, tal cual, aplasta la píldora a 4 px justo al enfocarla. Se repone el radio, con la misma especificidad y después en el orden del fichero. */ .splash-2026__cta:focus-visible { border-radius: var(--sp-r-pildora); } .splash-2026__cta--primario:focus-visible { box-shadow: 0 0 0 4px var(--sp-sol-glow); } .splash-2026__noche :focus-visible { outline-color: var(--sp-sol); } /* ============================================================================ §10 · ESCRITORIO (≥ 768 px) — sube al ritmo de 1440 del spec §3 ========================================================================== */ @media (min-width: 768px) { .splash-2026__top { min-height: 64px; } .splash-2026__marca { font-size: 18px; } .splash-2026__logo { width: 40px; height: 40px; } .splash-2026__escena { padding-top: 72px; } .splash-2026__sello, .splash-2026__insignia { width: 96px; height: 96px; } .splash-2026__sello { border-radius: var(--sp-r-sello); } .splash-2026__sello::before { inset: 7px; border-radius: 18px; } .splash-2026__sello--pendiente .material-icons-round { font-size: 34px; } .splash-2026__sello--hecho .material-icons-round { font-size: 40px; } .splash-2026__insignia .material-icons-round { font-size: 40px; } .splash-2026__barra { max-width: 240px; } .splash-2026__medidor-labels { max-width: 240px; } .splash-2026__eyebrow { margin-top: 24px; font-size: 13px; } .splash-2026__mensaje > h1 { margin-top: 12px; } .splash-2026__mensaje > p:first-of-type { margin-top: 16px; font-size: 18px; } .splash-2026__mensaje > p:nth-of-type(2) { margin-top: 32px; padding: 20px 24px; font-size: 17px; } .splash-2026__acciones { flex-direction: row; justify-content: center; max-width: none; margin-top: 48px; } .splash-2026__mensaje:has(> p:nth-of-type(2)) + .splash-2026__acciones { margin-top: 32px; } /* `flex-basis` y no `min-width`: la regla de font-fix.css citada arriba fija `min-width: fit-content` de forma forzada y se lleva por delante cualquier min-width nuestro. Con base 220 px el botón mide 220, y si la etiqueta crece (alemán, francés) ese mismo `fit-content` lo deja crecer: es exactamente el comportamiento que pedía el spec §6.4. */ .splash-2026__cta { flex: 0 1 220px; min-height: 50px; } .splash-2026__pie { padding-top: 96px; } .splash-2026__colinas { height: 120px; } .splash-2026__noche { padding: 40px 0 48px; } .splash-2026__contacto { margin-top: 14px; } } /* ============================================================================ §11 · MOVIMIENTO (spec §7) — tres animaciones, ninguna en bucle. Solo transform y opacity. El estado FINAL es el estado base del CSS: sin animación la pantalla ya está bien. ========================================================================== */ @media (prefers-reduced-motion: no-preference) { .splash-2026__grafico { animation: sp-entra .38s var(--sp-ease) both; } .splash-2026__eyebrow, .splash-2026__mensaje, .splash-2026__acciones { animation: sp-entra .38s var(--sp-ease) .06s both; } .splash-2026__sello--hecho { animation: sp-asienta .5s var(--sp-spring) both; } .splash-2026__barra-relleno { animation: sp-crece .6s var(--sp-ease) .15s both; } } @keyframes sp-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* La rotación se repite en los dos extremos: un keyframe de transform sustituye la lista entera, no se compone con la del estado base. */ @keyframes sp-asienta { from { transform: rotate(-2deg) scale(.92); } to { transform: rotate(-2deg) scale(1); } } @keyframes sp-crece { from { transform: scaleX(0); } to { transform: scaleX(.5); } } @media (prefers-reduced-motion: reduce) { .splash-2026 *, .splash-2026 *::before, .splash-2026 *::after { transition-duration: .01ms; animation: none; } }