:root{
  --bg-1:#F3E8FF; --bg-2:#DEC4FF;
  --ink:#fff; /* texto sobre el video */
  --ink-body:#111; /* texto secciones */
  --muted:#E9D8FD;
  --brand:#7C3AED; --brand-2:#9F67FF; --dark:#3B1C82;
  --card:#0E1525; --card-ink:#fff;
  --radius:18px;
  --shadow:0 10px 30px rgba(124,58,237,.25);
  --nav-h:64px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink-body);
  background:var(--bg-1);
  padding-top: var(--nav-h); /* empuja contenido para que no quede debajo del nav fijo */
}

/* contenedor */
.container{max-width:1060px;margin-inline:auto;padding-inline:20px}

/* ===== HERO con video ===== */
.hero{
  position:relative; isolation:isolate;
  min-height:88vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
  color:var(--ink);
}
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:-2;
}
.hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(14,21,37,.70), rgba(14,21,37,.40)),
    radial-gradient(1000px 500px at 50% -10%, rgba(124,58,237,.40), transparent 60%);
  z-index:-1;
}
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:140px; z-index:0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, var(--bg-1) 85%);
}
.hero-content{padding:96px 0 56px; position:relative; z-index:1}
.hero h1{
  font-family:'Pacifico',cursive;
  font-size:clamp(2rem, 2.2rem + 1vw, 3rem);
  margin:0 0 10px;
  text-shadow: 0 3px 12px rgba(0,0,0,.42);
}
.sub{
  margin:0 0 22px;
  color:#fff;
  font-size: clamp(1.1rem, 1rem + .8vw, 1.5rem);
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
}

/* Onda */
.divider-wave{
  position:absolute; left:0; right:0; bottom:-1px; height:80px; overflow:hidden; z-index:1;
}
.divider-wave svg{ display:block; width:100%; height:100%; }
.divider-wave path{ fill:var(--bg-1); }

/* ===== NAV fijo ===== */
.nav{
  position: fixed; top:0; left:0; right:0;
  height: var(--nav-h);
  display:flex; align-items:center;
  padding:0;
  z-index:1000;
  background: transparent;
  transition: background .25s ease, box-shadow .25s ease;
  backdrop-filter: blur(6px);
}
.nav.scrolled{
  background: rgba(243,232,255,.85);
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
body.dark .nav.scrolled{
  background: rgba(10,13,18,.85);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav .container{padding-inline:10px;}
@media (min-width:768px){ .nav .container{padding-left:6px;} }
.nav__wrap{display:flex; align-items:center; justify-content:space-between; gap:10px}
.brand{display:flex; align-items:center; gap:8px; text-decoration:none}
.brand__logo{
  height:48px; width:auto; border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.brand__name{color:#fff; font-weight:700; letter-spacing:.2px; text-decoration:none; margin-left:2px}
.nav__links{display:flex; gap:10px; flex-wrap:wrap}
.nav__links a{
  text-decoration:none; color:#fff;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.25);
  padding:.5rem 1rem; border-radius:999px; font-weight:600;
  transition:.2s background ease, .2s transform ease;
  backdrop-filter: blur(6px);
}
.nav__links a:hover{background:rgba(0,0,0,.35); transform:translateY(-1px)}
.nav__links a:focus-visible{outline:3px solid #fff; outline-offset:2px}

/* ===== Botones (CTA) ===== */
.btn{
  display:inline-block; padding:.95rem 1.5rem; border-radius:999px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff;
  font-weight:700; text-decoration:none; box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 16px 36px rgba(124,58,237,.35)}
.btn:focus-visible{outline:3px solid #fff; outline-offset:3px}

/* ===== Secciones ===== */
section{padding:72px 0}
section:nth-of-type(even){background:var(--bg-2)}
h2{
  font-family:'Pacifico',cursive;
  font-size:clamp(1.7rem,1.4rem + .8vw,2.1rem);
  margin:0 0 16px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
p{line-height:1.7;font-size:1.05rem;margin:0 0 14px;color:var(--ink-body)}
ul.clean{list-style:none;padding:0;margin:0 0 18px}
ul.clean li{display:flex;gap:10px;align-items:flex-start;margin:10px 0}
ul.clean li .bullet{font-size:1.2rem;line-height:1}

/* Tarjetas */
.grid{display:grid; gap:18px}
@media (min-width:768px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{
  border-radius:var(--radius); background:#fff; padding:20px; box-shadow:0 12px 28px rgba(0,0,0,.06);
}
.card h3{margin:0 0 6px; font-size:1.2rem; color:#111}
.card p{color:#333}
.badge{display:inline-block;background:#fff;color:var(--brand);border:2px solid var(--brand);border-radius:999px;padding:.2rem .7rem;font-weight:700;margin-bottom:6px}

/* CTA oscuro */
.cta-dark{
  margin-top:28px; border-radius:20px; background:var(--card); color:var(--card-ink);
  padding:24px; box-shadow:0 20px 50px rgba(0,0,0,.35);
}

/* GALERÍA */
.gallery{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.ph{
  aspect-ratio: 4/3; border-radius:14px;
  background:linear-gradient(180deg,#caa9ff,#b38bff);
  display:grid; place-items:center; color:#fff; font-weight:700;
  box-shadow:0 10px 24px rgba(124,58,237,.25);
}

/* FOOTER */
footer{background:#3B1C82; color:#fff; text-align:center; padding:26px 16px; font-size:.95rem}

/* accesibilidad */
@media (prefers-reduced-motion: reduce){
  .btn,.nav__links a{transition:none}
  html{scroll-behavior:auto}
}

/* responsive */
@media (max-width:720px){.brand__name{display:none}}

/* ===== MODO NOCTURNO ===== */
body.dark {
  --bg-1: #1a1a1a;
  --bg-2: #2a2a2a;
  --ink-body: #e9edf3;
  --dark: #fff;
  --card: #2a2d33;
  --card-ink: #f1f1f1;
}

body.dark footer { background:#111; }

/* Tarjetas en dark */
body.dark .card{
  background:#23262d;
  color:#f0f2f5;
  box-shadow:0 12px 28px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.06);
}
body.dark .card h3{ color:#fff; }
body.dark .card p{ color:#d9dee5; }
body.dark .badge{
  background: transparent;
  color: var(--brand-2);
  border-color: var(--brand-2);
}
/* CTA en dark */
body.dark .cta-dark{
  background:#0f1520;
  color:#fff;
  box-shadow:0 22px 48px rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.08);
}

/* Botón toggle dark */
.btn-toggle {
  background: none;
  border: 2px solid rgba(255,255,255,.6);
  color: #fff;
  font-size: 1.2rem;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s, transform .2s;
}
.btn-toggle:hover {
  background: rgba(255,255,255,.2);
  transform: scale(1.1);
}
/* Título del bloque CTA siempre en blanco */
.cta-title {
  margin:0 0 10px;
  font-weight:600;
  font-size:1.15rem;
  color:#fff !important;
}