/* ==========================================================================
   CHASQUI — base.css
   Dirección de arte: «el cuaderno de ruta sobre la mesa».
   Papel cálido impreso en tinta, y las pantallas del producto en oscuro.
   --------------------------------------------------------------------------
   Orden:  1 tokens · 2 reset · 3 tipografía · 4 layout · 5 atmósfera
           6 botones · 7 chips y etiquetas · 8 papel · 9 utilidades
   ========================================================================== */

/* ── 1 · TOKENS ─────────────────────────────────────────────────────────── */
/*  Tema claro: «el cuaderno de ruta abierto sobre la mesa».
    Todo el sitio es papel cálido impreso en tinta. La única excepción son las
    pantallas simuladas, que van en oscuro porque las pantallas son oscuras:
    ver el bloque `.pantalla` justo abajo.                                    */
:root{
  /* Papel — superficies, de más al fondo a más elevada */
  --fondo:#F7F4EE;
  --sup-1:#FCFAF6;
  --sup-2:#FFFFFF;
  --sup-3:#F0EBE1;
  --hondo:#EDE7DB;

  /* Tinta — texto */
  --tx:#15181B;
  --tx-2:#4A525A;
  --tx-3:#6A7077;

  /* Sodio — el acento, en dos intensidades: vivo para rellenos y marcas,
     tinta para texto. El naranja brillante sobre papel no llega ni al 3:1 que
     pide un titular, así que el texto usa una versión quemada. */
  --sodio:#E8770F;
  --sodio-claro:#FF9A3D;
  --sodio-hondo:#C25E0C;
  --sodio-texto:#A8500A;
  --sodio-tinte:rgba(232,119,15,.11);
  --sodio-brillo:rgba(232,119,15,.22);
  --sobre-acento:#1A1208;

  /* Papel impreso — los documentos de la gira */
  --papel:#FFFFFF;
  --papel-2:#F6F2EA;
  --papel-3:#DCD4C4;
  --tinta:#14171A;
  --tinta-2:#52585E;
  --tinta-3:#6F767C;

  /* Señales */
  --ok:#297D55;
  --ok-tinte:rgba(46,139,95,.12);
  --alerta:#8A6212;
  --alerta-tinte:rgba(232,163,61,.18);
  --alto:#C73F2A;

  /* Líneas */
  --brd:#E5DED1;
  --brd-2:#D3C9B7;
  --brd-3:#BCAF99;

  /* Cristal y metal */
  --cristal:rgba(247,244,238,.84);
  --cristal-brd:rgba(20,23,26,.07);
  --metal:linear-gradient(180deg,#4C555E 0%,#2B333B 52%,#1C2227 100%);

  /* Tipografía */
  --f-display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --f-body:'Archivo','Helvetica Neue',Arial,sans-serif;
  --f-mono:'Azeret Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  /* Medidas */
  --ancho:1180px;
  --ancho-angosto:760px;
  --pad:24px;
  --radio:14px;
  --radio-sm:9px;
  --radio-lg:22px;

  /* Sombras: cálidas y suaves. Una sombra negra dura sobre papel se ve sucia. */
  --sombra-1:0 1px 2px rgba(72,58,38,.09);
  --sombra-2:0 12px 28px -12px rgba(72,58,38,.20),0 2px 6px rgba(72,58,38,.07);
  --sombra-3:0 32px 62px -26px rgba(72,58,38,.30),0 6px 16px rgba(72,58,38,.09);
  --sombra-papel:0 1px 0 rgba(255,255,255,.9) inset,0 16px 32px -16px rgba(72,58,38,.26),0 2px 5px rgba(72,58,38,.08);

  /* Movimiento */
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-salida:cubic-bezier(.4,0,1,1);
  --t-rapido:.16s;
  --t-medio:.32s;
  --t-lento:.62s;

  /* Riel lateral */
  --riel-x:calc(50% - (var(--ancho) / 2) - 62px);
}

/* ── 1b · LAS PANTALLAS ─────────────────────────────────────────────────── */
/*  Los mockups son pantallas, y las pantallas son oscuras. En vez de escribir
    un juego de reglas aparte, redefinimos los mismos nombres dentro del
    contenedor: todo lo que viva adentro se repinta solo.                      */
.pantalla{
  --fondo:#12161A;
  --sup-1:#1A2026;
  --sup-2:#222931;
  --sup-3:#2B333B;
  --hondo:#0D1114;

  --tx:#EDEFF2;
  --tx-2:#A7AFB7;
  --tx-3:#879199;

  --sodio:#FF8A2B;
  --sodio-claro:#FFB25E;
  --sodio-texto:#FFA84D;
  --sodio-tinte:rgba(255,138,43,.14);
  --sodio-brillo:rgba(255,138,43,.34);

  --brd:#333B44;
  --brd-2:#46505A;
  --brd-3:#5B6672;

  --ok:#5FBF8A;
  --ok-tinte:rgba(95,191,138,.14);
  --alerta:#FFC24D;
  --alerta-tinte:rgba(255,194,77,.14);
  --alto:#FF6A55;

  --metal:linear-gradient(180deg,#3A424B 0%,#20262B 52%,#14181B 100%);
  --sombra-1:0 1px 2px rgba(0,0,0,.5);
  --sombra-2:0 14px 34px -12px rgba(0,0,0,.75),0 3px 8px rgba(0,0,0,.4);

  color:var(--tx);
}

/* ── 2 · RESET ──────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scrollbar-color:var(--brd-2) var(--fondo);
  scrollbar-width:thin;
}

body{
  margin:0;
  background:var(--fondo);
  color:var(--tx);
  font-family:var(--f-body);
  font-size:16px;
  font-weight:400;
  line-height:1.62;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

body.menu-abierto{overflow:hidden}

h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
img{height:auto}

button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}

a{color:inherit;text-decoration:none}

table{border-collapse:collapse;width:100%}

:target{scroll-margin-top:96px}
section[id],main[id]{scroll-margin-top:96px}

::selection{background:var(--sodio);color:var(--sobre-acento)}

::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--fondo)}
::-webkit-scrollbar-thumb{background:var(--brd-2);border:3px solid var(--fondo);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--brd-3)}

:focus-visible{
  outline:2px solid var(--sodio);
  outline-offset:3px;
  border-radius:4px;
}

.simbolos{position:absolute;width:0;height:0;overflow:hidden}

/* ── 3 · TIPOGRAFÍA ─────────────────────────────────────────────────────── */

/* Los titulares usan el eje de ancho de Archivo: 118 % = voz de letrero. */
.h1,.portada__h1{
  font-family:var(--f-display);
  font-weight:900;
  font-stretch:118%;
  /* El máximo que cabe en dos líneas es el 12,5 % del ancho de su columna.
     Medido, no estimado: a 96 px el titular se partía en tres líneas. */
  font-size:clamp(2.2rem,calc(7vw - 3.5px),5rem);
  line-height:.9;
  letter-spacing:-.035em;
}

.h2{
  font-family:var(--f-display);
  font-weight:800;
  font-stretch:112%;
  font-size:clamp(2rem,4.3vw,3.35rem);
  line-height:.98;
  letter-spacing:-.028em;
  text-wrap:balance;
}

.h2 em,.portada__h1 em{
  font-style:normal;
  color:var(--sodio-texto);
}

.h3{
  font-family:var(--f-display);
  font-weight:700;
  font-stretch:106%;
  font-size:clamp(1.25rem,2vw,1.6rem);
  line-height:1.12;
  letter-spacing:-.02em;
}

.bajada{
  color:var(--tx-2);
  font-size:clamp(1rem,1.28vw,1.145rem);
  line-height:1.68;
  max-width:60ch;
  text-wrap:pretty;
}

.prosa p{color:var(--tx-2);font-size:1.055rem;line-height:1.78;text-wrap:pretty}
.prosa p + p{margin-top:1.05em}
.prosa strong{color:var(--tx);font-weight:600}

/* El subrayado pintado a mano del titular */
.subrayado{
  position:relative;
  display:inline-block;
  color:var(--sodio-texto);
}
.subrayado::after{
  content:"";
  position:absolute;
  left:-.02em;
  right:-.02em;
  bottom:-.12em;
  height:.16em;
  border-radius:99px;
  background:var(--sodio);
  transform-origin:left center;
  transform:scaleX(0);
  animation:pintar .85s var(--ease) .55s forwards;
}
@keyframes pintar{to{transform:scaleX(1)}}

/* Etiquetas técnicas en monoespaciada */
.mono,.hito__txt,.hito__n,.panel__kicker,.hoja__kicker,.hoja__codigo,
.antetitulo,.proxima__eti,.pastilla,.fecha__d span,.credencial__tipo,
.etiqueta-solo,.tarifa__eti,.panel__meta,.maq-kicker{
  font-family:var(--f-mono);
  font-feature-settings:"tnum" 1;
  letter-spacing:.09em;
  text-transform:uppercase;
}

/* ── 4 · LAYOUT ─────────────────────────────────────────────────────────── */
.contenedor{
  width:100%;
  max-width:var(--ancho);
  margin-inline:auto;
  padding-inline:var(--pad);
  position:relative;
}

.seccion{
  position:relative;
  /* De 272 px de colchón entre secciones a 127: seguía leyéndose como vacío. */
  padding-block:clamp(2.5rem,4.4vw,4.25rem);
}

.seccion__cab{
  max-width:70ch;
  margin-bottom:clamp(1.75rem,3vw,2.5rem);
}
.seccion__cab--centro{
  margin-inline:auto;
  text-align:center;
}
.seccion__cab--centro .bajada{margin-inline:auto}
.seccion__cab .h2 + .bajada{margin-top:1.1rem}

/* Marcador de kilómetro: el número de parada de la ruta */
.hito{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-bottom:1.4rem;
  font-size:0.88rem;
  color:var(--tx-3);
}
.hito__n{
  color:var(--sodio-texto);
  font-weight:600;
  font-size:0.88rem;
}
.hito__txt{font-size:0.88rem}
.hito::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg,var(--brd-2),transparent 72%);
}
.seccion__cab--centro .hito{justify-content:center}
.seccion__cab--centro .hito::before{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(270deg,var(--brd-2),transparent 72%);
}

/* Rejillas reutilizables */
.trio{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1.1rem,2vw,1.7rem);
  margin-top:clamp(2.2rem,4vw,3.2rem);
}
.trio__c{
  padding:1.6rem 1.6rem 1.7rem;
  border:1px solid var(--brd);
  border-radius:var(--radio);
  background:linear-gradient(180deg,var(--sup-2),var(--sup-1));
}
.trio__c h3{
  font-family:var(--f-display);
  font-weight:700;
  font-stretch:106%;
  font-size:1.14rem;
  letter-spacing:-.015em;
  margin-bottom:.55rem;
}
.trio__c p{color:var(--tx-2);font-size:.955rem;line-height:1.68}

/* ── 5 · ATMÓSFERA ──────────────────────────────────────────────────────── */

/* Fibra de papel: SVG en línea, sin peticiones extra. En el tema claro el
   ruido se multiplica, así que se lee como textura del papel y no como suciedad. */
.grano{
  position:fixed;
  inset:-50%;
  z-index:9999;
  pointer-events:none;
  opacity:.035;
  mix-blend-mode:multiply;   /* en claro el ruido tiene que oscurecer, no velar */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
  animation:moverGrano 7s steps(6) infinite;
  will-change:transform;
}
@keyframes moverGrano{
  0%{transform:translate(0,0)}
  20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)}
  100%{transform:translate(0,0)}
}

/* Halo de luz cálida */
.resplandor{
  position:absolute;
  pointer-events:none;
  z-index:0;
  border-radius:50%;
  background:radial-gradient(circle at center,var(--sodio-brillo),transparent 66%);
  filter:blur(28px);
  animation:respirar 9s ease-in-out infinite;
}
.resplandor--portada{
  top:-34vmin;
  right:-18vmin;
  width:96vmin;
  height:96vmin;
  opacity:.42;
}
.resplandor--remate{
  top:50%;
  left:50%;
  width:120vmin;
  height:78vmin;
  transform:translate(-50%,-50%);
  opacity:.3;
}
@keyframes respirar{
  0%,100%{opacity:.42;transform:scale(1)}
  50%{opacity:.68;transform:scale(1.07)}
}
.resplandor--remate{animation-name:respirarCierre}
@keyframes respirarCierre{
  0%,100%{opacity:.26;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:.44;transform:translate(-50%,-50%) scale(1.06)}
}

/* Línea de la carretera: separador entre secciones */
.seccion--ruta::before,
.seccion--caos::before{
  content:"";
  position:absolute;
  inset-inline:0;
  top:0;
  height:2px;
  background-image:repeating-linear-gradient(90deg,var(--brd-2) 0 26px,transparent 26px 54px);
  opacity:.6;
}

/* ── 6 · BOTONES ────────────────────────────────────────────────────────── */
.boton{
  --btn-fondo:transparent;
  --btn-borde:var(--brd-2);
  --btn-tx:var(--tx);
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.72rem 1.25rem;
  border:1px solid var(--btn-borde);
  border-radius:999px;
  background:var(--btn-fondo);
  color:var(--btn-tx);
  font-family:var(--f-display);
  font-weight:600;
  font-stretch:104%;
  font-size:.935rem;
  letter-spacing:-.005em;
  line-height:1;
  white-space:nowrap;
  transition:transform var(--t-rapido) var(--ease),
             box-shadow var(--t-medio) var(--ease),
             background-color var(--t-medio) var(--ease),
             border-color var(--t-medio) var(--ease),
             color var(--t-medio) var(--ease);
}
.boton svg{flex:none;transition:transform var(--t-medio) var(--ease)}
.boton:hover{transform:translateY(-2px)}
.boton:active{transform:translateY(0)}

.boton--sodio{
  --btn-fondo:var(--sodio);
  --btn-borde:var(--sodio);
  --btn-tx:var(--sobre-acento);
  font-weight:700;
  box-shadow:0 10px 26px -10px var(--sodio-brillo),0 0 0 0 var(--sodio-brillo);
}
.boton--sodio:hover{
  --btn-fondo:var(--sodio-claro);
  --btn-borde:var(--sodio-claro);
  box-shadow:0 16px 34px -12px var(--sodio-brillo),0 0 0 5px var(--sodio-tinte);
}
.boton--sodio:hover svg{transform:translateX(4px)}

.boton--fantasma{
  --btn-fondo:rgba(255,255,255,.03);
  --btn-borde:var(--brd-2);
}
.boton--fantasma:hover{
  --btn-borde:var(--brd-3);
  --btn-fondo:rgba(255,255,255,.07);
}

.boton--papel{
  --btn-fondo:var(--papel);
  --btn-borde:var(--papel);
  --btn-tx:var(--tinta);
  font-weight:700;
}
.boton--papel:hover{--btn-fondo:#fff;--btn-borde:#fff}

.boton--lg{padding:.95rem 1.7rem;font-size:1.01rem}
.boton--sm{padding:.55rem .95rem;font-size:.86rem}
.boton--bloque{display:flex;width:100%}

.boton--mini{
  padding:.4rem .8rem;
  font-family:var(--f-mono);
  font-size:0.88rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  border-radius:999px;
  border:1px solid var(--brd-2);
  background:rgba(255,255,255,.04);
  color:var(--tx-2);
}
.boton--mini-fantasma{background:transparent}

/* Enlace de salto (accesibilidad) */
.saltar{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:10000;
  padding:.7rem 1.1rem;
  background:var(--sodio);
  color:var(--sobre-acento);
  font-weight:700;
  border-radius:0 0 var(--radio-sm) 0;
}
.saltar:focus{left:0}

/* ── 7 · CHIPS Y ETIQUETAS ──────────────────────────────────────────────── */
.pastilla{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.22rem .55rem;
  border-radius:999px;
  border:1px solid currentColor;
  font-size:0.82rem;
  font-weight:600;
  line-height:1.5;
  white-space:nowrap;
}
.pastilla--ok{color:var(--ok);background:var(--ok-tinte);border-color:rgba(95,191,138,.32)}
.pastilla--hoy{color:var(--sobre-acento);background:var(--sodio);border-color:var(--sodio-texto)}
.pastilla--ruta{color:var(--tx-2);background:rgba(255,255,255,.05);border-color:var(--brd-2)}
.pastilla--por{color:var(--alerta);background:var(--alerta-tinte);border-color:rgba(255,194,77,.3)}

.antetitulo{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.4rem .85rem .4rem .7rem;
  border:1px solid var(--brd);
  border-radius:999px;
  background:rgba(255,255,255,.03);
  color:var(--tx-2);
  font-size:0.86rem;
}
.pulso{
  width:7px;height:7px;border-radius:50%;
  background:var(--sodio);
  box-shadow:0 0 0 0 var(--sodio-brillo);
  animation:latir 2.4s var(--ease) infinite;
}
@keyframes latir{
  0%{box-shadow:0 0 0 0 var(--sodio-brillo)}
  70%{box-shadow:0 0 0 9px rgba(255,138,43,0)}
  100%{box-shadow:0 0 0 0 rgba(255,138,43,0)}
}

.etiqueta-solo{
  display:inline-flex;
  align-items:center;
  padding:.24rem .6rem;
  border-radius:4px;
  background:var(--sodio);
  color:var(--sobre-acento);
  font-size:0.81rem;
  font-weight:700;
  transform:rotate(-1.2deg);
}

.aviso{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-top:1rem;
  padding:.7rem .85rem;
  border-radius:var(--radio-sm);
  font-size:.82rem;
  line-height:1.5;
}
.aviso svg{flex:none}
.aviso--alerta{background:var(--alerta-tinte);border:1px solid rgba(255,194,77,.3);color:var(--alerta)}
.aviso--ok{background:var(--ok-tinte);border:1px solid rgba(95,191,138,.3);color:var(--ok)}

.barra{
  height:6px;
  border-radius:99px;
  background:var(--sup-3);
  overflow:hidden;
  margin-bottom:1rem;
}
.barra__relleno{
  display:block;
  height:100%;
  width:var(--pct,0%);
  border-radius:99px;
  background:linear-gradient(90deg,var(--ok),#8FD9B0);
  transition:width 1.1s var(--ease);
}

/* ── 8 · PAPEL ──────────────────────────────────────────────────────────── */
/* Los documentos de la gira: hoja impresa, etiqueta, boleta, credencial. */
.hoja{
  position:relative;
  background:var(--papel);
  color:var(--tinta);
  border-radius:3px;
  box-shadow:var(--sombra-papel);
  padding:1.05rem 1.15rem 1.15rem;
}
.hoja::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23p)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.hoja__perforado{
  position:absolute;
  top:-1px;left:14px;right:14px;
  height:7px;
  background-image:radial-gradient(circle at 5px 0,transparent 4px,var(--fondo) 4px);
  background-size:13px 7px;
  background-repeat:repeat-x;
}
.hoja__kicker{
  font-size:0.8rem;
  color:var(--tinta-3);
  margin-bottom:.42rem;
}
.hoja__codigo{
  font-family:var(--f-mono);
  font-size:1.3rem;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:none;
  color:var(--tinta);
  line-height:1.1;
}
.hoja__monto{
  font-family:var(--f-mono);
  font-size:1.22rem;
  font-weight:700;
  color:var(--tinta);
  line-height:1.1;
}
.hoja__desc{
  font-size:.76rem;
  line-height:1.45;
  color:var(--tinta-2);
  margin-top:.3rem;
}
.hoja__rubrica{
  display:flex;
  align-items:center;
  gap:.42rem;
  margin-top:.8rem;
  padding-top:.6rem;
  border-top:1px dashed var(--papel-3);
}
.hoja__visto{
  width:15px;height:15px;
  border-radius:3px;
  border:1.6px solid var(--tinta-3);
  display:grid;place-items:center;
}
.hoja__visto--cruz{border-color:var(--alto);position:relative}
.hoja__visto--cruz::before,
.hoja__visto--cruz::after{
  content:"";position:absolute;width:9px;height:1.8px;background:var(--alto);border-radius:2px;
}
.hoja__visto--cruz::before{transform:rotate(45deg)}
.hoja__visto--cruz::after{transform:rotate(-45deg)}
.hoja__estado{
  font-family:var(--f-mono);
  font-size:0.82rem;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--alto);
  font-weight:600;
}
.hoja__sello{
  position:absolute;
  right:.75rem;
  bottom:.7rem;
  width:52px;height:52px;
  color:var(--ok);
  opacity:.75;
  transform:rotate(-13deg);
}

/* Sello de gaffer: la cinta que pega las cosas al mundo */
.gaffer{
  display:inline-block;
  padding:.35rem .6rem;
  color:#14161A;
  font-family:var(--f-mono);
  font-size:0.81rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 2px,transparent 2px 5px),
    var(--sodio);
  clip-path:polygon(0 12%,4% 0,9% 10%,15% 2%,22% 11%,29% 1%,36% 9%,44% 0,51% 10%,58% 2%,66% 11%,73% 1%,80% 9%,87% 0,93% 10%,100% 3%,99% 88%,94% 100%,88% 90%,81% 99%,74% 89%,67% 100%,60% 90%,52% 99%,45% 89%,38% 99%,31% 90%,24% 100%,17% 90%,10% 99%,5% 91%,0 97%);
  transform:rotate(-1.5deg);
}

/* ── 9 · UTILIDADES ─────────────────────────────────────────────────────── */
.visualmente-oculto{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* Revelado al hacer scroll */
.aparece{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .78s var(--ease),transform .78s var(--ease);
  transition-delay:var(--retardo,0s);
}
.aparece.is-visible{opacity:1;transform:none}
[data-d="1"]{--retardo:.09s}
[data-d="2"]{--retardo:.18s}
[data-d="3"]{--retardo:.27s}
[data-d="4"]{--retardo:.36s}
[data-d="5"]{--retardo:.45s}