/* ============================================================================ ZUZEN KONTUAK — Sistema visual «Metal y luz» El logotipo es acero azul mecanizado: biseles, cepillado y brillo especular. Toda la web está hecha del mismo material. Movimiento: sólo transform y opacity. Nada que provoque reflow. ========================================================================== */ @import url('./fonts.css'); /* ---------------------------------------------------------------- TOKENS -- */ :root{ /* Azules muestreados del propio logotipo */ --abyss: #00032E; --midnight: #050B2E; --steel-deep: #0A2449; --steel: #1C3762; --steel-mid: #3A6E9F; --steel-lt: #639DCD; --steel-hi: #9EDBF7; /* Metal cálido — el acento «tierra» */ --gold-deep: #6E5E42; --gold-dark: #8A6D42; --gold-ink: #7C623B; /* dorado para TEXTO sobre claro: 5,3:1 en crema y 4,8:1 en lino (AA) */ --gold: #C4AD84; --gold-lt: #E4D2AE; --gold-hi: #FFFAF0; /* Neutros cálidos */ --cream: #F8F5EF; --linen: #F0EAE0; --stone: #DFD6C8; --stone-2: #C6BAA8; --slate: #67615A; --graphite: #23211D; /* Semánticos — superficie clara */ --bg: var(--cream); --bg-soft: var(--linen); --fg: var(--abyss); --fg-muted: var(--slate); --accent: var(--gold-ink); --line: color-mix(in oklab, var(--stone-2) 66%, transparent); --line-soft: color-mix(in oklab, var(--stone-2) 32%, transparent); /* Biseles: la arista mecanizada que define el logotipo */ --bevel-hi: rgba(255,255,255,.85); --bevel-lo: rgba(0,3,46,.10); --bevel: inset 0 1px 0 var(--bevel-hi), inset 0 -1px 0 var(--bevel-lo); /* Sombras por capas: contacto + ambiente + halo */ --lift-1: 0 1px 2px rgba(0,3,46,.07), 0 4px 10px -4px rgba(0,3,46,.14); --lift-2: 0 2px 4px rgba(0,3,46,.08), 0 14px 30px -14px rgba(0,3,46,.26); --lift-3: 0 4px 8px rgba(0,3,46,.10), 0 34px 64px -28px rgba(0,3,46,.38); /* Tipografía */ --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --serif:'Cormorant Garamond', ui-serif, Georgia, 'Times New Roman', serif; --fs-h1: clamp(2.4rem, 5.4vw, 5rem); --fs-h2: clamp(2rem, 4.4vw, 4rem); --fs-h3: clamp(1.3rem, 2.1vw, 1.85rem); --fs-lead: clamp(1.05rem, 1.35vw, 1.3rem); --fs-body: clamp(1rem, 0.97vw, 1.0625rem); --fs-sm: 0.9rem; --fs-xs: 0.735rem; --pad-x: clamp(1.25rem, 5vw, 5.5rem); --sec-y: clamp(5.5rem, 12vw, 11.5rem); --maxw: 82.5rem; --radius: 18px; --radius-sm: 12px; --e-out: cubic-bezier(.16,1,.3,1); /* microinteracción: rápida y resuelta */ --e-soft: cubic-bezier(.33,1,.68,1); --e-inout: cubic-bezier(.62,.05,.28,1); /* Entrada en escena. La expo-out gasta el 60% del recorrido en el primer 20% del tiempo: se percibe como un golpe. Esta arranca contenida y frena largo. */ --e-rise: cubic-bezier(.20,.55,.22,1); --e-veil: cubic-bezier(.30,.70,.40,1); /* opacidad: siempre más lenta que el movimiento */ --nav-h: 78px; } /* Superficie oscura: mismo sistema, otra luz. `color` debe reaplicarse: si sólo cambian los tokens, el texto que hereda de se queda con el color del tema claro. */ .theme-dark{ color:var(--fg); --bg: var(--abyss); --bg-soft: var(--midnight); --fg: #F2EFE9; --fg-muted: color-mix(in oklab, #F2EFE9 60%, transparent); --accent: var(--gold-lt); --line: color-mix(in oklab, #F2EFE9 17%, transparent); --line-soft: color-mix(in oklab, #F2EFE9 8%, transparent); --bevel-hi: rgba(255,255,255,.16); --bevel-lo: rgba(0,0,0,.45); --lift-1: 0 1px 2px rgba(0,0,0,.35), 0 6px 16px -8px rgba(0,0,0,.6); --lift-2: 0 2px 6px rgba(0,0,0,.4), 0 20px 40px -18px rgba(0,0,0,.7); --lift-3: 0 6px 14px rgba(0,0,0,.45), 0 44px 80px -34px rgba(0,0,0,.85); color-scheme: dark; } /* ----------------------------------------------------------------- RESET -- */ *,*::before,*::after{ box-sizing:border-box; } *{ margin:0; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px); } body{ font-family:var(--sans); font-size:var(--fs-body); line-height:1.6; color:var(--fg); background:var(--bg); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-feature-settings:'cv05' 1,'cv11' 1,'ss01' 1; overflow-x:hidden; text-rendering:optimizeLegibility; } img,svg,video{ display:block; max-width:100%; } button,input,textarea,select{ font:inherit; color:inherit; } button{ background:none; border:0; cursor:pointer; } a{ color:inherit; text-decoration:none; } ul,ol{ list-style:none; padding:0; } :focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; } ::selection{ background:var(--gold); color:var(--abyss); } /* --------------------------------------------------------------- LAYOUT --- */ .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x); } .section{ padding-block:var(--sec-y); position:relative; } .section--tight{ padding-block:clamp(4rem,8vw,7rem); } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* Salto al contenido: invisible hasta recibir el foco. Entonces es un botón de metal cálido fijado sobre la cabecera, imposible de pasar por alto. */ .skip{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .skip:focus{ position:fixed; z-index:140; top:14px; left:var(--pad-x); width:auto; height:auto; margin:0; clip:auto; overflow:visible; padding:.8em 1.4em; border-radius:100px; font-size:var(--fs-sm); font-weight:600; color:var(--abyss); background:linear-gradient(172deg, var(--gold-hi) 0%, var(--gold-lt) 22%, var(--gold) 62%, var(--gold-dark) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(110,94,66,.55), 0 10px 24px -12px rgba(0,3,46,.7); outline:2px solid var(--gold-lt); outline-offset:3px; } /* El destino del salto recibe el foco por programa: sin anillo alrededor de toda la página */ #main:focus{ outline:none; } /* ══════════════════════════════════════════════════════════ MATERIALES ══ */ /* Cepillado del metal: microlíneas verticales, como las barras del logotipo */ .brushed{ position:relative; isolation:isolate; } .brushed::after{ content:''; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit; background:repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 3px); mix-blend-mode:overlay; opacity:.7; } /* Grano fino: da cuerpo a los fondos y evita el banding de los degradados */ .grain::before{ content:''; position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.4; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); } /* Panel: superficie con arista mecanizada y profundidad real */ .panel{ position:relative; border-radius:var(--radius); isolation:isolate; background:linear-gradient(168deg, color-mix(in oklab, var(--bg-soft) 92%, #fff), var(--bg-soft) 62%, color-mix(in oklab, var(--bg-soft) 92%, var(--abyss))); box-shadow:var(--bevel), 0 0 0 1px var(--line-soft), var(--lift-1); transition:transform .9s var(--e-rise), box-shadow .9s var(--e-rise); } .theme-dark .panel{ background:linear-gradient(168deg, rgba(255,255,255,.075), rgba(255,255,255,.022) 46%, rgba(0,0,0,.16)); box-shadow:var(--bevel), 0 0 0 1px var(--line-soft), var(--lift-1); } .panel--glass{ -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%); } /* Brillo especular: una banda de luz cruza la superficie al pasar el cursor */ .sheen{ position:relative; overflow:hidden; } .sheen::before{ content:''; position:absolute; z-index:3; top:-60%; bottom:-60%; left:-45%; width:38%; pointer-events:none; border-radius:inherit; background:linear-gradient(90deg, transparent, rgba(255,255,255,.42) 46%, rgba(255,255,255,.62) 50%, rgba(255,255,255,.42) 54%, transparent); transform:translate3d(-160%,0,0) skewX(-16deg); opacity:0; transition:transform 1.6s var(--e-rise), opacity .5s ease; } .theme-dark .sheen::before{ background:linear-gradient(90deg, transparent, rgba(228,210,174,.18) 46%, rgba(255,250,240,.32) 50%, rgba(228,210,174,.18) 54%, transparent); } .sheen:hover::before, .sheen:focus-within::before{ transform:translate3d(420%,0,0) skewX(-16deg); opacity:1; } /* Foco radial que sigue al cursor */ .lume::after{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit; background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), color-mix(in oklab, var(--gold) 26%, transparent), transparent 68%); opacity:0; transition:opacity .5s ease; } .lume:hover::after{ opacity:1; } /* Filo mecanizado: la regla horizontal del logotipo, convertida en separador */ .edge{ height:2px; border-radius:2px; border:0; background:linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent); box-shadow:0 1px 0 var(--bevel-hi); } /* Texto en metal: degradado recortado sobre la tipografía */ .metal-text{ background:linear-gradient(176deg, var(--gold-hi) 2%, var(--gold-lt) 26%, var(--gold) 52%, var(--gold-dark) 88%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } .metal-text--steel{ background:linear-gradient(176deg, #E6F4FD 2%, var(--steel-hi) 24%, var(--steel-lt) 52%, var(--steel) 92%); -webkit-background-clip:text; background-clip:text; } /* --------------------------------------------------------- TIPOGRAFÍA ---- */ .eyebrow{ font-size:var(--fs-xs); font-weight:600; letter-spacing:.19em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:.7em; } .eyebrow::before{ content:''; width:26px; height:1px; background:currentColor; opacity:.75; flex:none; } h1,h2,h3,h4{ font-weight:500; line-height:1.04; letter-spacing:-0.032em; text-wrap:balance; } .h1{ font-size:var(--fs-h1); } .h2{ font-size:var(--fs-h2); } .h3{ font-size:var(--fs-h3); letter-spacing:-0.02em; line-height:1.18; } .ser{ font-family:var(--serif); font-weight:300; font-style:italic; letter-spacing:-0.012em; font-size:1.16em; line-height:.9; color:var(--gold-ink); } .theme-dark .ser{ color:transparent; } .theme-dark .ser{ background:linear-gradient(174deg, var(--gold-hi), var(--gold-lt) 40%, var(--gold) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .lead{ font-size:var(--fs-lead); line-height:1.55; color:var(--fg-muted); max-width:46ch; text-wrap:pretty; } .muted{ color:var(--fg-muted); } /* Cifras: SIEMPRE de caja alta y tabulares. La serif del sitio (Cormorant) usa cifras de estilo antiguo — el 3, el 5 y el 7 caen bajo la línea base. Eso no puede aparecer en una asesoría. */ .num, .figs{ font-variant-numeric:lining-nums tabular-nums; font-feature-settings:'lnum' 1,'tnum' 1; } /* Cifra de titular: sans, peso sólido, muy ceñida. Lee como dato, no como adorno. */ .fig{ font-family:var(--sans); font-weight:600; letter-spacing:-0.045em; font-variant-numeric:lining-nums tabular-nums; font-feature-settings:'lnum' 1,'tnum' 1; } /* Etiqueta numérica pequeña: 01, Paso 02… */ .tag-num{ font-family:var(--sans); font-weight:600; font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase; font-variant-numeric:lining-nums tabular-nums; } .snum{ display:block; margin-bottom:.9rem; color:var(--accent); font-family:var(--sans); font-weight:600; font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase; font-variant-numeric:lining-nums tabular-nums; } /* ------------------------------------------------------------- BOTONES --- */ .btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6em; padding:1.05em 1.95em; border-radius:100px; font-size:var(--fs-sm); font-weight:600; letter-spacing:-0.006em; white-space:nowrap; color:var(--abyss); isolation:isolate; overflow:hidden; background:linear-gradient(172deg, var(--gold-hi) 0%, var(--gold-lt) 22%, var(--gold) 62%, var(--gold-dark) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(110,94,66,.55), 0 1px 2px rgba(0,3,46,.18), 0 10px 24px -12px rgba(110,94,66,.75); transition:transform .5s var(--e-out), box-shadow .5s var(--e-out), filter .4s ease; will-change:transform; } .btn:hover{ transform:translate3d(0,-2px,0); filter:brightness(1.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(110,94,66,.5), 0 3px 6px rgba(0,3,46,.16), 0 20px 38px -14px rgba(110,94,66,.85); } .btn:active{ transform:translate3d(0,0,0) scale(.985); } .btn--ghost{ color:var(--fg); background:transparent; box-shadow:inset 0 0 0 1px var(--line), inset 0 1px 0 var(--bevel-hi); } .btn--ghost:hover{ filter:none; background:color-mix(in oklab, var(--fg) 6%, transparent); box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--fg) 32%, transparent), inset 0 1px 0 var(--bevel-hi); } /* Botón de acero: el azul del logotipo, para acciones secundarias sobre claro */ .btn--steel{ color:#EAF4FC; background:linear-gradient(172deg, var(--steel-mid) 0%, var(--steel) 48%, var(--steel-deep) 100%); box-shadow: inset 0 1px 0 rgba(158,219,247,.55), inset 0 -1px 0 rgba(0,3,46,.7), 0 1px 2px rgba(0,3,46,.2), 0 12px 26px -12px rgba(10,36,73,.7); } .btn--sm{ padding:.74em 1.35em; font-size:.82rem; } .btn__ico{ width:1em; height:1em; flex:none; transition:transform .5s var(--e-out); } .btn:hover .btn__ico{ transform:translate3d(3px,0,0); } /* --------------------------------------------------------- REVELACIONES -- */ [data-rv]{ will-change:transform,opacity; } [data-rv="up"]{ opacity:0; transform:translate3d(0,46px,0); transition:transform 1.5s var(--e-rise), opacity 1.9s var(--e-veil); } [data-rv="fade"]{ opacity:0; transition:opacity 2.1s var(--e-veil); } [data-rv="scale"]{ opacity:0; transform:translate3d(0,38px,0) scale(.965); transition:transform 1.75s var(--e-rise), opacity 2.1s var(--e-veil); } [data-rv].is-in{ opacity:1; transform:none; will-change:auto; } /* La máscara del revelado recorta por línea. El padding tiene que dejar sitio a los descendentes: la «g» de «pregunta» o de «gratis» va en cursiva serif a 1,16em, y con .07em se quedaba cortada. Los márgenes negativos devuelven el espacio para que el interlineado no cambie. */ .rv-lines .ln{ display:block; overflow:hidden; padding-top:.18em; padding-bottom:.40em; margin-top:-.18em; margin-bottom:-.40em; } .rv-lines .ln > span{ display:block; transform:translate3d(0,105%,0); transition:transform 1.5s var(--e-rise); transition-delay:var(--d,0ms); will-change:transform; } .rv-lines.is-in .ln > span{ transform:none; } .rv-clip{ clip-path:inset(0 0 100% 0); transition:clip-path 1.9s var(--e-rise); } .rv-clip.is-in{ clip-path:inset(0 0 0% 0); } /* Escalonado amplio: se ve llegar cada pieza, no aparecen todas a la vez */ [data-stagger] > *{ transition-delay:calc(var(--i,0) * 150ms); } [data-stagger] > * .ln > span{ transition-delay:calc(var(--i,0) * 150ms + var(--d,0ms)); } /* ── Paralaje continuo ────────────────────────────────────────────────────── El JS escribe --par en píxeles según lo que el elemento ha recorrido de la ventana. Valor positivo = se queda atrás respecto al scroll (fondo); negativo = se adelanta (primer plano). Es lo que da sensación de viaje. */ [data-par]{ transform:translate3d(0, var(--par,0px), 0); will-change:transform; } /* Un bloque que además se revela (`data-rv`) recupera el paralaje al terminar de aparecer: sin esto, `[data-rv].is-in{transform:none}` ganaba por especificidad y el formulario, el FAQ y el bloqueo del pie se quedaban quietos. */ [data-rv][data-par].is-in{ transform:translate3d(0, var(--par,0px), 0); } /* En táctil no hay paralaje (el JS tampoco lo calcula: con las columnas apiladas, mapa y rótulo llegaban a tocarse). Se conserva un transform 2D para no alterar el apilado de capas, pero sin reservar una capa de compositor por bloque: son 21 bloques grandes, y en un móvil eso es memoria de GPU. */ @media (pointer:coarse){ [data-par], [data-rv][data-par].is-in{ transform:translate(0, var(--par,0px)); will-change:auto; } } /* ══════════════════════════════════════════════════════════ PRELOADER ═══ */ /* El fondo es EL MISMO que el del héroe: al salir no se levanta un telón, sólo se disuelve el bloqueo y la escena continúa. Y las barras suben desde una máscara en lugar de escalarse: escalar en vertical aplastaría el bisel. */ .loader{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; will-change:opacity; background: radial-gradient(52% 44% at 72% 34%, rgba(40,94,168,.50) 0%, transparent 64%), radial-gradient(46% 38% at 8% 84%, rgba(14,44,102,.45) 0%, transparent 66%), linear-gradient(178deg, #01041C 0%, #03082A 42%, #01041B 100%); transition:opacity .95s var(--e-veil), visibility .95s; } .loader.grain::before{ opacity:.26; z-index:2; } .loader__stage{ position:relative; overflow:hidden; display:grid; justify-items:center; gap:clamp(1rem,2.2vw,1.6rem); padding:clamp(1.4rem,3vw,2.2rem) clamp(2rem,4vw,3rem); transition:transform 1.1s var(--e-rise), opacity .8s var(--e-veil); will-change:transform,opacity; } /* La marca, con las proporciones exactas del logotipo (723 × 992) */ .loader__mark{ --u: clamp(74px, 9vw, 112px); /* altura de la barra alta */ display:flex; align-items:flex-end; height:var(--u); gap:calc(var(--u) * .0121); filter:drop-shadow(0 14px 28px rgba(0,3,46,.8)); } .loader__bar{ display:block; overflow:hidden; width:calc(var(--u) * .235); } .loader__bar:nth-child(1){ height:calc(var(--u) * .508); } .loader__bar:nth-child(2){ height:calc(var(--u) * .781); } .loader__bar:nth-child(3){ height:var(--u); } .loader__bar svg{ display:block; width:100%; height:100%; transform:translate3d(0,101%,0); transition:transform .92s var(--e-rise); } .loader__bar:nth-child(1) svg{ transition-delay:.05s; } .loader__bar:nth-child(2) svg{ transition-delay:.14s; } .loader__bar:nth-child(3) svg{ transition-delay:.23s; } /* la última asienta en 1,15 s */ .loader.is-ready .loader__bar svg{ transform:none; } /* El texto no se desliza: se revela de izquierda a derecha, como grabado */ .loader__word{ display:block; } .loader__word img{ display:block; width:clamp(168px,22vw,262px); height:auto; clip-path:inset(0 100% 0 0); transition:clip-path .78s var(--e-rise) .40s; /* acaba a la vez que las barras */ filter:drop-shadow(0 8px 18px rgba(0,3,46,.65)); } .loader.is-ready .loader__word img{ clip-path:inset(0 0 0 0); } /* Un pase de luz sobre el metal, una vez montado */ .loader__sheen{ position:absolute; inset:0; pointer-events:none; opacity:0; background:linear-gradient(100deg, transparent 40%, rgba(255,253,247,.20) 50%, transparent 60%); } .loader.is-ready .loader__sheen{ animation:loaderSheen .8s var(--e-soft) 1.20s both; } @keyframes loaderSheen{ 0%{ transform:translate3d(-130%,0,0); opacity:0 } 18%{ opacity:1 } 100%{ transform:translate3d(130%,0,0); opacity:0 } } /* La línea de carga vive en el borde superior, donde después estará la barra de progreso de lectura: la misma pieza, sin corte entre una y otra. */ .loader__wire{ position:absolute; top:0; left:0; right:0; height:2px; overflow:hidden; } .loader__wire i{ display:block; height:100%; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-hi)); transition:transform 1.5s var(--e-soft); } .loader.is-ready .loader__wire i{ transform:scaleX(1); } .loader.is-done{ opacity:0; visibility:hidden; pointer-events:none; } .loader.is-done .loader__stage{ transform:translate3d(0,-10px,0) scale(1.03); opacity:0; } /* ═════════════════════════════════════════════════════════ NAVEGACIÓN ═══ */ /* ── La cabecera cambia CON el dedo, no por un umbral ───────────────────── Antes esto era un salto: una clase que se activaba a los 24 px y disparaba cuatro cosas descoordinadas. El fondo se fundía en .5 s, la altura en .5 s, los colores NO se fundían (las variables CSS no son animables) y el logotipo se cambiaba con display:none — un salto de un fotograma, imposible de suavizar. Ahora todo cuelga de --navp (0…1), que el JS calcula desde el scroll y suaviza. Cada propiedad se interpola sola, en el mismo instante y al mismo ritmo. */ .nav{ --navp:0; position:fixed; inset:0 0 auto 0; z-index:120; display:flex; align-items:center; height:calc(var(--nav-h) - 12px * var(--navp)); /* Los colores se mezclan de forma continua entre el estado sobre oscuro y el estado sobre claro. color-mix sí acepta un porcentaje variable. */ --fg: color-mix(in oklab, #F2EFE9, #00032E calc(var(--navp) * 100%)); --fg-muted: color-mix(in oklab, rgba(242,239,233,.74), #67615A calc(var(--navp) * 100%)); --line: color-mix(in oklab, rgba(242,239,233,.26), rgba(198,186,168,.66) calc(var(--navp) * 100%)); --line-soft: color-mix(in oklab, rgba(242,239,233,.10), rgba(198,186,168,.32) calc(var(--navp) * 100%)); --bevel-hi: color-mix(in oklab, rgba(255,255,255,.18), rgba(255,255,255,.85) calc(var(--navp) * 100%)); color:var(--fg); transition:transform .8s var(--e-rise); will-change:transform; } /* Páginas legales: sin JS, la cabecera nace en su estado claro */ .nav.is-stuck{ --navp:1; } .nav::before{ content:''; position:absolute; inset:0; z-index:-1; opacity:var(--navp); background:linear-gradient(180deg, color-mix(in oklab, var(--cream) 90%, transparent), color-mix(in oklab, var(--cream) 74%, transparent)); -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%); box-shadow:0 1px 0 rgba(198,186,168,.5), 0 12px 34px -24px rgba(0,3,46,.55); } .nav.is-hidden{ transform:translate3d(0,-104%,0); } .nav__in{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x); display:flex; align-items:center; justify-content:space-between; gap:2rem; } /* Los dos logotipos van superpuestos y se funden. Nada de display:none. */ .nav__brand{ position:relative; display:block; flex:none; line-height:0; } .nav__logo{ height:42px; width:auto; transform:scale(calc(1 - .19 * var(--navp))); transform-origin:left center; will-change:transform,opacity; } .nav__logo--light{ position:absolute; inset:0 auto auto 0; opacity:var(--navp); } .nav__logo--dark{ opacity:calc(1 - var(--navp)); } .nav__menu{ display:flex; align-items:center; gap:clamp(1.1rem,2.3vw,2.1rem); } .nav__link{ position:relative; font-size:.905rem; font-weight:450; color:var(--fg-muted); transition:color .35s ease; padding-block:.4em; } .nav__link::after{ content:''; position:absolute; left:0; bottom:.05em; width:100%; height:1px; background:linear-gradient(90deg,var(--gold-dark),var(--gold)); transform:scaleX(0); transform-origin:right; transition:transform .5s var(--e-out); } .nav__link:hover,.nav__link.is-active{ color:var(--fg); } .nav__link:hover::after,.nav__link.is-active::after{ transform:scaleX(1); transform-origin:left; } .nav__actions{ display:flex; align-items:center; gap:.7rem; flex:none; } .progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:130; background:linear-gradient(90deg,var(--gold-dark),var(--gold-hi)); transform:scaleX(0); transform-origin:left; will-change:transform; } .burger{ display:none; width:44px; height:44px; flex-direction:column; align-items:center; justify-content:center; gap:5px; margin-right:-8px; } .burger i{ display:block; width:20px; height:1.5px; background:currentColor; border-radius:2px; transition:transform .5s var(--e-out), opacity .3s ease; } .burger.is-open i:nth-child(1){ transform:translateY(6.5px) rotate(45deg); } .burger.is-open i:nth-child(2){ opacity:0; } .burger.is-open i:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); } .drawer{ position:fixed; inset:0; z-index:115; background:radial-gradient(120% 80% at 80% 0%, #0C1943, var(--abyss) 64%); display:flex; flex-direction:column; justify-content:center; gap:.2rem; padding:calc(var(--nav-h) + 2rem) var(--pad-x) 3rem; clip-path:circle(0% at calc(100% - 44px) 38px); transition:clip-path .85s var(--e-out); visibility:hidden; } .drawer.is-open{ clip-path:circle(150% at calc(100% - 44px) 38px); visibility:visible; } .drawer a.drawer__link{ font-size:clamp(1.9rem,7.6vw,2.9rem); font-weight:500; letter-spacing:-0.035em; padding-block:.24em; border-bottom:1px solid var(--line-soft); opacity:0; transform:translate3d(0,18px,0); transition:opacity .6s var(--e-out), transform .6s var(--e-out); } .drawer.is-open a.drawer__link{ opacity:1; transform:none; transition-delay:calc(.16s + var(--i,0)*.055s); } .drawer__foot{ margin-top:2.2rem; display:flex; flex-wrap:wrap; gap:.8rem; opacity:0; transition:opacity .6s ease .5s; } .drawer.is-open .drawer__foot{ opacity:1; } @media (max-width:1020px){ .nav__menu{ display:none; } .nav__actions .btn--ghost{ display:none; } .burger{ display:flex; } } @media (max-width:520px){ .nav__actions .btn{ display:none; } } /* ═══════════════════════════════════════════════════════════════ HÉROE ══ */ .hero{ position:relative; min-height:100svh; display:flex; align-items:center; isolation:isolate; padding-top:calc(var(--nav-h) + clamp(.8rem,2.4vh,2rem)); padding-bottom:clamp(2.6rem,7vh,4.6rem); background: radial-gradient(52% 44% at 72% 34%, rgba(40,94,168,.50) 0%, transparent 64%), radial-gradient(46% 38% at 8% 84%, rgba(14,44,102,.45) 0%, transparent 66%), linear-gradient(178deg, #01041C 0%, #03082A 42%, #01041B 100%); color:var(--fg); overflow:hidden; } /* Cielo: nebulosas lentas + parallax de puntero */ .sky{ position:absolute; inset:-18%; z-index:0; pointer-events:none; } .sky b{ position:absolute; display:block; border-radius:50%; filter:blur(90px); transform:translate3d(var(--px,0px),var(--py,0px),0); will-change:transform; } .sky b:nth-child(1){ width:44vw; height:44vw; left:50%; top:4%; background:radial-gradient(circle,rgba(58,110,159,.42),transparent 70%); animation:neb1 30s var(--e-soft) infinite alternate; } .sky b:nth-child(2){ width:34vw; height:34vw; left:-2%; top:44%; background:radial-gradient(circle,rgba(26,114,183,.24),transparent 70%); animation:neb2 38s var(--e-soft) infinite alternate; } .sky b:nth-child(3){ width:26vw; height:26vw; right:10%; bottom:6%; background:radial-gradient(circle,rgba(196,173,132,.22),transparent 70%); animation:neb3 34s var(--e-soft) infinite alternate; } @keyframes neb1{ to{ transform:translate3d(calc(var(--px,0px) + 4vw), calc(var(--py,0px) + 3vh),0) scale(1.16) } } @keyframes neb2{ to{ transform:translate3d(calc(var(--px,0px) - 3vw), calc(var(--py,0px) + 4vh),0) scale(1.2) } } @keyframes neb3{ to{ transform:translate3d(calc(var(--px,0px) + 3vw), calc(var(--py,0px) - 3vh),0) scale(1.12) } } /* Haces de luz cenital */ .rays{ position:absolute; inset:-30% -10% auto -10%; height:120%; z-index:1; pointer-events:none; opacity:.5; mix-blend-mode:screen; } .rays i{ position:absolute; top:0; width:14vw; height:100%; transform-origin:50% 0; background:linear-gradient(180deg, rgba(158,219,247,.20), transparent 62%); filter:blur(26px); } .rays i:nth-child(1){ left:18%; transform:rotate(9deg); animation:ray 14s ease-in-out infinite alternate } .rays i:nth-child(2){ left:46%; transform:rotate(-5deg); animation:ray 18s ease-in-out infinite alternate -4s } .rays i:nth-child(3){ left:70%; transform:rotate(13deg); animation:ray 22s ease-in-out infinite alternate -9s } @keyframes ray{ from{ opacity:.35 } to{ opacity:.9 } } /* Suelo en perspectiva: la rejilla que da fondo a la escena */ .floor{ position:absolute; left:-25%; right:-25%; bottom:-4%; height:52vh; z-index:1; pointer-events:none; perspective:280px; perspective-origin:50% 0; -webkit-mask-image:linear-gradient(180deg, transparent, #000 34%, #000 72%, transparent); mask-image:linear-gradient(180deg, transparent, #000 34%, #000 72%, transparent); } .floor i{ position:absolute; inset:0; transform:rotateX(70deg); transform-origin:50% 0; background: repeating-linear-gradient(90deg, rgba(158,219,247,.16) 0 1px, transparent 1px 72px), repeating-linear-gradient(0deg, rgba(158,219,247,.11) 0 1px, transparent 1px 72px); } .hero::after{ content:''; position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(118% 88% at 56% 46%, transparent 26%, rgba(0,2,20,.55) 72%, rgba(0,2,18,.9) 100%); } .hero.grain::before{ z-index:3; opacity:.28; } .hero__in{ position:relative; z-index:5; width:100%; transform:translate3d(0, var(--exit,0px), 0); will-change:transform; } .etym, .scroller{ transition:opacity .6s ease; } .hero__grid{ display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(2rem,5vw,5rem); align-items:center; } @media (max-width:1000px){ .hero__grid{ grid-template-columns:minmax(0,1fr); } } .hero__eyebrow{ margin-bottom:clamp(1rem,2.4vh,1.8rem); } .hero h1{ font-size:clamp(2.25rem, min(5.1vw, 7vh), 4.6rem); line-height:1; letter-spacing:-0.042em; max-width:15ch; } .hero__lead{ margin-top:clamp(.9rem,1.8vh,1.4rem); max-width:46ch; font-size:var(--fs-lead); color:rgba(242,239,233,.68); } .hero__cta{ margin-top:clamp(1.3rem,2.6vh,2.1rem); display:flex; flex-wrap:wrap; gap:.85rem; } .hero__meta{ margin-top:clamp(1.4rem,3vh,2.4rem); display:flex; flex-wrap:wrap; gap:.5rem clamp(1.2rem,3vw,2.4rem); padding-top:1.2rem; border-top:1px solid var(--line-soft); box-shadow:0 -1px 0 rgba(255,255,255,.05); font-size:var(--fs-sm); color:rgba(242,239,233,.6); } .hero__meta li{ display:flex; align-items:center; gap:.55em; } .hero__meta svg{ width:15px; height:15px; color:var(--gold-lt); flex:none; } /* ───────── Escenario: la escultura de barras con su reflejo ───────── */ .stage{ position:relative; display:grid; place-items:center; padding-block:.25rem; } @media (max-width:1000px){ /* En vertical la escultura pasa bajo el texto y asoma: invita a bajar */ .stage{ margin-top:clamp(1.8rem,5vh,3rem); } .stage__body, .stage__mirror{ width:min(238px,54vw); } .stage__glow{ width:150%; } } .stage__glow{ position:absolute; z-index:0; width:130%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(58,110,159,.42), rgba(26,114,183,.10) 46%, transparent 68%); filter:blur(30px); animation:pulse 9s var(--e-soft) infinite alternate; } @keyframes pulse{ from{ transform:scale(.94); opacity:.75 } to{ transform:scale(1.06); opacity:1 } } .stage__body{ position:relative; z-index:2; width:min(322px, 27vw, 46vh); transform:perspective(1400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transform-style:preserve-3d; will-change:transform; } .sculpt{ width:100%; height:auto; filter:drop-shadow(0 34px 44px rgba(0,3,46,.75)); } .sculpt__band{ transform-box:view-box; animation:sweep 7s var(--e-soft) infinite; } @keyframes sweep{ 0%,62%{ transform:translateX(0) skewX(-18deg) } 100%{ transform:translateX(1500px) skewX(-18deg) } } .stage__mirror{ position:relative; z-index:1; width:min(322px, 27vw, 46vh); height:clamp(70px,9vw,124px); overflow:hidden; margin-top:3px; opacity:.30; pointer-events:none; filter:blur(1.2px); -webkit-mask-image:linear-gradient(180deg, #000, transparent 88%); mask-image:linear-gradient(180deg, #000, transparent 88%); } .stage__mirror .sculpt{ position:absolute; top:0; left:0; width:100%; transform:scaleY(-1); filter:none; } /* Fichas de cristal que flotan alrededor */ .chip{ position:absolute; z-index:4; padding:.85rem 1.1rem; border-radius:14px; background:linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.04)); -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%); box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 1px rgba(255,255,255,.09), var(--lift-2); transform:translate3d(var(--cx,0px),var(--cy,0px),0); will-change:transform; } .chip b{ display:block; font-family:var(--sans); font-weight:600; font-size:1.5rem; line-height:1; letter-spacing:-.042em; font-variant-numeric:lining-nums tabular-nums; } .chip span{ display:block; margin-top:.2rem; font-size:.735rem; letter-spacing:.13em; text-transform:uppercase; color:rgba(242,239,233,.62); } .chip--a{ top:6%; left:-6%; animation:bob 7s var(--e-soft) infinite alternate; } .chip--b{ bottom:22%; right:-8%; animation:bob 9s var(--e-soft) infinite alternate -3s; } @keyframes bob{ to{ transform:translate3d(var(--cx,0px), calc(var(--cy,0px) - 12px), 0) } } @media (max-width:1220px){ .chip{ display:none; } } /* Tarjeta de etimología */ .etym{ position:absolute; z-index:5; right:var(--pad-x); bottom:clamp(1.4rem,3.4vh,2.6rem); width:min(300px,72vw); padding:1.15rem 1.35rem 1.25rem; border-radius:var(--radius-sm); background:linear-gradient(160deg, rgba(255,255,255,.085), rgba(255,255,255,.025)); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 1px rgba(255,255,255,.08), var(--lift-2); font-size:.855rem; line-height:1.5; } .etym dt{ font-family:var(--serif); font-style:italic; font-size:1.44rem; font-weight:300; color:var(--gold-lt); line-height:1; } .etym dd{ color:rgba(242,239,233,.64); margin-top:.2rem; } .etym dd+dt{ margin-top:.75rem; } .etym__tag{ display:block; margin-top:.9rem; padding-top:.7rem; border-top:1px solid rgba(255,255,255,.13); font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase; color:rgba(242,239,233,.55); text-wrap:balance; line-height:1.5; } @media (max-width:1400px){ .etym{ display:none; } } .scroller{ position:absolute; z-index:5; left:var(--pad-x); bottom:clamp(1.6rem,4vh,2.6rem); display:flex; align-items:center; gap:.7rem; font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase; color:rgba(242,239,233,.55); } .scroller i{ display:block; width:34px; height:1px; background:rgba(242,239,233,.28); overflow:hidden; position:relative; } .scroller i::after{ content:''; position:absolute; inset:0; background:var(--gold-lt); transform:translateX(-100%); animation:scrollhint 2.6s var(--e-soft) infinite; } @keyframes scrollhint{ 0%{transform:translateX(-100%)} 55%,100%{transform:translateX(100%)} } @media (max-width:1000px){ .scroller{ display:none; } } /* ═════════════════════════════════════════════════════════════ CINTA ════ */ .ticker{ position:relative; overflow:hidden; padding-block:1.25rem; background:linear-gradient(180deg, var(--linen), color-mix(in oklab,var(--linen) 82%, var(--stone))); box-shadow:inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 var(--line-soft), inset 0 8px 18px -14px rgba(0,3,46,.3); } .ticker::before,.ticker::after{ content:''; position:absolute; top:0; bottom:0; width:clamp(50px,10vw,150px); z-index:2; pointer-events:none; } .ticker::before{ left:0; background:linear-gradient(90deg,var(--linen),transparent); } .ticker::after{ right:0; background:linear-gradient(270deg,var(--linen),transparent); } .ticker__track{ display:flex; width:max-content; animation:marquee 68s linear infinite; will-change:transform; } .ticker:hover .ticker__track{ animation-play-state:paused; } .ticker__grp{ display:flex; align-items:center; flex:none; } .ticker__grp span{ display:flex; align-items:center; gap:1.6rem; padding-inline:1.6rem; font-size:.95rem; font-weight:450; color:var(--fg-muted); white-space:nowrap; } .ticker__grp span::after{ content:''; width:5px; height:5px; border-radius:50%; flex:none; background:linear-gradient(160deg,var(--gold-lt),var(--gold-dark)); box-shadow:inset 0 .5px 0 rgba(255,255,255,.9); } @keyframes marquee{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-50%,0,0) } } /* ═══════════════════════════════════════════════ CABECERAS DE SECCIÓN ══ */ .shead{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr); gap:clamp(1.6rem,4vw,4rem); align-items:end; margin-bottom:clamp(3rem,6vw,5.5rem); } .shead__t{ margin-top:1.1rem; } @media (max-width:860px){ .shead{ grid-template-columns:1fr; align-items:start; } } /* ════════════════════════════════════════════════════════════ PILARES ══ */ .pillars{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.9rem,1.5vw,1.3rem); } @media (max-width:1000px){ .pillars{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:600px){ .pillars{ grid-template-columns:1fr; } } .pillar{ padding:clamp(1.6rem,2.5vw,2.1rem); } .pillar:hover{ transform:translate3d(0,-6px,0); box-shadow:var(--bevel), 0 0 0 1px var(--line), var(--lift-2); } /* Placa mecanizada, no un cuadro plano: filo de luz arriba, sombra abajo, cepillado vertical y un pase de brillo cuando el cursor entra en la tarjeta. */ .pillar__ico{ position:relative; overflow:hidden; isolation:isolate; display:grid; place-items:center; width:54px; height:54px; border-radius:15px; margin-bottom:1.5rem; color:var(--gold-hi); background: linear-gradient(158deg, rgba(158,219,247,.30), transparent 44%), linear-gradient(168deg, var(--steel-mid) 0%, var(--steel) 46%, var(--steel-deep) 100%); box-shadow: inset 0 1px 0 rgba(200,238,252,.72), inset 1px 0 0 rgba(158,219,247,.20), inset -1px 0 0 rgba(0,3,46,.55), inset 0 -1px 0 rgba(0,3,46,.9), 0 1px 2px rgba(0,3,46,.26), 0 10px 20px -10px rgba(10,36,73,.8); transition:transform .9s var(--e-rise), box-shadow .9s var(--e-rise); } .pillar__ico::before{ /* cepillado del metal */ content:''; position:absolute; inset:0; z-index:1; border-radius:inherit; pointer-events:none; background:repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 3px); mix-blend-mode:overlay; } .pillar__ico::after{ /* brillo especular */ content:''; position:absolute; z-index:3; top:-45%; bottom:-45%; left:-60%; width:46%; pointer-events:none; background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); transform:translate3d(-60%,0,0) skewX(-18deg); opacity:0; transition:transform 1.2s var(--e-rise), opacity .45s ease; } .pillar:hover .pillar__ico::after{ transform:translate3d(400%,0,0) skewX(-18deg); opacity:1; } .pillar:hover .pillar__ico{ transform:translate3d(0,-3px,0); box-shadow: inset 0 1px 0 rgba(228,210,174,.85), inset 1px 0 0 rgba(158,219,247,.24), inset -1px 0 0 rgba(0,3,46,.55), inset 0 -1px 0 rgba(0,3,46,.9), 0 0 0 1px color-mix(in oklab, var(--gold) 40%, transparent), 0 14px 26px -12px rgba(10,36,73,.9), 0 0 22px -6px rgba(196,173,132,.5); } /* El trazo del icono lleva su propio degradado de metal, y se dibuja al entrar */ .pillar__ico svg{ position:relative; z-index:2; width:23px; height:23px; stroke:url(#icoGrad); filter:drop-shadow(0 1px 0 rgba(0,3,46,.5)); clip-path:inset(0 100% 0 0); transition:clip-path 1.1s var(--e-rise) .3s; } .pillar.is-in .pillar__ico svg{ clip-path:inset(0 0 0 0); } .pillar h3{ font-size:1.12rem; font-weight:550; letter-spacing:-0.018em; margin-bottom:.6rem; } .pillar p{ font-size:.935rem; color:var(--fg-muted); line-height:1.6; text-wrap:pretty; } /* ═══════════════════════════════════════════════════════════ SERVICIOS ══ */ .svc{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(2rem,6vw,6rem); align-items:start; } @media (max-width:960px){ .svc{ grid-template-columns:1fr; gap:2.5rem; } } .svc__aside{ position:sticky; top:calc(var(--nav-h) + clamp(1.5rem,5vh,3.5rem)); } @media (max-width:960px){ .svc__aside{ position:static; } } .svc__stage{ position:relative; margin-top:2.4rem; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; isolation:isolate; background: radial-gradient(90% 70% at 30% 12%, #16305F 0%, transparent 60%), linear-gradient(168deg, #071138, var(--abyss) 70%); box-shadow:inset 0 1px 0 rgba(158,219,247,.22), 0 0 0 1px rgba(0,3,46,.5), var(--lift-3); } @media (max-width:960px){ .svc__stage{ display:none; } } .svc__stage .floor{ height:38%; bottom:-2%; opacity:.7; } .svc__viz{ position:absolute; inset:0; display:grid; place-items:end center; padding:2.4rem 2.6rem 26%; z-index:2; } .svc__bars{ display:flex; align-items:flex-end; gap:clamp(8px,1.4vw,14px); width:100%; height:100%; } .svc__bars i{ flex:1; height:100%; border-radius:3px 3px 0 0; transform-origin:bottom; background:linear-gradient(178deg, var(--steel-lt), var(--steel) 62%, var(--steel-deep)); box-shadow:inset 0 1px 0 rgba(158,219,247,.75), inset 1px 0 0 rgba(158,219,247,.22), inset -1px 0 0 rgba(0,3,46,.6), 0 -2px 14px rgba(26,114,183,.3); transform:scaleY(var(--h,.3)); transition:transform 1.7s var(--e-rise), background 1.1s ease; transition-delay:calc(var(--i) * 90ms); } .svc__bars i.hot{ background:linear-gradient(178deg, var(--gold-hi), var(--gold) 55%, var(--gold-deep)); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset -1px 0 0 rgba(110,94,66,.7), 0 -2px 18px rgba(196,173,132,.45); } .svc__cap{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:1.6rem 1.8rem; background:linear-gradient(0deg,rgba(0,3,46,.94),transparent); } .svc__cap b{ display:block; font-family:var(--sans); font-weight:600; font-size:1.85rem; line-height:1; letter-spacing:-.045em; font-variant-numeric:lining-nums tabular-nums; } .svc__cap span{ display:block; font-size:.85rem; color:rgba(242,239,233,.62); } /* El rótulo no cambia de golpe: se retira, se sustituye y vuelve a entrar */ .svc__cap b, .svc__cap span{ transition:opacity .5s var(--e-veil), transform .6s var(--e-rise); } .svc__cap span{ transition-delay:60ms; } .svc__cap.is-swap b, .svc__cap.is-swap span{ opacity:0; transform:translate3d(0,10px,0); } /* El bloque que estás leyendo se destaca; los demás ceden. Sólo cuando el panel lateral está visible, si no el atenuado no tendría explicación. */ @media (min-width:961px){ .svc__item{ opacity:.62; transition:opacity 1.4s var(--e-veil); } .svc__item.is-current{ opacity:1; } } .svc__list{ display:flex; flex-direction:column; } .svc__item{ border-top:1px solid var(--line); box-shadow:0 -1px 0 rgba(255,255,255,.7); padding-block:clamp(1.9rem,3.6vw,3.1rem); position:relative; } .svc__item:last-child{ border-bottom:1px solid var(--line); } .svc__head{ display:flex; align-items:baseline; gap:1.1rem; margin-bottom:1rem; } .svc__idx{ font-family:var(--sans); font-size:.76rem; font-weight:600; color:var(--accent); flex:none; letter-spacing:.16em; font-variant-numeric:lining-nums tabular-nums; } .svc__item h3{ font-size:clamp(1.5rem,2.7vw,2.25rem); font-weight:500; letter-spacing:-0.03em; } .svc__item > p{ color:var(--fg-muted); max-width:52ch; margin-bottom:1.6rem; text-wrap:pretty; } .svc__tags{ display:flex; flex-wrap:wrap; gap:.5rem; } .svc__tags li{ font-size:.845rem; padding:.46em 1.05em; border-radius:100px; color:var(--fg-muted); background:linear-gradient(170deg, #fff, var(--linen)); box-shadow:inset 0 1px 0 #fff, 0 0 0 1px var(--line-soft), var(--lift-1); transition:transform .45s var(--e-out), box-shadow .45s var(--e-out), color .45s ease; } .svc__tags li:hover{ transform:translate3d(0,-2px,0); color:var(--fg); box-shadow:inset 0 1px 0 #fff, 0 0 0 1px color-mix(in oklab,var(--gold) 70%,transparent), var(--lift-2); } /* ═══════════════════════════════════════════════════════════ SUPERFICIE OSCURA */ .dark-slab{ position:relative; isolation:isolate; overflow:hidden; background: radial-gradient(70% 55% at 50% -6%, #14295A 0%, transparent 62%), radial-gradient(60% 50% at 88% 96%, #10224C 0%, transparent 64%), linear-gradient(178deg, #040927, var(--abyss) 62%, #050D31); } .dark-slab .wrap{ position:relative; z-index:2; } /* Masa de luz que deriva con el scroll: el bloque oscuro deja de ser una plancha y pasa a tener atmósfera propia mientras se atraviesa. */ .slab-glow{ position:absolute; z-index:1; pointer-events:none; left:50%; top:8%; width:min(96vw,1500px); aspect-ratio:2/1; translate:-50% 0; background:radial-gradient(closest-side, rgba(58,110,159,.34), rgba(26,114,183,.10) 52%, transparent 76%); filter:blur(20px); } .dark-slab.grain::before{ opacity:.3; } /* ═════════════════════════════════════════════════ AYUDAS Y SUBVENCIONES */ .aidgrid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1rem,1.7vw,1.5rem); } @media (max-width:1000px){ .aidgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:560px){ .aidgrid{ grid-template-columns:1fr; } } .aidcard{ display:flex; flex-direction:column; min-height:246px; padding:clamp(1.5rem,2.3vw,2rem); } .aidcard:hover{ transform:translate3d(0,-6px,0); box-shadow:var(--bevel), 0 0 0 1px color-mix(in oklab,var(--gold) 45%,transparent), var(--lift-3); } .aidcard__k{ display:block; font-size:var(--fs-xs); letter-spacing:.15em; text-transform:uppercase; color:var(--accent); margin-bottom:auto; position:relative; z-index:2; } .aidcard__v{ position:relative; z-index:2; margin-top:1.6rem; font-family:var(--sans); font-weight:600; font-size:clamp(2.1rem,3.2vw,2.8rem); line-height:1; letter-spacing:-0.045em; font-variant-numeric:lining-nums tabular-nums; } .aidcard__v--txt{ font-size:clamp(1.35rem,1.9vw,1.6rem); letter-spacing:-0.025em; line-height:1.14; } .aidcard__v small{ font-size:.42em; letter-spacing:0; opacity:.7; margin-left:.15em; -webkit-text-fill-color:currentColor; } .aidcard h3{ position:relative; z-index:2; font-size:1.02rem; font-weight:550; margin-top:.85rem; letter-spacing:-0.014em; } .aidcard p{ position:relative; z-index:2; font-size:.88rem; color:var(--fg-muted); margin-top:.35rem; line-height:1.55; } .aid__note{ margin-top:2.2rem; font-size:.82rem; color:color-mix(in oklab,#F2EFE9 56%,transparent); max-width:70ch; } /* ════════════════════════════════════════════════════════════ MÉTODO ═══ */ .steps{ position:relative; padding-left:clamp(2.4rem,5vw,4.5rem); } .steps__spine{ position:absolute; left:clamp(.35rem,1.1vw,1rem); top:.6rem; bottom:2rem; width:3px; border-radius:3px; background:var(--line-soft); box-shadow:inset 0 0 0 1px var(--line-soft); } .steps__spine i{ position:absolute; inset:0; border-radius:3px; background:linear-gradient(180deg,var(--gold-lt),var(--gold),var(--gold-deep)); box-shadow:0 0 14px rgba(196,173,132,.55), inset 0 1px 0 rgba(255,255,255,.6); transform:scaleY(var(--p,0)); transform-origin:top; will-change:transform; } .step{ position:relative; padding-block:clamp(1.8rem,3.4vw,2.9rem); border-bottom:1px solid var(--line-soft); } .step:last-child{ border-bottom:0; } .step::before{ content:''; position:absolute; left:calc(clamp(2.4rem,5vw,4.5rem) * -1 + clamp(.35rem,1.1vw,1rem) - 5.5px); top:calc(clamp(1.8rem,3.4vw,2.9rem) + .42em); width:14px; height:14px; border-radius:50%; background:var(--bg); box-shadow:inset 0 0 0 2px var(--stone-2); transition:box-shadow .6s var(--e-out), transform .6s var(--e-out); } .step::before{ transition:box-shadow 1.1s var(--e-rise), transform 1.1s var(--e-rise); } .step.is-in::before{ background:linear-gradient(160deg,var(--gold-hi),var(--gold) 60%,var(--gold-deep)); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 4px color-mix(in oklab,var(--gold) 26%,transparent), 0 0 16px rgba(196,173,132,.7); transform:scale(1.1); } .step__grid{ display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr); gap:clamp(1rem,3vw,3rem); align-items:start; } @media (max-width:800px){ .step__grid{ grid-template-columns:1fr; gap:.7rem; } } .step h3{ font-size:clamp(1.25rem,2.1vw,1.7rem); font-weight:500; letter-spacing:-0.026em; } .step__n{ font-family:var(--sans); font-weight:600; color:var(--accent); font-size:var(--fs-xs); display:block; margin-bottom:.55rem; letter-spacing:.16em; text-transform:uppercase; font-variant-numeric:lining-nums tabular-nums; } .step p{ color:var(--fg-muted); text-wrap:pretty; } /* ════════════════════════════════════════════════════════════ TARIFAS ═══ */ .plans{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.9rem,1.5vw,1.3rem); align-items:stretch; } @media (max-width:1060px){ .plans{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:600px){ .plans{ grid-template-columns:1fr; } } .plan{ display:flex; flex-direction:column; padding:clamp(1.5rem,2.3vw,2.05rem); } .plan > *{ position:relative; z-index:2; } .plan:hover{ transform:translate3d(0,-8px,0); box-shadow:var(--bevel), 0 0 0 1px color-mix(in oklab,var(--gold) 60%,transparent), var(--lift-3); } .plan__k{ display:block; font-size:var(--fs-xs); letter-spacing:.15em; text-transform:uppercase; color:var(--fg-muted); } .plan__p{ margin-top:1.5rem; display:flex; align-items:baseline; gap:.28em; } .plan__p b{ font-family:var(--sans); font-weight:600; font-size:clamp(2.5rem,3.6vw,3.15rem); line-height:.9; letter-spacing:-0.05em; font-variant-numeric:lining-nums tabular-nums; } .plan__p span{ font-size:.85rem; font-weight:500; color:var(--fg-muted); } .plan h3{ font-size:1.06rem; font-weight:550; margin-top:1.1rem; letter-spacing:-0.016em; } .plan > p{ font-size:.895rem; color:var(--fg-muted); margin-top:.4rem; line-height:1.55; } .plan ul{ margin-top:1.4rem; padding-top:1.3rem; border-top:1px solid var(--line-soft); box-shadow:0 -1px 0 var(--bevel-hi); display:grid; gap:.62rem; } .plan li{ display:flex; gap:.6em; font-size:.875rem; color:var(--fg-muted); line-height:1.45; } .plan li svg{ width:14px; height:14px; flex:none; margin-top:.32em; color:var(--accent); } .plan__cta{ margin-top:auto; padding-top:1.6rem; } .theme-dark.plan--hot{ background: radial-gradient(90% 60% at 50% 0%, #17305F 0%, transparent 62%), linear-gradient(168deg, #08123A, var(--abyss) 72%); box-shadow:inset 0 1px 0 rgba(158,219,247,.28), 0 0 0 1px rgba(0,3,46,.6), var(--lift-3); } .theme-dark.plan--hot:hover{ box-shadow:inset 0 1px 0 rgba(228,210,174,.5), 0 0 0 1px color-mix(in oklab,var(--gold) 55%,transparent), var(--lift-3); } .plan__badge{ position:absolute; z-index:3; top:1.1rem; right:1.1rem; font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--abyss); padding:.38em .85em; border-radius:100px; background:linear-gradient(172deg,var(--gold-hi),var(--gold-lt) 30%,var(--gold)); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 4px 12px -4px rgba(110,94,66,.8); } .plans__note{ margin-top:2.2rem; font-size:.845rem; color:var(--fg-muted); max-width:74ch; } /* ═══════════════════════════════════════════════════════ TESTIMONIOS ═══ */ .quotes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,1.7vw,1.5rem); } @media (max-width:900px){ .quotes{ grid-template-columns:1fr; } } .quote{ display:flex; flex-direction:column; gap:1.3rem; padding:clamp(1.7rem,2.5vw,2.3rem); } .quote > *{ position:relative; z-index:2; } .quote:hover{ transform:translate3d(0,-5px,0); box-shadow:var(--bevel), 0 0 0 1px var(--line), var(--lift-2); } .quote__mark{ display:block; font-family:var(--serif); font-size:3.6rem; line-height:.5; height:1.2rem; color:var(--gold); } .quote blockquote{ font-size:1.02rem; line-height:1.62; text-wrap:pretty; } .quote figcaption{ margin-top:auto; padding-top:1.2rem; border-top:1px solid var(--line-soft); box-shadow:0 -1px 0 var(--bevel-hi); display:flex; align-items:center; gap:.85rem; } .quote__av{ width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:.8rem; font-weight:600; color:var(--gold-lt); background:linear-gradient(158deg, var(--steel-mid), var(--steel) 55%, var(--abyss)); box-shadow:inset 0 1px 0 rgba(158,219,247,.45), inset 0 -1px 0 rgba(0,0,0,.6), var(--lift-1); } .quote cite{ font-style:normal; font-weight:550; font-size:.92rem; display:block; } .quote small{ color:var(--fg-muted); font-size:.82rem; } .stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1rem,2vw,2rem); margin-top:clamp(3rem,5vw,4.5rem); padding-top:clamp(2.4rem,4vw,3.4rem); border-top:1px solid var(--line); box-shadow:0 -1px 0 var(--bevel-hi); } @media (max-width:760px){ .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem 1rem; } } .stat b{ display:block; font-family:var(--sans); font-weight:600; font-size:clamp(2.1rem,3.2vw,2.85rem); line-height:.95; letter-spacing:-0.05em; font-variant-numeric:lining-nums tabular-nums; } .stat span{ display:block; margin-top:.65rem; font-size:.86rem; color:var(--fg-muted); line-height:1.45; max-width:22ch; } /* ═══════════════════════════════════════════════════════════ ESTUDIO ═══ */ .studio{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,5rem); align-items:center; } @media (max-width:900px){ .studio{ grid-template-columns:1fr; } } .studio__map{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:1; background: radial-gradient(80% 70% at 52% 47%, #16305F 0%, transparent 62%), linear-gradient(168deg, #071138, var(--abyss) 74%); box-shadow:inset 0 1px 0 rgba(158,219,247,.22), 0 0 0 1px rgba(0,3,46,.5), var(--lift-3); } .studio__map svg{ position:absolute; inset:0; width:100%; height:100%; } .studio__pin{ position:absolute; left:52%; top:47%; width:14px; height:14px; translate:-50% -50%; } .studio__pin i{ position:absolute; inset:0; border-radius:50%; background:linear-gradient(160deg,var(--gold-hi),var(--gold) 60%,var(--gold-deep)); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 0 18px rgba(196,173,132,.8); } .studio__pin i:nth-child(2){ animation:ping 3s var(--e-soft) infinite; opacity:.6; box-shadow:none; } .studio__pin i:nth-child(3){ animation:ping 3s var(--e-soft) infinite 1s; opacity:.35; box-shadow:none; } @keyframes ping{ 0%{transform:scale(1);opacity:.55} 80%,100%{transform:scale(5.5);opacity:0} } .studio__label{ display:block; position:absolute; left:calc(52% + 18px); top:47%; translate:0 -50%; font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase; color:#F2EFE9; background:rgba(0,3,46,.6); padding:.38em .8em; border-radius:100px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 1px rgba(255,255,255,.1); } .info{ display:grid; margin-top:clamp(2rem,3.4vw,2.8rem); border-top:1px solid var(--line); box-shadow:0 -1px 0 var(--bevel-hi); } .info div{ display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,1fr); gap:1rem; padding-block:1.05rem; border-bottom:1px solid var(--line-soft); align-items:baseline; } .info dt{ font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-muted); } .info dd{ font-size:.98rem; } .info dd a:hover{ color:var(--gold-ink); } .info dd span{ display:block; color:var(--fg-muted); font-size:.88rem; } /* ═══════════════════════════════════════════════════════════════ FAQ ═══ */ .faq{ border-top:1px solid var(--line); box-shadow:0 -1px 0 var(--bevel-hi); } .faq__i{ border-bottom:1px solid var(--line); } .faq__q{ width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:2rem; padding-block:clamp(1.25rem,2.2vw,1.75rem); text-align:left; font-size:clamp(1.02rem,1.6vw,1.24rem); font-weight:500; letter-spacing:-0.018em; line-height:1.35; transition:color .4s ease; } .faq__q:hover{ color:var(--gold-ink); } .faq__ico{ display:grid; place-items:center; flex:none; width:30px; height:30px; margin-top:.05em; border-radius:50%; position:relative; background:linear-gradient(168deg,#fff,var(--linen)); box-shadow:inset 0 1px 0 #fff, 0 0 0 1px var(--line-soft), var(--lift-1); transition:box-shadow .5s var(--e-out); } .faq__ico::before,.faq__ico::after{ content:''; position:absolute; background:var(--gold-ink); transition:transform .55s var(--e-out); border-radius:2px; } .faq__ico::before{ width:12px; height:1.6px; } .faq__ico::after{ width:1.6px; height:12px; } .faq__i.is-open .faq__ico::after{ transform:scaleY(0); } .faq__i.is-open .faq__ico{ box-shadow:inset 0 1px 0 #fff, 0 0 0 1px color-mix(in oklab,var(--gold) 70%,transparent), var(--lift-1); } .faq__i.is-open .faq__q{ color:var(--gold-ink); } .faq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .65s var(--e-out); } .faq__i.is-open .faq__a{ grid-template-rows:1fr; } .faq__a > div{ overflow:hidden; } .faq__a p{ color:var(--fg-muted); max-width:70ch; padding-bottom:clamp(1.3rem,2.2vw,1.8rem); text-wrap:pretty; } /* ══════════════════════════════════════════════════════════ CONTACTO ═══ */ .ctagrid{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(2.5rem,6vw,6rem); align-items:start; } @media (max-width:940px){ .ctagrid{ grid-template-columns:1fr; } } .chan{ display:grid; margin-top:clamp(2.2rem,4vw,3rem); border-top:1px solid var(--line); box-shadow:0 -1px 0 rgba(255,255,255,.07); } .chan a{ display:flex; align-items:center; gap:1.1rem; padding-block:1.15rem; border-bottom:1px solid var(--line-soft); position:relative; overflow:hidden; transition:padding-left .55s var(--e-out); } .chan a:hover{ padding-left:.75rem; } .chan a::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:3px; background:linear-gradient(180deg,var(--gold-lt),var(--gold-deep)); box-shadow:0 0 12px rgba(196,173,132,.6); transform:scaleY(0); transform-origin:bottom; transition:transform .55s var(--e-out); } .chan a:hover::before{ transform:scaleY(1); transform-origin:top; } .chan__ico{ display:grid; place-items:center; width:40px; height:40px; border-radius:12px; flex:none; color:var(--gold-lt); background:linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.03)); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 1px rgba(255,255,255,.09); transition:box-shadow .5s ease; } .chan a:hover .chan__ico{ box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 1px color-mix(in oklab,var(--gold) 45%,transparent), 0 8px 20px -10px rgba(196,173,132,.6); } .chan__ico svg{ width:17px; height:17px; } .chan__t b{ display:block; font-weight:500; font-size:1rem; letter-spacing:-0.012em; } .chan__t span{ font-size:.82rem; color:var(--fg-muted); } .chan__go{ margin-left:auto; color:var(--fg-muted); transition:transform .55s var(--e-out), color .4s ease; } .chan a:hover .chan__go{ transform:translate3d(4px,0,0); color:var(--gold-lt); } .form{ padding:clamp(1.6rem,3vw,2.6rem); } .form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; } @media (max-width:560px){ .form__row{ grid-template-columns:1fr; } } .field{ position:relative; margin-bottom:1rem; } .field label{ position:absolute; left:1rem; top:1.05rem; font-size:.95rem; color:rgba(242,239,233,.6); pointer-events:none; transform-origin:left top; transition:transform .45s var(--e-out), color .45s ease; } .field input,.field textarea,.field select{ width:100%; padding:1.65rem 1rem .68rem; border-radius:var(--radius-sm); background:rgba(0,3,46,.42); border:1px solid rgba(255,255,255,.13); box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 2px 8px rgba(0,0,0,.35); color:#F2EFE9; font-size:.97rem; line-height:1.4; appearance:none; transition:border-color .4s ease, box-shadow .4s ease, background-color .4s ease; } .field textarea{ min-height:118px; resize:vertical; } .field select{ padding-top:1.62rem; cursor:pointer; } .field select option{ background:var(--abyss); color:#F2EFE9; } .field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--gold); background:rgba(0,3,46,.55); box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 3px rgba(196,173,132,.18); } .field input:focus + label,.field textarea:focus + label, .field input:not(:placeholder-shown) + label,.field textarea:not(:placeholder-shown) + label, .field select:focus + label,.field select.has-val + label{ transform:translate3d(0,-.72rem,0) scale(.78); color:var(--gold-lt); } .field__ar{ position:absolute; right:1.05rem; top:1.55rem; width:10px; height:10px; pointer-events:none; border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold); rotate:45deg; } .consent{ display:flex; gap:.75rem; align-items:flex-start; margin-top:.4rem; font-size:.82rem; color:var(--fg-muted); line-height:1.5; } .consent input{ appearance:none; width:19px; height:19px; flex:none; margin-top:.1em; border-radius:6px; border:1px solid rgba(255,255,255,.26); background:rgba(0,3,46,.4); cursor:pointer; position:relative; transition:background .35s ease, border-color .35s ease; } .consent input:checked{ background:linear-gradient(168deg,var(--gold-lt),var(--gold)); border-color:var(--gold); } .consent input:checked::after{ content:''; position:absolute; left:6px; top:2.5px; width:5px; height:9.5px; border-right:2px solid var(--abyss); border-bottom:2px solid var(--abyss); rotate:45deg; } .consent a{ color:var(--gold-lt); text-decoration:underline; text-underline-offset:2px; } .form .btn{ width:100%; margin-top:1.4rem; } .form__msg{ margin-top:1rem; font-size:.86rem; min-height:1.2em; color:var(--gold-lt); } .form__msg[data-state="error"]{ color:#F0A98E; } /* ═══════════════════════════════════════════════════════════════ PIE ═══ */ .foot{ position:relative; overflow:hidden; padding-top:clamp(3.5rem,7vw,6rem); color:#F2EFE9; background:linear-gradient(178deg, #050D31, var(--abyss) 60%); } .foot__lock{ padding-bottom:clamp(2rem,4vw,3rem); border-bottom:1px solid var(--line-soft); } .foot__lock img{ width:100%; max-width:100%; height:auto; opacity:.20; } .foot__cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem clamp(1.5rem,3vw,3rem); padding-block:clamp(2.4rem,4.5vw,3.4rem); } @media (max-width:860px){ .foot__cols{ grid-template-columns:1fr 1fr; } } @media (max-width:520px){ .foot__cols{ grid-template-columns:1fr; } } .foot h4{ font-size:var(--fs-xs); letter-spacing:.15em; text-transform:uppercase; color:var(--gold-lt); margin-bottom:1.1rem; font-weight:600; } .foot li+li{ margin-top:.55rem; } .foot li a,.foot p{ font-size:.9rem; color:rgba(242,239,233,.62); transition:color .35s ease; } .foot li a:hover{ color:var(--gold-lt); } .foot__bar{ display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; justify-content:space-between; align-items:center; padding-block:1.6rem; border-top:1px solid var(--line-soft); font-size:.8rem; color:rgba(242,239,233,.55); } .foot__bar nav{ display:flex; flex-wrap:wrap; gap:1.3rem; } .foot__bar a:hover{ color:var(--gold-lt); } .fab{ position:fixed; right:clamp(1rem,2.4vw,1.9rem); bottom:clamp(1rem,2.4vw,1.9rem); z-index:110; display:flex; align-items:center; gap:.6rem; padding:.9rem 1.3rem; border-radius:100px; color:#03260F; font-size:.88rem; font-weight:600; background:linear-gradient(170deg,#5BEF95,#25D366 55%,#12A150); box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 12px 30px -12px rgba(0,0,0,.6); transform:translate3d(0,120%,0); opacity:0; transition:transform .7s var(--e-out), opacity .5s ease, box-shadow .5s var(--e-out); } .fab.is-on{ transform:none; opacity:1; } .fab:hover{ transform:translate3d(0,-3px,0); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 18px 40px -14px rgba(0,0,0,.7); } .fab svg{ width:19px; height:19px; flex:none; } @media (max-width:520px){ .fab span{ display:none; } .fab{ padding:1rem; } } /* ══════════════════════════════════════════════════════ PÁGINAS LEGALES */ .doc{ padding-top:calc(var(--nav-h) + clamp(3rem,8vw,6rem)); } .doc__body{ max-width:70ch; } .doc__body h2{ font-size:clamp(1.3rem,2.2vw,1.7rem); margin-top:2.6rem; margin-bottom:.8rem; } .doc__body h3{ font-size:1.05rem; font-weight:600; margin-top:1.6rem; margin-bottom:.4rem; } .doc__body p,.doc__body li{ color:var(--fg-muted); margin-bottom:.9rem; text-wrap:pretty; } .doc__body ul{ list-style:disc; padding-left:1.3rem; margin-bottom:1.2rem; } .doc__body a{ color:var(--gold-ink); text-decoration:underline; text-underline-offset:2px; } .doc__body strong{ color:var(--fg); font-weight:600; } /* ═════════════════════════════════════════════════ ACCESIBILIDAD / SIN JS */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } [data-rv],.rv-lines .ln > span{ opacity:1 !important; transform:none !important; } .rv-clip{ clip-path:none !important; } .loader{ display:none !important; } .sculpt__band{ display:none; } } @media print{ .nav,.loader,.fab,.progress,.ticker,.drawer,.sky,.rays,.floor{ display:none !important; } body{ background:#fff; color:#000; } }