/* ==========================================================================
   X10 Colombia — capa de tienda.
   Estilos de lo nuevo: precios, animaciones de aparición, micro-interacciones,
   carrito, checkout y páginas legales. El CSS heredado de GemPages no se toca.

   Los tokens base (--x10-negro, --x10-ambar, --x10-texto, --x10-linea,
   --x10-duracion, --x10-curva…) viven en sitio.css. Aquí SOLO se añaden los
   que faltan — nunca se redefinen los existentes.
   ========================================================================== */

:root {
  --x10-superficie: #242424;
  --x10-dorado: #fad157;

  --x10-ff-titular: 'Poppins', sans-serif;
  --x10-ff-cuerpo: 'Open Sans', sans-serif;

  --x10-radio: 8px;
  --x10-radio-grande: 14px;

  --x10-duracion-rapida: 150ms;
  --x10-duracion-lenta: 600ms;

  --x10-sombra-elevada: 0 12px 32px rgba(0, 0, 0, 0.45);
}

/* ------------------------------------------------------------------ precios
   Los precios en COP se rellenan desde assets/js/productos.js.
   Mientras el catálogo no tenga precio (precioCOP: null), el "precio antes"
   tachado permanece oculto y el hueco principal muestra el texto estático. */

[data-x10-precio-antes][data-x10-oculto="1"] {
  display: none;
}

/* --------------------------------------------- animaciones de aparición
   La clase x10-revelar SOLO la añade sitio.js (nunca el HTML): sin
   JavaScript no existe y toda la página es visible. Solo propiedades de
   compositor. */

.x10-revelar {
  opacity: 0;
  transform: translateY(24px);
}

.x10-revelar.x10-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--x10-duracion-lenta) var(--x10-curva),
    transform var(--x10-duracion-lenta) var(--x10-curva);
}

/* Animaciones originales de GemPages (fade y slide), con la duración, el
   retardo y la dirección que traía cada elemento en la captura.
   Las clases las añade sitio.js: sin JavaScript nada se oculta. */

.x10-anim-fade,
.x10-anim-slide {
  --x10-anim-seg: 0.9s;
  --x10-anim-retardo: 0s;
  opacity: 0;
}

.x10-anim-slide[data-x10-dir="left"]  { transform: translateX(-50px); }
.x10-anim-slide[data-x10-dir="right"] { transform: translateX(50px); }
.x10-anim-slide[data-x10-dir="up"]    { transform: translateY(50px); }
.x10-anim-slide[data-x10-dir="down"]  { transform: translateY(-50px); }

.x10-anim-fade.x10-visible,
.x10-anim-slide.x10-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--x10-anim-seg) ease-out var(--x10-anim-retardo),
    transform var(--x10-anim-seg) ease-out var(--x10-anim-retardo);
}

/* ------------------------------------------------- micro-interacciones */

/* Botones de compra (.gp-button-atc; la variante agotada .btn-disabled no
   lleva esta clase). Elevación sutil con brillo ámbar, presión al pulsar.
   La clase va repetida a propósito: GemPages define .gp-transition-colors
   con un selector de dos clases y, con menos especificidad, se comía el
   suavizado de la elevación. */
.gp-button-atc.gp-button-atc {
  transition:
    transform var(--x10-duracion) var(--x10-curva),
    box-shadow var(--x10-duracion) var(--x10-curva),
    background-color var(--x10-duracion) var(--x10-curva);
}

.gp-button-atc:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 203, 3, 0.25);
}

.gp-button-atc:active {
  transform: translateY(0) scale(0.98);
}

.gp-button-atc:focus-visible {
  outline: 2px solid var(--x10-ambar);
  outline-offset: 3px;
}

/* Cabecera: gana sombra al despegarse del borde superior (clase via JS). */
.cab {
  transition: box-shadow var(--x10-duracion) var(--x10-curva);
}

.cab--elevada {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

/* -------------------------------------------------- páginas sencillas
   contacto, privacidad, términos, gracias y 404: mismo lenguaje visual
   que el resto del sitio, construido solo con tokens. */

.pag-sencilla {
  background: var(--x10-negro);
  color: var(--x10-texto);
  font-family: var(--x10-ff-cuerpo);
  line-height: 1.7;
}

.pag {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(2.5rem, 2rem + 3vw, 5rem) 1.25rem 5rem;
}

.pag h1 {
  font-family: var(--x10-ff-titular);
  font-weight: 700;
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  line-height: 1.15;
  text-transform: uppercase;
  margin: 0 0 1rem;
}

.pag h2 {
  font-family: var(--x10-ff-titular);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--x10-ambar);
  margin: 2.25rem 0 0.5rem;
}

.pag p, .pag ul { margin: 0 0 1rem; color: var(--x10-texto); }
.pag ul { padding-left: 1.25rem; }

.pag__intro { color: var(--x10-texto-suave); font-size: 1.0625rem; }
.pag__nota { color: var(--x10-texto-suave); font-size: 0.9375rem; }

.pag a { color: var(--x10-ambar); text-underline-offset: 3px; }
.pag a:focus-visible { outline: 2px solid var(--x10-ambar); outline-offset: 3px; }

.lista-404 { list-style: none; padding: 0; }
.lista-404 li { margin-bottom: 0.5rem; }

/* ------------------------------------------------- página de ingredientes */

.pag--ancha { max-width: 860px; }

.ingrediente {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1.5rem;
  align-items: center;
  margin: 2rem 0;
  padding: 1.25rem;
  background: var(--x10-superficie);
  border: 1px solid var(--x10-linea);
  border-radius: var(--x10-radio-grande);
}

.ingrediente img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: var(--x10-radio);
}

.ingrediente h2 { margin-top: 0; }
.ingrediente p { margin-bottom: 0; }

@media (max-width: 560px) {
  .ingrediente { grid-template-columns: 1fr; }
  .ingrediente img { height: 200px; }
}

/* alternar el lado de la foto le da ritmo editorial a la lista */
.ingrediente:nth-child(even) img { order: 2; }

@media (max-width: 560px) {
  .ingrediente:nth-child(even) img { order: 0; }
}

/* ------------------------------------------------------------ formulario */

.formulario { margin-top: 2rem; display: grid; gap: 1.25rem; }

.formulario__trampa { position: absolute; left: -9999px; }

.formulario__campo { display: grid; gap: 0.375rem; }

.formulario__campo label {
  font-family: var(--x10-ff-titular);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

.formulario__campo input,
.formulario__campo textarea {
  background: var(--x10-superficie);
  border: 1px solid var(--x10-linea);
  border-radius: var(--x10-radio);
  color: var(--x10-texto);
  font: inherit;
  padding: 0.75rem 0.875rem;
  transition: border-color var(--x10-duracion-rapida) var(--x10-curva);
}

.formulario__campo input:focus-visible,
.formulario__campo textarea:focus-visible {
  outline: none;
  border-color: var(--x10-ambar);
}

/* ---------------------------------------------------------------- botón */

.boton-x10 {
  display: inline-block;
  background: var(--x10-ambar);
  color: #121212;
  font-family: var(--x10-ff-titular);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 0;
  border-radius: var(--x10-radio);
  padding: 0.875rem 1.75rem;
  cursor: pointer;
  transition:
    transform var(--x10-duracion) var(--x10-curva),
    box-shadow var(--x10-duracion) var(--x10-curva);
}

.boton-x10:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 203, 3, 0.25);
}

.boton-x10:active { transform: translateY(0) scale(0.98); }

.boton-x10:focus-visible {
  outline: 2px solid var(--x10-ambar);
  outline-offset: 3px;
}

/* ------------------------------------------------------------- carrito */

/* en móvil la cabecera vuelve a 3 columnas y la nav ocupa su propia fila:
   el carrito se ancla a la fila 1 para no caer debajo */
@media (max-width: 860px) {
  .cab__carrito {
    grid-column: 3;
    grid-row: 1;
  }
}

.cab__carrito {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: 0;
  border-radius: var(--x10-radio);
  color: var(--x10-texto);
  cursor: pointer;
  transition: color var(--x10-duracion-rapida) var(--x10-curva);
}

.cab__carrito:hover { color: var(--x10-ambar); }

.cab__carrito:focus-visible {
  outline: 2px solid var(--x10-ambar);
  outline-offset: 2px;
}

/* el atributo hidden debe ganar a cualquier display de esta capa y al de
   GemPages. Las flechas del carrusel traen su display en una variable propia
   (style="--d:flex"), y la regla que la lee gana por especificidad: el
   atributo se repite para subir la nuestra por encima. */
.cab__carrito-badge[hidden],
.checkout__paso[hidden],
.checkout__error[hidden],
.carrito__nota[hidden],
.gp-carousel-dot-container[hidden][hidden],
gp-carousel-v3 button[hidden][hidden],
gp-carousel button[hidden][hidden] {
  display: none !important;
}

.cab__carrito-badge {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--x10-ambar);
  color: #121212;
  font-family: var(--x10-ff-titular);
  font-size: 0.6875rem;
  font-weight: 700;
  border-radius: 999px;
}

.carrito-velo {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--x10-duracion) var(--x10-curva);
}

.carrito-velo--visible {
  opacity: 1;
  pointer-events: auto;
}

.carrito {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1001;
  width: min(420px, 100vw);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--x10-negro-2, #1c1c1c);
  color: var(--x10-texto);
  font-family: var(--x10-ff-cuerpo);
  box-shadow: var(--x10-sombra-elevada);
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform var(--x10-duracion) var(--x10-curva),
    visibility 0s linear var(--x10-duracion);
}

.carrito--abierto {
  transform: translateX(0);
  visibility: visible;
  transition:
    transform var(--x10-duracion) var(--x10-curva),
    visibility 0s;
}

.carrito__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid var(--x10-linea);
}

.carrito__cabecera h2 {
  margin: 0;
  font-family: var(--x10-ff-titular);
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.carrito__cerrar {
  background: none;
  border: 0;
  color: var(--x10-texto);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: var(--x10-radio);
}

.carrito__cerrar:hover { color: var(--x10-ambar); }
.carrito__cerrar:focus-visible { outline: 2px solid var(--x10-ambar); }

.carrito__lista {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0.5rem 1.25rem;
}

.carrito__vacio {
  flex: 1;
  display: grid;
  place-content: center;
  margin: 0;
  color: var(--x10-texto-suave);
}

.carrito--con-items .carrito__vacio { display: none; }
.carrito:not(.carrito--con-items) .carrito__lista { display: none; }

.carrito__item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 0.875rem;
  align-items: start;
  padding: 1rem 0;
  border-bottom: 1px solid var(--x10-linea);
}

.carrito__item img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--x10-radio);
  background: var(--x10-superficie);
}

.carrito__item-datos p { margin: 0 0 0.25rem; }

.carrito__item-nombre {
  font-family: var(--x10-ff-titular);
  font-weight: 600;
  font-size: 0.9375rem;
}

.carrito__item-precio {
  color: var(--x10-ambar);
  font-size: 0.875rem;
  font-weight: 600;
}

.carrito__cantidad {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.375rem;
  border: 1px solid var(--x10-linea);
  border-radius: var(--x10-radio);
}

.carrito__cantidad button {
  width: 30px;
  height: 30px;
  background: none;
  border: 0;
  color: var(--x10-texto);
  font-size: 1rem;
  cursor: pointer;
  border-radius: var(--x10-radio);
}

.carrito__cantidad button:hover { color: var(--x10-ambar); }
.carrito__cantidad button:focus-visible { outline: 2px solid var(--x10-ambar); outline-offset: -2px; }

.carrito__cantidad span {
  min-width: 1.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.carrito__quitar {
  background: none;
  border: 0;
  color: var(--x10-texto-suave);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: var(--x10-radio);
}

.carrito__quitar:hover { color: var(--x10-ambar); }
.carrito__quitar:focus-visible { outline: 2px solid var(--x10-ambar); }

.carrito__pie {
  padding: 1.125rem 1.25rem calc(1.125rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--x10-linea);
}

/* Lo que la compra por cantidad rebaja sobre el precio de lista. Va encima
   del total y en ámbar: es la explicación de por qué el total es menor que
   la suma de las líneas. */
.carrito__descuento {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0 0.5rem;
  color: var(--x10-ambar);
  font-size: 0.875rem;
}

.carrito__descuento[hidden] { display: none; }

.carrito__descuento strong {
  font-family: var(--x10-ff-titular);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.carrito__total {
  display: flex;
  justify-content: space-between;
  margin: 0 0 0.875rem;
  font-family: var(--x10-ff-titular);
  font-size: 1.0625rem;
}

.carrito__total strong { color: var(--x10-ambar); }

.carrito__nota {
  margin: 0 0 0.875rem;
  font-size: 0.8125rem;
  color: var(--x10-texto-suave);
}

.carrito__checkout {
  width: 100%;
  text-align: center;
}

.carrito__checkout:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ------------------------------------------------------------ checkout */

.checkout-velo {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--x10-duracion) var(--x10-curva);
}

.checkout-velo--visible {
  opacity: 1;
  pointer-events: auto;
}

/* El CSS heredado de GemPages no fija box-sizing, así que estos componentes
   —que se inyectan por JavaScript y no vienen del constructor— heredaban
   content-box: `width: calc(100vw - 2rem)` acababa midiendo 50 px más por el
   padding y el borde, y el modal se salía de la pantalla en el móvil.
   Se acota a nuestros componentes: tocar `*` reventaría el layout heredado. */
.checkout,
.checkout *,
.carrito,
.carrito * {
  box-sizing: border-box;
}

.checkout {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1101;
  width: min(520px, calc(100vw - 2rem));
  max-height: min(88dvh, 720px);
  overflow-y: auto;
  background: var(--x10-negro-2, #1c1c1c);
  color: var(--x10-texto);
  font-family: var(--x10-ff-cuerpo);
  border: 1px solid var(--x10-linea);
  border-radius: var(--x10-radio-grande);
  box-shadow: var(--x10-sombra-elevada);
  padding: 1.5rem;
  transform: translate(-50%, -46%) scale(0.97);
  opacity: 0;
  visibility: hidden;
  transition:
    transform var(--x10-duracion) var(--x10-curva),
    opacity var(--x10-duracion) var(--x10-curva),
    visibility 0s linear var(--x10-duracion);
}

.checkout--abierto {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  visibility: visible;
  transition:
    transform var(--x10-duracion) var(--x10-curva),
    opacity var(--x10-duracion) var(--x10-curva),
    visibility 0s;
}

.checkout__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.checkout__cabecera h2 {
  margin: 0;
  font-family: var(--x10-ff-titular);
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.checkout__cerrar {
  background: none;
  border: 0;
  color: var(--x10-texto);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: var(--x10-radio);
}

.checkout__cerrar:hover { color: var(--x10-ambar); }
.checkout__cerrar:focus-visible { outline: 2px solid var(--x10-ambar); }

.checkout__intro {
  margin: 0 0 1.25rem;
  color: var(--x10-texto-suave);
  font-size: 0.9375rem;
}

.checkout__datos { display: grid; gap: 1rem; }

.checkout__fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 480px) {
  .checkout__fila { grid-template-columns: 1fr; }
}

.checkout__continuar { margin-top: 0.5rem; }

.checkout__resumen {
  margin: 0 0 1.25rem;
  padding: 0.875rem 1rem;
  background: var(--x10-superficie);
  border-radius: var(--x10-radio);
  font-size: 0.9375rem;
}

/* Flete por cobrar. No es una nota al pie: es información de precio que el
   comprador tiene que leer antes de elegir cómo paga, así que va pegada al
   resumen y con contraste suficiente para leerse, no en gris de relleno. */
.checkout__envio {
  margin: -0.75rem 0 1.25rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--x10-ambar);
  background: var(--x10-superficie);
  border-radius: 0 var(--x10-radio) var(--x10-radio) 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Campo de código de descuento. Va entre el resumen y los métodos de pago:
   después de ver el total y antes de decidir cómo paga, que es cuando el
   cliente se acuerda de que tenía un código. */
.checkout__cupon { margin: 0 0 1.25rem; }

.checkout__cupon label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  color: var(--x10-texto);
}

.checkout__cupon-fila { display: flex; gap: 0.5rem; }

.checkout__cupon-fila input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--x10-linea);
  border-radius: var(--x10-radio);
  background: var(--x10-superficie);
  color: inherit;
  font: inherit;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.checkout__cupon-fila input:focus-visible {
  outline: 2px solid var(--x10-ambar);
  outline-offset: 2px;
}

.checkout__cupon-aplicar {
  flex: 0 0 auto;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--x10-linea);
  border-radius: var(--x10-radio);
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.checkout__cupon-aplicar:hover { border-color: var(--x10-ambar); }

.checkout__cupon-aplicar:focus-visible {
  outline: 2px solid var(--x10-ambar);
  outline-offset: 2px;
}

.checkout__cupon-aviso {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--x10-texto);
}

.checkout__metodos { display: grid; gap: 0.75rem; }

.checkout__metodo {
  display: grid;
  gap: 0.25rem;
  text-align: left;
  background: var(--x10-superficie);
  border: 1px solid var(--x10-linea);
  border-radius: var(--x10-radio);
  color: var(--x10-texto);
  font: inherit;
  padding: 0.875rem 1rem;
  cursor: pointer;
  transition:
    border-color var(--x10-duracion-rapida) var(--x10-curva),
    transform var(--x10-duracion-rapida) var(--x10-curva);
}

.checkout__metodo:hover {
  border-color: var(--x10-ambar);
  transform: translateY(-1px);
}

.checkout__metodo:focus-visible {
  outline: 2px solid var(--x10-ambar);
  outline-offset: 2px;
}

.checkout__metodo:disabled { opacity: 0.55; cursor: wait; }

.checkout__metodo strong {
  font-family: var(--x10-ff-titular);
  font-size: 1rem;
}

.checkout__metodo span {
  color: var(--x10-texto-suave);
  font-size: 0.8125rem;
}

.checkout__metodo--cargando strong::after {
  content: ' …';
}

/* contraentrega: la opción destacada — es la que más convierte en Colombia */
.checkout__metodo--cod {
  border-color: var(--x10-ambar);
}

.checkout__metodo--cod strong::after {
  content: ' · Recomendado';
  color: var(--x10-ambar);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.checkout__metodo--apagado {
  opacity: 0.45;
  cursor: not-allowed;
}

.checkout__metodo--apagado:hover {
  border-color: var(--x10-linea);
  transform: none;
}

.checkout__volver {
  margin-top: 1.25rem;
  background: none;
  border: 0;
  color: var(--x10-texto-suave);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0.25rem 0;
}

.checkout__volver:hover { color: var(--x10-ambar); }
.checkout__volver:focus-visible { outline: 2px solid var(--x10-ambar); }

/* ------------------------------------------------- transferencia por Nequi
   Los datos de la cuenta son para copiar a mano en la app del banco: la
   cifra va en tabular-nums para que no baile, y el numero se puede
   seleccionar de un toque. */

.checkout__datos-pago {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1rem;
  margin: 0 0 1.25rem;
  padding: 1rem;
  background: var(--x10-superficie);
  border: 1px solid var(--x10-linea);
  border-radius: var(--x10-radio);
}

.checkout__datos-pago dt {
  color: var(--x10-texto-suave);
  font-size: 0.8125rem;
  align-self: center;
}

.checkout__datos-pago dd {
  margin: 0;
  font-family: var(--x10-ff-titular);
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  user-select: all;
}

.checkout__nequi-monto { color: var(--x10-ambar); }

.checkout__nequi-ref {
  font-size: 0.875rem !important;
  color: var(--x10-texto-suave);
}

.checkout__aviso {
  margin: 0 0 1.25rem;
  font-size: 0.8125rem;
  color: var(--x10-texto-suave);
  line-height: 1.5;
}

.checkout__volver-pago {
  margin-top: 1.25rem;
  background: none;
  border: 0;
  color: var(--x10-texto-suave);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0.25rem 0;
}

.checkout__volver-pago:hover { color: var(--x10-ambar); }
.checkout__volver-pago:focus-visible { outline: 2px solid var(--x10-ambar); }

.checkout__error {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  background: rgba(90, 0, 0, 0.5);
  border: 1px solid var(--x10-granate);
  border-radius: var(--x10-radio);
  font-size: 0.875rem;
}

/* El markup heredado deja piezas que sobresalen por la derecha y permitían
   arrastrar la página de lado en el móvil. `clip` lo recorta sin crear un
   contenedor de scroll, así que la cabecera pegajosa sigue funcionando.
   `hidden` queda de reserva para navegadores sin soporte de `clip`. */
html,
body {
  overflow-x: hidden;
  overflow-x: clip;
}

/* La cabecera es sticky: los destinos de ancla dejan hueco para no quedar
   ocultos bajo ella al saltar. */
.x10-ancla {
  scroll-margin-top: calc(var(--x10-cab-alto) + 12px);
}

/* ---------------------------------------- titulares de las tarjetas de opinión
   El export los deja en 46px en tableta y 32px en móvil, dentro de tarjetas de
   ~335px: las palabras se partían por la mitad. Se acotan al ancho real de la
   tarjeta; en escritorio se respeta el tamaño original. */

@media (max-width: 1024px) {
  [data-x10-porvista="2,1,1"] h2 { font-size: 26px !important; line-height: 1.2 !important; }
}

/* ------------------------------------------- elementos por vista del carrusel
   Esto lo fijaba sitio.js al arrancar, y como llegaba después del primer
   pintado el ancho de las diapositivas cambiaba en caliente: 0.45 de CLS en
   móvil. Declarado en CSS se aplica antes de pintar y no hay salto.
   Los valores salen de data-x10-porvista="escritorio,tableta,móvil". */

[data-x10-porvista="1,1,1"] .gem-slider-wrapper,
[data-x10-porvista="1,1,1"] .gem-slider { --x10-porvista: 1; }
[data-x10-porvista="2,2,2"] .gem-slider-wrapper,
[data-x10-porvista="2,2,2"] .gem-slider { --x10-porvista: 2; }
[data-x10-porvista="2,1,1"] .gem-slider-wrapper,
[data-x10-porvista="2,1,1"] .gem-slider { --x10-porvista: 2; }
[data-x10-porvista="3,1,1"] .gem-slider-wrapper,
[data-x10-porvista="3,1,1"] .gem-slider { --x10-porvista: 3; }
[data-x10-porvista="3,2,1"] .gem-slider-wrapper,
[data-x10-porvista="3,2,1"] .gem-slider { --x10-porvista: 3; }
[data-x10-porvista="4,2,2"] .gem-slider-wrapper,
[data-x10-porvista="4,2,2"] .gem-slider { --x10-porvista: 4; }
[data-x10-porvista="4,3,2"] .gem-slider-wrapper,
[data-x10-porvista="4,3,2"] .gem-slider { --x10-porvista: 4; }

@media (max-width: 1024px) {
[data-x10-porvista="1,1,1"] .gem-slider-wrapper,
[data-x10-porvista="1,1,1"] .gem-slider { --x10-porvista: 1; }
[data-x10-porvista="2,2,2"] .gem-slider-wrapper,
[data-x10-porvista="2,2,2"] .gem-slider { --x10-porvista: 2; }
[data-x10-porvista="2,1,1"] .gem-slider-wrapper,
[data-x10-porvista="2,1,1"] .gem-slider { --x10-porvista: 1; }
[data-x10-porvista="3,1,1"] .gem-slider-wrapper,
[data-x10-porvista="3,1,1"] .gem-slider { --x10-porvista: 1; }
[data-x10-porvista="3,2,1"] .gem-slider-wrapper,
[data-x10-porvista="3,2,1"] .gem-slider { --x10-porvista: 2; }
[data-x10-porvista="4,2,2"] .gem-slider-wrapper,
[data-x10-porvista="4,2,2"] .gem-slider { --x10-porvista: 2; }
[data-x10-porvista="4,3,2"] .gem-slider-wrapper,
[data-x10-porvista="4,3,2"] .gem-slider { --x10-porvista: 3; }
}

@media (max-width: 767px) {
[data-x10-porvista="1,1,1"] .gem-slider-wrapper,
[data-x10-porvista="1,1,1"] .gem-slider { --x10-porvista: 1; }
[data-x10-porvista="2,2,2"] .gem-slider-wrapper,
[data-x10-porvista="2,2,2"] .gem-slider { --x10-porvista: 2; }
[data-x10-porvista="2,1,1"] .gem-slider-wrapper,
[data-x10-porvista="2,1,1"] .gem-slider { --x10-porvista: 1; }
[data-x10-porvista="3,1,1"] .gem-slider-wrapper,
[data-x10-porvista="3,1,1"] .gem-slider { --x10-porvista: 1; }
[data-x10-porvista="3,2,1"] .gem-slider-wrapper,
[data-x10-porvista="3,2,1"] .gem-slider { --x10-porvista: 1; }
[data-x10-porvista="4,2,2"] .gem-slider-wrapper,
[data-x10-porvista="4,2,2"] .gem-slider { --x10-porvista: 2; }
[data-x10-porvista="4,3,2"] .gem-slider-wrapper,
[data-x10-porvista="4,3,2"] .gem-slider { --x10-porvista: 2; }
}

/* ------------------------------------------- tarjetas de producto enlazadas
   En el original las fotos y los títulos llevaban a /products/… de Shopify,
   que ya no existe. Ahora llevan a su landing. `display: contents` deja el
   maquetado exactamente igual: el enlace no genera caja propia. */

.x10-enlace-producto {
  display: contents;
  cursor: pointer;
}

.x10-enlace-producto img {
  transition: transform var(--x10-duracion) var(--x10-curva);
}

.x10-enlace-producto:hover img {
  transform: scale(1.02);
}

.x10-enlace-titulo {
  color: inherit;
  text-decoration: none;
}

.x10-enlace-titulo:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.x10-enlace-producto:focus-visible img,
.x10-enlace-titulo:focus-visible {
  outline: 2px solid var(--x10-ambar);
  outline-offset: 3px;
}

/* ---------------------------------------------------- burbuja WhatsApp
   El único verde permitido en el sitio (Regla 13): el usuario lo reconoce
   y por eso convierte. z-index 900 < velos (1000+): los overlays la tapan. */

.whatsapp-burbuja {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: #25d366;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition:
    transform var(--x10-duracion-rapida) var(--x10-curva),
    box-shadow var(--x10-duracion-rapida) var(--x10-curva);
}

.whatsapp-burbuja svg {
  display: block;
}

.whatsapp-burbuja:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45);
}

.whatsapp-burbuja:active { transform: scale(0.96); }

.whatsapp-burbuja:focus-visible {
  outline: 3px solid var(--x10-ambar);
  outline-offset: 3px;
}

@media print {
  .whatsapp-burbuja { display: none; }
}

/* ------------------------------------------------------ selector de packs */

/* ------------------------------------------------- presentación de la portada
   El h1 de la portada vivía dentro de las fichas de producto; sin catálogo la
   página se quedaba sin encabezado principal. Esta banda lo aporta siempre y
   además sitúa al visitante: marca, país y qué es esto. */

.portada-intro {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 4rem);
  text-align: center;
}

.portada-intro__kicker {
  margin: 0 0 0.75rem;
  font-family: var(--x10-ff-titular);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8a1414;
}

.portada-intro h1 {
  margin: 0 auto 0.875rem;
  max-width: 20ch;
  font-family: var(--x10-ff-titular);
  font-weight: 700;
  font-size: clamp(1.5rem, 1rem + 2.4vw, 2.5rem);
  line-height: 1.1;
  color: #121212;
}

.portada-intro__cobertura {
  font-family: var(--x10-ff-cuerpo);
  margin: 0.875rem auto 0;
  max-width: 62ch;
  color: #6b6b6b;
  font-size: 0.875rem;
  line-height: 1.5;
}

.portada-intro__texto {
  /* fuera de las capas de GemPages el <p> cae al serif del navegador */
  font-family: var(--x10-ff-cuerpo);
  margin: 0 auto;
  max-width: 58ch;
  color: #4a4a4a;
  font-size: 1rem;
  line-height: 1.6;
}

/* --------------------------------------------------------- selector de packs
   Tres tarjetas, no un desplegable: se comparan de un vistazo y el pack
   recomendado se distingue solo. La elegida gana peso con el borde y un
   fondo tenue, sin depender del color para comunicarlo.

   Todo va anclado a .packs: GemPages resetea los <button> con `.gps button`,
   que gana a un selector de una sola clase. */

.packs { margin: 0 0 1.25rem; }

.packs .packs__titulo {
  margin: 0 0 0.625rem;
  font-family: var(--x10-ff-titular);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b6b6b;
}

.packs .packs__opciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 0.5rem;
  align-items: stretch;
}

.packs .pack {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.125rem;
  padding: 1.5rem 0.625rem 0.875rem;
  border: 1.5px solid #dcdcdc;
  border-radius: var(--x10-radio);
  background: #fff;
  color: #121212;
  text-align: center;
  cursor: pointer;
  transition:
    border-color var(--x10-duracion) var(--x10-curva),
    background-color var(--x10-duracion) var(--x10-curva),
    transform var(--x10-duracion) var(--x10-curva);
}

.packs .pack:hover { border-color: #9a9a9a; transform: translateY(-1px); }

.packs .pack[aria-checked="true"] {
  border-color: #121212;
  border-width: 2px;
  background: #f6f4f1;
  padding: calc(1.5rem - 0.5px) calc(0.625rem - 0.5px) calc(0.875rem - 0.5px);
}

.packs .pack:focus-visible { outline: 3px solid var(--x10-ambar); outline-offset: 2px; }

/* la cinta del pack recomendado rompe el borde superior */
.packs .pack__cinta {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.15rem 0.5rem;
  background: var(--x10-ambar);
  color: #121212;
  border-radius: 999px;
  font-family: var(--x10-ff-titular);
  font-size: 0.5625rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: calc(100% - 0.5rem);
  overflow: hidden;
  text-overflow: ellipsis;
}

.packs .pack__unidades {
  font-family: var(--x10-ff-titular);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.packs .pack__detalle { font-size: 0.6875rem; line-height: 1.3; color: #6b6b6b; }

.packs .pack__precio {
  margin-top: 0.3125rem;
  font-family: var(--x10-ff-titular);
  font-weight: 700;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.packs .pack__ahorro {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #1c7a3e;
}

/* ------------------------------------------------------ barra CTA móvil */

.cta-movil {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 950;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom));
  background: var(--x10-negro-2, #1c1c1c);
  border-top: 1px solid var(--x10-linea);
  transform: translateY(110%);
  transition: transform var(--x10-duracion) var(--x10-curva);
}

@media (max-width: 767px) {
  .cta-movil { display: flex; }
}

.cta-movil--visible { transform: translateY(0); }

.cta-movil__info {
  display: grid;
  margin: 0;
  min-width: 0;
}

.cta-movil__info strong {
  font-family: var(--x10-ff-titular);
  font-size: 0.9375rem;
  color: var(--x10-texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cta-movil__info span {
  font-size: 0.8125rem;
  color: var(--x10-ambar);
  font-weight: 600;
}

.cta-movil__boton {
  flex-shrink: 0;
  padding: 0.625rem 1.375rem;
  font-size: 0.875rem;
}

/* la burbuja de WhatsApp sube cuando la barra está presente */
@media (max-width: 767px) {
  body.x10-cta-visible .whatsapp-burbuja {
    bottom: calc(4.75rem + env(safe-area-inset-bottom));
  }
}

/* --------------------------------------------------------- fly-to-cart */

.x10-vuelo {
  position: fixed;
  z-index: 1050;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--x10-radio);
  box-shadow: var(--x10-sombra-elevada);
  pointer-events: none;
  transition:
    transform 0.45s var(--x10-curva),
    opacity 0.45s var(--x10-curva);
}

.cab__carrito-badge.x10-pulso {
  animation: x10-pulso 0.45s var(--x10-curva);
}

@keyframes x10-pulso {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* -------------------------------------------------- esqueleto de carga */

.x10-cargando {
  background:
    linear-gradient(100deg,
      rgba(255, 255, 255, 0.04) 40%,
      rgba(255, 255, 255, 0.1) 50%,
      rgba(255, 255, 255, 0.04) 60%)
    var(--x10-superficie);
  background-size: 200% 100%;
  animation: x10-brillo 1.4s linear infinite;
}

@keyframes x10-brillo {
  to { background-position: -200% 0; }
}

/* ------------------------------------- progreso del autoplay en puntos
   El punto activo se vuelve píldora y se rellena de ámbar durante los 5 s
   del autoplay. El selector empieza a coincidir al cambiar de slide, así
   que la animación se reinicia sola. */

.x10-punto[aria-current="true"] {
  width: 22px;
  border-radius: 999px;
  transform: none;
  position: relative;
  overflow: hidden;
}

.x10-punto[aria-current="true"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--x10-ambar);
  transform: translateX(-100%);
  animation: x10-progreso 5s linear forwards;
}

@keyframes x10-progreso {
  to { transform: translateX(0); }
}

/* ------------------------------------------------- movimiento reducido */

@media (prefers-reduced-motion: reduce) {
  .x10-revelar,
  .x10-anim-fade,
  .x10-anim-slide {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .gp-button-atc,
  .gp-button-atc:hover,
  .gp-button-atc:active {
    transform: none;
    transition: none;
  }

  .x10-cargando { animation: none; }

  /* sin autoplay no hay progreso que contar: píldora llena estática */
  .x10-punto[aria-current="true"]::after {
    animation: none;
    transform: none;
  }

  .cab__carrito-badge.x10-pulso { animation: none; }
}


/* ------------------------------------------------------------ migas de pan
   Reflejan el BreadcrumbList de los datos estructurados y devuelven un
   enlace interno a la portada desde cada página profunda. */

.migas {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.625rem clamp(1rem, 3vw, 2rem);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--x10-ff-cuerpo);
  font-size: 0.8125rem;
  color: var(--x10-texto-suave);
  background: var(--x10-negro);
}

.migas a {
  color: var(--x10-texto-suave);
  text-decoration: none;
  text-underline-offset: 3px;
}

.migas a:hover { color: var(--x10-ambar); text-decoration: underline; }
.migas a:focus-visible { outline: 2px solid var(--x10-ambar); outline-offset: 2px; }
.migas [aria-current="page"] { color: var(--x10-texto); }



/* ------------------------------------------- aviso del formulario de dudas */

.contacto-aviso {
  margin: 0.75rem 0 0;
  font-family: var(--x10-ff-cuerpo);
  font-size: 0.875rem;
  color: var(--x10-texto);
}

.contacto-aviso--error { color: var(--x10-ambar); }

/* ==========================================================================
   PORTADA DE MARCA — la casa común de las tiendas
   Editorial oscura: tipografía grande en mayúsculas, ritmo asimétrico y una
   lámina clara que sostiene la foto de producto. El contraste entre el negro
   de la página y esa lámina es lo que hace que el producto se mire primero.
   ========================================================================== */

.casa {
  background: var(--x10-negro);
  color: var(--x10-texto);
  font-family: var(--x10-ff-cuerpo);
  line-height: 1.6;
  /* el negro puro no existe en la naturaleza: se tiñe hacia el ámbar */
  background-image: radial-gradient(120% 60% at 85% -10%, rgba(255, 203, 3, 0.07), transparent 60%);
}

.casa__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem clamp(1.25rem, 5vw, 4rem);
}

.casa__cab img { height: auto; }

.casa__region {
  font-family: var(--x10-ff-titular);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--x10-texto-suave);
}

/* ------------------------------------------------------------------ portada */

.portada {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(1rem, 4vw, 3rem) clamp(1.25rem, 5vw, 4rem) clamp(3rem, 7vw, 6rem);
  max-width: 1240px;
  margin: 0 auto;
}

@media (min-width: 900px) {
  /* asimétrico a propósito: el texto manda, la lámina acompaña */
  .portada { grid-template-columns: 1.05fr 0.95fr; }
}

.portada__kicker {
  margin: 0 0 1.25rem;
  font-family: var(--x10-ff-titular);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--x10-ambar);
}

.portada h1 {
  margin: 0 0 1.5rem;
  font-family: var(--x10-ff-titular);
  font-weight: 700;
  font-size: clamp(3rem, 1.5rem + 7vw, 6.5rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.portada h1 em {
  font-style: normal;
  color: var(--x10-ambar);
}

.portada__entrada {
  margin: 0 0 2.25rem;
  max-width: 44ch;
  color: var(--x10-texto-suave);
  font-size: 1.0625rem;
}

.portada__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.9375rem 1.75rem;
  background: var(--x10-ambar);
  color: #121212;
  border-radius: 999px;
  font-family: var(--x10-ff-titular);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    transform var(--x10-duracion) var(--x10-curva),
    box-shadow var(--x10-duracion) var(--x10-curva);
}

.portada__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(255, 203, 3, 0.3);
}

.portada__cta:focus-visible { outline: 3px solid var(--x10-ambar); outline-offset: 4px; }

/* la lámina clara: el producto expuesto como en una revista */
.portada__lamina {
  position: relative;
  margin: 0;
  border-radius: var(--x10-radio-grande);
  background: linear-gradient(160deg, #f7f5f1, #e9e5de);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
  overflow: visible;
}

.portada__lamina > img:first-child {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  mix-blend-mode: multiply;
}

/* el sachet recortado rompe el borde de la lámina: gesto editorial */
.portada__sachet {
  position: absolute;
  left: -6%;
  bottom: -8%;
  width: clamp(96px, 22%, 168px);
  height: auto;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.6));
  pointer-events: none;
}

/* ------------------------------------------------------------------- cifras */

.cifras {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--x10-linea);
  border-block: 1px solid var(--x10-linea);
}

@media (min-width: 760px) {
  .cifras { grid-template-columns: repeat(4, 1fr); }
}

.cifra {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem);
  background: var(--x10-negro);
}

.cifra strong {
  font-family: var(--x10-ff-titular);
  font-size: clamp(1.75rem, 1rem + 2.4vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  color: var(--x10-ambar);
  font-variant-numeric: tabular-nums;
}

.cifra span {
  font-size: 0.8125rem;
  color: var(--x10-texto-suave);
}

/* ------------------------------------------------------------------ momento
   Donde aparece la gente. Tres fotos a escalas distintas y desalineadas a
   propósito: es lo contrario de una rejilla de tarjetas iguales. La foto
   grande ancla la composición, la pequeña la desequilibra y la panorámica
   cierra desplazada hacia la derecha. */

.momento {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 7rem) clamp(1.25rem, 5vw, 4rem);
}

@media (min-width: 900px) {
  .momento {
    grid-template-columns: repeat(12, 1fr);
    align-items: start;
  }
  /* el texto ocupa media anchura arriba y las fotos forman una banda
     escalonada debajo: los pies quedan en diagonal, no alineados */
  .momento__texto   { grid-column: 1 / 7;  grid-row: 1; margin-bottom: clamp(1rem, 3vw, 2.5rem); }
  .momento__foto--a { grid-column: 1 / 6;  grid-row: 2; }
  .momento__foto--b { grid-column: 6 / 9;  grid-row: 2; margin-top: clamp(2rem, 6vw, 5rem); }
  .momento__foto--c { grid-column: 9 / 13; grid-row: 2; margin-top: clamp(1rem, 3vw, 2.5rem); }
}

.momento__kicker {
  margin: 0 0 1rem;
  font-family: var(--x10-ff-titular);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--x10-ambar);
}

.momento__texto h2 {
  margin: 0 0 1.25rem;
  font-family: var(--x10-ff-titular);
  font-weight: 700;
  font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

.momento__texto h2 em { font-style: normal; color: var(--x10-ambar); }

.momento__texto p {
  margin: 0;
  max-width: 38ch;
  color: var(--x10-texto-suave);
  font-size: 1.0625rem;
}

.momento__foto {
  margin: 0;
  overflow: hidden;
  border-radius: var(--x10-radio-grande);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.momento__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* cada una con su recorte */
.momento__foto--a img { aspect-ratio: 4 / 5; }
.momento__foto--c img { aspect-ratio: 3 / 4; }

.momento__foto--b img { aspect-ratio: 674 / 1254; }

@media (max-width: 899px) {
  /* apiladas: la grande manda y la vertical se queda estrecha y desplazada,
     que es lo que mantiene el escalonado del escritorio */
  .momento__foto--b { max-width: 68%; margin-left: auto; }
  .momento__foto--c img { aspect-ratio: 4 / 5; }
}

/* -------------------------------------------------------------- los países */

.paises-seccion {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 6rem) clamp(1.25rem, 5vw, 4rem);
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 900px) {
  .paises-seccion { grid-template-columns: 0.8fr 1.2fr; align-items: start; }
}

.paises-seccion__intro h2 {
  margin: 0 0 0.75rem;
  font-family: var(--x10-ff-titular);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  line-height: 1.05;
  text-transform: uppercase;
}

.paises-seccion__intro p {
  margin: 0;
  max-width: 34ch;
  color: var(--x10-texto-suave);
}

.paises {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--x10-linea);
}

/* filas, no tarjetas: una lista editorial se lee más rápido que una rejilla */
.pais {
  border-bottom: 1px solid var(--x10-linea);
}

.pais > a,
.pais--pronto {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 1.125rem 0.25rem;
  color: var(--x10-texto);
  text-decoration: none;
  position: relative;
}

.pais__bandera { font-size: 1.75rem; line-height: 1; grid-row: span 2; }

.pais__nombre {
  font-family: var(--x10-ff-titular);
  font-weight: 600;
  font-size: 1.25rem;
}

.pais__meta {
  grid-column: 2;
  font-size: 0.8125rem;
  color: var(--x10-texto-suave);
}

.pais__ir {
  grid-column: 3;
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--x10-ff-titular);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--x10-ambar);
}

.pais--abierto > a { transition: background var(--x10-duracion-rapida) var(--x10-curva); }

.pais--abierto > a:hover {
  background: rgba(255, 203, 3, 0.06);
}

.pais--abierto > a:hover .pais__ir svg { transform: translateX(4px); }

.pais__ir svg { transition: transform var(--x10-duracion-rapida) var(--x10-curva); }

.pais--abierto > a:focus-visible {
  outline: 2px solid var(--x10-ambar);
  outline-offset: -2px;
}

/* los que aún no abren: presentes, pero claramente sin acción */
.pais--pronto { opacity: 0.45; }
.pais--pronto .pais__ir { color: var(--x10-texto-suave); }

.pais__nombre { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.pais__sugerencia {
  padding: 0.1rem 0.5rem;
  background: var(--x10-ambar);
  color: #121212;
  border-radius: 999px;
  font-family: var(--x10-ff-titular);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pais__sugerencia[hidden] { display: none; }

/* -------------------------------------------------------- tira de ingredientes */

.ingredientes-tira {
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-top: 1px solid var(--x10-linea);
}

.ingredientes-tira h2 {
  max-width: 1240px;
  margin: 0 auto clamp(1.75rem, 4vw, 2.5rem);
  padding: 0 clamp(1.25rem, 5vw, 4rem);
  font-family: var(--x10-ff-titular);
  font-weight: 700;
  font-size: clamp(1.375rem, 1rem + 1.6vw, 2rem);
  line-height: 1.15;
  text-transform: uppercase;
}

.ingredientes-tira ul {
  list-style: none;
  margin: 0;
  padding: 0 clamp(1.25rem, 5vw, 4rem);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(140px, 1fr);
  gap: 1rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.ingredientes-tira ul::-webkit-scrollbar { display: none; }

.ingredientes-tira ul:focus-visible {
  outline: 2px solid var(--x10-ambar);
  outline-offset: 6px;
  border-radius: var(--x10-radio);
}

@media (min-width: 1000px) {
  .ingredientes-tira ul {
    grid-auto-flow: row;
    grid-template-columns: repeat(6, 1fr);
    max-width: 1240px;
    margin: 0 auto;
    overflow: visible;
  }
}

.ingredientes-tira li { display: grid; gap: 0.5rem; }

.ingredientes-tira img {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  border-radius: var(--x10-radio);
  filter: saturate(1.05);
}

.ingredientes-tira strong {
  font-family: var(--x10-ff-titular);
  font-size: 0.9375rem;
  font-weight: 600;
}

.ingredientes-tira span {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--x10-ambar);
}

/* ------------------------------------------------------------------- cierre */

.cierre {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 6rem) clamp(1.25rem, 5vw, 4rem);
  border-top: 1px solid var(--x10-linea);
}

.cierre__frase {
  margin: 0 0 1.5rem;
  max-width: 26ch;
  font-family: var(--x10-ff-titular);
  font-weight: 700;
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.5rem);
  line-height: 1.1;
  text-transform: uppercase;
}

.cierre__frase span { color: var(--x10-texto-suave); }

.cierre__legal {
  margin: 0;
  max-width: 56ch;
  color: var(--x10-texto-suave);
  font-size: 0.8125rem;
}

.casa__pie {
  padding: 1.5rem clamp(1.25rem, 5vw, 4rem) 2.5rem;
  border-top: 1px solid var(--x10-linea);
}

.casa__pie p {
  margin: 0;
  font-size: 0.75rem;
  color: var(--x10-texto-suave);
}

/* --------------------------------------------------------- entrada escalonada
   Un solo momento de movimiento al cargar, no micro-animaciones dispersas. */

@media (prefers-reduced-motion: no-preference) {
  .portada__kicker, .portada h1, .portada__entrada, .portada__cta, .portada__lamina {
    animation: casa-entra 0.7s var(--x10-curva) backwards;
  }
  .portada h1 { animation-delay: 0.06s; }
  .portada__entrada { animation-delay: 0.12s; }
  .portada__cta { animation-delay: 0.18s; }
  .portada__lamina { animation-delay: 0.1s; }
}

@keyframes casa-entra {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}