/* ╔══════════════════════════════════════════════════════════════════════════════════════════════╗
   ║ LA WEB PÚBLICA DE VESALUS · hoja de estilos compartida                          (2026-10-03) ║
   ╚══════════════════════════════════════════════════════════════════════════════════════════════╝
   Identidad Aurora (docs/GUIA_AURORA.md, docs/marca/IDENTIDAD_AURORA.md): navy profundo, un solo
   acento (el azul), el cian solo de detalle, Inter con tracking negativo, radios 18/12/8 (nunca
   cápsulas en nada de más de 24 px de alto: error 310), sin sombras en lo que está apoyado.
   Lo que decora NUNCA comparte sitio con lo que se lee (error 474): los resplandores viven en los
   bordes del hero y las viñetas son contenido, no decoración.
   La fuente va autoalojada (web/inter.woff2): ninguna petición a terceros. */

@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/web/inter.woff2) format('woff2')}

:root{
  --bg:#050D1C;--navy:#07172F;--surface:#0A1930;--surface2:#10233F;--surface3:#16304F;
  --text:#EAF4FB;--muted:#A2B3C6;--hint:#6E8299;
  --blue:#2A8FD6;--blue-deep:#155B8C;--cyan:#53D8FF;--warm:#F39A4A;
  --verde:#5FD39A;--naranja:#ffaa2c;--amarillo:#F3CB4E;
  --line:rgba(130,170,210,.14);--line2:rgba(130,170,210,.22);
  --radius:18px;--radius-sm:12px;--radius-xs:8px;
  --tr:.2s cubic-bezier(.4,0,.2,1);--ease:cubic-bezier(.22,.9,.3,1);
  --wrap:1180px;--gutter:clamp(20px,5vw,56px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
a,button{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:var(--radius-xs)}
::selection{background:var(--blue-deep);color:var(--text)}
h1,h2,h3,p{margin:0}
h1,h2{font-weight:750;letter-spacing:-.04em;line-height:1.04;text-wrap:balance}
h3{font-weight:700;letter-spacing:-.02em}
p{color:var(--muted)}
.wrap{width:min(var(--wrap),calc(100% - 2*var(--gutter)));margin-inline:auto}
.skip{position:fixed;top:-80px;left:20px;z-index:100;background:var(--surface3);color:var(--text);padding:12px 16px;border-radius:var(--radius-sm);font-weight:600}
.skip:focus{top:14px}

/* ── Cabecera ──────────────────────────────────────────────────────────────────────────────── */
.cab{position:fixed;inset:0 0 auto;z-index:40;background:rgba(5,13,28,.72);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.cab .wrap{height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.marca{display:flex;align-items:center;height:44px}
.marca img{width:132px;height:auto}
.cab nav{display:flex;align-items:center;gap:4px}
.cab nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--radius-sm);font-size:14.5px;font-weight:550;color:var(--muted);transition:color var(--tr),background var(--tr)}
.cab nav a:hover{color:var(--text);background:var(--surface2)}
.cab nav a[aria-current=page]{color:var(--text)}
.cab .acciones{display:flex;align-items:center;gap:10px}
.cab .menu-btn{display:none;width:44px;height:44px;border:1px solid var(--line);background:transparent;border-radius:var(--radius-sm);align-items:center;justify-content:center}
.cab .menu-btn svg{width:20px;height:20px}
@media(max-width:860px){
  .cab nav{display:none}
  .cab .menu-btn{display:inline-flex}
  .cab.abierta nav{display:flex;flex-direction:column;align-items:stretch;position:absolute;left:0;right:0;top:100%;background:rgba(5,13,28,.96);border-bottom:1px solid var(--line);padding:10px var(--gutter) 16px;gap:2px}
  .cab.abierta nav a{min-height:48px;font-size:16px}
}

/* ── Botones ───────────────────────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:14px;font-size:15px;font-weight:700;letter-spacing:.1px;border:1px solid var(--line2);background:rgba(255,255,255,.04);color:var(--text);transition:background var(--tr),border-color var(--tr),transform var(--tr),box-shadow var(--tr);white-space:nowrap}
.btn:hover{background:rgba(255,255,255,.08);border-color:rgba(83,216,255,.35)}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.btn.primario{border:none;background:linear-gradient(135deg,#2a8fd6,#155B8C);color:#fff;box-shadow:0 14px 32px -12px rgba(21,91,140,.85),inset 0 1px 0 rgba(255,255,255,.16)}
.btn.primario:hover{transform:translateY(-1px);box-shadow:0 18px 38px -12px rgba(21,91,140,.95),inset 0 1px 0 rgba(255,255,255,.16)}
.btn.primario:active{transform:none}
.btn.texto{border-color:transparent;background:transparent;color:var(--muted);padding:0 12px}
.btn.texto:hover{color:var(--cyan);background:transparent}
.btn.chica{min-height:40px;padding:0 16px;font-size:14px}
.btn.grande{min-height:56px;padding:0 30px;font-size:16px;border-radius:16px}

/* ── Tipografía de sección ─────────────────────────────────────────────────────────────────── */
.overline{font-size:12px;letter-spacing:.18em;font-weight:600;text-transform:uppercase;color:var(--muted)}
.overline .n{color:var(--cyan)}
.soft{color:var(--muted)}
.lead{font-size:clamp(17px,1.4vw,19px);line-height:1.65;max-width:560px}
.sec{padding-block:clamp(56px,8vw,104px)}
.sec-cab{max-width:760px;margin-bottom:clamp(20px,3vw,40px)}
.sec-cab h2{font-size:clamp(34px,4.6vw,58px);margin:14px 0 18px}
.sec-cab p{font-size:clamp(16px,1.3vw,18px);line-height:1.65;max-width:560px}
.hr{border:0;border-top:1px solid var(--line);margin:0}

/* ── Hero ──────────────────────────────────────────────────────────────────────────────────── */
.hero{position:relative;isolation:isolate;overflow:hidden;padding-top:calc(72px + env(safe-area-inset-top,0px));min-height:100svh;display:flex;align-items:center;
  background:
    radial-gradient(72% 55% at 84% -6%, rgba(83,216,255,.16), transparent 60%),
    radial-gradient(82% 62% at -12% 108%, rgba(21,91,140,.40), transparent 62%),
    linear-gradient(160deg,#123c5c 0%,#0a2438 46%,#07172f 100%)}
.hero::after{content:'';position:absolute;inset:auto 0 0;height:160px;background:linear-gradient(rgba(5,13,28,0),var(--bg));z-index:-1;pointer-events:none}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);align-items:center;padding-block:clamp(48px,7vh,96px)}
.hero h1{font-size:clamp(44px,6.2vw,92px);margin:18px 0 22px;max-width:12ch}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--cyan),#7cc4f4);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{color:rgba(224,240,250,.74);font-weight:500}
.hero .acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero .nota{margin-top:22px;font-size:14px;color:var(--muted)}
.hero .prueba{margin-top:14px;font-size:15px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:10px}
.hero .prueba::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--verde);box-shadow:0 0 0 4px rgba(95,211,154,.18);flex:0 0 auto}
.hero-arte{display:flex;justify-content:center;align-items:center;min-height:360px}
.entra{opacity:0;transform:translateY(18px);animation:entra .7s var(--ease) both}
.entra.d1{animation-delay:.08s}.entra.d2{animation-delay:.16s}.entra.d3{animation-delay:.26s}.entra.d4{animation-delay:.4s}
@keyframes entra{to{opacity:1;transform:none}}
@media(max-width:900px){
  .hero{min-height:0;padding-top:calc(72px + env(safe-area-inset-top,0px))}
  .hero .wrap{grid-template-columns:1fr;gap:28px;padding-block:36px 64px}
  .hero-arte{order:-1;min-height:0;justify-content:center;padding-top:8px}
  .lockup{gap:14px}
  .lockup .lk-fle{width:118px}
  .lockup .lk-txt{width:150px}
  .hero h1{max-width:none}
}

/* ── La animación del logotipo (docs/marca/animacion-logotipo.html, copiada tal cual) ────── */
.lockup{display:flex;flex-direction:column;align-items:center;gap:22px}
.lockup .lk-fle{width:clamp(150px,16vw,230px);height:auto;filter:drop-shadow(0 10px 40px rgba(83,216,255,.25))}
.lockup .lk-txt{width:clamp(200px,21vw,300px);height:auto}
.lk-fle,.lk-txt{display:block}
#anima .lk-fle{overflow:visible}
#anima .lk-txt{opacity:0}
.al-traza use{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.al-traza .t-linea{stroke:#EAF9FF;stroke-width:8}
.al-traza .t-glow{stroke:var(--cyan);stroke-width:22;filter:url(#fGlow)}
.t-glows{opacity:0}
.al-vidrio{opacity:0;filter:drop-shadow(0 16px 26px rgba(2,11,24,.55))}
.al-vidrio .v-cuerpo{fill:url(#lgVidrio)}
.al-vidrio .v-bisel{fill:none;stroke:url(#lgBisel);stroke-width:7;stroke-linejoin:round}
.al-plano{opacity:0}
@keyframes traza-dibuja{to{stroke-dashoffset:0}}
@keyframes vida-glow{0%{opacity:0}10%{opacity:.5}48%{opacity:.4}66%,100%{opacity:0}}
@keyframes vida-traza{0%,42%{opacity:1}64%,100%{opacity:0}}
@keyframes fase-vidrio{0%,32%{opacity:0}48%,74%{opacity:1}92%,100%{opacity:0}}
@keyframes fase-plano{0%,74%{opacity:0}88%,100%{opacity:1}}
@keyframes endereza{0%{transform:perspective(700px) rotateX(16deg) rotateY(-9deg) scale(.96)}55%{transform:perspective(700px) rotateX(9deg) rotateY(-5deg)}100%{transform:none}}
@keyframes brillo-pasa{0%,36%{transform:translateX(-820px)}72%,100%{transform:translateX(840px)}}
@keyframes sube-marca{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.va #anima .lk-fle{animation:endereza 4.4s cubic-bezier(.3,0,.2,1) both}
.va .al-traza .t-a{animation:traza-dibuja 1.5s cubic-bezier(.45,0,.25,1) .15s both}
.va .al-traza .t-b{animation:traza-dibuja 1.5s cubic-bezier(.45,0,.25,1) .5s both}
.va .al-traza{animation:vida-traza 4.4s linear both}
.va .t-glows{animation:vida-glow 4.4s linear both}
.va .al-vidrio{animation:fase-vidrio 4.4s linear both}
.va .al-plano{animation:fase-plano 4.4s linear both}
.va .v-brillo{animation:brillo-pasa 4.4s cubic-bezier(.4,0,.3,1) both}
.va #anima .lk-txt{animation:sube-marca .7s cubic-bezier(.22,1,.36,1) 3.85s both}

/* ── Aparición al hacer scroll ─────────────────────────────────────────────────────────────── */
.rev{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rev.in{opacity:1;transform:none}
.rev.d1{transition-delay:.08s}.rev.d2{transition-delay:.16s}.rev.d3{transition-delay:.24s}
html.sin-js .rev{opacity:1;transform:none}

/* ── Capítulos («Cómo funciona») ───────────────────────────────────────────────────────────── */
.cap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center;padding-block:clamp(36px,5vw,64px)}
.cap+.cap{border-top:1px solid var(--line)}
.cap .texto h2{font-size:clamp(32px,3.8vw,52px);margin:16px 0 20px}
.cap .texto p{font-size:clamp(16px,1.25vw,18px);line-height:1.7;max-width:480px}
.cap .texto p+p{margin-top:14px}
.cap.inv .texto{order:2}
@media(max-width:900px){
  .cap{grid-template-columns:1fr;gap:26px;padding-block:44px}
  .cap .texto,.cap.inv .texto{order:2}
  .cap .vin{order:1}
}

/* ── Viñetas: la interfaz, estilizada. Mismos tokens y radios que la app. ──────────────────── */
.vin{position:relative;display:flex;justify-content:center}
.tarjeta{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--line2);border-radius:var(--radius);padding:18px;color:var(--text)}
.tarjeta .t-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.tarjeta .t-tit{font-size:13px;font-weight:700;letter-spacing:-.1px}
.tarjeta .t-sub{font-size:12px;color:var(--hint)}
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:20px;font-size:11.5px;font-weight:700;letter-spacing:.1px;white-space:nowrap}
.chip.q{background:rgba(95,211,154,.14);color:var(--verde)}
.chip.c{background:rgba(255,170,44,.14);color:var(--naranja)}
.chip.t{background:rgba(243,203,78,.14);color:var(--amarillo)}
.chip.g{background:rgba(42,143,214,.16);color:#7fc3f0}
.chip.ok{background:rgba(95,211,154,.14);color:var(--verde)}
.chip.gris{background:var(--surface3);color:var(--muted)}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#1b5f91,#0f3b63);display:inline-grid;place-items:center;font-size:11.5px;font-weight:700;color:#DCEFFB;flex:0 0 auto;letter-spacing:.3px}
.avatar.tu{background:linear-gradient(135deg,#2a8fd6,#155B8C)}
.fila{display:flex;align-items:center;gap:12px;min-height:44px;padding:4px 0}
.fila+.fila{border-top:1px solid var(--line)}
.fila .nom{font-size:14px;font-weight:600;flex:1;min-width:0}
.fila .det{font-size:12px;color:var(--hint);display:block;font-weight:500;margin-top:1px}
.btn-vin{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 16px;border-radius:12px;font-size:13.5px;font-weight:700;background:linear-gradient(135deg,#2a8fd6,#155B8C);color:#fff}
.btn-vin.suave{background:var(--surface3);color:var(--text)}
/* pasos que aparecen en secuencia cuando la viñeta entra en pantalla */
.paso{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.in .paso{opacity:1;transform:none}
.in .paso:nth-child(1){transition-delay:.15s}.in .paso:nth-child(2){transition-delay:.55s}.in .paso:nth-child(3){transition-delay:.95s}.in .paso:nth-child(4){transition-delay:1.35s}.in .paso:nth-child(5){transition-delay:1.75s}
html.sin-js .paso{opacity:1;transform:none}

/* 01 · el servicio: los widgets de Inicio */
.widgets{display:grid;gap:10px}
.widget{background:var(--surface2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px}
.widget .w-tit{font-size:11.5px;font-weight:600;color:var(--hint);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.widget .w-val{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.widget .w-val .chip{height:22px}
.avatares{display:flex}
.avatares .avatar{width:28px;height:28px;font-size:10px;margin-left:-8px;border:2px solid var(--surface2)}
.avatares .avatar:first-child{margin-left:0}

/* 03 · la semana */
.semana{display:grid;grid-template-columns:52px repeat(5,1fr);gap:6px;align-items:center}
.semana.tres-dias{grid-template-columns:44px repeat(3,1fr)}
.semana.tres-dias .celda{height:38px;font-size:12px}
.semana .d{font-size:11px;font-weight:700;color:var(--hint);text-align:center;letter-spacing:.02em}
.semana .r{font-size:12px;font-weight:600;color:var(--muted)}
.semana .celda{height:34px;border-radius:9px;background:var(--surface2);border:1px solid var(--line);display:grid;place-items:center;font-size:11px;font-weight:700}
.semana .celda.q{background:rgba(95,211,154,.14);border-color:rgba(95,211,154,.25);color:var(--verde)}
.semana .celda.c{background:rgba(255,170,44,.14);border-color:rgba(255,170,44,.25);color:var(--naranja)}
.semana .celda.t{background:rgba(243,203,78,.14);border-color:rgba(243,203,78,.25);color:var(--amarillo)}
.semana .celda.x{color:var(--hint)}

/* 04 · los avisos: notificaciones que llegan */
.avisos-vin{display:grid;gap:10px;width:100%;max-width:440px}
.aviso{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line2);border-radius:16px;padding:14px 16px}
.aviso .ico{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#123c5c,#07172f);display:grid;place-items:center;flex:0 0 auto}
.aviso .ico img{width:22px}
.aviso .cuerpo{flex:1;min-width:0}
.aviso .quien{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--hint);margin-bottom:3px}
.aviso .quien b{color:var(--text);font-weight:700}
.aviso .que{font-size:14px;line-height:1.4}

/* 05 · la pantalla de la sala */
.pantalla-vin{width:100%;max-width:460px;background:#040B18;border:1px solid var(--line2);border-radius:var(--radius);padding:18px 20px 20px;box-shadow:inset 0 0 0 1px rgba(83,216,255,.06)}
.pantalla-vin .p-cab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.pantalla-vin .p-dia{font-size:15px;font-weight:750;letter-spacing:-.02em}
.pantalla-vin .p-hora{font-size:13px;color:var(--hint);font-variant-numeric:tabular-nums}
.pantalla-vin .p-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pantalla-vin .p-bloque{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px}
.pantalla-vin .p-bloque.ancho{grid-column:1/-1;display:flex;align-items:center;gap:12px}
.pantalla-vin .p-rot{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--hint);margin-bottom:6px}
.pantalla-vin .p-val{font-size:22px;font-weight:750;letter-spacing:-.03em;line-height:1.1}
.pantalla-vin .p-val small{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:0;margin-left:6px}
.pantalla-vin .p-guardia{display:flex;flex-direction:column}
.pantalla-vin .p-guardia .p-rot{margin-bottom:2px}

/* 06 · las ausencias: una petición y su camino */
.camino{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:14px;position:relative}
.camino::before{content:'';position:absolute;left:12%;right:12%;top:11px;height:2px;background:var(--surface3)}
.camino .e{position:relative;text-align:center;font-size:12px;color:var(--hint);padding-top:30px}
.camino .e::before{content:'';position:absolute;top:4px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--surface3);border:2px solid var(--surface)}
.camino .e.hecho{color:var(--muted)}
.camino .e.hecho::before{background:var(--blue)}
.camino .e.ok{color:var(--verde);font-weight:700}
.camino .e.ok::before{background:var(--verde)}
.cupo{margin-top:14px;display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--muted)}
.cupo b{color:var(--text)}
.barra{height:6px;border-radius:3px;background:var(--surface3);overflow:hidden;margin-top:8px}
.barra i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2a8fd6,#53D8FF);border-radius:3px;transition:width 1.2s var(--ease) .6s}
.in .barra i{width:62%}
html.sin-js .barra i{width:62%}

/* 07 · la formación: el mapa */
.mapa{position:relative;padding-left:26px}
.mapa::before{content:'';position:absolute;left:7px;top:10px;bottom:10px;width:2px;background:var(--surface3)}
.mapa .hito{position:relative;padding:8px 0 8px 6px}
.mapa .hito::before{content:'';position:absolute;left:-24px;top:16px;width:12px;height:12px;border-radius:50%;background:var(--blue);border:2px solid var(--surface)}
.mapa .hito.ahora::before{background:var(--cyan);box-shadow:0 0 0 4px rgba(83,216,255,.18)}
.mapa .anio{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--hint)}
.mapa .que{font-size:14px;font-weight:600;margin-top:2px}
.mapa .tipo{font-size:12px;color:var(--muted);margin-top:1px}

/* ── Franja de tres puntos ─────────────────────────────────────────────────────────────────── */
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.punto{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px}
.punto svg{width:24px;height:24px;color:var(--cyan);margin-bottom:16px}
.punto h3{font-size:18px;margin-bottom:8px}
.punto p{font-size:15px;line-height:1.6}
@media(max-width:900px){.tres{grid-template-columns:1fr}}

/* ── Cita / origen ─────────────────────────────────────────────────────────────────────────── */
.origen{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.origen .lado p{font-size:clamp(16px,1.3vw,18px);line-height:1.7}
.origen .lado p+p{margin-top:14px}
.dato{border-left:2px solid var(--cyan);padding:6px 0 6px 18px}
.dato b{display:block;font-size:clamp(28px,3vw,40px);font-weight:750;letter-spacing:-.03em;line-height:1.05}
.dato span{font-size:14px;color:var(--muted)}
.datos{display:grid;gap:22px}
@media(max-width:900px){.origen{grid-template-columns:1fr}}

/* ── Acceso ────────────────────────────────────────────────────────────────────────────────── */
.acceso{background:linear-gradient(180deg,var(--bg),#07172F 60%,var(--bg));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.acceso .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,96px);align-items:start}
.pasos{display:grid;gap:14px;margin:26px 0 30px}
.pasos .p{display:flex;gap:14px;align-items:flex-start}
.pasos .num{width:30px;height:30px;border-radius:50%;background:var(--surface3);display:grid;place-items:center;font-size:13px;font-weight:700;flex:0 0 auto;color:var(--cyan)}
.pasos .p p{font-size:15.5px;line-height:1.55;padding-top:4px}
.correo{background:var(--surface);border:1px solid var(--line2);border-radius:var(--radius);padding:22px}
.correo .rot{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--hint);margin-bottom:8px}
.correo .dir{font-size:clamp(17px,1.6vw,21px);font-weight:700;letter-spacing:-.01em;word-break:break-all;user-select:all}
.correo .fila-btn{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.correo .ayuda{font-size:13px;color:var(--hint);margin-top:14px;line-height:1.5}
.correo .copiado{font-size:13px;color:var(--verde);font-weight:600;min-height:18px;margin-top:8px}
@media(max-width:900px){.acceso .wrap{grid-template-columns:1fr}}

/* ── Preguntas ─────────────────────────────────────────────────────────────────────────────── */
.preguntas{display:grid;gap:0;border-top:1px solid var(--line)}
.preguntas details{border-bottom:1px solid var(--line)}
.preguntas summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:14px 0;font-size:17px;font-weight:650;letter-spacing:-.01em}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary svg{width:20px;height:20px;color:var(--muted);flex:0 0 auto;transition:transform var(--tr)}
.preguntas details[open] summary svg{transform:rotate(45deg)}
.preguntas .resp{padding:0 0 18px;max-width:640px;font-size:15.5px;line-height:1.65}

/* ── Pie ───────────────────────────────────────────────────────────────────────────────────── */
.pie{border-top:1px solid var(--line);padding:40px 0 calc(40px + env(safe-area-inset-bottom,0px))}
.pie .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px 40px;align-items:center}
.pie nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.pie nav a{font-size:14px;color:var(--muted);min-height:44px;display:inline-flex;align-items:center}
.pie nav a:hover{color:var(--text)}
.pie .firma{font-size:13px;color:var(--hint)}
.pie .marca img{width:112px;opacity:.9}

/* ── Página interior (historia, seguridad, legal) ──────────────────────────────────────────── */
.interior{padding-top:calc(72px + env(safe-area-inset-top,0px))}
.interior .portada{padding-block:clamp(56px,9vw,112px) clamp(32px,5vw,56px)}
.interior .portada h1{font-size:clamp(40px,5.6vw,76px);margin:14px 0 20px;max-width:14ch}
.interior .portada .lead{max-width:600px}
.prosa{max-width:680px}
.prosa h2{font-size:clamp(26px,2.8vw,36px);margin:44px 0 14px}
.prosa p{font-size:clamp(16px,1.3vw,17.5px);line-height:1.72}
.prosa p+p{margin-top:14px}
.prosa ul{color:var(--muted);line-height:1.7;padding-left:20px;margin:10px 0}
.prosa .nota{font-size:14px;color:var(--hint);border-left:2px solid var(--line2);padding-left:14px;margin-top:28px}
.bloques{display:grid;gap:16px}
.bloque{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;display:grid;grid-template-columns:40px 1fr;gap:16px}
.bloque svg{width:24px;height:24px;color:var(--cyan);margin-top:2px}
.bloque h3{font-size:19px;margin-bottom:8px}
.bloque p{font-size:15.5px;line-height:1.65}
@media(max-width:600px){.bloque{grid-template-columns:1fr;gap:10px}}

/* ── Movimiento reducido ───────────────────────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .entra,.rev,.paso{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  .barra i{transition:none;width:62%}
  .al-traza,.al-vidrio{display:none}
  .al-plano,#anima .lk-txt{opacity:1!important;animation:none!important}
  #anima .lk-fle{animation:none!important}
}