@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/IBMPlexSans-Medium-Latin1.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/IBMPlexSans-Bold-Latin1.woff2") format("woff2")}
:root{
  --fondo:#005379; --resplandor:rgba(22,150,206,.88); --texto:#FFFFFF; --texto2:rgba(255,255,255,.80);
  --acento:#FF9F72; --guia:rgba(255,255,255,.26); --dw:108px; --dh:140px; --subtitulo:24px;
}
*{box-sizing:border-box}
body{margin:0;color:var(--texto);font-family:"IBM Plex Sans","Segoe UI",system-ui,"Helvetica Neue",sans-serif;overflow-x:hidden;
  background:
    radial-gradient(60% 55% at 0% 66%,var(--resplandor),transparent 70%),
    radial-gradient(55% 55% at 100% 62%,var(--resplandor),transparent 70%),
    var(--fondo)}
.pagina{min-height:100vh;display:flex;flex-direction:column}
.barra{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px clamp(16px,4vw,48px)}
.logo{height:44px;width:auto;display:block}
.pildora{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;background:#FFFFFF;color:#005379;font-size:16px;font-weight:500;text-decoration:none;white-space:nowrap}
.pildora:hover{background:#E0F4FE}
.pildora:focus-visible,.contacto a:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px}
.centro{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;padding:28px clamp(16px,4vw,48px) 0}
.eslogan{margin:0;font-size:var(--subtitulo);line-height:1.3;color:var(--texto2)}
h1{margin:0;max-width:940px;font-size:clamp(28px,3.7vw,46px);line-height:1.12;font-weight:600;letter-spacing:-.02em;text-wrap:balance}
.estado{margin:0;font-size:var(--subtitulo);line-height:1.3;font-weight:500;color:var(--acento)}
.contacto{margin:0;font-size:18px;line-height:26px}
.contacto a{color:#FFFFFF;text-underline-offset:3px}.contacto a:hover{color:#E0F4FE}
.escena{position:relative;flex:1;min-height:330px;width:100%;max-width:1000px;margin:26px auto 0}
.escena::before{content:"";position:absolute;left:0;right:0;top:0;border-top:1px dashed var(--guia)}
.guia{position:absolute;top:0;bottom:0;border-left:1px dashed var(--guia)}.guia.g1{left:32%}.guia.g2{left:68%}
.doc{position:absolute;left:0;top:0;width:var(--dw);height:var(--dh);padding:calc(var(--dh)*.11) calc(var(--dw)*.12);display:flex;flex-direction:column;gap:calc(var(--dh)*.055);
  background:#fff;border-radius:4px;box-shadow:0 4px 10px rgba(0,14,24,.46),0 26px 52px rgba(0,14,24,.66);
  transition:transform 1.15s cubic-bezier(.22,.8,.2,1),opacity .6s ease;will-change:transform}
.doc.sin-transicion{transition:none}
.doc i{display:block;flex:none;height:calc(var(--dh)*.045);min-height:2px;border-radius:2px;background:#DDE4E9}
.doc i.t{height:calc(var(--dh)*.07);min-height:4px;width:46%;background:#B4C3CD;margin-bottom:calc(var(--dh)*.03);transition:background .6s}
.doc::after{content:"";position:absolute;right:-1px;bottom:-1px;width:16%;aspect-ratio:1;background:linear-gradient(135deg,#E3EAEE 50%,#005379 50%);border-top-left-radius:3px}
.doc.revisa i.l{animation:marca 1.5s ease both}
.doc.revisa i.l:nth-of-type(2){animation-delay:.25s}.doc.revisa i.l:nth-of-type(3){animation-delay:.5s}
.doc.revisa i.l:nth-of-type(4){animation-delay:.75s}.doc.revisa i.l:nth-of-type(5){animation-delay:1s}
.doc.revisa i.l:nth-of-type(6){animation-delay:1.25s}.doc.revisa i.l:nth-of-type(7){animation-delay:1.5s}
.doc.revisa i.l:nth-of-type(8){animation-delay:1.75s}
.doc.revisa i.l.n{animation-name:marca-n}
@keyframes marca{0%{background:#DDE4E9}35%{background:#4FB0E0}100%{background:#A9D8F0}}
@keyframes marca-n{0%{background:#DDE4E9}35%{background:#FF9F72}100%{background:#FFC7AB}}
.doc.listo i.t{background:#0074A4}
.doc.listo i.l{background:#CFE2EC}
footer{padding:16px clamp(16px,4vw,48px) 20px;font-size:14px;line-height:20px;color:var(--texto2);text-align:center}
.entra{animation:entra .9s cubic-bezier(.2,.7,.2,1) both}
.entra.d1{animation-delay:.12s}.entra.d2{animation-delay:.24s}.entra.d3{animation-delay:.36s}
@keyframes entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (min-width:701px) and (max-height:820px){
  :root{--dw:90px;--dh:116px}
  .barra{padding-top:16px;padding-bottom:16px}
  .centro{gap:14px;padding-top:10px}
  .escena{min-height:262px;margin-top:20px}
}
@media (max-width:700px){
  :root{--dw:68px;--dh:88px;--subtitulo:19px}
  .logo{height:36px}
  .pildora{font-size:14px;padding:0 14px}
  .centro{gap:14px;padding-top:16px}
  .estado{font-weight:700}
  .contacto{font-size:17px}
  .escena{min-height:270px;margin-top:20px}
}
@media (max-width:420px){
  :root{--dw:54px;--dh:70px}
  .barra{padding-top:16px;padding-bottom:16px}
  .logo{height:30px}
  .pildora{font-size:13px;padding:0 12px}
  .escena{min-height:230px}
}
@media (prefers-reduced-motion:reduce){.entra,.doc.revisa i.l{animation:none}.doc{transition:none}}