:root{
  --primary:#eebd2b;
  --bg:#fcfbf8;
  --text:#1b180d;
  --muted:#4a4537;
  --soft:#f3f0e7;
  --card:#ffffff;
  --border:rgba(27,24,13,.10);
  --shadow:0 18px 50px rgba(27,24,13,.08);
  --shadow-soft:0 8px 24px rgba(27,24,13,.06);
  --focus:rgba(238,189,43,.35);
}

html[data-theme="dark"]{
  /* Guerrera K‑Pop (modo noche) */
  --primary:#ff2bd6;
  --bg:#070717;
  --text:#f5f7ff;
  --muted:#b9c0ff;
  --soft:rgba(255,255,255,.06);
  --card:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.14);
  --shadow:0 22px 80px rgba(0,0,0,.55);
  --shadow-soft:0 14px 40px rgba(0,0,0,.45);
  --focus:rgba(0,229,255,.35);

  --neon-cyan:#00e5ff;
  --neon-lime:#7cff00;
  --neon-purple:#7b2bff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  scroll-behavior:smooth;
}


html[data-theme="dark"] body{
  background:
    radial-gradient(circle at 10% 10%, rgba(0,229,255,.12) 0%, transparent 45%),
    radial-gradient(circle at 90% 18%, rgba(255,43,214,.14) 0%, transparent 52%),
    radial-gradient(circle at 55% 92%, rgba(124,255,0,.10) 0%, transparent 56%),
    var(--bg);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{max-width:1100px;margin:0 auto;padding:0 20px}
.text-center{text-align:center}

/* subtle floral glow */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 10% 20%, rgba(238, 189, 43, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(238, 189, 43, 0.06) 0%, transparent 55%);
  opacity:.9;
  z-index:-1;
}
html[data-theme="dark"] body::before{
  background:
    radial-gradient(circle at 18% 22%, rgba(0,229,255,.16) 0%, transparent 52%),
    radial-gradient(circle at 86% 68%, rgba(255,43,214,.14) 0%, transparent 58%),
    radial-gradient(circle at 60% 10%, rgba(123,43,255,.10) 0%, transparent 55%);
  opacity:.75;
}

/* Navigation */
.nav-wrap{position:fixed;top:0;left:0;right:0;z-index:50}
.nav{
  height:80px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:0 20px;
  max-width:1100px;
  margin:0 auto;
  background:color-mix(in srgb, var(--bg) 80%, transparent);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(10px);
}

.brand{display:flex;align-items:center;gap:10px;min-width:max-content}
.brand__icon{color:var(--primary);font-variation-settings:'wght' 500; font-size:28px}
.brand__name{font-family:"Playfair Display",serif;font-weight:700;font-size:20px;letter-spacing:-.01em}

.nav__links{display:none;gap:28px;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;opacity:.9}
.nav__links a{padding:6px 0;position:relative}
.nav__links a:hover{color:var(--primary)}

.nav__actions{display:flex;align-items:center;gap:10px}

.nav__burger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;height:42px;
  border:1px solid var(--border);
  border-radius:999px;
  background:color-mix(in srgb, var(--card) 65%, transparent);
  color:var(--text);
}

.nav__mobile{
  max-width:1100px;
  margin:0 auto;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  padding:14px 20px 18px;
  display:none; /* shown via JS when burger is open */
  flex-direction:column;
  gap:10px;
}

/* Respect the [hidden] attribute */
.nav__mobile[hidden]{
  display:none !important;
}

/* JS toggles this class */
.nav__mobile.is-open{
  display:flex;
}
.nav__mobile a{padding:10px 12px;border-radius:12px}
.nav__mobile a:hover{background:var(--soft)}

@media (min-width: 860px){
  .nav__links{display:flex}
  .nav__burger{display:none}
  .nav__mobile{display:none !important}
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 16px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid transparent;
  cursor:pointer;
  user-select:none;
}
.btn--primary{background:var(--primary);color:#fff;box-shadow:0 8px 20px color-mix(in srgb, var(--primary) 28%, transparent)}
.btn--primary:hover{filter:brightness(.97)}
.btn--ghost{background:transparent;border-color:var(--border);color:var(--text)}
.btn--ghost:hover{background:var(--soft)}
.btn--block{width:100%;border-radius:14px;padding:16px 18px;font-size:12px;letter-spacing:.20em}
.btn__text{white-space:nowrap}

/* Hero */
.hero{min-height:100svh;display:flex;align-items:center;justify-content:center;padding-top:90px}
.hero__inner{padding:72px 20px 48px;text-align:center}
.kicker{display:block;color:var(--primary);font-weight:800;letter-spacing:.35em;text-transform:uppercase;font-size:12px;margin-bottom:18px}
.hero__title{font-family:"Playfair Display",serif;font-size:56px;line-height:1.02;margin:0 0 14px;font-weight:400}
.hero__titleAccent{font-style:italic;color:color-mix(in srgb, var(--primary) 78%, transparent)}
.hero__date{display:flex;align-items:center;justify-content:center;gap:16px;margin:18px 0 28px;color:var(--muted);font-weight:300;font-style:italic}
.hero__date .line{height:1px;width:48px;background:color-mix(in srgb, var(--primary) 40%, transparent)}

.hero__card{
  width:190px;
  height:250px;
  border-radius:140px 140px 26px 26px;
  background:var(--soft);
  border:4px solid color-mix(in srgb, var(--card) 85%, transparent);
  box-shadow:var(--shadow);
  display:grid;
  place-items:center;
  margin:0 auto;
  overflow:hidden;
}
.hero__card img{width:100%;height:100%;object-fit:contain;padding:18px}
.hero__hint{margin:10px 0 0;color:var(--muted);font-size:12px;letter-spacing:.02em}

.scroll{display:inline-flex;margin-top:28px;color:color-mix(in srgb, var(--primary) 55%, transparent)}
.scroll span{font-size:34px;animation:bounce 1.5s infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

@media (min-width: 860px){
  .hero__title{font-size:88px}
  .hero__inner{padding-top:84px}
}

/* Sections */
.section{padding:96px 0}
.section--soft{position:relative;overflow:hidden;background:color-mix(in srgb, var(--bg) 70%, #fff)}
html[data-theme="dark"] .section--soft{background:color-mix(in srgb, var(--bg) 90%, #000)}
.section__bg{
  position:absolute;inset:0;opacity:.18;pointer-events:none;
  background:
    radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--primary) 40%, transparent) 0%, transparent 60%),
    radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--primary) 24%, transparent) 0%, transparent 55%);
}

/* Fondo difuminado para "Una niña de luz" */
.section--luz{position:relative}
.section--luz::before{
  content:"";
  position:absolute;
  inset:-40px;
  background-image:url("assets/nina-rezando.jpg");
  background-size:cover;
  background-position:center;
  filter:blur(16px) saturate(1.05);
  opacity:.24;
  transform:scale(1.08);
  pointer-events:none;
}
html[data-theme="dark"] .section--luz::before{
  opacity:.18;
  filter:blur(18px) saturate(1.15) contrast(1.05);
}
.section--luz > .container{position:relative;z-index:1}

.section--tint{background:color-mix(in srgb, var(--primary) 8%, var(--bg))}

.section__head{margin-bottom:44px}

.title{font-family:"Playfair Display",serif;font-size:42px;font-weight:400;margin:0 0 10px}
.subtitle{margin:0;color:var(--primary);text-transform:uppercase;font-weight:700;letter-spacing:.24em;font-size:11px}
.icon{color:var(--primary);font-size:38px;display:inline-block;margin-bottom:6px}

.prose{max-width:720px;margin:0 auto;color:var(--muted);font-size:18px;line-height:1.8;font-weight:300}
.prose p{margin:0 0 14px}

.dots{display:flex;justify-content:center;gap:8px;margin-top:22px}
.dots span{width:7px;height:7px;border-radius:999px;background:color-mix(in srgb, var(--primary) 40%, transparent)}
.dots__mid{background:var(--primary)}

/* Cards grid */
.grid{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width: 860px){
  .grid{grid-template-columns:1fr 1fr;gap:26px}
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:22px;
  padding:30px;
  box-shadow:var(--shadow-soft);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}

.card__icon{
  width:58px;height:58px;border-radius:999px;
  background:color-mix(in srgb, var(--primary) 12%, transparent);
  display:grid;place-items:center;margin-bottom:18px
}
.card__icon span{color:var(--primary);font-size:28px}
.card__title{font-family:"Playfair Display",serif;font-style:italic;font-size:26px;margin:0 0 10px;font-weight:400}
.card__meta{color:var(--muted);font-size:15px;line-height:1.6;margin-bottom:18px}
.card__meta p{margin:0}
.card__meta .primary{color:var(--primary)}

.map{position:relative;height:190px;border-radius:16px;overflow:hidden;background:var(--soft);border:1px solid var(--border)}
.map img{width:100%;height:100%;object-fit:cover;opacity:.95}
.map__btn{
  position:absolute;inset:auto 0 14px 0;
  margin:0 auto;
  width:max-content;
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--card) 80%, transparent);
  backdrop-filter:blur(10px);
  font-size:11px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
}
.map__btn span{font-size:16px;color:var(--primary)}
.map__btn:hover{background:color-mix(in srgb, var(--card) 92%, transparent)}

/* Form card */
.form-card{
  max-width:760px;
  margin:0 auto;
  padding:44px;
  border-radius:28px;
  background:var(--card);
  border:1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.form-card__watermark{position:absolute;top:10px;right:12px;opacity:.08}
.form-card__watermark span{font-size:110px}

.muted{color:var(--muted);font-weight:300;max-width:560px;margin:0 auto 18px;line-height:1.6}

.form{margin-top:18px}
.form__grid{display:grid;grid-template-columns:1fr;gap:14px;margin:18px 0 18px}
@media (min-width: 860px){
  .form__grid{grid-template-columns:1fr 1fr;gap:16px}
}

.field{display:flex;flex-direction:column;gap:8px;text-align:left}
.field span{font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.field input,.field select{
  width:100%;
  padding:13px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  color:var(--text);
  outline:none;
}
.field input:focus,.field select:focus{box-shadow:0 0 0 4px var(--focus);border-color:color-mix(in srgb, var(--primary) 60%, var(--border))}

.form__note{margin:12px 0 0;color:var(--muted);font-size:13px;min-height:18px}

/* IBAN */
.lead{max-width:620px;margin:10px auto 26px;color:var(--muted);font-size:18px;line-height:1.7;font-weight:300}
.iban{
  display:inline-flex;
  flex-direction:column;
  gap:10px;
  padding:22px 22px 18px;
  border-radius:18px;
  background:var(--card);
  border:1px dashed color-mix(in srgb, var(--primary) 45%, var(--border));
  box-shadow:var(--shadow-soft);
}
.iban__label{margin:0;color:var(--primary);font-weight:900;letter-spacing:.22em;text-transform:uppercase;font-size:11px}
.iban__value{margin:0;font-family:"Playfair Display",serif;font-size:22px;letter-spacing:.14em}
.iban__copy{
  margin:2px auto 0;
  background:transparent;
  border:none;
  padding:8px 10px;
  border-bottom:1px solid color-mix(in srgb, var(--muted) 85%, transparent);
  color:var(--muted);
  font-weight:900;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
}
.iban__copy:hover{color:var(--primary);border-bottom-color:var(--primary)}

/* Footer */
.footer{padding:64px 20px;border-top:1px solid var(--border);text-align:center}
.footer__divider{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:18px;opacity:.9}
.footer__divider span:first-child,.footer__divider span:last-child{height:1px;width:64px;background:var(--border)}
.footer__divider .material-symbols-outlined{color:var(--primary)}
.footer__title{font-family:"Playfair Display",serif;font-style:italic;font-weight:400;margin:0 0 8px;font-size:26px}
.footer__sub{margin:0;color:var(--muted);font-size:12px;font-weight:300;letter-spacing:.22em;text-transform:uppercase}
.footer__tiny{margin:16px 0 0;color:color-mix(in srgb, var(--primary) 35%, transparent);font-size:10px;font-weight:900;letter-spacing:.30em;text-transform:uppercase}

/* Back to top */
.to-top{
  position:fixed;
  right:18px;
  bottom:18px;
  width:48px;
  height:48px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:color-mix(in srgb, var(--card) 92%, transparent);
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
}
@media (min-width: 860px){
  .to-top{display:none}
}
.to-top span{color:var(--primary)}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  body{scroll-behavior:auto}
  .scroll span{animation:none}
  .card{transition:none}
}


/* Lista de regalos */
.gift-list{
  margin:26px auto 0;
  max-width:720px;
  display:grid;
  gap:12px;
}
.gift-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 16px;
  border-radius:18px;
  background:var(--card);
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.gift-item:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
  border-color:color-mix(in srgb, var(--primary) 40%, var(--border));
}
.gift-item__icon{
  width:44px;height:44px;
  border-radius:999px;
  display:grid;place-items:center;
  background:color-mix(in srgb, var(--primary) 12%, transparent);
  color:var(--primary);
  font-size:24px;
}
.gift-item__title{
  margin:0;
  font-size:16px;
  letter-spacing:-.01em;
}
.gift-item__meta{
  margin:2px 0 0;
  color:var(--muted);
  font-weight:300;
}
.gift-item__chev{margin-left:auto;opacity:.6}
html[data-theme="dark"] .gift-item{
  border-color:rgba(255,255,255,.16);
}
html[data-theme="dark"] .gift-item:hover{
  border-color:color-mix(in srgb, var(--neon-cyan) 55%, rgba(255,255,255,.18));
  box-shadow:0 18px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(0,229,255,.18);
}


/* Detalles neon del modo noche */
html[data-theme="dark"] .hero__glow{
  opacity:.9;
  filter:saturate(1.25);
}



/* Theme-only blocks */
.theme-only--light{display:block!important}
.theme-only--dark{display:none!important}
html[data-theme="dark"] .theme-only--light{display:none!important}
html[data-theme="dark"] .theme-only--dark{display:block!important}

/* Polaroid */
.polaroid{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:.6rem;
  margin:1.1rem auto 0;
  max-width:340px;
  transform:rotate(-1.2deg);
}
.polaroid__frame{
  width:100%;
  background:#fff;
  padding:14px 14px 44px;
  border-radius:22px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.polaroid__frame img{
  width:100%;
  height:auto;
  display:block;
  border-radius:16px;
  box-shadow:none;
}

.polaroid figcaption{
  font-weight:700;
  letter-spacing:.02em;
  color:var(--muted);
}
html[data-theme="dark"] .polaroid{
  transform:rotate(1.2deg);
}
html[data-theme="dark"] .polaroid__frame{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow:0 0 0 1px rgba(255,255,255,.10), 0 18px 60px rgba(0,0,0,.55),
             0 0 22px rgba(255,43,214,.22), 0 0 22px rgba(0,229,255,.16);
}




/* Dark mode — más “plantilla K‑Warrior” */
html[data-theme="dark"] body{
  background:
    radial-gradient(1100px 650px at 20% 0%, rgba(255,43,214,.18), transparent 60%),
    radial-gradient(900px 620px at 85% 18%, rgba(0,229,255,.16), transparent 60%),
    radial-gradient(900px 680px at 55% 95%, rgba(124,255,0,.10), transparent 55%),
    var(--bg);
}
html[data-theme="dark"] body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 5px);
  opacity:.06;
  mix-blend-mode:overlay;
  z-index:0;
}
header, main, footer{position:relative; z-index:1}

html[data-theme="dark"] .hero__title{
  text-transform:uppercase;
  letter-spacing:.06em;
  text-shadow:
    2px 2px 0 rgba(255,43,214,.75),
    -2px -2px 0 rgba(0,229,255,.65),
    0 18px 60px rgba(0,0,0,.65);
}
html[data-theme="dark"] .hero__subtitle{
  letter-spacing:.28em;
  text-transform:uppercase;
  opacity:.9;
}
html[data-theme="dark"] .card{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
}
html[data-theme="dark"] .btn--primary{
  background:linear-gradient(90deg,var(--primary),var(--neon-cyan));
  box-shadow:0 18px 55px rgba(0,0,0,.55), 0 0 18px rgba(255,43,214,.22);
}
html[data-theme="dark"] .badge{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
}



/* Music emblem (chalice/phone) */
.hero__emblem{
  border:0;
  background:transparent;
  padding:0;
  position:relative;
  display:inline-grid;
  place-items:center;
  cursor:pointer;
}

.hero__emblem img{
  width:min(260px, 60vw);
  height:auto;
  display:block;
  transition: transform .25s ease, filter .25s ease;
  will-change: transform;
}

.hero__emblem:active img{
  transform: scale(.98);
}

.music-notes{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.music-notes .note{
  position:absolute;
  font-weight:700;
  opacity:.9;
  animation: floatNote 2.8s ease-in-out infinite;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.18));
}

.music-notes .note--1{ left: 6%; top: 18%; font-size: 28px; animation-delay: 0s; }
.music-notes .note--2{ right: 8%; top: 28%; font-size: 24px; animation-delay: .35s; }
.music-notes .note--3{ left: 18%; bottom: 12%; font-size: 22px; animation-delay: .7s; }

html[data-theme="light"] .music-notes .note{ color: var(--gold); }
html[data-theme="dark"] .music-notes .note{ color: var(--neon-cyan); text-shadow: 0 0 18px rgba(0,245,255,.45); }

@keyframes floatNote{
  0%,100%{ transform: translateY(0) rotate(0deg); opacity:.85; }
  50%{ transform: translateY(-10px) rotate(-6deg); opacity:1; }
}

/* Dark: tilt the phone a bit more */
html[data-theme="dark"] #heroEmblemImg{
  transform: rotate(-12deg);
  filter: drop-shadow(0 18px 30px rgba(0, 245, 255, .18)) drop-shadow(0 10px 22px rgba(255, 61, 240, .12));
}

/* Light: a gentle hover */
html[data-theme="light"] .hero__emblem:hover img{
  transform: translateY(-2px);
}
/* Honeypot */
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0;pointer-events:none;}