@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ═══════════════════════════════════════════════════════════════════════
   SKRATCH — DESIGN SYSTEM
   Mobile-first. Único tema (claro/marca). Sin imágenes externas.
   La única URL externa es el @import de Google Fonts de arriba.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────────────── */
:root{
  color-scheme: light;

  /* Marca */
  --deep:#2E0A5E;
  --deep-2:#3A1370;
  --violet:#5B2AE8;
  --violet-soft:#EDE7FE;

  /* Texto y superficies */
  --ink:#16162B;
  --ink-2:#3C3C50;
  --muted:#9B9BA5;
  --line:#EDEDF1;
  --surface:#FFFFFF;
  --track:#F2F2F5;
  --band:#F5F5F7;

  /* Acentos */
  --blue:#1B8FE3;
  --green:#57B947;
  --orange:#F5A11B;
  --red:#FF3B30;
  --cyan:#22D3EE;

  /* Radios y espaciado */
  --r-sheet:24px;
  /* Cuánto se mete la hoja por debajo de su cabecera. Tiene que ser MAYOR
     que --r-sheet: la esquina redondeada se dibuja recortando la hoja, y lo
     que asoma por el hueco es lo que haya detrás. Si la cabecera acaba antes
     de que termine la curva, los últimos píxeles quedan blanco sobre blanco
     y la esquina se ve cortada en recto — como si encima de la hoja
     redondeada hubiera otra cuadrada con las puntas asomando. */
  --sheet-lap:26px;
  --r-card:14px;
  --r-thumb:12px;
  --r-pill:999px;
  --pad:20px;

  /* Extras del sistema (derivados, no sustituyen a los de arriba) */
  --black:#0D0A16;
  --chevron:#C7C7CE;
  --hairline:rgba(255,255,255,.18);
  --sh-1:0 1px 3px rgba(0,0,0,.12);
  --sh-2:0 4px 16px rgba(22,22,43,.10);
  --sh-3:0 8px 24px rgba(22,22,43,.18);
  --tab-h:62px;
  /* No es negro puro a propósito. Debajo de la tabbar, en Android, queda la
     barra de navegación del sistema, que la página no puede pintar: no le
     ceden el inset, así que `--safe-b` vale 0 y ahí no llega el CSS. Con la
     tabbar en #000 contra esa franja se veía la costura entre los dos tonos.
     Medido sobre una captura del móvil: la franja del sistema es #171719.
     Es el tono de un Android en oscuro; si el sistema va en claro, la
     costura vuelve — pero al revés se veía siempre. */
  --tabbar:#171719;
  --safe-b:env(safe-area-inset-bottom, 0px);
  --ease:cubic-bezier(.2,.7,.3,1);
  /* Curva del asentamiento de la hoja. Medida sobre grabaciones de la
     app de referencia a 90fps: de cinco candidatas es la que menos se
     desvía de las trazas reales (2,9 % de error medio, frente al 5,0 %
     de --ease). La duración NO es fija: la pone el JS. */
  --ease-settle:cubic-bezier(.2,0,0,1);
}

/* ── Reset ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

html,body{
  margin:0;
  padding:0;
  overflow-x:hidden;
  overscroll-behavior-y:none;
}

body{
  background:var(--deep);
  color:var(--ink);
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:16px;
  line-height:1.35;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,p,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

button{
  font:inherit;
  color:inherit;
  border:0;
  margin:0;
  background:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}

/* Foco de teclado. El sistema no lo tenía y el navegador dibujaba un anillo
   negro de 1px que sobre la tabbar negra y el header morado no se ve.
   Violeta sobre claro (8.3:1 con el blanco) y blanco sobre los fondos
   oscuros de marca. Sólo :focus-visible: el ratón no lo dispara. */
:focus-visible{
  outline:3px solid var(--violet);
  outline-offset:2px;
}
.hdr :focus-visible,
.tabbar :focus-visible,
.hero :focus-visible,
.modal__back:focus-visible{
  outline:3px solid #fff;
  outline-offset:2px;
}
/* El buscador es un pill blanco: el anillo va al pill, no al input de dentro */
.searchbar:has(:focus-visible){
  outline:3px solid var(--violet);
  outline-offset:2px;
}
.searchbar input:focus-visible{outline:none}
/* Los que recortan por dentro necesitan el anillo hacia adentro */
.tile:focus-visible,
.hcard:focus-visible,
.hcard > :focus-visible{outline-offset:-3px}

input,textarea,select{font:inherit;color:inherit}

svg{display:block;flex:none}

img{max-width:100%;display:block}

/* Los SVG del catálogo heredan el color del contenedor. Los de trazo van
   con fill:none; los rellenos declaran fill="currentColor" y no llevan
   stroke, así que no entran en esta regla. */
svg[stroke="currentColor"],
svg.icon{stroke:currentColor;fill:none}
svg[fill="currentColor"]{fill:currentColor;stroke:none}

/* ── Shell / Layout ──────────────────────────────────────────────────── */
.app{
  max-width:480px;
  margin:0 auto;
  min-height:100dvh;
  position:relative;
  background:var(--surface);
  overflow:hidden;
  isolation:isolate;
}

.view{display:none}
.view--active{display:block}

.scroll{
  min-height:100dvh;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  padding-bottom:calc(var(--tab-h) + var(--safe-b) + 18px);
  background:var(--surface);
}

/* Variante para pantallas con cabecera morada: el fondo del scroll es morado
   para que el rebote superior no muestre blanco */
.scroll--deep{background:var(--deep)}

/* ── Posters (sustituyen a cualquier imagen) ─────────────────────────── */
.poster{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  min-height:100%;
  color:#fff;
  font-size:20px;
  font-weight:800;
  letter-spacing:.01em;
  text-shadow:0 1px 3px rgba(0,0,0,.28);
  background:linear-gradient(145deg,#7C3AED,#DB2777);
  user-select:none;
}
.poster--a{background:linear-gradient(145deg,#7C3AED 0%,#DB2777 100%)}
.poster--b{background:linear-gradient(145deg,#0EA5E9 0%,#22D3EE 100%)}
.poster--c{background:linear-gradient(145deg,#F59E0B 0%,#EF4444 100%)}
.poster--d{background:linear-gradient(145deg,#10B981 0%,#0891B2 100%)}
.poster--e{background:linear-gradient(145deg,#6366F1 0%,#22D3EE 100%)}
.poster--f{background:linear-gradient(145deg,#EC4899 0%,#F59E0B 100%)}
.poster--g{background:linear-gradient(145deg,#8B5CF6 0%,#2563EB 100%)}
.poster--h{background:linear-gradient(145deg,#14B8A6 0%,#84CC16 100%)}
.poster--sm{font-size:15px}
.poster--lg{font-size:28px}

/* ── Header morado ───────────────────────────────────────────────────── */
.hdr{
  background:var(--deep);
  color:#fff;
  padding:12px var(--pad) 30px;
  position:relative;
}

.hdr__top{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:60px;
}

.hdr__avatar{
  width:56px;
  height:56px;
  flex:none;
  border-radius:var(--r-pill);
  background:#fff;
  display:grid;
  place-items:center;
  overflow:hidden;
  color:#B4B4C4;
}
.hdr__avatar svg{width:34px;height:34px;stroke-width:2.2}
.hdr__avatar .poster{border-radius:var(--r-pill)}

.hdr__name{
  display:block;
  font-size:18px;
  font-weight:800;
  color:#fff;
  line-height:1.2;
  letter-spacing:-.01em;
}

.hdr__handle{
  display:block;
  font-size:16px;
  font-weight:500;
  color:rgba(255,255,255,.65);
  line-height:1.25;
  margin-top:1px;
}

.hdr__action{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:46px;
  padding:0 20px 0 16px;
  border-radius:var(--r-pill);
  background:var(--black);
  color:#fff;
  font-size:17px;
  font-weight:700;
  transition:transform 120ms var(--ease);
}
.hdr__action svg{width:20px;height:20px}

/* Bloque libre para el mapa del pasaporte */
.hdr__map{
  margin:18px 0 4px;
  aspect-ratio:16/11;
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.28);
}
.hdr__map svg{width:60%;height:auto}

/* Variante clara del header (menú de perfil) */
.hdr--light{
  background:var(--band);
  color:var(--ink);
  padding-top:8px;
}
.hdr--light .hdr__name{color:var(--ink);font-size:26px}
.hdr--light .hdr__handle{color:var(--muted);font-size:20px}
.hdr--light .hdr__avatar{background:#DEDDE6;width:68px;height:68px}
.hdr--light .hdr__avatar svg{color:#FBFBFD;width:44px;height:44px}

/* ── Stats ───────────────────────────────────────────────────────────── */
.stats{
  display:flex;
  align-items:stretch;
  margin-top:20px;
}

.stat{
  flex:1 1 0;
  min-width:0;
  padding:2px 6px;
  text-align:center;
  border-left:1px solid var(--hairline);
}
.stat:first-child{border-left:0}

.stat__num{
  font-size:26px;
  font-weight:800;
  color:#fff;
  line-height:1.15;
  letter-spacing:-.02em;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:3px;
  /* Una cifra no parte: a 360px «9d 4h» caía a dos líneas y desalineaba la
     etiqueta de esa columna con la de las demás. */
  white-space:nowrap;
}
.stat__num svg{width:14px;height:14px;margin-top:2px;opacity:.75}

.stat__label{
  display:block;
  font-size:13px;
  font-weight:500;
  color:rgba(255,255,255,.6);
  margin-top:4px;
  line-height:1.2;
}

/* ── Sheet blanco ────────────────────────────────────────────────────── */
.sheet{
  position:relative;
  z-index:2;
  background:var(--surface);
  border-radius:var(--r-sheet) var(--r-sheet) 0 0;
  padding-top:8px;
  min-height:40vh;
}

/* El solape y el padding de la cabecera son UNA pareja, y por eso los dos
   selectores van emparejados: lo que se ve entre el contenido de la cabecera
   y el borde de la hoja es la RESTA de ambos, y son 12px pase lo que pase
   con --sheet-lap. Una hoja que no venga detrás de una cabecera no tiene
   nada que solapar, así que tampoco lleva el margen negativo. */
.hdr:has(+ .sheet){padding-bottom:calc(12px + var(--sheet-lap))}
.hdr + .sheet{margin-top:calc(var(--sheet-lap) * -1)}

/* Acoplada arriba del todo: sin el radio, la cabecera morada que queda
   detrás del solape de -18px asomaría por las esquinas. */
.is-docked .sheet{border-radius:0}

/* Barra pegajosa de la hoja. El segmented se queda arriba al hacer scroll
   y el contenido pasa por debajo. La barra de filtro NO va aquí: se marcha
   con el scroll, igual que en la app de referencia. */
.sheet__nav{
  position:relative;
  z-index:5;
  flex:none;
  background:var(--surface);
  padding:10px 0;
}

/* ── Hoja de dos posiciones ──────────────────────────────────────────
   La .view (o el .modal) recorta. `.slide` es la capa que se desplaza
   entre reposo y acoplada. Sólo `.sheet__list` scrollea, y sólo cuando
   está acoplada: en reposo el gesto no scrollea nada, mueve la hoja.
   `--dock` lo mide el JS = distancia de la hoja al borde superior.
   ─────────────────────────────────────────────────────────────────── */
.view{position:relative}

.slide{
  position:absolute;
  inset:0;
}

/* Se desplaza LA HOJA, no la capa entera: la cabecera morada se queda
   quieta y la hoja se le pone por encima. Medido sobre las grabaciones de
   la app de referencia: comparando la franja de cabecera que sigue
   descubierta, la diferencia es 0,00 con desplazamiento 0px en todas las
   posiciones de la hoja. Moviendo las dos cosas juntas aparecía un
   parallax que la referencia no tiene. */
.slide > .sheet{
  height:100dvh;
  min-height:0;
  display:flex;
  flex-direction:column;
  transform:translateY(0);
  /* El redondeo viaja con la hoja, no por su cuenta: misma duración y misma
     curva que el desplazamiento. Durante el arrastre lo lleva el JS atado a
     la posición; esto es sólo para el último tramo, el que se anima al
     soltar, y para los cambios que no vienen de un dedo (rueda, cambio de
     pantalla). Con una duración propia de 180ms la esquina llegaba antes o
     después que la hoja y se notaba el desajuste. */
  transition:transform var(--settle,240ms) var(--ease-settle),
             border-radius var(--settle,240ms) var(--ease-settle);
  /* Arrastrar por encima de un texto no debe empezar una selección: se
     comía el gesto justo donde más contenido hay. */
  user-select:none;
  -webkit-user-select:none;
}
.is-docked .slide > .sheet{transform:translateY(calc(var(--dock, 0px) * -1))}

.sheet__list{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;                 /* en reposo el scroll NO existe */
  /* `none` y no `contain`: además de no encadenar el scroll al fondo, quita
     el rebote propio de la lista. Sin ese rebote el JS ya no necesita un
     `touchmove` no pasivo para frenarlo, y sin ese listener el scroll de la
     lista puede vivir entero en el compositor. */
  overscroll-behavior:none;
  -webkit-overflow-scrolling:touch;
  padding-bottom:calc(var(--tab-h) + var(--safe-b) + 18px);
}
.is-docked .sheet__list{overflow-y:auto}

/* .is-locked NO toca el overflow. Lo hizo, y era la causa de que a veces
   la lista no scrollease: el bloqueo duraba 360ms y congelaba también los
   gestos legítimos. Ahora es sólo una bandera de JS para la rueda. */

/* Quién se queda el gesto táctil. La zona de agarre (todo lo de la hoja que
   no es la lista, más la cabecera) no debe dejar que el navegador paneé:
   sus punteros son nuestros. La lista sí paneá, pero sólo estando acoplada.
   Ojo: no se puede poner touch-action:none en `.slide`, porque el valor
   efectivo es la intersección con los ancestros y anularía el pan-y. */
.slide > .sheet > *:not(.sheet__list){touch-action:none}

/* Y nada de la hoja que no sea la lista debe encoger. `.sheet` es un flex
   column de 100dvh y el reparto del encogimiento va ponderado por el tamaño
   base de cada hijo, así que el asa de 5px perdía su parte proporcional: se
   veía de 5px, 4,7 o 2,6 según lo largo que fuera el panel abierto. La que
   tiene que absorber es la lista, que para eso lleva `min-height:0` y su
   propio scroll. */
.slide > .sheet > *:not(.sheet__list){flex:none}

.sheet__list{touch-action:none}
.is-docked .sheet__list{touch-action:pan-y}

@media (prefers-reduced-motion: reduce){
  .slide > .sheet{transition:none}
}

.sheet__handle{
  width:40px;
  height:5px;
  border-radius:var(--r-pill);
  background:#DDDDE3;
  margin:6px auto 12px;
}

/* ── Segmented control ───────────────────────────────────────────────── */
.seg{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  background:var(--track);
  border-radius:14px;
  /* Medido en la captura original: track 50,6dp, pastilla 46,8dp, o sea
     1,9dp de margen. Con 4px la pastilla se veía pequeña dentro del gris. */
  padding:2px;
  margin:6px var(--pad) 0;
}

/* La pastilla es UN elemento que se desplaza, no el fondo de cada botón:
   así el cambio es un movimiento horizontal y no un apagado y encendido.
   La coloca el JS midiendo el botón activo. */
.seg__thumb{
  position:absolute;
  top:0;
  left:0;
  border-radius:12px;
  background:var(--surface);
  box-shadow:var(--sh-1);
  transition:transform 240ms var(--ease-settle),
             width     240ms var(--ease-settle);
  pointer-events:none;
  z-index:0;
}
.seg__thumb--quieta{transition:none}
.seg--2{grid-template-columns:repeat(2,1fr)}
.seg--4{grid-template-columns:repeat(4,1fr)}

.seg__btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  height:47px;
  min-width:0;
  padding:0 2px;
  z-index:1;
  border-radius:12px;
  font-size:14px;
  white-space:nowrap;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--muted);
  background:transparent;
  transition:background-color 140ms var(--ease), color 140ms var(--ease), transform 120ms var(--ease);
}
.seg__btn svg{width:18px;height:18px;color:currentColor}
/* 2 opciones: cabe la escala grande del diseño original */
.seg--2 .seg__btn{font-size:16px;gap:9px;padding:0 6px}
.seg--2 .seg__btn svg{width:20px;height:20px}

/* A 360px cada botón mide 104px. Con el icono a 18 y una etiqueta de diez
   caracteres («Pendientes» = 75.5px) sólo quedan 2.7px por lado y el divisor
   del vecino se pega a la última letra. Se recupera aire encogiendo el icono
   y el hueco, no la tipografía. */
@media (max-width:380px){
  .seg__btn{gap:3px;padding:0;letter-spacing:-.02em}
  .seg__btn svg{width:16px;height:16px}
}

/* Divisor fino sólo entre dos botones inactivos contiguos */
.seg__btn:not(.is-active) + .seg__btn:not(.is-active)::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:1px;
  background:#DEDEE4;
}

/* El fondo y la sombra los pone .seg__thumb; aquí sólo el color del texto. */
.seg__btn.is-active{color:var(--ink)}

/* Acentos de icono cuando el segmento está activo */
.seg__btn.is-active svg{color:var(--ink)}
.seg__btn--orange.is-active svg{color:var(--orange)}
.seg__btn--green.is-active svg{color:var(--green)}
.seg__btn--violet.is-active svg{color:var(--violet)}

/* ── Barra de filtro ─────────────────────────────────────────────────── */
.filterbar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:16px var(--pad);
  border-bottom:1px solid var(--line);
  color:var(--ink);
}
.filterbar > svg{width:22px;height:22px;color:var(--ink);flex:none}

.filterbar__label,
.filterbar > span:not(.filterbar__count){
  font-size:17px;
  font-weight:700;
  letter-spacing:-.01em;
}

.filterbar__count{
  font-size:17px;
  font-weight:700;
  color:var(--ink-2);
}

.filterbar__action{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  color:var(--ink);
  transition:transform 120ms var(--ease);
}
.filterbar__action svg{width:24px;height:24px}

/* ── Chips y bandas ──────────────────────────────────────────────────── */
.chip{
  display:inline-flex;
  align-items:center;
  gap:3px;
  height:34px;
  padding:0 14px;
  border-radius:var(--r-pill);
  background:var(--ink);
  color:#fff;
  font-size:15px;
  font-weight:700;
  letter-spacing:-.01em;
  white-space:nowrap;
}
.chip svg{width:16px;height:16px;stroke-width:2.6;margin-right:-4px}
.chip--blue{background:var(--blue);color:#fff}
.chip--dark{background:#000;color:#fff;padding:0 18px;height:38px;font-size:17px;font-weight:800}
.chip--soft{background:var(--violet-soft);color:var(--violet)}
.chip--green{background:var(--green);color:#fff}
.chip--orange{background:var(--orange);color:#fff}

.band{
  background:var(--band);
  border-radius:12px;
  padding:14px 18px;
  font-size:15px;
  font-weight:700;
  color:var(--ink-2);
  letter-spacing:-.01em;
}

/* Banda de separación entre grupos de filas (imagen 1) */
.band--gap{
  border-radius:0;
  height:34px;
  padding:0;
  margin:0;
}

/* Fila de cabecera de grupo: chip a la izquierda, contador a la derecha */
.chiprow{
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px var(--pad) 12px;
}
.chiprow__count{
  margin-left:auto;
  font-size:17px;
  font-weight:700;
  color:var(--ink);
}

/* ── Filas de lista ──────────────────────────────────────────────────── */
.row{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px var(--pad);
  min-height:76px;
  border-bottom:1px solid var(--line);
  background:var(--surface);
  width:100%;
  text-align:left;
  transition:transform 120ms var(--ease), background-color 120ms var(--ease);
}
.row--last{border-bottom:0}
.row--tight{min-height:60px;padding-top:10px;padding-bottom:10px}
.row--tall{min-height:88px;padding-top:20px;padding-bottom:20px}

/* Sin icono: sólo texto + chevron */
.row--plain{gap:12px;min-height:70px}

.row__icon{
  width:48px;
  height:48px;
  flex:none;
  border-radius:var(--r-pill);
  background:var(--violet);
  display:grid;
  place-items:center;
  color:#fff;
}
.row__icon svg{width:24px;height:24px}
.row__icon--ghost{background:var(--track);color:var(--ink)}
.row__icon--soft{background:var(--violet-soft);color:var(--violet)}

.row__thumb{
  width:52px;
  height:52px;
  flex:none;
  border-radius:var(--r-thumb);
  overflow:hidden;
  background:var(--track);
  display:grid;
  place-items:center;
  color:var(--ink);
  box-shadow:0 1px 3px rgba(22,22,43,.10);
}
.row__thumb svg{width:26px;height:26px}
/* Bandera: rectángulo 40x28 con esquinas suaves (imagen 4) */
.row__thumb--flag{
  width:40px;
  height:28px;
  border-radius:5px;
  box-shadow:0 0 0 1px rgba(22,22,43,.08);
}

.row__poster{
  width:40px;
  height:58px;
  flex:none;
  border-radius:8px;
  overflow:hidden;
  /* sin background: el degradado lo pone .poster, que va antes en el archivo */
  box-shadow:0 1px 4px rgba(22,22,43,.14);
}

.row__body{flex:1 1 auto;min-width:0}

.row__title{
  display:block;
  font-size:19px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-.015em;
  line-height:1.25;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.row__sub{
  display:block;
  font-size:15px;
  font-weight:500;
  color:var(--muted);
  margin-top:3px;
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Línea superior pequeña dentro del body (p.ej. "3 destinations") */
.row__kicker{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  font-weight:700;
  color:var(--muted);
  margin-bottom:2px;
}

.row__meta{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:12px;
  flex:none;
  font-size:16px;
  font-weight:700;
  color:var(--ink-2);
}

.row__chevron{
  width:20px;
  height:20px;
  flex:none;
  color:var(--chevron);
  stroke-width:2.6;
}

.row__badge{
  width:22px;
  height:22px;
  flex:none;
  border-radius:var(--r-pill);
  background:var(--red);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:14px;
  font-weight:800;
  line-height:1;
}

.row__action{
  flex:none;
  color:var(--muted);
  display:inline-flex;
  transition:transform 120ms var(--ease);
}
.row__action svg{width:24px;height:24px}

/* ── Parrilla de carteles ────────────────────────────────────────────── */
/* La alternativa a la lista cuando lo que importa es abarcar la colección de
   un vistazo: el cartel ocupa la tarjeta entera y el estado se lee en la
   barra del borde inferior, sin tener que leer ni una palabra.
   Tres columnas: a 360px salen carteles de 103px, el mínimo en el que el
   rótulo aún entra en dos líneas. La calle es de 6px, la misma del mosaico
   del header, para que las dos rejillas de Biblioteca rimen. */
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  padding:0 var(--pad);
}

/* Más alta que un cartel 2:3 a propósito: la franja de abajo es rótulo y
   barra, así que sin ese alto extra el texto se comería la ilustración.
   La tarjeta NO es el botón: lleva uno dentro que la cubre entera. Si fuese
   ella el <button>, el de «visto» quedaría anidado dentro de otro botón,
   que es HTML inválido y en móvil se traga uno de los dos toques. */
.gcard{
  position:relative;
  width:100%;
  aspect-ratio:5/9;
  /* 8px, el radio de cartel del sistema (`.row__poster`), no los 12 de
     `.row__thumb`: a 103px de ancho un radio de 12 se come la esquina del
     cartel y la parrilla empieza a leerse como una fila de pastillas. */
  border-radius:8px;
  overflow:hidden;
  background:var(--track);
  transition:transform 120ms var(--ease);
}

.gcard__poster{position:absolute;inset:0}

/* Velo de legibilidad. El cartel es un degradado saturado y el blanco se
   pierde encima; con la sombra de texto sola no basta a estos tamaños. */
.gcard__veil{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(to top,
    rgba(13,10,22,.90) 0%,
    rgba(13,10,22,.45) 30%,
    rgba(13,10,22,0)   58%);
  pointer-events:none;
}

/* El botón cubre la tarjeta entera y además coloca el rótulo abajo: así toda
   la superficie abre la ficha y el texto va dentro del enlace, sin más aria.
   13px abajo = los 7 de la barra + 6 de aire, para que el rótulo no la toque. */
.gcard__open{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:0 8px 13px;
  text-align:left;
}

.gcard__title{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
  font-size:13px;
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.015em;
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.85);
}

/* Por dónde vas. Es el dato que la lista daba en el `.row__sub` y lo único
   que no se puede deducir mirando la barra. */
.gcard__meta{
  display:block;
  margin-top:3px;
  font-size:11px;
  font-weight:700;
  color:rgba(255,255,255,.78);
  text-shadow:0 1px 3px rgba(0,0,0,.85);
}

/* A 360px la tarjeta baja a 103px y «T1E8 · faltan 20» se recortaba: a 11px
   pide 94 y sólo quedan 87. Se recupera encogiendo el dato secundario y el
   sangrado, nunca el rótulo — es el mismo remedio que el `.seg__btn` a este
   ancho. El `.trunc` del markup sigue de red por si el dato viene largo. */
@media (max-width:380px){
  .gcard__open{padding:0 6px 13px}
  .gcard__meta{font-size:10px;letter-spacing:-.02em}
}

/* Insignia de esquina: valoración, nº de temporadas… dos o tres caracteres */
.gcard__badge{
  position:absolute;
  left:6px;
  top:6px;
  z-index:4;
  pointer-events:none;
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:3px 7px;
  border-radius:var(--r-pill);
  background:rgba(13,10,22,.62);
  color:#fff;
  font-size:11px;
  font-weight:800;
  line-height:1;
}
.gcard__badge svg{width:11px;height:11px}
.gcard__badge--rating svg{color:var(--orange)}

/* «Visto el siguiente» sin entrar en la ficha. Va sólo en las tarjetas de
   series empezadas: en las demás no hay siguiente que marcar.
   NO es violeta, y a propósito: en una parrilla de doce salen doce, y el
   sistema reserva `--violet` para LA acción de la pantalla, que aquí es el
   `.fab`. Va del mismo gris translúcido que la insignia — el tick blanco ya
   dice qué hace — y sólo se pinta al marcarlo. */
.gcard__check{
  position:absolute;
  right:6px;
  top:6px;
  z-index:4;         /* por encima de .gcard__open, que cubre la tarjeta */
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  padding:0;               /* el UA le mete 1px 6px y descentra el tick */
  border-radius:var(--r-pill);
  background:rgba(13,10,22,.62);
  color:#fff;
  transition:background-color 140ms var(--ease), transform 120ms var(--ease);
}
.gcard__check svg{width:17px;height:17px;stroke-width:2.6}
.gcard__check.is-on{background:var(--green)}

/* La barra va a sangre contra el borde inferior y su pista es el MISMO color
   rebajado, no el gris de `--line`: así la barra entera lee como estado y no
   como un riel neutro con algo dentro.
   El rebaje se mezcla con blanco, no con transparente: debajo está la parte
   más oscura del velo y un violeta al 24 % sobre casi negro desaparecía —
   se veía cuánto llevas pero no sobre cuánto.
   `pointer-events:none` porque la barra tapa la franja inferior de
   `.gcard__open` y ahí también hay que poder tocar. */
.gcard .progress{
  position:absolute;
  inset:auto 0 0;
  z-index:3;
  height:7px;
  border-radius:0;
  background:color-mix(in srgb,var(--bar) 40%,rgba(255,255,255,.32));
  pointer-events:none;
}
.gcard .progress__bar{border-radius:0}

/* Cabecera de grupo dentro de la parrilla: nombre a la izquierda y cuántas
   hay a la derecha. Mismo aire que el `.sec__title`, media escala menos. */
.gridhead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:0 var(--pad);
  margin-bottom:10px;
}
.gridhead__title{
  font-size:17px;
  font-weight:800;
  color:var(--ink);
  letter-spacing:-.02em;
}
.gridhead__count{
  font-size:15px;
  font-weight:700;
  color:var(--muted);
}

/* ── Tarjeta promo (borde degradado) ─────────────────────────────────── */
.promo{
  display:flex;
  align-items:center;
  gap:16px;
  width:auto;
  margin:18px var(--pad);
  padding:18px 18px;
  border:2px solid transparent;
  border-radius:16px;
  background:
    linear-gradient(var(--surface),var(--surface)) padding-box,
    linear-gradient(105deg,var(--cyan) 0%,#7A6BF0 48%,#8B2FE8 100%) border-box;
  box-shadow:0 6px 18px rgba(46,10,94,.10);
  text-align:left;
  transition:transform 120ms var(--ease);
}

.promo__icon{
  width:52px;
  height:52px;
  flex:none;
  display:grid;
  place-items:center;
  border:2px solid transparent;
  border-radius:var(--r-pill);
  background:
    linear-gradient(var(--surface),var(--surface)) padding-box,
    linear-gradient(150deg,var(--cyan) 0%,#7A6BF0 55%,#8B2FE8 100%) border-box;
  color:var(--violet);
}
.promo__icon svg{width:26px;height:26px;stroke-width:2.2}

.promo__title{
  display:block;
  font-size:19px;
  font-weight:800;
  color:var(--ink);
  letter-spacing:-.02em;
  line-height:1.2;
}

.promo__sub{
  display:block;
  font-size:15px;
  font-weight:600;
  color:var(--muted);
  margin-top:3px;
  line-height:1.3;
}

/* ── Explore: searchbar + hero ───────────────────────────────────────── */
.hero{
  position:relative;
  width:100%;              /* sin esto el aspect-ratio deriva el ancho de la
                              altura y desborda el viewport */
  aspect-ratio:16/11;
  min-height:300px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:0 var(--pad) 26px;
  overflow:hidden;
  color:#fff;
  background:
    linear-gradient(180deg,rgba(0,0,0,0) 42%,rgba(0,0,0,.45) 100%),
    linear-gradient(180deg,#1E8FD6 0%,#63C1E6 38%,#E8C79A 72%,#C98F63 100%);
}

.hero__title{
  font-size:40px;
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.03em;
  text-shadow:0 2px 12px rgba(0,0,0,.38);
}

.hero__sub{
  font-size:16px;
  font-weight:500;
  line-height:1.35;
  margin-top:8px;
  max-width:34ch;
  text-shadow:0 1px 8px rgba(0,0,0,.42);
}

.dots{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
}
.dot{
  width:34px;
  height:3px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.42);
  transition:background-color 160ms var(--ease);
}
.dot.is-active{background:#fff}

.searchbar{
  position:absolute;
  top:14px;
  left:var(--pad);
  right:var(--pad);
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  height:54px;
  padding:0 20px;
  border-radius:var(--r-pill);
  background:var(--surface);
  box-shadow:0 6px 20px rgba(13,10,22,.18);
  color:var(--muted);
  font-size:18px;
  font-weight:600;
  letter-spacing:-.01em;
  transition:transform 120ms var(--ease);
}
.searchbar svg{width:24px;height:24px;color:var(--violet);stroke-width:2.4}
.searchbar input{
  flex:1 1 auto;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  font-size:18px;
  font-weight:600;
  color:var(--ink);
}
.searchbar input::placeholder{color:var(--muted);font-weight:600}

/* Envoltorio para colocar la searchbar flotando sobre el hero */
.hero-wrap{position:relative}

/* ── Explore: secciones, tiles, hcards ───────────────────────────────── */
.sec{padding:26px 0 4px}

.sec__title{
  font-size:22px;
  font-weight:800;
  color:var(--ink);
  letter-spacing:-.025em;
  padding:0 var(--pad);
  margin-bottom:14px;
}

.tiles{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  padding:0 var(--pad);
}

.tile{
  position:relative;
  min-height:118px;
  border-radius:12px;
  overflow:hidden;
  padding:16px 16px 14px;
  text-align:left;
  background:linear-gradient(135deg,#CFC1F7 0%,#B9C7F3 100%);
  transition:transform 120ms var(--ease);
}
.tile--a{background:linear-gradient(135deg,#CFC1F7 0%,#B9C7F3 100%)}
.tile--b{background:linear-gradient(135deg,#C4E5F8 0%,#A2D4F1 100%)}
.tile--c{background:linear-gradient(135deg,#FBD9C4 0%,#F6BFA6 100%)}
.tile--d{background:linear-gradient(135deg,#C8EFD8 0%,#A8E2C6 100%)}

.tile__title{
  display:block;
  font-size:18px;
  font-weight:800;
  color:#0D0A16;
  line-height:1.15;
  letter-spacing:-.02em;
  max-width:8ch;
}

/* Desborda por ABAJO, no por la derecha: con right negativo el .tile lo
   recorta en vertical y el cuadrado pierde sus esquinas redondeadas, que es
   justo lo que se ve en la app de referencia (allí queda ~10px de aire a la
   derecha y sólo se corta contra el borde inferior). */
.tile__icon{
  position:absolute;
  right:10px;
  bottom:-14px;
  width:74px;
  height:74px;
  border-radius:18px;
  background:#000;
  color:#fff;
  display:grid;
  place-items:center;
  transform:rotate(-6deg);
}
.tile__icon svg{width:34px;height:34px;stroke-width:2.1;transform:rotate(6deg)}

.hcards{
  display:flex;
  gap:12px;
  padding:0 var(--pad);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-left:var(--pad);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.hcards::-webkit-scrollbar{display:none;width:0;height:0}

.hcard{
  flex:none;
  width:150px;
  scroll-snap-align:start;
  text-align:left;
  transition:transform 120ms var(--ease);
  --hc-art:linear-gradient(160deg,#D2900F,#B87A0B);
  --hc-label:#FBF2C0;
}
.hcard--a{--hc-art:linear-gradient(160deg,#D2900F,#B87A0B);--hc-label:#FBF2C0}
.hcard--b{--hc-art:linear-gradient(160deg,#3C93D6,#2470B8);--hc-label:#C4F4CE}
.hcard--c{--hc-art:linear-gradient(160deg,#E9705A,#D14E3C);--hc-label:#F8E8D9}
.hcard--d{--hc-art:linear-gradient(160deg,#7B57E8,#5B2AE8);--hc-label:#E6DDFC}
.hcard--e{--hc-art:linear-gradient(160deg,#12A096,#0B7C74);--hc-label:#D4F2EC}
.hcard--f{--hc-art:linear-gradient(160deg,#EC6AA6,#D93F86);--hc-label:#FBDDEB}

.hcard__art{
  display:block;
  height:118px;
  border-radius:12px 12px 0 0;
  overflow:hidden;
  background:var(--hc-art);
}
.hcard__art .poster{border-radius:0}

.hcard__label{
  min-height:86px;
  border-radius:0 0 12px 12px;
  background:var(--hc-label);
  padding:12px 12px 14px;
  font-size:22px;
  font-weight:800;
  color:#0D0A16;
  line-height:1.08;
  letter-spacing:-.03em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.hcard__desc{
  margin-top:10px;
  font-size:15px;
  font-weight:500;
  color:var(--muted);
  line-height:1.32;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ── Mapa / botones flotantes ────────────────────────────────────────── */
.fab{
  width:56px;
  height:56px;
  border-radius:var(--r-pill);
  background:var(--violet);
  color:#fff;
  display:grid;
  place-items:center;
  box-shadow:0 8px 22px rgba(91,42,232,.42);
  transition:transform 120ms var(--ease);
}
.fab svg{width:30px;height:30px;stroke-width:2.6}

.pill-btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  height:60px;
  padding:0 26px 0 22px;
  border-radius:var(--r-pill);
  background:var(--surface);
  color:var(--ink);
  font-size:20px;
  font-weight:700;
  letter-spacing:-.02em;
  box-shadow:var(--sh-3);
  transition:transform 120ms var(--ease);
}
.pill-btn svg{width:26px;height:26px}

/* Pill pequeño de acción dentro de una tarjeta. NO es un flotante sobre el
   mapa: hereda de .pill-btn, así que hay que quitarle la sombra de 24px,
   que sobre una banda gris parece un botón despegado. */
.pill-btn--sm{
  height:34px;
  padding:0 14px;
  font-size:14px;
  font-weight:700;
  flex:none;
  box-shadow:var(--sh-1);
}

.round-btn{
  width:44px;
  height:44px;
  border-radius:var(--r-pill);
  background:var(--surface);
  color:var(--ink);
  display:grid;
  place-items:center;
  box-shadow:var(--sh-3);
  transition:transform 120ms var(--ease);
}
.round-btn svg{width:24px;height:24px}

/* Lienzo del mapa: placeholder sin imágenes */
.mapcanvas{
  position:relative;
  min-height:calc(100dvh - var(--tab-h) - var(--safe-b));
  background:
    radial-gradient(120% 80% at 20% 12%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(180deg,#59C0F5 0%,#4FB8F0 55%,#48ADE8 100%);
}
.mapcanvas__ui{
  position:absolute;
  inset:0;
  padding:16px var(--pad) calc(20px + var(--tab-h) + var(--safe-b));
  display:flex;
  flex-direction:column;
  pointer-events:none;
}
.mapcanvas__ui > *{pointer-events:auto}
.mapcanvas__bottom{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* ── Tabbar ──────────────────────────────────────────────────────────── */
.tabbar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:40;
  margin-inline:auto;
  width:100%;
  max-width:480px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  align-items:center;
  height:calc(var(--tab-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  background:var(--tabbar);
}

.tab{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  height:var(--tab-h);
  color:#8E8E99;
  transition:color 140ms var(--ease), transform 120ms var(--ease);
}
.tab svg{width:26px;height:26px}
.tab.is-active{color:#fff}

.tab__label{
  font-size:11px;
  font-weight:600;
  letter-spacing:.01em;
  line-height:1;
}

/* ── Progreso y check ────────────────────────────────────────────────── */
/* El color de la barra ES el estado de la serie, así que no lo escribe el
   markup: lo pone un modificador en `--bar` y de ahí lo leen el relleno y,
   en la parrilla, la pista. Reparto (el mismo criterio que los acentos del
   segmented, para que pestaña y barra digan lo mismo):
     viendo     → --violet   en curso, es la acción del sistema
     al día     → --green    positivo, igual que el corazón de «Want»
     terminada  → --orange   cerrado, el acento de la pestaña «Visto»
     abandonada → --muted    aparcado, no es una alarma
   El rojo NO entra aquí: `--red` es de `.row__badge` y sólo de ahí. */
.progress{
  --bar:var(--violet);
  height:6px;
  border-radius:var(--r-pill);
  background:var(--line);
  overflow:hidden;
}
.progress--aldia{--bar:var(--green)}
.progress--vista{--bar:var(--orange)}
.progress--drop {--bar:var(--muted)}

.progress__bar{
  display:block;          /* suele ser un <span>: sin esto ignora ancho y alto */
  height:100%;
  width:0;
  border-radius:var(--r-pill);
  background:var(--bar,var(--violet));
  transition:width 260ms var(--ease);
}

/* El tick lo dibuja ::after. Si además llega un <svg> dentro del botón,
   hereda el color del texto (--ink) y se ve una marca oscura incluso sin
   marcar: la casilla vacía parece marcada. El sistema no necesita ese SVG. */
.check svg{display:none}

.check{
  position:relative;
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  padding:0;               /* el UA le mete 1px 6px y saca el svg de la caja */
  flex:none;
  border:2px solid #D5D5DD;
  border-radius:50%;
  background:transparent;
  transition:background-color 140ms var(--ease), border-color 140ms var(--ease), transform 120ms var(--ease);
}
.check::after{
  content:"";
  position:absolute;
  left:6px;
  top:4px;
  width:5px;
  height:10px;
  border:2px solid #fff;
  border-top:0;
  border-left:0;
  border-radius:1px;
  transform:rotate(42deg) scale(.6);
  opacity:0;
  transition:opacity 120ms var(--ease), transform 140ms var(--ease);
}
.check.is-on{
  background:var(--violet);
  border-color:var(--violet);
}
.check.is-on::after{opacity:1;transform:rotate(42deg) scale(1)}

/* ── Episodios y temporadas ──────────────────────────────────────────── */
.season{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:16px var(--pad);
  background:var(--band);
  border-radius:12px;
  font-size:17px;
  font-weight:800;
  color:var(--ink);
  letter-spacing:-.02em;
  text-align:left;
  transition:transform 120ms var(--ease);
}
.season__meta{
  margin-left:auto;
  font-size:14px;
  font-weight:600;
  color:var(--muted);
}
.season__chevron{
  width:20px;
  height:20px;
  flex:none;
  color:var(--ink-2);
  stroke-width:2.6;
  transition:transform 200ms var(--ease);
}
.season.is-open .season__chevron{transform:rotate(180deg)}

.ep{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px var(--pad);
  border-bottom:1px solid var(--line);
  transition:transform 120ms var(--ease), background-color 120ms var(--ease);
}
.ep:last-child{border-bottom:0}

.ep__num{
  flex:none;
  min-width:34px;
  font-family:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size:15px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--muted);
  letter-spacing:-.02em;
}

.ep__body{flex:1 1 auto;min-width:0}

.ep__title{
  display:block;
  font-size:16px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-.01em;
  line-height:1.3;
}

.ep__sub{
  display:block;
  font-size:13px;
  font-weight:500;
  color:var(--muted);
  margin-top:2px;
  line-height:1.3;
}

/* ── Botones ─────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  height:52px;
  padding:0 22px;
  border-radius:var(--r-pill);
  font-size:17px;
  font-weight:700;
  letter-spacing:-.015em;
  background:var(--track);
  color:var(--ink);
  transition:transform 120ms var(--ease), filter 120ms var(--ease);
}
.btn svg{width:20px;height:20px}
.btn--violet{background:var(--violet);color:#fff}
.btn--dark{background:#000;color:#fff}
.btn--ghost{background:var(--track);color:var(--ink)}
.btn--auto{width:auto}

/* ── Modal (hoja a pantalla completa) ────────────────────────────────── */
.modal{
  position:fixed;
  inset:0;
  z-index:60;
  margin-inline:auto;
  width:100%;
  max-width:480px;
  background:var(--surface);
  overflow:hidden;
  transform:translateY(100%);
  visibility:hidden;
  transition:transform 300ms var(--ease), visibility 0s linear 300ms;
}
.modal.is-open{
  transform:translateY(0);
  visibility:visible;
  transition:transform 320ms var(--ease), visibility 0s;
}

.modal__back{
  position:absolute;
  top:16px;
  left:16px;
  z-index:5;
  width:40px;
  height:40px;
  border-radius:var(--r-pill);
  display:grid;
  place-items:center;
  background:rgba(13,10,22,.42);
  color:#fff;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:transform 120ms var(--ease);
}
.modal__back svg{width:22px;height:22px;stroke-width:2.6}

/* ── Utilidades ──────────────────────────────────────────────────────── */
.stack-8{display:flex;flex-direction:column;gap:8px}
.stack-12{display:flex;flex-direction:column;gap:12px}
.stack-16{display:flex;flex-direction:column;gap:16px}

.px{padding-left:var(--pad);padding-right:var(--pad)}

.muted{color:var(--muted)}

.trunc{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}

.sr-only{
  position:absolute;
  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;
}

/* Debe ir al final de las utilidades: gana a cualquier display de clase */
[hidden]{display:none}

/* ── Micro-interacciones ─────────────────────────────────────────────── */
.row:active,
.row--plain:active,
.tab:active,
.btn:active,
.chip:active,
.fab:active,
.tile:active,
.hcard:active,
.gcard:active,
.gcard__check:active,
.promo:active,
.pill-btn:active,
.round-btn:active,
.seg__btn:active,
.season:active,
.ep:active,
.check:active,
.searchbar:active,
.hdr__action:active,
.modal__back:active,
.row__action:active,
.filterbar__action:active{
  transform:scale(.97);
}

/* Durante un arrastre nada debe verse «pulsado»: el dedo está moviendo la
   hoja, no tocando la fila que tiene debajo. Va después del bloque de
   arriba para ganarle a igualdad de especificidad. */
.is-dragging :active{transform:none}

/* `will-change` SÓLO mientras se arrastra. Permanente promovía una capa de
   100dvh que contiene el scroller de la lista, y eso le cuesta caro al
   scroll en el móvil. Es una promesa de cambio inminente, no un ajuste
   que se deje puesto. */
.sheet.is-dragging{will-change:transform}

.row:active,
.ep:active{background-color:#FAFAFC}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    transition-duration:1ms;
    animation-duration:1ms;
    animation-iteration-count:1;
    scroll-behavior:auto;
  }
  .row:active,
  .tab:active,
  .btn:active,
  .chip:active,
  .fab:active,
  .tile:active,
  .hcard:active,
  .gcard:active,
  .gcard__check:active,
  .promo:active,
  .pill-btn:active,
  .round-btn:active,
  .seg__btn:active,
  .season:active,
  .ep:active,
  .check:active,
  .searchbar:active,
  .hdr__action:active,
  .modal__back:active,
  .row__action:active,
  .filterbar__action:active{
    transform:none;
  }
  .modal{transition:none}
}