/* Residence PY · sistema Expediente · hoja compartida */

/* Fuentes propias (antes venían de Google Fonts, que bloqueaba el render 750 ms).
   Newsreader es variable: un solo archivo cubre 200-800. */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/assets/fuentes/newsreader-400-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/assets/fuentes/newsreader-400-600-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;
  src:url(/assets/fuentes/newsreader-400-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;
  src:url(/assets/fuentes/newsreader-400-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fuentes/plex-mono-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fuentes/plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fuentes/plex-mono-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fuentes/plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fuentes/plex-mono-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fuentes/plex-mono-600-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

: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);
  --dlinea:rgba(243,240,233,.16);
  --dmut:#A7AFBE;
  --max:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
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}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.lbl{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;font-weight:500;letter-spacing:.17em;text-transform:uppercase}
section{padding:92px 0}

/* ---------- 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-laton{background:var(--laton);color:#FCF9F2}
.btn-laton:hover{background:#835A1E}
.btn-ghost{border-color:var(--linea);color:var(--tinta);background:transparent}
.btn-ghost:hover{border-color:var(--tinta)}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:900;background:rgba(243,240,233,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.nav{display:flex;align-items:center;gap:26px;height:66px}
.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:14.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--tinta);white-space:nowrap}
.nav .links{display:flex;gap:24px;margin-left:auto}
.nav .links a{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--gris);padding:6px 0}
.nav .links a:hover{color:var(--tinta)}
.nav .links a.act{color:var(--tinta);border-bottom:1px solid var(--laton)}
.lang{display:flex;border:1px solid var(--linea);flex:none}
.lang button{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;font-weight:600;letter-spacing:.1em;padding:7px 11px;color:var(--gris)}
.lang button.on{background:var(--tinta);color:var(--papel)}
.lang button:not(.on):hover{color:var(--tinta)}
header .btn{padding:11px 18px}

/* ---------- hero de la home ---------- */
.hero{padding:84px 0 88px}
.hero .cols{display:grid;grid-template-columns:1.25fr .85fr;gap:64px;align-items:start}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--laton);margin-bottom:22px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--laton)}
.hero h1{font-size:clamp(38px,5vw,62px);max-width:15ch;margin-bottom:24px}
.hero .sub{font-size:18.5px;color:var(--gris);max-width:52ch;margin-bottom:34px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- ficha (tarjeta de datos) ---------- */
.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)}

/* ---------- precalificador ---------- */
.paso0{background:var(--papel2);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:64px 0}
.paso0 .head{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:8px}
.paso0 h2{font-size:clamp(26px,3.4vw,36px)}
.paso0 .hint{color:var(--gris);margin-bottom:26px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.chip{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;font-weight:500;letter-spacing:.06em;
  background:var(--carta);border:1px solid var(--linea);padding:11px 18px;color:var(--tx);transition:border-color .15s}
.chip:hover{border-color:var(--tinta)}
.chip.on{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.salida{background:var(--carta);border:1px solid var(--linea);border-left:3px solid var(--laton);padding:24px 26px;max-width:760px}
.salida .lbl{color:var(--laton);display:block;margin-bottom:10px}
.salida .txt{margin-bottom:18px;max-width:62ch}
.salida .txt b{color:var(--tinta);font-weight:600}

/* ---------- por qué paraguay ---------- */
.porque h2{font-size:clamp(28px,3.6vw,40px);margin-bottom:44px}
.razones{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:30px}
.razon{border-top:1px solid var(--tinta);padding-top:18px}
.razon .lbl{color:var(--laton);display:block;margin-bottom:12px}
.razon h3{font-size:21px;margin-bottom:9px}
.razon p{font-size:15px;color:var(--gris)}

/* gráficos de las razones · el estado escrito acá ya es el FINAL: sin JS se ven enteros */
.rgfx{width:100%;max-width:262px;margin:0 0 20px;line-height:0}
.rgfx svg{width:100%;height:auto;display:block;overflow:visible}
.rgfx text{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:600;letter-spacing:.04em}

/* 01 · sistema territorial: 1 celda de 10 */
.r-tasa .c{fill:none;stroke:var(--tinta);stroke-width:1;opacity:.26}
.r-tasa .c1{fill:var(--laton);stroke:var(--laton);opacity:1}
.r-tasa .lnk{fill:none;stroke:var(--laton);stroke-width:1;opacity:.45}
.r-tasa .pct{fill:var(--laton);font-size:12.5px}

/* 02 · un solo viaje: expediente, trayecto, sello */
.r-viaje .doc{fill:none;stroke:var(--tinta);stroke-width:1.1;stroke-linejoin:round;opacity:.55}
.r-viaje .docl{fill:none;stroke:var(--tinta);stroke-width:1;stroke-linecap:round;opacity:.32}
.r-viaje .guia{fill:none;stroke:var(--tinta);stroke-width:1;opacity:.2;stroke-dasharray:1.1 2.6}
.r-viaje .ruta{fill:none;stroke:var(--laton);stroke-width:1.4;stroke-linecap:round}
.r-viaje .chispa{fill:none;stroke:var(--laton-l);stroke-width:2.6;stroke-linecap:round;opacity:0}
.r-viaje .sello{fill:none;stroke:var(--tinta);stroke-width:1.1;
  transform-box:fill-box;transform-origin:50% 50%}
.r-viaje .sello circle{opacity:.42}
.r-viaje .selloi{stroke:var(--laton);opacity:.55}
.r-viaje .tilde{fill:none;stroke:var(--laton);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* 03 · grado de inversión: el umbral y las barras que lo cruzan */
.r-grado .eje{fill:none;stroke:var(--tinta);stroke-width:1;opacity:.3}
.r-grado .umbral{fill:none;stroke:var(--tinta);stroke-width:1;opacity:.34;stroke-dasharray:4 4}
.r-grado .b{fill:none;stroke:var(--tinta);stroke-width:1;opacity:.38}
.r-grado .bok{fill:rgba(154,107,37,.15);stroke:var(--laton);opacity:1}
.r-grado .bok2{fill:rgba(154,107,37,.3)}
.r-grado .rate{fill:var(--laton);font-size:12.5px}

/* 04 · costo de vida: el piso y el rango que abre hacia arriba */
.r-costo .ejebajo{fill:none;stroke:var(--tinta);stroke-width:1;opacity:.18;stroke-dasharray:1.5 3.5}
.r-costo .rango{fill:none;stroke:var(--laton);stroke-width:1.3;opacity:.5}
.r-costo .punta{fill:none;stroke:var(--laton);stroke-width:1.3;opacity:.5;stroke-linecap:round;stroke-linejoin:round}
.r-costo .tick{fill:none;stroke:var(--tinta);stroke-width:1;opacity:.2}
.r-costo .piso{fill:none;stroke:var(--laton);stroke-width:2;stroke-linecap:round}
.r-costo .pdot{fill:var(--laton)}
.r-costo .cifra{fill:var(--laton);font-size:13px}

/* ---------- proceso: 5 etapas alternadas sobre una espina central ---------- */
.proceso{border-top:1px solid var(--linea)}
.proc-head{max-width:54ch;margin-bottom:58px}
.proceso h2{font-size:clamp(28px,3.6vw,40px);max-width:16ch;margin-bottom:16px}
.proceso .nota{color:var(--gris);margin-bottom:20px}
.proceso .aviso{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.05em;line-height:1.8;color:var(--gris);
  text-transform:uppercase;border-left:1px solid var(--laton);padding-left:14px;max-width:40ch}

.etapas{position:relative}
.etapas::before{content:"";position:absolute;left:50%;top:18px;bottom:18px;width:1px;
  background:var(--linea);transform:translateX(-.5px)}

.etapa{display:grid;grid-template-columns:1fr 96px 1fr;align-items:center;padding:30px 0}
.etapa .etx{grid-column:1;grid-row:1;padding-right:56px}
.etapa .enodo{grid-column:2;grid-row:1;justify-self:center}
.etapa .egfx{grid-column:3;grid-row:1;padding-left:56px}
/* las pares se dan vuelta: grafico a la izquierda, texto a la derecha */
.etapa:nth-child(even) .etx{grid-column:3;padding-right:0;padding-left:56px}
.etapa:nth-child(even) .egfx{grid-column:1;padding-left:0;padding-right:56px}
.etapa:nth-child(even) .egfx svg{margin-left:auto}

.enodo{width:46px;height:46px;border-radius:50%;background:var(--papel);
  border:1px solid var(--linea);display:flex;align-items:center;justify-content:center;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;font-weight:600;
  letter-spacing:.04em;color:var(--laton)}

.etapa h3{font-size:clamp(20px,2.1vw,25px);margin-bottom:10px}
.etapa .etx p{font-size:15.5px;color:var(--gris);max-width:46ch}

.egfx{line-height:0}
.egfx svg{width:100%;height:auto;display:block;max-width:430px;overflow:visible}
.egfx text{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:600}

.etapa-cierre{max-width:58ch;margin:46px auto 0;padding-top:32px;
  border-top:1px solid var(--linea-s);text-align:center}
.etapa-cierre .fl{display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:19px;color:var(--laton);margin-bottom:12px;line-height:1}
.etapa-cierre p{font-size:16.5px;color:var(--tx)}
.etapa-cierre b{color:var(--tinta);font-weight:600}

/* --- 01 · preparacion del expediente: 3 documentos revisados y la carpeta --- */
.e-docs .hoja,.e-sello .exped{transform-box:fill-box;transform-origin:50% 100%}
.e-docs .pap{fill:var(--carta);stroke:rgba(22,35,59,.5);stroke-width:1.2;stroke-linejoin:round}
.e-docs .dob{fill:none;stroke:rgba(22,35,59,.38);stroke-width:1.2}
.e-docs .ren path{fill:none;stroke:rgba(22,35,59,.19);stroke-width:2.4;stroke-linecap:round}
.e-docs .ok circle{fill:var(--papel);stroke:var(--laton);stroke-width:1.2}
.e-docs .tk{fill:none;stroke:var(--laton);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.e-docs .carpeta{fill:none;stroke:var(--laton);stroke-width:1.6;opacity:.55}

/* --- 02 · ingreso: la pagina del pasaporte y el sello de entrada --- */
.e-ingreso .pag{fill:var(--carta);stroke:rgba(22,35,59,.42);stroke-width:1.2}
.e-ingreso .chip{fill:var(--tinta);stroke:none}
.e-ingreso .py{font-size:11px;letter-spacing:.09em;fill:var(--papel)}
.e-ingreso .ren path{fill:none;stroke:rgba(22,35,59,.17);stroke-width:2.4;stroke-linecap:round}
.e-ingreso .ala{fill:rgba(154,107,37,.1);stroke:var(--laton);stroke-width:1.2}
.e-ingreso .marco{fill:none;stroke:rgba(22,35,59,.45);stroke-width:1.4;stroke-dasharray:5 4}
.e-ingreso .flecha{fill:none;stroke:var(--laton);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.e-ingreso .pt{fill:var(--laton)}
.e-ingreso .sello2{transform-box:fill-box;transform-origin:50% 50%;transform:rotate(-6deg)}

/* --- 03 · presentacion: el expediente y el sello de Migraciones --- */
.e-sello .pap{fill:var(--carta);stroke:rgba(22,35,59,.5);stroke-width:1.2;stroke-linejoin:round}
.e-sello .dob{fill:none;stroke:rgba(22,35,59,.38);stroke-width:1.2}
.e-sello .ren path{fill:none;stroke:rgba(22,35,59,.19);stroke-width:2.4;stroke-linecap:round}
.e-sello .mig{color:var(--laton);transform-box:fill-box;transform-origin:50% 50%;transform:rotate(-7deg)}
.e-sello .aro{stroke:var(--laton);stroke-width:2.2;opacity:.8}
.e-sello .aro2{stroke:var(--laton);stroke-width:1;opacity:.8}
.e-sello .arcotx{font-size:9.6px;letter-spacing:2.6px;fill:var(--laton);opacity:.85}
.e-sello .ctr{font-size:11.5px;letter-spacing:1.6px;fill:var(--laton);opacity:.85}
.e-sello .anio{font-size:8.5px;letter-spacing:2px;font-weight:400;fill:var(--laton);opacity:.85}
.e-sello .onda{stroke:var(--laton);stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:50% 50%}

/* --- 04 · carnet de residencia --- */
.e-carnet .cuerpo{fill:var(--carta);stroke:rgba(22,35,59,.45);stroke-width:1.3}
.e-carnet .franja{fill:none;stroke:var(--laton);stroke-width:1.4;opacity:.6}
.e-carnet .foto .marco{fill:var(--papel2);stroke:rgba(22,35,59,.28);stroke-width:1}
.e-carnet .sil{fill:rgba(22,35,59,.28);stroke:none}
.e-carnet .fila .k{fill:var(--laton);opacity:.55}
.e-carnet .fila .v{fill:rgba(22,35,59,.2)}
.e-carnet .visto circle{fill:var(--papel);stroke:var(--laton);stroke-width:1.3}
.e-carnet .tk{fill:none;stroke:var(--laton);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}

/* --- 05 · huella y foto en Identificaciones --- */
.e-huella .area{fill:none;stroke:rgba(22,35,59,.24);stroke-width:1.2;stroke-dasharray:6 5}
.e-huella .hl{fill:none;stroke:var(--laton);stroke-width:2;stroke-linecap:round}
.e-huella .retrato .marco{fill:var(--papel2);stroke:rgba(22,35,59,.3);stroke-width:1.2}
.e-huella .sil{fill:rgba(22,35,59,.28);stroke:none}
.e-huella .barrido{fill:var(--laton);opacity:0}
.e-huella .base{fill:none;stroke:rgba(22,35,59,.22);stroke-width:1}

/* la lista numerada de pasos: la usa la guia larga (/obtener-residencia.../) */
.pasos{display:flex;flex-direction:column}
.paso{display:grid;grid-template-columns:52px 1fr;gap:20px;padding:21px 0;border-bottom:1px solid var(--linea-s)}
.paso:first-child{padding-top:0}
.paso .num{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;font-weight:600;color:var(--laton);padding-top:5px}
.paso h3{font-size:19.5px;margin-bottom:5px}
.paso p{font-size:15px;color:var(--gris)}

/* ---------- honorarios ---------- */
.precio{background:var(--tinta);color:var(--papel)}
.precio .cols{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:start}
.precio .eyebrow{color:var(--laton-l)}
.precio .eyebrow::before{background:var(--laton-l)}
.precio .monto{font-size:clamp(56px,7vw,84px);font-weight:500;letter-spacing:-.01em;color:var(--papel);line-height:1;margin-bottom:22px}
.precio .sub{color:var(--dmut);font-size:17px;max-width:44ch;margin-bottom:32px}
.precio h2{color:var(--papel)}
.incluye{background:rgba(243,240,233,.04);border:1px solid var(--dlinea)}
.incluye .ihead{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 22px;border-bottom:1px solid var(--dlinea)}
.incluye .ihead .lbl{color:var(--papel)}
.incluye .ihead .tag{color:var(--laton-l)}
.irow{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:14px 22px;border-bottom:1px solid rgba(243,240,233,.08)}
.irow:last-child{border-bottom:0}
.irow .t{font-size:15.5px;color:#DCE1EA}
.irow .lbl{flex:none}
.irow .si{color:var(--laton-l)}
.irow .conf{color:var(--dmut);border:1px solid var(--dlinea);padding:3px 8px}

/* ---------- quién firma / specs ---------- */
.quien .cols{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:start}
.quien h2{font-size:clamp(30px,4vw,44px);margin-bottom:20px}
.quien p{color:var(--gris);max-width:50ch;margin-bottom:16px}
.quien blockquote{border-left:3px solid var(--laton);background:var(--carta);padding:20px 24px;margin:22px 0 6px;max-width:54ch}
.quien blockquote p{font-size:17.5px;font-style:italic;color:var(--tinta);margin-bottom:12px;line-height:1.55}
.quien blockquote footer{color:var(--laton);font-style:normal}
.specs{border-top:1px solid var(--tinta)}
.spec{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:15px 2px;border-bottom:1px solid var(--linea-s)}
.spec .k{color:var(--gris)}
.spec .v{text-align:right;color:var(--tinta);font-size:15.5px;max-width:26ch}
.spec .pend{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.14em;color:var(--gris);border:1px solid var(--linea);padding:3px 8px}

/* ---------- casos ---------- */
.casos{background:var(--papel2);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.casos .head{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:34px;flex-wrap:wrap}
.casos h2{font-size:clamp(28px,3.6vw,40px)}
.tagp{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--laton);border:1px solid var(--laton);padding:5px 10px}
/* tira continua de resenas: entran las 10 en el alto de una fila */
.tira{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.tira-track{display:flex;gap:22px;width:max-content;padding:4px 0}
.tira:hover .tira-track,.tira-track:focus-within{animation-play-state:paused}
.tira .tcard{flex:0 0 clamp(280px,25vw,352px);margin:0;min-height:0;gap:18px}
/* la resena larga no puede estirar a las 10: se corta y la completa esta en /casos/ */
.tira .tcard .quote{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
@media (prefers-reduced-motion: no-preference){
  .tira-track{animation:tira 48s linear infinite}
  @keyframes tira{to{transform:translateX(calc(-50% - 11px))}}  /* -50% menos medio gap */
}
/* sin animacion queda como riel arrastrable, nunca contenido inaccesible.
   En mobile tambien: sin hover no hay forma de pausarla, asi que se arrastra. */
@media (prefers-reduced-motion: reduce), (max-width: 760px){
  .tira{overflow-x:auto;mask-image:none;-webkit-mask-image:none;scroll-snap-type:x proximity;
    padding-inline:24px;scrollbar-width:none}
  .tira::-webkit-scrollbar{display:none}
  .tira-track{animation:none;width:max-content}
  .tira .tcard{scroll-snap-align:start}
  /* el duplicado solo existe para el loop: sin animacion, sobra */
  .tira .tcard[aria-hidden="true"]{display:none}
}
.tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tcard{background:var(--carta);border:1px solid var(--linea);padding:26px 24px;display:flex;flex-direction:column;gap:26px;min-height:180px}
.tcard .ph{font-style:italic;color:#9BA0A9}
.tcard .quote{font-size:15.5px;color:var(--tx);line-height:1.6}
.tcard .who{font-family:"IBM Plex Mono",ui-monospace,monospace;text-transform:uppercase;margin-top:auto;
  display:flex;align-items:center;gap:13px;padding-top:20px;border-top:1px solid var(--linea)}
.tphoto{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;
  background:var(--linea);box-shadow:0 0 0 1px var(--linea)}
.tphotos{display:flex;flex-shrink:0}
.tphotos .tphoto{box-shadow:0 0 0 2px var(--carta);margin-left:-14px}
.tphotos .tphoto:first-child{margin-left:0}
.tini{width:44px;height:44px;border-radius:50%;flex-shrink:0;background:var(--tinta);color:var(--papel);
  display:flex;align-items:center;justify-content:center;font-size:13px;letter-spacing:.04em}
.wtxt{display:flex;flex-direction:column;gap:4px;min-width:0}
.wtxt b{font-weight:500;font-size:10.5px;letter-spacing:.13em;color:var(--tinta)}
.wtxt i{font-style:normal;font-size:9.5px;letter-spacing:.13em;color:var(--gris)}

/* ---------- faq ---------- */
.faq h2{font-size:clamp(28px,3.6vw,40px);margin-bottom:40px}
/* dos columnas de grupos enteros: cada tema queda junto y no se parte al medio */
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;align-items:start}
.qg + .qg{margin-top:38px}
.qg .lbl{display:block;color:var(--laton);padding-bottom:10px}
.q{border-top:1px solid var(--linea)}
.q summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:19px 0 17px;cursor:pointer}
.q summary::-webkit-details-marker{display:none}
.q summary:focus-visible{outline:2px solid var(--laton);outline-offset:3px}
.q h3{font-size:18.5px;margin:0}
.q .qmark{position:relative;flex:0 0 13px;height:13px;color:var(--laton)}
.q .qmark::before,.q .qmark::after{content:"";position:absolute;background:currentColor}
.q .qmark::before{left:0;right:0;top:5.5px;height:2px}
.q .qmark::after{top:0;bottom:0;left:5.5px;width:2px}
.q[open]{border-top-color:var(--laton)}
.q[open] .qmark::after{transform:scaleY(0)}
.q p{font-size:15px;color:var(--gris);padding:0 0 20px}

/* ---------- cierre ---------- */
.cierre{border-top:1px solid var(--linea);padding:96px 0}
.cierre .cols{display:flex;align-items:center;justify-content:space-between;gap:44px;flex-wrap:wrap}
.cierre h2{font-size:clamp(30px,4.4vw,50px);max-width:20ch}
.cierre .micro{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--gris);margin-top:22px}

/* ---------- footer ---------- */
footer{background:var(--tinta);color:var(--dmut);padding:52px 0 36px}
footer .fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px;margin-bottom:34px}
footer .fgrid .col .lbl{color:#7C8698;display:block;margin-bottom:14px}
footer .fgrid .col a{display:block;font-size:14.5px;color:var(--dmut);padding:4px 0}
footer .fgrid .col a:hover{color:var(--papel)}
footer .fbrand p{font-size:14px;max-width:30ch;margin-top:14px}
footer .logo .sello{background:var(--papel);color:var(--tinta)}
footer .logo .nombre{color:var(--papel)}
footer .dato{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.08em}
footer .dato a:hover{color:var(--papel)}
footer .legal{padding-top:20px;border-top:1px solid var(--dlinea);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.05em;color:#7C8698}

/* ---------- whatsapp flotante ---------- */
.fwa{position:fixed;right:22px;bottom:22px;z-index:1000;display:inline-flex;align-items:center;gap:11px;
  height:56px;padding:0 22px 0 18px;border-radius:999px;background:var(--laton);color:#FCF9F2;
  border:1px solid rgba(243,240,233,.28);box-shadow:0 14px 32px -12px rgba(22,35,59,.55)}
.fwa svg{width:25px;height:25px;flex:none;color:currentColor}
.fwa .ftx{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
.fwa:hover{background:#835A1E}
/* la aureola que late una sola vez cuando aparece */
.fwa::before{content:"";position:absolute;inset:-1px;border-radius:999px;
  border:1px solid var(--laton);opacity:0;pointer-events:none}
@media(max-width:560px){
  .fwa{width:56px;padding:0;justify-content:center;border-radius:50%}
  .fwa .ftx{display:none}
}

/* ---------- subpáginas ---------- */
.pagehero{padding:64px 0 56px;border-bottom:1px solid var(--linea)}
.pagehero .herocols{display:grid;grid-template-columns:1.25fr .85fr;gap:64px;align-items:start}
.crumbs{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin-bottom:26px}
.crumbs a{color:var(--laton)}
.crumbs a:hover{color:var(--tinta)}
.pagehero h1{font-size:clamp(34px,4.6vw,54px);max-width:22ch;margin-bottom:18px}
.pagehero .lede{font-size:18px;color:var(--gris);max-width:60ch}
.pagehero .cta-row{margin-top:30px}

.bloque{padding:72px 0;border-bottom:1px solid var(--linea-s)}
.bloque:last-of-type{border-bottom:0}
.bloque h2{font-size:clamp(26px,3.4vw,36px);margin-bottom:18px;max-width:26ch}
.bloque h3{font-size:20px;margin:26px 0 8px}
.bloque .cols2{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.prose p{color:var(--tx);max-width:66ch;margin-bottom:16px}
.prose p.mut{color:var(--gris)}
.prose ul{margin:0 0 16px 0;padding-left:0;list-style:none;max-width:66ch}
.prose ul li{padding:9px 0 9px 26px;position:relative;border-bottom:1px solid var(--linea-s);font-size:15.5px}
.prose ul li::before{content:"·";position:absolute;left:8px;color:var(--laton);font-weight:700}
.prose a{color:var(--laton);border-bottom:1px solid rgba(154,107,37,.35)}
.prose a:hover{color:var(--tinta);border-color:var(--tinta)}
.prose .lbl{color:var(--laton);display:block;margin-bottom:10px}

/* tarjetas de servicio */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.svc{background:var(--carta);border:1px solid var(--linea);padding:0;display:flex;flex-direction:column}
.svc .shead{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--linea)}
.svc .shead .lbl{color:var(--laton)}
.svc .sbody{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.svc h3{font-size:21px;margin:0}
.svc p{font-size:14.8px;color:var(--gris)}
.svc .sfoot{padding:14px 20px;border-top:1px solid var(--linea-s);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}

a.svc{color:inherit}
.svc-grid4{grid-template-columns:repeat(4,1fr)}
.svc-grid2{grid-template-columns:repeat(2,1fr)}
@media (prefers-reduced-motion: no-preference){
  .svc{transition:transform .38s cubic-bezier(.21,.6,.35,1),box-shadow .38s,border-color .38s}
  .svc:hover{transform:translateY(-4px);box-shadow:0 18px 40px -28px rgba(22,35,59,.55);border-color:rgba(22,35,59,.3)}
}
.tabla + .tabla{margin-top:28px}
/* especificidad doble a propósito: .tabla td:last-child (más abajo en la hoja) alinea a la derecha */
.tabla.tabla-l td:last-child{text-align:left;color:var(--gris)}

/* banda CTA reutilizable */
.ctaband{background:var(--tinta);color:var(--papel);padding:72px 0}
.ctaband h2{color:var(--papel);font-size:clamp(26px,3.6vw,40px);max-width:24ch;margin-bottom:24px}
.ctaband .micro{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--dmut);margin-top:20px}

/* interlinks */
.interlinks{padding:40px 0 72px}
.interlinks .lbl{color:var(--gris);display:block;margin-bottom:16px}
.interlinks .row{display:flex;flex-wrap:wrap;gap:10px}
.interlinks .row a{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--linea);padding:10px 16px;color:var(--tx)}
.interlinks .row a:hover{border-color:var(--laton);color:var(--laton)}

/* tabla documental */
.tabla{width:100%;border-collapse:collapse;background:var(--carta);border:1px solid var(--linea);margin:20px 0 6px}
.tabla th{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris);text-align:left;padding:12px 18px;border-bottom:1px solid var(--linea)}
.tabla td{padding:13px 18px;border-bottom:1px solid var(--linea-s);font-size:15px;vertical-align:top}
.tabla tr:last-child td{border-bottom:0}
.tabla td:last-child{text-align:right;color:var(--gris)}
.tabla .oro{color:var(--laton);font-weight:600}

/* ================= animaciones ================= */
/* ---------- gráfico del hero · de la carpeta a la cédula ---------- */
.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:.07em;line-height:1.75;
  color:var(--gris);text-transform:uppercase;border-top:1px solid var(--linea-s)}

.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;gap:12px;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);white-space:nowrap}
.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;gap:8px;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.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 b{font-weight:600}
.g-dias .vig svg{width:12px;height:12px;flex:none;fill:none;stroke:var(--laton);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:22;stroke-dashoffset:0}

/* los atributos data-anim los pone sitio.js: sin JS, todo queda visible */
@media (prefers-reduced-motion: no-preference){

  /* --- reveal base --- */
  [data-anim]{opacity:0;
    transition:opacity .8s cubic-bezier(.21,.6,.35,1) var(--d,0ms),
               transform .8s cubic-bezier(.21,.6,.35,1) var(--d,0ms),
               filter .8s ease var(--d,0ms)}
  [data-anim="up"]{transform:translateY(24px)}
  [data-anim="left"]{transform:translateX(-26px)}
  [data-anim="right"]{transform:translateX(30px)}
  [data-anim="scale"]{transform:scale(.955)}
  [data-anim="soft"]{transform:translateY(16px);filter:blur(6px)}
  [data-anim].in{opacity:1;transform:none;filter:none}

  /* la rayita del eyebrow se dibuja */
  .eyebrow[data-anim]::before{transform:scaleX(0);transform-origin:left;
    transition:transform .8s cubic-bezier(.21,.6,.35,1) calc(var(--d,0ms) + 250ms)}
  .eyebrow[data-anim].in::before{transform:scaleX(1)}

  /* --- header --- */
  header{transition:background .3s,box-shadow .3s}
  header.scrolled{background:rgba(243,240,233,.98);box-shadow:0 10px 30px -20px rgba(22,35,59,.55)}
  .nav .links a{position:relative}
  .nav .links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--laton);
    transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.21,.6,.35,1)}
  .nav .links a:hover::after,.nav .links a.act::after{transform:scaleX(1)}
  .nav .links a.act{border-bottom:0}

  /* --- botones --- */
  .btn{transition:background .18s,color .18s,border-color .18s,
       transform .2s cubic-bezier(.21,.6,.35,1),box-shadow .2s}
  .btn:hover{transform:translateY(-2px)}
  .btn-tinta:hover{box-shadow:0 12px 24px -14px rgba(22,35,59,.8)}
  .btn-laton:hover{box-shadow:0 12px 24px -14px rgba(154,107,37,.85)}
  .btn:active{transform:translateY(0)}

  /* --- la espina de las etapas se dibuja al entrar --- */
  .etapas::before{transform:translateX(-.5px) scaleY(0);transform-origin:top;
    transition:transform 1.9s cubic-bezier(.21,.6,.35,1) .2s}
  .etapas.in::before{transform:translateX(-.5px) scaleY(1)}
  .enodo{transition:border-color .35s,color .35s,transform .35s cubic-bezier(.21,.6,.35,1)}
  .etapa:hover .enodo{border-color:var(--laton);transform:scale(1.07)}
  .egfx svg{transition:transform .5s cubic-bezier(.21,.6,.35,1)}
  .etapa:hover .egfx svg{transform:translateY(-3px)}

  /* --- filas en cascada dentro de las tarjetas de datos --- */
  @keyframes rowIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .casc.in > *{animation:rowIn .55s cubic-bezier(.21,.6,.35,1) both}

  /* --- tarjetas --- */
  .tcard{transition:transform .38s cubic-bezier(.21,.6,.35,1),box-shadow .38s,border-color .38s}
  .tcard:hover{transform:translateY(-5px);box-shadow:0 20px 44px -28px rgba(22,35,59,.6);border-color:rgba(22,35,59,.3)}
  .tphoto{transition:transform .38s cubic-bezier(.21,.6,.35,1)}
  .tcard:hover .tphoto{transform:scale(1.07)}
  .razon,.q{transition:border-top-color .35s}
  .razon:hover,.q:hover{border-top-color:var(--laton)}
  .q .qmark::before,.q .qmark::after{transition:transform .24s cubic-bezier(.21,.6,.35,1)}
  .q[open] p{animation:qopen .3s cubic-bezier(.21,.6,.35,1)}
  @keyframes qopen{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
  .chip{transition:border-color .18s,background .18s,color .18s,transform .18s cubic-bezier(.21,.6,.35,1)}
  .chip:hover{transform:translateY(-2px)}
  .salida .txt{transition:opacity .28s}
  .salida .txt.swap{opacity:0}

  /* --- whatsapp flotante --- */
  .fwa{opacity:0;transform:translateY(18px) scale(.9);pointer-events:none;
    transition:opacity .4s,transform .4s cubic-bezier(.21,.6,.35,1),background .18s}
  .fwa.show{opacity:1;transform:none;pointer-events:auto}
  .fwa.show:hover{transform:translateY(-3px)}
  .fwa.show::before{animation:fwaLate 1.9s cubic-bezier(.21,.6,.35,1) .5s 2}
  @keyframes fwaLate{
    0%{opacity:.75;transform:scale(1)} 70%,100%{opacity:0;transform:scale(1.42)}
  }
}

/* ================================================================
   V2 · componentes (14-ago): esencial · línea de tiempo · comparador
   fiscal · grupos de FAQ · sello · oficinas · documentos · checklist
   · banda de foto · nav móvil · canales de contacto
   ================================================================ */

/* ---------- caja "lo esencial, en 20 segundos" ---------- */
.esencial{background:var(--papel2);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:64px 0}
.esencial .caja{background:var(--carta);border:1px solid var(--linea);max-width:900px}
.esencial .chead{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:15px 22px;border-bottom:1px solid var(--linea)}
.esencial .chead .lbl{color:var(--tinta)}
.esencial .chead .yr{color:var(--laton)}
.erow{display:grid;grid-template-columns:210px 1fr;gap:18px;padding:13px 22px;border-bottom:1px solid var(--linea-s)}
.erow:last-of-type{border-bottom:0}
.erow .k{color:var(--laton);padding-top:3px}
.erow .v{font-size:15.5px;color:var(--tx)}
.erow .v b{color:var(--tinta);font-weight:600}
.efoot{padding:12px 22px;border-top:1px solid var(--linea-s);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);line-height:1.8}

/* ---------- línea de tiempo del proceso ---------- */
.tl{border:1px solid var(--linea);background:var(--carta);padding:26px 26px 20px;margin-top:38px}
.tl .tlhead{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.tl .tlhead .lbl{color:var(--laton)}
.tl .tlhead .mini{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.tl-row{display:flex;gap:0}
.tl-seg{position:relative;padding:0 14px 0 0}
.tl-seg:last-child{padding-right:0}
.tl-seg .seg-top{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--tinta);margin-bottom:8px;white-space:nowrap}
.tl-seg .seg-top i{font-style:normal;color:var(--laton);margin-left:8px}
.tl-seg .seg-bar{height:12px;position:relative;background:var(--papel2);overflow:hidden}
.tl-seg .seg-bar i{position:absolute;inset:0;transform-origin:left}
.tl-seg.pais .seg-bar i{background:repeating-linear-gradient(-45deg,rgba(22,35,59,.34) 0 5px,rgba(22,35,59,.1) 5px 10px)}
.tl-seg.viaje .seg-bar i{background:var(--laton)}
.tl-seg.asu .seg-bar i{background:var(--tinta)}
.tl-seg .seg-sub{font-size:13.5px;color:var(--gris);margin-top:9px;line-height:1.5;max-width:34ch}
.tl.in .seg-bar i{transition:transform .9s cubic-bezier(.21,.6,.35,1);transform:scaleX(1)}
.tl.in .tl-seg:nth-child(2) .seg-bar i{transition-delay:.55s}
.tl.in .tl-seg:nth-child(3) .seg-bar i{transition-delay:.85s}
.tl-after{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid var(--linea-s);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--gris);line-height:2}
.tl-after b{color:var(--laton);font-weight:600}

/* ---------- comparador fiscal ---------- */
.fbar{border:1px solid var(--linea);background:var(--carta);padding:22px 26px 16px;max-width:680px}
.fbar .fbhead{display:flex;justify-content:space-between;gap:14px;margin-bottom:16px}
.fbar .fbhead .lbl{color:var(--laton)}
.fb{display:grid;grid-template-columns:120px 1fr 56px;align-items:center;gap:14px;padding:6px 0}
.fb .pais{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.fb .bar{height:10px;background:var(--papel2);position:relative}
.fb .bar i{position:absolute;left:0;top:0;bottom:0;width:var(--w,0%);background:var(--tinta);opacity:.5;transform-origin:left}
.fb .pct{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;font-weight:600;color:var(--tx);text-align:right}
.fb.py .pais,.fb.py .pct{color:var(--laton);font-weight:600}
.fb.py .bar i{background:var(--laton);opacity:1}
.fbar.in .fb i{transition:transform .8s cubic-bezier(.21,.6,.35,1)}
.fbar.in .fb:nth-child(2) i{transition-delay:.08s}
.fbar.in .fb:nth-child(3) i{transition-delay:.16s}
.fbar.in .fb:nth-child(4) i{transition-delay:.24s}
.fbar.in .fb:nth-child(5) i{transition-delay:.32s}
.fbar.in .fb:nth-child(6) i{transition-delay:.44s}
.fbar.in .fb i{transform:scaleX(1)}
.fbar .fnota{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);line-height:1.8;margin-top:14px;padding-top:12px;border-top:1px solid var(--linea-s)}
/* estado inicial de las barras SOLO cuando hay animación: con reduced-motion se ven llenas */
@media (prefers-reduced-motion: no-preference){
  .tl-seg .seg-bar i{transform:scaleX(0)}
  .fb .bar i{transform:scaleX(0)}
}

/* ---------- FAQ agrupada ---------- */

/* ---------- sello ---------- */
.stamp{width:158px;height:158px;color:var(--laton);margin-top:34px}
.stamp svg{width:100%;height:100%}
@media (prefers-reduced-motion: no-preference){
  [data-anim="stamp"]{opacity:0;transform:rotate(-16deg) scale(1.65);filter:none;
    transition:opacity .38s ease var(--d,0ms),transform .5s cubic-bezier(.2,1.4,.4,1) var(--d,0ms)}
  [data-anim="stamp"].in{opacity:.9;transform:rotate(-7deg) scale(1)}
}
@media (prefers-reduced-motion: reduce){.stamp{opacity:.9;transform:rotate(-7deg)}}

/* ---------- tarjetas de dato (oficinas, canales) ---------- */
.dgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:36px}
.dcard{background:var(--carta);border:1px solid var(--linea);display:flex;flex-direction:column}
.dcard .dhead{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 20px;border-bottom:1px solid var(--linea)}
.dcard .dhead .lbl{color:var(--laton)}
.dcard .dbody{padding:18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.dcard h3{font-size:19.5px}
.dcard .dir{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--gris);line-height:1.8}
.dcard p{font-size:14.5px;color:var(--gris)}
.dcard .dfoot{padding:12px 20px;border-top:1px solid var(--linea-s);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
@media (prefers-reduced-motion: no-preference){
  .dcard{transition:transform .38s cubic-bezier(.21,.6,.35,1),box-shadow .38s,border-color .38s}
  .dcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px -28px rgba(22,35,59,.55);border-color:rgba(22,35,59,.3)}
}

/* ---------- canal grande de whatsapp (contacto) ---------- */
.wagrande{background:var(--tinta);color:var(--papel);border:1px solid var(--tinta);display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;padding:30px 32px}
.wagrande .num{font-size:clamp(24px,3.4vw,34px);font-weight:500;color:var(--papel);letter-spacing:.01em}
.wagrande p{color:var(--dmut);font-size:14.5px;max-width:44ch}
.wagrande .qr{background:var(--carta);padding:10px;width:148px;height:148px;flex:none}
.wagrande .qr svg{display:block;width:100%;height:100%}

/* ---------- selector de país en /documentos/ ---------- */
.docpais{display:none}
.docpais.on{display:block}
@media (prefers-reduced-motion: no-preference){
  .docpais.on{animation:rowIn .5s cubic-bezier(.21,.6,.35,1) both}
}
.avisos{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:34px 0 8px}
.aviso-box{background:var(--carta);border:1px solid var(--linea);border-left:3px solid var(--laton);padding:16px 20px;font-size:14.5px;color:var(--tx)}
.aviso-box b{color:var(--tinta)}

/* ---------- checklist con estado guardado ---------- */
.ck{list-style:none;margin:26px 0 8px;padding:0;max-width:680px;border:1px solid var(--linea);background:var(--carta)}
.ck li{border-bottom:1px solid var(--linea-s)}
.ck li:last-child{border-bottom:0}
.ck label{display:flex;gap:14px;align-items:flex-start;padding:13px 18px;cursor:pointer}
.ck input{appearance:none;-webkit-appearance:none;width:20px;height:20px;border:1px solid var(--linea);background:var(--papel);flex:none;position:relative;margin-top:2px;cursor:pointer}
.ck input:checked{background:var(--tinta);border-color:var(--tinta)}
.ck input:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid var(--papel);border-width:0 2px 2px 0;transform:rotate(45deg)}
.ck input:focus-visible{outline:2px solid var(--laton);outline-offset:2px}
.ck span{font-size:15px;line-height:1.55}
.ck input:checked ~ span{color:var(--gris);text-decoration:line-through;text-decoration-color:rgba(154,107,37,.45)}
.ck-estado{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);margin-top:12px}
.ck-estado b{color:var(--laton)}

/* ---------- banda de foto ---------- */
.fotoband{position:relative;min-height:360px;display:flex;align-items:flex-end;background:var(--tinta);overflow:hidden}
.fotoband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.52;filter:saturate(.8)}
.fotoband::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,35,59,.2) 0%,rgba(22,35,59,.78) 100%)}
.fotoband .wrap{position:relative;z-index:2;width:100%;padding-top:64px;padding-bottom:34px}
.fotoband h2{color:var(--papel);font-size:clamp(26px,3.8vw,42px);max-width:22ch;margin-bottom:10px}
.fotoband .cap{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dmut)}

/* ---------- fila de cifras (stats) ---------- */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--linea);background:var(--carta);margin-top:36px}
.cifra{padding:22px 24px;border-right:1px solid var(--linea-s)}
.cifra:last-child{border-right:0}
.cifra .n{font-size:clamp(26px,3vw,36px);font-weight:500;color:var(--tinta);line-height:1.1}
.cifra .n i{font-style:normal;color:var(--laton)}
.cifra .t{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gris);margin-top:8px;line-height:1.7}

/* ---------- nav móvil (inyectado por JS) ---------- */
.mbtn{display:none;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--linea);padding:8px 12px;color:var(--tinta);background:transparent;cursor:pointer;flex:none}
.mnav{position:fixed;inset:0;z-index:940;background:rgba(17,27,46,.985);display:flex;flex-direction:column;justify-content:center;padding:80px 30px 40px;opacity:0;pointer-events:none;transition:opacity .3s ease}
.mnav a{font-family:Newsreader,Georgia,serif;font-size:27px;font-weight:500;color:var(--papel);padding:12px 0;border-bottom:1px solid var(--dlinea);display:block}
.mnav a .mi{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;color:var(--laton);letter-spacing:.14em;margin-right:14px}
.mnav .mfoot{margin-top:26px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dmut);line-height:2}
body.menu-open{overflow:hidden}
body.menu-open .mnav{opacity:1;pointer-events:auto}
body.menu-open header{background:transparent;border-bottom-color:transparent}
body.menu-open .mbtn{border-color:var(--dlinea);color:var(--papel);position:relative;z-index:960}
body.menu-open header .logo,body.menu-open header .lang{position:relative;z-index:960}
body.menu-open header .logo .sello{background:var(--papel);color:var(--tinta)}
body.menu-open header .logo .nombre{color:var(--papel)}
body.menu-open header .lang{border-color:var(--dlinea)}
body.menu-open header .lang button{color:var(--dmut)}
body.menu-open header .lang button.on{background:var(--papel);color:var(--tinta)}
@media (prefers-reduced-motion: no-preference){
  .mnav a{opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .4s cubic-bezier(.21,.6,.35,1)}
  body.menu-open .mnav a{opacity:1;transform:none}
  body.menu-open .mnav a:nth-child(2){transition-delay:.05s}
  body.menu-open .mnav a:nth-child(3){transition-delay:.1s}
  body.menu-open .mnav a:nth-child(4){transition-delay:.15s}
  body.menu-open .mnav a:nth-child(5){transition-delay:.2s}
  body.menu-open .mnav a:nth-child(6){transition-delay:.25s}
  body.menu-open .mnav a:nth-child(7){transition-delay:.3s}
  body.menu-open .mnav a:nth-child(8){transition-delay:.35s}
}

/* ---------- íconos de servicio ---------- */
.sico{width:30px;height:30px;color:var(--laton);flex:none}
.sico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- temporal vs permanente ---------- */
.comparar{background:var(--papel2);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.comparar > .wrap > .lbl{color:var(--laton);display:block;margin-bottom:12px}
.comparar h2{font-size:clamp(28px,3.6vw,40px);max-width:22ch;margin-bottom:14px}
.comparar .hint{color:var(--gris);max-width:64ch;margin-bottom:34px}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.cmpcol{background:var(--carta);border:1px solid var(--linea);display:flex;flex-direction:column}
.cmpcol.dest{border-color:rgba(154,107,37,.45);box-shadow:0 14px 34px -30px rgba(22,35,59,.6)}
.cmpcol .chead{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--linea)}
.cmpcol .chead .lbl{color:var(--laton)}
.cmpcol .chead .etapa{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gris)}
.cmpcol .cbody{padding:20px;flex:1;display:flex;flex-direction:column}
.cmpcol h3{font-size:22px;margin-bottom:9px}
.cmpcol .qes{font-size:15px;color:var(--gris);margin-bottom:14px;max-width:44ch}
.cmpcol dl{margin:6px 0 0}
.cmprow{display:grid;grid-template-columns:132px 1fr;gap:14px;padding:11px 0;border-top:1px solid var(--linea-s)}
.cmprow dt{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--laton);padding-top:3px}
.cmprow dd{margin:0;font-size:15px;color:var(--tx);line-height:1.5}
.cmprow dd b{color:var(--tinta);font-weight:600}
.cmp-nota{margin-top:26px;background:var(--carta);border:1px solid var(--linea);border-left:3px solid var(--laton);
  padding:16px 20px;font-size:14.8px;color:var(--gris);max-width:78ch}
.cmp-nota b{color:var(--tinta)}

/* ---------- servicios contables ---------- */
.contable{border-top:1px solid var(--linea)}
.contable .cols{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:start}
.contable h2{font-size:clamp(26px,3.4vw,38px);max-width:19ch;margin-bottom:18px}
.contable .sub{color:var(--gris);max-width:52ch;margin-bottom:20px}
.ctcards{display:flex;flex-direction:column;gap:18px}
.ctcard{background:var(--carta);border:1px solid var(--linea);border-left:3px solid var(--laton);padding:20px 22px}
.ctcard .lbl{color:var(--laton);display:block;margin-bottom:9px}
.ctcard h3{font-size:19px;margin-bottom:9px}
.ctcard ul{list-style:none;margin:0;padding:0}
.ctcard li{font-size:14.8px;color:var(--gris);padding:6px 0 6px 18px;position:relative;line-height:1.55}
.ctcard li::before{content:"·";position:absolute;left:4px;color:var(--laton);font-weight:700}

/* responsive de los componentes nuevos */
@media(max-width:980px){
  .mbtn{display:inline-flex}
  .erow{grid-template-columns:1fr;gap:4px;padding:12px 18px}
  .tl-row{flex-direction:column;gap:18px}
  .tl-seg{padding:0}
  .tl-seg .seg-top{white-space:normal}
  .dgrid{grid-template-columns:1fr}
  .avisos{grid-template-columns:1fr}
  .cifras{grid-template-columns:1fr 1fr}
  .cifra:nth-child(2n){border-right:0}
  .cifra{border-bottom:1px solid var(--linea-s)}
  .cifra:nth-last-child(-n+2){border-bottom:0}
  .wagrande{grid-template-columns:1fr;padding:24px}
  .fb{grid-template-columns:92px 1fr 48px;gap:10px}
  .cmp{grid-template-columns:1fr}
  .contable .cols{grid-template-columns:1fr;gap:36px}
}
@media(max-width:560px){
  .cmprow{grid-template-columns:1fr;gap:3px;padding:10px 0}
}

/* responsive */
@media(max-width:980px){
  section{padding:64px 0}
  .nav .links{display:none}
  .hero{padding:56px 0 60px}
  .hero .cols{grid-template-columns:1fr;gap:44px}
  .hero h1{font-size:clamp(34px,9vw,44px)}
  .razones{grid-template-columns:1fr;gap:26px}
  .etapas::before{left:22px}
  .etapa{grid-template-columns:1fr;padding:22px 0 26px 70px;position:relative}
  .etapa .etx,.etapa:nth-child(even) .etx{grid-column:1;grid-row:auto;padding:0}
  .etapa .egfx,.etapa:nth-child(even) .egfx{grid-column:1;grid-row:auto;padding:22px 0 0}
  .etapa:nth-child(even) .egfx svg{margin-left:0}
  .etapa .enodo{grid-area:auto;position:absolute;left:-1px;top:20px}
  .egfx svg{max-width:360px}
  .proc-head{margin-bottom:38px}
  .precio .cols{grid-template-columns:1fr;gap:40px}
  .quien .cols{grid-template-columns:1fr;gap:40px}
  .tcards{grid-template-columns:1fr}
  .qgrid{grid-template-columns:1fr}
  .cierre .cols{flex-direction:column;align-items:flex-start}
  .bloque{padding:52px 0}
  .bloque .cols2{grid-template-columns:1fr;gap:28px}
  .pagehero .herocols{grid-template-columns:1fr;gap:40px}
  .svc-grid{grid-template-columns:1fr}
  footer .fgrid{grid-template-columns:1fr 1fr;gap:26px}
}
@media(max-width:560px){
  header .btn{display:none}
  .nav{gap:14px}
  .nav .lang{margin-left:auto}
  .logo .nombre{font-size:12.5px;letter-spacing:.28em}
  .cta-row .btn{flex:1 1 100%}
  .frow,.ficha .fhead{padding:13px 16px}
  .fnote{padding:12px 16px}
  footer .fgrid{grid-template-columns:1fr}
}

/* ---------- gráfico del hero: el estado base ya es el final ---------- */
@media (prefers-reduced-motion: no-preference){
  .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} }

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

/* ---------- gráficos de "Por qué Paraguay": se dibujan una vez al entrar ----------
   El pre-estado cuelga de .razon[data-anim], y ese atributo lo pone sitio.js.
   Sin JS el atributo no existe, así que el gráfico se ve entero desde el arranque.
   El retraso arranca en el --d de la propia tarjeta: cada gráfico entra detrás de su tarjeta. */
@media (prefers-reduced-motion: no-preference){

  @keyframes gfxFade{from{opacity:0}to{opacity:1}}
  @keyframes gfxSube{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  @keyframes gfxTrazo{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
  @keyframes gfxCrece{from{opacity:0;transform:scaleY(.03)}to{opacity:1;transform:scaleY(1)}}

  /* --- 01 · se arman las 10 celdas y recién después se pinta la primera --- */
  .razon[data-anim] .r-tasa .c{opacity:0;transform:scaleY(.03);transform-box:fill-box;transform-origin:50% 100%}
  .razon[data-anim] .r-tasa .c1{fill:transparent;stroke:var(--tinta)}
  .razon[data-anim] .r-tasa .lnk,.razon[data-anim] .r-tasa .pct{opacity:0}
  .razon[data-anim].in .r-tasa .c{animation:gfxCrece .42s cubic-bezier(.21,.6,.35,1) both;
    animation-delay:calc(var(--d,0ms) + 140ms + var(--i) * 46ms)}
  .razon[data-anim].in .r-tasa .c1{animation:gfxCrece .42s cubic-bezier(.21,.6,.35,1) calc(var(--d,0ms) + 140ms) both,
    tasaPinta .45s ease calc(var(--d,0ms) + 700ms) both}
  .razon[data-anim].in .r-tasa .lnk{animation:gfxFade .5s ease calc(var(--d,0ms) + 900ms) both}
  .razon[data-anim].in .r-tasa .pct{animation:gfxSube .55s cubic-bezier(.21,.6,.35,1) calc(var(--d,0ms) + 960ms) both}
  @keyframes tasaPinta{from{fill:transparent;stroke:var(--tinta)}to{fill:var(--laton);stroke:var(--laton)}}

  /* --- 02 · sale el expediente, viaja una sola vez y queda el sello --- */
  .razon[data-anim] .r-viaje .doc,.razon[data-anim] .r-viaje .docl,
  .razon[data-anim] .r-viaje .guia,.razon[data-anim] .r-viaje .sello{opacity:0}
  .razon[data-anim] .r-viaje .ruta{stroke-dasharray:100;stroke-dashoffset:100}
  .razon[data-anim] .r-viaje .chispa{stroke-dasharray:7 100;stroke-dashoffset:100}
  .razon[data-anim] .r-viaje .tilde{stroke-dasharray:100;stroke-dashoffset:100}
  .razon[data-anim].in .r-viaje .doc{animation:gfxSube .55s cubic-bezier(.21,.6,.35,1) calc(var(--d,0ms) + 140ms) both}
  .razon[data-anim].in .r-viaje .docl{animation:gfxFade .5s ease calc(var(--d,0ms) + 340ms) both}
  .razon[data-anim].in .r-viaje .guia{animation:gfxFade .5s ease calc(var(--d,0ms) + 300ms) both}
  .razon[data-anim].in .r-viaje .ruta{animation:gfxTrazo 1.15s cubic-bezier(.42,.06,.24,1) calc(var(--d,0ms) + 440ms) both}
  .razon[data-anim].in .r-viaje .chispa{animation:viajeChispa 1.15s cubic-bezier(.42,.06,.24,1) calc(var(--d,0ms) + 440ms) both}
  .razon[data-anim].in .r-viaje .sello{animation:viajeSello .6s cubic-bezier(.21,.75,.32,1) calc(var(--d,0ms) + 1450ms) both}
  .razon[data-anim].in .r-viaje .tilde{animation:gfxTrazo .45s cubic-bezier(.3,.7,.3,1) calc(var(--d,0ms) + 1720ms) both}
  @keyframes viajeChispa{
    0%{stroke-dashoffset:100;opacity:0} 9%{opacity:1} 86%{opacity:1} 100%{stroke-dashoffset:-7;opacity:0}
  }
  @keyframes viajeSello{
    from{opacity:0;transform:scale(.5) rotate(-18deg)} to{opacity:1;transform:scale(1) rotate(0)}
  }

  /* --- 03 · se traza el eje, aparece el umbral y las barras lo cruzan --- */
  .razon[data-anim] .r-grado .eje{stroke-dasharray:100;stroke-dashoffset:100}
  .razon[data-anim] .r-grado .umbral,.razon[data-anim] .r-grado .rate{opacity:0}
  .razon[data-anim] .r-grado .b{opacity:0;transform:scaleY(.03);transform-box:fill-box;transform-origin:50% 100%}
  .razon[data-anim].in .r-grado .eje{animation:gfxTrazo .7s cubic-bezier(.3,.7,.3,1) calc(var(--d,0ms) + 120ms) both}
  .razon[data-anim].in .r-grado .umbral{animation:gfxFade .6s ease calc(var(--d,0ms) + 460ms) both}
  .razon[data-anim].in .r-grado .b{animation:gfxCrece .6s cubic-bezier(.21,.75,.32,1) both;
    animation-delay:calc(var(--d,0ms) + 620ms + var(--i) * 155ms)}
  .razon[data-anim].in .r-grado .rate{animation:gfxSube .55s cubic-bezier(.21,.6,.35,1) calc(var(--d,0ms) + 1290ms) both}

  /* --- 04 · cae el piso y el rango se abre hacia arriba --- */
  .razon[data-anim] .r-costo .ejebajo,.razon[data-anim] .r-costo .tick,
  .razon[data-anim] .r-costo .punta,.razon[data-anim] .r-costo .cifra,
  .razon[data-anim] .r-costo .piso,.razon[data-anim] .r-costo .pdot{opacity:0}
  .razon[data-anim] .r-costo .rango{stroke-dasharray:100;stroke-dashoffset:100}
  .razon[data-anim].in .r-costo .ejebajo{animation:gfxFade .55s ease calc(var(--d,0ms) + 180ms) both}
  .razon[data-anim].in .r-costo .piso{animation:costoPiso .6s cubic-bezier(.21,.75,.32,1) calc(var(--d,0ms) + 320ms) both}
  .razon[data-anim].in .r-costo .pdot{animation:gfxFade .4s ease calc(var(--d,0ms) + 620ms) both}
  .razon[data-anim].in .r-costo .cifra{animation:gfxSube .55s cubic-bezier(.21,.6,.35,1) calc(var(--d,0ms) + 700ms) both}
  .razon[data-anim].in .r-costo .rango{animation:gfxTrazo .9s cubic-bezier(.3,.7,.3,1) calc(var(--d,0ms) + 820ms) both}
  .razon[data-anim].in .r-costo .tick{animation:gfxFade .45s ease both;
    animation-delay:calc(var(--d,0ms) + 980ms + var(--i) * 95ms)}
  .razon[data-anim].in .r-costo .punta{animation:gfxSube .45s cubic-bezier(.21,.6,.35,1) calc(var(--d,0ms) + 1540ms) both}
  @keyframes costoPiso{from{opacity:0;transform:translateY(-13px)}to{opacity:1;transform:none}}

  /* al pasar el mouse la tarjeta responde con el gráfico, no solo con la rayita de arriba */
  .rgfx svg{transition:transform .45s cubic-bezier(.21,.6,.35,1)}
  .razon:hover .rgfx svg{transform:translateY(-2px)}
}

/* ---------- gráficos de las 5 etapas del proceso: se dibujan al entrar ----------
   Mismo contrato que los de "Por qué Paraguay": el pre-estado cuelga de
   .etapa[data-anim], atributo que pone sitio.js. Sin JS no existe y el SVG se ve entero. */
@media (prefers-reduced-motion: no-preference){

  /* --- 01 · las 3 hojas entran, se tildan y cierra la carpeta --- */
  .etapa[data-anim] .e-docs .hoja{opacity:0;transform:translateY(16px)}
  .etapa[data-anim] .e-docs .ok{opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:50% 50%}
  .etapa[data-anim] .e-docs .tk{stroke-dasharray:100;stroke-dashoffset:100}
  .etapa[data-anim] .e-docs .carpeta{stroke-dasharray:100;stroke-dashoffset:100}
  .etapa[data-anim].in .e-docs .hoja{animation:gfxSube .58s cubic-bezier(.21,.6,.35,1) both;
    animation-delay:calc(var(--d,0ms) + 160ms + var(--i) * 145ms)}
  .etapa[data-anim].in .e-docs .ok{animation:etPop .45s cubic-bezier(.21,.8,.3,1) both;
    animation-delay:calc(var(--d,0ms) + 640ms + var(--i) * 145ms)}
  .etapa[data-anim].in .e-docs .tk{animation:gfxTrazo .4s cubic-bezier(.3,.7,.3,1) both;
    animation-delay:calc(var(--d,0ms) + 760ms + var(--i) * 145ms)}
  .etapa[data-anim].in .e-docs .carpeta{animation:gfxTrazo .8s cubic-bezier(.3,.7,.3,1) calc(var(--d,0ms) + 1000ms) both}

  /* --- 02 · la página del pasaporte y el sello de entrada que baja --- */
  .etapa[data-anim] .e-ingreso .pag,.etapa[data-anim] .e-ingreso .chip,
  .etapa[data-anim] .e-ingreso .py,.etapa[data-anim] .e-ingreso .ren,
  .etapa[data-anim] .e-ingreso .pt{opacity:0}
  .etapa[data-anim] .e-ingreso .ala{stroke-dasharray:100;stroke-dashoffset:100;fill-opacity:0}
  .etapa[data-anim] .e-ingreso .sello2{opacity:0;transform:rotate(-15deg) scale(1.7)}
  .etapa[data-anim] .e-ingreso .flecha{stroke-dasharray:100;stroke-dashoffset:100}
  .etapa[data-anim].in .e-ingreso .pag{animation:etEscala .6s cubic-bezier(.21,.6,.35,1) calc(var(--d,0ms) + 140ms) both}
  .etapa[data-anim].in .e-ingreso .chip{animation:gfxFade .45s ease calc(var(--d,0ms) + 380ms) both}
  .etapa[data-anim].in .e-ingreso .py{animation:gfxFade .45s ease calc(var(--d,0ms) + 460ms) both}
  .etapa[data-anim].in .e-ingreso .ren{animation:gfxFade .5s ease calc(var(--d,0ms) + 480ms) both}
  .etapa[data-anim].in .e-ingreso .ala{animation:gfxTrazo .7s cubic-bezier(.3,.7,.3,1) calc(var(--d,0ms) + 600ms) both,
    etRelleno .5s ease calc(var(--d,0ms) + 1000ms) both}
  .etapa[data-anim].in .e-ingreso .sello2{animation:etSella .55s cubic-bezier(.19,.85,.3,1) calc(var(--d,0ms) + 860ms) both}
  .etapa[data-anim].in .e-ingreso .pt{animation:gfxFade .35s ease calc(var(--d,0ms) + 1200ms) both}
  .etapa[data-anim].in .e-ingreso .flecha{animation:gfxTrazo .5s cubic-bezier(.3,.7,.3,1) calc(var(--d,0ms) + 1220ms) both}

  /* --- 03 · el expediente y el sello de Migraciones que baja de golpe --- */
  .etapa[data-anim] .e-sello .exped{opacity:0;transform:translateY(18px)}
  .etapa[data-anim] .e-sello .ren path{opacity:0}
  .etapa[data-anim] .e-sello .mig{opacity:0;transform:rotate(-22deg) scale(1.5)}
  .etapa[data-anim].in .e-sello .exped{animation:gfxSube .6s cubic-bezier(.21,.6,.35,1) calc(var(--d,0ms) + 140ms) both}
  .etapa[data-anim].in .e-sello .ren path{animation:gfxFade .45s ease both}
  .etapa[data-anim].in .e-sello .ren path:nth-child(1){animation-delay:calc(var(--d,0ms) + 380ms)}
  .etapa[data-anim].in .e-sello .ren path:nth-child(2){animation-delay:calc(var(--d,0ms) + 440ms)}
  .etapa[data-anim].in .e-sello .ren path:nth-child(3){animation-delay:calc(var(--d,0ms) + 500ms)}
  .etapa[data-anim].in .e-sello .ren path:nth-child(4){animation-delay:calc(var(--d,0ms) + 560ms)}
  .etapa[data-anim].in .e-sello .ren path:nth-child(5){animation-delay:calc(var(--d,0ms) + 620ms)}
  .etapa[data-anim].in .e-sello .ren path:nth-child(6){animation-delay:calc(var(--d,0ms) + 680ms)}
  .etapa[data-anim].in .e-sello .mig{animation:etPrensa .6s cubic-bezier(.22,.9,.28,1) calc(var(--d,0ms) + 820ms) both}
  .etapa[data-anim].in .e-sello .onda{animation:etOnda .85s cubic-bezier(.2,.6,.35,1) calc(var(--d,0ms) + 1240ms) both}

  /* --- 04 · sale el carnet y se completan los campos --- */
  .etapa[data-anim] .e-carnet .tarjeta{opacity:0;transform:scale(.94);transform-box:fill-box;transform-origin:50% 50%}
  .etapa[data-anim] .e-carnet .franja{stroke-dasharray:100;stroke-dashoffset:100}
  .etapa[data-anim] .e-carnet .foto{opacity:0}
  .etapa[data-anim] .e-carnet .fila{transform:scaleX(0);transform-box:fill-box;transform-origin:0 50%}
  .etapa[data-anim] .e-carnet .visto{opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:50% 50%}
  .etapa[data-anim] .e-carnet .tk{stroke-dasharray:100;stroke-dashoffset:100}
  .etapa[data-anim].in .e-carnet .tarjeta{animation:etEscala .62s cubic-bezier(.21,.6,.35,1) calc(var(--d,0ms) + 140ms) both}
  .etapa[data-anim].in .e-carnet .franja{animation:gfxTrazo .75s cubic-bezier(.3,.7,.3,1) calc(var(--d,0ms) + 440ms) both}
  .etapa[data-anim].in .e-carnet .foto{animation:gfxFade .55s ease calc(var(--d,0ms) + 560ms) both}
  .etapa[data-anim].in .e-carnet .fila{animation:etTipea .5s cubic-bezier(.3,.7,.3,1) both;
    animation-delay:calc(var(--d,0ms) + 720ms + var(--i) * 155ms)}
  .etapa[data-anim].in .e-carnet .visto{animation:etPop .5s cubic-bezier(.19,.85,.3,1) calc(var(--d,0ms) + 1140ms) both}
  .etapa[data-anim].in .e-carnet .tk{animation:gfxTrazo .45s cubic-bezier(.3,.7,.3,1) calc(var(--d,0ms) + 1290ms) both}

  /* --- 05 · se dibuja la huella y barre la foto --- */
  .etapa[data-anim] .e-huella .area,.etapa[data-anim] .e-huella .retrato{opacity:0}
  .etapa[data-anim] .e-huella .hl{stroke-dasharray:100;stroke-dashoffset:100}
  .etapa[data-anim] .e-huella .base{stroke-dasharray:100;stroke-dashoffset:100}
  .etapa[data-anim].in .e-huella .area{animation:gfxFade .55s ease calc(var(--d,0ms) + 140ms) both}
  .etapa[data-anim].in .e-huella .hl{animation:gfxTrazo .72s cubic-bezier(.3,.7,.3,1) both;
    animation-delay:calc(var(--d,0ms) + 320ms + var(--i) * 135ms)}
  .etapa[data-anim].in .e-huella .retrato{animation:etEscala .6s cubic-bezier(.21,.6,.35,1) calc(var(--d,0ms) + 900ms) both}
  .etapa[data-anim].in .e-huella .barrido{animation:etBarre .82s cubic-bezier(.4,.05,.3,1) calc(var(--d,0ms) + 1100ms) both}
  .etapa[data-anim].in .e-huella .base{animation:gfxTrazo .7s cubic-bezier(.3,.7,.3,1) calc(var(--d,0ms) + 1380ms) both}

  @keyframes etPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
  @keyframes etEscala{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
  @keyframes etTipea{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes etRelleno{from{fill-opacity:0}to{fill-opacity:1}}
  @keyframes etSella{
    from{opacity:0;transform:rotate(-15deg) scale(1.7)}
    to{opacity:1;transform:rotate(-6deg) scale(1)}
  }
  @keyframes etPrensa{
    from{opacity:0;transform:rotate(-22deg) scale(1.5)}
    to{opacity:1;transform:rotate(-7deg) scale(1)}
  }
  @keyframes etOnda{
    from{opacity:.65;transform:scale(1)}
    to{opacity:0;transform:scale(1.32)}
  }
  @keyframes etBarre{
    0%{opacity:0;transform:translateY(0)}
    12%{opacity:.5}
    82%{opacity:.5}
    100%{opacity:0;transform:translateY(88px)}
  }
}


/* ---------- remate de la ficha esencial: marcas de registro + pie sellado ---------- */
.esencial .caja{position:relative}
.esencial .marcas{position:absolute;inset:-8px;pointer-events:none}
.esencial .marcas i{position:absolute;width:14px;height:14px;border:1px solid var(--laton);opacity:.5}
.esencial .marcas i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.esencial .marcas i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.esencial .marcas i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.esencial .marcas i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
.esencial .efoot{display:flex;align-items:center;gap:18px}
.esencial .ef-tx{flex:none;min-width:0}
.esencial .ef-hilo{flex:1 1 auto;min-width:24px;height:1px;position:relative}
.esencial .ef-hilo i{position:absolute;inset:0;background:var(--laton);opacity:.42;transform-origin:left}
.esencial .ef-gfx{flex:none;width:26px;line-height:0}
.esencial .ef-gfx svg{width:100%;height:auto;display:block;overflow:visible}
.esencial .efc{fill:var(--tinta);transform-box:fill-box;transform-origin:50% 50%}
.esencial .efp{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.08em;fill:var(--papel);text-anchor:middle}

/* ---------- trayectoria: 2012 -> 2026 ---------- */
.trayect{border:1px solid var(--linea);background:var(--carta);padding:22px 24px 20px;margin-top:30px}
.trayect .tr-top{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.trayect .tr-num{font-family:Newsreader,Georgia,serif;font-weight:500;font-size:46px;line-height:1;
  letter-spacing:-.022em;color:var(--tinta)}
.trayect .tr-un{color:var(--laton)}
.trayect .tr-gfx{line-height:0}
.trayect .tr-gfx svg{width:100%;height:auto;display:block;overflow:visible}
.trayect .tr-eje{fill:none;stroke:var(--linea);stroke-width:1}
.trayect .tr-fill{fill:none;stroke:var(--laton);stroke-width:1.7}
.trayect .tr-t{fill:none;stroke:rgba(22,35,59,.24);stroke-width:1}
.trayect .tr-yr{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9.5px;font-weight:600;
  letter-spacing:.15em;fill:var(--gris)}
.trayect .tr-p0{fill:var(--laton)}
.trayect .tr-p1{fill:var(--laton)}
@media(max-width:980px){
  .esencial .efoot{flex-wrap:wrap;gap:12px}
  .trayect{padding:20px 18px 18px}
  .trayect .tr-num{font-size:40px}
}

@media (prefers-reduced-motion: no-preference){
  /* el pie de la ficha se dibuja y el sello entra prensado */
  .esencial .caja[data-anim] .ef-hilo i{transform:scaleX(0)}
  .esencial .caja[data-anim] .efc,.esencial .caja[data-anim] .efp{opacity:0}
  .esencial .caja[data-anim] .marcas i{opacity:0;transform:scale(.55)}
  .esencial .caja[data-anim].in .ef-hilo i{animation:efHilo .95s cubic-bezier(.3,.7,.3,1) 720ms both}
  .esencial .caja[data-anim].in .efc{animation:selloPY .5s cubic-bezier(.21,.8,.32,1) 1160ms both}
  .esencial .caja[data-anim].in .efp{animation:gfxFade .4s ease 1320ms both}
  .esencial .caja[data-anim].in .marcas i{animation:marcaIn .5s cubic-bezier(.21,.75,.32,1) both}
  .esencial .caja[data-anim].in .marcas i:nth-child(1){animation-delay:1380ms}
  .esencial .caja[data-anim].in .marcas i:nth-child(2){animation-delay:1440ms}
  .esencial .caja[data-anim].in .marcas i:nth-child(3){animation-delay:1500ms}
  .esencial .caja[data-anim].in .marcas i:nth-child(4){animation-delay:1560ms}
  @keyframes selloPY{
    from{opacity:0;transform:scale(1.55) rotate(-7deg)}
    to{opacity:1;transform:none}
  }
  @keyframes marcaIn{from{opacity:0;transform:scale(.55)}to{opacity:.5;transform:none}}
  @keyframes efHilo{from{transform:scaleX(0)}to{transform:scaleX(1)}}

  /* el riel de trayectoria se llena de 2012 a 2026 */
  .trayect[data-anim] .tr-fill{stroke-dasharray:100;stroke-dashoffset:100}
  .trayect[data-anim] .tr-t,.trayect[data-anim] .tr-p1{opacity:0}
  .trayect[data-anim].in .tr-fill{animation:gfxTrazo 1.25s cubic-bezier(.3,.7,.3,1) 240ms both}
  .trayect[data-anim].in .tr-t{animation:gfxFade .45s ease both;
    animation-delay:calc(300ms + var(--i,0) * 72ms)}
  .trayect[data-anim].in .tr-p1{animation:gfxSube .5s cubic-bezier(.21,.75,.32,1) 1420ms both}
}


/* el <footer> de una cita no es el pie del sitio: la regla global de footer lo pintaba de tinta */
blockquote footer{background:transparent;color:var(--laton);padding:0}


/* ---------- lomo vertical en el margen derecho de la ficha ---------- */
.esencial .wrap{display:grid;grid-template-columns:minmax(0,900px) auto;align-items:stretch}
.elomo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:6px 0 6px 52px;min-width:118px}
.elomo .el-seg{flex:1 1 auto;width:1px;min-height:26px;position:relative}
.elomo .el-seg i{position:absolute;inset:0;background:var(--laton);opacity:.34;transform-origin:center}
.elomo .el-marca{width:22px;line-height:0;flex:none}
.elomo .el-marca svg{width:100%;height:auto;display:block;overflow:visible}
.elomo .el-c{fill:none;stroke:var(--laton);stroke-width:1;opacity:.55}
.elomo .el-x,.elomo .el-y{fill:none;stroke:var(--laton);stroke-width:1;opacity:.55}
.elomo .el-tx{flex:none;writing-mode:vertical-rl;transform:rotate(180deg);
  color:var(--laton);opacity:.75;letter-spacing:.34em;white-space:nowrap}
@media(max-width:1080px){
  .esencial .wrap{display:block}
  .elomo{display:none}
}

@media (prefers-reduced-motion: no-preference){
  .elomo[data-anim] .el-seg i{transform:scaleY(0)}
  .elomo[data-anim] .el-marca,.elomo[data-anim] .el-tx{opacity:0}
  .elomo[data-anim].in .el-seg i{animation:elSeg 1s cubic-bezier(.3,.7,.3,1) 420ms both}
  .elomo[data-anim].in .el-marca{animation:elMarca .55s cubic-bezier(.21,.8,.32,1) 980ms both}
  .elomo[data-anim].in .el-tx{animation:elTx .7s cubic-bezier(.21,.6,.35,1) 1120ms both}
  @keyframes elSeg{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  @keyframes elMarca{from{opacity:0;transform:scale(.4) rotate(-25deg)}to{opacity:1;transform:none}}
  @keyframes elTx{from{opacity:0;transform:rotate(180deg) translateY(-14px)}
    to{opacity:.75;transform:rotate(180deg)}}
}