/* Bienvenida (logo + Ingresar) e intro con GSAP. 1u ≈ 1px de un cuadro de 1920 de ancho, como la intro del portafolio */
:root{--navy:#0b3d91;--azul:#1f62c4;--celeste:#3d9be0;--claro:#6cb4ec;--tinta:#0a1f44;--gris:#f4f7fb}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:Outfit,system-ui,sans-serif;color:var(--tinta);background:#fff;overflow:hidden}
.serif{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400}
:focus-visible{outline:3px solid var(--celeste);outline-offset:4px}
.aviso{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--tinta);color:#cfe0f7;font-size:12px;text-align:center;padding:6px 16px}

/* Bienvenida */
.bv{position:fixed;inset:0;z-index:50;display:grid;place-items:center;align-content:center;gap:28px;padding:16px;background:radial-gradient(ellipse at 50% 40%,#fff 0,#eef4fc 70%)}
.bv-logo{width:min(620px,86vw);height:auto;display:block}
.bv-lema{font-size:clamp(22px,3vw,32px);color:var(--azul);margin:0}
.bv-ingresar{display:inline-flex;align-items:center;gap:12px;border:0;border-radius:999px;background:var(--tinta);color:#fff;font:600 20px Outfit,sans-serif;padding:18px 38px;cursor:pointer;box-shadow:0 12px 30px rgba(10,31,68,.25)}
.bv-ingresar .fl{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--celeste);transition:transform .2s}
.bv-ingresar:hover .fl{transform:translateX(4px)}
.bv-vereda{position:absolute;left:0;right:0;bottom:0;height:150px;overflow:hidden;border-bottom:6px solid var(--tinta);pointer-events:none}

/* Bienvenida sobre el depósito ilustrado (ancha en compu, alta en celular); el centro queda libre para el logo */
.bv-foto{background:radial-gradient(ellipse at 50% 45%,rgba(255,255,255,.75),rgba(255,255,255,0) 60%),url(img/bienvenida-ancha.webp) center/cover}
.bv-foto .bv-lema{text-shadow:0 0 12px #fff,0 0 4px #fff}
@media (max-aspect-ratio:1/1){
  .bv-foto{background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.7),rgba(255,255,255,0) 60%),url(img/bienvenida-alta.webp) center bottom/cover;align-content:start;padding-top:16vh}
}

/* Intro */
.intro{position:fixed;inset:0;z-index:60;overflow:hidden;background:#fff;--u:min(.0521vw,.0926vh)}
@media (max-aspect-ratio:1/1){.intro{--u:min(.085vw,.06vh)}}
.intro[hidden]{display:none}
.sc{position:absolute;inset:0;visibility:hidden;display:grid;place-items:center;align-content:center}
.ln{display:block;overflow:hidden;padding:.06em 0}
.ln>span{display:inline-block}
.saltar{position:absolute;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:90;border:1px solid rgba(10,31,68,.2);background:rgba(255,255,255,.85);backdrop-filter:blur(6px);color:var(--tinta);border-radius:999px;padding:10px 18px;font:500 14px Outfit,sans-serif;cursor:pointer}
.barra-t{position:absolute;left:0;top:0;height:3px;background:var(--celeste);z-index:90;transform-origin:left;transform:scaleX(0)}

/* Escena del logo armado con el lema debajo */
.s-logo .lema{font-size:calc(96*var(--u));color:var(--azul);margin:calc(40*var(--u)) 0 0;text-align:center;line-height:1;text-shadow:0 0 14px #fff,0 0 6px #fff}
.s-logo .lema .ln{display:inline-block;vertical-align:bottom}

/* Imágenes de fondo y cierre con la ruta: logo y lema a la izquierda, con un velo blanco para que se lean */
.fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.s-fin{justify-items:start;align-content:start}
.s-fin::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.92) 0,rgba(255,255,255,.6) 38%,rgba(255,255,255,0) 58%)}
.fondo-ruta{object-position:right center}
.fin{position:relative;z-index:1;margin:24vh 0 0 7vw;max-width:46vw}
.fin .lg{width:min(calc(620*var(--u)),80vw)}
.fin p{margin:calc(30*var(--u)) 0 0;font-weight:800;font-size:calc(120*var(--u));line-height:.95;letter-spacing:-.04em;color:var(--tinta)}
.fin p .serif{color:var(--azul);letter-spacing:0;font-size:1.1em}
@media (max-aspect-ratio:1/1){
  .fondo-ruta{object-position:center}
  .s-fin::after{background:linear-gradient(180deg,rgba(255,255,255,.92) 0,rgba(255,255,255,.7) 34%,rgba(255,255,255,0) 52%)}
  .fin{margin:12vh 0 0 6vw;max-width:88vw}
  .fin p{font-size:calc(130*var(--u))}
}

/* Logo animable (ver LOGO en intro.js): misma composición que el original, en Archivo expandida */
.lg{display:block;width:min(calc(1300*var(--u)),92vw);height:auto;overflow:visible;font-family:Archivo,sans-serif;font-stretch:125%}
.lg-marco{fill:#f7f7f8;stroke:#4a4a4a;stroke-width:2.5}
.lg-fl{fill:none;stroke-width:9.5;stroke-linecap:round;stroke-linejoin:round}
.lg-sep,.lg-linea{stroke:#0a1f44;stroke-width:2.5}
.lg-l{font-size:106px;text-anchor:middle;font-stretch:112%}
.lg-srl{font-size:27px;font-weight:450;fill:#163b8c;letter-spacing:.8px}
.lg-dist{font-size:45px;font-weight:350;fill:#163b8c}