/* ==========================================================
   BENDITA FIESTA · Landing "Próximamente"
   Concepto: noche de fiesta. Negro y violeta profundo, luz champagne,
   haces de luz de pista y una bola de espejos. La marca es el centro.
   ========================================================== */

:root {
  /* Colores */
  --black: #0b070d;
  --plum: #170c1d;
  --violet: #2a1240;
  --violet-light: #8b5cf6;
  --gold: #e3c38b;
  --gold-light: #f6e2b4;
  --gold-deep: #b98a48;
  --rose: #f08cb4;
  --ink: #f8f1f5;
  --muted: #bcaabb;
  --line: rgba(227, 195, 139, 0.22);
  --line-soft: rgba(248, 241, 245, 0.1);
  --whatsapp: #25d366;

  /* Tipografía */
  --font-display: "Bodoni Moda", "Didot", "Bodoni 72", "Latin Modern Roman", Georgia, serif;
  --font-body: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Espaciado */
  --gutter: clamp(18px, 5vw, 64px);
  --radius: 22px;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--black); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--black);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
em { font-style: italic; color: var(--gold); }
svg { display: block; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 12px; }

.eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------------- Barra superior ---------------- */
.topbar {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: calc(18px + env(safe-area-inset-top, 0px)) var(--gutter) 18px;
}
.monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
  background: rgba(11, 7, 13, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color 0.3s;
}
.monogram span { color: var(--muted); margin: 0 1px; }
.monogram:hover { border-color: var(--gold); }
.domain {
  margin-left: auto;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.icon-btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  color: var(--whatsapp);
  background: rgba(11, 7, 13, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color 0.3s, transform 0.3s;
}
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:hover { border-color: var(--whatsapp); transform: translateY(-2px); }

/* ---------------- Hero ---------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(120px + env(safe-area-inset-top, 0px)) var(--gutter) 110px;
}
.hero-inner { position: relative; z-index: 2; max-width: 1240px; width: 100%; margin-inline: auto; }

/* Escenario */
.stage { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11, 7, 13, 0.82) 0%, rgba(11, 7, 13, 0.25) 60%, rgba(11, 7, 13, 0) 100%),
    linear-gradient(180deg, rgba(11, 7, 13, 0) 65%, var(--black) 100%);
}
.glow { position: absolute; border-radius: 50%; }
.glow-1 {
  width: 70vmax; height: 70vmax; right: -18vmax; top: -24vmax;
  background: radial-gradient(closest-side, rgba(110, 40, 170, 0.55), rgba(42, 18, 64, 0.25) 55%, transparent);
}
.glow-2 {
  width: 55vmax; height: 55vmax; left: -20vmax; bottom: -26vmax;
  background: radial-gradient(closest-side, rgba(227, 195, 139, 0.16), transparent 70%);
}

/* Haces de luz (conos suaves que barren la pista) */
.beams { position: absolute; inset: 0; }
.beam {
  position: absolute;
  top: -6%;
  width: 70vmax;
  height: 120vmax;
  margin-left: -35vmax;
  transform-origin: 50% 0;
  background: conic-gradient(from 165deg at 50% 0%, transparent 0deg, var(--c) 12deg, var(--c) 18deg, transparent 30deg, transparent 360deg);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 85%);
  mix-blend-mode: screen;
  animation: sweep var(--t) ease-in-out infinite alternate;
  will-change: transform;
}
.beam-1 { left: 58%; --c: rgba(246, 226, 180, 0.32); --t: 9s;  --from: -22deg; --to: 14deg; }
.beam-2 { left: 82%; --c: rgba(240, 140, 180, 0.3);  --t: 11s; --from: 20deg;  --to: -16deg; }
.beam-3 { left: 70%; --c: rgba(139, 92, 246, 0.34);  --t: 13s; --from: -8deg;  --to: 26deg; }
.beam-4 { left: 96%; --c: rgba(246, 226, 180, 0.22); --t: 8s;  --from: 10deg;  --to: -24deg; }
@keyframes sweep { from { transform: rotate(var(--from)); } to { transform: rotate(var(--to)); } }

/* Bola de espejos */
.discoball { position: absolute; top: 0; right: clamp(24px, 13vw, 220px); width: clamp(96px, 12vw, 170px); }
.cord { display: block; width: 1px; height: clamp(60px, 9vw, 110px); margin: 0 auto; background: linear-gradient(transparent, rgba(255, 255, 255, 0.4)); }
.ball {
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  background-image:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.95) 0 6%, rgba(255, 255, 255, 0) 22%),
    repeating-linear-gradient(90deg, rgba(20, 12, 28, 0.55) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(0deg, rgba(20, 12, 28, 0.55) 0 1px, transparent 1px 11px),
    radial-gradient(circle at 38% 32%, #fbf6ff 0%, #cfc4dc 30%, #7d6c93 62%, #2a1d38 88%);
  background-size: 100% 100%, 22px 100%, 100% 100%, 100% 100%;
  box-shadow: 0 0 60px rgba(214, 170, 255, 0.35), 0 0 140px rgba(227, 195, 139, 0.15), inset -14px -18px 30px rgba(0, 0, 0, 0.55);
  animation: spin-ball 6s linear infinite;
}
@keyframes spin-ball { to { background-position: 0 0, 22px 0, 0 0, 0 0; } }
.flare {
  position: absolute;
  width: 18px; height: 18px;
  background:
    linear-gradient(90deg, transparent 45%, #fff 50%, transparent 55%),
    linear-gradient(0deg, transparent 45%, #fff 50%, transparent 55%);
  border-radius: 50%;
  filter: drop-shadow(0 0 6px #fff);
  animation: flare 2.8s ease-in-out infinite;
}
.flare-1 { top: 64%; left: 22%; }
.flare-2 { top: 80%; left: 68%; animation-delay: -1s; width: 14px; height: 14px; }
.flare-3 { top: 92%; left: 40%; animation-delay: -2s; width: 10px; height: 10px; }
@keyframes flare { 0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

.particles { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Contenido del hero */
.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(23, 12, 29, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(227, 195, 139, 0.7);
  animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(227, 195, 139, 0); } 100% { box-shadow: 0 0 0 0 rgba(227, 195, 139, 0); } }

.brand-wrap { position: relative; width: max-content; max-width: 100%; margin-top: clamp(20px, 3vw, 34px); }
.brand {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.6rem, 15.5vw, 11rem);
  line-height: 0.86;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.brand span { display: block; }
.brand-1 { color: var(--ink); text-shadow: 0 0 60px rgba(214, 170, 255, 0.18); }
.brand-2 {
  font-style: italic;
  padding-left: 0.55em;
  background: linear-gradient(105deg, var(--gold-deep) 0%, var(--gold) 28%, #fff5dc 45%, var(--gold-light) 52%, var(--gold) 70%, var(--gold-deep) 100%);
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 7s ease-in-out 1.2s infinite;
  filter: drop-shadow(0 6px 30px rgba(227, 195, 139, 0.25));
}
@keyframes shimmer { 0%, 55% { background-position: 100% 0; } 85%, 100% { background-position: 0% 0; } }

/* Sello giratorio "Muy pronto" */
.seal {
  position: absolute;
  width: clamp(104px, 11vw, 150px);
  right: calc(clamp(104px, 11vw, 150px) * -0.8);
  top: 40%;
  overflow: visible;
}
.seal-ring { transform-origin: 100px 100px; animation: rotate 26s linear infinite; }
.seal text { font-family: var(--font-body); font-size: 15px; font-weight: 700; letter-spacing: 2px; fill: var(--gold); }
.seal-core { fill: rgba(23, 12, 29, 0.75); stroke: var(--line); }
.seal-star { fill: var(--gold); transform-origin: 100px 100px; animation: twinkle 3s ease-in-out infinite; }
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes twinkle { 50% { transform: scale(0.75) rotate(45deg); opacity: 0.7; } }

.headline {
  margin-top: clamp(26px, 3.4vw, 40px);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.4vw, 1.95rem);
  line-height: 1.25;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  max-width: 26ch;
}
.headline em { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.06em; }
.lead { margin-top: 16px; max-width: 46ch; color: var(--muted); font-size: clamp(1rem, 1.35vw, 1.15rem); }

.services {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  margin-top: 22px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.services span { display: inline-flex; align-items: center; }
.services span + span::before { content: "·"; color: var(--gold); margin: 0 0.75em; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.actions-center { justify-content: center; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.25s ease, box-shadow 0.3s ease, border-color 0.25s, color 0.25s, background 0.25s;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:active { transform: scale(0.97); }
.btn-primary {
  color: #24150b;
  background: linear-gradient(135deg, #f6deae 0%, var(--gold) 45%, #c99a55 100%);
  box-shadow: 0 16px 40px -16px rgba(227, 195, 139, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 50px -16px rgba(227, 195, 139, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
.btn-ghost {
  color: var(--ink);
  border-color: rgba(248, 241, 245, 0.24);
  background: rgba(23, 12, 29, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-light); }

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 2;
  width: 26px;
  height: 42px;
  margin-left: -13px;
  border-radius: 14px;
  border: 1px solid var(--line);
}
.scroll-cue span {
  position: absolute;
  left: 50%;
  top: 9px;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--gold);
  animation: cue 2s ease-in-out infinite;
}
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* Entrada suave al cargar */
.reveal { animation: reveal 1s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0s) both; }
@keyframes reveal { from { opacity: 0.001; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ---------------- Adelanto de servicios ---------------- */
.teaser {
  position: relative;
  padding: clamp(80px, 11vw, 140px) var(--gutter);
  background: radial-gradient(60% 50% at 85% 0%, rgba(110, 40, 170, 0.18), transparent 70%), var(--black);
}
.teaser-head, .tiles { max-width: 1240px; margin-inline: auto; }
.teaser-head { margin-bottom: clamp(32px, 5vw, 56px); }
.teaser h2, .closing h2 {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.05;
  text-wrap: balance;
}
.teaser h2 em, .closing h2 em { display: block; }

.tiles {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  min-height: 190px;
  padding: 26px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  background: linear-gradient(160deg, rgba(42, 18, 64, 0.65), rgba(23, 12, 29, 0.9) 70%);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.4s;
}
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(246, 226, 180, 0.12) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.9s ease;
}
.tile:hover { transform: translateY(-5px); border-color: var(--line); }
.tile:hover::before { transform: translateX(100%); }
.tile svg {
  width: 44px;
  height: 44px;
  margin-bottom: auto;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tile h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.1; margin-top: 26px; }
.tile p { color: var(--muted); font-size: 0.92rem; }
.tile-wide { grid-column: span 2; }

/* ---------------- Cierre ---------------- */
.closing {
  position: relative;
  text-align: center;
  padding: clamp(80px, 11vw, 140px) var(--gutter);
  background: radial-gradient(55% 70% at 50% 100%, rgba(227, 195, 139, 0.12), transparent 70%);
  border-top: 1px solid var(--line-soft);
}
.closing h2 { max-width: 16ch; margin-inline: auto; }
.closing > p:not(.eyebrow) { margin: 18px auto 0; max-width: 42ch; color: var(--muted); font-size: 1.05rem; }

/* ---------------- Footer ---------------- */
.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 26px var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line-soft);
  font-size: 0.82rem;
  color: var(--muted);
}
.footer a { text-decoration: none; transition: color 0.2s; }
.footer a:hover { color: var(--gold); }

/* WhatsApp flotante */
.wa-float {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  color: #fff;
  background: var(--whatsapp);
  box-shadow: 0 14px 32px -10px rgba(37, 211, 102, 0.7);
  transition: transform 0.25s;
}
.wa-float svg { width: 30px; height: 30px; }
.wa-float:hover { transform: scale(1.07); }
.wa-float::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--whatsapp);
  animation: ping 2.6s ease-out infinite;
}
@keyframes ping { to { transform: scale(1.6); opacity: 0; } }

/* ---------------- Responsive ---------------- */
@media (max-width: 1000px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .domain { display: none; }
  .icon-btn { margin-left: auto; }
  .hero { justify-content: flex-start; padding-top: calc(104px + env(safe-area-inset-top, 0px)); padding-bottom: 96px; }
  .stage::after {
    background:
      linear-gradient(180deg, rgba(11, 7, 13, 0.2) 0%, rgba(11, 7, 13, 0.55) 45%, rgba(11, 7, 13, 0.85) 80%, var(--black) 100%);
  }
  .discoball { right: 18px; width: 84px; }
  .cord { height: 64px; }
  .beam-1 { left: 40%; }
  .beam-3 { left: 62%; }
  .brand-wrap { width: auto; margin-top: 26px; }
  .brand-2 { padding-left: 0.32em; }
  .seal { width: 92px; right: 2px; top: auto; bottom: -48px; }
  .headline { margin-top: 64px; letter-spacing: 0.1em; }
  .services { font-size: 0.72rem; letter-spacing: 0.12em; }
  .services span + span::before { margin: 0 0.55em; }
  .actions { flex-direction: column; }
  .actions .btn { width: 100%; }
  .actions-center { align-items: stretch; max-width: 420px; margin-inline: auto; }
  .tile { min-height: 160px; padding: 22px 20px; }
}

@media (max-width: 380px) {
  .brand { font-size: 3.3rem; }
  .btn { padding: 0 18px; letter-spacing: 0.12em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .brand-2 { background-position: 50% 0; }
}

/* En celulares los servicios se muestran como etiquetas (evita separadores al inicio de línea) */
@media (max-width: 760px) {
  .services { gap: 8px; }
  .services span + span::before { content: none; }
  .services span {
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(23, 12, 29, 0.5);
  }
}