/* ════════════════════════════════════════════════════════════════
   DALUNA — NOCTURNE · Rediseño radical
   ────────────────────────────────────────────────────────────────
   "Fly me to the Moon" hecho identidad: la tienda entera vive de
   noche. Fondo malva-ink profundo, la crema es la luz de luna,
   el dorado es el brillo. Las fotos de producto son ventanas
   iluminadas en la oscuridad.

   Cargar la ÚLTIMA en index.html y perfil.html.
   Técnica: inversión de tema vía redefinición de variables —
   daluna-refresh.css referencia var(--paper), var(--ink), etc.,
   así que al invertir los valores aquí, sus 887 !important
   aplican los colores nuevos solos.
   ════════════════════════════════════════════════════════════════ */

/* ── 1 · INVERSIÓN DEL TEMA ─────────────────────────────────────
   Semántica: --ink pasa a ser "tinta de luna" (clara),
   --paper/--cream pasan a ser noche. */
:root {
  /* Noche */
  --night-950: #17090e;
  --night-900: #1d1216;
  --night-800: #251419;
  --night-700: #2f2027;
  --night-600: #3b2a32;

  /* Luz de luna */
  --moon:      #f6efe7;
  --moon-soft: rgba(246,239,231,.86);
  --moon-mute: rgba(246,239,231,.55);
  --moon-dim:  rgba(246,239,231,.32);

  /* Remapeo de las variables que consume todo el CSS existente */
  --cream:     var(--night-950);
  --cream-2:   var(--night-900);
  --bone:      var(--night-800);
  --paper:     var(--night-800);
  --ink:       var(--moon);
  --ink-soft:  var(--moon-soft);
  --ink-mute:  var(--moon-mute);
  --line:      rgba(246,239,231,.09);
  --line-2:    rgba(246,239,231,.16);
  --line-3:    rgba(246,239,231,.28);

  --malva-900: #e9d9dc;          /* invertidos: los tonos "oscuros" */
  --malva-700: #d8bfc4;          /* de malva ahora son claros       */
  --malva-100: #33222a;
  --malva-200: #45303a;

  /* El dorado gana protagonismo: es la luz */
  --gold:      #d9b483;
  --gold-deep: #c9a77c;

  --shadow-soft: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  --shadow-card: 0 2px 6px rgba(0,0,0,.35), 0 24px 48px -20px rgba(0,0,0,.65);
  --shadow-lift: 0 4px 12px rgba(0,0,0,.4), 0 40px 80px -30px rgba(0,0,0,.8);

  /* Tokens nuevos alineados */
  --dl-bg:       var(--night-950);
  --dl-bg-2:     var(--night-900);
  --dl-surface:  var(--night-800);
  --dl-ink:      var(--moon);
  --dl-ink-soft: var(--moon-soft);
  --dl-ink-mute: var(--moon-mute);
  --dl-line:     var(--line);
  --dl-line-2:   var(--line-2);
  --dl-line-3:   var(--line-3);
  --dl-accent:   var(--gold);

  color-scheme: dark;
}

/* ── 2 · CIELO NOCTURNO ─────────────────────────────────────────
   El fondo no es plano: es un cielo. Gradiente vertical profundo
   + halo de luna fijo arriba a la derecha que acompaña el scroll. */
html { background: var(--night-950); }

body {
  background:
    radial-gradient(ellipse 90rem 60rem at 82% -10%,
      rgba(217,180,131,.13), transparent 55%),
    radial-gradient(ellipse 70rem 50rem at 12% 110%,
      rgba(145,116,121,.10), transparent 60%),
    linear-gradient(180deg, var(--night-900) 0%, var(--night-950) 32rem) !important;
  background-attachment: fixed !important;
  color: var(--moon-soft) !important;
}

/* El grano de refresh multiplicaba sobre claro; en oscuro, screen */
body::before {
  mix-blend-mode: screen !important;
  opacity: .05 !important;
}

::selection { background: var(--gold); color: var(--night-950); }

/* ── 3 · LA FIRMA: FASES DE LUNA ────────────────────────────────
   Cada separador de sección (.section-ribbon) lleva una fase
   lunar dorada. Es el elemento memorable del sitio. */
.section-ribbon {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--dl-sp-7, 3rem) 0 !important;
  background: transparent !important;
  border: none !important;
}
.section-ribbon::before {
  content: "";
  position: absolute;
  left: 8%; right: 8%; top: 50%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--line-3) 20%, var(--line-3) 80%, transparent);
}
.section-ribbon::after {
  content: "";
  position: relative;
  z-index: 1;
  width: 30px; height: 30px;
  border-radius: 50%;
  /* Luna creciente: dorado con sombra interior desplazada */
  background: radial-gradient(circle at 68% 38%,
    var(--gold) 0 58%, transparent 60%);
  box-shadow:
    inset -7px 4px 0 0 var(--night-950),
    0 0 24px rgba(217,180,131,.5);
  outline: 10px solid var(--night-950);
}

/* ── 4 · NAV: cristal nocturno ──────────────────────────────────── */
header nav,
nav.glass {
  background: rgba(23, 9, 14, .72) !important;
  backdrop-filter: blur(18px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
  border-bottom: 1px solid var(--line) !important;
}
.nav-link { color: var(--moon-mute) !important; }
.nav-link:hover { color: var(--gold) !important; }

#mobile-menu {
  background: rgba(23, 9, 14, .96) !important;
  backdrop-filter: blur(24px) !important;
}

/* ── 5 · HERO: la luna es el escenario ──────────────────────────
   Tipografía enorme, brillo dorado, estrellas por fin visibles. */
.hero {
  min-height: min(92vh, 60rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: transparent !important;
}

/* Disco lunar gigante detrás del titular */
.hero::before {
  content: "";
  position: absolute;
  top: 6%;
  right: max(4%, calc(50% - 44rem));
  width: clamp(16rem, 34vw, 30rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%,
      #f9f2e8 0%, #ecdfc9 34%, #d9b483 72%, #a88660 100%);
  box-shadow:
    0 0 80px 10px rgba(217,180,131,.35),
    0 0 200px 60px rgba(217,180,131,.15);
  opacity: .92;
  filter: saturate(.92);
  pointer-events: none;
}
/* Cráteres sutiles */
.hero::after {
  content: "";
  position: absolute;
  top: 6%;
  right: max(4%, calc(50% - 44rem));
  width: clamp(16rem, 34vw, 30rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle 10% at 30% 62%, rgba(168,134,96,.5), transparent 60%),
    radial-gradient(circle 7% at 58% 30%, rgba(168,134,96,.4), transparent 60%),
    radial-gradient(circle 12% at 70% 68%, rgba(168,134,96,.35), transparent 60%);
  pointer-events: none;
  mix-blend-mode: multiply;
}

.hero-stars { opacity: 1 !important; }

.hero h1,
.hero-line {
  color: var(--moon) !important;
  text-shadow: 0 2px 40px rgba(0,0,0,.5);
}
.hero h1 {
  font-family: var(--font-serif) !important;
  font-size: clamp(3rem, 4.5vw + 1.8rem, 6.8rem) !important;
  line-height: .98 !important;
  letter-spacing: -0.015em;
  font-weight: 300 !important;
}
.hero-line em {
  color: var(--gold) !important;
  font-style: italic;
}

.hero-foot { position: relative; z-index: 2; }
.hero-services,
.hero-meta-row { color: var(--moon-mute) !important; }

/* ── 6 · BOTONES: dorado lunar ──────────────────────────────────── */
.btn-primary,
.btn.btn-dark,
.btn-comprar,
.cafe-dir-btn,
.btn-carta-download {
  background: var(--gold) !important;
  color: var(--night-950) !important;
  border: 1px solid var(--gold) !important;
  font-weight: 700 !important;
  box-shadow: 0 0 0 0 rgba(217,180,131,0);
  transition: all .35s var(--ease) !important;
}
.btn-primary:hover,
.btn.btn-dark:hover,
.btn-comprar:hover,
.cafe-dir-btn:hover,
.btn-carta-download:hover {
  background: #e6c393 !important;
  box-shadow: 0 6px 30px -6px rgba(217,180,131,.55) !important;
  transform: translateY(-2px);
}

.btn-ghost,
.btn.btn-outline {
  background: rgba(246,239,231,.06) !important;
  color: var(--moon) !important;
  border: 1px solid rgba(246,239,231,.45) !important;
}
.btn-ghost:hover,
.btn.btn-outline:hover {
  background: rgba(246,239,231,.10) !important;
  border-color: var(--gold) !important;
  color: var(--gold) !important;
}

/* ── 7 · CATÁLOGO: ventanas iluminadas ──────────────────────────
   Las tarjetas son lo más luminoso de la página: la foto brilla,
   la superficie es noche cálida, el hover enciende un halo. */
.cookie-card {
  background:
    linear-gradient(180deg, var(--night-700), var(--night-800)) !important;
  border: 1px solid var(--line-2) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.45) !important;
}
.cookie-card:hover {
  border-color: rgba(217,180,131,.55) !important;
  box-shadow:
    0 20px 60px -12px rgba(0,0,0,.7),
    0 0 40px -8px rgba(217,180,131,.28) !important;
  transform: translateY(-6px) !important;
}
.cookie-card .floating-cookie { background: var(--night-600) !important; }

/* Número de pieza: medalla dorada */
.cookie-card[data-index]::after {
  background: var(--night-950) !important;
  color: var(--gold) !important;
  border: 1px solid rgba(217,180,131,.4);
  box-shadow: 0 2px 12px rgba(0,0,0,.5);
}

.cookie-card .cookie-content h3,
.cookie-card h3 { color: var(--moon) !important; }
.cookie-card .price { color: var(--gold) !important; }

/* ── 8 · SECCIONES DE CONTENIDO ─────────────────────────────────── */
.story, .cafeteria-section, .tartas-section {
  background: transparent !important;
}
.catalog-title,
.cafeteria-head h2,
.tartas-head h2,
.story h2 {
  color: var(--moon) !important;
}
.catalog-subtitle { color: var(--moon-mute) !important; }

.eyebrow { color: var(--gold) !important; }
.eyebrow::before { background: var(--gold) !important; }

/* Tarjetas de cafetería (horarios, contacto, carta) */
.cafe-card,
.cafe-carta-card {
  background: var(--night-800) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-soft) !important;
}
.cafe-closed-badge {
  background: rgba(181,69,60,.16) !important;
  color: #e79a93 !important;
}
.cafe-map-wrap {
  border: 1px solid var(--line-2) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  /* El mapa claro deslumbra en la noche: lo atenuamos */
  filter: brightness(.85) contrast(1.05) saturate(.85);
}

/* Banner de ingredientes: ya era oscuro, ahora se funde con el cielo */
.ingredients-banner-overlay {
  background: linear-gradient(180deg,
    var(--night-950), rgba(23,9,14,.55) 30%,
    rgba(23,9,14,.55) 70%, var(--night-950)) !important;
}

/* Fotos de la cafetería: marco de noche */
.cafe-photo {
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-card);
}

/* ── 9 · FORMULARIOS Y MODALES ──────────────────────────────────── */
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], select, textarea {
  background: var(--night-700) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--moon) !important;
}
input::placeholder, textarea::placeholder { color: var(--moon-dim) !important; }
input:focus, select:focus, textarea:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(217,180,131,.22) !important;
}

.modal-card,
[class*="modal"] [class*="card"] {
  background: var(--night-800) !important;
  border: 1px solid var(--line-2) !important;
  box-shadow: var(--shadow-lift) !important;
  color: var(--moon-soft) !important;
}

/* Carrito lateral */
#cart-panel, .cart-panel, [id*="cart-drawer"] {
  background: var(--night-900) !important;
  border-left: 1px solid var(--line-2) !important;
}
#cart-bubble {
  background: var(--gold) !important;
  color: var(--night-950) !important;
}

/* ── 10 · FOOTER: el suelo de la noche ──────────────────────────── */
footer {
  background: var(--night-950) !important;
  border-top: 1px solid var(--line) !important;
  color: var(--moon-mute) !important;
}
footer h2, footer h3, footer p, footer address, footer a,
.footer-cta h2, .footer-sign {
  color: var(--moon-soft) !important;
}
footer a:hover, .footer-cta a:hover { color: var(--gold) !important; }

/* ── 11 · LOADER ────────────────────────────────────────────────── */
#page-loader {
  background: var(--night-950) !important;
  color: var(--gold) !important;
}

/* ── 12 · SCROLLBAR NOCTURNO ────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--night-950); }
::-webkit-scrollbar-thumb {
  background: var(--night-600);
  border-radius: 6px;
  border: 2px solid var(--night-950);
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }

/* ── 13 · MÓVIL: la luna no estorba al texto ────────────────────── */
@media (max-width: 720px) {
  .hero::before,
  .hero::after {
    width: 13rem;
    top: 2%;
    right: -3rem;
    opacity: .55;
  }
  .hero h1 { font-size: clamp(2.6rem, 11vw, 3.4rem) !important; }
}

/* ── 14 · ACCESIBILIDAD ─────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 3px;
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero::before { box-shadow: none; }
}

/* ── CORRECCIÓN GLOBAL: elementos con fondo claro (--ink → luna) ──
   En nocturne --ink = moon (crema claro) y --cream = night-950 (negro).
   Refresh.css usa color:var(--cream) SIN !important en muchos elementos
   que tienen fondo claro. El body { color: moon-soft !important } los
   sobreescribe dejando texto claro sobre fondo claro → invisible.
   Solución: forzar con !important el texto oscuro donde hace falta. */

/* Banda marquee */
.marquee { background: var(--night-800) !important; color: var(--moon-soft) !important; }

/* Filtros activos del catálogo */
.filter-chip.active { background: var(--gold) !important; color: var(--night-950) !important; border-color: var(--gold) !important; }
.filter-chip:hover  { border-color: var(--gold) !important; color: var(--gold) !important; }

/* Elementos de carrito / modales con fondo ink que ahora es claro */
#btn-next,
#btn-verify-code,
#btn-go-login {
  background: var(--gold) !important;
  color: var(--night-950) !important;
  border-color: var(--gold) !important;
}
#btn-next:hover,
#btn-verify-code:hover,
#btn-go-login:hover {
  background: #e6c393 !important;
}

/* Cart modal panel — blanco en el diseño base, nocturne lo oscurece */
#cart-modal > div {
  background: var(--night-800) !important;
  color: var(--moon-soft) !important;
}
#cart-modal h2,
#cart-modal h3,
#cart-modal h4,
#cart-modal label,
#cart-modal span:not(.sr-only),
#cart-modal p {
  color: var(--moon-soft) !important;
}
#cart-modal .text-stone-400,
#cart-modal .text-stone-500,
#cart-modal .text-stone-600,
#cart-modal .text-stone-700 {
  color: var(--moon-mute) !important;
}
#cart-modal .bg-stone-50,
#cart-modal .bg-stone-100,
#cart-modal .bg-white {
  background: var(--night-700) !important;
  border-color: var(--line-2) !important;
}
#cart-modal .border-stone-200,
#cart-modal .border-stone-300 { border-color: var(--line-2) !important; }

/* Precio total del carrito */
#cart-subtotal,
#resumen-total-final { color: var(--gold) !important; }

/* Progress steps del carrito */
#progress-1, #progress-2, #progress-3 {
  background: var(--night-600) !important;
  color: var(--moon-soft) !important;
  border-color: var(--line-2) !important;
}
#progress-1.bg-black { background: var(--gold) !important; color: var(--night-950) !important; }

/* ── 15 · MENÚ DESPLEGABLE DE USUARIO ──────────────────────────── */
.user-menu-wrap {
  position: relative;
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 190px;
  background: var(--night-800);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
  padding: 8px;
  z-index: 200;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease;
}
.user-dropdown[hidden] {
  display: none !important;
}

.user-dropdown-name {
  font-size: 11px;
  font-family: var(--font-sans);
  color: var(--moon-mute);
  letter-spacing: .06em;
  padding: 6px 10px 10px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-family: var(--font-sans);
  letter-spacing: .08em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--moon-soft);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  transition: background .15s, color .15s;
  text-align: left;
  box-sizing: border-box;
}
.user-dropdown-item:hover {
  background: rgba(246,239,231,.08);
  color: var(--moon);
}
.user-dropdown-item.hidden {
  display: none !important;
}

.user-dropdown-sep {
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}

.user-dropdown-logout {
  color: rgba(229, 150, 143, .8);
}
.user-dropdown-logout:hover {
  background: rgba(181,69,60,.12) !important;
  color: #e99691 !important;
}