/* =========================================================
   NAIPE MISIONERO — Propuesta 2 "La mesa de truco"
   Concepto: la página es una mesa sobre tierra colorada. Bloques de
   color plano a todo lo ancho, letra de afiche gigante y un "dock"
   fijo abajo con el pedido en vivo. Se compra sin salir de la página.
   ========================================================= */

@font-face {
  font-family: "Big Shoulders Display";
  font-weight: 700 900;
  font-display: swap;
  src: url("../fuentes/big-shoulders.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-weight: 400 700;
  font-display: swap;
  src: url("../fuentes/instrument-sans.woff2") format("woff2");
}

/* Mesa de truco sobre tierra colorada: bloques planos, afiche gigante, dock fijo */
:root {
  --tierra: #b3361b;        /* la tierra colorada: el fondo, no un detalle */
  --tierra-honda: #8c2713;
  --yerba: #173f29;         /* el monte de noche */
  --yerba-clara: #2c6b45;
  --chipa: #f5b83f;        /* SOLO para comprar: ningún otro elemento grande lo usa */
  --chipa-palida: #f1e0b5;  /* la chipa de los paneles, sin competir con el botón */
  --ganancia: #8fd6a8;      /* ahorros y envío gratis sobre fondo oscuro */
  --papel: #fffbf3;
  --papel-2: #f3eadb;
  --tinta: #1d100a;
  --tinta-suave: #5c4a3e;
  --blanco-80: rgba(255, 251, 243, .8);
  --blanco-15: rgba(255, 251, 243, .15);

  --afiche: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
  --texto: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ancho: 1180px;
  --dock: 76px;
  /* Aire: el mismo arriba y abajo de TODAS las secciones, y entre cada título y su contenido */
  --aire: clamp(72px, 10vw, 128px);
  --aire-titulo: clamp(24px, 3.5vw, 40px);
  --curva: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--tierra); color: var(--papel);
  font-family: var(--texto); font-size: 17px; line-height: 1.5;
  padding-bottom: calc(var(--dock) + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--chipa); outline-offset: 3px; }
/* Lo oculto con el atributo hidden queda oculto aunque su clase diga display */
[hidden] { display: none !important; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.envoltura {
  width: 100%; max-width: var(--ancho); margin: 0 auto;
  padding-left: max(18px, env(safe-area-inset-left, 0px));
  padding-right: max(18px, env(safe-area-inset-right, 0px));
}
.afiche {
  font-family: var(--afiche); font-weight: 900; text-transform: uppercase;
  line-height: .86; letter-spacing: -.005em; margin: 0; text-wrap: balance;
}
.etiqueta {
  font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}

/* ---------- Barra superior ---------- */
.barra {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-block: 14px;
}
.barra__logo img { width: 92px; }
.barra__nota {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--blanco-15); border-radius: 999px; padding: 6px 12px;
  font-size: .82rem; font-weight: 600; text-decoration: none;
}
.barra__nota b { color: var(--chipa); }

/* ---------- Portada: tu mano ---------- */
.mano { padding-block: 6px var(--aire); position: relative; }
/* Mensaje que rota arriba del título: los tres mensajes ocupan el mismo lugar */
.rotador {
  display: inline-grid; margin: 0 0 14px; padding: 7px 14px; border-radius: 999px;
  background: var(--blanco-15); font-size: .86rem; font-weight: 600; overflow: hidden;
}
.rotador__item {
  grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  opacity: 0; transform: translateY(110%); transition: opacity .35s, transform .45s var(--curva);
}
.rotador__item.activo { opacity: 1; transform: none; }
.rotador__item.sale { opacity: 0; transform: translateY(-110%); }
.rotador__item svg { width: 16px; height: 16px; flex: 0 0 auto; }
.mano__titulo { font-size: clamp(3.4rem, 17vw, 8.6rem); }

/* Bajada del título: el dato que respalda "Ilustrado a mano" */
.mano__sub {
  font-family: var(--afiche); font-weight: 700; text-transform: uppercase;
  font-size: 1.55rem; line-height: 1; color: var(--blanco-80); margin: 12px 0 0; max-width: 16em; text-wrap: balance;
}
.mano__titulo span { display: block; }

.mesa { margin-top: 22px; display: grid; gap: 14px; }
.mesa__cartas {
  display: flex; justify-content: center; align-items: flex-end; gap: 0;
  height: 190px;
}
.naipe {
  position: relative; width: 112px; aspect-ratio: 687 / 1044; flex: 0 0 auto;
  margin: 0 -8px;
  transition: transform .5s var(--curva);
}
.naipe:nth-child(1) { --giro: -9deg; --baja: 10px; }
.naipe:nth-child(2) { --giro: 0deg;  --baja: 0px; z-index: 1; }
.naipe:nth-child(3) { --giro: 9deg;  --baja: 10px; }
.naipe { transform: translateY(var(--baja)) rotate(var(--giro)); }
/* La carta "se da vuelta" achicándose de costado y mostrando la otra cara.
   Sin giro 3D: Safari (iPhone) mostraba siempre el dorso. */
.naipe__cara, .naipe__dorso {
  position: absolute; inset: 0; border-radius: 9px; overflow: hidden;
  box-shadow: 0 14px 28px rgba(29, 16, 10, .35);
  transition: transform .2s ease-out .2s;
}
.naipe__cara { background: var(--papel); }
.naipe__cara img, .naipe__dorso img { width: 100%; height: 100%; object-fit: cover; }
.naipe__dorso { transform: scaleX(0); transition: transform .2s ease-in; }
/* Mientras se reparte, la carta se levanta y muestra el dorso */
.naipe.boca-abajo { transform: translateY(calc(var(--baja) - 40px)) rotate(var(--giro)); }
.naipe.boca-abajo .naipe__cara { transform: scaleX(0); transition: transform .2s ease-in; }
.naipe.boca-abajo .naipe__dorso { transform: none; transition: transform .2s ease-out .2s; }

.mesa__lectura {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 14px;
  text-align: center; min-height: 3.2em;
}
.envido { font-family: var(--afiche); font-weight: 900; font-size: 2.1rem; line-height: 1; color: var(--papel); }
.mesa__frase { width: 100%; color: var(--blanco-80); font-size: .98rem; margin: 0; }
.mesa__acciones { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 26px; border-radius: 14px; border: 0;
  font-weight: 700; font-size: 1.04rem; text-decoration: none;
  transition: transform .15s var(--curva), background .15s;
}
.boton:active { transform: scale(.97); }
.boton--linea { background: transparent; border: 2px solid var(--blanco-15); color: var(--papel); min-height: 46px; padding: 0 18px; font-size: .95rem; }
.boton--tinta { background: var(--tinta); color: var(--papel); }
.boton--ancho { width: 100%; }

/* Tarjetita blanca de compra en la portada, igual que en ML: precio, "Llega gratis" y botón azul */
.mano__compra { margin-top: 24px; padding: 16px; display: grid; gap: 8px; color: var(--ml-texto); font-family: var(--ml); }
.mano__compra .ml-precio { margin: 0; }

/* ---------- Cinta que corre ---------- */
.cinta { background: var(--tinta); color: var(--papel); overflow: hidden; padding-block: 12px; }
.cinta__pista { display: flex; width: max-content; animation: correr 28s linear infinite; }
.cinta__pista span {
  font-family: var(--afiche); font-weight: 900; text-transform: uppercase; font-size: 1.35rem;
  padding-right: 28px; white-space: nowrap;
}
.cinta__pista span::after { content: "✦"; padding-left: 28px; font-size: .9rem; vertical-align: middle; color: var(--blanco-80); }
@keyframes correr { to { transform: translateX(-50%); } }

/* ---------- Personajes (estilo historias) ---------- */
.personajes { background: var(--yerba); padding-block: var(--aire); }
.personajes__cabeza { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: var(--aire-titulo); }
.personajes__cabeza h2 { font-size: clamp(2.6rem, 12vw, 5.6rem); }
.personajes__cabeza p { margin: 8px 0 0; color: var(--blanco-80); max-width: 32ch; }
.historias {
  display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding-inline: max(18px, env(safe-area-inset-left, 0px)) max(18px, env(safe-area-inset-right, 0px));
  scroll-padding-inline: max(18px, env(safe-area-inset-left, 0px));
  scrollbar-width: none;
}
.historias::-webkit-scrollbar { display: none; }
.historia {
  position: relative; scroll-snap-align: start; overflow: hidden;
  border-radius: 22px; padding: 22px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--fondo, var(--tierra)); color: var(--color, var(--papel));
}
.historia__nombre {
  position: absolute; top: 16px; left: 18px; right: 18px;
  font-family: var(--afiche); font-weight: 900; text-transform: uppercase;
  font-size: 4.6rem; line-height: .82; opacity: .22; pointer-events: none;
}
/* La carta impresa tal cual: blanca, con puntas redondeadas y apenas torcida, como apoyada en la mesa */
/* Carta arriba y texto abajo, uno después del otro: así nunca se pisan */
.historia__figura { display: grid; place-items: center; margin: 44px 0 22px; }
.historia__figura img {
  width: min(78%, 191px); height: auto; aspect-ratio: 658 / 1000;
  background: var(--papel); border-radius: 14px;
  box-shadow: 0 20px 34px rgba(0, 0, 0, .32), 0 2px 6px rgba(0, 0, 0, .18);
  transform: rotate(-3deg);
  transition: transform .4s var(--curva);
}
.historia:nth-child(even) .historia__figura img { transform: rotate(3deg); }
.historia:hover .historia__figura img { transform: rotate(0deg) scale(1.02); }
.historia__texto { position: relative; z-index: 1; }
.historia__texto .etiqueta { opacity: .8; }
.historia__texto h3 { font-family: var(--afiche); font-weight: 900; text-transform: uppercase; font-size: 2.4rem; line-height: .9; margin: 6px 0 8px; }
.historia__texto p { margin: 0; font-size: .98rem; max-width: 34ch; }
.historias__puntos { display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: 18px; }
/* Flechas para mover el carrusel con el mouse (solo en pantallas anchas) */
.historias__flecha {
  display: none; place-items: center; width: 44px; height: 44px; margin: 0 10px;
  border-radius: 50%; border: 2px solid var(--blanco-15); background: transparent; color: var(--papel);
  font-size: 1.3rem; line-height: 1; transition: background .15s, border-color .15s;
}
.historias__flecha:hover { background: var(--blanco-15); border-color: transparent; }
.historias__puntos i { width: 7px; height: 7px; border-radius: 50%; background: var(--blanco-15); transition: background .2s, width .2s; }
.historias__puntos i.activo { background: var(--papel); width: 22px; border-radius: 4px; }

/* ---------- Los palos: mismos paneles y tamaño que "Los del monte", sobre tierra colorada ---------- */
.palos { background: var(--tierra); color: var(--papel); padding-block: var(--aire); }
.palos h2 { font-size: clamp(2.6rem, 12vw, 5.6rem); margin-bottom: var(--aire-titulo); }

/* ---------- El mazo completo ---------- */
.mazo { background: var(--papel-2); color: var(--tinta); padding-block: var(--aire); }
.mazo__cabeza { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: var(--aire-titulo); }
.mazo h2 { font-size: clamp(2.2rem, 10vw, 4.4rem); }
.mazo__cabeza p { margin: 0; font-size: .9rem; color: var(--tinta-suave); text-align: right; }
.mazo__grilla { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.mazo__grilla button { padding: 0; border: 0; background: var(--papel); border-radius: 5px; overflow: hidden; aspect-ratio: 687 / 1044; box-shadow: 0 2px 6px rgba(29,16,10,.14); transition: transform .2s var(--curva); }
.mazo__grilla button:hover { transform: translateY(-3px) rotate(-1.5deg); }
.mazo__grilla img { width: 100%; height: 100%; object-fit: cover; }

/* Carta ampliada */
.lupa { border: 0; padding: 0; background: transparent; max-width: min(86vw, 380px); }
.lupa::backdrop { background: rgba(29, 16, 10, .78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.lupa img { border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.5); background: var(--papel); }
.lupa p { color: var(--papel); text-align: center; font-weight: 600; margin: 12px 0 0; }

/* ---------- Pruebas ---------- */
.pruebas { background: var(--tierra); padding-block: var(--aire); }
.pruebas__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.prueba {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px;
  padding-block: 22px; border-top: 2px solid var(--blanco-15);
}
.prueba:last-child { border-bottom: 2px solid var(--blanco-15); }
.prueba__dato { font-family: var(--afiche); font-weight: 900; font-size: clamp(3.6rem, 18vw, 7rem); line-height: .85; color: var(--papel); font-variant-numeric: tabular-nums; }
.prueba__texto { font-size: 1.05rem; max-width: 40ch; }
.prueba__texto a { font-weight: 700; }
.prensa { margin-top: var(--aire-titulo); display: grid; gap: 10px; }
.prensa a { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--tierra-honda); text-decoration: none; }
.prensa b { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blanco-80); }
.prensa span { font-weight: 600; line-height: 1.3; }

/* ---------- Opiniones ---------- */
.opiniones { background: var(--yerba); padding-block: var(--aire); }
.opiniones h2 { font-size: clamp(2.4rem, 11vw, 5rem); }
.opiniones__nota { margin: 0 0 var(--aire-titulo); max-width: 62ch; color: var(--blanco-80); line-height: 1.5; }
.opiniones__nota a, .opinion footer a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.opiniones__fila {
  display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; margin-top: var(--aire-titulo);
  padding-inline: max(18px, env(safe-area-inset-left, 0px)); scrollbar-width: none;
}
.opiniones__fila::-webkit-scrollbar { display: none; }
.opinion { scroll-snap-align: start; background: var(--yerba-clara); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.opinion q { font-size: 1.12rem; font-weight: 600; line-height: 1.35; quotes: "“" "”"; }
.opinion footer { margin-top: auto; font-size: .86rem; color: var(--blanco-80); }
.opinion .estrellas { color: var(--chipa); letter-spacing: 2px; font-size: .9rem; }

/* ---------- Preguntas y pie ---------- */
.preguntas { background: var(--papel); color: var(--tinta); padding-block: var(--aire); }
.preguntas h2 { font-size: clamp(2.2rem, 10vw, 4rem); margin-bottom: var(--aire-titulo); }
.preguntas details { border-top: 2px solid var(--papel-2); }
.preguntas details:last-of-type { border-bottom: 2px solid var(--papel-2); }
.preguntas summary { list-style: none; cursor: pointer; padding: 16px 40px 16px 0; font-weight: 700; position: relative; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; color: var(--tierra); }
.preguntas details[open] summary::after { content: "−"; }
.preguntas details p { margin: 0 0 16px; color: var(--tinta-suave); }

.pie { background: var(--tinta); color: var(--blanco-80); padding-block: var(--aire) 40px; font-size: .9rem; }
.pie__grilla { display: grid; gap: 22px; }
.pie img { width: 110px; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pie a { color: var(--papel); }
.pie__arrepentimiento { display: inline-block; margin-top: 4px; padding: 8px 14px; border: 1.5px solid var(--blanco-15); border-radius: 10px; text-decoration: none; }
.pie__legal { margin: 28px 0 0; font-size: .8rem; }

/* =========================================================
   EXPERIENCIA DE COMPRA TIPO MERCADO LIBRE
   La compra en Argentina se aprendió en ML: copiamos sus códigos
   (azul para comprar, verde para lo gratis, tarjetas blancas sobre
   gris, letra tipo Proxima Nova) para que comprar acá se sienta conocido.
   El azul se usa SOLO para comprar.
   ========================================================= */
@font-face {
  font-family: "Figtree";
  font-weight: 300 700;
  font-display: swap;
  src: url("../fuentes/figtree.woff2") format("woff2");
}
:root {
  --ml: "Figtree", "Proxima Nova", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ml-azul: #3483fa;
  --ml-azul-hover: #2968c8;
  --ml-azul-claro: rgba(65, 137, 230, .15);
  --ml-verde: #00a650;
  --ml-rojo: #f23d4f;
  --ml-texto: rgba(0, 0, 0, .9);
  --ml-gris: rgba(0, 0, 0, .55);
  --ml-borde: rgba(0, 0, 0, .1);
  --ml-fondo: #ededed;
  --ml-gris-claro: #f5f5f5;
}
.ml-tarjeta { background: #fff; border-radius: 6px; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.ml-texto { font-size: 1rem; line-height: 1.35; margin: 0; }
.ml-gris { color: var(--ml-gris); }
.ml-verde { color: var(--ml-verde); }
.ml-link { color: var(--ml-azul); text-decoration: none; font-size: .875rem; }
.ml-link:hover { color: var(--ml-azul-hover); }

.ml-boton {
  display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: 48px; padding: 0 24px; border: 0; border-radius: 6px;
  font-family: var(--ml); font-size: 1rem; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background .15s;
}
.ml-boton--primario { background: var(--ml-azul); color: #fff; }
.ml-boton--primario:hover { background: var(--ml-azul-hover); }
.ml-boton--secundario { background: var(--ml-azul-claro); color: var(--ml-azul); }
.ml-boton--secundario:hover { background: rgba(65, 137, 230, .22); }
.ml-boton:focus-visible { outline: 3px solid var(--ml-azul); outline-offset: 2px; }

/* ---------- Sección de compra ---------- */
.compra { background: var(--ml-fondo); color: var(--ml-texto); font-family: var(--ml); padding-block: var(--aire); scroll-margin-top: 0; }
.compra h2 { font-size: clamp(2.6rem, 12vw, 5rem); color: var(--tinta); margin-bottom: var(--aire-titulo); }
.compra__grilla { display: grid; gap: 16px; padding: 16px; }

.ml-galeria { display: grid; gap: 10px; }
/* Fotos de Nico con fondo negro: el marco es del mismo negro, así cualquier foto
   (horizontal o vertical) ocupa todo el espacio sin franjas. Se desliza con el dedo. */
.ml-galeria__principal { position: relative; margin: 0; order: -1; background: #0b0b0b; border-radius: 6px; overflow: hidden; }
.ml-galeria__pista {
  display: flex; aspect-ratio: 4 / 3; max-width: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
}
.ml-galeria__pista::-webkit-scrollbar { display: none; }
.ml-galeria__pista img, .ml-galeria__pista video { flex: 0 0 100%; width: 100%; height: 100%; object-fit: contain; scroll-snap-align: center; background: #0b0b0b; }
/* Miniatura del video: la tapa con un "play" encima, como ML */
.ml-galeria__mini-video { position: relative; }
.ml-galeria__mini-video svg {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff;
}
.ml-galeria__contador {
  position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); font-size: .85rem; font-weight: 600; pointer-events: none;
}
.ml-galeria__miniaturas { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.ml-galeria__miniaturas button {
  flex: 0 0 auto; width: 52px; height: 52px; padding: 2px; background: #0b0b0b;
  border: 1px solid var(--ml-borde); border-radius: 4px; cursor: pointer;
}
.ml-galeria__miniaturas button.activa { border: 2px solid var(--ml-azul); padding: 1px; }
.ml-galeria__miniaturas img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }

.ml-caja { display: grid; gap: 10px; align-content: start; }
.ml-sub { margin: 0; font-size: .875rem; color: var(--ml-gris); }
.ml-titulo { margin: 0; font-family: var(--ml); font-size: 1.375rem; font-weight: 600; line-height: 1.25; color: var(--ml-texto); }
.ml-estrellas { font-size: .875rem; color: var(--ml-gris); text-decoration: none; }
.ml-estrellas__iconos { color: var(--ml-azul); letter-spacing: 1px; }
.ml-precio { margin: 6px 0 0; font-size: 2.25rem; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }
.ml-precio__signo { margin-right: 6px; }
/* Cuotas reales de Mercado Pago, como ML: verde si son sin interés, gris si tienen interés */
.ml-cuotas { margin: 6px 0 0; font-size: 1rem; line-height: 1.3; font-variant-numeric: tabular-nums; }
.ml-cuotas.es-verde { color: var(--ml-verde); }
.ml-cuotas small { display: block; font-size: .8rem; color: var(--ml-gris); }
/* Promoción: precio anterior tachado, % OFF y cuenta regresiva a una fecha real (CONFIG.promoHasta) */
.ml-tachado { margin: 4px 0 -6px; font-size: 1rem; color: var(--ml-gris); }
.ml-off-grande { margin-left: 8px; font-size: 1.15rem; font-weight: 400; color: var(--ml-verde); vertical-align: middle; }
/* Insignia de oferta con reloj de arena que se da vuelta (sin fecha a la vista) */
.ml-limitada {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 0;
  padding: 3px 10px 3px 8px; border-radius: 4px; background: rgba(242, 61, 79, .1); color: var(--ml-rojo);
  font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
}
.ml-arena { width: 16px; height: 16px; animation: dar-vuelta 2.4s ease-in-out infinite; }
@keyframes dar-vuelta { 0%, 70% { transform: rotate(0); } 100% { transform: rotate(180deg); } }
/* Contador REAL de despacho, como Amazon: cuánto falta para el corte del día */
.ml-despacho { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 0; font-size: .95rem; line-height: 1.35; }
.ml-despacho svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--ml-verde); margin-top: 1px; }
.ml-despacho b { color: var(--ml-verde); font-weight: 600; font-variant-numeric: tabular-nums; }
.dock__info s, .checkout__total s { font-size: .8rem; font-weight: 400; color: var(--ml-gris); margin-right: 4px; }
.ml-bloque { display: grid; gap: 6px; margin-top: 8px; }
.ml-stock { margin: 0; font-weight: 600; }

.ml-cantidad { position: relative; }
.ml-cantidad__boton {
  width: 100%; min-height: 48px; padding: 0 16px; border: 0; border-radius: 6px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--ml-gris-claro); font-family: var(--ml); font-size: 1rem; text-align: left; cursor: pointer;
}
.ml-cantidad__boton svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--ml-azul); transition: transform .2s; }
.ml-cantidad__boton[aria-expanded="true"] svg { transform: rotate(180deg); }
.ml-lista {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5;
  margin: 0; padding: 6px 0; list-style: none; background: #fff; border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2); max-height: 340px; overflow: auto;
}
.ml-lista button {
  width: 100%; padding: 12px 16px; border: 0; border-left: 2px solid transparent; background: none;
  display: flex; justify-content: space-between; gap: 10px; font-family: var(--ml); font-size: 1rem; text-align: left; cursor: pointer;
}
.ml-lista button:hover { background: var(--ml-gris-claro); }
.ml-lista button[aria-selected="true"] { color: var(--ml-azul); border-left-color: var(--ml-azul); }
.ml-lista em { font-style: normal; font-size: .8rem; font-weight: 600; color: var(--ml-verde); }
.ml-lista__otra { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--ml-borde); }
.ml-lista__otra input { width: 90px; min-height: 40px; border: 1px solid rgba(0,0,0,.25); border-radius: 6px; padding: 0 10px; font-family: var(--ml); font-size: 1rem; }
.ml-lista__otra button { width: auto; border: 0; padding: 0 14px; min-height: 40px; border-radius: 6px; background: var(--ml-azul); color: #fff; font-weight: 600; justify-content: center; }
.ml-precio-total { margin: 2px 0 0; font-size: .95rem; }

.ml-botones { display: grid; gap: 8px; margin-top: 6px; }
.ml-aviso {
  display: flex; align-items: center; gap: 12px; margin-top: 4px; padding: 14px 16px;
  border-radius: 6px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}
.ml-aviso__icono { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ml-verde); color: #fff; }
.ml-aviso__icono svg { width: 22px; height: 22px; }
.ml-aviso p { margin: 0; font-weight: 600; font-size: .95rem; line-height: 1.3; }

.ml-escala { border-top: 1px solid var(--ml-borde); padding-top: 12px; margin-top: 6px; }
.ml-escala__titulo { margin: 0 0 6px; font-weight: 600; }
.ml-escala ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ml-escala li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 6px; font-size: .9rem; }
.ml-escala li b { font-weight: 600; white-space: nowrap; }
.ml-escala li em { font-style: normal; font-size: .78rem; color: var(--ml-verde); margin-left: 4px; }
.ml-escala li.activa { background: rgba(52, 131, 250, .08); color: var(--ml-azul); }

.ml-garantias { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 14px; font-size: .9rem; color: var(--ml-gris); }
.ml-garantias li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; }
.ml-garantias svg { width: 20px; height: 20px; }
.ml-garantias b { color: var(--ml-texto); font-weight: 600; }

/* ---------- Barra fija de abajo (blanca, como ML) ---------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  background: #fff; color: var(--ml-texto); font-family: var(--ml);
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .15);
  transform: translateY(110%); transition: transform .25s ease;
}
/* Como en ML: la barra aparece solo cuando no hay otro botón de compra a la vista */
.dock.esta-visible { transform: none; }
.dock__info { min-width: 0; line-height: 1.2; }
.dock__info b { display: block; font-size: 1.2rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.dock__info span { font-size: .8rem; color: var(--ml-verde); font-weight: 600; }
.dock__info b span { font-size: inherit; color: inherit; font-weight: inherit; }
.dock .ml-boton { width: auto; margin-left: auto; min-height: 46px; padding: 0 20px; }
.dock__wa { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #1f9e55; color: #fff; }
.dock__wa svg { width: 24px; height: 24px; }

/* ---------- Checkout "Finalizá tu compra" (pantalla completa) ---------- */
.checkout {
  border: 0; padding: 0; margin: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  background: var(--ml-fondo); color: var(--ml-texto); font-family: var(--ml); overflow: auto;
}
/* Adentro del checkout el foco del teclado se marca en azul, como en ML */
.checkout :focus-visible, .compra :focus-visible, .dock :focus-visible, .mano__compra :focus-visible { outline-color: var(--ml-azul); }
.checkout::backdrop { background: rgba(0, 0, 0, .4); }
.checkout__cargando {
  position: fixed; inset: 0; z-index: 5; background: #fff;
  display: grid; place-content: center; justify-items: center; gap: 28px; text-align: center;
}
.checkout__cargando p { margin: 0; font-size: 1.5rem; font-weight: 600; line-height: 1.3; }
.ml-ruedita {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid transparent; border-top-color: var(--ml-azul); border-right-color: var(--ml-azul);
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.checkout__barra {
  position: sticky; top: 0; z-index: 2; background: #fff;
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px));
  box-shadow: 0 1px 0 var(--ml-borde);
}
.checkout__barra img { width: 64px; }
.checkout__cerrar { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--ml-gris-claro); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.checkout__grilla {
  display: grid; gap: 14px; max-width: 1180px; margin: 0 auto;
  padding: 18px max(16px, env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.checkout__pasos { display: grid; gap: 14px; min-width: 0; }
.checkout__titulo { margin: 0; font-family: var(--ml); font-size: 1.6rem; font-weight: 600; }
.checkout__producto { display: flex; align-items: center; gap: 12px; }
.checkout__producto img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; background: #fff; }
.checkout__producto p { margin: 0; display: grid; gap: 2px; }
.checkout__seccion { padding: 20px 16px; display: grid; gap: 14px; }
.checkout__seccion h3, .checkout__resumen h3 { margin: 0; font-family: var(--ml); font-size: 1.15rem; font-weight: 600; }
.checkout__campos { display: grid; gap: 12px; }

.ml-pestanas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 8px; background: #f0f0f0; }
.ml-pestanas label { position: relative; cursor: pointer; }
.ml-pestanas input { position: absolute; opacity: 0; }
.ml-pestanas span { display: grid; justify-items: center; gap: 2px; padding: 8px; border-radius: 6px; font-weight: 600; line-height: 1.2; }
.ml-pestanas small { font-size: .85rem; font-weight: 500; color: var(--ml-verde); }
.ml-pestanas small.con-costo { color: var(--ml-gris); }
.ml-pestanas input:checked + span { background: #fff; box-shadow: 0 0 0 2px var(--ml-azul); }
.ml-pestanas input:focus-visible + span { outline: 3px solid var(--ml-azul); outline-offset: 2px; }

.campo { display: grid; gap: 4px; }
.campo label { font-size: .875rem; color: var(--ml-gris); }
.campo input, .campo select {
  width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid rgba(0, 0, 0, .25); border-radius: 6px;
  background: #fff; color: var(--ml-texto); font-family: var(--ml); font-size: 1rem;
}
.campo input:focus, .campo select:focus { outline: none; border-color: var(--ml-azul); box-shadow: 0 0 0 1px var(--ml-azul); }
.campo input[aria-invalid="true"], .campo select[aria-invalid="true"] { border-color: var(--ml-rojo); box-shadow: 0 0 0 1px var(--ml-rojo); }
.dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.checkout__retiro { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--ml-azul); border-radius: 6px; }
.checkout__retiro svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--ml-azul); }
.checkout__retiro p { margin: 0; }

.ml-medios { display: grid; }
.ml-medios label {
  display: grid; grid-template-columns: 22px 44px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--ml-borde); cursor: pointer;
}
.ml-medios label:last-child { border-bottom: 0; }
.ml-medios input { width: 20px; height: 20px; margin: 0; accent-color: var(--ml-azul); }
.ml-medios__icono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.ml-medios__icono svg { width: 22px; height: 22px; }
.ml-medios__icono--mp { background: #009ee3; color: #fff; }
.ml-medios__icono--transf { background: var(--ml-gris-claro); color: #555; border: 1px solid var(--ml-borde); }
.ml-medios label > span:last-child { display: grid; gap: 2px; }
.ml-insignia { justify-self: start; padding: 2px 6px; border-radius: 2px; background: #000; color: #fff; font-style: normal; font-size: .68rem; font-weight: 700; letter-spacing: .02em; }
.ml-off { font-style: normal; font-size: .8rem; font-weight: 600; color: var(--ml-verde); margin-left: 6px; }

.checkout__resumen { padding: 20px 16px; display: grid; gap: 14px; align-self: start; }
.checkout__resumen dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; }
.checkout__resumen dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.checkout__resumen s { color: var(--ml-gris); }
.checkout__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--ml-borde); font-size: 1.15rem; font-weight: 600; }
.checkout__total b { font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.checkout__ahorro { margin: -6px 0 0; text-align: right; font-weight: 600; }
.checkout__error { margin: 0; color: var(--ml-rojo); font-weight: 600; }
.checkout__seguro { display: flex; gap: 8px; align-items: flex-start; font-size: .8rem; }
.checkout__seguro svg { flex: 0 0 auto; width: 18px; height: 18px; }
.checkout__listo { position: fixed; inset: 0; background: #fff; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 24px; text-align: center; }
.checkout__listo .ml-boton { width: auto; }

/* =========================================================
   Pantallas anchas
   ========================================================= */
@media (min-width: 820px) {
  body { font-size: 18px; }
  .mano { padding-block: 24px var(--aire); }
  .mano__grilla { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
  .mesa__cartas { height: 300px; }
  .naipe { width: 170px; margin: 0 -10px; }
  /* Ancho fijo por panel y relleno de media pantalla a cada lado: así cualquier
     panel puede quedar justo en el centro. El JS arranca el carrusel centrado. */
  .historias {
    grid-auto-columns: min(400px, 31vw);
    padding-inline: calc(50% - min(200px, 15.5vw));
    scroll-snap-type: none; scroll-behavior: smooth;
  }
  .historias__flecha { display: grid; }
  .mano__sub { font-size: 2.3rem; }
  .historia__figura img { width: min(78%, 217px); }
  .mazo__grilla { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 10px; }
  .pruebas__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .prueba:nth-last-child(2) { border-bottom: 2px solid var(--blanco-15); }
  .prensa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opiniones__fila { grid-auto-columns: 30%; padding-inline: max(18px, calc((100vw - var(--ancho)) / 2 + 18px)); }
  .pie__grilla { grid-template-columns: 2fr 1fr 1fr; }
  .compra__grilla { grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); gap: 32px; padding: 24px; align-items: start; }
  .ml-galeria { grid-template-columns: 56px minmax(0, 1fr); align-items: start; position: sticky; top: 20px; }
  .ml-galeria__principal { order: 0; }
  /* En compu la columna de miniaturas mide lo mismo que la foto grande y se desliza (como ML); el alto lo fija el JS */
  .ml-galeria__miniaturas { flex-direction: column; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; padding-bottom: 2px; }
  .ml-galeria__miniaturas::-webkit-scrollbar { display: none; }
  .ml-galeria__miniaturas button { flex: 0 0 auto; }
  .ml-galeria__contador { display: none; }
  .ml-caja { border: 1px solid var(--ml-borde); border-radius: 8px; padding: 24px; }
  .checkout__grilla { grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; padding-top: 28px; }
  .checkout__resumen { position: sticky; top: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .cinta__pista { animation: none; flex-wrap: wrap; width: auto; }
}

/* Opiniones: "Ver más" con el resto de los comentarios en chico */
.opiniones__mas { margin-top: var(--aire-titulo); display: grid; gap: 18px; justify-items: start; }
.opiniones__ver-mas { all: unset; cursor: pointer; font-weight: 700; padding: 12px 20px; border-radius: 999px; border: 2px solid var(--blanco-80); color: var(--papel); }
.opiniones__ver-mas:hover { background: var(--yerba-clara); }
.opiniones__ver-mas:focus-visible { outline: 3px solid var(--chipa); outline-offset: 2px; }
.opiniones__nube { display: flex; flex-wrap: wrap; gap: 8px; }
.opiniones__nube span { background: var(--yerba-clara); border-radius: 999px; padding: 7px 12px; font-size: .9rem; line-height: 1.3; }
.opiniones__nube span a { color: var(--blanco-80); text-decoration: none; font-weight: 700; }
.opiniones__nube span a:hover { text-decoration: underline; }
/* Checkout: carrusel chico de comentarios */
.checkout__opiniones { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 2px 0 0; }
.checkout__opiniones::-webkit-scrollbar { display: none; }
.checkout__opiniones article { flex: 0 0 86%; scroll-snap-align: start; background: var(--ml-gris-claro); border-radius: 6px; padding: 10px 12px; font-size: .8rem; line-height: 1.35; }
.checkout__opiniones q { quotes: "“" "”"; }
.checkout__opiniones footer { margin-top: 4px; color: var(--ml-gris); font-size: .75rem; }
.checkout__opiniones footer a { color: inherit; }