/* COPIA generada por opciones/armar-con-calcula.py desde calcula-impacto/v4/v4.css: no editar aquí */
/* =====================================================================
   CALCULA TU IMPACTO, versión 4 "Tres historias" (29-oct)
   Encabezado centrado, el monto enorme con dígitos que entran y salen
   (Amount Slider de 21st), el riel en pastilla con paradas cada $10.000 y
   tres tarjetas con dos cifras arriba y abajo un mazo de fotos reales que
   se van turnando (Elo One Results). 30-oct, elegida por Camilo con cambios:
   fondo blanco liso (va después del streaming, antes de Iaán), el Dona aquí
   de la portada (shared/donar), el corazón de la perilla que late al avanzar
   y quince fotos distintas, cinco por tarjeta, sin repetir. La tarjeta del
   medio va en rojo accesible (todo su texto en blanco pleno: 4,53:1).
   Disposición por el ancho del contenedor "calc":
     < 600   una columna; la foto va en la esquina, al lado del detalle
             (o abajo, a lo ancho, si la tarjeta es angosta o la letra grande)
     600-899 una columna, tarjetas apaisadas (foto a la derecha)
     >= 900  tres tarjetas en fila, alineadas por subgrid
   ===================================================================== */

.cv4 {
  /* 30-oct (pedido de Camilo): fondo BLANCO liso, sin puntos ni resplandor. En la portada esta sección va
     después del streaming (noche) y antes de Iaán (rojo): noche, blanco, rojo. Esquinas de arriba
     redondeadas como la sección de Iaán, que se apoya igual sobre la anterior */
  --cv4-paso: 7px;                      /* cuánto asoma cada foto del mazo */
  --cv4-th: 28px;                       /* ancho de la perilla */
  --cv4-p: 0;                           /* posición del monto en el riel (0 a 1), la pone el JS */
  --cv4-k: 8.2;                         /* cifras de la tarjeta: % del ancho de su bloque de cifras */
  --cv4-tinta: var(--tg-noche);
  --cv4-suave: rgba(22, 3, 7, 0.74);
  --cv4-tenue: rgba(22, 3, 7, 0.68);
  --cv4-linea: rgba(22, 3, 7, 0.14);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 32px 32px 0 0;
  background: #fff;
  color: var(--cv4-tinta);
  font-family: var(--tg-font);
}
/* sobre blanco el foco va en noche (el visor lo pinta blanco para todo lo demás) */
.cv4 :focus-visible { outline-color: var(--tg-noche); }
/* 4-nov (foco2): el Dona aquí (donar.js) dibuja su foco en el cuerpo: redondeado, noche sobre blanco (--tgd-foco) y girando
   con el remezón, como en el resto de la portada. La regla de arriba (.cv-host :focus-visible) le ponía al <a> un segundo
   anillo, cuadrado y quieto: con el remezón se veían dos anillos separándose */
.cv4 .tgd:focus-visible { outline: none; }
.cv4 :where(h2, h3, p, ul, dl, dd, figure) { margin: 0; }
.cv4 :where(ul) { padding: 0; list-style: none; }

.cv4-in {
  max-width: 1160px;
  margin: 0 auto;
  padding: 36px 16px 32px;
  display: grid;
  gap: 24px;
}

/* ---------- encabezado ---------- */
.cv4-cab {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}
.cv4-rotulo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: calc(14px * var(--a11y-fs)); /* 5-nov: 14 px mínimo (antes 13) */
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(22, 3, 7, 0.82);
}
/* sobre blanco el círculo va en rojo con el corazón blanco (pieza chica: el rojo lleno está permitido) */
.cv4-rotulo-circ,
.cv4-chip-circ {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(28px * var(--a11y-fs));
  height: calc(28px * var(--a11y-fs));
  border-radius: 50%;
  background: var(--tg-rojo-a11y);
  color: var(--tg-blanco);
}
.cv4-rotulo-circ .cv-icon,
.cv4-chip-circ .cv-icon { width: 52%; height: 52%; fill: currentColor; }
.cv4-titulo {
  max-width: 18ch;
  font-size: min(calc(46px * var(--a11y-fs)), calc(5.2cqi + 12px));
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.cv4-lead {
  max-width: 44ch;
  font-size: calc(17px * var(--a11y-fs));
  line-height: 1.45;
  color: var(--cv4-suave);
  text-wrap: balance;
}

/* ---------- el monto ---------- */
.cv4-control {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: grid;
  justify-items: center;
}
.cv4-si {
  font-size: calc(15px * var(--a11y-fs));
  font-weight: 700;
  color: var(--cv4-suave);
}
.cv4-monto {
  --alto: 1.12em;
  display: flex;
  align-items: flex-start;
  margin: 2px 0 10px;
  font-size: min(calc(112px * var(--a11y-fs)), 19cqi);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--tg-noche);
  white-space: nowrap;
}
.cv4-signo {
  font-size: 0.5em;
  line-height: 1;
  margin: 0.36em 0.06em 0 0;
  color: rgba(22, 3, 7, 0.86);
}
.cv4-digitos { display: inline-flex; }
.cv4-col,
.cv4-sep {
  display: block;
  height: var(--alto);
  line-height: var(--alto);
}
/* una columna por dígito: el que sale y el que entra se cruzan dentro de ella, fundidos
   arriba y abajo. Sin dígitos de en medio: nunca se ve un monto que no existe */
.cv4-col {
  position: relative;
  width: 1ch;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
}
.cv4-col[data-oculta] { width: 0; }
.cv4-dig {
  position: absolute;
  inset: 0;
  display: block;
  text-align: center;
  line-height: var(--alto);
}
.cv4-sep { letter-spacing: 0; }
.cv4[data-montando] .cv4-parada { transition: none !important; }

/* ---------- el riel: pastilla con paradas y perilla sólida ---------- */
.cv4-riel {
  position: relative;
  width: 100%;
  height: 52px;
}
.cv4-pista {
  position: absolute;
  inset: 6px 0;
  border-radius: 999px;
  background: rgba(22, 3, 7, 0.04);
  /* borde de la pista a 3:1 contra el blanco (componente de interfaz) */
  box-shadow: inset 0 0 0 1px rgba(22, 3, 7, 0.5);
  overflow: hidden;
  pointer-events: none;
}
/* estela: de la izquierda hasta el centro de la perilla, rojo que crece hacia la perilla */
.cv4-estela {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(6px + var(--cv4-th) / 2 + (100% - 12px - var(--cv4-th)) * var(--cv4-p));
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(225, 45, 57, 0.1) 0%, rgba(225, 45, 57, 0.5) 100%);
}
.cv4-parada {
  position: absolute;
  top: 50%;
  left: calc(6px + var(--cv4-th) / 2 + (100% - 12px - var(--cv4-th)) * var(--p));
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: rgba(22, 3, 7, 0.3);
  transition: background-color 200ms ease;
}
.cv4-parada[data-pasada] { background: var(--tg-rojo-a11y); }

/* la perilla dibujada: una ficha blanca con el corazón rojo, que late cuando el monto avanza (v4.js).
   El input nativo va encima, transparente: el toque y el teclado son los del slider de siempre */
.cv4-perilla {
  position: absolute;
  top: 50%;
  left: calc(6px + var(--cv4-th) / 2 + (100% - 12px - var(--cv4-th)) * var(--cv4-p));
  width: var(--cv4-th);
  height: 44px;
  margin: -22px 0 0 calc(var(--cv4-th) / -2);
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #fff;
  color: var(--tg-rojo-a11y);
  box-shadow: inset 0 0 0 1.5px rgba(22, 3, 7, 0.5), 0 6px 14px rgba(22, 3, 7, 0.22);
  pointer-events: none;
  transition: scale 160ms var(--tg-ease-llegada);
}
.cv4-perilla-cor { width: 18px; height: 18px; fill: currentColor; transform-origin: 50% 55%; }
.cv4-riel:has(.cv4-range:active) .cv4-perilla { scale: 0.96; }
.cv4-riel:has(.cv4-range:focus-visible) .cv4-perilla {
  box-shadow: inset 0 0 0 1.5px rgba(22, 3, 7, 0.5), 0 0 0 3px #fff, 0 0 0 6px var(--tg-noche), 0 6px 14px rgba(22, 3, 7, 0.22);
}

.cv4-range {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 6px;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
/* el foco se dibuja como anillo alrededor de la perilla (abajo); el contorno de todo el input sobra */
.cv4 .cv4-range:focus,
.cv4 .cv4-range:focus-visible { outline: none; }
.cv4-range::-webkit-slider-runnable-track { height: 52px; background: transparent; border: 0; }
.cv4-range::-moz-range-track { height: 52px; background: transparent; border: 0; }
/* el pulgar nativo es transparente y mide lo mismo que la perilla dibujada (el área de toque) */
.cv4-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--cv4-th);
  height: 48px;
  margin-top: 2px;
  border: 0;
  border-radius: 12px;
  background: transparent;
}
.cv4-range::-moz-range-thumb {
  width: var(--cv4-th);
  height: 48px;
  border: 0;
  border-radius: 12px;
  background: transparent;
}

.cv4-extremos {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 6px;
  padding: 0 4px;
  font-size: calc(14px * var(--a11y-fs));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cv4-tenue);
}

/* montos rápidos */
.cv4-rapidos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.cv4-par {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.cv4-rapido {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(22, 3, 7, 0.32);
  border-radius: 999px;
  background: #fff;
  color: var(--tg-noche);
  font-family: inherit;
  font-size: calc(15px * var(--a11y-fs));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.cv4-rapido:hover { border-color: rgba(22, 3, 7, 0.6); }
.cv4-rapido[aria-pressed="true"] {
  background: var(--tg-noche);
  border-color: var(--tg-noche);
  color: #fff;
}

/* ---------- las tres historias ---------- */
.cv4-tarjetas {
  /* contenedor propio, en em: la foto va al lado del detalle solo si cabe con la letra elegida */
  container: cv4l / inline-size;
  font-size: calc(16px * var(--a11y-fs));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.cv4-tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 0;
  border-radius: 24px;
  overflow: hidden;
  /* noche lisa sobre el blanco (sin resplandor): el contraste con la sección hace el trabajo */
  background: var(--tg-noche);
  color: var(--tg-blanco);
  box-shadow: 0 18px 36px rgba(22, 3, 7, 0.18);
}
.cv4-tarjeta--roja {
  background: var(--tg-rojo-a11y);
  box-shadow: 0 20px 40px rgba(225, 45, 57, 0.28);
}

.cv4-t-cab {
  --cv4-ico: calc(40px * var(--a11y-fs));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.cv4-t-nombre {
  font-size: calc(20px * var(--a11y-fs));
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.cv4-t-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--cv4-ico);
  height: var(--cv4-ico);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3);
  color: var(--tg-blanco);
}
.cv4-t-ico .cv-icon { width: 50%; height: 50%; }
/* en la tarjeta roja el ícono va en anillo blanco, no en círculo blanco lleno: un rectángulo rojo
   con un círculo blanco y un ícono rojo es justo la forma de Dona aquí, y la tarjeta no es un botón */
.cv4-tarjeta--roja .cv4-t-ico { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7); }

.cv4-cifras-w {
  container: cv4c / inline-size;
  margin-top: 16px;
  font-size: calc(16px * var(--a11y-fs));   /* base del umbral en em de abajo: crece con la letra */
}
.cv4-cifras {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.cv4-cifra-b { position: relative; min-width: 0; padding-right: 12px; }
.cv4-cifra-b + .cv4-cifra-b {
  padding: 0 0 0 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.24);
}
.cv4-tarjeta--roja .cv4-cifra-b + .cv4-cifra-b { border-left-color: rgba(255, 255, 255, 0.5); }
.cv4-valor {
  font-size: min(calc(30px * var(--a11y-fs)), calc(var(--cv4-k) * 1cqi));
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--tg-ficha);
}
.cv4-mas { font-weight: 800; }
/* bloque de cifras angosto (o letra grande): las dos cifras una bajo la otra, más grandes,
   separadas por una línea horizontal. Así la cifra nunca queda más chica que el nombre */
@container cv4c (max-width: 18em) {
  .cv4-cifras { grid-template-columns: minmax(0, 1fr); }
  .cv4-cifra-b { padding-right: 0; }
  .cv4-cifra-b + .cv4-cifra-b {
    margin-top: 12px;
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.24);
  }
  .cv4-tarjeta--roja .cv4-cifra-b + .cv4-cifra-b { border-top-color: rgba(255, 255, 255, 0.5); }
  .cv4-valor { font-size: min(calc(34px * var(--a11y-fs)), 13.5cqi); }
}
.cv4-bajada {
  margin-top: 4px;
  font-size: calc(14px * var(--a11y-fs));
  font-weight: 600;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.74);
}
.cv4-detalle {
  margin-top: 14px;
  margin-bottom: 16px;
  font-size: calc(15px * var(--a11y-fs));
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
  text-wrap: balance;
}
/* sobre el rojo, todo el texto chico en blanco pleno (AA) */
.cv4-tarjeta--roja :is(.cv4-bajada, .cv4-detalle) { color: var(--tg-blanco); }
.cv4-tarjeta--roja .cv4-valor { color: var(--tg-blanco); }

/* ---------- el mazo: fotos reales apiladas que se van turnando (v4.js) ----------
   La de adelante (data-pos 0) llena la caja; las de atrás asoman por arriba, cada una un paso más
   arriba, más angosta y un poco más oscura. Al turnarse, la de adelante baja y se va ("sale"), pasa
   al fondo sin transición (.cv4-hoja--salto) y las demás avanzan un lugar. --cv4-dx y --cv4-dy dicen
   hacia dónde asoman (arriba en celular y escritorio, a la izquierda en tablet) */
.cv4-foto {
  --cv4-dx: 0px;
  --cv4-dy: calc(var(--cv4-paso) * -1);
  --cv4-origen: 50% 0;
  position: relative;
  margin: auto -20px 0;
  padding-top: calc(var(--cv4-paso) * 3);
}
.cv4-mazo-caja {
  position: relative;
  aspect-ratio: 16 / 9;
}
.cv4-hoja {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--cv4-foco, 50% 50%);
  border-radius: 14px 14px 0 0;
  background: #2a0a10;
  box-shadow: 0 -3px 10px rgba(22, 3, 7, 0.34);
  transform-origin: var(--cv4-origen);
  transition:
    transform 640ms var(--tg-ease-expo),
    filter 640ms ease,
    opacity 420ms ease;
  will-change: transform;
}
.cv4-hoja[data-pos="0"] { z-index: 5; transform: none; filter: none; }
.cv4-hoja[data-pos="1"] { z-index: 4; transform: translate(var(--cv4-dx), var(--cv4-dy)) scale(0.9); filter: brightness(0.82); }
.cv4-hoja[data-pos="2"] { z-index: 3; transform: translate(calc(var(--cv4-dx) * 2), calc(var(--cv4-dy) * 2)) scale(0.79); filter: brightness(0.68); }
.cv4-hoja[data-pos="3"] { z-index: 2; transform: translate(calc(var(--cv4-dx) * 3), calc(var(--cv4-dy) * 3)) scale(0.68); filter: brightness(0.56); }
/* la quinta espera escondida detrás de la tercera */
.cv4-hoja[data-pos="4"] { z-index: 1; transform: translate(calc(var(--cv4-dx) * 3), calc(var(--cv4-dy) * 3)) scale(0.68); filter: brightness(0.56); opacity: 0; }
/* la que se va: baja y se apaga por delante de todas */
.cv4-hoja[data-pos="sale"] {
  z-index: 6;
  transform: translateY(12%) rotate(-2.5deg) scale(1.02);
  opacity: 0;
  transition: transform 640ms var(--tg-ease-expo), opacity 520ms ease;
}
.cv4-hoja--salto { transition: none !important; }

/* ---------- pie ---------- */
.cv4-pie {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}
.cv4-pie-fila {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
}
.cv4-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 16px 6px 8px;
  border-radius: 999px;
  background: rgba(22, 3, 7, 0.04);
  box-shadow: inset 0 0 0 1px rgba(22, 3, 7, 0.14);
  color: var(--tg-noche);
  font-size: calc(15px * var(--a11y-fs));
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  text-wrap: balance;
}
/* el Dona aquí de la portada: a lo ancho en celular, de su propio ancho desde 600 */
.cv4-donar-host { display: flex; width: 100%; }
.cv4-donar-host > .tgd { width: 100%; }
.cv4-pie .cv4-donar { display: flex; width: 100%; }
.cv4-fuente {
  display: grid;
  justify-items: center;
  font-size: calc(14px * var(--a11y-fs));
  line-height: 1.45;
  color: var(--cv4-tenue);
  text-wrap: balance;
}
.cv4-enlace {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  vertical-align: middle;
  color: var(--tg-noche);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  border-radius: 6px;
}
.cv4-enlace:hover { text-decoration-thickness: 2.5px; }

/* =====================================================================
   tamaños por el ancho del contenedor
   ===================================================================== */

/* celular: la foto en la esquina de la tarjeta, al lado del detalle (como en Elo, pegada
   al borde de abajo). Solo si la columna de texto queda cómoda con la letra elegida; si no,
   la foto va abajo a lo ancho (lo de arriba) */
@container calc (max-width: 599.98px) {
  .cv4-rotulo { letter-spacing: 0.09em; }
  @container cv4l (min-width: 19em) {
    .cv4-tarjeta {
      --cv4-paso: 6px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 38%;
      grid-template-areas: "cab cab" "cif cif" "det foto";
      grid-template-rows: auto auto 1fr;
      column-gap: 14px;
      padding: 20px 0 0 20px;
    }
    .cv4-t-cab { grid-area: cab; margin-right: 20px; }
    .cv4-cifras-w { grid-area: cif; margin: 14px 20px 0 0; }
    .cv4-detalle { grid-area: det; align-self: start; margin: 14px 0 20px; }
    .cv4-foto { grid-area: foto; align-self: end; margin: 14px 0 0; }
    .cv4-mazo-caja { aspect-ratio: 1; }
  }
}

@container calc (min-width: 600px) {
  .cv4-in { padding: 64px 32px 56px; gap: 40px; }
  .cv4-lead { font-size: calc(18px * var(--a11y-fs)); }
  .cv4-tarjetas { gap: 16px; }
  .cv4-pie { gap: 16px; }
  .cv4-pie-fila {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px 18px;
  }
  .cv4-pie .cv4-donar { display: inline-flex; width: auto; min-width: 240px; }
  .cv4-donar-host { width: auto; min-width: 260px; }
  .cv4-fuente { display: block; }
  .cv4-rapidos { margin-top: 18px; }
  .cv4-monto { margin-bottom: 14px; }
  .cv4-extremos { margin-top: 8px; }
}

/* tablet: una columna de tarjetas apaisadas, la foto a la derecha y las hojas asomando por la izquierda */
@container calc (min-width: 600px) and (max-width: 899.98px) {
  .cv4-tarjetas { grid-auto-rows: 1fr; }   /* las tres del mismo alto, aunque un detalle tenga una línea más */
  .cv4-tarjeta {
    --cv4-paso: 8px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 24px;
    min-height: 230px;
    padding: 24px 0 24px 26px;
  }
  .cv4-t-cab, .cv4-cifras-w, .cv4-detalle { grid-column: 1; }
  .cv4-cifras-w { margin-top: 20px; }
  .cv4-detalle { align-self: start; margin: 16px 0 0; }
  /* la foto llena el alto que da el texto (no al revés): las tres tarjetas miden lo mismo
     aunque las fotos tengan proporciones distintas */
  /* aquí el mazo asoma hacia la izquierda */
  .cv4-foto {
    --cv4-dx: calc(var(--cv4-paso) * -1);
    --cv4-dy: 0px;
    --cv4-origen: 0 50%;
    grid-column: 2;
    grid-row: 1 / -1;
    margin: -24px 0;
    padding: 0;
  }
  .cv4-mazo-caja {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--cv4-paso) * 3);
    right: 0;
    aspect-ratio: auto;
  }
  .cv4-hoja {
    border-radius: 14px 0 0 14px;
    box-shadow: -3px 0 10px rgba(22, 3, 7, 0.34);
  }
  .cv4-hoja[data-pos="sale"] { transform: translateX(10%) rotate(1.5deg) scale(1.02); }
}

/* escritorio: tres tarjetas en fila; subgrid alinea nombre, cifras, detalle y foto entre las tres */
@container calc (min-width: 900px) {
  .cv4-in { padding: 72px 40px 64px; gap: 44px; }
  .cv4-tarjetas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto auto 1fr;
    column-gap: 18px;
    row-gap: 0;
  }
  .cv4-tarjeta { --cv4-paso: 8px; padding: 24px 24px 0; }
  .cv4-cifras-w { margin-top: 20px; }
  .cv4-detalle { margin: 16px 0 20px; }
  .cv4-foto { margin: 0 -24px; }
  .cv4-mazo-caja { aspect-ratio: 3 / 2; }
  @supports (grid-template-rows: subgrid) {
    .cv4-tarjeta {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
    .cv4-detalle { margin-bottom: 0; }
    .cv4-foto { margin-top: 18px; align-self: end; }
  }
}

/* =====================================================================
   entrada: una vez, al quedar a la vista (solo con movimiento)
   ===================================================================== */
.cv4[data-pre] :is(.cv4-anim, .cv4-tarjeta) { opacity: 0; }
.cv4[data-entra] :is(.cv4-anim, .cv4-tarjeta) {
  animation: cv4-sube 720ms var(--tg-ease-expo) both;
  animation-delay: calc(var(--i, 0) * 80ms);
}
@keyframes cv4-sube {
  from { opacity: 0; transform: translateY(18px); }
}

@media (prefers-reduced-motion: reduce) {
  .cv4[data-pre] :is(.cv4-anim, .cv4-tarjeta) { opacity: 1; }
  .cv4 .cv4-parada { transition: none; }
}
.cv-host[data-quieto] .cv4 .cv4-parada { transition: none; }

/* =====================================================================
   colores forzados: bordes de sistema donde había fondos o sombras
   ===================================================================== */
@media (forced-colors: active) {
  .cv4-tarjeta,
  .cv4-chip,
  .cv4-rapido { border: 1px solid CanvasText; }
  .cv4-t-ico,
  .cv4-rotulo-circ,
  .cv4-chip-circ { border: 1px solid CanvasText; }
  .cv4-cifra-b + .cv4-cifra-b { border-color: CanvasText; }
  .cv4-hoja { border: 1px solid CanvasText; filter: none !important; }
  /* en colores forzados se ve el pulgar nativo (abajo) y no la perilla dibujada */
  .cv4-perilla { display: none; }
  .cv4-pista { border: 1px solid CanvasText; }
  .cv4-estela { display: none; }
  .cv4-parada { forced-color-adjust: none; background: GrayText; }
  .cv4-parada[data-pasada] { background: CanvasText; }
  .cv4-col { -webkit-mask-image: none; mask-image: none; }
  .cv4-range::-webkit-slider-thumb { forced-color-adjust: none; background: ButtonText; border: 2px solid ButtonFace; }
  .cv4-range::-moz-range-thumb { background: ButtonText; border: 2px solid ButtonFace; }
  .cv4 .cv4-range:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
  .cv4-rapido[aria-pressed="true"] { outline: 3px solid Highlight; outline-offset: 1px; }
}