/* ============================================================
   /tienda/ — Landing "próximamente"
   Paleta: carbón + brasa + chispa (identidad de fuego/parrilla)
   ============================================================ */

:root {
  --carbon-1: #100c0a;
  --carbon-2: #1b1512;
  --carbon-3: #241a14;
  --rojo-marca: #c43822;
  --brasa: #ff6b35;
  --chispa: #ffb648;
  --hueso: #f5ede1;
  --ceniza: #a89a8c;
}

.tienda-proximamente {
  margin: 0;
  background: var(--carbon-2);
  font-family: 'Inter', -apple-system, sans-serif;
}

.brasa-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(255,107,53,0.16), transparent 60%),
    linear-gradient(to bottom, var(--carbon-1) 0%, var(--carbon-2) 55%, var(--carbon-3) 100%);
  padding: 6rem 1.5rem;
  text-align: center;
}

/* ---------- Contenido central ---------- */

.brasa-hero__content {
  position: relative;
  z-index: 2;
  max-width: 46rem;
}

.eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ceniza);
}

.titulo-3d {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(3.2rem, 15vw, 9rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--chispa);
  text-shadow:
    1px 1px 0 #ffa23f,
    2px 2px 0 #ff8c30,
    3px 3px 0 #f97724,
    4px 4px 0 #e8611c,
    5px 5px 0 #d64e16,
    6px 6px 0 var(--rojo-marca),
    7px 7px 0 #a8301d,
    8px 8px 0 #8c2818,
    9px 9px 0 #701f13,
    10px 10px 22px rgba(255,107,53,0.55),
    12px 14px 46px rgba(255,107,53,0.35);
  animation: brasa-flicker 3.4s ease-in-out infinite;
}

.subtitulo {
  margin: 1.75rem auto 0;
  max-width: 32rem;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  line-height: 1.6;
  color: var(--hueso);
  opacity: 0.88;
}

.cta-group {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.btn-brasa {
  display: inline-block;
  padding: 0.95rem 2.25rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brasa), var(--rojo-marca));
  color: var(--hueso);
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(196, 56, 34, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-brasa:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255, 107, 53, 0.5);
}

.btn-brasa:focus-visible {
  outline: 2px solid var(--chispa);
  outline-offset: 3px;
}

.link-volver {
  font-size: 0.9rem;
  color: var(--ceniza);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.link-volver:hover {
  color: var(--hueso);
  border-color: var(--ceniza);
}

/* ---------- Ascuas flotantes ---------- */

.ascuas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.ascua {
  position: absolute;
  bottom: -12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--chispa), var(--brasa) 60%, transparent 72%);
  box-shadow: 0 0 8px 2px rgba(255, 140, 50, 0.55);
  opacity: 0;
  animation: ascua-subir linear infinite;
}

.a1  { left: 6%;  width: 4px; height: 4px; animation-duration: 7s;  animation-delay: 0s; }
.a2  { left: 16%; width: 6px; height: 6px; animation-duration: 9s;  animation-delay: 1.2s; }
.a3  { left: 27%; width: 3px; height: 3px; animation-duration: 6.5s; animation-delay: 2.4s; }
.a4  { left: 38%; width: 5px; height: 5px; animation-duration: 8s;  animation-delay: 0.6s; }
.a5  { left: 49%; width: 4px; height: 4px; animation-duration: 7.5s; animation-delay: 3s; }
.a6  { left: 58%; width: 6px; height: 6px; animation-duration: 10s; animation-delay: 1.8s; }
.a7  { left: 69%; width: 3px; height: 3px; animation-duration: 6s;  animation-delay: 2.9s; }
.a8  { left: 78%; width: 5px; height: 5px; animation-duration: 8.5s; animation-delay: 0.3s; }
.a9  { left: 88%; width: 4px; height: 4px; animation-duration: 7.2s; animation-delay: 3.6s; }
.a10 { left: 94%; width: 6px; height: 6px; animation-duration: 9.5s; animation-delay: 1.5s; }

@keyframes ascua-subir {
  0%   { transform: translate(0, 0); opacity: 0; }
  8%   { opacity: 1; }
  85%  { opacity: 0.5; }
  100% { transform: translate(18px, -100vh); opacity: 0; }
}

/* ---------- Brasero (glow inferior) ---------- */

.brasero {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 240px;
  background: radial-gradient(ellipse 60% 100% at center, rgba(255,107,53,0.32), rgba(255,107,53,0.06) 45%, transparent 75%);
  filter: blur(6px);
  z-index: 1;
  pointer-events: none;
}

/* ---------- Flicker sutil del título ---------- */

@keyframes brasa-flicker {
  0%, 100% { filter: brightness(1); }
  45%      { filter: brightness(1.06); }
  52%      { filter: brightness(0.95); }
  78%      { filter: brightness(1.03); }
}

/* ---------- Accesibilidad: respeta reduced-motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .titulo-3d { animation: none; }
  .ascua { animation: none; opacity: 0.35; }
}

/* ---------- Responsive ---------- */

@media (max-width: 480px) {
  .brasa-hero { padding: 4.5rem 1.25rem; }
  .cta-group { width: 100%; }
  .btn-brasa { width: 100%; text-align: center; }
}