/* ==========================================================================
   Portada y página de producto.
   Alineado a la izquierda, foto grande y rejillas asimétricas: el contenido
   manda sobre la retícula, no al revés.
   ========================================================================== */

/* ═══════════════════════════════════════════════════════════ PORTADA ═══
   La foto del kit ocupa el ancho completo. Encima, el titular; recortado
   sobre la foto, el talón de rifa con el precio y el botón de compra. */
.portada{position:relative;padding-block:clamp(28px,3.6vw,44px) clamp(44px,5.4vw,68px);overflow:hidden}
.portada__rejilla{
  position:relative;display:grid;
  /* El video pesa más que el texto: es lo que engancha. */
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(30px,5vw,64px);align-items:center;
}

/* Ritmo del héroe en un solo lugar, en vez de un margen escrito a mano en
   cada bloque. El grupo de compra recibe más aire que el resto porque es
   lo que tiene que resaltar. */
/* Se iguala también el salto del titular a su párrafo: 18 y 20 no se leen
   como dos escalones, se leen como un descuido. */
.portada__texto > * + *,
.portada h1 + .entrada{margin-top:20px}
.portada__texto > .acciones{margin-top:28px}
.portada__texto > .reloj{margin-top:20px}
.portada__texto > .acciones-nota{margin-top:20px}
@media (max-width:1000px){
  .portada__rejilla{grid-template-columns:minmax(0,1fr);gap:30px}
  /* La foto abre la página, pero acotada: el titular y el precio tienen que
     alcanzar a verse sin desplazarse en un teléfono. */
  .portada__foto{order:-1}
  .portada__foto img{aspect-ratio:auto;height:min(46vh,340px)}
  .portada__foto .clip{--proporcion:16/9}
  .portada__talon{max-width:none}
}

.portada h1{max-width:17ch}
/* El precio va suelto en la portada, no dentro del talón: el talón ya
   aparece tres veces más abajo y aquí robaba altura al video. */
/* La cancha se lee mejor en dos renglones que en uno largo. */
.portada .entrada{max-width:44ch}

.portada__precio{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.portada__precio b{
  font-family:var(--fuente-mono);font-weight:700;
  font-size:clamp(30px,3.8vw,38px);line-height:1;color:var(--amarillo);
  letter-spacing:-0.03em;
}
.portada__precio span{font-size:var(--t-sm);color:rgba(242,244,239,.7)}

/* El talón: recortado sobre la foto en escritorio, debajo en móvil */
.portada__talon{max-width:400px;margin-top:6px}
.portada__foto{position:relative}
.portada__foto img{
  width:100%;aspect-ratio:5/4;object-fit:cover;
  border-radius:var(--r-grande);
}
/* El video de la portada es apaisado; el recorte 5/4 de la foto le
   cortaría media cancha. */
.portada__foto .clip{--proporcion:16/9}

.portada__sello{position:absolute;top:18px;left:18px;z-index:2}

.portada__pie{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:28px;
  font-size:var(--t-sm);color:rgba(242,244,239,.74);
}
.portada__pie span{display:inline-flex;align-items:center;gap:8px}
.portada__pie .ico{stroke:var(--amarillo)}

.reloj{
  display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:8px 15px;border:1.5px solid var(--sello);border-radius:var(--r-pildora);
  color:var(--cal);font-size:var(--t-xs);font-weight:600;
}
.reloj__cifra{font-family:var(--fuente-mono);font-weight:700;font-size:15px;color:var(--amarillo);min-width:48px}

/* ═════════════════════════════════════════════ CONTADOR DE TEMPORADA ═══ */
.meta{background:var(--cancha-noche);color:var(--cal);padding-block:24px}
.meta__fila{display:grid;grid-template-columns:auto 1fr auto;gap:18px 30px;align-items:center}
@media (max-width:820px){.meta__fila{grid-template-columns:minmax(0,1fr);gap:16px}}
.meta__cifra{font-family:var(--fuente-mono);font-weight:700;font-size:clamp(32px,5vw,48px);color:var(--amarillo);line-height:1}
.meta__texto{font-size:var(--t-sm);color:rgba(242,244,239,.74);max-width:32ch}
.meta__barra{height:8px;background:rgba(242,244,239,.14);overflow:hidden;width:100%;min-width:170px}
.meta__lleno{height:100%;width:0;background:var(--amarillo);transition:width 900ms var(--sale)}

/* ═══════════════════════════════════════════════════════════ RIFA ═══ */
.rifa__rejilla{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,5vw,64px);align-items:center}
@media (max-width:900px){.rifa__rejilla{grid-template-columns:minmax(0,1fr)}}
.rifa__lista{display:flex;flex-direction:column;gap:14px;margin-block:24px 28px}
.rifa__lista li{display:flex;align-items:flex-start;gap:13px;font-size:var(--t-sm);line-height:1.55}
.rifa__lista .ico{margin-top:2px;stroke:var(--amarillo)}
.rifa__legal{font-size:11.5px;color:rgba(242,244,239,.5);margin-top:22px;line-height:1.6;max-width:60ch}

/* El premio como un talón gigante ya sellado */
.premio{
  background:var(--papel);color:var(--tinta);
  padding:clamp(30px,4.6vw,46px);
  position:relative;
}
.premio__serial{
  font-family:var(--fuente-mono);font-size:11px;font-weight:700;letter-spacing:.08em;
  color:var(--tinta-media);padding-bottom:14px;margin-bottom:18px;
  border-bottom:2px dashed var(--papel-hondo);
}
.premio__nombre{font-weight:900;font-size:clamp(34px,5.4vw,54px);line-height:.94;letter-spacing:-0.03em}
.premio__detalle{font-size:var(--t-sm);margin-top:10px}
.sobre-oscuro .papel .premio__serial,
.sobre-oscuro .papel .premio__detalle{color:var(--tinta-media)}
.premio__sello{margin-top:22px}


/* ═══════════════════════════════════════════════════════════ VIDEO ═══ */
.videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:38px}
.video{position:relative;overflow:hidden;border-radius:var(--r-medio);background:var(--cancha-noche);aspect-ratio:9/16}
.video video{width:100%;height:100%;object-fit:cover}
.video__etiqueta{
  position:absolute;top:12px;left:12px;z-index:2;
  padding:5px 11px;border-radius:var(--r-pildora);
  background:rgba(6,28,19,.78);color:var(--amarillo);
  font-size:10.5px;font-weight:700;
}

/* ══════════════════════════════════════════════════ FORMAS DE PAGO ═══
   Tres talones en fila: cada forma de pago es literalmente un talón. */
.pagos{display:grid;grid-template-columns:repeat(auto-fit,minmax(266px,1fr));gap:34px 20px;margin-top:52px;align-items:start}
.pago{display:flex;flex-direction:column;height:100%}
.pago--elegida{outline:3px solid var(--cancha-roja);outline-offset:0}
.pago__nombre{font-weight:900;font-size:23px;letter-spacing:-0.025em;margin-bottom:8px}
.pago__desc{font-size:var(--t-sm);color:var(--tinta-media);line-height:1.55;min-height:66px}
.pago__valor{font-family:var(--fuente-mono);font-weight:700;font-size:42px;color:var(--cancha-hondo);line-height:1;margin-block:16px 4px;letter-spacing:-0.03em}
.pago__unidad{font-size:var(--t-xs);color:var(--tinta-media);margin-bottom:20px}
.pago__incluye{margin-bottom:22px;display:flex;flex-direction:column;gap:9px}
.pago__incluye li{display:flex;gap:10px;font-size:var(--t-sm);line-height:1.5}
.pago__incluye .ico{margin-top:2px;stroke:var(--cancha);stroke-width:2.4}
.pago .btn{margin-top:auto}

.medios{display:flex;flex-wrap:wrap;gap:9px;margin-top:38px}
.medios__nota{font-size:var(--t-xs);color:var(--texto-suave);margin-top:16px;max-width:64ch}

/* ══════════════════════════════════════════════════════ CONTENIDO ═══
   Rejilla asimétrica: la foto pesa más que la lista, porque es lo que
   la gente quiere ver. */
.contenido{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4.6vw,56px);align-items:center}
@media (max-width:900px){.contenido{grid-template-columns:minmax(0,1fr)}}

/* Con un video vertical, la columna del texto tiene que pesar más: si no,
   el clip se estira a lo alto y empuja todo lo demás fuera de pantalla. */
.contenido--video{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
@media (max-width:900px){.contenido--video{grid-template-columns:minmax(0,1fr)}}
.contenido__foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-grande)}
.piezas{display:flex;flex-direction:column;margin-top:26px}
.pieza{display:grid;grid-template-columns:auto auto 1fr;gap:16px;align-items:baseline;padding-block:16px;border-bottom:1px solid var(--raya)}
.pieza:last-child{border-bottom:0}
.pieza__n{font-family:var(--fuente-mono);font-weight:700;font-size:29px;color:var(--roja-texto);line-height:1}
.pieza__nombre{font-weight:700;font-size:var(--t-md)}
.pieza__que{font-size:var(--t-sm);color:var(--texto-suave);grid-column:2/-1;margin-top:-6px}

/* ═══════════════════════════════════════════════════════ MEDIDAS ═══ */
.medidas{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4.6vw,56px);align-items:center}
@media (max-width:900px){.medidas{grid-template-columns:minmax(0,1fr)}}
.medidas__foto img{width:100%;border-radius:var(--r-grande)}
.medidas__cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:2px;margin-block:26px;background:var(--raya)}
.medidas__dato{padding:18px 12px;background:var(--fondo)}
.medidas__dato b{display:block;font-family:var(--fuente-mono);font-weight:700;font-size:30px;color:var(--roja-texto);line-height:1}
.medidas__dato span{font-size:11px;color:var(--texto-suave)}
.lista-check{display:flex;flex-direction:column;gap:11px}
.lista-check li{display:flex;gap:11px;font-size:var(--t-sm);line-height:1.55}
.lista-check .ico{margin-top:2px;stroke:var(--cancha);stroke-width:2.4}

/* ═══════════════════════════════════════════════════════ LUGARES ═══ */
/* En columnas, no en rejilla: las fotos tienen proporciones distintas y
   forzarlas a un 3/4 les cortaba media cancha. Así cada una conserva la suya
   y se ve completa. */
.lugares{columns:3;column-gap:14px}
@media (max-width:900px){.lugares{columns:2}}
@media (max-width:520px){.lugares{columns:1}}
.lugar{
  position:relative;break-inside:avoid;
  margin:0 0 14px;overflow:hidden;border-radius:var(--r-medio);
  background:var(--cancha-noche);
}
.lugar img{width:100%;height:auto;display:block}
.lugar__pie{
  position:absolute;inset:auto 0 0 0;padding:32px 15px 15px;
  /* El degradado arranca antes y más opaco: el texto va sobre fotos de
     brillo desconocido y tiene que leerse en todas. */
  background:linear-gradient(to top,rgba(6,28,19,.94) 30%,rgba(6,28,19,.72) 62%,transparent);
  color:var(--cal);
}
.lugar__pie b{display:block;font-weight:900;font-size:17px;letter-spacing:-0.02em}
.lugar__pie span{font-size:11.5px;opacity:.82}

/* ════════════════════════════════════════════════════ BENEFICIOS ═══ */
.motivos{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:2px;margin-top:44px;background:rgba(242,244,239,.14)}
.motivo{padding:26px 22px;background:var(--cancha-hondo)}
.motivo .ico{stroke:var(--amarillo);margin-bottom:14px}
.motivo:nth-child(2) .ico{stroke:var(--cancha-roja-clara)}
.motivo:nth-child(4) .ico{stroke:var(--lima)}
.motivo h4{margin-bottom:7px}
.motivo p{font-size:var(--t-sm);line-height:1.58}

.garantias{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:22px;margin-top:48px}
.garantia{display:flex;gap:14px;align-items:flex-start}
.garantia .ico{stroke:var(--amarillo);margin-top:2px}
.garantia b{display:block;font-weight:900;font-size:var(--t-md);color:var(--amarillo);letter-spacing:-0.02em}
.garantia span{font-size:var(--t-sm);line-height:1.5;color:rgba(242,244,239,.74)}

/* ═════════════════════════════════════════════════════════ PASOS ═══
   Numerados porque el contenido SÍ es una secuencia: 1 pasa antes que 2. */
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:26px;margin-top:var(--tras-intro);counter-reset:paso}
.paso::before{
  counter-increment:paso;content:counter(paso);
  display:block;font-family:var(--fuente-mono);font-weight:700;font-size:38px;
  color:var(--roja-texto);line-height:1;margin-bottom:12px;
  padding-bottom:12px;border-bottom:3px solid var(--roja-texto);
}
.paso h4{margin-bottom:7px}
.paso p{font-size:var(--t-sm);color:var(--texto-suave);line-height:1.58}

/* ═══════════════════════════════════════════════════════ RESEÑAS ═══ */
.resenas{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:20px;margin-top:40px}
.resena{padding:26px 24px;background:var(--superficie);border-top:3px solid var(--cancha)}
/* A 22px y en negrita cuentan como texto grande, que exige 3:1 en vez de
   4.5:1. Así el dorado sigue leyéndose como dorado y no como oliva. */
.resena__estrellas{color:var(--oro-texto);letter-spacing:3px;margin-bottom:12px;font-size:22px;font-weight:700;line-height:1}
.resena__texto{font-size:var(--t-sm);line-height:1.66;color:var(--tinta)}
.resena__quien{display:flex;align-items:center;gap:12px;margin-top:18px;padding-top:15px;border-top:1px solid var(--raya)}
.resena__inicial{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  background:var(--cancha);color:var(--cal);font-weight:700;font-size:13px;
}
.resena__quien b{display:block;font-size:var(--t-sm)}
/* Se acota a los span del bloque de texto: si no, `.resena__quien span`
   (0,0,1,1) le gana a `.resena__inicial` (0,0,1,0) y la inicial queda gris
   sobre verde oscuro, ilegible. */
.resena__quien div span{font-size:11.5px;color:var(--texto-suave)}

/* ═══════════════════════════════════════════════════════════ FAQ ═══ */
.faq{max-width:720px;margin-top:var(--tras-intro);display:flex;flex-direction:column}
.faq__caso{border-bottom:1px solid var(--raya)}
.faq__pregunta{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:19px 0;cursor:pointer;list-style:none;
  font-weight:700;font-size:var(--t-md);letter-spacing:-0.01em;
}
.faq__pregunta::-webkit-details-marker{display:none}
.faq__pregunta::after{
  content:"";width:13px;height:13px;flex-shrink:0;
  border-right:2.4px solid var(--cancha);border-bottom:2.4px solid var(--cancha);
  transform:rotate(45deg) translateY(-3px);
  transition:transform 180ms var(--sale);
}
.faq__caso[open] .faq__pregunta::after{transform:rotate(225deg) translateY(-3px)}
.faq__respuesta{padding-bottom:20px;font-size:var(--t-sm);color:var(--texto-suave);line-height:1.68}

/* ═══════════════════════════════════════════════════════ CIERRE ═══ */
.cierre__rejilla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:clamp(30px,5vw,60px);align-items:center}
@media (max-width:900px){.cierre__rejilla{grid-template-columns:minmax(0,1fr)}}
.cierre__botones{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ═══════════════════════════════════════════════════════ SOCIAL ═══ */
.social{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center}
@media (max-width:640px){.social{grid-template-columns:minmax(0,1fr)}}
.social__qr{width:142px;border:6px solid var(--superficie);box-shadow:var(--sombra-media)}

/* ═══════════════════════════════════════════════════════════ PIE ═══ */
.pie{background:var(--cancha-noche);color:rgba(242,244,239,.66);padding-block:48px 30px;font-size:var(--t-sm)}
.pie__rejilla{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:34px;margin-bottom:32px}
@media (max-width:760px){.pie__rejilla{grid-template-columns:minmax(0,1fr);gap:26px}}
.pie h5{font-size:var(--t-sm);font-weight:700;color:var(--amarillo);margin-bottom:13px}
.pie__links{display:flex;flex-direction:column;gap:9px}
@media (hover:hover) and (pointer:fine){.pie a:hover{color:var(--amarillo)}}
.pie__final{
  border-top:1px solid rgba(242,244,239,.12);padding-top:20px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-size:11.5px;color:rgba(242,244,239,.44);
}

/* ══════════════════════════════════════════════════════════ CATÁLOGO ═══
   La jerarquía está en la estructura, no en la decoración: el producto
   estrella ocupa una banda ancha propia y el resto va en una rejilla
   discreta debajo. Así el catálogo crece sin robarle el foco al kit. */

/* La banda del producto estrella */
.estrella-fila{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(26px,4vw,52px);align-items:center;
}
@media (max-width:900px){.estrella-fila{grid-template-columns:minmax(0,1fr)}}
.estrella-fila__foto img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:var(--r-grande)}
.estrella-fila h2{margin-block:14px 14px}
.estrella-fila__precio{
  font-family:var(--fuente-mono);font-weight:700;
  font-size:clamp(30px,4vw,40px);color:var(--cancha-hondo);
  line-height:1;letter-spacing:-0.03em;margin-block:20px 4px;
}
.estrella-fila__nota{font-size:var(--t-sm);color:var(--texto-suave)}
.estrella-fila__botones{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

/* La rejilla del resto del catálogo */
.rejilla-catalogo{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:24px;margin-top:38px;
}
.tarjeta{
  display:flex;flex-direction:column;
  background:var(--superficie);border-radius:var(--r-grande);
  overflow:hidden;box-shadow:var(--sombra-baja);
}
.tarjeta__foto{position:relative;aspect-ratio:4/3;background:var(--papel);overflow:hidden}
.tarjeta__foto img{width:100%;height:100%;object-fit:cover}
.tarjeta__marca{
  position:absolute;top:12px;left:12px;
  padding:5px 11px;border-radius:var(--r-pildora);
  background:var(--cancha-hondo);color:var(--amarillo);
  font-size:10.5px;font-weight:700;
}
.tarjeta__cuerpo{display:flex;flex-direction:column;flex:1;padding:20px}
.tarjeta__nombre{font-weight:900;font-size:var(--t-lg);letter-spacing:-0.025em;line-height:1.1}
.tarjeta__corto{font-size:var(--t-sm);color:var(--texto-suave);margin-top:6px;line-height:1.5}
.tarjeta__precio{
  font-family:var(--fuente-mono);font-weight:700;font-size:24px;
  color:var(--cancha-hondo);letter-spacing:-0.02em;margin-top:16px;
}
.tarjeta__desde{font-size:var(--t-xs);color:var(--texto-suave);margin-top:2px}
.tarjeta__botones{display:flex;gap:9px;margin-top:18px;padding-top:16px;border-top:1px solid var(--raya)}
.tarjeta__botones .btn{flex:1;padding-inline:14px}
.tarjeta--agotado .tarjeta__foto img{filter:grayscale(1);opacity:.55}

/* Cuando todavía no hay más juguetes.
   Va en blanco, no en papel: esta sección ya tiene fondo manila y un bloque
   del mismo color no se distinguiría del fondo. */
.vitrina-vacia{
  padding:clamp(30px,4.5vw,48px);
  background:var(--superficie);
  border-left:5px solid var(--cancha);
  border-radius:0 var(--r-grande) var(--r-grande) 0;
  box-shadow:var(--sombra-baja);
  display:grid;gap:14px;justify-items:start;margin-top:32px;
  max-width:660px;
}
.vitrina-vacia .ico{stroke:var(--cancha);width:34px;height:34px}
.vitrina-vacia h3{font-size:var(--t-xl)}
.vitrina-vacia p{color:var(--tinta-media);max-width:52ch}

/* El adelanto en la portada: sólo aparece cuando hay algo que mostrar */
.adelanto__cabeza{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-bottom:8px;
}

/* ══════════════════════════════════════════════════ CONVERSACIONES ═══
   Pedidos reales de Facebook Marketplace. No son reseñas —nadie escribió
   para elogiar el producto—, son conversaciones de compra: alguien pregunta,
   alguien paga, alguien recibe. Por eso la sección no dice "reseñas" y las
   frases van textuales, sin retocar. Es lo único que las hace creíbles. */
/* Columnas y no rejilla: los hilos tienen alturas muy distintas y con grid
   la fila entera se estira hasta la tarjeta mas alta, dejando huecos. Con
   columns fluyen y se equilibran solos, igual que .lugares. */
.charlas{columns:3;column-gap:20px;margin-top:var(--tras-intro)}
@media (max-width:980px){.charlas{columns:2}}
@media (max-width:640px){.charlas{columns:1}}
.charla{
  break-inside:avoid;margin:0 0 20px;
  background:var(--superficie);
  border-radius:var(--r-grande);
  overflow:hidden;
  box-shadow:var(--sombra-media);
}
.charla__quien{
  display:flex;align-items:center;gap:11px;
  padding:14px 18px;
  background:var(--cancha-hondo);color:var(--cal);
}
.charla__inicial{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;
  background:var(--cancha-roja);color:var(--cancha-noche);
  font-weight:900;font-size:14px;
}
.charla__nombre{font-weight:700;font-size:var(--t-sm);line-height:1.2}
.charla__donde{
  display:block;font-size:11px;font-weight:600;
  color:rgba(242,244,239,.62);margin-top:2px;
}
/* Franja del aviso: es el mismo encabezado que Marketplace pone sobre cada
   conversación. Lleva el titular real de la publicacion por la que escribieron
   —no el precio: alli figura "$ 100" por como Marketplace abrevia los miles, y
   ponerlo junto a un kit de $100.000 confundiria a cualquiera. */
.charla__aviso{
  display:flex;align-items:center;gap:9px;
  padding:9px 18px;
  background:var(--papel-hondo);
  border-bottom:1px solid rgba(10,46,32,.14);
  font-size:11px;font-weight:700;line-height:1.35;
  color:var(--tinta);
}
.charla__aviso .ico{
  width:15px;height:15px;flex-shrink:0;
  stroke:var(--cancha);
}
.charla__hilo{display:flex;flex-direction:column;gap:9px;padding:18px}
/* Separador de fecha, centrado, igual que en el hilo original. */
.charla__hora{
  align-self:center;
  font-family:var(--fuente-mono);
  font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--texto-suave);
  margin:3px 0;
}
/* Mensajes seguidos de la misma persona: se pegan, como en el chat real. */
.burbuja + .burbuja--suya.burbuja--sigue{border-top-left-radius:5px;margin-top:-4px}
.burbuja + .burbuja--nuestra.burbuja--sigue{border-top-right-radius:5px;margin-top:-4px}

.burbuja{
  max-width:86%;padding:11px 15px;
  font-size:var(--t-sm);line-height:1.45;
  border-radius:18px;
}
/* Del cliente: llega por la izquierda, en papel. */
.burbuja--suya{
  align-self:flex-start;
  background:var(--papel);color:var(--tinta);
  border-bottom-left-radius:5px;
}
/* De la tienda: sale por la derecha, en verde cancha. */
.burbuja--nuestra{
  align-self:flex-end;
  background:var(--cancha);color:var(--cal);
  border-bottom-right-radius:5px;
}
.charla__pie{
  padding:0 18px 16px;
  font-size:var(--t-xs);color:var(--texto-suave);line-height:1.45;
}
.charla__pie b{color:var(--roja-texto)}

.charlas-nota{
  display:flex;gap:11px;align-items:flex-start;
  margin-top:26px;padding:15px 17px;
  background:var(--superficie);border-left:4px solid var(--cancha);
  border-radius:0 var(--r-medio) var(--r-medio) 0;
  font-size:var(--t-sm);line-height:1.55;max-width:62ch;
}
.charlas-nota .ico{stroke:var(--cancha);margin-top:2px;flex-shrink:0}

/* ── Dos precios en vez de tres ────────────────────────────────────────
   Con dos tarjetas la rejilla de auto-fit las dejaba angostas y perdidas
   en pantallas anchas; centradas y con tope de ancho se leen como una
   decision entre dos cosas, que es lo que son. */
.pagos{max-width:860px;margin-inline:auto}

/* "¿Prefieres recogerlo?" no es una tercera opcion, es una nota al pie de
   la primera: misma plata, otra logistica. Por eso va debajo del boton y
   no en una tarjeta aparte. */
.pago__alterna{
  margin-top:13px;text-align:center;
  font-size:var(--t-xs);color:var(--tinta-media);line-height:1.5;
}
.pago__enlace{
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;font-weight:700;color:var(--cancha);
  text-decoration:underline;text-underline-offset:3px;
}
.pago__enlace:hover{color:var(--cancha-hondo)}

.pago__desglose{
  display:flex;gap:13px;align-items:flex-start;
  max-width:62ch;margin:30px auto 0;padding:16px 19px;
  background:var(--superficie);border-left:4px solid var(--cancha-roja);
  border-radius:0 var(--r-medio) var(--r-medio) 0;
  font-size:var(--t-sm);line-height:1.6;
}
.pago__desglose .ico{stroke:var(--cancha);margin-top:2px;flex-shrink:0}