/* ============================================================
   🕯️ VELAS ECLIPSE — sistema «NOCHE DE VELITAS» (rebrand ec2)
   Portado del canvas "Eclipse Tienda": la marca vive de noche
   (radial #2B2740→#141219), la luz sale de las velas. Tipos:
   Marcellus (marca) + Outfit (UI) + Cormorant Garamond (voz).
   Autocontenido: reemplaza a styles.css + rebrand.css viejos.
   Contrato con app.js intacto: mismas clases e IDs.
   ============================================================ */

:root {
  /* noche */
  --noche-alta: #2B2740;
  --noche: #1A1826;
  --noche-prof: #141219;
  --noche-borde: #35304F;
  --carbon: #211E1B;

  /* día / papel */
  --crema: #F4EFDE;
  --papel: #FBF8EF;
  --nube: #FFFDF6;
  --borde: #E3DAC3;

  /* luz */
  --dorado: #ECB44C;
  --dorado-claro: #F5C96E;
  --dorado-prof: #C08A2E;
  --naranja: #E4923C;
  --llama-luz: #FFD9A0;
  --llama-corazon: #FFF3D6;

  /* acentos */
  --luna: #7F87BE;
  --luna-clara: #A9AFD6;
  --arena: #6B6357;
  --arena-clara: #B9AE94;
  --error: #B0501F;
  --wa: #25D366;

  --fuente-marca: "Marcellus", serif;
  --fuente-ui: "Outfit", system-ui, sans-serif;
  --fuente-voz: "Cormorant Garamond", Georgia, serif;

  --sombra-card: 0 1px 2px rgba(33, 30, 27, 0.06), 0 8px 24px rgba(33, 30, 27, 0.07);
  --grad-boton: linear-gradient(180deg, var(--dorado-claro), var(--dorado));
  --grad-noche: radial-gradient(130% 90% at 50% 0%, var(--noche-alta) 0%, var(--noche) 58%, var(--noche-prof) 100%);
}

/* ── Base ──────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* el contrato el.hidden=true de app.js SIEMPRE gana al display propio */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; }

body {
  font-family: var(--fuente-ui);
  background: var(--crema);
  color: var(--carbon);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.marco {
  max-width: 520px;
  margin: 0 auto;
  background: var(--papel);
  box-shadow: 0 0 60px rgba(33, 30, 27, 0.18);
}

main { padding: 0 20px 40px; }

img { max-width: 100%; }
fieldset { border: 0; }
button { font-family: inherit; }
input { font-family: inherit; }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--dorado);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════
   LAS 8 ANIMACIONES DEL CANVAS
   ══════════════════════════════════════════════════════════ */
@keyframes titilar {
  0%, 100% { transform: scale(1) rotate(-2deg); }
  35%      { transform: scale(1.1, 0.9) rotate(2.5deg); }
  70%      { transform: scale(0.92, 1.08) rotate(-3deg); }
}
@keyframes respirar { 50% { opacity: 0.55; } }
@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@keyframes rodar { to { transform: translateX(-50%); } }
@keyframes brillo {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}
@keyframes latido {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}
@keyframes chispear {
  0%   { opacity: 0; transform: translateY(0) scale(0.6); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-52px) scale(1.15); }
}
@keyframes girarLuz { to { transform: rotate(360deg); } }

/* ── Llama CSS (se reutiliza en farol, divisores y gracias) ── */
.llama {
  position: absolute;
  left: 0; right: 0;
  margin: 0 auto;
  top: -16px;
  width: 10px; height: 15px;
  background: radial-gradient(ellipse at 50% 78%, var(--llama-corazon) 18%, var(--dorado) 46%, var(--naranja) 78%, transparent 82%);
  border-radius: 50% 50% 46% 54% / 62% 62% 38% 38%;
  transform-origin: 50% 92%;
  animation: titilar 1.15s ease-in-out infinite;
  filter: drop-shadow(0 0 7px rgba(236, 180, 76, 0.85));
}
.llama-inline {
  position: relative;
  display: inline-block;
  width: 9px; height: 14px;
  background: radial-gradient(ellipse at 50% 78%, var(--llama-corazon) 18%, var(--dorado) 46%, var(--naranja) 78%, transparent 82%);
  border-radius: 50% 50% 46% 54% / 62% 62% 38% 38%;
  transform-origin: 50% 92%;
  animation: titilar 1.3s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(236, 180, 76, 0.8));
}
.chispa {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--llama-luz);
  animation: chispear 3s ease-out infinite;
}

/* ══════════════════════════════════════════════════════════
   TICKER
   ══════════════════════════════════════════════════════════ */
.ticker {
  background: var(--carbon);
  color: var(--dorado);
  overflow: hidden;
  white-space: nowrap;
  padding: 9px 0 7px;
}
.ticker-pista { display: inline-flex; animation: rodar 24s linear infinite; }
.ticker-tramo {
  font-family: var(--fuente-voz);
  font-style: italic;
  font-size: 0.94rem;
  letter-spacing: 0.1em;
}

/* ══════════════════════════════════════════════════════════
   HERO DE NOCHE
   ══════════════════════════════════════════════════════════ */
.hero {
  background: var(--grad-noche);
  color: var(--crema);
  text-align: center;
  padding: 46px 24px 54px;
  position: relative;
  overflow: hidden;
}
/* cielo estrellado que respira */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle 1.4px at 14% 18%, rgba(244, 239, 222, 0.9) 1.4px, transparent 2.4px),
    radial-gradient(circle 1px at 82% 12%, rgba(127, 135, 190, 0.9) 1px, transparent 2px),
    radial-gradient(circle 1.2px at 68% 32%, rgba(244, 239, 222, 0.6) 1.2px, transparent 2.2px),
    radial-gradient(circle 1px at 22% 46%, rgba(236, 180, 76, 0.7) 1px, transparent 2px),
    radial-gradient(circle 1.3px at 90% 52%, rgba(244, 239, 222, 0.5) 1.3px, transparent 2.3px),
    radial-gradient(circle 1px at 8% 70%, rgba(127, 135, 190, 0.7) 1px, transparent 2px);
  animation: brillo 4s ease-in-out infinite;
  pointer-events: none;
}
.hero > * { position: relative; }

.hero-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  color: var(--dorado);
  font-weight: 600;
  margin-bottom: 16px;
  text-transform: uppercase;
}
.hero-titulo {
  font-family: var(--fuente-marca);
  font-weight: 400;
  font-size: clamp(2.6rem, 12vw, 3.5rem);
  letter-spacing: 0.28em;
  padding-left: 0.28em;   /* compensa el tracking del último carácter */
  line-height: 1;
}
.hero-divisor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
}
.hero-divisor .raya { display: block; width: 52px; height: 1px; background: var(--dorado-prof); }
.hero-script {
  font-family: var(--fuente-voz);
  font-style: italic;
  font-size: clamp(1.4rem, 6.5vw, 1.65rem);
  color: var(--dorado);
  margin-top: 12px;
}

/* ── El farol ilustrado (CSS puro) flotando en la noche ───── */
.farol {
  margin: 30px auto 0;
  width: 176px;
  position: relative;
  animation: flotar 5.5s ease-in-out infinite;
}
.farol-halo {
  position: absolute; inset: -38px;
  background: radial-gradient(circle at 50% 60%, rgba(236, 180, 76, 0.34), rgba(228, 146, 60, 0.12) 45%, transparent 70%);
  animation: respirar 3.8s ease-in-out infinite;
  pointer-events: none;
}
.farol-caja {
  position: relative;
  height: 138px;
  background: linear-gradient(180deg, var(--noche-borde), #241F38);
  border: 2px solid var(--dorado);
  border-radius: 14px 14px 10px 10px;
  box-shadow: 0 26px 54px rgba(0, 0, 0, 0.6), inset 0 0 30px rgba(236, 180, 76, 0.18);
  overflow: hidden;
}
/* techito dorado */
.farol-caja::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 16px;
  background: var(--dorado);
  clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%);
  opacity: 0.92;
}
.farol-ventana {
  position: absolute; inset: 26px 22px 12px;
  border: 1.5px dashed rgba(236, 180, 76, 0.55);
  border-radius: 8px;
  background: radial-gradient(circle at 50% 72%, rgba(236, 180, 76, 0.22), transparent 62%);
}
.farol-velas {
  position: absolute; bottom: 14px; left: 0; right: 0;
  display: flex; justify-content: center; align-items: flex-end; gap: 16px;
}
.velita {
  position: relative;
  width: 15px;
  background: linear-gradient(180deg, var(--papel), #E8E0C8);
  border-radius: 4px 4px 2px 2px;
  box-shadow: inset -3px 0 4px rgba(33, 30, 27, 0.18);
}
.velita.v1 { height: 34px; }
.velita.v2 { height: 46px; }
.velita.v3 { height: 30px; }
.velita.v2 .llama { animation-delay: 0.35s; height: 17px; top: -18px; }
.velita.v3 .llama { animation-delay: 0.7s; }

.farol .chispa.c1 { left: 22%; top: -10px; }
.farol .chispa.c2 { left: 76%; top: 0; width: 2px; height: 2px; animation-duration: 3.8s; animation-delay: 1.4s; }

.hero-sub {
  max-width: 320px;
  margin: 26px auto 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--arena-clara);
}
.hero-sub strong { color: var(--dorado); font-weight: 600; }

.hero-datos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-top: 24px;
}
.hero-datos li {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 8px 14px;
  border: 1px solid rgba(236, 180, 76, 0.5);
  border-radius: 999px;
  color: var(--crema);
}
.hero-datos li.dato-precio {
  background: rgba(236, 180, 76, 0.12);
  color: var(--dorado);
}
.hero-datos li.dato-luna {
  border-color: rgba(127, 135, 190, 0.5);
  color: var(--luna-clara);
}

.hero-cta-wrap { margin-top: 28px; animation: latido 2.8s ease-in-out infinite; }
.hero-cta {
  display: inline-block;
  background: var(--grad-boton);
  color: var(--carbon);
  font-weight: 700;
  font-size: 0.94rem;
  letter-spacing: 0.1em;
  padding: 17px 42px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 0 36px rgba(236, 180, 76, 0.45), 0 5px 0 var(--dorado-prof);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.hero-cta:active {
  transform: translateY(4px);
  box-shadow: 0 0 36px rgba(236, 180, 76, 0.45), 0 1px 0 var(--dorado-prof);
}

/* ══════════════════════════════════════════════════════════
   PANEL DE TEMPORADA (stock en vivo)
   ══════════════════════════════════════════════════════════ */
.panel-tanda {
  margin-top: 26px;
  background: var(--nube);
  border: 1px solid var(--borde);
  border-radius: 20px;
  box-shadow: var(--sombra-card);
  padding: 20px 22px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* rayos de luz girando lento (canvas «Temporada») */
.panel-tanda::before {
  content: "";
  position: absolute;
  top: -120px; left: 50%;
  margin-left: -190px;
  width: 380px; height: 380px;
  background: conic-gradient(from 0deg,
    transparent 0 8deg, rgba(236, 180, 76, 0.07) 10deg 12deg,
    transparent 14deg 30deg, rgba(236, 180, 76, 0.07) 32deg 34deg,
    transparent 36deg 60deg, rgba(236, 180, 76, 0.07) 62deg 64deg,
    transparent 66deg 90deg, rgba(236, 180, 76, 0.07) 92deg 94deg,
    transparent 96deg 360deg);
  border-radius: 50%;
  animation: girarLuz 46s linear infinite;
  pointer-events: none;
}
.panel-tanda > * { position: relative; }

.kicker {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dorado-prof);
}
.panel-tanda .kicker { margin-bottom: 10px; }

.stock-texto {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.stock-texto .num {
  font-family: var(--fuente-voz);
  font-size: 1.9rem;
  font-weight: 500;
  color: var(--dorado-prof);
}
.stock-texto.alerta .num { color: var(--naranja); }
.stock-texto.alerta { animation: respirar 1.4s ease-in-out infinite; }
.stock-agotadas { color: var(--naranja); font-size: 1.05rem; letter-spacing: 0.06em; font-weight: 700; }
.stock-sub {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--arena);
  margin-top: 5px;
}
.stock-sub b { color: var(--dorado-prof); }

.stock-barra {
  margin-top: 12px;
  height: 12px;
  border-radius: 999px;
  background: #EFE8D4;
  border: 1px solid var(--borde);
  overflow: hidden;
}
.stock-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--naranja), var(--dorado));
  transition: width 0.6s ease;
}
.preventa-linea {
  margin-top: 12px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--arena);
}
.preventa-linea b { color: var(--dorado-prof); }

/* ══════════════════════════════════════════════════════════
   SECCIONES — títulos con la voz Cormorant
   ══════════════════════════════════════════════════════════ */
.productos-seccion, .pasos, .deseos, .pedido, .empresarial, .corp { margin-top: 46px; }

.seccion-titulo {
  font-family: var(--fuente-voz);
  font-weight: 500;
  font-size: clamp(1.85rem, 8.5vw, 2.125rem);
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 1.15;
}
.seccion-sub {
  text-align: center;
  font-size: 0.84rem;
  color: var(--arena);
  margin-top: 8px;
}

/* ══════════════════════════════════════════════════════════
   TARJETAS DE PRODUCTO (markup generado por app.js)
   ══════════════════════════════════════════════════════════ */
.productos { display: grid; gap: 16px; margin-top: 24px; }

.card {
  position: relative;
  background: var(--nube);
  border: 1px solid var(--borde);
  border-radius: 22px;
  box-shadow: var(--sombra-card);
  padding: 26px 22px;
  text-align: center;
  overflow: hidden;
  transition: border-color 0.3s ease;
}
.card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 5px;
}
.card[data-tipo="Paquete 7"]::before { background: linear-gradient(90deg, var(--naranja), var(--dorado)); }
.card[data-tipo="Velita"]::before { background: var(--luna); }

.card-etiqueta {
  position: absolute; top: 16px; right: 0;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--carbon);
  color: var(--dorado);
  padding: 6px 12px 6px 14px;
  border-radius: 999px 0 0 999px;
}
.card[data-tipo="Velita"] .card-etiqueta { background: var(--luna); color: var(--papel); }

.thumb {
  width: 72px; height: 72px;
  margin: 4px auto 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 34%, var(--nube), var(--crema) 70%);
  border: 1px solid var(--borde);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.1rem;
  box-shadow: inset 0 -8px 14px rgba(236, 180, 76, 0.22);
}

.card-titulo {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--dorado-prof);
}
.card[data-tipo="Velita"] .card-titulo { color: var(--luna); }

.card-sub { margin-top: 4px; line-height: 1.3; }
.card-sub .script {
  font-family: var(--fuente-voz);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--arena);
}
.card-precio {
  font-family: var(--fuente-voz);
  font-weight: 500;
  font-size: 2.6rem;
  line-height: 1.15;
  margin-top: 6px;
  color: var(--carbon);
}
.card-desc {
  font-size: 0.84rem;
  color: var(--arena);
  max-width: 320px;
  margin: 10px auto 0;
  line-height: 1.6;
}

/* stepper − / + */
.stepper {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.stepper button {
  width: 52px; height: 52px;
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.08s ease;
}
.stepper .menos {
  background: transparent;
  border: 2px solid var(--borde);
  color: var(--arena);
}
.stepper .menos:active { background: #EFE8D4; }
.stepper .mas {
  background: var(--grad-boton);
  border: none;
  color: var(--carbon);
  box-shadow: 0 4px 0 var(--dorado-prof);
}
.stepper .mas:active { transform: translateY(4px); box-shadow: 0 0 0 var(--dorado-prof); }
.stepper button:disabled { opacity: 0.35; cursor: default; }
.stepper .cant {
  min-width: 44px;
  font-size: 1.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.card.en-carrito { border-color: var(--dorado); }
.card.en-carrito .cant { color: var(--dorado-prof); }

/* ── Ancla de precio (tabla nocturna del canvas) ───────────── */
.precio-ancla {
  margin-top: 16px;
  background: var(--carbon);
  color: var(--papel);
  border-radius: 18px;
  padding: 18px 22px;
}
.ancla-fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
  font-size: 0.88rem;
  color: var(--arena-clara);
}
.ancla-fila.destacada {
  color: var(--papel);
  font-weight: 600;
  border-top: 1px dashed rgba(236, 180, 76, 0.35);
  margin-top: 3px;
  padding-top: 9px;
}
.ancla-val { font-weight: 700; color: var(--dorado); font-size: 1rem; }
.ancla-nota {
  margin-top: 8px;
  text-align: center;
  font-family: var(--fuente-voz);
  font-style: italic;
  font-size: 1rem;
  color: var(--luna);
}

/* ══════════════════════════════════════════════════════════
   LA CAJA ES EL FAROL (pasos)
   ══════════════════════════════════════════════════════════ */
.pasos-lista { list-style: none; display: grid; gap: 12px; margin-top: 22px; }
.paso {
  position: relative;
  background: var(--nube);
  border: 1px solid var(--borde);
  border-radius: 18px;
  box-shadow: var(--sombra-card);
  padding: 18px 18px 18px 64px;
}
.paso-num {
  position: absolute; left: 16px; top: 18px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--carbon);
  color: var(--dorado);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.88rem;
}
.paso h3 { font-size: 0.94rem; font-weight: 600; }
.paso p { font-size: 0.82rem; color: var(--arena); margin-top: 3px; line-height: 1.55; }

.eco-nota {
  margin-top: 16px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--arena);
  background: rgba(236, 180, 76, 0.12);
  border: 1px dashed var(--dorado);
  border-radius: 14px;
  padding: 12px 16px;
}
.eco-nota strong { color: var(--dorado-prof); }

/* ══════════════════════════════════════════════════════════
   PARA TU EMPRESA (corporativo nocturno — SIN precios)
   ══════════════════════════════════════════════════════════ */
.emp-card {
  background: linear-gradient(150deg, var(--carbon), var(--noche-alta));
  color: var(--crema);
  border-radius: 22px;
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.emp-card::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle 1.2px at 16% 24%, rgba(244, 239, 222, 0.7) 1.2px, transparent 2.2px),
    radial-gradient(circle 1px at 84% 18%, rgba(127, 135, 190, 0.8) 1px, transparent 2px),
    radial-gradient(circle 1.2px at 70% 70%, rgba(236, 180, 76, 0.6) 1.2px, transparent 2.2px);
  pointer-events: none;
}
.emp-card > * { position: relative; }
.emp-kicker {
  font-size: 0.64rem;
  letter-spacing: 0.28em;
  color: var(--dorado);
  font-weight: 700;
  text-transform: uppercase;
}
.emp-titulo {
  font-family: var(--fuente-voz);
  font-weight: 500;
  font-size: 1.85rem;
  margin-top: 10px;
}
.emp-texto {
  font-size: 0.85rem;
  color: var(--arena-clara);
  line-height: 1.65;
  margin-top: 10px;
}
.emp-botones { display: grid; gap: 10px; margin-top: 18px; }
.btn-emp {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  padding: 13px 16px;
  border-radius: 999px;
  color: var(--carbon);
  background: var(--grad-boton);
  box-shadow: 0 4px 0 var(--dorado-prof);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn-emp:active { transform: translateY(4px); box-shadow: 0 0 0 var(--dorado-prof); }
.btn-emp.emp-correo {
  background: transparent;
  color: var(--dorado);
  border: 1.5px solid var(--dorado);
  box-shadow: none;
}
.btn-emp.emp-correo:active { background: rgba(236, 180, 76, 0.15); transform: none; }
.emp-nota { margin-top: 14px; font-size: 0.76rem; color: var(--arena-clara); opacity: 0.85; }

/* ══════════════════════════════════════════════════════════
   ESCRIBE TUS DESEOS (paneles generados por app.js)
   ══════════════════════════════════════════════════════════ */
.deseos-panel {
  background: var(--nube);
  border: 1px solid var(--borde);
  border-radius: 18px;
  box-shadow: var(--sombra-card);
  margin-top: 16px;
  overflow: hidden;
}
.deseos-panel summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dorado-prof);
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
  min-height: 50px;
}
.deseos-panel summary::-webkit-details-marker { display: none; }
.deseos-panel summary::before { content: "✦"; color: var(--dorado); }
.deseos-panel.p-velitas summary { color: var(--luna); }
.deseos-panel.p-velitas summary::before { content: "🕯"; }
.deseos-panel summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--dorado-prof);
  transition: transform 0.2s ease;
}
.deseos-panel[open] summary::after { transform: rotate(180deg); }
.deseos-panel summary .resumen-deseos {
  font-family: var(--fuente-voz);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--arena);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 45%;
}
.deseos-cuerpo { padding: 2px 16px 16px; }

.deseos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.deseos-grid .slot-7 { grid-column: 1 / -1; }
.slot { position: relative; }
.slot .n {
  position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--crema);
  color: var(--dorado-prof);
  font-size: 0.64rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.slot input {
  width: 100%;
  padding: 12px 10px 12px 38px;
  border: 1.5px solid var(--borde);
  border-radius: 999px;
  background: var(--nube);
  font-size: 1rem;
  font-weight: 500;
  color: var(--carbon);
}
.slot input:focus {
  outline: none;
  border-color: var(--dorado);
  box-shadow: 0 0 0 3px rgba(236, 180, 76, 0.25);
}

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; align-items: center; }
.chips-titulo {
  width: 100%;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--arena);
}
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 1.5px solid var(--dorado);
  background: rgba(236, 180, 76, 0.12);
  color: var(--dorado-prof);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.chip:active { background: var(--dorado); color: var(--carbon); }
.chip.reset {
  border-color: var(--luna);
  color: var(--luna);
  background: rgba(127, 135, 190, 0.1);
}
.chip.reset:active { background: var(--luna); color: var(--papel); }

/* ══════════════════════════════════════════════════════════
   TU ENCARGO (carrito + formulario)
   ══════════════════════════════════════════════════════════ */
.carrito {
  background: var(--nube);
  border: 1px solid var(--borde);
  border-radius: 18px;
  box-shadow: var(--sombra-card);
  padding: 16px 20px;
  margin: 20px 0;
}
.carrito-vacio { color: var(--arena); font-size: 0.88rem; text-align: center; padding: 4px 0; }
.carrito-linea {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  padding: 5px 0;
}
.carrito-linea .cn { font-weight: 500; }
.carrito-deseos {
  font-family: var(--fuente-voz);
  font-style: italic;
  font-size: 0.94rem;
  color: var(--arena);
  padding: 0 0 6px;
  line-height: 1.5;
}
.carrito-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 2px solid var(--carbon);
  margin-top: 8px;
  padding-top: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.carrito-total .val { color: var(--dorado-prof); font-size: 1.15rem; }

.campo { display: block; margin-bottom: 14px; }
.campo > span, .campo legend {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  color: var(--carbon);
}
.campo input[type="text"], .campo input[type="date"],
.campo input[type="tel"], .campo input[type="email"] {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  border: 1.5px solid var(--borde);
  border-radius: 14px;
  background: var(--nube);
  font-size: 1rem;
  color: var(--carbon);
}
.campo input:focus {
  outline: none;
  border-color: var(--dorado);
  box-shadow: 0 0 0 3px rgba(236, 180, 76, 0.25);
}
.campo input::placeholder { color: #B3A88D; }

/* Autorización de datos (Ley 1581 de 2012): casilla obligatoria */
.campo-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  margin: 2px 0 16px;
  padding: 12px 14px;
  background: var(--nube);
  border: 1.5px solid var(--borde);
  border-radius: 14px;
  cursor: pointer;
}
.campo-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  accent-color: var(--dorado);
  cursor: pointer;
}
.campo-check > span { font-size: 0.76rem; line-height: 1.5; color: var(--arena); }
.campo-check a { color: var(--dorado-prof); text-decoration: underline; }

.pago-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pago-op { position: relative; }
.pago-op input { position: absolute; opacity: 0; }
.pago-op span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  text-align: center;
  padding: 13px 8px;
  border: 1.5px solid var(--borde);
  border-radius: 14px;
  background: var(--nube);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
.pago-op input:checked + span {
  border-color: var(--dorado);
  background: rgba(236, 180, 76, 0.18);
  color: var(--dorado-prof);
}
.pago-op input:focus-visible + span { outline: 2px solid var(--dorado); outline-offset: 2px; }

/* honeypot anti-bots: fuera de pantalla, siempre */
.hp {
  position: absolute;
  left: -5000px;
  opacity: 0;
  height: 1px; width: 1px;
  pointer-events: none;
}

.error-form {
  background: rgba(228, 146, 60, 0.12);
  border: 1.5px solid var(--naranja);
  color: var(--error);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 0.84rem;
  font-weight: 600;
  margin-bottom: 14px;
}

.btn-pedir {
  width: 100%;
  min-height: 56px;
  padding: 18px 0;
  border: none;
  border-radius: 999px;
  background: var(--carbon);
  color: var(--dorado);
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(33, 30, 27, 0.25);
  transition: transform 0.08s ease;
}
.btn-pedir:active { transform: translateY(2px); }
.btn-pedir:disabled { opacity: 0.6; transform: none; cursor: default; }
.nota-pedir { text-align: center; font-size: 0.75rem; color: var(--arena); margin-top: 10px; }

/* ── Recordatorio corporativo (caja vieja — SIN precios) ───── */
.corp-caja {
  background: var(--nube);
  border: 1.5px dashed var(--dorado);
  border-radius: 18px;
  padding: 22px 20px;
  text-align: center;
}
.corp-caja h2 {
  font-family: var(--fuente-voz);
  font-weight: 500;
  font-size: 1.4rem;
}
.corp-caja p { font-size: 0.84rem; color: var(--arena); margin-top: 8px; line-height: 1.6; }
.corp-caja strong { color: var(--dorado-prof); font-weight: 600; }
.btn-corp {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  margin-top: 14px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1.5px solid var(--carbon);
  color: var(--carbon);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.btn-corp:active { background: rgba(236, 180, 76, 0.15); }

/* ══════════════════════════════════════════════════════════
   PANTALLA DE GRACIAS (overlay nocturno)
   ══════════════════════════════════════════════════════════ */
.gracias {
  position: fixed; inset: 0;
  background: radial-gradient(130% 90% at 50% 0%, var(--noche-alta) 0%, #16131D 70%);
  color: var(--crema);
  overflow-y: auto;
  z-index: 100;
  padding: 50px 24px 60px;
}
.gracias-inner { max-width: 420px; margin: 0 auto; text-align: center; }
.gracias-icono {
  font-size: 3rem;
  line-height: 1;
  filter: drop-shadow(0 0 14px rgba(236, 180, 76, 0.65));
}
.gracias-titulo {
  font-family: var(--fuente-marca);
  font-weight: 400;
  font-size: 1.85rem;
  letter-spacing: 0.16em;
  margin-top: 14px;
}
.gracias-sub {
  font-family: var(--fuente-voz);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--dorado);
  margin-top: 8px;
}
.gracias-estado { margin: 16px 0 20px; font-size: 0.92rem; line-height: 1.6; }
.gracias-estado.ok { color: var(--dorado); }
.gracias-estado.fallo { color: var(--naranja); }

.btn-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 16px;
  border-radius: 999px;
  background: var(--wa);
  color: #08331A;
  font-weight: 700;
  font-size: 0.94rem;
  text-decoration: none;
  letter-spacing: 0.03em;
}
.btn-wa:active { transform: translateY(2px); }
.btn-resumen {
  width: 100%;
  margin-top: 12px;
  border: 1.5px solid var(--dorado);
  background: transparent;
  color: var(--dorado);
  font-weight: 600;
  cursor: pointer;
}
.btn-resumen:active { background: rgba(236, 180, 76, 0.15); }

.nequi-box {
  margin-top: 18px;
  background: rgba(127, 135, 190, 0.14);
  border: 1.5px solid var(--luna);
  border-radius: 16px;
  padding: 16px;
}
.nequi-titulo { font-weight: 700; font-size: 0.9rem; }
.nequi-numero {
  font-family: var(--fuente-voz);
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin: 4px 0 6px;
  color: var(--dorado);
}
.nequi-nota { font-size: 0.75rem; color: var(--arena-clara); margin-top: 8px; }

.gracias-detalle {
  margin-top: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--noche-borde);
  border-radius: 16px;
  padding: 16px 18px;
  font-size: 0.82rem;
  text-align: left;
  white-space: pre-line;
  line-height: 1.7;
  color: var(--arena-clara);
}

.btn-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 10px;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1.5px solid rgba(244, 239, 222, 0.4);
  background: transparent;
  color: var(--crema);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-mini:active { background: rgba(244, 239, 222, 0.12); }
.btn-fila { display: flex; margin: 18px auto 0; }
.btn-otra {
  display: block;
  min-height: 44px;
  margin: 12px auto 0;
  background: none;
  border: none;
  color: var(--arena-clara);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════
   FOOTER NOCTURNO
   ══════════════════════════════════════════════════════════ */
footer {
  margin-top: 56px;
  background: radial-gradient(120% 100% at 50% 100%, var(--noche-alta) 0%, var(--noche-prof) 70%);
  color: var(--crema);
  text-align: center;
  padding: 44px 24px 120px;   /* aire extra para la barra flotante */
}
.footer-marca {
  font-family: var(--fuente-marca);
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0.3em;
  padding-left: 0.3em;
}
.footer-script {
  font-family: var(--fuente-voz);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--dorado);
  margin-top: 8px;
}
.sello-aj {
  margin-top: 16px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--arena);
}
.btn-wa-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 16px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--wa);
  color: #7CE0A3;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
}
.footer-micro {
  margin-top: 18px;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--arena);
}
.footer-legal { margin-top: 8px; font-size: 0.72rem; }
.footer-legal a { color: var(--arena-clara); text-decoration: underline; }
.footer-legal a:hover { color: var(--dorado); }

/* ══════════════════════════════════════════════════════════
   BARRA FLOTANTE (píldora nocturna)
   ══════════════════════════════════════════════════════════ */
.barra-flotante {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  width: min(480px, calc(100% - 24px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(90deg, var(--noche-alta), var(--carbon));
  border: 1px solid var(--noche-borde);
  border-radius: 999px;
  padding: 10px 10px 10px 22px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  z-index: 50;
}
.barra-info { display: flex; flex-direction: column; min-width: 0; }
.barra-total { font-weight: 700; font-size: 0.94rem; color: var(--crema); }
.barra-stock {
  font-size: 0.68rem;
  color: var(--arena-clara);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.barra-btn {
  border: none;
  border-radius: 999px;
  min-height: 48px;
  padding: 13px 22px;
  background: var(--grad-boton);
  color: var(--carbon);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--dorado-prof);
  white-space: nowrap;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.barra-btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--dorado-prof); }

/* ── Pantallas anchas: la columna 520 se mantiene ──────────── */
@media (min-width: 700px) {
  .hero { padding-top: 56px; }
}

/* ── Movimiento reducido: TODO quieto ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════
   🖥️ ESCRITORIO (≥900px) — la noche a pantalla completa
   TODO el trabajo de escritorio vive de aquí hacia abajo y
   solo SOBREESCRIBE dentro de media queries: el móvil (<900px)
   queda pixel-idéntico y el contrato con app.js no cambia.
   ══════════════════════════════════════════════════════════ */
@media (min-width: 900px) {

  /* El marco deja de ser columna: el cielo va de borde a borde
     y cada sección administra su propio ancho de lectura.      */
  .marco { max-width: none; box-shadow: none; }
  main { max-width: 1104px; margin: 0 auto; padding: 0 32px 72px; }

  /* ── HERO: texto a la izquierda, farol grande a la derecha ── */
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    grid-template-areas:
      "kicker  farol"
      "titulo  farol"
      "divisor farol"
      "script  farol"
      "sub     farol"
      "datos   farol"
      "cta     farol";
    align-content: center;
    column-gap: clamp(48px, 5vw, 84px);
    text-align: left;
    padding: 84px max(64px, calc((100% - 1040px) / 2)) 92px;
  }
  .hero-kicker  { grid-area: kicker; }
  .hero-titulo  { grid-area: titulo; font-size: clamp(3.3rem, 4.7vw, 4.5rem); padding-left: 0; }
  .hero-divisor { grid-area: divisor; justify-content: flex-start; margin-top: 18px; }
  .hero-script  { grid-area: script; font-size: clamp(1.55rem, 1.9vw, 1.85rem); }
  .hero-sub     { grid-area: sub; margin: 30px 0 0; max-width: 46ch; font-size: 1rem; }
  .hero-datos   { grid-area: datos; justify-content: flex-start; margin-top: 26px; gap: 10px; }
  .hero-datos li { font-size: 0.72rem; }
  .hero-cta-wrap { grid-area: cta; justify-self: start; margin-top: 34px; }

  /* el farol crece con su halo (mismas piezas, otra escala,
     proporción vertical para que se lea como farol) */
  .farol { grid-area: farol; align-self: center; justify-self: center; margin: 0; width: 264px; }
  .farol-halo { inset: -64px; }
  .farol-caja {
    height: 256px;
    border-radius: 20px 20px 14px 14px;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), inset 0 0 44px rgba(236, 180, 76, 0.18);
  }
  .farol-caja::before { height: 24px; }
  .farol-ventana { inset: 44px 34px 20px; border-radius: 12px; }
  .farol-velas { gap: 30px; bottom: 24px; }
  .velita { width: 23px; border-radius: 6px 6px 3px 3px; }
  .velita.v1 { height: 64px; }
  .velita.v2 { height: 88px; }
  .velita.v3 { height: 56px; }
  .farol .llama { width: 16px; height: 23px; top: -24px; }
  .farol .velita.v2 .llama { height: 27px; top: -28px; }
  .farol .chispa.c1 { top: -20px; width: 4px; height: 4px; }

  /* ── Panel de temporada: franja destacada ─────────────────── */
  .panel-tanda { margin-top: 40px; padding: 28px 44px; border-radius: 24px; }
  .stock-texto { font-size: 1.1rem; }
  .stock-barra { max-width: 560px; margin: 14px auto 0; }
  .preventa-linea { font-size: 0.85rem; }

  /* ── Ritmo vertical y títulos ─────────────────────────────── */
  .productos-seccion, .pasos, .deseos, .pedido, .empresarial, .corp { margin-top: 76px; }
  .seccion-titulo { font-size: clamp(2.2rem, 2.5vw, 2.5rem); }
  .seccion-sub { font-size: 0.95rem; }

  /* ── Productos lado a lado ────────────────────────────────── */
  .productos {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 32px;
    align-items: stretch;
  }
  .card { padding: 38px 34px 36px; border-radius: 26px; }
  .card-etiqueta { top: 20px; font-size: 0.66rem; }
  .thumb { width: 96px; height: 96px; font-size: 2.8rem; }
  .card-titulo { font-size: 0.8rem; }
  .card-sub .script { font-size: 1.35rem; }
  .card-precio { font-size: 3.1rem; }
  .card-desc { font-size: 0.92rem; max-width: 380px; }
  .stepper { margin-top: 22px; }

  /* ── Ancla de precio: tabla nocturna centrada ─────────────── */
  .precio-ancla { max-width: 640px; margin: 28px auto 0; padding: 26px 36px; border-radius: 22px; }
  .ancla-fila { font-size: 1rem; }
  .ancla-val { font-size: 1.15rem; }
  .ancla-nota { font-size: 1.1rem; }

  /* ── La caja es el farol: tres pasos en fila ──────────────── */
  .pasos-lista { grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
  .paso { padding: 88px 28px 30px; border-radius: 22px; }
  .paso-num { left: 28px; top: 28px; width: 44px; height: 44px; font-size: 1.05rem; }
  .paso h3 { font-size: 1.05rem; }
  .paso p { font-size: 0.88rem; margin-top: 8px; }
  .eco-nota { max-width: 640px; margin: 28px auto 0; }

  /* ── Para tu empresa: texto + botones lado a lado ─────────── */
  .emp-card {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-areas:
      "kicker  botones"
      "titulo  botones"
      "texto   botones"
      "texto   nota";
    column-gap: clamp(40px, 4vw, 72px);
    align-items: center;
    text-align: left;
    padding: 46px 56px;
    border-radius: 28px;
  }
  .emp-kicker  { grid-area: kicker; align-self: end; }
  .emp-titulo  { grid-area: titulo; font-size: 2.3rem; margin-top: 6px; }
  .emp-texto   { grid-area: texto; align-self: start; font-size: 0.95rem; max-width: 54ch; }
  .emp-botones { grid-area: botones; align-self: center; margin-top: 0; gap: 12px; }
  .emp-nota    { grid-area: nota; align-self: start; margin-top: 12px; text-align: center; }

  /* ── Escribe tus deseos: paneles cómodos, 3 casillas por fila ── */
  #deseosPaneles { max-width: 780px; margin: 0 auto; }
  .deseos-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .deseos-panel summary { padding: 18px 22px; }
  .deseos-cuerpo { padding: 4px 20px 20px; }

  /* ── Tu encargo: formulario + resumen pegajoso ────────────── */
  .pedido {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    grid-template-areas:
      "titulo titulo"
      "sub    sub"
      "form   carrito";
    column-gap: 52px;
  }
  .pedido .seccion-titulo { grid-area: titulo; }
  .pedido .seccion-sub { grid-area: sub; }
  .pedido .carrito {
    grid-area: carrito;
    position: sticky;
    top: 28px;
    align-self: start;
    margin: 30px 0 0;
    padding: 22px 26px;
  }
  #formPedido { grid-area: form; margin-top: 30px; }

  /* ── Recordatorio corporativo ─────────────────────────────── */
  .corp-caja { max-width: 680px; margin: 0 auto; padding: 34px 44px; }

  /* ── Pantalla de gracias: tarjeta modal en la noche ───────── */
  .gracias {
    display: flex;
    padding: 48px 32px;
    background: rgba(13, 11, 18, 0.82);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
  }
  .gracias-inner {
    margin: auto;
    max-width: 560px;
    width: 100%;
    background: radial-gradient(140% 120% at 50% 0%, var(--noche-alta) 0%, #16131D 78%);
    border: 1px solid var(--noche-borde);
    border-radius: 28px;
    padding: 46px 50px;
    box-shadow: 0 44px 100px rgba(0, 0, 0, 0.55);
  }

  /* ── Footer nocturno a lo ancho ───────────────────────────── */
  footer {
    margin-top: 80px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 48px;
    align-items: center;
    text-align: left;
    padding: 60px max(64px, calc((100% - 1040px) / 2)) 150px;
  }
  .footer-marca { grid-column: 1; grid-row: 1; font-size: 2rem; }
  .footer-script { grid-column: 1; grid-row: 2; font-size: 1.35rem; margin-top: 6px; }
  .sello-aj { grid-column: 1; grid-row: 3; margin-top: 22px; }
  .btn-wa-chip { grid-column: 2; grid-row: 1 / 4; justify-self: end; align-self: center; margin-top: 0; }
  .footer-micro { grid-column: 1 / -1; grid-row: 4; margin-top: 32px; }
  .footer-legal { grid-column: 1 / -1; grid-row: 5; margin-top: 8px; }

  /* ── Barra flotante: píldora en la esquina ────────────────── */
  .barra-flotante {
    left: auto;
    right: 28px;
    bottom: 24px;
    transform: none;
    width: max-content;
    max-width: 460px;
    padding: 10px 12px 10px 24px;
    gap: 18px;
  }
}

/* ── Hover sobrio (solo con puntero real; sin transforms) ──── */
@media (min-width: 900px) and (hover: hover) {
  .card { transition: border-color 0.3s ease, box-shadow 0.3s ease; }
  .card:hover {
    border-color: var(--dorado);
    box-shadow: 0 2px 3px rgba(33, 30, 27, 0.05), 0 14px 34px rgba(33, 30, 27, 0.12);
  }
  .hero-cta:hover { box-shadow: 0 0 46px rgba(236, 180, 76, 0.6), 0 5px 0 var(--dorado-prof); filter: brightness(1.04); }
  .stepper .mas:hover { filter: brightness(1.05); }
  .stepper .menos:hover { background: #EFE8D4; border-color: var(--arena-clara); }
  .btn-pedir:hover { box-shadow: 0 16px 36px rgba(33, 30, 27, 0.34); }
  .btn-emp:hover, .barra-btn:hover { filter: brightness(1.05); }
  .btn-emp.emp-correo:hover { background: rgba(236, 180, 76, 0.12); filter: none; }
  .chip:hover { background: rgba(236, 180, 76, 0.22); }
  .chip.reset:hover { background: rgba(127, 135, 190, 0.2); }
  .btn-corp:hover { background: rgba(236, 180, 76, 0.12); }
  .btn-wa-chip:hover { background: rgba(37, 211, 102, 0.12); }
  .btn-mini:hover { background: rgba(244, 239, 222, 0.12); }
  .btn-resumen:hover { background: rgba(236, 180, 76, 0.12); }
  .deseos-panel summary:hover { background: rgba(236, 180, 76, 0.06); }
  .pago-op span:hover { border-color: var(--dorado); }
}

/* ── Monitores grandes (≥1280px): más lienzo, mismo sistema ── */
@media (min-width: 1280px) {
  main { max-width: 1184px; }
  .hero {
    column-gap: 96px;
    padding-left: max(64px, calc((100% - 1120px) / 2));
    padding-right: max(64px, calc((100% - 1120px) / 2));
  }
  footer {
    padding-left: max(64px, calc((100% - 1120px) / 2));
    padding-right: max(64px, calc((100% - 1120px) / 2));
  }
  .farol { width: 300px; }
  .pedido { column-gap: 64px; }
}

/* ── GALERÍA DE FOTOS REALES ───────────────────────────── */
.galeria { margin-top: 8px; }
.g-pista {
  display: flex; gap: 12px; margin-top: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding: 0 20px; padding: 4px 2px 10px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.g-pista::-webkit-scrollbar { display: none; }
.g-pista:focus-visible { outline: 2px solid var(--dorado); outline-offset: 4px; border-radius: 18px; }
.g-foto {
  flex: 0 0 78%; scroll-snap-align: center; margin: 0;
  border-radius: 18px; overflow: hidden; cursor: zoom-in;
  background: var(--papel); border: 1px solid var(--borde);
  box-shadow: 0 6px 18px rgba(46,32,24,0.10);
  transition: transform .25s ease, box-shadow .25s ease;
}
.g-foto img { display: block; width: 100%; height: 100%; aspect-ratio: 3/4; object-fit: cover; }
.g-pista.en-pausa .g-foto { box-shadow: 0 6px 22px rgba(232,161,60,0.22); }

.g-puntos { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.g-punto {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: var(--borde); cursor: pointer; transition: all .2s ease;
}
.g-punto.activo { background: var(--dorado); width: 22px; border-radius: 999px; }

/* Lupa */
.g-lupa {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(26,24,38,0.94); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 54px 16px;
}
.g-lupa img { max-width: 100%; max-height: 100%; border-radius: 16px; object-fit: contain; }
.lupa-cerrar, .lupa-nav {
  position: absolute; border: 0; cursor: pointer; color: var(--crema);
  background: rgba(250,243,234,0.14); border-radius: 50%;
  width: 46px; height: 46px; font-size: 1.5rem; line-height: 1;
  display: grid; place-items: center;
}
.lupa-cerrar { top: 14px; right: 14px; font-size: 1.1rem; }
.lupa-ant { left: 12px; } .lupa-sig { right: 12px; }
.lupa-pie {
  position: absolute; bottom: 18px; left: 0; right: 0; text-align: center;
  font-size: 0.8rem; letter-spacing: 0.14em; color: var(--arena-clara);
}

@media (min-width: 900px) {
  .g-foto { flex-basis: 320px; }
  .g-foto:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(46,32,24,0.18); }
  .g-lupa { padding: 70px; }
  .lupa-ant { left: 28px; } .lupa-sig { right: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .g-pista { scroll-behavior: auto; }
  .g-foto { transition: none; }
}

/* Aviso corporativo dentro del formulario de encargo */
.pedido-corp {
  margin: 12px 0 4px;
  background: rgba(232,161,60,0.10);
  border: 1px solid rgba(232,161,60,0.45);
  border-radius: 14px; padding: 12px 14px;
  font-size: 0.88rem; color: var(--carbon);
}
.pedido-corp a { color: var(--dorado-prof, #B98A3F); font-weight: 600; }