/* ============================================================ AURLINE ADVISORY · sistema visual Institucional moderno · banca privada · "la línea" ============================================================ */ /* Las fuentes se cargan desde el de cada página con preconnect (antes @import aquí: bloqueaba el primer render). */ :root{ /* paleta */ --forest: #0f2a2e; /* verde-teal profundo (fondos oscuros) */ --forest-2: #0a1f22; /* más profundo */ --forest-3: #16383c; /* tarjetas sobre oscuro */ --teal: #3d6b63; /* teal apagado secundario */ --sand: #cdb489; /* oro / arena (acento) */ --sand-deep: #b89a6a; --sand-text: #6f5420; /* oro oscuro · texto AA (≥4.5:1) sobre fondo claro */ --sand-soft: #e3d4b8; --paper: #f2efe9; /* off-white principal */ --paper-2: #eae5db; /* off-white sombreado */ --paper-3: #ded7c9; /* hairline sobre claro */ --ink: #14201f; /* texto principal sobre claro */ --ink-soft: #4a5654; /* texto secundario sobre claro */ --mist: #dee7e4; /* texto secundario sobre oscuro */ --mist-soft: #a9bbb5; /* tipografía */ --sans: 'Schibsted Grotesk', system-ui, sans-serif; --body: 'Hanken Grotesk', system-ui, sans-serif; --serif:'Newsreader', Georgia, serif; /* ritmo */ --rail: 26px; /* gutter de la línea */ --maxw: 1240px; --pad: clamp(22px, 5vw, 84px); --ease: cubic-bezier(.22,.61,.36,1); } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; } body{ margin:0; font-family:var(--body); color:var(--ink); background:var(--paper); font-size:17px; line-height:1.6; font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{ max-width:100%; display:block; height:auto; } a{ color:inherit; text-decoration:none; } ::selection{ background:var(--sand); color:var(--forest); } /* ---------- accesibilidad: foco visible por teclado ---------- */ :focus{ outline:none; } :focus-visible{ outline:2px solid var(--sand-deep); outline-offset:3px; border-radius:2px; } .on-dark :focus-visible, .on-deep :focus-visible, .foot :focus-visible, .site-head.on-forest :focus-visible{ outline-color:var(--sand); } /* enlace "saltar al contenido" · visible solo con foco */ .skip-link{ position:fixed; top:14px; left:14px; z-index:300; font-family:var(--sans); font-size:.84rem; font-weight:600; letter-spacing:.02em; background:var(--forest); color:#fff; border:1px solid var(--sand); padding:10px 18px; border-radius:2px; transform:translateY(-260%); transition:transform .25s var(--ease); } .skip-link:focus-visible{ transform:none; outline-offset:1px; } main:target{ scroll-margin-top:90px; } /* ---------- tipografía ---------- */ h1,h2,h3,h4{ font-family:var(--sans); font-weight:600; letter-spacing:-.018em; margin:0; line-height:1.04; color:var(--ink); } .display{ font-size:clamp(2.6rem, 6.2vw, 5.4rem); font-weight:600; letter-spacing:-.03em; line-height:1.06; text-wrap:balance; } .h2{ font-size:clamp(1.9rem,3.6vw,3rem); letter-spacing:-.022em; text-wrap:balance; } .h3{ font-size:clamp(1.25rem,1.9vw,1.6rem); letter-spacing:-.015em; } p{ margin:0 0 1.1em; text-wrap:pretty; } .lead{ font-size:clamp(1.12rem,1.7vw,1.42rem); line-height:1.5; color:var(--ink-soft); font-weight:400; } .serif{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:0; } /* eyebrow / kicker */ .kicker{ font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--sand-text); display:inline-flex; align-items:flex-start; gap:.7em; max-width:100%; text-wrap:balance; } .kicker::before{ content:""; width:26px; height:1px; background:var(--sand-deep); display:inline-block; flex:none; margin-top:.62em; } @media (max-width:600px){ .kicker{ letter-spacing:.16em; gap:.6em; } .kicker::before{ width:20px; margin-top:.58em; } } .on-dark .kicker, .on-deep .kicker, .foot .kicker{ color:var(--sand); } .on-dark .kicker::before, .on-deep .kicker::before, .foot .kicker::before{ background:var(--sand); } /* ---------- layout ---------- */ .wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); } .section{ position:relative; padding:clamp(72px,11vh,140px) 0; } .on-dark{ background:linear-gradient(rgba(15,42,46,.5),rgba(15,42,46,.5)), url('astrolabio-bg-opt.jpg') center/cover no-repeat, var(--forest); color:var(--mist); } .on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{ color:#fff; } .on-deep{ background:linear-gradient(rgba(10,31,34,.5),rgba(10,31,34,.5)), url('astrolabio-bg-opt.jpg') center/cover no-repeat, var(--forest-2); color:var(--mist); } .on-deep h1,.on-deep h2,.on-deep h3,.on-deep h4{ color:#fff; } .muted{ color:var(--ink-soft); } .on-dark .muted, .on-deep .muted, .foot .muted{ color:var(--mist); } .seal .muted{ color:var(--ink-soft); } .hr{ height:1px; background:var(--paper-3); border:0; margin:0; } .on-dark .hr, .on-deep .hr{ background:rgba(205,180,137,.22); } /* ============================================================ "LA LÍNEA" · hilo continuo de scroll ============================================================ */ .thread{ position:fixed; /* hilo de progreso anclado al margen izquierdo · nunca sobre el contenido */ top:0; left:clamp(14px, 2.1vw, 40px); width:1px; height:100vh; background:linear-gradient(rgba(140,140,140,.18), rgba(140,140,140,.18)); z-index:5; pointer-events:none; opacity:.0; transition:opacity .6s; } .thread.show{ opacity:1; } .thread__fill{ position:absolute; top:0; left:-.5px; width:2px; background:linear-gradient(var(--sand-deep), var(--sand)); height:0; } .thread__bead{ position:absolute; left:-3.5px; width:8px; height:8px; border-radius:50%; background:var(--sand); box-shadow:0 0 0 4px rgba(205,180,137,.18); transform:translateY(-50%); top:0; } @media (max-width:860px){ .thread{ display:none; } } /* nodo de sección (marcador inline sobre el contenido) */ .node{ position:relative; padding-left:34px; } .node::before{ content:""; position:absolute; left:0; top:.55em; width:9px; height:9px; border:1.5px solid var(--sand-deep); background:var(--paper); transform:rotate(45deg); transition:background .5s var(--ease), border-color .5s; } .node.lit::before{ background:var(--sand); border-color:var(--sand); } .on-dark .node::before{ background:var(--forest); border-color:var(--sand); } /* ============================================================ HEADER ============================================================ */ .site-head{ position:fixed; top:0; left:0; right:0; z-index:40; display:flex; align-items:center; justify-content:space-between; padding:18px var(--pad); transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s; } .site-head.solid{ background:rgba(242,239,233,.86); backdrop-filter:saturate(140%) blur(14px); box-shadow:0 1px 0 var(--paper-3); padding-top:13px; padding-bottom:13px; } .site-head.on-forest{ color:#fff; } .site-head.on-forest.solid{ background:rgba(12,32,35,.78); box-shadow:0 1px 0 rgba(205,180,137,.18); } .brand{ display:flex; align-items:center; gap:12px; font-family:var(--sans); font-weight:600; letter-spacing:.02em; } .brand__mark{ width:24px; height:24px; flex:none; } .brand__mark line, .brand__mark circle{ stroke:var(--sand); } .brand__logo{ height:34px; width:auto; flex:none; display:block; transition:height .4s var(--ease); } .site-head.solid .brand__logo{ height:30px; } .brand__name{ font-size:1.04rem; letter-spacing:.18em; } .brand__name b{ font-weight:600; } .brand sup{ font-size:.5em; letter-spacing:.1em; color:var(--sand-text); font-weight:500; } .site-head.on-forest .brand sup{ color:var(--sand); } @media (max-width:420px){ .brand__name{ font-size:.92rem; letter-spacing:.14em; } .brand__logo{ height:30px; } } .nav{ display:flex; align-items:center; gap:clamp(14px,2.2vw,34px); } .nav a{ font-family:var(--sans); font-size:.86rem; font-weight:500; letter-spacing:.01em; position:relative; padding:6px 0; color:inherit; opacity:.82; transition:opacity .25s; } .nav a:hover{ opacity:1; } .nav a.active{ opacity:1; } /* legibilidad garantizada del menú sobre cada fondo */ .site-head.on-forest .nav a{ color:#fff; } .site-head.solid:not(.on-forest) .nav a{ color:var(--ink); } .nav a.active::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--sand); } .nav__cta{ font-family:var(--sans); font-size:.84rem; font-weight:600; border:1px solid currentColor; padding:9px 17px; border-radius:2px; opacity:.9; transition:.25s var(--ease); } .nav__cta:hover{ background:var(--sand); border-color:var(--sand); color:var(--forest); opacity:1; } .nav__toggle{ display:none; } /* controles inyectados por JS · solo existen en el menú móvil */ .nav__acc{ display:none; } .nav__cta-group{ display:none; } /* ---------- desplegables del nav (escritorio) ---------- */ .nav__item{ position:relative; display:flex; align-items:center; } .nav__item > a{ display:inline-flex; align-items:center; gap:.5em; } .nav__caret{ width:6px; height:6px; flex:none; margin-top:-2px; border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor; transform:rotate(45deg); opacity:.55; transition:transform .35s var(--ease); } .nav__item:hover .nav__caret, .nav__item:focus-within .nav__caret{ transform:rotate(225deg) translate(-1px,-1px); } .nav__drop{ position:absolute; top:calc(100% + 16px); left:50%; min-width:288px; transform:translate(calc(-50% + var(--drop-shift, 0px)), 10px); background:linear-gradient(165deg, var(--forest-3), var(--forest-2)); border:1px solid rgba(205,180,137,.26); border-radius:4px; padding:10px; box-shadow:0 26px 60px rgba(10,31,34,.38); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .32s var(--ease), transform .32s var(--ease), visibility 0s linear .32s; } /* puente invisible para no perder el hover entre enlace y panel */ .nav__drop::before{ content:""; position:absolute; top:-17px; left:0; right:0; height:17px; } /* hairline dorada superior, se traza al abrir */ .nav__drop::after{ content:""; position:absolute; top:0; left:10px; right:10px; height:1px; background:var(--sand); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease) .08s; } .nav__item:hover .nav__drop, .nav__item:focus-within .nav__drop{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(calc(-50% + var(--drop-shift, 0px)), 0); transition-delay:0s; } .nav__item:hover .nav__drop::after, .nav__item:focus-within .nav__drop::after{ transform:scaleX(1); } .site-head .nav__drop a{ display:flex; align-items:baseline; gap:12px; padding:10px 12px; border-radius:3px; font-size:.88rem; font-weight:500; color:rgba(255,255,255,.86); opacity:1; white-space:nowrap; transition:background .25s, color .25s, transform .25s var(--ease); } .site-head .nav__drop a:hover{ background:rgba(205,180,137,.12); color:#fff; transform:translateX(3px); } .site-head .nav__drop a.active{ color:var(--sand); } /* el panel del desplegable SIEMPRE es oscuro: sus enlaces nunca heredan el tono tinta del header claro (.solid sobre fondo claro) */ .site-head.solid:not(.on-forest) .nav__drop a{ color:rgba(255,255,255,.86); } .site-head.solid:not(.on-forest) .nav__drop a:hover{ color:#fff; } .site-head.solid:not(.on-forest) .nav__drop a.active{ color:var(--sand); } .site-head.solid:not(.on-forest) .nav__drop .nav__drop-all{ color:var(--sand); } .site-head.solid:not(.on-forest) .nav__drop .nav__drop-all:hover{ color:#fff; } .nav__drop a::after{ content:none; } .nav__drop-no{ font-family:var(--sans); font-size:.66rem; font-weight:600; letter-spacing:.08em; color:var(--sand); flex:none; } .site-head .nav__drop .nav__drop-all{ margin-top:6px; border-top:1px solid rgba(205,180,137,.22); border-radius:0 0 3px 3px; color:var(--sand); font-weight:600; display:inline-flex; align-items:center; gap:.55em; width:100%; } .site-head .nav__drop .nav__drop-all:hover{ color:#fff; } .nav__drop .arr{ transition:transform .3s var(--ease); } .nav__drop a:hover .arr{ transform:translateX(4px); } /* entrada escalonada de los items del panel */ @media (prefers-reduced-motion: no-preference){ .nav__drop a{ opacity:0; transform:translateY(7px); } .nav__item:hover .nav__drop a, .nav__item:focus-within .nav__drop a{ opacity:1; transform:none; } .nav__item:hover .nav__drop a:nth-child(1), .nav__item:focus-within .nav__drop a:nth-child(1){ transition-delay:.04s; } .nav__item:hover .nav__drop a:nth-child(2), .nav__item:focus-within .nav__drop a:nth-child(2){ transition-delay:.08s; } .nav__item:hover .nav__drop a:nth-child(3), .nav__item:focus-within .nav__drop a:nth-child(3){ transition-delay:.12s; } .nav__item:hover .nav__drop a:nth-child(4), .nav__item:focus-within .nav__drop a:nth-child(4){ transition-delay:.16s; } .nav__item:hover .nav__drop a:nth-child(5), .nav__item:focus-within .nav__drop a:nth-child(5){ transition-delay:.2s; } .nav__item:hover .nav__drop a:nth-child(6), .nav__item:focus-within .nav__drop a:nth-child(6){ transition-delay:.24s; } .nav__item:hover .nav__drop a:nth-child(7), .nav__item:focus-within .nav__drop a:nth-child(7){ transition-delay:.28s; } .nav__item:hover .nav__drop a:nth-child(8), .nav__item:focus-within .nav__drop a:nth-child(8){ transition-delay:.32s; } } @media (prefers-reduced-motion: reduce){ .nav__drop{ transition:none; } .nav__drop::after{ transition:none; transform:scaleX(1); } } /* el menú abierto nunca debe heredar efectos del header que creen un «containing block» para position:fixed · tanto transform (header oculto al hacer scroll) como backdrop-filter (header .solid) re-anclan el panel al header de 66px y lo recortan. Se neutralizan ambos mientras esté abierto. */ body.nav-open .site-head{ transform:none; transition:none; -webkit-backdrop-filter:none; backdrop-filter:none; } @media (max-width:780px){ .nav{ position:fixed; top:0; right:0; bottom:0; left:auto; width:min(440px, 92vw); height:100vh; height:100dvh; background:var(--forest); color:#fff; flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:6px; padding:max(96px, 16vh) var(--pad) 56px; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; transform:translateX(100%); visibility:hidden; transition:transform .45s var(--ease), visibility 0s linear .45s; z-index:50; box-shadow:-32px 0 70px rgba(10,31,34,.4); } .nav.open{ transform:none; visibility:visible; transition-delay:0s; } /* enlaces de primer nivel: objetivo táctil ≥ 48 px */ .nav > a{ font-size:1.2rem; opacity:.95; display:flex; align-items:center; min-height:48px; padding:10px 0; width:100%; border-top:1px solid rgba(205,180,137,.14); } .nav > a:first-of-type{ border-top:0; } /* scrim sobre el contenido mientras el menú está abierto. OJO: el header (z-index:40, position:fixed) crea un stacking context, así que el panel del menú (dentro de él) pinta al nivel 40 aunque tenga z-index:50. El scrim debe quedar POR DEBAJO del header (39) o taparlo: lo difuminaría y bloquearía los taps. */ body.nav-open::after{ content:""; position:fixed; inset:0; z-index:39; background:rgba(10,31,34,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); animation:scrimIn .4s ease both; } /* iOS ignora overflow:hidden en body: bloquear también en html (el resto del bloqueo lo hace el touchmove de site.js) */ html:has(body.nav-open){ overflow:hidden; } @keyframes scrimIn{ from{ opacity:0; } to{ opacity:1; } } /* ── grupos de navegación como ACORDEONES plegables ── */ .nav__item{ position:relative; flex-direction:column; align-items:stretch; width:100%; border-top:1px solid rgba(205,180,137,.14); } .nav__caret{ display:none; } /* el enlace-cabecera navega a la página índice; deja sitio al botón de pliegue */ .nav__item > a[aria-haspopup]{ font-size:1.2rem; opacity:.95; display:flex; align-items:center; min-height:48px; padding:10px 52px 10px 0; width:100%; } /* botón de acordeón (inyectado por JS) · objetivo táctil 48×48 */ .nav__acc{ position:absolute; top:0; right:-6px; width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:none; border:0; cursor:pointer; color:#fff; padding:0; } .nav__acc::before{ content:""; width:9px; height:9px; flex:none; margin-top:-3px; border-right:1.6px solid var(--sand); border-bottom:1.6px solid var(--sand); transform:rotate(45deg); transition:transform .3s var(--ease); } .nav__item.acc-open > .nav__acc::before{ transform:rotate(225deg); margin-top:3px; } .nav__acc:focus-visible{ outline:2px solid var(--sand); outline-offset:-4px; border-radius:3px; } /* panel colapsable · animado por altura, accesible (oculto = fuera del foco) */ .nav__drop{ position:static; transform:none; pointer-events:auto; background:none; border:0; border-radius:0; box-shadow:none; min-width:0; width:100%; padding:0 0 0 16px; margin-left:3px; border-left:1px solid rgba(205,180,137,.28); display:flex; flex-direction:column; gap:0; max-height:0; overflow:hidden; opacity:0; visibility:hidden; transition:max-height .4s var(--ease), opacity .3s var(--ease), padding .4s var(--ease), visibility 0s linear .4s; } .nav__item.acc-open > .nav__drop{ opacity:1; visibility:visible; padding-bottom:10px; transition:max-height .4s var(--ease), opacity .3s var(--ease) .05s, padding .4s var(--ease); } .nav__drop::before, .nav__drop::after{ content:none; } .nav__item:hover .nav__drop, .nav__item:focus-within .nav__drop{ transform:none; } .site-head .nav__drop a{ font-size:1.02rem; min-height:44px; display:flex; align-items:center; padding:8px 0; color:rgba(255,255,255,.82); white-space:normal; opacity:1; transform:none; background:none; } .site-head .nav__drop a:hover{ transform:none; color:#fff; } .site-head .nav__drop .nav__drop-all{ border-top:0; margin-top:2px; width:auto; } /* el pill "Hablemos" se reemplaza por el bloque CTA destacado en móvil. Sin línea divisoria suelta: el bloque se ancla al fondo del panel y el espacio en blanco lo separa de la navegación (más limpio y premium). */ .nav__cta{ display:none; } .nav__cta-group{ display:flex; flex-direction:column; gap:12px; width:100%; margin-top:auto; padding-top:34px; border-top:0; } .nav .nav__cta-main{ display:flex; align-items:center; justify-content:center; gap:.55em; min-height:52px; padding:14px 20px; border-radius:2px; background:var(--sand); color:var(--forest); font-weight:600; font-size:1rem; letter-spacing:.01em; opacity:1; border:0; } .nav .nav__cta-main:hover{ background:var(--sand-deep); color:var(--forest); } .nav__cta-main .arr{ transition:transform .3s var(--ease); } .nav .nav__cta-main:hover .arr{ transform:translateX(4px); } .nav .nav__cta-sec{ display:flex; align-items:center; justify-content:center; min-height:48px; padding:11px 20px; border-radius:2px; border:1px solid rgba(205,180,137,.5); color:#fff; font-size:.96rem; opacity:.95; } .nav .nav__cta-sec:hover{ border-color:var(--sand); color:#fff; } /* entrada escalonada del propio menú */ @media (prefers-reduced-motion: no-preference){ .nav > a, .nav > .nav__item{ opacity:0; transform:translateX(22px); transition:opacity .5s var(--ease), transform .5s var(--ease); } .nav.open > a, .nav.open > .nav__item{ opacity:1; transform:none; } .nav.open > :nth-child(1){ transition-delay:.1s; } .nav.open > :nth-child(2){ transition-delay:.16s; } .nav.open > :nth-child(3){ transition-delay:.22s; } .nav.open > :nth-child(4){ transition-delay:.28s; } .nav.open > :nth-child(5){ transition-delay:.34s; } } .nav__toggle{ display:flex; flex-direction:column; gap:5px; z-index:60; background:none; border:0; cursor:pointer; padding:6px; } .nav__toggle span{ width:24px; height:2px; background:currentColor; transition:.3s var(--ease); } /* con el menú abierto el botón vive sobre el panel oscuro: siempre legible */ body.nav-open .nav__toggle{ color:#fff; position:fixed; top:24px; right:var(--pad); } .nav__toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .nav__toggle.open span:nth-child(2){ opacity:0; } .nav__toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } } /* ============================================================ BOTONES ============================================================ */ .btn{ display:inline-flex; align-items:center; gap:.7em; font-family:var(--sans); font-weight:600; font-size:.92rem; letter-spacing:.01em; padding:14px 26px; border-radius:2px; cursor:pointer; border:1px solid transparent; transition:.3s var(--ease); } .btn--gold{ background:var(--sand); color:var(--forest); } .btn--gold:hover{ background:var(--sand-deep); } .btn--ghost{ border-color:var(--ink); color:var(--ink); background:none; } .btn--ghost:hover{ background:var(--ink); color:var(--paper); } .on-dark .btn--ghost, .on-deep .btn--ghost, .foot .btn--ghost, [data-hero-dark] .btn--ghost{ border-color:rgba(255,255,255,.5); color:#fff; } .on-dark .btn--ghost:hover, .on-deep .btn--ghost:hover, .foot .btn--ghost:hover, [data-hero-dark] .btn--ghost:hover{ background:#fff; color:var(--forest); } .btn .arr{ transition:transform .3s var(--ease); } .btn:hover .arr{ transform:translateX(4px); } .txtlink{ font-family:var(--sans); font-weight:600; font-size:.9rem; color:var(--sand-text); display:inline-flex; align-items:center; gap:.55em; border-bottom:1px solid transparent; padding-bottom:2px; transition:.25s; } .on-dark .txtlink, .on-deep .txtlink, .foot .txtlink{ color:var(--sand); } .txtlink:hover{ border-color:currentColor; } .txtlink .arr{ transition:transform .3s var(--ease); } .txtlink:hover .arr{ transform:translateX(4px); } /* ============================================================ REVEAL (micro-animaciones de scroll) ============================================================ */ /* El contenido es visible por defecto. Solo se oculta para animar cuando JS está confirmado activo (html.js, fijado de forma síncrona en el ) y mientras aún no se ha revelado (:not(.in)). Al añadir .in la regla de ocultar deja de aplicar y el contenido vuelve a opacity:1 con transición. */ .reveal{ transition:opacity .9s var(--ease), transform .9s var(--ease); } html.js .reveal:not(.in){ opacity:0; transform:translateY(22px); } .reveal.in{ opacity:1; transform:none; } .reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; } /* red de seguridad: si el motor de revelado no confirma a tiempo (fallo de carga, error o IntersectionObserver no soportado) se fuerza el contenido. */ html.reveal-all .reveal{ opacity:1 !important; transform:none !important; transition:none !important; } @media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } } /* ============================================================ COMPONENTES ============================================================ */ /* grilla genérica */ .grid{ display:grid; gap:clamp(20px,3vw,42px); } .g-2{ grid-template-columns:repeat(2,1fr); } .g-3{ grid-template-columns:repeat(3,1fr); } .g-4{ grid-template-columns:repeat(4,1fr); } @media (max-width:900px){ .g-3,.g-4{ grid-template-columns:repeat(2,1fr); } } @media (max-width:620px){ .g-2,.g-3,.g-4{ grid-template-columns:1fr; } } /* índice numerado */ .idx{ font-family:var(--sans); font-size:.82rem; font-weight:600; letter-spacing:.04em; color:var(--sand-text); } .on-dark .idx, .on-deep .idx{ color:var(--sand); } /* tarjeta de servicio */ .svc{ border-top:1px solid var(--paper-3); padding:30px 0 34px; position:relative; display:grid; grid-template-columns:auto 1fr; gap:0 30px; transition:.4s var(--ease); } .svc:hover{ background:linear-gradient(var(--paper-2),transparent); } .on-dark .svc, .on-deep .svc{ border-color:rgba(205,180,137,.22); } .on-dark .svc:hover, .on-deep .svc:hover{ background:linear-gradient(rgba(255,255,255,.03),transparent); } .svc__no{ font-family:var(--sans); font-size:.82rem; font-weight:600; color:var(--sand-text); padding-top:.45em; } .on-dark .svc__no, .on-deep .svc__no{ color:var(--sand); } .svc__t{ font-family:var(--sans); font-size:clamp(1.3rem,2vw,1.75rem); font-weight:600; letter-spacing:-.015em; margin:0 0 .35em; } .svc__d{ max-width:62ch; margin:0; } .on-dark .svc__d, .on-deep .svc__d{ color:var(--mist); } .svc__tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; } .tag{ font-family:var(--sans); font-size:.74rem; font-weight:500; letter-spacing:.02em; border:1px solid var(--paper-3); color:var(--ink-soft); padding:4px 11px; border-radius:100px; } .on-dark .tag, .on-deep .tag{ border-color:rgba(205,180,137,.3); color:var(--mist); } /* tarjeta valor */ .value{ padding:26px 24px 28px; background:var(--forest-3); border:1px solid rgba(205,180,137,.16); border-radius:3px; transition:.4s var(--ease); } .value:hover{ border-color:rgba(205,180,137,.45); transform:translateY(-3px); } .value__no{ font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.16em; color:var(--sand); } .value__t{ font-family:var(--sans); font-size:1.18rem; font-weight:600; color:#fff; margin:.5em 0 .45em; } .value__d{ font-size:.96rem; color:var(--mist); margin:0; line-height:1.5; } /* stat / promesa */ .promise{ padding:30px 0; } .promise__n{ font-family:var(--sans); font-size:clamp(2.4rem,4vw,3.4rem); font-weight:600; letter-spacing:-.03em; color:var(--forest); line-height:1; } .on-dark .promise__n, .on-deep .promise__n{ color:#fff; } .promise__l{ font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--sand-text); margin:.8em 0 .5em; } .on-dark .promise__l, .on-deep .promise__l{ color:var(--sand); } /* placeholder de imagen */ .ph{ position:relative; background: repeating-linear-gradient(135deg, var(--paper-2) 0 11px, var(--paper) 11px 22px); border:1px solid var(--paper-3); border-radius:3px; overflow:hidden; display:flex; align-items:flex-end; min-height:240px; } .ph.dark{ background:repeating-linear-gradient(135deg, #123034 0 11px, #0f2a2e 11px 22px); border-color:rgba(205,180,137,.2); } .ph__lbl{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:.72rem; letter-spacing:.04em; color:var(--ink-soft); background:var(--paper); border:1px solid var(--paper-3); border-radius:2px; padding:5px 9px; margin:14px; } .ph.dark .ph__lbl{ color:var(--mist); background:var(--forest-2); border-color:rgba(205,180,137,.25); } /* cita / mission */ .quote{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(1.6rem,3.4vw,2.7rem); line-height:1.28; letter-spacing:-.01em; text-wrap:balance; } .quote b{ font-style:normal; font-family:var(--sans); font-weight:600; } /* ============================================================ FOOTER ============================================================ */ .foot{ background:var(--forest-2); color:var(--mist); padding:clamp(60px,9vh,100px) 0 36px; } .foot h2{ color:#fff; } .foot__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:40px; } @media (max-width:780px){ .foot__grid{ grid-template-columns:1fr 1fr; gap:34px 24px; } } .foot__col h4, .foot__col .foot__h{ font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--sand); margin:0 0 16px; } .foot__col a{ display:block; color:var(--mist); padding:5px 0; font-size:.96rem; transition:color .25s; } .foot__col a:hover{ color:#fff; } .brand--foot{ margin-bottom:18px; } .brand__logo-foot{ height:78px; width:auto; display:block; } .foot__legal{ display:flex; flex-wrap:wrap; gap:9px 26px; margin-top:54px; padding-top:26px; border-top:1px solid rgba(205,180,137,.18); } .foot__legal a{ font-family:var(--sans); font-size:.82rem; font-weight:500; color:var(--mist); letter-spacing:.01em; transition:color .25s; } .foot__legal a:hover{ color:var(--sand); } .foot__bar{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; align-items:center; margin-top:22px; padding-top:0; border-top:0; font-size:.82rem; color:var(--mist-soft); font-family:var(--sans); letter-spacing:.01em; } .replay-intro{ font-family:var(--sans); font-size:.76rem; font-weight:600; letter-spacing:.04em; color:var(--mist); background:none; border:1px solid rgba(205,180,137,.32); border-radius:100px; padding:6px 15px; cursor:pointer; transition:.25s var(--ease); display:inline-flex; align-items:center; gap:.5em; } .replay-intro:hover{ color:var(--forest); background:var(--sand); border-color:var(--sand); } /* ---------- utilidades ---------- */ .max-58{ max-width:58ch; } .max-50{ max-width:50ch; } .mt-s{ margin-top:14px; } .mt-m{ margin-top:28px; } .mt-l{ margin-top:48px; } .mb-l{ margin-bottom:48px; } .flex{ display:flex; } .ac{ align-items:center; } .jb{ justify-content:space-between; } .gap-s{ gap:12px; } .gap-m{ gap:22px; } .wrapf{ flex-wrap:wrap; } .center{ text-align:center; } .spacer-head{ height:84px; } /* ============================================================ PÁGINAS LEGALES ============================================================ */ .legal-hero{ background:linear-gradient(rgba(15,42,46,.5),rgba(15,42,46,.5)), url('astrolabio-bg-opt.jpg') center/cover no-repeat, var(--forest); color:#fff; position:relative; overflow:hidden; padding:calc(96px + clamp(36px,7vh,68px)) 0 clamp(40px,6vh,68px); } .legal-hero__glow{ position:absolute; right:-10%; top:-30%; width:48vw; height:48vw; background:radial-gradient(circle, rgba(205,180,137,.13), transparent 62%); pointer-events:none; } .legal-hero .wrap{ position:relative; } .legal-hero__crumb{ font-family:var(--sans); font-size:.78rem; color:var(--mist-soft); } .legal-hero__crumb a{ color:var(--sand); } .legal-hero h1{ color:#fff; max-width:18ch; margin-top:.35em; font-size:clamp(2rem,4.4vw,3.4rem); letter-spacing:-.025em; } .legal-hero__meta{ font-family:var(--sans); font-size:.8rem; color:var(--mist); margin-top:18px; } .legal-wrap{ display:grid; grid-template-columns:230px 1fr; gap:clamp(28px,5vw,72px); align-items:start; } @media (max-width:880px){ .legal-wrap{ grid-template-columns:1fr; gap:8px; } } .legal-toc{ position:sticky; top:108px; } @media (max-width:880px){ .legal-toc{ position:static; top:auto; margin-bottom:18px; border:1px solid var(--paper-3); border-radius:3px; padding:16px 18px; background:var(--paper-2); } } .legal-toc h4, .legal-toc h2{ font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--sand-text); margin:0 0 12px; } .legal-toc a{ display:block; font-family:var(--sans); font-size:.86rem; color:var(--ink-soft); padding:6px 0 6px 14px; border-left:1px solid var(--paper-3); transition:.2s; line-height:1.3; } .legal-toc a:hover{ color:var(--ink); border-color:var(--sand); } .legal{ max-width:760px; } .legal section{ scroll-margin-top:110px; padding-bottom:8px; } .legal h2{ font-family:var(--sans); font-size:clamp(1.3rem,2.2vw,1.7rem); font-weight:600; letter-spacing:-.015em; margin:38px 0 14px; display:flex; gap:14px; align-items:baseline; } .legal h2:first-child{ margin-top:0; } .legal h2 .legal-no{ font-size:.82rem; font-weight:600; color:var(--sand-text); flex:none; } .legal h3{ font-family:var(--sans); font-size:1.05rem; font-weight:600; margin:26px 0 8px; } .legal p{ color:var(--ink-soft); margin:0 0 14px; } .legal ul, .legal ol{ color:var(--ink-soft); margin:0 0 16px; padding-left:22px; } .legal li{ margin-bottom:8px; } .legal a:not(.btn){ color:var(--sand-text); border-bottom:1px solid transparent; transition:.2s; } .legal a:not(.btn):hover{ border-color:currentColor; } .legal strong{ color:var(--ink); font-weight:600; } .legal__table{ width:100%; border-collapse:collapse; margin:6px 0 18px; font-size:.92rem; } .legal__table th, .legal__table td{ text-align:left; vertical-align:top; padding:11px 14px; border-bottom:1px solid var(--paper-3); color:var(--ink-soft); } .legal__table th{ font-family:var(--sans); font-weight:600; color:var(--ink); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; background:var(--paper-2); } .legal__note{ background:var(--paper-2); border:1px solid var(--paper-3); border-left:3px solid var(--sand); border-radius:3px; padding:18px 20px; margin:24px 0; font-size:.92rem; color:var(--ink-soft); } .legal__note strong{ font-family:var(--sans); } /* ============================================================ AJUSTES MÓVIL ============================================================ */ @media (max-width:620px){ .foot__bar{ flex-direction:column; align-items:flex-start; gap:14px; } .foot__legal{ gap:9px 18px; } .replay-intro{ order:2; } } @media (max-width:560px){ /* una sola columna y orden por prioridad: Contacto · Diagnóstico · Servicios */ .foot__grid{ grid-template-columns:1fr; gap:30px; } .foot__col:nth-child(1){ order:0; } /* marca + tagline */ .foot__col:nth-child(4){ order:1; } /* Contacto */ .foot__col:nth-child(2){ order:2; } /* Navegación (incluye Diagnóstico) */ .foot__col:nth-child(3){ order:3; } /* Servicios */ .foot__col a{ min-height:44px; display:flex; align-items:center; padding:8px 0; } .brand--foot{ min-height:0; } .foot__legal a{ min-height:40px; display:inline-flex; align-items:center; padding:6px 0; } .legal__table th, .legal__table td{ padding:9px 10px; font-size:.86rem; } } /* las tablas legales no deben empujar el ancho de la página */ .legal{ overflow-x:hidden; } .legal__table{ max-width:100%; } .legal__table td, .legal__table th{ overflow-wrap:anywhere; word-break:break-word; } .legal a:not(.btn){ overflow-wrap:anywhere; }