/* ========================================================================
   Blackline brand-pink.css
   Overlay del nuevo branding (rosa magenta) sobre el sistema base.
   Inyectado en TODAS las páginas tras el <style> inline.
   Si el dueño no aprueba: borrar el <link> que lo carga y desaparece.
   Backup pre-rediseño: commit 521fedd.
   ======================================================================== */

:root{
  --accent:#E91E8C;
  --accent-soft:rgba(233,30,140,.6);
  --accent-ghost:rgba(233,30,140,.12);
  --accent-glow:rgba(233,30,140,.25);
  --pink:#E91E8C;
  --pink-soft:rgba(233,30,140,.6);
  --pink-ghost:rgba(233,30,140,.12);
  --pink-glow:rgba(233,30,140,.35);
}

/* === 0 · Tokens compartidos para que la navbar nueva funcione en todas las tabs === */
.display-black{font-family:'Inter',sans-serif !important;font-weight:900 !important;letter-spacing:-.04em !important;}
/* NOTA: `display: inline-flex` SIN !important — si lo ponemos como !important
   sobrescribe las utilidades responsive de Tailwind (lg:hidden, lg:inline-flex)
   que usamos en el navbar para mostrar Reservar en mobile-only o desktop-only,
   y el botón aparece duplicado. */
.btn-pink{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:1rem 1.7rem;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  transition:all .35s cubic-bezier(.16,1,.3,1);border-radius:6px;border:1px solid transparent;
  background:var(--pink) !important;color:#fff !important;text-decoration:none;
}
.btn-pink:hover{background:#ff2da0 !important;transform:translateY(-2px);box-shadow:0 8px 32px var(--pink-glow);}
.btn-white{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:1rem 1.7rem;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  transition:all .35s cubic-bezier(.16,1,.3,1);border-radius:6px;
  background:#fff;color:#050505;text-decoration:none;
}
.btn-white:hover{background:#fff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,255,255,.18);}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:1rem 1.7rem;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  transition:all .35s cubic-bezier(.16,1,.3,1);border-radius:6px;
  border:1px solid rgba(255,255,255,.2);color:#fff;background:transparent;text-decoration:none;
}
.btn-ghost:hover{border-color:var(--pink);background:rgba(233,30,140,.06);color:#fff;}

/* === 1 · Selección de texto en pink === */
::selection{background:var(--accent);color:#fff;}

/* === 2 · CTAs principales con glow sutil === */
.btn-solid{
  background:#fff;color:#050505;
  box-shadow:0 0 24px rgba(233,30,140,.12), 0 0 0 1px rgba(255,255,255,.04) inset;
  transition:all .35s cubic-bezier(.16,1,.3,1);
}
.btn-solid:hover{
  background:#fff;
  box-shadow:0 0 36px rgba(233,30,140,.32), 0 4px 24px rgba(233,30,140,.18);
  transform:translateY(-2px);
}

/* Botones con clase específica de marca (acento rosa de relleno) */
.btn-accent{
  background:var(--accent);color:#fff;
  box-shadow:0 0 28px rgba(233,30,140,.35);
}
.btn-accent:hover{
  background:#ff2da0;
  box-shadow:0 0 40px rgba(233,30,140,.55);
  transform:translateY(-2px);
}

.btn-line:hover{
  border-color:var(--accent-soft);
  background:rgba(233,30,140,.04);
  box-shadow:0 0 18px rgba(233,30,140,.1);
}

/* === 3 · Eyebrow tags con un toque pink === */
.eyebrow{color:rgba(233,30,140,.55) !important;}
.text-white .eyebrow,
.eyebrow.text-white{color:#f5f5f5 !important;}
/* eyebrow dentro de divs verde-Benefits no cambia */
[style*="color:#7fd6a6"].eyebrow,
.eyebrow[style*="color:#7fd6a6"]{color:#7fd6a6 !important;}

/* === 4 · Nav-link active subraya en rosa === */
.nav-link.active{
  color:#fff;position:relative;
}
.nav-link.active::after{
  content:'';position:absolute;left:0;right:0;bottom:-8px;
  height:2px;background:var(--accent);
  box-shadow:0 0 12px var(--accent-glow);
}
.nav-link:hover{color:#fff;}

/* === 5 · Dot live (verde) se mantiene; pero un dot generic pasa a pink === */
.dot:not(.dot-live){background:var(--accent);box-shadow:0 0 6px var(--accent-soft);}

/* === 6 · Cards featured con glow rosa === */
.level-card.featured,
.svc-card[style*="border-color:var(--line-2)"]{
  position:relative;
}
.level-card.featured::before,
.svc-card[style*="border-color:var(--line-2)"]::before{
  content:'';position:absolute;inset:-1px;pointer-events:none;
  background:linear-gradient(135deg, var(--accent-soft) 0%, transparent 50%, var(--accent-soft) 100%);
  -webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;
  padding:1px;opacity:.5;
}

/* === 7 · Subtle radial accent en el fondo del body === */
body{
  background:
    radial-gradient(ellipse 800px 600px at 85% 5%,  rgba(233,30,140,.06), transparent 55%),
    radial-gradient(ellipse 700px 500px at 5% 35%,  rgba(233,30,140,.04), transparent 60%),
    radial-gradient(ellipse 900px 700px at 95% 85%, rgba(233,30,140,.05), transparent 60%),
    var(--bg) !important;
  background-attachment:fixed;
}

/* === 8 · Grid pattern muy sutil (blueprint feel) === */
body::before{
  content:'';
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(233,30,140,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233,30,140,.025) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
  mask-image:radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
}
body > *{position:relative;z-index:1;}

/* === 9 · Hero overlay rosa muy sutil === */
.hero-fade,
section[class*="hero"] > div[class*="absolute"]{
  background:
    radial-gradient(ellipse at 70% 30%, rgba(233,30,140,.10), transparent 55%),
    linear-gradient(180deg, rgba(5,5,5,.2) 0%, rgba(5,5,5,.55) 60%, var(--bg) 100%) !important;
}

/* === 10 · Divider con un destello pink ocasional === */
.divider{
  background:linear-gradient(90deg, transparent 0%, var(--line) 15%, var(--accent-soft) 50%, var(--line) 85%, transparent 100%) !important;
  height:1px;opacity:.6;
}

/* === 11 · Step numbers con color rosa sutil === */
.step-num{
  color:transparent !important;
  -webkit-text-stroke:1px var(--accent-soft);
}

/* === 12 · Side-rail dots con accent === */
.side-rail a:hover .rail-dot{background:var(--accent) !important;border-color:var(--accent) !important;}
.side-rail a.active .rail-dot{
  background:var(--accent) !important;border-color:var(--accent) !important;
  box-shadow:0 0 14px var(--accent-glow) !important;
}

/* === 13 · Reviews stars en pink === */
.tracking-widest.text-white{color:var(--accent) !important;}

/* === 14 · Loader / dot-live se mantiene verde (es señal de "abierto ahora") === */

/* === 15 · Inputs con focus pink === */
.input-line:focus{
  border-color:var(--accent) !important;
  box-shadow:0 1px 0 0 var(--accent);
}

/* === 16 · Mobile menu link hover pink === */
.mobile-menu-link:hover,
.mobile-menu-link.is-active{
  color:var(--accent) !important;
}

/* === 17 · Footer link hover pink === */
footer a:hover{color:var(--accent) !important;}

/* === 18 · Reduce intensity en pantallas pequeñas (mobile) === */
@media (max-width:640px){
  body::before{opacity:.6;}
  .btn-solid{box-shadow:0 0 16px rgba(233,30,140,.08);}
}

/* === 19 · Respect prefers-reduced-motion === */
@media (prefers-reduced-motion:reduce){
  .btn-solid,.btn-accent{transition:none;}
  .btn-solid:hover,.btn-accent:hover{transform:none;}
}