/* Residence PY · 3 gráficos animados para el hero · hoja de la página de elección
   Tokens y chrome copiados del sistema Expediente del sitio real. */

:root{
  --tinta:#16233B;
  --papel:#F3F0E9;
  --papel2:#ECE6D9;
  --carta:#FBF9F4;
  --laton:#9A6B25;
  --laton-l:#C79A50;
  --gris:#6B6F76;
  --tx:#212D45;
  --linea:rgba(22,35,59,.16);
  --linea-s:rgba(22,35,59,.09);
  --max:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--papel);color:var(--tx);font-family:Newsreader,Georgia,serif;font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
h1,h2,h3{font-weight:500;line-height:1.08;letter-spacing:-.012em;color:var(--tinta)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.lbl{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;font-weight:500;letter-spacing:.17em;text-transform:uppercase}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;padding:15px 26px;
  border:1px solid transparent;transition:background .15s,color .15s,border-color .15s;white-space:nowrap;text-align:center}
.btn-tinta{background:var(--tinta);color:var(--papel)}
.btn-tinta:hover{background:#0F1A2E}
.btn-ghost{border-color:var(--linea);color:var(--tinta);background:transparent}
.btn-ghost:hover{border-color:var(--tinta)}

/* ---------- barra de la página de elección ---------- */
.barra{position:sticky;top:0;z-index:900;background:rgba(243,240,233,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.barra .wrap{display:flex;align-items:center;gap:20px;height:62px}
.logo{display:flex;align-items:center;gap:12px;flex:none}
.logo .sello{width:27px;height:27px;background:var(--tinta);color:var(--papel);display:flex;align-items:center;justify-content:center;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;font-weight:600;letter-spacing:.08em;flex:none}
.logo .nombre{font-family:Newsreader,Georgia,serif;font-weight:500;font-size:14px;letter-spacing:.32em;text-transform:uppercase;color:var(--tinta);white-space:nowrap}
.saltos{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.saltos a{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gris);border:1px solid var(--linea);padding:8px 13px;transition:border-color .15s,color .15s,background .15s}
.saltos a:hover{border-color:var(--tinta);color:var(--tinta)}
.saltos a.act{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}

/* ---------- portada de la página ---------- */
.intro{padding:64px 0 10px}
.intro .eyebrow{display:flex;align-items:center;gap:10px;color:var(--laton);margin-bottom:20px}
.intro .eyebrow::before{content:"";width:26px;height:1px;background:var(--laton)}
.intro h1{font-size:clamp(30px,4.2vw,48px);max-width:20ch;margin-bottom:20px}
.intro p{color:var(--gris);max-width:62ch;font-size:17.5px}
.intro .avisos{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--linea);background:var(--carta);margin-top:36px}
.intro .av{padding:18px 22px;border-right:1px solid var(--linea-s)}
.intro .av:last-child{border-right:0}
.intro .av .lbl{color:var(--laton);display:block;margin-bottom:8px}
.intro .av p{font-size:14.5px;color:var(--gris);max-width:none}

/* ---------- cabecera de cada opción ---------- */
.opt{padding:30px 0 0;border-top:1px solid var(--linea);margin-top:56px}
.opt:first-of-type{margin-top:48px}
.opthead{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:start;padding-bottom:6px}
.opthead .num{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--laton);
  border:1px solid var(--laton);padding:9px 12px;line-height:1;flex:none}
.opthead h2{font-size:clamp(24px,3vw,33px);margin-bottom:8px}
.opthead p{color:var(--gris);font-size:15.5px;max-width:70ch}
.opthead .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.opthead .tag{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gris);border:1px solid var(--linea);padding:6px 10px;background:var(--carta)}

/* ---------- réplica del hero real ---------- */
.hero{padding:44px 0 78px}
.hero .cols{display:grid;grid-template-columns:1.25fr .85fr;gap:64px;align-items:center}
.hero .eyebrow{display:flex;align-items:center;gap:10px;color:var(--laton);margin-bottom:22px}
.hero .eyebrow::before{content:"";width:26px;height:1px;background:var(--laton)}
.hero h3{font-size:clamp(34px,4.4vw,54px);max-width:15ch;margin-bottom:22px;font-weight:500;letter-spacing:-.012em;line-height:1.08}
.hero .sub{font-size:17.5px;color:var(--gris);max-width:52ch;margin-bottom:32px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- chrome compartido de los 3 gráficos ---------- */
.gfx{background:var(--carta);border:1px solid var(--linea);overflow:hidden}
.gfx .ghead{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--linea)}
.gfx .ghead .lbl{color:var(--tinta)}
.gfx .ghead .yr{color:var(--laton)}
.gfx .gpie{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:14px 20px;border-top:1px solid var(--linea-s)}
.gfx .gpie .k{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.gfx .gpie .v{font-size:17px;color:var(--laton);font-weight:600;white-space:nowrap}
.gfx .gnota{padding:12px 20px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:.08em;line-height:1.75;
  color:var(--gris);text-transform:uppercase;border-top:1px solid var(--linea-s)}

/* =========================================================
   OPCIÓN 01 · LA RUTA · el mundo converge en Asunción
   ========================================================= */
.g-ruta .lienzo{padding:14px 16px 4px;background:
  radial-gradient(ellipse at 58% 62%, rgba(199,154,80,.09), rgba(199,154,80,0) 62%)}
.g-ruta svg{display:block;width:100%;height:auto}
.g-ruta .globo{fill:none;stroke:rgba(22,35,59,.20);stroke-width:1}
.g-ruta .malla{fill:none;stroke:rgba(22,35,59,.11);stroke-width:1}
.g-ruta .tierra{fill:rgba(22,35,59,.11);stroke:rgba(22,35,59,.16);stroke-width:1}
.g-ruta .arco{fill:none;stroke:var(--laton);stroke-width:1.35;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;opacity:.85}
.g-ruta .origen{fill:var(--carta);stroke:var(--tinta);stroke-width:1.4}
.g-ruta .viaje{fill:var(--laton);opacity:0}
.g-ruta .pin{fill:var(--laton)}
.g-ruta .halo{fill:none;stroke:var(--laton);stroke-width:1.2;opacity:0}
.g-ruta .origen,.g-ruta .pin,.g-ruta .halo{transform-box:fill-box;transform-origin:50% 50%}
.g-ruta .rot{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:8.5px;letter-spacing:.14em;fill:var(--gris)}
.g-ruta .cap{fill:var(--tinta);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;font-weight:600;letter-spacing:.2em}
.g-ruta .destino{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;
  padding:2px 20px 16px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinta);min-height:34px}
.g-ruta .destino .par{position:absolute;display:flex;align-items:center;gap:11px;white-space:nowrap}
.g-ruta .destino .par i{font-style:normal;color:var(--laton)}
.g-ruta .destino .par .sal{color:var(--gris)}

/* =========================================================
   OPCIÓN 02 · EL SELLO · el expediente aprobado
   ========================================================= */
.g-sello .hoja{position:relative;padding:20px 22px 104px;min-height:262px}
.g-sello .fila{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid var(--linea-s)}
.g-sello .fila .k{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);white-space:nowrap}
.g-sello .fila .v{font-size:15.5px;color:var(--tinta);text-align:right;line-height:1.3}
.g-sello .mrz{margin-top:14px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.08em;color:rgba(22,35,59,.42);
  line-height:1.65;word-break:break-all;border-top:1px solid var(--linea-s);padding-top:12px}
.g-sello .estampa{position:absolute;left:38px;bottom:8px;width:152px;height:152px;transform-origin:50% 50%;mix-blend-mode:multiply}
.g-sello .estampa svg{display:block;width:100%;height:100%}
.g-sello .tinta-borde{fill:none;stroke:var(--laton);opacity:.92}
.g-sello .tinta-txt{fill:var(--laton);font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:600}
.g-sello .sombra{position:absolute;left:38px;bottom:8px;width:152px;height:152px;filter:blur(6px);opacity:.22;mix-blend-mode:multiply}
.g-sello .sombra svg{display:block;width:100%;height:100%}

/* =========================================================
   OPCIÓN 03 · LOS 90 DÍAS · de la carpeta a la cédula
   ========================================================= */
.g-dias .riel{padding:18px 20px 14px;border-bottom:1px solid var(--linea-s)}
.g-dias .rtop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.g-dias .rtop .k{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.g-dias .rtop .dia{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--laton)}
.g-dias .via{position:relative;height:3px;background:rgba(22,35,59,.12)}
.g-dias .lleno{position:absolute;left:0;top:0;height:100%;width:100%;background:var(--laton);transform:scaleX(1);transform-origin:0 50%}
.g-dias .marca{position:absolute;top:50%;left:100%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;background:var(--tinta);border-radius:50%;
  box-shadow:0 0 0 3px var(--carta)}
.g-dias .hitos{display:flex;justify-content:space-between;margin-top:10px;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--gris)}
.g-dias .hitos span{position:relative}
.g-dias .hitos span.on{color:var(--laton)}
.g-dias .escena{display:grid;padding:22px 20px 20px}
.g-dias .escena > *{grid-area:1/1}
.g-dias .ghost{display:flex;align-items:center;justify-content:center;text-align:center;border:1px dashed var(--linea);
  min-height:152px;padding:14px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9.5px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--gris);opacity:0;pointer-events:none}
.g-dias .cedula{border:1px solid var(--linea);background:linear-gradient(160deg,#FFFDF8,#F4EFE4);overflow:hidden;
  box-shadow:0 14px 30px -24px rgba(22,35,59,.6)}
.g-dias .ctop{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--tinta);padding:8px 12px}
.g-dias .ctop b{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:8px;font-weight:600;letter-spacing:.16em;color:var(--papel);text-transform:uppercase}
.g-dias .ctop i{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:8px;font-style:normal;letter-spacing:.16em;color:var(--laton-l);text-transform:uppercase}
.g-dias .ccuerpo{display:grid;grid-template-columns:74px 1fr;gap:14px;padding:14px 14px 10px}
.g-dias .foto{position:relative;height:92px;background:rgba(22,35,59,.07);border:1px solid var(--linea-s);overflow:hidden}
.g-dias .foto svg{position:absolute;inset:0;width:100%;height:100%}
.g-dias .foto .sil{fill:rgba(22,35,59,.32)}
.g-dias .foto .barrido{position:absolute;left:0;top:0;width:100%;height:100%;
  background:linear-gradient(180deg,rgba(199,154,80,0),rgba(199,154,80,.55),rgba(199,154,80,0));opacity:0}
.g-dias .campos{display:flex;flex-direction:column;gap:9px}
.g-dias .campo .k{display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:7.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gris);margin-bottom:2px}
.g-dias .campo .v{display:block;font-size:14px;color:var(--tinta);line-height:1.25;clip-path:inset(0 0 0 0)}
.g-dias .cpie{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 14px 13px}
.g-dias .huella{width:34px;height:42px;flex:none}
.g-dias .huella svg{width:100%;height:100%;fill:none;stroke:var(--laton);stroke-width:1.15;stroke-linecap:round;opacity:.75}
.g-dias .firma{flex:1;height:1px;background:var(--linea-s);margin:0 4px}
.g-dias .vig{display:flex;align-items:center;gap:7px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--laton);border:1px solid rgba(154,107,37,.45);padding:6px 10px;background:rgba(199,154,80,.09)}
.g-dias .vig svg{width:12px;height:12px;fill:none;stroke:var(--laton);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:22;stroke-dashoffset:0}

/* ---------- bloque de la ficha actual ---------- */
.ficha{background:var(--carta);border:1px solid var(--linea)}
.ficha .fhead{display:flex;justify-content:space-between;align-items:center;padding:15px 22px;border-bottom:1px solid var(--linea)}
.ficha .fhead .lbl{color:var(--tinta)}
.ficha .fhead .yr{color:var(--laton)}
.frow{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:15px 22px;border-bottom:1px solid var(--linea-s)}
.frow:last-of-type{border-bottom:0}
.frow .k{color:var(--gris)}
.frow .v{font-size:16.5px;color:var(--tinta);text-align:right}
.frow .v.oro{color:var(--laton);font-weight:600;font-size:18px}
.fnote{padding:14px 22px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.06em;color:var(--gris);
  line-height:1.7;text-transform:uppercase;border-top:1px solid var(--linea-s)}

/* ---------- pie ---------- */
footer{background:var(--tinta);color:var(--papel);padding:44px 0 40px;margin-top:20px}
footer p{color:#A7AFBE;font-size:14.5px;max-width:60ch}
footer .lbl{color:var(--laton-l);display:block;margin-bottom:12px}

/* =========================================================
   ANIMACIONES · el estado base es el final, el movimiento
   solo se agrega si el visitante no pidió menos movimiento
   ========================================================= */
@media (prefers-reduced-motion: no-preference){

  /* --- 01 · ruta --- */
  .g-ruta .arco{animation:arcoDibuja 9s cubic-bezier(.34,.72,.36,1) infinite}
  .g-ruta .arco.a2{animation-delay:.55s}
  .g-ruta .arco.a3{animation-delay:1.1s}
  .g-ruta .arco.a4{animation-delay:1.65s}
  .g-ruta .origen{animation:puntoEntra 9s ease-out infinite}
  .g-ruta .origen.a2{animation-delay:.55s}
  .g-ruta .origen.a3{animation-delay:1.1s}
  .g-ruta .origen.a4{animation-delay:1.65s}
  .g-ruta .halo{animation:haloLate 2.6s ease-out infinite}
  .g-ruta .halo.h2{animation-delay:.85s}
  .g-ruta .pin{animation:pinLate 2.6s ease-in-out infinite}
  .g-ruta .destino .par{animation:parCicla 8.8s ease-in-out infinite;opacity:0}
  .g-ruta .destino .par.p2{animation-delay:2.2s}
  .g-ruta .destino .par.p3{animation-delay:4.4s}
  .g-ruta .destino .par.p4{animation-delay:6.6s}
  .g-ruta .viaje{animation:viajeVisible 9s linear infinite}
  .g-ruta .viaje.a2{animation-delay:.55s}
  .g-ruta .viaje.a3{animation-delay:1.1s}
  .g-ruta .viaje.a4{animation-delay:1.65s}

  @keyframes arcoDibuja{
    0%{stroke-dashoffset:100;opacity:.9}
    28%{stroke-dashoffset:0;opacity:.9}
    84%{stroke-dashoffset:0;opacity:.9}
    93%{stroke-dashoffset:0;opacity:0}
    93.5%{stroke-dashoffset:100;opacity:0}
    100%{stroke-dashoffset:100;opacity:0}
  }
  @keyframes puntoEntra{
    0%{opacity:0;transform:scale(.2)}
    6%{opacity:1;transform:scale(1)}
    84%{opacity:1;transform:scale(1)}
    93%{opacity:0;transform:scale(1)}
    100%{opacity:0;transform:scale(.2)}
  }
  @keyframes viajeVisible{
    0%,3%{opacity:0}
    6%{opacity:1}
    26%{opacity:1}
    30%,100%{opacity:0}
  }
  @keyframes haloLate{
    0%{transform:scale(.3);opacity:.85}
    70%{transform:scale(1);opacity:0}
    100%{transform:scale(1);opacity:0}
  }
  @keyframes pinLate{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.14)}
  }
  @keyframes parCicla{
    0%{opacity:0;transform:translateY(7px)}
    4%{opacity:1;transform:translateY(0)}
    21%{opacity:1;transform:translateY(0)}
    26%{opacity:0;transform:translateY(-7px)}
    100%{opacity:0;transform:translateY(-7px)}
  }

  /* --- 02 · sello --- */
  .g-sello .fila{animation:filaEntra 8.5s ease-out infinite;opacity:0}
  .g-sello .fila.f2{animation-delay:.5s}
  .g-sello .fila.f3{animation-delay:1s}
  .g-sello .fila.f4{animation-delay:1.5s}
  .g-sello .mrz{animation:mrzEntra 8.5s ease-out infinite;animation-delay:2s;opacity:0}
  .g-sello .estampa{animation:selloBaja 8.5s cubic-bezier(.2,1.2,.4,1) infinite;opacity:0}
  .g-sello .sombra{animation:selloSombra 8.5s cubic-bezier(.2,1.2,.4,1) infinite;opacity:0}

  @keyframes filaEntra{
    0%{opacity:0;transform:translateY(9px)}
    7%{opacity:1;transform:translateY(0)}
    88%{opacity:1;transform:translateY(0)}
    95%{opacity:0;transform:translateY(0)}
    100%{opacity:0;transform:translateY(9px)}
  }
  @keyframes mrzEntra{
    0%{opacity:0}
    7%{opacity:1}
    88%{opacity:1}
    95%,100%{opacity:0}
  }
  @keyframes selloBaja{
    0%,32%{opacity:0;transform:scale(2.5) rotate(9deg)}
    40%{opacity:.98;transform:scale(.95) rotate(-13deg)}
    43%{transform:scale(1.05) rotate(-13deg)}
    47%{transform:scale(1) rotate(-13deg);opacity:.98}
    88%{opacity:.98;transform:scale(1) rotate(-13deg)}
    95%,100%{opacity:0;transform:scale(1) rotate(-13deg)}
  }
  @keyframes selloSombra{
    0%,32%{opacity:0;transform:scale(2.5) rotate(9deg)}
    40%{opacity:.34;transform:scale(1.02) rotate(-13deg)}
    47%{opacity:.30;transform:scale(1.06) rotate(-13deg)}
    88%{opacity:.30;transform:scale(1.06) rotate(-13deg)}
    95%,100%{opacity:0;transform:scale(1.06) rotate(-13deg)}
  }

  /* --- 03 · 90 días --- */
  .g-dias .lleno{animation:rielCrece 11s cubic-bezier(.5,.02,.24,1) infinite}
  .g-dias .marca{animation:marcaViaja 11s cubic-bezier(.5,.02,.24,1) infinite}
  .g-dias .ghost{animation:ghostSale 11s ease-in-out infinite}
  .g-dias .cedula{animation:cedulaEntra 11s cubic-bezier(.21,.6,.35,1) infinite;opacity:0}
  .g-dias .foto .sil{animation:silEntra 11s ease-out infinite;opacity:0}
  .g-dias .foto .barrido{animation:barre 11s ease-in-out infinite}
  .g-dias .campo .v{animation:tipea 11s cubic-bezier(.3,.7,.3,1) infinite}
  .g-dias .campo:nth-child(2) .v{animation-delay:.2s}
  .g-dias .campo:nth-child(3) .v{animation-delay:.4s}
  .g-dias .huella svg{animation:huellaEntra 11s ease-out infinite;opacity:0}
  .g-dias .vig{animation:vigEntra 11s cubic-bezier(.21,.6,.35,1) infinite;opacity:0}
  .g-dias .vig svg{animation:tilde 11s ease-out infinite}

  @keyframes rielCrece{
    0%{transform:scaleX(0)} 18%{transform:scaleX(1)} 94%{transform:scaleX(1)} 96%,100%{transform:scaleX(0)}
  }
  @keyframes marcaViaja{
    0%{left:0%} 18%{left:100%} 94%{left:100%} 96%,100%{left:0%}
  }
  @keyframes ghostSale{
    0%,14%{opacity:1} 22%{opacity:0} 92%{opacity:0} 96%,100%{opacity:1}
  }
  @keyframes cedulaEntra{
    0%,16%{opacity:0;transform:translateY(18px) scale(.97)}
    24%{opacity:1;transform:translateY(0) scale(1)}
    92%{opacity:1;transform:translateY(0) scale(1)}
    96%,100%{opacity:0;transform:translateY(0) scale(1)}
  }
  @keyframes silEntra{ 0%,24%{opacity:0} 30%{opacity:1} 92%{opacity:1} 96%,100%{opacity:0} }
  @keyframes barre{
    0%,25%{opacity:0;transform:translateY(-100%)}
    29%{opacity:1}
    40%{opacity:1;transform:translateY(100%)}
    42%,100%{opacity:0;transform:translateY(100%)}
  }
  @keyframes tipea{ 0%,27%{clip-path:inset(0 100% 0 0)} 39%{clip-path:inset(0 0 0 0)} 100%{clip-path:inset(0 0 0 0)} }
  @keyframes huellaEntra{ 0%,39%{opacity:0} 46%{opacity:1} 92%{opacity:1} 96%,100%{opacity:0} }
  @keyframes vigEntra{
    0%,47%{opacity:0;transform:translateY(8px)}
    54%{opacity:1;transform:translateY(0)}
    92%{opacity:1;transform:translateY(0)}
    96%,100%{opacity:0;transform:translateY(0)}
  }
  @keyframes tilde{ 0%,51%{stroke-dashoffset:22} 59%{stroke-dashoffset:0} 100%{stroke-dashoffset:0} }

  /* pausa cuando el gráfico no está en pantalla */
  .gfx.dormido *{animation-play-state:paused !important}
}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .hero{padding:34px 0 56px}
  .hero .cols{grid-template-columns:1fr;gap:38px}
  .hero h3{font-size:clamp(30px,8vw,40px)}
  .intro .avisos{grid-template-columns:1fr}
  .intro .av{border-right:0;border-bottom:1px solid var(--linea-s)}
  .intro .av:last-child{border-bottom:0}
  .opthead{grid-template-columns:1fr;gap:14px}
  .opthead .num{justify-self:start}
  .barra .wrap{height:auto;padding-top:12px;padding-bottom:12px;flex-wrap:wrap;gap:12px}
  .saltos{margin-left:0;width:100%}
  .saltos a{flex:1;text-align:center}
}
@media(max-width:560px){
  .g-sello .estampa,.g-sello .sombra{width:124px;height:124px;left:20px;bottom:10px}
  .g-sello .hoja{padding-bottom:88px}
  .cta-row .btn{flex:1 1 100%}
  .frow,.ficha .fhead{padding:13px 16px}
}