/* =========================================================
   MI CARTA MÁGICA · Hoja de estilos
   ---------------------------------------------------------
   Organización:
   1. Variables y temas (Santa / Reyes)
   2. Base y utilidades
   3. Capas de fondo (orbes, partículas, efectos)
   4. Encabezado y progreso
   5. Pasos y contenedores
   6. Paso 1 · Tarjetas de destinatario
   7. Paso 2 · Formulario amigable
   8. Paso 3 · Estudio: panel de stickers + carta
   9. Paso 4 · Certificado
   10. Botones y micro-detalles
   11. Responsividad y accesibilidad
   ========================================================= */

/* =========================================================
   1. VARIABLES Y TEMAS
   ========================================================= */
:root {
  --fuente-ui: 'Fredoka', 'Segoe UI', system-ui, sans-serif;
  --fuente-mano: 'Caveat', 'Segoe Script', cursive;

  /* Vidrio (glassmorphism) */
  --vidrio: rgba(255, 255, 255, 0.09);
  --vidrio-fuerte: rgba(255, 255, 255, 0.14);
  --borde-vidrio: rgba(255, 255, 255, 0.28);
  --sombra-suave: 0 18px 50px rgba(0, 0, 0, 0.38);

  /* Papel de la carta */
  --papel: #fdf6e4;
  --papel-2: #f6e9cd;
  --tinta: #4a3527;
  --tinta-suave: rgba(74, 53, 39, 0.55);

  --radio: 22px;
  --radio-sm: 14px;
  --alto-encabezado: 68px;
}

/* --- Tema SANTA CLAUS: rojos cálidos, dorado y nieve --- */
body[data-tema='santa'] {
  --fondo-a: #4a0a18;
  --fondo-b: #8a1226;
  --fondo-c: #26060f;
  --acento: #ff4d5e;
  --acento-oscuro: #c1122b;
  --oro: #ffd166;
  --oro-claro: #ffeab8;
  --texto: #fff5f2;
  --texto-suave: rgba(255, 240, 236, 0.72);
  --resplandor: rgba(255, 209, 102, 0.55);
  --particula: #ffffff;
}

/* --- Tema REYES MAGOS: noche azul profunda y estrellas --- */
body[data-tema='reyes'] {
  --fondo-a: #0a1140;
  --fondo-b: #1a2a7a;
  --fondo-c: #03051c;
  --acento: #6f8bff;
  --acento-oscuro: #2d3fb5;
  --oro: #f7c948;
  --oro-claro: #ffe9a8;
  --texto: #f2f5ff;
  --texto-suave: rgba(230, 236, 255, 0.72);
  --resplandor: rgba(247, 201, 72, 0.5);
  --particula: #ffe9a8;
}

/* =========================================================
   2. BASE Y UTILIDADES
   ========================================================= */

/* El padding y el borde cuentan DENTRO del ancho declarado.
   Sin esto, cualquier caja con width:100% más padding se sale
   de la pantalla y aparece scroll horizontal en el celular. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Cinturón de seguridad: nada puede provocar desplazamiento lateral */
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--fuente-ui);
  color: var(--texto);
  background: linear-gradient(165deg, var(--fondo-a) 0%, var(--fondo-b) 48%, var(--fondo-c) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background 900ms ease;
}

/* Única utilidad que usábamos de Tailwind; ya no hace falta cargar el CDN */
.text-center { text-align: center; }

/* Oculto visualmente pero disponible para lectores de pantalla */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.panel-vidrio {
  background: var(--vidrio);
  border: 1px solid var(--borde-vidrio);
  border-radius: var(--radio);
  box-shadow: var(--sombra-suave), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.panel-vidrio--form {
  width: min(560px, 100%);
  padding: 28px 24px 30px;
  margin: 0 auto;
}

.ojo {
  margin: 0 0 6px;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oro-claro);
  opacity: 0.9;
}

.titulo-magico {
  margin: 0 0 10px;
  font-family: var(--fuente-ui);
  font-size: clamp(2.3rem, 8vw, 4.2rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, #fff 8%, var(--oro-claro) 55%, var(--oro) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px var(--resplandor));
  animation: latido-brillo 4.5s ease-in-out infinite;
}

.titulo-magico--sm {
  font-size: clamp(1.6rem, 5.4vw, 2.4rem);
}

@keyframes latido-brillo {
  0%, 100% { filter: drop-shadow(0 0 16px var(--resplandor)); }
  50%      { filter: drop-shadow(0 0 34px var(--resplandor)); }
}

.titulo-seccion {
  margin: 0 0 4px;
  font-size: clamp(1.35rem, 4.5vw, 1.85rem);
  font-weight: 600;
  color: var(--texto);
}

.subtitulo {
  margin: 0 auto 26px;
  max-width: 34ch;
  font-size: clamp(1rem, 2.6vw, 1.2rem);
  font-weight: 400;
  color: var(--texto-suave);
}

.subtitulo--sm {
  font-size: 0.98rem;
  margin-bottom: 20px;
  max-width: none;
}

.nota-pie {
  margin: 26px 0 0;
  font-size: 0.9rem;
  color: var(--texto-suave);
}

.pista {
  margin: 12px 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--texto-suave);
}

/* =========================================================
   3. CAPAS DE FONDO
   ========================================================= */
.fondo-orbes {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.orbe {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  animation: flotar-orbe 18s ease-in-out infinite;
}

.orbe--1 { width: 46vw; height: 46vw; top: -12vh; left: -8vw;  background: var(--acento); }
.orbe--2 { width: 38vw; height: 38vw; bottom: -14vh; right: -6vw; background: var(--oro); opacity: 0.32; animation-delay: -6s; }
.orbe--3 { width: 30vw; height: 30vw; top: 42%; left: 55%; background: var(--acento-oscuro); opacity: 0.35; animation-delay: -12s; }

@keyframes flotar-orbe {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(3vw, 4vh, 0) scale(1.12); }
}

/* Partículas (nieve o estrellas) creadas e impulsadas por anime.js */
.capa-particulas {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.particula {
  position: absolute;
  top: -6vh;
  color: var(--particula);
  line-height: 1;
  user-select: none;
  will-change: transform, opacity;
  text-shadow: 0 0 10px var(--resplandor);
}

/* Capa para chispas puntuales (clic del botón, estela de la carta) */
.capa-efectos {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  overflow: hidden;
}

.chispa {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--oro) 45%, transparent 72%);
  will-change: transform, opacity;
}

/* =========================================================
   4. ENCABEZADO Y PROGRESO
   ========================================================= */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--alto-encabezado);
  padding: 10px clamp(12px, 3vw, 26px);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.marca {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--texto);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.marca__icono { font-size: 1.25rem; }

.btn-atras {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--borde-vidrio);
  background: var(--vidrio);
  color: var(--texto);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease;
}
.btn-atras:hover { transform: translateX(-3px); background: var(--vidrio-fuerte); }

.progreso {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.progreso__punto {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--texto-suave);
  opacity: 0.55;
  transition: opacity 300ms ease, color 300ms ease;
}

.progreso__punto i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 var(--resplandor);
  transition: transform 300ms ease, box-shadow 300ms ease, background 300ms ease;
}

.progreso__punto.is-activo {
  opacity: 1;
  color: var(--oro-claro);
}
.progreso__punto.is-activo i {
  transform: scale(1.45);
  background: var(--oro);
  box-shadow: 0 0 14px 3px var(--resplandor);
}
.progreso__punto.is-completo { opacity: 0.9; color: var(--oro-claro); }

/* En pantallas chicas dejamos sólo los puntos */
@media (max-width: 700px) {
  .progreso__punto b { display: none; }
  .progreso { gap: 8px; }
}

/* =========================================================
   5. PASOS Y CONTENEDORES
   ========================================================= */
.app {
  position: relative;
  z-index: 2;
}

.paso {
  display: flex;
  align-items: center;
  justify-content: center;
  /* restamos el encabezado y el pie para que ambos quepan sin scroll */
  min-height: calc(100vh - var(--alto-encabezado) - 62px);
  padding: clamp(14px, 3vw, 34px) clamp(14px, 4vw, 32px) 48px;
}

.paso[hidden] { display: none; }

.paso__contenido {
  width: min(1100px, 100%);
}

.paso__contenido--ancho { width: min(1220px, 100%); }

/* =========================================================
   6. PASO 1 · TARJETAS DE DESTINATARIO
   ========================================================= */
.tarjetas-destino {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 3vw, 28px);
  max-width: 760px;
  margin: 0 auto;
}

@media (min-width: 720px) {
  .tarjetas-destino { grid-template-columns: 1fr 1fr; }
}

.tarjeta-destino {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 26px 20px 22px;
  border-radius: 28px;
  border: 1px solid var(--borde-vidrio);
  background: var(--vidrio);
  box-shadow: var(--sombra-suave), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  cursor: pointer;
  overflow: hidden;
  color: var(--texto);
  transition: transform 320ms cubic-bezier(0.2, 0.9, 0.3, 1.3),
              box-shadow 320ms ease,
              border-color 320ms ease;
}

.tarjeta-destino:hover,
.tarjeta-destino:focus-visible {
  transform: translateY(-10px) scale(1.025);
  border-color: var(--oro);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.48), 0 0 40px -6px var(--resplandor);
}

/* Halo que gira suavemente detrás de la tarjeta */
.tarjeta-destino__brillo {
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 0deg, transparent 0deg, var(--resplandor) 60deg, transparent 140deg);
  opacity: 0;
  transition: opacity 400ms ease;
  animation: girar 7s linear infinite;
  pointer-events: none;
}
.tarjeta-destino:hover .tarjeta-destino__brillo { opacity: 0.35; }

@keyframes girar { to { transform: rotate(360deg); } }

.tarjeta-destino__img {
  width: clamp(130px, 30vw, 190px);
  height: auto;
  margin-bottom: 6px;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.45));
  transition: transform 420ms cubic-bezier(0.2, 0.9, 0.3, 1.4);
  pointer-events: none;
}
.tarjeta-destino:hover .tarjeta-destino__img { transform: translateY(-8px) rotate(-3deg) scale(1.06); }

.tarjeta-destino__nombre {
  font-size: clamp(1.35rem, 4vw, 1.75rem);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.45);
}

.tarjeta-destino__desc {
  font-size: 0.95rem;
  color: var(--texto-suave);
}

.tarjeta-destino__cta {
  margin-top: 14px;
  padding: 9px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  color: #2a1206;
  background: linear-gradient(135deg, var(--oro-claro), var(--oro));
  box-shadow: 0 8px 22px -6px var(--resplandor);
}

/* Cada tarjeta insinúa su propio tema aunque el fondo global cambie */
.tarjeta-destino--santa { background: linear-gradient(170deg, rgba(255, 77, 94, 0.22), rgba(255, 255, 255, 0.06)); }
.tarjeta-destino--reyes { background: linear-gradient(170deg, rgba(111, 139, 255, 0.24), rgba(255, 255, 255, 0.06)); }

/* =========================================================
   7. PASO 2 · FORMULARIO AMIGABLE
   ========================================================= */
.campo { margin-bottom: 20px; text-align: left; }

.campo__label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--texto);
}

.campo__caja {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px;
  border-radius: 999px;
  border: 2px solid var(--borde-vidrio);
  background: rgba(255, 255, 255, 0.1);
  transition: border-color 240ms ease, box-shadow 240ms ease, background 240ms ease;
}

.campo__caja:focus-within {
  border-color: var(--oro);
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 0 5px var(--resplandor);
}

.campo__caja.is-ok { border-color: #6ee7a8; }
.campo__caja.is-error { border-color: #ff8f9a; }

.campo__icono { font-size: 1.2rem; }

.campo__input {
  flex: 1;
  min-width: 0;
  padding: 12px 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--fuente-ui);
  font-size: 1.08rem;
  color: var(--texto);
}
.campo__input::placeholder { color: rgba(255, 255, 255, 0.45); }

.campo__input--plano {
  padding: 12px 16px;
  border-radius: 999px;
  border: 2px solid var(--borde-vidrio);
  background: rgba(255, 255, 255, 0.1);
}
.campo__input--plano:focus { border-color: var(--oro); }

.campo__check {
  color: #6ee7a8;
  font-size: 1.2rem;
  font-weight: 700;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 220ms ease, transform 260ms cubic-bezier(0.2, 0.9, 0.3, 1.6);
}
.campo__caja.is-ok .campo__check { opacity: 1; transform: scale(1); }

.campo__aviso {
  min-height: 20px;
  margin: 7px 4px 0;
  font-size: 0.85rem;
  color: #ffc6cc;
}

/* --- Avatares --- */
.avatares {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 6px 11px;
  border-radius: var(--radio-sm);
  border: 2px solid var(--borde-vidrio);
  background: rgba(255, 255, 255, 0.08);
  color: var(--texto);
  cursor: pointer;
  transition: transform 240ms cubic-bezier(0.2, 0.9, 0.3, 1.5), border-color 240ms ease, background 240ms ease;
}
.avatar:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.14); }
.avatar__cara { font-size: 1.9rem; line-height: 1; }
.avatar__nombre { font-size: 0.82rem; font-weight: 500; }

.avatar.is-activo {
  border-color: var(--oro);
  background: linear-gradient(160deg, rgba(255, 209, 102, 0.28), rgba(255, 255, 255, 0.08));
  box-shadow: 0 0 24px -4px var(--resplandor);
}

/* --- Contador de edad --- */
.contador {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 2px solid var(--borde-vidrio);
  background: rgba(255, 255, 255, 0.08);
}

.contador__btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(135deg, var(--oro-claro), var(--oro));
  color: #2a1206;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform 180ms cubic-bezier(0.2, 0.9, 0.3, 1.6);
}
.contador__btn:active { transform: scale(0.86); }

.contador__valor {
  min-width: 46px;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--texto);
}

/* =========================================================
   8. PASO 3 · ESTUDIO (PANEL + CARTA)
   ========================================================= */
.estudio {
  display: grid;
  /* minmax(0, 1fr) evita que la fila de stickers ensanche la columna en móvil */
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.panel-stickers,
.zona-carta { min-width: 0; }

@media (min-width: 1024px) {
  .estudio { grid-template-columns: 280px minmax(0, 1fr); }
}

/* --- Panel de stickers --- */
.panel-stickers {
  order: 2;              /* en móvil aparece debajo de la carta */
  padding: 14px 14px 16px;
}

@media (min-width: 1024px) {
  .panel-stickers {
    order: 0;
    position: sticky;
    top: calc(var(--alto-encabezado) + 12px);
  }
}

.panel-stickers__titulo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--texto);
}
.panel-stickers__titulo small {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--texto-suave);
}

.panel-stickers__grid {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
}

@media (min-width: 1024px) {
  .panel-stickers__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow-x: visible;
    max-height: 46vh;
    overflow-y: auto;
    padding-right: 4px;
  }
}

.sticker-opcion {
  flex: 0 0 78px;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  padding: 8px;
  border-radius: var(--radio-sm);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  cursor: grab;
  touch-action: none;              /* necesario para arrastrar en táctil */
  transition: transform 240ms cubic-bezier(0.2, 0.9, 0.3, 1.5), background 200ms ease, border-color 200ms ease;
}
.sticker-opcion:hover {
  transform: translateY(-4px) scale(1.07) rotate(-3deg);
  background: rgba(255, 255, 255, 0.18);
  border-color: var(--oro);
}
.sticker-opcion:active { cursor: grabbing; transform: scale(0.94); }

.sticker-opcion img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.4));
}

/* --- Zona de la carta --- */
.zona-carta {
  order: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.carta-envoltorio {
  width: min(600px, 100%);
  perspective: 1400px;
  will-change: transform, opacity;
}

.carta {
  position: relative;
  padding: 30px clamp(22px, 5vw, 42px) 34px;
  min-height: 500px;
  border-radius: 10px 10px 16px 16px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.05), transparent 12%),
    linear-gradient(160deg, var(--papel) 0%, var(--papel-2) 100%);
  box-shadow:
    0 30px 60px -18px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(120, 85, 55, 0.22),
    inset 0 0 60px rgba(160, 120, 70, 0.18);
  transform: rotate(-0.6deg);
  transform-origin: center center;
  overflow: hidden;
  transition: transform 400ms ease;
}

/* Textura sutil de papel */
.carta__textura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(180, 140, 90, 0.16) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 68%, rgba(180, 140, 90, 0.14) 0 2px, transparent 3px),
    radial-gradient(circle at 45% 88%, rgba(180, 140, 90, 0.12) 0 2px, transparent 3px);
  background-size: 180px 180px, 220px 220px, 260px 260px;
}

.carta__fecha {
  position: relative;
  margin: 0 0 2px;
  text-align: right;
  font-family: var(--fuente-mano);
  font-size: 1.15rem;
  color: var(--tinta-suave);
}

.carta__saludo {
  position: relative;
  margin: 0 0 10px;
  font-family: var(--fuente-mano);
  font-size: clamp(1.9rem, 5.5vw, 2.5rem);
  font-weight: 700;
  color: var(--tinta);
}

/* Texto manuscrito en tiempo real.
   line-height fijo en px para que coincida con las líneas del renglón. */
.carta__texto {
  position: relative;
  display: block;
  width: 100%;
  min-height: 136px;
  padding: 0;
  border: 0;
  outline: none;
  resize: none;
  overflow: hidden;
  background-color: transparent;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 33px,
    rgba(120, 85, 55, 0.2) 33px 34px
  );
  font-family: var(--fuente-mano);
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 34px;
  color: var(--tinta);
  caret-color: var(--acento-oscuro);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.carta__texto::placeholder { color: rgba(74, 53, 39, 0.34); }

/* El espejo sólo se muestra durante la captura de imagen */
.carta__espejo { display: none; }
.carta.is-capturando { transform: none; }   /* enderezamos la hoja para la foto */
.carta.is-capturando .carta__texto { display: none; }
.carta.is-capturando .carta__espejo { display: block; }
.carta.is-capturando .sticker__tools { display: none !important; }
.carta.is-capturando .sticker { outline: none !important; }

.carta__deseos {
  position: relative;
  margin-top: 16px;
}

.carta__deseos-titulo {
  margin: 0 0 4px;
  font-family: var(--fuente-mano);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--acento-oscuro);
}

.carta__deseos-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.carta__deseos-lista li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--fuente-mano);
  font-size: 1.4rem;
  line-height: 34px;
  color: var(--tinta);
}
.carta__deseos-lista li::before {
  content: '✦';
  color: var(--acento-oscuro);
  font-size: 1rem;
}

.carta__firma {
  position: relative;
  margin: 22px 0 0;
  text-align: right;
  font-family: var(--fuente-mano);
  color: var(--tinta);
}
.carta__despedida { display: block; font-size: 1.3rem; }
.carta__nombre {
  display: block;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--acento-oscuro);
}

/* --- Capa de stickers colocados sobre la carta --- */
.carta__stickers {
  position: absolute;
  inset: 0;
  pointer-events: none;   /* sólo los stickers reciben eventos */
}

.sticker {
  --rot: 0deg;
  position: absolute;
  width: 90px;
  transform: translate(-50%, -50%) rotate(var(--rot));
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
}
/* Cuerpo interno: aquí se aplican las animaciones de escala de anime.js,
   así el transform del sticker (posición + rotación) nunca se pisa. */
.sticker__cuerpo {
  transform-origin: center center;
  will-change: transform;
}

.sticker img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 8px 12px rgba(90, 60, 30, 0.35));
}
.sticker.is-arrastrando { cursor: grabbing; }
.sticker.is-seleccionado img {
  filter: drop-shadow(0 0 0 2px rgba(255, 209, 102, 0.9)) drop-shadow(0 8px 14px rgba(90, 60, 30, 0.4));
}

/* Mini barra de herramientas del sticker (contra-rotada para leerse recta) */
.sticker__tools {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  display: none;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(30, 12, 20, 0.9);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  transform: translateX(-50%) rotate(calc(-1 * var(--rot)));
  white-space: nowrap;
}
.sticker.is-seleccionado .sticker__tools { display: flex; }

/* Si el sticker está muy arriba, la barra se muestra debajo para no quedar cortada */
.sticker.is-arriba .sticker__tools {
  bottom: auto;
  top: calc(100% + 6px);
}

.sticker__tool {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease;
}
.sticker__tool:hover { background: var(--oro); color: #2a1206; transform: scale(1.12); }
.sticker__tool--borrar:hover { background: #ff6b7a; color: #fff; }

/* --- Controles bajo la carta --- */
.controles-carta {
  width: min(600px, 100%);
  padding: 16px 18px 18px;
}

.fila-deseo {
  display: flex;
  gap: 8px;
  align-items: center;
}
.fila-deseo .campo__input--plano { flex: 1; min-width: 0; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--borde-vidrio);
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.86rem;
  color: var(--texto);
}

.chip__quitar {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: var(--texto);
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}
.chip__quitar:hover { background: #ff6b7a; color: #fff; transform: scale(1.15); }

/* =========================================================
   9. PASO 4 · CERTIFICADO
   ========================================================= */
.certificado {
  position: relative;
  width: min(600px, 100%);
  margin: 0 auto;
  padding: 46px 26px 32px;
  text-align: center;
  border: 2px solid rgba(255, 255, 255, 0.35);
}
.certificado::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: calc(var(--radio) - 8px);
  border: 1px dashed rgba(255, 255, 255, 0.3);
  pointer-events: none;
}

.certificado__sello {
  position: absolute;
  top: -42px;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.5));
}
.certificado__sello-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: girar-sello 9s linear infinite;
}
@keyframes girar-sello {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50%      { transform: rotate(8deg) scale(1.06); }
}

.certificado__texto {
  margin: 6px auto 18px;
  max-width: 42ch;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--texto-suave);
}
.certificado__texto b { color: var(--oro-claro); font-weight: 600; }

.certificado__mini {
  margin: 0 auto 16px;
  width: min(240px, 70%);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 16px 34px -10px rgba(0, 0, 0, 0.6);
  transform: rotate(-2deg);
}
.certificado__mini img { display: block; width: 100%; height: auto; }
.certificado__mini:empty { display: none; }

.certificado__pie {
  margin: 0 0 22px;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--texto-suave);
}

.certificado__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* =========================================================
   10. BOTONES
   ========================================================= */
.btn-magico {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 30px;
  border: 0;
  border-radius: 999px;
  font-family: var(--fuente-ui);
  font-size: 1.05rem;
  font-weight: 600;
  color: #2a1206;
  background: linear-gradient(135deg, var(--oro-claro) 0%, var(--oro) 60%, #f0a93c 100%);
  box-shadow: 0 14px 30px -10px var(--resplandor), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  cursor: pointer;
  overflow: hidden;
  text-decoration: none;          /* también se usa como enlace */
  transition: box-shadow 240ms ease, filter 240ms ease;
}
.btn-magico:hover { filter: brightness(1.06); box-shadow: 0 18px 40px -10px var(--resplandor); }

/* Destello que cruza el botón */
.btn-magico::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  transform: skewX(-20deg);
  animation: destello 4.5s ease-in-out infinite;
}
@keyframes destello {
  0%, 62% { left: -60%; }
  86%, 100% { left: 130%; }
}

.btn-magico--grande { width: 100%; padding: 17px 26px; font-size: 1.12rem; margin-top: 6px; }
.btn-magico--mini { padding: 11px 18px; font-size: 0.92rem; }

.btn-magico--enviar {
  padding: 18px 40px;
  font-size: clamp(1.05rem, 3.4vw, 1.3rem);
  font-weight: 700;
  background: linear-gradient(135deg, #fff3c9, var(--oro) 45%, var(--acento) 120%);
  animation: respirar 2.8s ease-in-out infinite;
}
@keyframes respirar {
  0%, 100% { box-shadow: 0 14px 30px -10px var(--resplandor), 0 0 0 0 var(--resplandor); }
  50%      { box-shadow: 0 18px 40px -8px var(--resplandor), 0 0 0 14px rgba(255, 209, 102, 0); }
}
.btn-magico__icono { font-size: 1.25rem; }

.btn-magico[disabled] { opacity: 0.6; cursor: not-allowed; animation: none; }

.btn-fantasma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-top: 12px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--borde-vidrio);
  background: rgba(255, 255, 255, 0.07);
  color: var(--texto);
  font-family: var(--fuente-ui);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}
.btn-fantasma { text-decoration: none; }
.btn-fantasma:hover { background: rgba(255, 255, 255, 0.16); transform: translateY(-2px); }
.btn-fantasma--claro { width: auto; margin-top: 0; padding: 14px 26px; font-size: 1rem; }

:focus-visible {
  outline: 3px solid var(--oro);
  outline-offset: 3px;
}

/* La cajita del campo ya marca el foco con su propio resplandor:
   evitamos el doble contorno sobre el input. */
.campo__caja .campo__input:focus-visible { outline: none; }

/* =========================================================
   11. RESPONSIVIDAD Y ACCESIBILIDAD
   ========================================================= */
@media (max-width: 640px) {
  .carta { min-height: 420px; padding: 24px 20px 28px; }
  .carta__texto {
    font-size: 1.35rem;
    line-height: 30px;
    min-height: 120px;
    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0 29px,
      rgba(120, 85, 55, 0.2) 29px 30px
    );
  }
  .carta__deseos-lista li { font-size: 1.22rem; line-height: 30px; }
  .sticker { width: 68px; }
  .paso { padding-bottom: 34px; }
}

/* =========================================================
   12. BOTÓN DE SONIDO
   ========================================================= */
.btn-sonido {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  margin-left: 10px;
  border-radius: 50%;
  border: 1px solid var(--borde-vidrio);
  background: var(--vidrio);
  color: var(--texto);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 200ms ease, background 200ms ease, opacity 200ms ease;
}
.btn-sonido:hover { background: var(--vidrio-fuerte); transform: scale(1.08); }
.btn-sonido[aria-pressed='false'] { opacity: 0.5; }

/* Ondas que salen del botón mientras suena la música */
.btn-sonido.is-sonando { box-shadow: 0 0 0 0 var(--resplandor); animation: pulso-sonido 2.4s ease-out infinite; }
@keyframes pulso-sonido {
  0%   { box-shadow: 0 0 0 0 var(--resplandor); }
  70%  { box-shadow: 0 0 0 12px rgba(255, 209, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 209, 102, 0); }
}

/* =========================================================
   13. AVISO DE CARTA GUARDADA (continuar después)
   ========================================================= */
.reanudar {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(560px, 100%);
  margin: 0 auto 24px;
  padding: 14px 18px;
  text-align: left;
}
.reanudar[hidden] { display: none; }

.reanudar__icono { font-size: 1.9rem; }

.reanudar__texto {
  flex: 1;
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.4;
  color: var(--texto-suave);
}
.reanudar__texto b { color: var(--oro-claro); font-weight: 600; }

.reanudar__acciones {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

@media (max-width: 600px) {
  .reanudar { flex-wrap: wrap; justify-content: center; text-align: center; }
  .reanudar__texto { flex: 1 0 100%; }
  .reanudar__acciones { flex-direction: row; flex-wrap: wrap; justify-content: center; }
}

/* =========================================================
   14. FOLIO Y RASTREO DEL ENVÍO
   ========================================================= */
.certificado__folio {
  margin: 0 0 14px;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--texto-suave);
}
.certificado__folio b {
  font-family: 'Courier New', monospace;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--oro-claro);
}

.rastreo {
  width: min(420px, 100%);
  margin: 0 auto 18px;
}

.rastreo__pista {
  position: relative;
  height: 6px;
  margin: 0 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.rastreo__avance {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--acento), var(--oro));
  box-shadow: 0 0 14px var(--resplandor);
}

.rastreo__vehiculo {
  position: absolute;
  top: 50%;
  left: 0;
  font-size: 1.5rem;
  line-height: 1;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.rastreo__hitos {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rastreo__hitos li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1;
  font-size: 0.72rem;
  color: var(--texto-suave);
  opacity: 0.45;
  transition: opacity 400ms ease, color 400ms ease;
}
.rastreo__hitos li i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
}
.rastreo__hitos li.is-listo {
  opacity: 1;
  color: var(--oro-claro);
}
.rastreo__hitos li.is-listo i { box-shadow: 0 0 10px 2px var(--resplandor); }

.certificado__aviso {
  min-height: 18px;
  margin: 12px 0 0;
  font-size: 0.82rem;
  color: var(--oro-claro);
}

/* =========================================================
   15. AVISO Y CARTA DE RESPUESTA
   ========================================================= */
.aviso-respuesta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(600px, 100%);
  margin: 18px auto 0;
  padding: 14px 20px;
  text-align: left;
  border-radius: var(--radio);
  border: 1px solid var(--oro);
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.22), var(--vidrio));
  box-shadow: var(--sombra-suave), 0 0 34px -8px var(--resplandor);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--texto);
  cursor: pointer;
  animation: llamar-atencion 2.6s ease-in-out infinite;
}
.aviso-respuesta[hidden] { display: none; }
.aviso-respuesta:hover { border-color: var(--oro-claro); }

@keyframes llamar-atencion {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-5px) scale(1.015); }
}

.aviso-respuesta__sobre { font-size: 2rem; line-height: 1; }

.aviso-respuesta__texto { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.aviso-respuesta__texto b { font-size: 1.05rem; font-weight: 600; }
.aviso-respuesta__texto small { font-size: 0.82rem; color: var(--texto-suave); }

.aviso-respuesta__punto {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--acento);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.16);
}

/* --- Modal --- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
}
.modal[hidden] { display: none; }

.modal__fondo {
  position: absolute;
  inset: 0;
  background: rgba(8, 3, 14, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* --- El sobre lacrado --- */
.sobre {
  position: relative;
  width: min(280px, 78vw);
  aspect-ratio: 3 / 2;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  filter: drop-shadow(0 26px 44px rgba(0, 0, 0, 0.6));
}
.sobre[hidden] { display: none; }

.sobre__cuerpo {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(160deg, #fbf0d8 0%, #ecd7ab 100%);
  box-shadow: inset 0 -30px 50px rgba(160, 120, 70, 0.25);
}
/* Las dos "alas" del sobre, dibujadas con gradientes */
.sobre__cuerpo::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background:
    linear-gradient(to bottom right, transparent 49.4%, rgba(190, 150, 100, 0.35) 50%),
    linear-gradient(to bottom left, transparent 49.4%, rgba(190, 150, 100, 0.35) 50%);
}

.sobre__solapa {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 62%;
  transform-origin: top center;
  background: linear-gradient(180deg, #f4e3bd, #e3c894);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-radius: 10px 10px 0 0;
  box-shadow: 0 6px 12px -6px rgba(0, 0, 0, 0.3);
  z-index: 3;
}

.sobre__sello {
  position: absolute;
  top: 58%;
  left: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ef5a4d, #a01f1a 70%);
  color: var(--oro);
  font-size: 1.6rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), inset 0 2px 6px rgba(255, 255, 255, 0.35);
  animation: latido-sello 2.2s ease-in-out infinite;
}
@keyframes latido-sello {
  0%, 100% { transform: scale(1) rotate(-4deg); }
  50%      { transform: scale(1.09) rotate(4deg); }
}

.sobre__pista {
  position: absolute;
  left: 50%;
  bottom: -34px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.85rem;
  color: var(--oro-claro);
}

/* --- La carta de respuesta --- */
.respuesta {
  position: relative;
  z-index: 5;
  width: min(560px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 22px 22px 20px;
  border-radius: var(--radio);
  background: linear-gradient(160deg, var(--papel) 0%, var(--papel-2) 100%);
  box-shadow: 0 34px 70px -20px rgba(0, 0, 0, 0.7), inset 0 0 60px rgba(160, 120, 70, 0.16);
}
.respuesta[hidden] { display: none; }

.respuesta__cabeza {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 2px dashed rgba(120, 85, 55, 0.28);
}

.respuesta__avatar {
  width: 62px;
  height: 62px;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(90, 60, 30, 0.35));
}

.respuesta__titulo {
  margin: 0;
  font-family: var(--fuente-mano);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--acento-oscuro);
}

.respuesta__hoja { position: relative; min-height: 200px; }

.respuesta__texto {
  margin: 0;
  font-family: var(--fuente-mano);
  font-size: 1.42rem;
  line-height: 1.62;
  color: var(--tinta);
  white-space: pre-wrap;
}

/* Plumita que "escribe" al final del texto mientras se redacta */
.respuesta.is-escribiendo .respuesta__texto::after {
  content: ' ✒️';
  display: inline-block;
  font-size: 1.1rem;
  animation: escribir-pluma 0.7s ease-in-out infinite;
}
@keyframes escribir-pluma {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50%      { transform: translateY(-3px) rotate(4deg); }
}

.respuesta__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 2px dashed rgba(120, 85, 55, 0.28);
}
.respuesta__acciones .btn-fantasma--auto {
  border-color: rgba(120, 85, 55, 0.35);
  background: rgba(120, 85, 55, 0.08);
  color: var(--tinta);
}
.respuesta__acciones .btn-fantasma--auto:hover { background: rgba(120, 85, 55, 0.16); }

.btn-fantasma--auto { width: auto; margin-top: 0; }

.btn-magico--verde {
  color: #08301c;
  background: linear-gradient(135deg, #b6f5cf, #34c77b 65%, #1a9c5c 100%);
  box-shadow: 0 14px 30px -10px rgba(52, 199, 123, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Marco invisible que sólo se usa para imprimir */
.marco-impresion {
  position: fixed;
  width: 0;
  height: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* =========================================================
   16. CONTADOR DE CARTAS Y PIE DE PÁGINA
   ========================================================= */
/* ============================================================
   CUENTA REGRESIVA · comparte forma con el contador global
   ============================================================ */
.cuenta-regresiva {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 24px auto 0;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid rgba(240, 192, 90, 0.42);
  background: rgba(240, 192, 90, 0.12);
  font-size: 0.95rem;
  color: var(--texto);
}
.cuenta-regresiva[hidden] { display: none; }
.cuenta-regresiva b { color: var(--oro); font-size: 1.15rem; }
.cuenta-regresiva__icono { font-size: 1.1rem; }

/* ============================================================
   LA RESPUESTA QUE LLEGA MÁS TARDE
   ============================================================ */
/* En el certificado: "está leyendo tu carta, vuelve luego" */
.aviso-espera {
  display: flex;
  align-items: center;
  gap: 13px;
  max-width: 460px;
  margin: 24px auto 0;
  padding: 14px 20px;
  border-radius: var(--radio);
  border: 1px dashed rgba(240, 192, 90, 0.5);
  background: rgba(240, 192, 90, 0.08);
  text-align: left;
}
.aviso-espera[hidden] { display: none; }
.aviso-espera b { display: block; color: var(--texto); font-size: 1rem; }
.aviso-espera small { color: var(--texto-suave); font-size: 0.85rem; }
.aviso-espera__pluma {
  font-size: 1.7rem;
  animation: escribiendo 2.4s ease-in-out infinite;
}
@keyframes escribiendo {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(8deg); }
}

/* En la portada, al volver: el aviso de que ya contestaron */
.respuesta-lista {
  display: flex;
  align-items: center;
  gap: 13px;
  width: min(430px, 100%);
  margin: 22px auto 0;
  padding: 15px 20px;
  border: 1px solid var(--oro);
  border-radius: var(--radio);
  background: rgba(240, 192, 90, 0.16);
  color: var(--texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
}
.respuesta-lista[hidden] { display: none; }
.respuesta-lista:hover { background: rgba(240, 192, 90, 0.26); }
.respuesta-lista b { display: block; font-size: 1.02rem; }
.respuesta-lista small { color: var(--texto-suave); font-size: 0.85rem; }
.respuesta-lista__sobre { font-size: 1.9rem; }
.respuesta-lista__punto {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e5484d;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
}
/* Cuando todavía no está lista */
.respuesta-espera {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 20px auto 0;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px dashed var(--borde-vidrio);
  font-size: 0.88rem;
  color: var(--texto-suave);
}
.respuesta-espera[hidden] { display: none; }

/* ============================================================
   TIENDAS SUGERIDAS EN EL CERTIFICADO
   ============================================================ */
.sugeridas {
  margin: 28px 0 6px;
  padding: 20px 18px 18px;
  border-radius: var(--radio);
  border: 1px solid var(--borde-vidrio);
  background: rgba(0, 0, 0, 0.16);
}
.sugeridas[hidden] { display: none; }
.sugeridas__titulo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 16px;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--texto);
}
.sugeridas__lista {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.sugerida {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--borde-vidrio);
  background: var(--vidrio);
  text-align: left;
}
.sugerida__cabeza { display: flex; align-items: center; gap: 10px; }
.sugerida__icono { font-size: 1.7rem; line-height: 1; }
.sugerida__foto {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 11px;
  object-fit: cover;
}
.sugerida__nombre { margin: 0; font-weight: 600; font-size: 0.96rem; color: var(--texto); }
.sugerida__zona   { margin: 2px 0 0; font-size: 0.79rem; color: var(--texto-suave); }
.sugerida__oferta { margin: 0; font-size: 0.84rem; color: var(--oro); }
.sugerida__wa {
  display: inline-block;
  margin-top: auto;
  padding: 8px 14px;
  border-radius: 999px;
  background: #25d366;
  color: #05331a;
  font-size: 0.83rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
}
.sugerida__wa:hover { background: #34e879; }
.sugeridas__todas {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.86rem;
  color: var(--texto-suave);
}
#btnMandarLista { margin-top: 16px; }

.contador-global {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 26px auto 0;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--borde-vidrio);
  background: var(--vidrio);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 0.95rem;
  color: var(--texto-suave);
}
.contador-global[hidden] { display: none; }
.contador-global__icono { font-size: 1.15rem; }
.contador-global b {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--oro-claro);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 16px var(--resplandor);
}

.certificado__puesto {
  margin: -6px 0 16px;
  font-size: 1rem;
  color: var(--texto-suave);
}
.certificado__puesto[hidden] { display: none; }
.certificado__puesto b {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--oro-claro);
  font-variant-numeric: tabular-nums;
}

.pie {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 16px 24px;
  font-size: 0.82rem;
  color: var(--texto-suave);
}
.pie a {
  color: var(--texto-suave);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  transition: color 200ms ease, border-color 200ms ease;
}
.pie a:hover { color: var(--oro-claro); border-color: var(--oro); }

/* =========================================================
   16.b BLOQUE DE CONTENIDO (texto que Google indexa)
   ========================================================= */
.seo-contenido {
  width: min(760px, 100%);
  margin: 40px auto 0;
  padding: clamp(20px, 4vw, 34px);
  text-align: left;
}

.seo-contenido h2 {
  margin: 0 0 12px;
  font-size: clamp(1.25rem, 3.6vw, 1.6rem);
  font-weight: 600;
  color: var(--texto);
}

.seo-contenido h3 {
  margin: 28px 0 10px;
  font-size: clamp(1.05rem, 3vw, 1.22rem);
  font-weight: 600;
  color: var(--oro-claro);
}

.seo-contenido h4 {
  margin: 18px 0 5px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--texto);
}

.seo-contenido p,
.seo-contenido li {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--texto-suave);
}
.seo-contenido p { margin: 0 0 12px; }
.seo-contenido ol { margin: 0 0 14px; padding-left: 22px; }
.seo-contenido li { margin-bottom: 8px; }
.seo-contenido strong { color: var(--texto); font-weight: 600; }
.seo-contenido a { color: var(--oro-claro); text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================
   17. PÁGINAS LEGALES (aviso y política de privacidad)
   ========================================================= */
.legal {
  position: relative;
  z-index: 2;
  width: min(760px, 100%);
  margin: 0 auto;
  padding: clamp(20px, 4vw, 40px) clamp(16px, 4vw, 28px) 60px;
}

.legal__volver {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--borde-vidrio);
  background: var(--vidrio);
  color: var(--texto);
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 200ms ease, transform 200ms ease;
}
.legal__volver:hover { background: var(--vidrio-fuerte); transform: translateX(-3px); }

.legal__hoja {
  padding: clamp(22px, 4vw, 40px);
  border-radius: var(--radio);
  background: var(--vidrio);
  border: 1px solid var(--borde-vidrio);
  box-shadow: var(--sombra-suave);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.legal h1 {
  margin: 0 0 6px;
  font-size: clamp(1.7rem, 5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--texto);
}

.legal__fecha {
  margin: 0 0 26px;
  font-size: 0.85rem;
  color: var(--texto-suave);
}

.legal h2 {
  margin: 32px 0 10px;
  font-size: clamp(1.1rem, 3.2vw, 1.32rem);
  font-weight: 600;
  color: var(--oro-claro);
}

.legal h3 {
  margin: 20px 0 8px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--texto);
}

.legal p,
.legal li {
  font-size: 0.97rem;
  line-height: 1.68;
  color: var(--texto-suave);
}

.legal p { margin: 0 0 12px; }

.legal ul,
.legal ol { margin: 0 0 14px; padding-left: 22px; }
.legal li { margin-bottom: 7px; }

.legal strong { color: var(--texto); font-weight: 600; }

.legal a {
  color: var(--oro-claro);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal code {
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  font-family: 'Courier New', monospace;
  font-size: 0.88em;
  color: var(--texto);
}

/* Cuadro destacado para lo más importante */
.legal__destacado {
  margin: 20px 0;
  padding: 16px 20px;
  border-radius: var(--radio-sm);
  border-left: 4px solid var(--oro);
  background: rgba(255, 209, 102, 0.12);
}
.legal__destacado p:last-child { margin-bottom: 0; }

/* Tabla de cookies */
.legal__tabla-caja { overflow-x: auto; margin: 0 0 16px; }
.legal__tabla {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.legal__tabla th,
.legal__tabla td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--texto-suave);
}
.legal__tabla th { color: var(--texto); font-weight: 600; }

/* Datos que TÚ debes rellenar antes de publicar: saltan a la vista */
.rellenar {
  padding: 1px 8px;
  border-radius: 5px;
  background: #ffe08a;
  color: #4a3000;
  font-weight: 600;
}

/* =========================================================
   18. ALMACENES DE SANTA (directorio + formulario)
   ========================================================= */
.almacenes {
  position: relative;
  z-index: 2;
  width: min(940px, 100%);
  margin: 0 auto;
  padding: clamp(18px, 4vw, 40px) clamp(16px, 4vw, 28px) 50px;
}

.almacenes__intro { text-align: center; }
.almacenes__intro .subtitulo { max-width: 52ch; }
.almacenes__intro .btn-magico--grande { width: auto; min-width: min(320px, 100%); }

/* El botón de volver es un enlace en esta página */
.btn-atras--enlace {
  display: inline-grid;
  place-items: center;
  text-decoration: none;
}

/* --- Beneficios --- */
.beneficios {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 8px 0 30px;
  padding: 0;
  list-style: none;
  text-align: left;
}

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

.beneficio {
  padding: 20px 18px;
  border-radius: var(--radio);
  border: 1px solid var(--borde-vidrio);
  background: var(--vidrio);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.beneficio__icono { font-size: 1.9rem; line-height: 1; }
.beneficio h2 {
  margin: 10px 0 6px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--texto);
}
.beneficio p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--texto-suave);
}

/* --- Directorio --- */
.directorio { margin: 52px 0 44px; }

.titulo-seccion--centro { text-align: center; }
.subtitulo--centro { text-align: center; margin-left: auto; margin-right: auto; }

.directorio__lista {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 24px;
}

@media (min-width: 720px) {
  .directorio__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.almacen {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: var(--radio);
  border: 1px solid var(--borde-vidrio);
  background: var(--vidrio);
  box-shadow: var(--sombra-suave);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform 260ms ease, border-color 260ms ease;
}
.almacen:hover { transform: translateY(-4px); border-color: var(--oro); }

.almacen__cabeza { display: flex; align-items: center; gap: 12px; }
.almacen__icono { font-size: 2rem; line-height: 1; }
/* La foto del negocio ocupa el lugar del emoji cuando la hay */
.almacen__foto {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid var(--borde-vidrio);
}
.almacen__nombre {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--texto);
}
.almacen__zona,
.almacen__horario {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: var(--texto-suave);
}

/* ---------- Negocio destacado (el paquete de pago mayor) ---------- */
.almacen--destacado {
  position: relative;
  border-color: var(--oro);
  box-shadow: var(--sombra-suave), 0 0 0 1px var(--oro) inset;
}
.almacen__cinta {
  position: absolute;
  top: -10px;
  right: 16px;
  background: var(--oro);
  color: #2a1600;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  border-radius: 999px;
  padding: 3px 11px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* ---------- Botones de contacto de cada tarjeta ---------- */
.almacen__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}
.almacen__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--texto);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--borde-vidrio);
  transition: transform 180ms ease, background 180ms ease;
}
.almacen__btn:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.16); }
.almacen__btn--wa {
  background: #25d366;
  border-color: #25d366;
  color: #05331a;
}
.almacen__btn--wa:hover { background: #34e879; }
.almacen__btn--mapa {
  background: rgba(66, 133, 244, 0.22);
  border-color: rgba(66, 133, 244, 0.55);
}
.almacen__btn--mapa:hover { background: rgba(66, 133, 244, 0.34); }
.almacen__desc {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--texto-suave);
}

.almacen__etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.almacen__etiquetas li {
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.75rem;
  color: var(--texto-suave);
}

.almacen__enlace { margin-top: auto; align-self: flex-start; }

/* --- Cupón --- */
.cupon {
  position: relative;
  padding: 14px 16px;
  border-radius: var(--radio-sm);
  border: 2px dashed var(--oro);
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.16), rgba(255, 255, 255, 0.04));
}
.cupon__etiqueta {
  display: inline-block;
  margin-bottom: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oro-claro);
}
.cupon__texto {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
  font-weight: 500;
  color: var(--texto);
}
.cupon__vigencia {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--texto-suave);
}

.directorio__vacio {
  margin: 28px 0 0;
  padding: 26px 20px;
  text-align: center;
  border-radius: var(--radio);
  border: 1px dashed var(--borde-vidrio);
  font-size: 1rem;
  color: var(--texto-suave);
}
.directorio__vacio[hidden] { display: none; }
.directorio__vacio b { display: block; margin-top: 6px; color: var(--oro-claro); }

/* --- Registro por WhatsApp --- */
.registro {
  padding: clamp(24px, 4vw, 40px);
  text-align: center;
  scroll-margin-top: 84px;
}

.precio {
  margin: 18px auto 26px;
  padding: 22px 20px;
  max-width: 420px;
  border-radius: var(--radio);
  border: 2px dashed var(--oro);
  background: linear-gradient(160deg, rgba(255, 209, 102, 0.16), rgba(255, 255, 255, 0.04));
}
.precio__monto {
  display: block;
  font-size: clamp(3rem, 12vw, 4.4rem);
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(180deg, #fff 10%, var(--oro-claro) 55%, var(--oro) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 20px var(--resplandor));
}
.precio__moneda {
  display: block;
  margin-top: 4px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--texto);
}
.precio__nota {
  margin: 12px 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--texto-suave);
}

/* --- Los tres pasos --- */
.pasos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 560px;
  margin: 0 auto 28px;
  padding: 0;
  list-style: none;
  text-align: left;
  counter-reset: paso;
}

.paso-registro {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radio-sm);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--borde-vidrio);
}
.paso-registro__num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--oro-claro), var(--oro));
  color: #2a1206;
  font-weight: 700;
  font-size: 0.98rem;
}
.paso-registro h3 {
  margin: 4px 0 3px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--texto);
}
.paso-registro p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--texto-suave);
}

/* --- Botón de WhatsApp --- */
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 100%;
  padding: 16px 30px;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(135deg, #4ee07a 0%, #25d366 55%, #128c7e 100%);
  color: #06301c;
  text-decoration: none;
  text-align: left;
  box-shadow: 0 16px 34px -12px rgba(37, 211, 102, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 240ms cubic-bezier(0.2, 0.9, 0.3, 1.4), box-shadow 240ms ease, filter 240ms ease;
  animation: respirar-whatsapp 3s ease-in-out infinite;
}
.btn-whatsapp:hover {
  transform: translateY(-3px) scale(1.02);
  filter: brightness(1.05);
  box-shadow: 0 22px 44px -12px rgba(37, 211, 102, 0.8);
}
.btn-whatsapp:active { transform: scale(0.97); }

@keyframes respirar-whatsapp {
  0%, 100% { box-shadow: 0 16px 34px -12px rgba(37, 211, 102, 0.75), 0 0 0 0 rgba(37, 211, 102, 0.45); }
  50%      { box-shadow: 0 16px 34px -12px rgba(37, 211, 102, 0.75), 0 0 0 16px rgba(37, 211, 102, 0); }
}

.btn-whatsapp__icono { display: grid; place-items: center; flex: 0 0 auto; }
.btn-whatsapp__texto { display: flex; flex-direction: column; }
.btn-whatsapp__texto b { font-size: 1.1rem; font-weight: 700; line-height: 1.2; }
.btn-whatsapp__texto small { font-size: 0.8rem; opacity: 0.85; }

.registro__pie {
  margin: 22px auto 0;
  max-width: 46ch;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--texto-suave);
}
.registro__pie a { color: var(--oro-claro); }

@media (max-width: 480px) {
  .btn-whatsapp { width: 100%; padding: 15px 20px; gap: 11px; }
  .btn-whatsapp__texto b { font-size: 1rem; }
}

/* --- Llamada desde la página principal --- */
.llamadas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: min(940px, 100%);
  margin: 34px auto 0;
}

@media (min-width: 820px) {
  .llamadas { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .llamadas .llamada-negocios { margin: 0; height: 100%; display: flex; flex-direction: column; }
  .llamadas .llamada-negocios p:last-of-type { flex: 1; }
}

.llamada-negocios {
  width: min(760px, 100%);
  margin: 34px auto 0;
  padding: 22px 24px;
  text-align: center;
  border-radius: var(--radio);
  border: 1px solid var(--borde-vidrio);
  background: var(--vidrio);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.llamada-negocios__ojo {
  margin: 0 0 4px;
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oro-claro);
}
.llamada-negocios h2 {
  margin: 0 0 8px;
  font-size: clamp(1.15rem, 3.4vw, 1.4rem);
  font-weight: 600;
  color: var(--texto);
}
.llamada-negocios p {
  margin: 0 auto 18px;
  max-width: 46ch;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--texto-suave);
}
.llamada-negocios .btn-magico,
.llamada-negocios .btn-fantasma { text-decoration: none; align-self: center; }

/* Enlace a las tiendas dentro del certificado */
.certificado__tiendas { margin: 18px 0 0; }
.certificado__tiendas a {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px dashed var(--oro);
  background: rgba(255, 209, 102, 0.1);
  font-size: 0.88rem;
  color: var(--oro-claro);
  text-decoration: none;
  transition: background 200ms ease, transform 200ms ease;
}
.certificado__tiendas a:hover { background: rgba(255, 209, 102, 0.2); transform: translateY(-2px); }

/* Atajos de la página de almacenes */
.almacenes__atajos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 8px;
}
.almacenes__atajos .btn-fantasma { width: auto; margin-top: 0; padding: 14px 26px; font-size: 1rem; }

/* El directorio es ahora la primera parada: le damos aire */
.directorio { scroll-margin-top: 84px; }
.beneficio h3 {
  margin: 10px 0 6px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--texto);
}

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .capa-particulas { display: none; }
}