/* ==========================================================================
   Componentes.
   El talón de rifa (.talon) es el único gesto llamativo del sitio y sólo
   aparece donde de verdad se gana un número: comprar, el carrito, el pago
   y la confirmación. Lo demás va sobrio a propósito.
   ========================================================================== */

/* ---------- Iconos ----------
   SVG del sprite en línea, nunca emojis: los emojis cambian de dibujo en
   cada sistema operativo y los lectores de pantalla los leen en voz alta. */
.ico{width:20px;height:20px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ico--sm{width:16px;height:16px}
.ico--lg{width:28px;height:28px;stroke-width:1.6}

/* ---------- Botones ---------- */
.btn{
  --bg:var(--amarillo);
  --fg:var(--cancha-hondo);
  --hundido:rgba(10,46,32,.28);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;
  background:var(--bg);color:var(--fg);
  border-radius:var(--r-pildora);
  font-size:var(--t-base);font-weight:700;letter-spacing:-0.005em;
  line-height:1.25;text-align:center;cursor:pointer;
  /* Un borde inferior sólido en vez de una sombra difusa: el botón se
     siente como una tecla y se hunde al presionarlo. */
  box-shadow:0 3px 0 var(--hundido);
  transition:background-color 140ms ease, transform 90ms ease, box-shadow 90ms ease;
}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--hundido)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}

@media (hover:hover) and (pointer:fine){
  .btn--amarillo:hover{background:var(--amarillo-hondo)}
  .btn--verde:hover{background:var(--cancha-claro)}
  .btn--azul:hover{background:var(--azul-claro)}
  .btn--wpp:hover{background:#1EBE5B}
  .btn--linea:hover{background:currentColor}
  .btn--linea:hover span{color:var(--cancha-hondo)}
}

.btn--amarillo{--bg:var(--amarillo);--fg:var(--cancha-hondo)}
.btn--verde{--bg:var(--cancha);--fg:var(--cal);--hundido:rgba(4,24,15,.55)}
.btn--azul{--bg:var(--azul);--fg:var(--cal);--hundido:rgba(4,20,50,.55)}
.btn--wpp{--bg:#25D366;--fg:#06240F;--hundido:rgba(6,36,15,.32)}
.btn--linea{--bg:transparent;--fg:currentColor;box-shadow:inset 0 0 0 2px currentColor}
.btn--linea:active{transform:none;box-shadow:inset 0 0 0 2px currentColor}
.btn--lg{padding:22px 44px;font-size:1.125rem;box-shadow:0 5px 0 var(--hundido)}
.btn--lg:active{transform:translateY(5px);box-shadow:0 0 0 var(--hundido)}
.btn--sm{padding:10px 20px;font-size:var(--t-sm);box-shadow:0 2px 0 var(--hundido)}
.btn--sm:active{transform:translateY(2px)}

/* Bloque de acción: el botón principal, su acompañante y la letra pequeña
   que quita el miedo a hacer clic. */
.acciones{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* Cada garantía es un bloque: al partirse la línea, el icono nunca se
   queda huérfano al final de un renglón. */
.acciones-nota{
  display:flex;align-items:center;gap:8px 20px;flex-wrap:wrap;
  margin-top:16px;font-size:var(--t-xs);line-height:1.5;
  color:var(--texto-suave);
}
.acciones-nota span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.sobre-oscuro .acciones-nota{color:rgba(242,244,239,.68)}
.acciones-nota .ico{stroke:currentColor;opacity:.85}
.btn--ancho{width:100%}

/* ---------- Etiquetas ---------- */
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:var(--r-pildora);
  font-size:var(--t-xs);font-weight:600;
  background:var(--papel);color:var(--tinta);
  border:1px solid var(--papel-hondo);
}
.sobre-oscuro .chip{background:rgba(242,244,239,.09);border-color:rgba(242,244,239,.18);color:rgba(242,244,239,.92)}
.chip--sello{background:var(--sello);border-color:var(--sello);color:#fff;font-weight:700}
.chip--cancha,
.sobre-oscuro .chip--cancha{
  background:linear-gradient(100deg,var(--cancha-roja),var(--cancha-roja-clara));
  border-color:transparent;color:var(--cancha-noche);font-weight:700;
}

/* ══════════════════════════════════════════════════════════════════════
   EL TALÓN DE RIFA
   Papel manila, borde troquelado arriba y abajo, serial estampado.
   ══════════════════════════════════════════════════════════════════════ */
.talon{
  position:relative;
  background:var(--papel);
  color:var(--tinta);
  padding:26px 26px 24px;
  box-shadow:var(--sombra-alta);
}
/* Troquel: la fila de semicírculos mordidos que deja la perforación */
.talon::before,
.talon::after{
  content:"";position:absolute;left:0;right:0;height:11px;
  background-image:radial-gradient(circle at 7px 0, transparent 0 6px, var(--papel) 6px);
  background-size:14px 11px;
  background-repeat:repeat-x;
}
.talon::before{top:-10px;transform:scaleY(-1)}
.talon::after{bottom:-10px}

/* El troquel toma el color del fondo sobre el que se apoya */
.talon--sobre-verde::before,.talon--sobre-verde::after{
  background-image:radial-gradient(circle at 7px 0, transparent 0 6px, var(--papel) 6px);
}

.sobre-oscuro .papel .talon__serial{color:var(--tinta-media)}
.sobre-oscuro .papel .talon__num{color:var(--sello)}
.sobre-oscuro .papel .talon__precio{color:var(--cancha-hondo)}
.sobre-oscuro .papel .talon__nota,
.sobre-oscuro .papel .pago__desc,
.sobre-oscuro .papel .pago__unidad{color:var(--tinta-media)}
.talon a{color:var(--azul)}

.talon__serial{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:14px;margin-bottom:16px;
  border-bottom:2px dashed var(--papel-hondo);
  font-family:var(--fuente-mono);font-size:11px;font-weight:700;
  letter-spacing:.06em;color:var(--tinta-media);
}
.talon__num{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--sello);
}
.talon__precio{
  font-family:var(--fuente-mono);font-weight:700;
  font-size:clamp(30px,4.6vw,42px);line-height:1;
  color:var(--cancha-hondo);letter-spacing:-0.03em;
}
.talon__nota{font-size:var(--t-xs);color:var(--tinta-media);margin-top:6px;max-width:34ch}

/* El sello de caucho: rojo, inclinado, con el borde comido */
.sello-rifa{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 13px;
  border:2px solid var(--sello);border-radius:3px;
  color:var(--sello);
  font-size:10.5px;font-weight:900;letter-spacing:.09em;
  transform:rotate(-3deg);
  opacity:.9;
}

/* ---------- Marquesina ---------- */
.cinta{
  background:var(--cancha-noche);color:var(--amarillo);
  overflow:hidden;padding-block:9px;
  border-bottom:1px solid rgba(255,206,0,.24);
}
.cinta__riel{
  display:flex;width:max-content;
  animation:cintaCorre 42s linear infinite;
  font-size:var(--t-xs);font-weight:700;
}
.cinta__riel span{padding-inline:20px;white-space:nowrap;display:inline-flex;align-items:center;gap:9px}
@keyframes cintaCorre{to{transform:translateX(-50%)}}
@media (hover:hover){.cinta:hover .cinta__riel{animation-play-state:paused}}
@media (prefers-reduced-motion:reduce){.cinta__riel{animation:none}}

/* ---------- Barra superior ---------- */
.barra{
  position:sticky;top:0;z-index:80;
  background:var(--cancha-hondo);
  border-bottom:1px solid rgba(242,244,239,.12);
}
.barra__fila{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:var(--nav-h)}

.marca{display:flex;align-items:center;gap:11px;color:var(--cal);flex-shrink:0}
.marca__escudo{
  width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0;
  border:2px solid var(--amarillo);background:var(--cancha-noche);
}
.marca__escudo img{width:100%;height:100%;object-fit:cover}
.marca__nombre{font-weight:900;font-size:14px;line-height:1.08;letter-spacing:-0.02em}

.barra__links{display:flex;gap:24px;font-size:var(--t-sm);font-weight:600}
.barra__links a{color:rgba(242,244,239,.78);padding-block:6px;border-bottom:2px solid transparent;transition:color 140ms ease,border-color 140ms ease}
@media (hover:hover) and (pointer:fine){
  .barra__links a:hover{color:var(--cal);border-bottom-color:var(--amarillo)}
}
.barra__acciones{display:flex;align-items:center;gap:10px}

.btn-carrito{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  padding:10px 17px;border-radius:var(--r-pildora);
  background:rgba(242,244,239,.1);color:var(--cal);
  font-size:var(--t-sm);font-weight:600;
  transition:background-color 140ms ease;
}
@media (hover:hover) and (pointer:fine){.btn-carrito:hover{background:rgba(242,244,239,.2)}}
.btn-carrito__n{
  position:absolute;top:-6px;right:-6px;min-width:21px;height:21px;padding:0 5px;
  display:grid;place-items:center;border-radius:var(--r-pildora);
  background:var(--sello);color:#fff;
  font-family:var(--fuente-mono);font-size:11px;font-weight:700;
  border:2px solid var(--cancha-hondo);
  transform:scale(0.4);opacity:0;
  transition:transform 180ms var(--sale),opacity 180ms var(--sale);
}
.btn-carrito__n.se-ve{transform:scale(1);opacity:1}

.barra__menu{display:none;color:var(--cal);padding:8px}
@media (max-width:960px){
  .barra__links{
    position:fixed;inset:var(--nav-h) 0 auto 0;
    flex-direction:column;gap:0;
    background:var(--cancha-hondo);
    border-bottom:2px solid var(--amarillo);
    padding:6px 24px 20px;
    transform:translateY(-100%);
    /* `visibility` además de `transform`: el panel cerrado no debe asomar por
       encima de la barra ni quedar en el recorrido del tabulador. */
    visibility:hidden;
    transition:transform 260ms var(--cajon), visibility 260ms;
  }
  .barra__links.abierto{transform:none;visibility:visible}
  .barra__links a{padding:15px 0;border-bottom:1px solid rgba(242,244,239,.1);font-size:var(--t-md)}
  .barra__menu{display:block}
  .barra__acciones .btn{display:none}
}

/* ---------- Carrito lateral ---------- */
.velo{
  position:fixed;inset:0;z-index:110;
  background:rgba(6,28,19,.62);
  opacity:0;visibility:hidden;
  transition:opacity 260ms var(--sale),visibility 260ms;
}
.velo.abierto{opacity:1;visibility:visible}

.carrito{
  position:fixed;top:0;right:0;bottom:0;z-index:120;
  width:min(430px,100%);
  display:flex;flex-direction:column;
  background:var(--cal);
  box-shadow:var(--sombra-alta);
  transform:translateX(100%);
  transition:transform 320ms var(--cajon);
}
.carrito.abierto{transform:none}

.carrito__cabeza{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:19px 22px;
  background:var(--cancha-hondo);color:var(--cal);
}
.carrito__titulo{font-weight:900;font-size:19px;letter-spacing:-0.02em}
.carrito__cerrar{color:var(--cal);padding:7px;border-radius:50%;transition:background-color 140ms ease}
@media (hover:hover) and (pointer:fine){.carrito__cerrar:hover{background:rgba(242,244,239,.16)}}

.carrito__cuerpo{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:20px 22px}

.carrito__vacio{text-align:center;padding:60px 12px;color:var(--texto-suave)}
.carrito__vacio .ico{width:56px;height:56px;margin:0 auto 18px;stroke:var(--tinta-suave);stroke-width:1.2}
.carrito__vacio h4{margin-bottom:8px;color:var(--texto)}
.carrito__vacio p{margin-inline:auto}

.renglon{
  display:grid;grid-template-columns:72px 1fr auto;gap:14px;
  padding:16px 0;border-bottom:1px solid var(--raya);
}
.renglon__foto{width:72px;height:72px;overflow:hidden;background:var(--papel);border-radius:var(--r-chico)}
.renglon__foto img{width:100%;height:100%;object-fit:cover}
.renglon__nombre{font-weight:700;font-size:var(--t-sm);line-height:1.32}
.renglon__detalle{font-size:var(--t-xs);color:var(--texto-suave);margin-block:2px 10px}
.renglon__precio{font-family:var(--fuente-mono);font-weight:700;font-size:var(--t-sm);white-space:nowrap}
.renglon__antes{
  display:block;font-family:var(--fuente-mono);font-size:var(--t-xs);font-weight:500;
  color:var(--tinta-suave);text-decoration:line-through;
}
.renglon__quitar{
  display:block;margin-top:9px;margin-left:auto;
  font-size:var(--t-xs);font-weight:600;color:var(--tinta-suave);
  text-decoration:underline;text-underline-offset:3px;
  transition:color 140ms ease;
}
@media (hover:hover) and (pointer:fine){.renglon__quitar:hover{color:var(--sello)}}

/* Contador de cantidad */
.cantidad{
  display:inline-flex;align-items:center;
  border:1.5px solid var(--raya);border-radius:var(--r-pildora);
  background:var(--superficie);overflow:hidden;
}
.cantidad button{
  width:32px;height:32px;display:grid;place-items:center;
  font-size:17px;font-weight:700;color:var(--tinta-media);
  transition:background-color 120ms ease,color 120ms ease;
}
@media (hover:hover) and (pointer:fine){
  .cantidad button:hover:not(:disabled){background:var(--cancha);color:var(--cal)}
}
.cantidad button:disabled{opacity:.3;cursor:not-allowed}
.cantidad__valor{min-width:32px;text-align:center;font-family:var(--fuente-mono);font-weight:700;font-size:var(--t-sm)}

/* Sugerencia de segundo kit */
.suma-mas{
  margin-top:18px;padding:16px;
  background:var(--papel);border-left:4px solid var(--amarillo);
}
.suma-mas__titulo{font-size:var(--t-sm);font-weight:700;margin-bottom:4px}
.suma-mas__texto{font-size:var(--t-xs);color:var(--texto-suave);margin-bottom:12px}

/* Modalidad de entrega */
.entrega{margin-top:24px}
.entrega__titulo{font-size:var(--t-sm);font-weight:700;margin-bottom:11px}
.entrega__opcion{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 15px;margin-bottom:8px;
  border:1.5px solid var(--raya);border-radius:var(--r-medio);
  background:var(--superficie);cursor:pointer;
  transition:border-color 140ms ease,background-color 140ms ease;
}
.entrega__opcion input{accent-color:var(--cancha);margin-top:3px;width:17px;height:17px;flex-shrink:0}
.entrega__opcion:has(input:checked){border-color:var(--cancha);border-width:2px;background:rgba(23,89,63,.045)}
.entrega__nombre{font-weight:700;font-size:var(--t-sm);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.entrega__desc{font-size:var(--t-xs);color:var(--texto-suave);line-height:1.5;margin-top:3px}
.entrega__costo{margin-left:auto;font-family:var(--fuente-mono);font-weight:700;font-size:var(--t-sm);white-space:nowrap}
.marca-favorita{
  font-size:9.5px;font-weight:700;letter-spacing:.06em;
  background:var(--amarillo);color:var(--cancha-hondo);padding:3px 8px;border-radius:var(--r-pildora);
}

.carrito__pie{
  border-top:2px solid var(--raya);
  background:var(--superficie);
  padding:18px 22px calc(18px + env(safe-area-inset-bottom));
}
.suma{margin-bottom:15px}
.suma__fila{display:flex;justify-content:space-between;gap:12px;font-size:var(--t-sm);color:var(--texto-suave);padding-block:4px}
.suma__fila span:last-child{font-family:var(--fuente-mono);font-weight:700}
.suma__fila--ahorro{color:var(--cancha)}
.suma__fila--total{
  margin-top:10px;padding-top:12px;border-top:2px dashed var(--raya);
  font-size:var(--t-md);font-weight:700;color:var(--texto);align-items:baseline;
}
.suma__fila--total span:last-child{font-size:26px;color:var(--cancha-hondo)}
.carrito__nota{font-size:11.5px;color:var(--texto-suave);text-align:center;margin-top:12px;line-height:1.5;max-width:none}

/* ---------- Barra de compra fija en móvil ---------- */
.compra-fija{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:none;align-items:center;gap:14px;
  padding:11px 18px calc(11px + env(safe-area-inset-bottom));
  background:var(--cal);
  border-top:2px solid var(--cancha-hondo);
  transform:translateY(101%);
  transition:transform 260ms var(--cajon);
}
.compra-fija.se-ve{transform:none}
.compra-fija__precio{line-height:1.15;flex-shrink:0}
.compra-fija__precio b{display:block;font-family:var(--fuente-mono);font-size:21px;color:var(--cancha-hondo)}
.compra-fija__precio small{font-size:10.5px;color:var(--texto-suave)}
.compra-fija .btn{flex:1}
@media (max-width:760px){.compra-fija{display:flex}}

/* ---------- Formularios ---------- */
.campo{margin-bottom:17px}
.campo__nombre{display:block;font-size:var(--t-sm);font-weight:700;margin-bottom:7px}
.campo__nombre .req{color:var(--sello)}
.campo input,.campo select,.campo textarea{
  width:100%;padding:13px 15px;
  border:1.5px solid var(--raya);border-radius:var(--r-medio);
  background:var(--superficie);font-size:var(--t-base);
  transition:border-color 140ms ease,box-shadow 140ms ease;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(11,59,140,.15);
}
.campo input[aria-invalid="true"],.campo select[aria-invalid="true"]{
  border-color:var(--sello);box-shadow:0 0 0 3px rgba(206,17,38,.12);
}
.campo__error{display:none;font-size:var(--t-xs);font-weight:600;color:var(--sello);margin-top:6px}
.campo__error.se-ve{display:block}
.campo__pista{font-size:var(--t-xs);color:var(--texto-suave);margin-top:6px}
.campo-par{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.campo-par{grid-template-columns:minmax(0,1fr);gap:0}}

/* ══════════════════════════════════════════════════════════════ VIDEO ═══
   Un clip no se reproduce solo: muestra su portada y espera a que alguien
   lo pida. Estos videos tienen voz, así que arrancar sin permiso sería
   invasivo — y en datos móviles, caro. `preload="none"` hace que el archivo
   ni siquiera se descargue hasta que se toca el botón. */

.clip{
  --proporcion:16/9;
  position:relative;
  aspect-ratio:var(--proporcion);
  overflow:hidden;
  border-radius:var(--r-grande);
  background:var(--cancha-noche);
  margin:0;
}
.clip--vertical{--proporcion:9/16}

.clip video{width:100%;height:100%;object-fit:cover;display:block}

/* Capa que cubre el video mientras no se ha pedido: oscurece la portada
   para que el botón y la etiqueta se lean sobre cualquier fotograma. */
.clip__tapa{
  position:absolute;inset:0;z-index:2;
  display:grid;place-items:center;
  width:100%;height:100%;padding:0;
  background:linear-gradient(to bottom,rgba(6,28,19,.78),rgba(6,28,19,.16) 46%,rgba(6,28,19,.42));
  border:0;cursor:pointer;color:var(--cal);
  transition:opacity 220ms var(--sale);
}
.clip.sonando .clip__tapa{opacity:0;pointer-events:none}

.clip__boton{
  width:74px;height:74px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--amarillo);color:var(--cancha-hondo);
  box-shadow:0 10px 30px -8px rgba(6,28,19,.7);
  transition:transform 180ms var(--sale),background-color 140ms ease;
}
.clip__boton svg{width:26px;height:26px;fill:currentColor;stroke:none;margin-left:4px}
@media (hover:hover) and (pointer:fine){
  .clip__tapa:hover .clip__boton{transform:scale(1.07);background:var(--amarillo-hondo)}
}
.clip__tapa:active .clip__boton{transform:scale(.96)}

/* Rótulo: qué es el video y cuánto dura, para que nadie le dé play a ciegas.
   Va arriba a propósito: los tres videos traen subtítulos quemados en la
   parte de abajo y ahí se pisarían. */
.clip__rotulo{
  position:absolute;left:0;right:0;top:0;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;text-align:left;
  font-size:var(--t-sm);font-weight:700;line-height:1.35;
}
.clip__duracion{
  font-family:var(--fuente-mono);font-size:var(--t-xs);font-weight:700;
  padding:4px 9px;border-radius:var(--r-pildora);
  background:rgba(6,28,19,.72);color:var(--amarillo);white-space:nowrap;
}

@media (prefers-reduced-motion:reduce){
  .clip__tapa,.clip__boton{transition:none}
}

/* ═══════════════════════════════════════════════ COMPRA RÁPIDA ═══
   El gatillo no es una escasez inventada: es el descuento por cantidad que
   ya existe. Es cierto siempre, no hay que mantenerlo, y en vez de recortar
   el margen lo sube. */
.rapida{
  display:grid;gap:20px;
  padding:clamp(22px,3vw,30px);
  background:var(--superficie);
  border-radius:var(--r-grande);
  box-shadow:var(--sombra-alta);
  max-width:540px;
}
.sobre-oscuro .rapida{color:var(--tinta)}
.sobre-oscuro .rapida p{color:var(--tinta-media)}
.rapida__titulo{
  font-weight:900;font-size:var(--t-lg);letter-spacing:-0.02em;line-height:1.15;
}

/* La escalera: cada peldaño es una cantidad y lo que cuesta cada kit ahí. */
.escalera{display:grid;gap:8px}
.peldano{
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:14px;
  padding:13px 16px;border-radius:var(--r-medio);
  background:var(--papel);
  box-shadow:inset 0 0 0 1.5px transparent;
  cursor:pointer;text-align:left;width:100%;
  transition:box-shadow 140ms ease, background-color 140ms ease;
}
@media (hover:hover) and (pointer:fine){
  .peldano:hover{box-shadow:inset 0 0 0 2px var(--cancha)}
}
.peldano--mejor{
  background:linear-gradient(100deg,var(--cancha-roja),var(--cancha-roja-clara));
  color:var(--cancha-noche);
}
.peldano__cuantos{font-weight:900;font-size:var(--t-md);white-space:nowrap;letter-spacing:-0.01em}
.peldano__precio{font-family:var(--fuente-mono);font-weight:700;font-size:var(--t-md);white-space:nowrap}
.peldano__ahorro{
  font-size:var(--t-xs);font-weight:700;
  padding:4px 10px;border-radius:var(--r-pildora);
  background:var(--cancha-roja);color:var(--cancha-noche);white-space:nowrap;
}
.peldano--mejor .peldano__ahorro{background:var(--cancha-noche);color:var(--amarillo)}
.peldano__vacio{font-size:var(--t-xs);color:var(--tinta-media)}

.rapida__precio{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding-top:16px;border-top:2px dashed var(--raya);
}
.rapida__precio b{font-family:var(--fuente-mono);font-weight:700;font-size:30px;color:var(--cancha-hondo);line-height:1}
.rapida__precio span{font-size:var(--t-xs);color:var(--tinta-media)}

/* El otro gatillo, y no cuesta nada porque ya se ofrece: quien no quiera
   pagar por adelantado, no lo hace. */
.sin-riesgo{
  display:flex;gap:11px;align-items:flex-start;
  padding:14px 16px;border-radius:var(--r-medio);
  background:rgba(23,89,63,.08);
  font-size:var(--t-sm);line-height:1.5;
}
.sin-riesgo .ico{stroke:var(--cancha);margin-top:2px;flex-shrink:0}
.sin-riesgo b{display:block;margin-bottom:2px}

/* En pantallas angostas el ahorro baja a su propia línea: los tres datos
   con nowrap no caben en 350 px y ensanchaban la página entera. */
@media (max-width:420px){
  .peldano{grid-template-columns:auto 1fr;row-gap:8px}
  .peldano__ahorro,.peldano__vacio{grid-column:1/-1;justify-self:start}
}

/* El WhatsApp del héroe deja de ser botón: dos botones grandes compiten y
   ninguno gana. Como enlace acompaña al principal sin disputarle la vista. */
.enlace-wpp{
  display:inline-flex;align-items:center;gap:9px;
  font-size:var(--t-sm);font-weight:700;
  color:#4BE38A;
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:2px;text-decoration-color:rgba(75,227,138,.4);
  transition:text-decoration-color 140ms ease;
}
.enlace-wpp .ico{width:20px;height:20px}
@media (hover:hover) and (pointer:fine){
  .enlace-wpp:hover{text-decoration-color:currentColor}
}