:root{
    --black: #0B0A0C;
    --panel: #131215;
    --white: #F7F2EC;
    --pink: #E98CA0;
    --pink-deep: #C65D78;
    --gold: #D9BE93;
    --line: rgba(247,242,236,0.14);
    --cream: #F3EEE6;
    --ink-dark: #211D19;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background: var(--black);
    color: var(--white);
    font-family: 'Jost', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x:hidden;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }
  a{color:inherit;}
  .wrap{max-width: 620px; margin: 0 auto; padding: 0 26px;}

  /* ---------- COUNTDOWN BAND ---------- */
  .band{
    background: var(--black);
    text-align:center;
    padding: 40px 0 46px;
  }
  .band .fecha{
    font-family:'Jost', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 6px;
  }
  .band .tagline{
    font-family:'Fraunces', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 19px;
    color: var(--pink);
    margin-bottom: 26px;
  }
  .faltan{
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 16px;
  }
  .countdown{
    display:flex;
    justify-content:center;
    gap: clamp(14px, 5vw, 34px);
  }
  .countdown .num{
    font-family:'Fraunces', serif;
    font-weight: 700;
    font-size: clamp(34px, 8vw, 52px);
    color: var(--white);
    line-height:1;
  }
  .countdown .lbl{
    margin-top: 6px;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(247,242,236,0.55);
  }

  /* ---------- FIESTA ---------- */
  section{
    padding: 60px 0;
    text-align:center;
    border-bottom: 1px solid var(--line);
  }
  .icon{
    width: 34px; height: 34px;
    margin: 0 auto 16px;
    color: var(--pink);
  }
  .blow-icon{
    width: 70px; height: 70px;
    margin: 0 auto 10px;
    overflow: visible;
    display:block;
    filter: invert(1);
  }
  .blow-icon .puff{
    transform-origin: 40px 34px;
    animation: puff 1.6s ease-in-out infinite;
  }
  @keyframes puff{
    0%   { transform: scaleX(0.25); opacity: 0.25; }
    35%  { transform: scaleX(1);    opacity: 1; }
    55%  { transform: scaleX(1);    opacity: 1; }
    85%  { transform: scaleX(0.25); opacity: 0.25; }
    100% { transform: scaleX(0.25); opacity: 0.25; }
  }
  .tag{
    font-family:'Jost', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--pink);
    margin-bottom: 18px;
  }
  .venue{
    font-family:'Fraunces', serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(28px, 6vw, 36px);
    margin-bottom: 10px;
  }
  .venue-sub{
    font-size: 14px;
    color: rgba(247,242,236,0.65);
    line-height: 1.8;
    margin-bottom: 28px;
  }
  .btn{
    display:inline-block;
    padding: 14px 34px;
    background: var(--white);
    color: var(--black);
    text-decoration:none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: 999px;
    border: 1px solid var(--white);
    transition: background 0.2s ease, color 0.2s ease;
  }
  .btn:hover{ background: transparent; color: var(--white); }
  .btn:focus-visible{ outline: 2px solid var(--pink); outline-offset: 3px; }
  .btn.outline{
    background: transparent; color: var(--white); border-color: var(--line);
  }
  .btn.outline:hover{ border-color: var(--pink); color: var(--pink); }

  /* ---------- REVEAL AL SCROLLEAR ---------- */
  .reveal{
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  .reveal.visible{
    opacity: 1;
    transform: translateY(0);
  }

  /* ---------- CURVA / FRANJAS ---------- */
  .curve{
    position:relative;
    z-index:1;
    border-radius: 34px 34px 0 0;
    margin-top: -34px;
    border-bottom: none !important;
  }
  .light{
    background: var(--cream);
    color: var(--ink-dark);
  }
  .light .venue, .light .rsvp-title, .light .detalles-intro{ color: var(--ink-dark); }
  .light .venue-sub, .light .rsvp-copy{ color: rgba(33,29,25,0.62); }
  .light .btn{
    background: var(--ink-dark);
    color: var(--cream);
    border-color: var(--ink-dark);
  }
  .light .btn:hover{ background: transparent; color: var(--ink-dark); }
  .light .form-field{
    background: #fff;
    border-color: rgba(33,29,25,0.18);
    color: var(--ink-dark);
  }
  .light .form-field:focus{ border-color: var(--pink-deep); }
  .light .form-group label{ color: rgba(33,29,25,0.5); }
  .light .envelope-icon, .light .confirm-icon{ filter: none; }
  .light .blow-icon{ filter: none; }
  .te-espero{
    background: var(--black);
    text-align:center;
    padding: 62px 0 50px;
  }
  .te-espero .txt{
    font-family:'Fraunces', serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(22px, 5vw, 28px);
    color: var(--pink);
  }
  footer.light{
    padding: 66px 0 56px;
    text-align:center;
  }

  /* ---------- DETALLES / ACCORDION ---------- */
  .detalles-intro{
    font-family:'Fraunces', serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(22px, 5vw, 28px);
    margin-bottom: 34px;
  }
  .accordion{ text-align:left; }
  .acc-item{ border-top: 1px solid var(--line); }
  .acc-item:last-child{ border-bottom: 1px solid var(--line); }
  .acc-head{
    width:100%;
    display:flex; align-items:center; justify-content:space-between;
    background:none; border:none; cursor:pointer;
    padding: 20px 4px;
    color: var(--white);
    font-family:'Jost', sans-serif;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
  }
  .acc-head .chev{
    font-size: 15px;
    color: var(--pink);
    transition: transform 0.25s ease;
  }
  .acc-item.open .chev{ transform: rotate(90deg); }
  .acc-panel{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .acc-panel-inner{
    padding: 0 4px 24px;
    font-size: 15px;
    line-height: 1.8;
    color: rgba(247,242,236,0.75);
  }
  .playlist{
    text-align:center;
    padding: 4px 0 8px;
  }
  .playlist .note{
    width: 26px; height: 26px;
    margin: 0 auto 14px;
    color: var(--pink);
  }
  .playlist p{
    font-size: 15px;
    color: rgba(247,242,236,0.75);
    margin-bottom: 20px;
  }
  .song-input{
    width: 100%;
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--white);
    font-family:'Jost', sans-serif;
    font-size: 14px;
    padding: 13px 16px;
    border-radius: 999px;
    margin-bottom: 16px;
    outline: none;
  }
  .song-input::placeholder{ color: rgba(247,242,236,0.4); }
  .song-input:focus{ border-color: var(--pink); }
  .form-group{
    text-align:left;
    margin-bottom: 16px;
  }
  .form-group label{
    display:block;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(247,242,236,0.55);
    margin-bottom: 7px;
  }
  .form-field{
    width: 100%;
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--white);
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    padding: 12px 15px;
    border-radius: 10px;
    outline: none;
  }
  .form-field:focus{ border-color: var(--pink); }
  select.form-field{ appearance:none; -webkit-appearance:none; }
  textarea.form-field{ resize: vertical; min-height: 70px; font-family:'Jost', sans-serif; }
  .form-note{
    font-size: 11px;
    color: rgba(247,242,236,0.4);
    margin-top: 14px;
  }
  .bank{
    margin-top: 14px;
    font-size: 13px;
    line-height: 2;
    color: rgba(247,242,236,0.85);
    border-top: 1px dashed var(--line);
    padding-top: 14px;
  }
  .bank b{ color: var(--white); }
  .bank .edit{ color: var(--pink); }

  /* ---------- RSVP ---------- */
  .envelope-icon{
    width: 44px; height: 34px;
    margin: 0 auto 18px;
    color: var(--pink);
  }
  .confirm-icon{
    width: 64px; height: 64px;
    margin: 0 auto 12px;
    display:block;
  }
  .rsvp-title{
    font-family:'Fraunces', serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(24px, 6vw, 30px);
    margin-bottom: 18px;
    line-height: 1.4;
  }
  .rsvp-copy{
    font-size: 14px;
    color: rgba(247,242,236,0.65);
    line-height: 1.8;
    max-width: 380px;
    margin: 0 auto 28px;
  }

  footer{
    padding: 42px 0 56px;
    text-align:center;
  }
  footer .sig{
    font-family:'Allura', cursive;
    font-size: 40px;
    color: var(--pink-deep);
  }
  footer .fine{
    margin-top: 12px;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(33,29,25,0.45);
  }
  footer .credit{
    margin-top: 18px;
  }
  footer .credit a{
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--pink-deep);
    text-decoration: none;
    font-weight: 500;
  }
  footer .credit a:hover{ text-decoration: underline; }
  footer .rights{
    margin-top: 6px;
    font-size: 9px;
    letter-spacing: 0.08em;
    color: rgba(33,29,25,0.35);
  }