:root {
    --bg:#F7F4EE; --text:#292826; --accent:#C8B28A; --muted:#726F6A; --card:#FFFFFF; --line:rgba(41,40,38,.14);
    padding-top: env(safe-area-inset-top,0px); padding-bottom: env(safe-area-inset-bottom,0px);
  }
  * { box-sizing:border-box; }
  html,body { margin:0; height:100%; background:var(--bg); color:var(--text); font-family:'Work Sans',sans-serif; font-weight:300; overflow:hidden; -webkit-font-smoothing:antialiased; }
  h1,h2,h3 { font-family:'Cormorant Garamond',serif; font-weight:500; }
  p { line-height:1.75; }
  a { color:inherit; }

  /* ===== LAYERED PANELS (crossfade, not scroll) ===== */
  #stage { position:fixed; inset:0; overflow:hidden; }
  .panel {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    opacity:0; transform:scale(1.04); pointer-events:none;
    transition:opacity .7s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1);
  }
  .panel.active { opacity:1; transform:scale(1); pointer-events:auto; }
  .panel-scroll { width:100%; height:100%; overflow-y:auto; display:flex; align-items:center; justify-content:center; padding:80px 0; }
  .panel-inner { width:100%; max-width:600px; padding:0 30px; text-align:center; }

  .panel-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-color:#EDE7D9; }
  .panel-bg::after { content:""; position:absolute; inset:0; background:var(--bg); opacity:.85; }
  .bg-label { position:absolute; top:16px; left:16px; z-index:2; font-size:9px; letter-spacing:.06em; color:var(--muted); border:1px dashed var(--line); padding:5px 9px; text-transform:uppercase; background:rgba(247,244,238,.75); }

  .reveal { opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
  .panel.active .reveal { opacity:1; transform:translateY(0); }
  .panel.active .r1{transition-delay:.1s} .panel.active .r2{transition-delay:.22s}
  .panel.active .r3{transition-delay:.34s} .panel.active .r4{transition-delay:.46s} .panel.active .r5{transition-delay:.58s}

  .eyebrow { font-size:12px; letter-spacing:.18em; color:var(--accent); text-transform:uppercase; margin-bottom:18px; }

  /* Panel 1 — Hero */
  #p1 h1 { font-size:clamp(56px,13vw,96px); line-height:.98; margin:0; font-style:italic; }
  #p1 .amp { color:var(--accent); font-style:normal; }
  #p1 .date { margin-top:18px; font-size:15px; letter-spacing:.08em; color:var(--muted); }
  .countdown { display:flex; justify-content:center; gap:26px; margin:28px 0 10px; }
  .countdown div{ text-align:center; }
  .countdown .num{ font-family:'Cormorant Garamond',serif; font-size:38px; display:block; }
  .countdown .lbl{ font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
  #p1 .quote{ font-size:15px; color:var(--muted); font-style:italic; max-width:420px; margin:26px auto 0; }
  .scroll-hint { position:absolute; bottom:34px; left:50%; transform:translateX(-50%); font-size:10px; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; z-index:3; transition:opacity .5s ease; }
  .scroll-hint span { display:inline-block; margin-left:5px; animation:nudge 1.6s ease-in-out infinite; }
  @keyframes nudge { 0%,100%{transform:translateX(0)} 50%{transform:translateX(6px)} }

  /* Panel 2 — Padres */
  #p2 h2 { font-size:clamp(32px,6vw,44px); font-style:italic; margin-bottom:34px; }
  .parents{ text-align:left; font-size:14px; }
  .parents .label{ font-size:11px; letter-spacing:.12em; color:var(--accent); text-transform:uppercase; margin-bottom:7px; }
  .parents .names{ font-family:'Cormorant Garamond',serif; font-size:23px; margin-bottom:26px; }

  /* Panel 3 — El día */
  #p3 h2 { font-size:clamp(30px,6vw,40px); font-style:italic; margin-bottom:8px; }
  #p3 .sub{ font-size:13px; color:var(--muted); margin-bottom:30px; }
  .venue-card { display:grid; grid-template-columns:110px 1fr; gap:16px; text-align:left; border:1px solid var(--line); background:var(--card); padding:16px; margin-bottom:16px; }
  .venue-photo { width:110px; height:110px; border-radius:2px; background-size:cover; background-position:center; background-color:#EDE7D9; position:relative; }
  .venue-photo .lbl { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:8px; text-align:center; color:var(--muted); padding:4px; background:rgba(255,255,255,.65); }
  .venue-tag{ font-size:10px; letter-spacing:.1em; color:var(--accent); text-transform:uppercase; margin-bottom:3px; }
  .venue-name{ font-family:'Cormorant Garamond',serif; font-size:19px; line-height:1.15; }
  .venue-time{ font-size:12px; color:var(--muted); margin:2px 0 6px; }
  .venue-addr{ font-size:11px; color:var(--muted); margin-bottom:8px; line-height:1.5; }
  .venue-note{ font-size:10px; color:var(--accent); margin-bottom:8px; }
  .btn-row{ display:flex; gap:8px; flex-wrap:wrap; }
  .btn{ display:inline-block; font-size:10px; letter-spacing:.03em; padding:7px 12px; border:1px solid var(--accent); text-decoration:none; }
  .btn.solid{ background:var(--accent); }
  .itin{ margin-top:20px; text-align:left; }
  .itin-row{ display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line); font-size:13px; }
  .itin-row .t{ font-family:'Cormorant Garamond',serif; font-size:18px; color:var(--accent); }

  /* Panel 4 — Vestimenta + niños */
  #p4 h2{ font-size:clamp(30px,6vw,40px); font-style:italic; margin-bottom:8px; }
  .dress-grid{ display:flex; justify-content:center; gap:48px; margin:22px 0; }
  .dress-grid div span{ display:block; font-size:11px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; margin-bottom:5px; }
  .dress-grid div strong{ font-family:'Cormorant Garamond',serif; font-size:24px; }
  .avoid-colors{ display:flex; justify-content:center; gap:12px; margin:16px 0 8px; }
  .avoid-colors span{ width:30px; height:30px; border-radius:50%; border:1px solid var(--line); position:relative; }
  .avoid-colors span::after{ content:""; position:absolute; inset:-1px; border-top:1px solid #B85C5C; transform:rotate(45deg); }
  .kids-note{ margin-top:36px; padding-top:28px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); max-width:380px; margin-left:auto; margin-right:auto; }
  .kids-note strong{ display:block; font-family:'Cormorant Garamond',serif; font-size:22px; font-style:italic; color:var(--text); margin-bottom:10px; }

  /* Panel 5 — Regalos + gracias */
  #p5 h2{ font-size:clamp(30px,6vw,40px); font-style:italic; margin-bottom:18px; }
  .gift-links{ display:flex; gap:10px; justify-content:center; margin-bottom:22px; }
  .gift-note{ font-size:13px; color:var(--muted); max-width:420px; margin:0 auto; }
  .gift-account{ font-size:12px; margin:14px auto 0; border:1px dashed var(--line); padding:10px; max-width:340px; }
  .thanks{ margin-top:40px; padding-top:32px; border-top:1px solid var(--line); }
  .thanks strong{ display:block; font-family:'Cormorant Garamond',serif; font-size:26px; font-style:italic; margin-bottom:6px; }

  /* Nav dots */
  #dots{ position:fixed; left:22px; top:50%; transform:translateY(-50%); z-index:30; display:flex; flex-direction:column; gap:11px; }
  #dots button{ width:7px; height:7px; border-radius:50%; border:1px solid var(--muted); background:none; padding:0; cursor:pointer; transition:.3s; }
  #dots button.active{ background:var(--accent); border-color:var(--accent); width:9px; height:9px; }
  .nav-arrow{ position:fixed; top:50%; transform:translateY(-50%); z-index:30; width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.75); font-size:15px; cursor:pointer; transition:transform .2s; }
  .nav-arrow:active{ transform:translateY(-50%) scale(.9); }
  #prevBtn{ left:52px; } #nextBtn{ right:16px; }
  .nav-arrow:disabled{ opacity:.2; }

  /* Floating RSVP button */
  #rsvpFab{
    position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:40;
    background:var(--accent); color:var(--text); border:none; cursor:pointer;
    writing-mode:vertical-rl; padding:20px 10px; font-size:12px; letter-spacing:.08em;
    text-transform:uppercase; box-shadow:-4px 0 16px rgba(41,40,38,.15);
    transition:padding .25s ease, opacity .3s ease, transform .3s ease;
  }
  #rsvpFab:hover{ padding-right:16px; }
  #rsvpFab.hidden{ opacity:0; transform:translateY(-50%) translateX(100%); pointer-events:none; }

  /* RSVP modal */
  #modalOverlay{ position:fixed; inset:0; background:rgba(41,40,38,.55); z-index:100; display:none; align-items:center; justify-content:center; padding:20px; opacity:0; transition:opacity .3s ease; }
  #modalOverlay.open{ display:flex; opacity:1; }
  #modal{ background:var(--card); width:100%; max-width:380px; padding:32px 26px; position:relative; transform:translateY(16px) scale(.97); transition:transform .35s cubic-bezier(.3,1.4,.5,1); }
  #modalOverlay.open #modal{ transform:translateY(0) scale(1); }
  #modalClose{ position:absolute; top:14px; right:14px; background:none; border:none; font-size:16px; cursor:pointer; color:var(--muted); }
  .rsvp-name{ font-family:'Cormorant Garamond',serif; font-size:24px; margin-bottom:4px; text-align:center; }
  .rsvp-sub{ font-size:12px; color:var(--muted); text-align:center; margin-bottom:22px; }
  .stepper{ display:flex; align-items:center; justify-content:center; gap:20px; margin-bottom:24px; }
  .stepper button{ width:38px; height:38px; border-radius:50%; border:1px solid var(--accent); background:none; font-size:18px; cursor:pointer; }
  .stepper .count{ font-family:'Cormorant Garamond',serif; font-size:26px; min-width:28px; text-align:center; }
  .confirm-btn{ width:100%; padding:15px; background:var(--accent); color:var(--text); border:none; font-size:13px; letter-spacing:.03em; cursor:pointer; }
  .decline-link{ display:block; text-align:center; font-size:11px; color:var(--muted); margin-top:14px; cursor:pointer; text-decoration:underline; background:none; border:none; }
  #modalThanks{ display:none; text-align:center; }
  #modalThanks strong{ display:block; font-family:'Cormorant Garamond',serif; font-size:28px; font-style:italic; margin-bottom:10px; }
  #modalThanks p{ font-size:13px; color:var(--muted); }

  /* Audio player */
  #player{ position:fixed; left:18px; bottom:18px; z-index:30; display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.85); backdrop-filter:blur(6px); border:1px solid var(--line); border-radius:30px; padding:8px 14px 8px 8px; }
  #playToggle{ width:30px; height:30px; border-radius:50%; border:1px solid var(--accent); background:none; cursor:pointer; font-size:11px; }
  #trackName{ font-size:11px; color:var(--muted); max-width:100px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  #listToggle{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:13px; }
  #playlist{ position:absolute; bottom:48px; left:0; background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; display:none; min-width:180px; }
  #playlist.open{ display:block; }
  #playlist button{ display:block; width:100%; text-align:left; background:none; border:none; font-size:12px; padding:9px 14px; cursor:pointer; }
  #playlist button:hover,#playlist button.active{ background:rgba(200,178,138,.25); }

  @media (max-width:560px){
    .nav-arrow{ display:none; }
    .venue-card{ grid-template-columns:1fr; }
    .venue-photo{ width:100%; height:150px; }
    #rsvpFab{ padding:16px 8px; font-size:11px; }
  }