/** * Section variants + watermark wrapper. * UNLAYERED. */ /* Section rhythm via tokens (Fase 2 foundations — AC-R3.2/R3.3). * Default = --space-section-md (6rem / 96px). Modifiers --sm (4rem) and * --lg (8rem) for tighter / looser blocks. Vertical padding only; the * inner wrapper handles horizontal gutters. */ body.scc-fase0 .sc-section { padding: var(--space-section-md) 0; position: relative; } body.scc-fase0 .sc-section--sm { padding: var(--space-section-sm) 0; } body.scc-fase0 .sc-section--lg { padding: var(--space-section-lg) 0; } body.scc-fase0 .sc-section--dark { background: #000; color: #fff; } body.scc-fase0 .sc-section--cream { background: var(--color-cream, #F8F7F2); } body.scc-fase0 .sc-section--white { background: #fff; } body.scc-fase0 .sc-section--wm { overflow: hidden; } body.scc-fase0 .sc-section__inner { position: relative; max-width: 1280px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); } body.scc-fase0 .sc-section__inner--wide { max-width: 1440px; } body.scc-fase0 .sc-section__inner--narrow { max-width: 960px; } /* Typeset 2026-06-07: weight 300→400 después del quieter. Las H2 ahora son * el ancla visual de cada sección (sin eyebrow scaffolding); weight 300 las * dejaba tímidas. 400 en Merriweather variable mantiene voz editorial sin * caer en corporate-bold. text-wrap: balance reparte líneas pares. */ body.scc-fase0 .sc-section__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 1.5rem; text-wrap: balance; } body.scc-fase0 .sc-section__title--lg { font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: -0.02em; } body.scc-fase0 .sc-section__lead { font-size: 1.0625rem; line-height: 1.7; /* 65ch cumple la regla 65-75ch del DESIGN.md. Antes: 56rem ≈ 95ch a 17px * estiraba el lead más allá del confort de lectura en pantallas anchas. */ max-width: 65ch; margin: 0 0 1.5rem; text-wrap: pretty; } body.scc-fase0 .sc-section--dark .sc-section__title { color: #fff; } body.scc-fase0 .sc-section--dark .sc-section__lead { color: rgba(255,255,255,0.78); } /* Modifier explícito para H2 sobre dark fuera de .sc-section--dark * (e.g. .sc-stats-dark + CTA section que viven con clase --dark pero * a veces el H2 hereda --light si el contenedor no está bien armado). * Polish 2026-06-07: existir como clase, no como inline style. */ body.scc-fase0 .sc-section__title--on-dark, body.scc-fase0 .sc-section__title.sc-section__title--on-dark { color: #fff; } body.scc-fase0 .sc-watermark { position: absolute; font-family: var(--font-serif); font-weight: 300; font-size: clamp(5rem, 18vw, 16rem); letter-spacing: -0.04em; line-height: 1; color: #000; opacity: 0.05; white-space: nowrap; pointer-events: none; user-select: none; z-index: 0; } body.scc-fase0 .sc-section--dark .sc-watermark { color: #fff; opacity: 0.07; } /* ────────────────────────────────────────────────────────────────────── * Reveal pattern — progressive enhancement (harden 2026-06-07). * * REGLA: el default es VISIBLE. La animación se opt-in solo cuando JS * confirmó que va a manejarla. Esto cubre tres modos de fallo reales: * 1. JS no corre (Litespeed delay-load bloqueado, error, headless render). * 2. Tab oculto en el primer paint (IntersectionObserver pausa transitions). * 3. prefers-reduced-motion (ya cubierto, ahora redundante pero correcto). * * Flujo: * · Sin JS, sin `.js-reveal-ready` en : [data-reveal] renderiza visible. * · Con JS: app.js añade `js-reveal-ready` al ANTES del IO setup, * lo que activa el estado inicial oculto. El IO entonces añade * `.is-revealed` por elemento cuando entra al viewport. * * Antes: [data-reveal] = opacity:0 por default → si JS fallaba, página en blanco. * ────────────────────────────────────────────────────────────────────── */ html.js-reveal-ready body.scc-fase0 [data-reveal]:not(.is-revealed) { opacity: 0; transform: translateY(40px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } html.js-reveal-ready body.scc-fase0 [data-reveal].is-revealed { opacity: 1; transform: translateY(0); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); } @media (prefers-reduced-motion: reduce) { html.js-reveal-ready body.scc-fase0 [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Card stagger — progressive enhancement. * --reveal-index is set inline on each card via PHP template. * Only applies when JS reveal is active. Scoped to lists/grids via * the card selectors in servicios and division components. * Max practical stagger: ~6 items × 60ms = 360ms total offset. */ html.js-reveal-ready body.scc-fase0 [data-reveal][style*="--reveal-index"] { transition-delay: calc(var(--reveal-index, 0) * 60ms); } @media (prefers-reduced-motion: reduce) { html.js-reveal-ready body.scc-fase0 [data-reveal][style*="--reveal-index"] { transition-delay: 0ms !important; } }