/* ==========================================================
   Componentes — afiche, tarjetas, sellos, botones, resumen, modal.
   ========================================================== */

/* ==========================================================
   TITULAR DEL AFICHE
   REVENTÓN es la pieza gráfica: ocupa el ancho, pisa la foto y
   arrastra la sombra de dos tintas como una impresión desfasada.
   ========================================================== */
.hero__kicker {
  display: inline-block;
  font-family: var(--fuente-display);
  font-size: var(--paso--2);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--crema);
  border: 1.5px solid rgba(251, 224, 172, 0.5);
  padding: 4px var(--e-2);
}

.hero__logo {
  width: min(240px, 54vw);
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.55));
  animation: entrar-arriba 800ms var(--ease) both;
}

.hero__titulo {
  display: grid;
  justify-items: center;
  font-family: var(--fuente-display);
  line-height: 0.8;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  width: 100%;
}

/* La palabra que manda. Escala con el ancho para llegar siempre al borde. */
.hero__linea--grito {
  display: block;
  /* Escala con el ancho para llegar al borde sin desbordarlo nunca. */
  font-size: var(--paso-grito);
  max-width: 100%;
  color: var(--crema);
  /* Desfasaje de impresión: fuego y tinta corridos, como un afiche mal
     registrado. Es el gesto que le da energía sin agregar imágenes. */
  text-shadow:
    0.022em 0.022em 0 var(--fuego),
    0.044em 0.044em 0 var(--tinta),
    0.062em 0.062em 0 rgba(255, 212, 0, 0.85);
  animation: reventar 900ms var(--ease) both;
}

/* Segunda línea en hueco: contraste tipo póster de cine. */
.hero__linea--hueca {
  display: block;
  font-size: clamp(1.6rem, 6.2vw, 4.4rem);
  color: transparent;
  -webkit-text-stroke: 2px var(--rayo);
  letter-spacing: 0.02em;
  animation: entrar-arriba 800ms var(--ease) 200ms both;
}

/* La promesa, en cinta llena: una sola promoción, dicha una sola vez. */
.hero__claim {
  display: inline-block;
  font-family: var(--fuente-display);
  font-size: clamp(1rem, 3.4vw, 1.9rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tinta);
  background: var(--rayo);
  border: 3px solid var(--tinta);
  box-shadow: 5px 5px 0 var(--fuego);
  padding: var(--e-1) var(--e-3);
  transform: rotate(-1.6deg);
  animation: entrar-arriba 800ms var(--ease) 320ms both;
}

.hero__sub {
  font-size: var(--paso--1);
  color: var(--papel-2);
  letter-spacing: 0.06em;
  max-width: 44ch;
  text-wrap: balance;
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-2);
  margin-top: var(--e-2);
}

@keyframes entrar-arriba {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
/* Entra de golpe, se pasa de largo y vuelve: el gesto del reventón. */
@keyframes reventar {
  0%   { opacity: 0; transform: scale(0.82) rotate(-2deg); }
  55%  { opacity: 1; transform: scale(1.05) rotate(0.6deg); }
  75%  { transform: scale(0.985) rotate(-0.4deg); }
  100% { opacity: 1; transform: none; }
}

/* ---------------- Sello 50% OFF ---------------- */
.sello-off {
  --lados: 22;
  display: grid;
  place-items: center;
  /* Las dos líneas van juntas en el centro: en las puntas de la estrella se cortarían. */
  align-content: center;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 94px;
  height: 94px;
  margin: 0;
  background: var(--fuego);
  color: var(--tinta);
  clip-path: polygon(
    100% 50%, 93.3% 57.4%, 96.6% 66.9%, 88.3% 71.7%, 88.3% 81.3%, 78.8% 82%,
    75.7% 91.1%, 66.6% 88.5%, 60% 95.5%, 52.9% 89.1%, 44.3% 93.4%, 39.5% 85.1%,
    29.9% 85.1%, 29.2% 75.6%, 20.1% 72.5%, 22.7% 63.4%, 15.7% 56.8%, 22.1% 49.7%,
    17.8% 41.1%, 26.1% 36.3%, 26.1% 26.7%, 35.6% 26%, 38.7% 16.9%, 47.8% 19.5%,
    54.4% 12.5%, 61.5% 18.9%, 70.1% 14.6%, 74.9% 22.9%, 84.5% 22.9%, 85.2% 32.4%,
    94.3% 35.5%, 91.7% 44.6%
  );
  animation: sello-latido 3.2s var(--ease) infinite;
  transform: rotate(-8deg);
}
.sello-off__num,
.sello-off__txt {
  font-family: var(--fuente-display);
  line-height: 0.92;
  letter-spacing: -0.03em;
  transform: rotate(8deg);
}
.sello-off__num { font-size: 1.35rem; }
.sello-off__txt { font-size: 0.72rem; letter-spacing: 0.1em; }
@keyframes sello-latido {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50%      { transform: rotate(-8deg) scale(1.07); }
}

/* ---------------- Botones ---------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 48px;
  padding: 0 var(--e-4);
  font-family: var(--fuente-display);
  font-size: var(--paso--1);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--radio);
  border: 2px solid var(--sobre-papel);
  background: var(--crema);
  color: var(--sobre-papel);
  box-shadow: var(--sombra-dura);
  transition: transform var(--rapido), box-shadow var(--rapido), background var(--rapido), color var(--rapido);
  text-align: center;
}
.boton:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--sobre-papel); }
.boton:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--sobre-papel); }
.boton:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: var(--sombra-dura); }

.boton--acento {
  background: var(--fuego);
  color: var(--tinta);
  border-color: var(--tinta);
  box-shadow: 4px 4px 0 var(--rayo);
}
.boton--acento:hover { box-shadow: 7px 7px 0 var(--rayo); }
.boton--acento:active { box-shadow: 1px 1px 0 var(--rayo); }

/* Secundario de campaña: el amarillo, para el paso que no es comprar. */
.boton--rayo {
  background: var(--rayo);
  color: var(--tinta);
  border-color: var(--tinta);
  box-shadow: 4px 4px 0 var(--fuego);
}
.boton--rayo:hover { box-shadow: 7px 7px 0 var(--fuego); }
.boton--rayo:active { box-shadow: 1px 1px 0 var(--fuego); }

/* En el afiche los botones son grandes: son el único camino a las prendas. */
.hero__acciones .boton { min-height: 54px; font-size: var(--paso-0); }

.boton--borde {
  background: transparent;
  color: var(--papel);
  border-color: var(--papel);
  box-shadow: none;
}
.boton--borde:hover { background: var(--papel); color: var(--sobre-papel); box-shadow: none; transform: none; }

.boton--wa {
  background: var(--wa);
  color: #06301a;
  border-color: #06301a;
  box-shadow: 4px 4px 0 #06301a;
}
.boton--wa:hover { box-shadow: 6px 6px 0 #06301a; }
.boton--wa:active { box-shadow: 1px 1px 0 #06301a; }
.boton--wa:disabled { background: var(--humo); color: var(--tinta); border-color: var(--tinta); box-shadow: 4px 4px 0 var(--tinta); }

.boton--bloque { width: 100%; }

/* ---------------- Contador de la barra ---------------- */
.barra__contador {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-1) var(--e-2);
  border: 2px solid var(--fuego);
  border-radius: var(--radio);
  color: var(--crema);
  transition: background var(--rapido), color var(--rapido);
}
.barra__contador:hover { background: var(--fuego); color: var(--crema); }
.barra__contador-num { font-family: var(--fuente-display); font-size: var(--paso--1); }
.barra__contador-txt {
  font-size: var(--paso--2);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  display: none;
}
.barra__contador--lleno { background: var(--rayo); border-color: var(--rayo); color: var(--tinta); font-weight: 700; }

/* ---------------- Pasos ---------------- */
.paso {
  position: relative;
  border: 1px solid rgba(243, 233, 215, 0.2);
  border-left: 4px solid var(--fuego);
  padding: var(--e-3) var(--e-3) var(--e-3) var(--e-4);
  background: linear-gradient(180deg, rgba(243, 233, 215, 0.04), transparent);
}
.paso__num {
  font-family: var(--fuente-display);
  font-size: var(--paso-2);
  color: var(--rayo);
  display: block;
  margin-bottom: var(--e-1);
}
.paso h3 {
  font-family: var(--fuente-display);
  font-size: var(--paso-0);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--e-1);
}
.paso p { font-size: var(--paso--1); color: var(--texto-suave); }
.paso strong { color: var(--rayo); }

/* ---------------- Filtros ---------------- */
.filtros {
  display: flex;
  gap: var(--e-2);
  overflow-x: auto;
  padding-bottom: var(--e-2);
  margin-top: var(--e-4);
  scrollbar-width: none;
}
.filtros::-webkit-scrollbar { display: none; }

.filtro {
  flex: 0 0 auto;
  /* 44px de alto: se tocan bien con el pulgar. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--e-3);
  border: 1.5px solid rgba(243, 233, 215, 0.3);
  border-radius: 100px;
  font-size: var(--paso--2);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--texto-suave);
  white-space: nowrap;
  transition: all var(--rapido);
}
.filtro:hover { border-color: var(--crema); color: var(--crema); }
.filtro[aria-pressed='true'] {
  background: var(--rayo);
  border-color: var(--rayo);
  color: var(--tinta);
  font-weight: 700;
}

/* ==========================================================
   TARJETA DE PRENDA — obra enmarcada sobre pared oscura
   ========================================================== */
.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--papel);
  color: var(--sobre-papel);
  border: 2px solid var(--sobre-papel);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
  transition: transform var(--medio), box-shadow var(--medio), border-color var(--rapido);
  /* Estado inicial de la animación de entrada. */
  opacity: 0;
  transform: translateY(24px);
}
.tarjeta.esta-visible { opacity: 1; transform: none; }
.tarjeta:hover { box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5); }

.tarjeta__cartela {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  padding: 6px var(--e-2);
  border-bottom: 1px solid rgba(33, 26, 21, 0.25);
  border-left: 4px solid var(--fuego);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--sobre-papel-suave);
}
.tarjeta__num { font-family: var(--fuente-display); letter-spacing: 0.06em; color: var(--sobre-papel); }
.tarjeta__categoria { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tarjeta__marco {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--papel-2);
  overflow: hidden;
}

/* Varias fotos en una sola pista: se pasan con el dedo o con las flechas.
   El encastre las alinea sin necesidad de un carrusel con temporizadores. */
.tarjeta__pista {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.tarjeta__pista::-webkit-scrollbar { display: none; }

.tarjeta__img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  transition: transform 600ms var(--ease), filter var(--medio), opacity var(--medio);
  opacity: 0;
}
.tarjeta__img.esta-cargada { opacity: 1; }
/* El zoom al pasar el mouse queda para las prendas de una sola foto:
   sobre la pista desplazable movería el encuadre. */
.tarjeta:hover .tarjeta__marco:not(.tarjeta__marco--multiple) .tarjeta__img { transform: scale(1.045); }

/* --- Flechas: la zona sensible ocupa todo el alto del marco, así se
       acierta sin apuntar. Lo que se ve es una píldora oscura centrada en
       esa columna: mismo velo y mismo radio que los puntitos de abajo, para
       que los controles de la foto se lean como un solo sistema. --- */
.tarjeta__flecha {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  width: 46px;
  padding-inline: 6px;
  border: none;
  background: none;
  color: var(--crema);
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--medio);
}
.tarjeta__flecha--izq { left: 0; justify-content: flex-start; }
.tarjeta__flecha--der { right: 0; justify-content: flex-end; }

/* Velo hacia el borde: despega la pastilla de la foto sin taparla. */
.tarjeta__flecha::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--medio);
}
.tarjeta__flecha--izq::before { background: linear-gradient(90deg, rgba(20, 16, 14, 0.3), transparent); }
.tarjeta__flecha--der::before { background: linear-gradient(270deg, rgba(20, 16, 14, 0.3), transparent); }
.tarjeta__flecha:hover::before { opacity: 1; }

/* La píldora. Los estados los manejan las variables desde el botón: así el
   reposo, el hover de la tarjeta y el clic no se pisan por especificidad.
   Es más alta que ancha —no un círculo— para que se lea como forma elegida.
   El aro interior le da filo sobre fotos oscuras, donde el velo se pierde. */
.tarjeta__flecha svg {
  position: relative;
  box-sizing: content-box;
  width: 22px;
  height: 22px;
  padding: 17px 9px;
  border: none;
  border-radius: 999px;
  background: var(--fondo-flecha, rgba(33, 26, 21, 0.55));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35),
              inset 0 0 0 1px var(--aro-flecha, rgba(251, 224, 172, 0.22));
  opacity: var(--op, 0.9);
  transform: translateX(var(--dx, 0px)) scale(var(--escala, 1));
  transition: opacity var(--medio), transform var(--medio), background var(--rapido), box-shadow var(--rapido);
}

/* Con puntero hay lugar de sobra: la columna se ensancha a un cuarto del
   marco y las pastillas entran deslizándose recién al acercarse a la tarjeta.
   (En táctil se quedan angostas para no comerle el gesto al deslizamiento.) */
@media (hover: hover) {
  .tarjeta__flecha { width: clamp(56px, 25%, 96px); padding-inline: var(--e-2); }
  .tarjeta__flecha--izq { --op: 0; --dx: -10px; }
  .tarjeta__flecha--der { --op: 0; --dx: 10px; }
  :where(.tarjeta:hover, .tarjeta:focus-within) .tarjeta__flecha { --op: 0.92; --dx: 0px; }
}

.tarjeta__flecha:hover { --op: 1; --fondo-flecha: rgba(33, 26, 21, 0.82); --aro-flecha: rgba(251, 224, 172, 0.55); }
/* Al apretar se hunde: con esta forma el hundido reemplaza a la sombra dura. */
.tarjeta__flecha:active { --op: 1; --escala: 0.9; }
.tarjeta__flecha:active svg { transition: transform var(--rapido); }

/* El foco se dibuja sobre la pastilla, no sobre la columna entera. */
.tarjeta__flecha:focus-visible { outline: none; --op: 1; --dx: 0px; }
.tarjeta__flecha:focus-visible svg { outline: 3px solid var(--oro); outline-offset: 3px; }

/* En las puntas desaparece: no hay flecha que no lleve a ningún lado. */
.tarjeta__flecha[disabled] { opacity: 0; pointer-events: none; }

/* --- Puntitos: cuántas fotos hay y en cuál estamos --- */
.tarjeta__puntos {
  position: absolute;
  left: 50%;
  bottom: 8px;
  z-index: 3;
  display: flex;
  gap: 5px;
  padding: 4px 7px;
  transform: translateX(-50%);
  background: rgba(33, 26, 21, 0.55);
  border-radius: 20px;
}
.tarjeta__puntos span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(243, 233, 215, 0.45);
  transition: background var(--rapido), transform var(--rapido);
}
.tarjeta__puntos span.esta-activo { background: var(--crema); transform: scale(1.25); }

/* Sin foto o foto rota: el marco no queda vacío. */
.tarjeta__sinimagen {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: var(--e-1);
  text-align: center;
  background: repeating-linear-gradient(45deg, var(--papel-2) 0 10px, #ded0b7 10px 20px);
  color: var(--sobre-papel-suave);
  font-size: var(--paso--2);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.tarjeta__datos {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  padding: var(--e-2) var(--e-2) var(--e-3);
  flex: 1;
}
.tarjeta__nombre {
  font-family: var(--fuente-display);
  font-size: var(--paso--1);
  line-height: 1.1;
  text-transform: uppercase;
}
/* El precio manda; los talles lo acompañan sin pelearle el lugar. */
.tarjeta__linea {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-2);
  margin-top: auto;
}
/* El precio final manda; el de lista queda tachado arriba, chico. */
.tarjeta__precios { display: grid; gap: 1px; }
.tarjeta__precio-lista {
  font-size: var(--paso--2);
  font-variant-numeric: tabular-nums;
  color: var(--sobre-papel-suave);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.tarjeta__precio {
  font-family: var(--fuente-display);
  font-size: var(--paso-1);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.tarjeta__off-etq {
  justify-self: start;
  margin-top: 2px;
  padding: 2px 6px;
  background: var(--fuego);
  color: var(--tinta);
  font-family: var(--fuente-display);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--radio);
}

/* Tampón de descuento sobre la foto: el aire de liquidación real. */
.tarjeta__off {
  position: absolute;
  top: var(--e-2);
  left: var(--e-2);
  z-index: 2;
  padding: 4px 9px;
  background: var(--fuego);
  color: var(--tinta);
  border: 2px solid var(--papel);
  border-radius: var(--radio);
  font-family: var(--fuente-display);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  transform: rotate(-6deg);
}

/* --- Talles: etiqueta secundaria y, a la vez, el selector --- */
.talles {
  display: flex;
  align-items: baseline;
  gap: var(--e-1);
  flex-wrap: wrap;
  max-width: 100%;
}
.talles__etq {
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sobre-papel-suave);
}
.talles__chips { display: flex; gap: 4px; flex-wrap: wrap; }

.talle {
  min-width: 32px;
  min-height: 32px;
  padding: 0 6px;
  border: 1px solid rgba(33, 26, 21, 0.35);
  border-radius: var(--radio);
  background: transparent;
  color: var(--sobre-papel);
  font-family: var(--fuente-texto);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background var(--rapido), color var(--rapido), border-color var(--rapido), transform var(--rapido);
}
.talle:hover:not(:disabled) { border-color: var(--sobre-papel); }
.talle:active:not(:disabled) { transform: scale(0.94); }
.talle[aria-pressed='true'] {
  background: var(--sobre-papel);
  border-color: var(--sobre-papel);
  color: var(--crema);
}
.tarjeta--elegida .talle[aria-pressed='true'] { background: var(--fuego); border-color: var(--fuego); color: var(--tinta); }
.talle:disabled { opacity: 0.4; cursor: not-allowed; }

.talles__aviso {
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sobre-papel-suave);
  border: 1px dashed rgba(33, 26, 21, 0.35);
  border-radius: var(--radio);
  padding: 4px 7px;
}

/* Se intentó agregar la prenda sin elegir talle: los chips piden turno. */
.talles--pide .talle { animation: pedir-talle 640ms var(--ease) both; }
@keyframes pedir-talle {
  0%, 100% { border-color: rgba(33, 26, 21, 0.35); }
  20%, 60% { border-color: var(--fuego); background: rgba(255, 59, 18, 0.16); }
  40%, 80% { border-color: rgba(33, 26, 21, 0.35); }
}

.tarjeta__accion {
  width: 100%;
  min-height: 44px;
  margin-top: var(--e-2);
  padding: 0 var(--e-2);
  border: 2px solid var(--sobre-papel);
  background: var(--sobre-papel);
  color: var(--crema);
  font-family: var(--fuente-display);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: var(--radio);
  transition: background var(--rapido), color var(--rapido), transform var(--rapido);
}
.tarjeta__accion:hover { background: var(--fuego); border-color: var(--fuego); color: var(--tinta); }
.tarjeta__accion:active { transform: scale(0.97); }

/* --- Estado: seleccionada --- */
.tarjeta--elegida { border-color: var(--fuego); box-shadow: 0 0 0 3px rgba(255, 59, 18, 0.4), 0 14px 30px rgba(0, 0, 0, 0.45); }
.tarjeta--elegida .tarjeta__accion { background: var(--fuego); border-color: var(--fuego); color: var(--tinta); }
.tarjeta--elegida .tarjeta__accion:hover { background: var(--sobre-papel); border-color: var(--sobre-papel); }

.tarjeta__ficha {
  position: absolute;
  top: var(--e-2);
  right: var(--e-2);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--fuego);
  color: var(--tinta);
  border: 2px solid var(--papel);
  font-family: var(--fuente-display);
  font-size: 0.95rem;
  transform: rotate(-10deg);
  animation: sello-pop 320ms var(--ease) both;
}
@keyframes sello-pop {
  from { opacity: 0; transform: rotate(-10deg) scale(0.4); }
  60%  { transform: rotate(-10deg) scale(1.14); }
  to   { opacity: 1; transform: rotate(-10deg) scale(1); }
}

/* --- Estado: agotada / desactivada --- */
.tarjeta--fuera { border-color: rgba(33, 26, 21, 0.45); }
.tarjeta--fuera .tarjeta__img { filter: grayscale(1) contrast(0.85) brightness(1.04); }
.tarjeta--fuera .tarjeta__nombre,
.tarjeta--fuera .tarjeta__precio { color: var(--sobre-papel-suave); }
.tarjeta--fuera .tarjeta__off-etq { background: var(--sobre-papel-suave); }
.tarjeta--fuera .tarjeta__accion {
  background: transparent;
  color: var(--sobre-papel-suave);
  border-color: rgba(33, 26, 21, 0.3);
  cursor: not-allowed;
}
.tarjeta--fuera .tarjeta__accion:hover { background: transparent; border-color: rgba(33, 26, 21, 0.3); }

/* El sello va sobre la foto, girado, como un tampón sobre el catálogo. */
.tarjeta__sello {
  position: absolute;
  top: 46%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%) rotate(-11deg);
  padding: var(--e-1) var(--e-3);
  border: 3px solid var(--fuego);
  color: var(--fuego);
  background: rgba(243, 233, 215, 0.86);
  font-family: var(--fuente-display);
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tarjeta__sello--gris { border-color: var(--sobre-papel-suave); color: var(--sobre-papel-suave); }

/* --- Esqueleto de carga --- */
.tarjeta--esqueleto {
  opacity: 1;
  transform: none;
  min-height: 340px;
  background: linear-gradient(100deg, #251d18 30%, #322822 50%, #251d18 70%);
  background-size: 220% 100%;
  border-color: rgba(243, 233, 215, 0.14);
  box-shadow: none;
  animation: brillo 1.4s linear infinite;
}
@keyframes brillo {
  from { background-position: 140% 0; }
  to   { background-position: -40% 0; }
}

/* ---------------- Aviso (vacío / error) ---------------- */
.aviso {
  margin-top: var(--e-5);
  padding: var(--e-5) var(--e-3);
  border: 2px dashed rgba(255, 59, 18, 0.55);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--e-2);
}
.aviso__titulo {
  font-family: var(--fuente-display);
  font-size: var(--paso-2);
  text-transform: uppercase;
  color: var(--rayo);
}
.aviso__texto { color: var(--texto-suave); font-size: var(--paso--1); max-width: 46ch; }

/* ==========================================================
   TU PEDIDO — barra fija inferior
   ========================================================== */
.resumen {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  background: var(--tinta-2);
  border-top: 3px solid var(--fuego);
  box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.55);
  padding-bottom: env(safe-area-inset-bottom);
  transition: transform var(--medio);
}
.resumen--completo { border-top-color: var(--verde); }

.resumen__manija {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  padding: var(--e-1) var(--e-3);
  background: rgba(243, 233, 215, 0.06);
  border-bottom: 1px solid rgba(243, 233, 215, 0.12);
}
.resumen__estado {
  font-family: var(--fuente-display);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--crema);
  text-align: left;
}
.resumen--completo .resumen__estado { color: var(--verde); }
.resumen__chevron {
  width: 10px; height: 10px;
  border-right: 2px solid var(--texto-suave);
  border-bottom: 2px solid var(--texto-suave);
  transform: rotate(-135deg);
  transition: transform var(--rapido);
  flex: 0 0 auto;
}
.resumen__manija[aria-expanded='true'] .resumen__chevron { transform: rotate(45deg); }

.resumen__cuerpo {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'slots precio' 'cta cta';
  align-items: center;
  gap: var(--e-2) var(--e-3);
  padding: var(--e-3) var(--e-3);
}
/* Las miniaturas crecen con el pedido: se pasan con el dedo si no entran. */
.resumen__slots {
  grid-area: slots;
  display: flex;
  gap: 6px;
  max-width: calc(42vw + 12px);
  overflow-x: auto;
  scrollbar-width: none;
  /* El carril recorta contra su padding box: este aire deja pasar el rebote de
     la miniatura recién agregada. Los márgenes negativos lo compensan, así el
     carril sigue alineado donde estaba. */
  padding: 6px;
  margin: -6px;
  scroll-padding-inline: 6px;
}
.resumen__slots::-webkit-scrollbar { display: none; }
.slot { flex: 0 0 auto; }
.resumen__precio { grid-area: precio; text-align: right; }
.resumen .boton--wa { grid-area: cta; width: 100%; }

.slot {
  width: 44px; height: 56px;
  border-radius: var(--radio);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--tinta-3);
  border: 1.5px dashed rgba(243, 233, 215, 0.3);
  color: var(--humo);
  font-family: var(--fuente-display);
  font-size: 0.7rem;
}
.slot--lleno { border-style: solid; border-color: var(--fuego); padding: 0; }
.slot--lleno img { width: 100%; height: 100%; object-fit: cover; }
/* Rebote al entrar, pero sin la inclinación del sello: en la fila de
   miniaturas se leen mejor derechas. */
.slot--nuevo { animation: slot-pop 300ms var(--ease) both; }
@keyframes slot-pop {
  from { opacity: 0; transform: scale(0.4); }
  60%  { transform: scale(1.14); }
  to   { opacity: 1; transform: scale(1); }
}
.slot--resto { border-style: solid; border-color: rgba(243, 233, 215, 0.35); color: var(--crema); }
/* El talle elegido, sobre la miniatura: se ve sin abrir el detalle. */
.slot__talle {
  position: absolute;
  right: -2px;
  bottom: -2px;
  padding: 0 4px;
  background: var(--fuego);
  color: var(--tinta);
  font-family: var(--fuente-display);
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.slot--lleno { position: relative; }

.resumen__linea-tachada {
  font-size: var(--paso--2);
  color: var(--humo);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.resumen__total { display: grid; justify-items: end; }
.resumen__total-etq {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--humo);
  white-space: nowrap;
}
.resumen__total-num {
  font-family: var(--fuente-display);
  font-size: var(--paso-2);
  line-height: 1;
  color: var(--crema);
  font-variant-numeric: tabular-nums;
}
.resumen__total-num--vacio {
  font-family: var(--fuente-texto);
  font-size: var(--paso--1);
  letter-spacing: 0.06em;
  color: var(--humo);
  text-transform: uppercase;
}
.resumen--completo .resumen__total-num { color: var(--verde); }
.resumen__ahorro {
  font-size: var(--paso--2);
  color: var(--verde);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.resumen__detalle {
  border-top: 1px solid rgba(243, 233, 215, 0.12);
  padding: var(--e-2) var(--e-3);
  max-height: 42svh;
  overflow-y: auto;
}
.resumen__detalle-titulo {
  font-family: var(--fuente-display);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--humo);
  margin-bottom: var(--e-1);
}
/* Aparece una vez generado el pedido: es el número que abre el mensaje. */
.resumen__codigo {
  font-family: var(--fuente-display);
  font-size: var(--paso--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crema);
  background: rgba(255, 59, 18, 0.18);
  border-left: 3px solid var(--fuego);
  padding: var(--e-1) var(--e-2);
  margin-bottom: var(--e-2);
}
.resumen__items { display: grid; gap: var(--e-1); }
.resumen__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  font-size: var(--paso--1);
  padding: 4px 0;
  border-bottom: 1px dotted rgba(243, 233, 215, 0.18);
}
.resumen__item-nombre { display: flex; flex-direction: column; }
.resumen__item-etq {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--verde);
}
.resumen__item-talle {
  font-size: var(--paso--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--crema);
}
/* MR-042 — la misma referencia que va en el mensaje y ve el administrador. */
.resumen__item-ref {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--rayo);
  font-weight: 700;
}
.resumen__item-derecha { display: flex; align-items: center; gap: var(--e-2); }
.resumen__item-precios { display: grid; justify-items: end; gap: 0; }
.resumen__item-lista {
  font-size: 0.66rem;
  color: var(--humo);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.resumen__item-precio {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 700;
  color: var(--crema);
}
.resumen__item-quitar {
  min-height: 32px;
  padding: 0 2px;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--humo);
  border-bottom: 1px solid currentColor;
  padding: 0;
  margin-left: var(--e-2);
}
.resumen__item-quitar:hover { color: var(--fuego); }

/* ==========================================================
   MODAL DE DATOS
   ========================================================== */
.modal {
  width: min(440px, calc(100vw - 2rem));
  margin: auto;
  background: transparent;
  max-height: calc(100svh - 2rem);
}
.modal__caja {
  background: var(--papel);
  color: var(--sobre-papel);
  border: 2px solid var(--sobre-papel);
  border-radius: var(--radio);
  box-shadow: var(--sombra-suave);
  padding: var(--e-4) var(--e-3);
  display: grid;
  gap: var(--e-2);
}
.modal__kicker {
  font-size: var(--paso--2);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fuego);
  font-family: var(--fuente-display);
}
.modal__titulo {
  font-family: var(--fuente-display);
  font-size: var(--paso-2);
  text-transform: uppercase;
  line-height: 0.95;
}
.modal__items {
  display: grid;
  gap: 2px;
  padding: var(--e-2) 0;
  border-block: 1px solid rgba(33, 26, 21, 0.25);
  font-size: var(--paso--1);
}
.modal__items li { display: flex; justify-content: space-between; gap: var(--e-2); padding: 3px 0; }
.modal__precios { display: grid; justify-items: end; white-space: nowrap; }
.modal__lista {
  font-style: normal;
  font-size: var(--paso--2);
  color: var(--sobre-papel-suave);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.modal__linea {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: var(--paso--1);
  color: var(--sobre-papel-suave);
}
/* El número de pedido, ya asignado: el cliente puede anotarlo o repetirlo. */
.modal__codigo {
  font-family: var(--fuente-display);
  font-size: var(--paso-0);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sobre-papel);
  background: rgba(255, 212, 0, 0.35);
  border-left: 4px solid var(--fuego);
  padding: var(--e-2);
}
.modal__ref {
  display: inline-block;
  font-style: normal;
  font-size: var(--paso--2);
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--sobre-papel-suave);
}
.modal__talle {
  display: block;
  font-style: normal;
  font-size: var(--paso--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sobre-papel-suave);
}
/* El teléfono no es obligatorio: se dice en la etiqueta y debajo del campo. */
.campo__opcional {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--sobre-papel-suave);
}
.campo__ayuda { font-size: var(--paso--2); color: var(--sobre-papel-suave); }

.modal__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--fuente-display);
  font-size: var(--paso-1);
  text-transform: uppercase;
}
.modal__ahorro {
  display: flex;
  justify-content: space-between;
  font-size: var(--paso--1);
  color: var(--verde-osc);
  font-weight: 700;
  margin-top: calc(var(--e-2) * -1);
}
.modal__nota { font-size: var(--paso--2); color: var(--sobre-papel-suave); }
.modal__acciones { display: flex; gap: var(--e-2); margin-top: var(--e-2); }
.modal__acciones .boton { flex: 1; }
.modal__acciones .boton--borde { color: var(--sobre-papel); border-color: var(--sobre-papel); }
.modal__acciones .boton--borde:hover { background: var(--sobre-papel); color: var(--papel); }
.modal__fallback { font-size: var(--paso--2); text-align: center; }
.modal__fallback a { color: var(--verde-osc); text-decoration: underline; font-weight: 700; }

.campo { display: grid; gap: 4px; }
.campo__etq {
  font-size: var(--paso--2);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sobre-papel-suave);
}
.campo__input {
  min-height: 46px;
  padding: 0 var(--e-2);
  background: #fff;
  border: 2px solid var(--sobre-papel);
  border-radius: var(--radio);
  color: var(--sobre-papel);
}
.campo__input::placeholder { color: #a89c8f; }
.campo__input:focus-visible { outline-color: var(--fuego); }
.campo__input[aria-invalid='true'] { border-color: var(--fuego); background: #fff5f2; }
.campo__error { font-size: var(--paso--2); color: #b3341f; min-height: 1em; font-weight: 700; }

/* ==========================================================
   AVISOS FLOTANTES
   ========================================================== */
.avisos {
  position: fixed;
  left: var(--e-3);
  right: var(--e-3);
  bottom: calc(var(--resumen-alto) + env(safe-area-inset-bottom) + var(--e-2));
  z-index: 80;
  display: grid;
  gap: var(--e-1);
  justify-items: center;
  pointer-events: none;
}
.toast {
  max-width: 32rem;
  padding: var(--e-2) var(--e-3);
  background: var(--crema);
  color: var(--sobre-papel);
  border: 2px solid var(--sobre-papel);
  border-radius: var(--radio);
  box-shadow: var(--sombra-dura);
  font-family: var(--fuente-display);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  animation: toast-entra 260ms var(--ease) both;
}
.toast--alerta { background: var(--fuego); color: var(--tinta); border-color: var(--tinta); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4); }
.toast--ok { background: var(--rayo); color: var(--tinta); }
.toast--saliendo { animation: toast-salida 220ms var(--ease) both; }

@keyframes toast-entra {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes toast-salida {
  to { opacity: 0; transform: translateY(-8px) scale(0.98); }
}