/* Rama de desarrollo web: negro, azul y morado oscuro.
   Redefine los roles semánticos de tokens.css, así las primitivas de
   base.css (.btn, .tarjeta, .seccion--alt, .etiqueta) quedan en oscuro sin
   duplicar una sola regla. */

:root {
  --w-negro:     #08070d;
  --w-carbon:    #0f0e1a;
  --w-panel:     #141327;
  --w-azul:      #6b8cff;
  --w-azul-hondo:#16224f;
  --w-morado:    #a78bfa;
  --w-morado-hondo:#2a1650;
  --w-nube:      #eceafd;
  --w-humo:      #9d9cc4;

  /* Roles que consume base.css */
  --fondo:       var(--w-negro);
  --fondo-alt:   var(--w-carbon);
  --texto:       var(--w-nube);
  --texto-suave: var(--w-humo);
  --linea:       rgba(236, 234, 253, .13);
  --acento:      var(--w-azul);

  --sombra-sm: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px -14px rgba(0,0,0,.8);
  --sombra-md: 0 2px 6px rgba(0,0,0,.5), 0 26px 56px -26px rgba(0,0,0,.9);

  /* Degradado de marca de esta rama. */
  --w-gradiente: linear-gradient(115deg, var(--w-azul), var(--w-morado) 62%, #d9a8ff);
}

body { background: var(--w-negro); color: var(--w-nube); }

/* Las tarjetas de base.css asumen fondo blanco. */
.tarjeta { background: var(--w-panel); }
.tarjeta:hover { border-color: rgba(107, 140, 255, .42); }

/* Botones: el oscuro de base.css desaparecería sobre negro. */
.btn { --btn-fondo: var(--w-nube); --btn-texto: var(--w-negro); --btn-borde: var(--w-nube); }
.btn--claro { --btn-fondo: transparent; --btn-texto: var(--w-nube); --btn-borde: rgba(236,234,253,.28); }
.btn--claro:hover { --btn-fondo: var(--w-nube); --btn-texto: var(--w-negro); --btn-borde: var(--w-nube); }
.btn--gradiente {
  --btn-borde: transparent;
  background: var(--w-gradiente);
  color: var(--w-negro);
  font-weight: 400;
}
.btn--gradiente:hover { box-shadow: 0 18px 44px -16px rgba(139, 124, 255, .7); }

/* ── Trama de puntos: el motivo del logo, a escala de página ────── */
.puntos {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(167, 139, 250, .30) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 72% 62% at 50% 40%, #000, transparent 76%);
  pointer-events: none;
}
.halo {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.halo::before, .halo::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
.halo::before {
  width: 54vmax; height: 54vmax;
  top: -20vmax; right: -14vmax;
  background: radial-gradient(circle, rgba(107,140,255,.30), transparent 66%);
  animation: derivar 24s var(--e-suave) infinite alternate;
}
.halo::after {
  width: 46vmax; height: 46vmax;
  bottom: -18vmax; left: -12vmax;
  background: radial-gradient(circle, rgba(167,139,250,.26), transparent 68%);
  animation: derivar 30s var(--e-suave) infinite alternate-reverse;
}
@keyframes derivar {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(-5%, 6%, 0) scale(1.16); }
}

/* ── Marca ─────────────────────────────────────────────────────── */
.marca__mono { color: var(--w-morado); }
.marca__nombre { color: var(--w-nube); }
.marca__sub { color: var(--w-humo); }

/* ── Nav ───────────────────────────────────────────────────────── */
.nav.es-fija {
  background: rgba(8, 7, 13, .82);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 var(--linea);
}
.nav:not(.es-fija) .marca__nombre,
.nav:not(.es-fija) .nav__link { color: var(--w-nube); }
/* landing.css pinta este isotipo de dorado con tres clases de
   especificidad; hay que igualarle el selector, no basta con `.marca__mono`. */
.nav:not(.es-fija) .marca__mono { color: var(--w-morado); }
.nav:not(.es-fija) .marca__sub { color: var(--w-humo); }
.nav:not(.es-fija) .nav__cta { --btn-fondo: transparent; --btn-texto: var(--w-nube); --btn-borde: rgba(236,234,253,.3); }
.nav:not(.es-fija) .nav__hamb span { background: var(--w-nube); }
@media (max-width: 1024px) {
  .nav__menu { background: var(--w-carbon); border-bottom-color: var(--linea); }
  .nav:not(.es-fija) .nav__link { color: var(--w-nube); }
  .nav__cta, .nav:not(.es-fija) .nav__cta {
    --btn-fondo: var(--w-nube); --btn-texto: var(--w-negro); --btn-borde: var(--w-nube);
  }
}
/* Volver a invitaciones: enlace discreto, no compite con el CTA. */
.nav__volver {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--w-humo);
  white-space: nowrap;
}
.nav__volver:hover { color: var(--w-nube); }

/* ── Hero ──────────────────────────────────────────────────────── */
.wh {
  position: relative;
  min-height: 100svh;
  display: grid; place-items: center;
  padding-block: 8rem 5rem;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.wh__caja { display: grid; justify-items: center; }
.wh__marca { margin-bottom: clamp(2rem, 5vw, 3rem); }
.wh__marca .marca__mono { width: 4.2rem; height: 4.2rem; }
.wh__titulo { font-size: var(--t-3xl); max-width: 18ch; }
.wh__titulo em {
  font-style: normal;
  background: var(--w-gradiente);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wh__texto { margin-top: 1.6rem; max-width: 48ch; color: var(--w-humo); font-size: var(--t-lg); }
.wh__acciones { margin-top: clamp(2.2rem, 4vw, 3rem); display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

/* ── Qué construimos ───────────────────────────────────────────── */
.construimos {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.pieza { padding: clamp(1.6rem, 3vw, 2.2rem); display: grid; gap: .7rem; align-content: start; }
.pieza__num {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  background: var(--w-gradiente);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pieza__titulo { font-size: var(--t-lg); }
.pieza__texto { color: var(--texto-suave); font-size: var(--t-sm); }

/* ── Para quién ────────────────────────────────────────────────── */
.perfiles {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.perfil {
  background: var(--w-carbon);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  transition: background-color var(--d-media) var(--e-suave);
}
.perfil:hover { background: var(--w-panel); }
.perfil__icono { color: var(--w-azul); margin-bottom: 1rem; }
.perfil__icono svg { width: 1.4rem; height: 1.4rem; }
.perfil__titulo { font-size: var(--t-lg); }
.perfil__texto { margin-top: .45rem; color: var(--texto-suave); font-size: var(--t-sm); }

/* ── Proceso ───────────────────────────────────────────────────── */
.fases { display: grid; gap: clamp(1.4rem, 3vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.fase { position: relative; padding-top: 2.6rem; }
.fase::before {
  content: "";
  position: absolute; top: .55rem; left: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--w-gradiente);
}
.fase::after {
  content: "";
  position: absolute; top: 1.05rem; left: 1.5rem; right: -1rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(167,139,250,.5), transparent);
}
.fase:last-child::after { display: none; }
@media (max-width: 700px) { .fase::after { display: none; } }
.fase__titulo { font-size: var(--t-lg); }
.fase__texto { margin-top: .5rem; color: var(--texto-suave); font-size: var(--t-sm); }

/* ── Cierre ────────────────────────────────────────────────────── */
.cierre-web {
  position: relative;
  text-align: center;
  padding: clamp(2.6rem, 6vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  border: 1px solid rgba(167, 139, 250, .28);
  border-radius: var(--r-lg);
  background:
    radial-gradient(ellipse 90% 120% at 50% 0%, rgba(107,140,255,.16), transparent 70%),
    var(--w-carbon);
}
.cierre-web__titulo { font-size: var(--t-2xl); max-width: 24ch; margin-inline: auto; }
.cierre-web__texto { margin-top: 1.1rem; color: var(--texto-suave); max-width: 46ch; margin-inline: auto; }
.cierre-web__acciones { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

/* ── Pie ───────────────────────────────────────────────────────── */
.pie { background: var(--w-carbon); color: var(--texto-suave); }
.pie .marca__nombre { color: var(--w-nube); }
.pie .marca__mono { color: var(--w-morado); }
.pie__titulo { color: var(--w-azul); }
.pie__links a:hover { color: var(--w-nube); }
.pie__legal { border-top-color: var(--linea); color: rgba(236,234,253,.36); }

/* ── WhatsApp flotante ─────────────────────────────────────────── */
.wa { background: var(--w-panel); color: var(--w-nube); border: 1px solid var(--linea); }
.wa:hover { background: var(--w-azul); color: var(--w-negro); }

@media (prefers-reduced-motion: reduce) {
  .halo::before, .halo::after { animation: none; }
}