/* ============================================================
   GANGAZO — capa 2
   Modo oscuro por componente, hero nuevo, tarjetas ampliadas,
   favoritos, esqueletos de carga, filtros en móvil y cupones.
   Se carga después de styles.css y sólo añade o ajusta.
   ============================================================ */

/* ---------- A. Ajustes de modo oscuro por componente ----------
   Las bandas que en claro son "tinta sobre crema" se invertirían solas
   y quedarían blancas. Se fijan a mano. */
:root[data-tema="oscuro"] .ticker { background: #000; color: var(--lima); }
:root[data-tema="oscuro"] .pie { background: #000; color: var(--tinta); }
:root[data-tema="oscuro"] .banda-tinta { background: #0C0A08; color: var(--tinta); --notch: #0C0A08; }
:root[data-tema="oscuro"] .banda-tinta h2,
:root[data-tema="oscuro"] .banda-tinta h3 { color: var(--tinta); }
:root[data-tema="oscuro"] .banda-lima { background: var(--lima-osc); color: #14120F; --notch: var(--lima-osc); }
:root[data-tema="oscuro"] .banda-lima .seccion__kicker { color: #14120F; }
:root[data-tema="oscuro"] .banda-lima .garantia p { color: #14120F; }
:root[data-tema="oscuro"] .btn { background: var(--tinta); color: var(--crema); }
:root[data-tema="oscuro"] .btn-lima { background: var(--lima); color: var(--sobre-lima); }
:root[data-tema="oscuro"] .btn-hueco { background: transparent; color: var(--tinta); }
:root[data-tema="oscuro"] .btn-hueco:hover { background: var(--tinta); color: var(--crema); }
:root[data-tema="oscuro"] .logo__chip { color: var(--sobre-lima); }
:root[data-tema="oscuro"] .buscador button { color: var(--sobre-lima); }
:root[data-tema="oscuro"] .chip[aria-current="true"],
:root[data-tema="oscuro"] .chip.activo { color: var(--sobre-lima); }
:root[data-tema="oscuro"] .reloj__caja { background: #000; }
:root[data-tema="oscuro"] .marca-top,
:root[data-tema="oscuro"] .marca-destacada { color: var(--sobre-lima); }
:root[data-tema="oscuro"] .medalla { color: var(--sobre-lima); }
:root[data-tema="oscuro"] .vacio .medalla .ico { color: var(--sobre-lima); }
:root[data-tema="oscuro"] .tesela:hover { color: var(--sobre-lima); }
:root[data-tema="oscuro"] .tesela:hover small { color: var(--sobre-lima); opacity: .75; }
:root[data-tema="oscuro"] .stock__relleno { background: var(--lima); }
:root[data-tema="oscuro"] img { filter: brightness(.94); }

/* La transición de tema no debe arrastrar a las animaciones de entrada. */
body, .cab, .pie, .cupon, .tesela, .compra, .resumen, .filtros {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
@media (prefers-reduced-motion: reduce) {
  body, .cab, .pie, .cupon, .tesela, .compra, .resumen, .filtros { transition: none; }
}

/* ---------- B. Acciones de la cabecera ---------- */
.cab__acciones { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.accion {
  position: relative;
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  background: var(--papel);
  border: 2px solid var(--linea); border-radius: 50%;
  transition: background-color .14s ease, transform .14s ease, color .14s ease;
}
.accion:hover { background: var(--lima); color: var(--sobre-lima); transform: translateY(-2px); }
.accion .ico { width: 1.2em; height: 1.2em; }
.accion--carrito { background: var(--lima); color: var(--sobre-lima); }
.accion--carrito:hover { background: var(--tinta); color: var(--crema); }
.accion__n {
  position: absolute; top: -5px; right: -5px;
  min-width: 21px; height: 21px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--coral); color: #fff;
  border: 2px solid var(--linea); border-radius: 100px;
  font-family: var(--display); font-size: .7rem; line-height: 1;
}
.accion__n[hidden] { display: none; }

/* En pantallas chicas sobran botones: se dejan los imprescindibles. */
@media (max-width: 640px) {
  .accion[href="mi-cuenta.html"] { display: none; }
}

.chip--comercios { background: var(--lima); color: var(--sobre-lima); }
.chip--comercios:hover { background: var(--tinta); color: var(--crema); }

/* ---------- C. Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 2px solid var(--linea);
  padding-block: clamp(38px, 6vw, 86px) clamp(34px, 5vw, 74px);
}

/* Fondo: dos manchas de color que respiran muy despacio. Sólo opacity y
   transform, así el compositor lo resuelve sin repintar. */
.hero__fondo {
  position: absolute; inset: -20% -10%;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 44% at 18% 22%, rgba(216,243,43,.42), transparent 70%),
    radial-gradient(34% 40% at 82% 30%, rgba(255,74,46,.24), transparent 70%),
    radial-gradient(40% 46% at 60% 88%, rgba(216,243,43,.24), transparent 72%);
  animation: respirar 18s ease-in-out infinite alternate;
  will-change: transform;
}
:root[data-tema="oscuro"] .hero__fondo { opacity: .5; }
@keyframes respirar {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to   { transform: translate3d(1.5%, 1.5%, 0) scale(1.06); }
}

.hero__rejilla {
  position: relative; z-index: 1;
  display: grid; gap: clamp(28px, 4vw, 54px);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 960px) {
  .hero__rejilla { grid-template-columns: 1.02fr .98fr; }
}

.hero__marca {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .42em .95em;
  background: var(--papel);
  border: 2px solid var(--linea); border-radius: 100px;
  font-size: .82rem; font-weight: 600;
  margin-bottom: 1.1em;
}
.hero__marca .ico { width: 1.05em; height: 1.05em; color: var(--coral); }
.hero__marca b { font-family: var(--display); font-weight: 400; letter-spacing: .02em; }

.hero__titulo {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(2.9rem, 7.4vw, 5.6rem);
  line-height: .94; letter-spacing: -0.012em;
  margin: 0 0 .38em;
}
.hero__titulo em { font-style: normal; display: block; color: var(--coral); }

.hero__bajada {
  font-size: clamp(1.03rem, 1.45vw, 1.22rem);
  color: var(--tinta-70);
  max-width: 48ch; margin: 0 0 1.7em;
}

.hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 2.1em; }

.hero__cifras {
  display: flex; flex-wrap: wrap;
  gap: clamp(16px, 3vw, 42px);
  padding-top: 1.5em;
  border-top: 2px dashed var(--tinta-45);
}
.hero__cifra strong {
  display: block;
  font-family: var(--display); font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.hero__cifra span {
  font-size: .8rem; color: var(--tinta-70);
  text-transform: uppercase; letter-spacing: .08em;
}

/* Entrada escalonada del hero */
.hero__entra { opacity: 0; transform: translateY(20px); }
.cargado .hero__entra {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
.cargado .hero__entra:nth-child(1) { transition-delay: .05s; }
.cargado .hero__entra:nth-child(2) { transition-delay: .13s; }
.cargado .hero__entra:nth-child(3) { transition-delay: .21s; }
.cargado .hero__entra:nth-child(4) { transition-delay: .29s; }
.cargado .hero__entra:nth-child(5) { transition-delay: .37s; }
@media (prefers-reduced-motion: reduce) {
  .hero__entra { opacity: 1; transform: none; transition: none; }
  .hero__fondo { animation: none; }
}

/* Tarjeta destacada flotando muy suave */
.hero__tarjeta { position: relative; }
.hero__tarjeta .destacada { animation: flotar 7s ease-in-out infinite; will-change: transform; }
@keyframes flotar {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -9px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__tarjeta .destacada { animation: none; }
}

/* Etiquetas flotantes alrededor de la tarjeta */
.flotante {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: .45em;
  padding: .5em .9em;
  background: var(--papel);
  border: 2px solid var(--linea); border-radius: 100px;
  box-shadow: var(--sombra-s);
  font-size: .82rem; font-weight: 600;
  white-space: nowrap;
  animation: flotar 6s ease-in-out infinite;
}
.flotante .ico { width: 1.05em; height: 1.05em; color: var(--verde); }
.flotante--1 { left: -14px; top: 16%; animation-delay: .8s; }
.flotante--2 { right: -10px; bottom: 22%; animation-delay: 2.1s; }
@media (max-width: 700px) {
  .flotante--1 { left: 2px; }
  .flotante--2 { right: 2px; }
}
@media (prefers-reduced-motion: reduce) { .flotante { animation: none; } }

/* ---------- D. Tarjeta de oferta ---------- */
.cupon { --elev: 0; }
.cupon:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra);
}
.cupon:focus-within { box-shadow: var(--sombra); }

.cupon__meta {
  display: flex; align-items: center; gap: .4em;
  flex-wrap: wrap;
}
.cupon__punto { opacity: .5; }
.cupon__cerca {
  display: inline-flex; align-items: center; gap: .25em;
  color: var(--verde); font-weight: 700;
}
.cupon__cerca .ico { width: .9em; height: .9em; }

.cupon__social {
  display: flex; align-items: center; gap: .7em;
  flex-wrap: wrap; margin: 0;
}
.cupon__compras {
  font-size: .8rem; color: var(--tinta-70);
}

.cupon__pie { position: relative; z-index: 3; padding: 0 16px 16px; }

/* Botón de favoritos */
.favorito {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  display: grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
  background: var(--papel); color: var(--tinta-70);
  border: 2px solid var(--linea); border-radius: 50%;
  transition: transform .14s ease, background-color .14s ease, color .14s ease;
}
.favorito .ico { width: 1.15em; height: 1.15em; fill: none; stroke-width: 2; }
.favorito:hover { transform: scale(1.1); color: var(--coral); }
.favorito.activo { color: var(--coral); }
.favorito.activo .ico { fill: var(--coral); }
.favorito.latido { animation: latido .45s cubic-bezier(.2,.7,.3,1); }
@keyframes latido {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.32); }
  62%  { transform: scale(.94); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .favorito.latido { animation: none; }
}

/* el sello se corre para no chocar con el corazón */
.cupon .sello { right: 54px; }

/* Etiquetas de estado */
.marca-destacada { background: var(--lima); color: var(--sobre-lima); }
.marca-urgente {
  background: var(--coral); color: #fff;
  animation: pulso 2.4s ease-in-out infinite;
}
@keyframes pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,74,46,.55); }
  55%      { box-shadow: 0 0 0 7px rgba(255,74,46,0); }
}
@media (prefers-reduced-motion: reduce) { .marca-urgente { animation: none; } }

/* ---------- E. Esqueletos de carga ---------- */
.esqueleto {
  background: linear-gradient(90deg, var(--crema-2) 25%, var(--papel) 50%, var(--crema-2) 75%);
  background-size: 300% 100%;
  animation: brillar 1.3s linear infinite;
  border-radius: 8px;
}
@keyframes brillar { to { background-position: -300% 0; } }
.esqueleto--foto { aspect-ratio: 4 / 3; border-radius: 12px 12px 0 0; }
.esqueleto--linea { height: 13px; margin-bottom: 9px; }
.esqueleto--linea.corta { width: 42%; }
.esqueleto--linea.media { width: 70%; }
.esqueleto-cupon {
  border: 2px solid var(--linea); border-radius: var(--r-m);
  background: var(--papel); overflow: hidden;
}
.esqueleto-cupon__cuerpo { padding: 16px; }
@media (prefers-reduced-motion: reduce) { .esqueleto { animation: none; } }

/* ---------- F. Aviso flotante ---------- */
.aviso-flotante {
  position: fixed; left: 50%; bottom: 22px; z-index: 200;
  transform: translate(-50%, 20px);
  padding: .8em 1.3em;
  background: var(--tinta); color: var(--crema);
  border: 2px solid var(--linea); border-radius: 100px;
  box-shadow: var(--sombra-s);
  font-size: .9rem; font-weight: 600;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  max-width: min(92vw, 420px); text-align: center;
}
.aviso-flotante.visible { opacity: 1; transform: translate(-50%, 0); }
.aviso-flotante--error { background: var(--coral); color: #fff; }
:root[data-tema="oscuro"] .aviso-flotante { background: var(--papel); color: var(--tinta); }

/* ---------- G. WhatsApp flotante ---------- */
.wa-flotante {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  display: inline-flex; align-items: center; gap: .55em;
  padding: .7em 1.05em;
  background: #17A34A; color: #fff;
  border: 2px solid var(--linea); border-radius: 100px;
  box-shadow: var(--sombra-s);
  font-size: .88rem; font-weight: 700;
  transition: transform .14s ease, box-shadow .14s ease;
}
.wa-flotante:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.wa-flotante .ico { width: 1.35em; height: 1.35em; stroke-width: 1.8; }
@media (max-width: 720px) {
  .wa-flotante span { display: none; }
  .wa-flotante { padding: .8em; border-radius: 50%; bottom: 84px; }
}

/* ---------- H. Pie: redes y aviso ---------- */
.redes { display: flex; gap: 10px; margin-top: 1.2em; }
.redes a {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 2px solid currentColor; border-radius: 50%;
  opacity: .75;
  transition: opacity .14s ease, transform .14s ease;
}
.redes a:hover { opacity: 1; transform: translateY(-2px); }
.redes .ico { width: 1.2em; height: 1.2em; }

.aviso-demo {
  display: flex; gap: .9em; align-items: flex-start;
  background: transparent; color: inherit;
  border: 2px dashed currentColor; border-radius: var(--r-m);
  padding: 14px 18px;
  font-size: .84rem; line-height: 1.55;
  margin-bottom: 32px;
  opacity: .72;
}
.aviso-demo p { margin: 0; }
.aviso-demo .ico { width: 1.4em; height: 1.4em; margin-top: .1em; }
.aviso-demo b { font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; }
.aviso-demo a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- I. Ubicación ---------- */
.ubicacion-barra {
  display: flex; align-items: center; gap: .7em; flex-wrap: wrap;
  padding: 12px 0;
}
.ubicacion-barra .ico { color: var(--coral); }
.selector-ciudad {
  font: inherit; font-size: .9rem; font-weight: 600;
  padding: .45em 2.1em .45em .8em;
  border: 2px solid var(--linea); border-radius: 100px;
  background: var(--papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23857B70' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .65em center / .95em;
  color: var(--tinta); appearance: none; cursor: pointer;
}

/* ---------- J. Filtros en móvil ---------- */
.abrir-filtros {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .6em 1.1em;
  border: 2px solid var(--linea); border-radius: 100px;
  background: var(--papel); font-size: .9rem; font-weight: 600;
}
.abrir-filtros__n {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--coral); color: #fff; border-radius: 100px;
  font-size: .72rem; font-weight: 700;
}
.filtros__cerrar { display: none; }

@media (min-width: 940px) {
  .abrir-filtros { display: none; }
}
@media (max-width: 939px) {
  .panel-filtros {
    position: fixed; inset: 0; z-index: 120;
    background: rgba(0,0,0,.45);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
  }
  .panel-filtros.abierto { opacity: 1; pointer-events: auto; }
  .panel-filtros .filtros {
    position: absolute; left: 0; right: 0; bottom: 0;
    max-height: 86vh; overflow-y: auto;
    border-radius: var(--r-l) var(--r-l) 0 0;
    border-width: 2px 0 0;
    transform: translateY(100%);
    transition: transform .26s cubic-bezier(.2,.7,.3,1);
    padding-bottom: 90px;
  }
  .panel-filtros.abierto .filtros { transform: none; }
  .filtros__cerrar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin: -4px 0 4px;
  }
  .filtros__cerrar h2 { font-size: 1.2rem; }
  .filtros__cerrar button {
    display: grid; place-items: center;
    width: 38px; height: 38px; padding: 0;
    background: var(--crema); border: 2px solid var(--linea); border-radius: 50%;
  }
  .filtros__aplicar {
    position: sticky; bottom: 0;
    margin: 14px -18px -18px; padding: 14px 18px;
    background: var(--papel); border-top: 2px solid var(--linea);
  }
}
@media (min-width: 940px) {
  .filtros__aplicar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .panel-filtros, .panel-filtros .filtros { transition: none; }
}

/* ---------- K. Barra fija de compra en móvil ---------- */
.compra-fija {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none;
  align-items: center; gap: 12px;
  padding: 12px var(--gutter);
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--papel);
  border-top: 2px solid var(--linea);
}
.compra-fija__precio { display: grid; line-height: 1.1; }
.compra-fija__precio b { font-family: var(--display); font-size: 1.5rem; }
.compra-fija__precio s { font-size: .8rem; color: var(--tinta-45); }
.compra-fija .btn { flex: 1; }
@media (max-width: 979px) {
  .compra-fija { display: flex; }
  body.con-barra-compra { padding-bottom: 84px; }
}

/* ---------- L. Preguntas frecuentes ---------- */
.faq { display: grid; gap: 10px; }
.faq details {
  border: 2px solid var(--linea); border-radius: var(--r-m);
  background: var(--papel);
  overflow: hidden;
}
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px;
  font-weight: 600; cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-family: var(--display); font-size: 1.4rem; line-height: 1;
  transition: transform .18s ease;
  flex: none;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details[open] summary { background: var(--crema-2); }
.faq p { margin: 0; padding: 4px 16px 16px; color: var(--tinta-70); font-size: .95rem; }

/* ---------- M. Horarios y mapa ---------- */
.horarios { display: grid; gap: 2px; }
.horario {
  display: flex; justify-content: space-between; gap: 14px;
  padding: .55em 0;
  border-bottom: 1px dashed var(--tinta-45);
  font-size: .93rem;
}
.horario:last-child { border-bottom: 0; }
.horario b { font-weight: 600; }
.horario.hoy { color: var(--verde); font-weight: 700; }

.mapa-falso {
  position: relative;
  aspect-ratio: 16 / 8;
  border: 2px solid var(--linea); border-radius: var(--r-m);
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 49.4%, var(--crema-2) 49.4% 50.6%, transparent 50.6%) 0 0 / 62px 62px,
    linear-gradient(0deg, transparent 49.4%, var(--crema-2) 49.4% 50.6%, transparent 50.6%) 0 0 / 62px 62px,
    radial-gradient(70% 80% at 30% 20%, rgba(216,243,43,.28), transparent 70%),
    var(--papel);
}
.mapa-falso__pin {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -100%);
  display: grid; place-items: center;
  width: 44px; height: 44px;
  background: var(--coral); color: #fff;
  border: 2px solid var(--linea); border-radius: 50% 50% 50% 8px;
  rotate: -45deg;
  box-shadow: var(--sombra-s);
}
.mapa-falso__pin .ico { rotate: 45deg; width: 1.2em; height: 1.2em; }
.mapa-falso__nota {
  position: absolute; left: 12px; bottom: 12px; right: 12px;
  padding: .6em .9em;
  background: var(--papel); border: 2px solid var(--linea); border-radius: 10px;
  font-size: .82rem; color: var(--tinta-70);
}

/* ---------- N. Cupón comprado y QR ---------- */
.cupon-emitido {
  position: relative;
  background: var(--papel);
  border: 2px solid var(--linea); border-radius: var(--r-l);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.cupon-emitido__cab {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  background: var(--lima); color: var(--sobre-lima);
  border-bottom: 2px dashed var(--linea);
}
.cupon-emitido__cab .ico { width: 1.5em; height: 1.5em; }
.cupon-emitido__cab b { font-family: var(--display); text-transform: uppercase; letter-spacing: .03em; }
.cupon-emitido__cuerpo {
  display: grid; gap: 18px;
  grid-template-columns: 1fr;
  padding: 20px;
}
@media (min-width: 620px) {
  .cupon-emitido__cuerpo { grid-template-columns: 168px 1fr; }
}
.qr {
  width: 168px; height: 168px;
  padding: 8px;
  background: #fff;
  border: 2px solid var(--linea); border-radius: 12px;
  image-rendering: pixelated;
}
.qr svg { width: 100%; height: 100%; display: block; }
.codigo-cupon {
  display: inline-block;
  font-family: var(--display); font-size: 1.5rem; letter-spacing: .08em;
  padding: .3em .7em;
  background: var(--crema-2);
  border: 2px dashed var(--linea); border-radius: 10px;
  margin: .3em 0 .8em;
  user-select: all;
}
.cupon-datos { display: grid; gap: .5em; font-size: .92rem; }
.cupon-datos div { display: flex; justify-content: space-between; gap: 14px; }
.cupon-datos dt { color: var(--tinta-70); }
.cupon-datos dd { margin: 0; font-weight: 600; text-align: right; }

.estado {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .3em .8em;
  border: 2px solid var(--linea); border-radius: 100px;
  font-family: var(--display); font-size: .75rem;
  text-transform: uppercase; letter-spacing: .07em;
}
.estado--disponible { background: var(--lima); color: var(--sobre-lima); }
.estado--canjeado { background: var(--verde); color: #fff; }
.estado--expirado { background: var(--crema-2); color: var(--tinta-70); }
.estado--reembolsado { background: var(--coral); color: #fff; }

/* Confeti muy discreto tras una compra */
.confeti { position: fixed; inset: 0; z-index: 150; pointer-events: none; overflow: hidden; }
.confeti i {
  position: absolute; top: -14px;
  width: 8px; height: 13px;
  opacity: .9;
  animation: caer 2.4s cubic-bezier(.25,.6,.4,1) forwards;
}
@keyframes caer {
  to { transform: translateY(104vh) rotate(540deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .confeti { display: none; } }

/* ---------- O. Sellos de confianza ---------- */
.confianza {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.sello-confianza {
  display: flex; align-items: center; gap: .6em;
  padding: .7em .9em;
  border: 2px solid var(--linea); border-radius: 12px;
  background: var(--papel);
  font-size: .84rem; font-weight: 600; line-height: 1.25;
}
.sello-confianza .ico { width: 1.4em; height: 1.4em; color: var(--verde); }

/* ---------- P. Cuenta de usuario ---------- */
.cuenta {
  display: grid; gap: clamp(20px, 3vw, 36px);
  grid-template-columns: 1fr;
  align-items: start;
  padding-block: clamp(24px, 4vw, 44px);
}
@media (min-width: 900px) { .cuenta { grid-template-columns: 260px 1fr; } }

.menu-cuenta {
  background: var(--papel);
  border: 2px solid var(--linea); border-radius: var(--r-m);
  padding: 14px;
  display: grid; gap: 4px;
}
.menu-cuenta a {
  display: flex; align-items: center; gap: .7em;
  padding: .7em .9em;
  border-radius: 10px;
  font-size: .94rem; font-weight: 500;
}
.menu-cuenta a:hover { background: var(--crema-2); }
.menu-cuenta a[aria-current="page"] { background: var(--lima); color: var(--sobre-lima); font-weight: 700; }
.menu-cuenta .ico { width: 1.15em; height: 1.15em; }
.menu-cuenta__n {
  margin-left: auto;
  font-size: .78rem; font-weight: 700;
  background: var(--crema-2); border-radius: 100px; padding: .1em .6em;
}

.tarjetas-dato {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-bottom: clamp(22px, 3vw, 32px);
}
.tarjeta-dato {
  background: var(--papel);
  border: 2px solid var(--linea); border-radius: var(--r-m);
  padding: 16px;
}
.tarjeta-dato b {
  display: block;
  font-family: var(--display); font-size: 1.9rem; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tarjeta-dato span {
  font-size: .8rem; color: var(--tinta-70);
  text-transform: uppercase; letter-spacing: .06em;
}

/* ---------- Q. Formularios de acceso ---------- */
.acceso {
  max-width: 440px; margin-inline: auto;
  background: var(--papel);
  border: 2px solid var(--linea); border-radius: var(--r-l);
  box-shadow: var(--sombra);
  padding: clamp(22px, 4vw, 34px);
}
.acceso h1 { font-size: 1.8rem; margin-bottom: .3em; }
.acceso__nota { color: var(--tinta-70); font-size: .92rem; margin: 0 0 1.6em; }
.pestanas {
  display: flex; gap: 6px; margin-bottom: 1.6em;
  background: var(--crema-2); border-radius: 100px; padding: 5px;
}
.pestanas button {
  flex: 1; padding: .6em 1em; border: 0; border-radius: 100px;
  background: transparent; font-weight: 600; font-size: .92rem;
  transition: background-color .14s ease;
}
.pestanas button[aria-selected="true"] { background: var(--papel); box-shadow: var(--sombra-s); }
.acceso__pie { text-align: center; font-size: .88rem; color: var(--tinta-70); margin: 1.4em 0 0; }
.acceso__pie a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- R. Detalles varios ---------- */
.encabezado-pag--corto { padding-block: clamp(14px, 2vw, 22px); }

.cinta-seccion {
  display: flex; align-items: center; gap: .6em;
  font-family: var(--display); text-transform: uppercase;
  letter-spacing: .06em; font-size: .85rem;
}

.galeria-miniaturas {
  display: flex; gap: 10px; margin-top: 12px;
  overflow-x: auto; scrollbar-width: none;
}
.galeria-miniaturas::-webkit-scrollbar { display: none; }
.galeria-miniaturas button {
  flex: none;
  width: 88px; aspect-ratio: 4/3;
  padding: 0; overflow: hidden;
  border: 2px solid var(--linea); border-radius: 10px;
  background: var(--crema-2);
  opacity: .55;
  transition: opacity .14s ease, transform .14s ease;
}
.galeria-miniaturas button:hover { opacity: .85; transform: translateY(-2px); }
.galeria-miniaturas button[aria-current="true"] { opacity: 1; box-shadow: var(--sombra-s); }
.galeria-miniaturas img { width: 100%; height: 100%; object-fit: cover; }

.wa-comercio {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .7em 1.1em;
  border: 2px solid var(--linea); border-radius: 100px;
  background: #17A34A; color: #fff;
  font-size: .9rem; font-weight: 700;
  box-shadow: var(--sombra-s);
  transition: transform .14s ease;
}
.wa-comercio:hover { transform: translateY(-2px); }

/* Rejilla vacía de favoritos */
.vacio .ico { color: var(--tinta-45); }

/* Scroll horizontal: nada debe desbordar */
html, body { max-width: 100%; }
.rejilla, .mosaico, .pasos, .garantias, .confianza { min-width: 0; }
.cupon, .tesela, .tarjeta-dato { min-width: 0; }