:root{
    --pink:#ff6fa5;
    --pink-dark:#e94f8a;
    --ink:#3a3350;
    --sky-top:#bfe6f5;
    --sky-bottom:#9fd8ee;
    --modal-bg:#ffffff;
    --modal-text:#3a3350;
    --modal-sub:#8b849c;
    --input-bg:#f7f7fb;
    --input-border:#e3def0;
    --circle-bg:#f2f2f7;
    --circle-border:#d9d3ea;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --input-bg:#f7f7fb;
      --input-border:#e3def0;
      --circle-bg:#f2f2f7;
      --circle-border:#d9d3ea;
    }
  }
  :root[data-theme="dark"]{
    --input-bg:#2f2946;
    --input-border:#443c63;
    --circle-bg:#2f2946;
    --circle-border:#4a4169;
  }

  *{box-sizing:border-box;}
  html,body{
    margin:0;padding:0;
    height:100%;
    overflow:hidden;
    background:linear-gradient(180deg,var(--sky-top) 0%, var(--sky-bottom) 100%);
  }
  body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-tap-highlight-color:transparent;
    height:100dvh;
    width:100vw;
    position:relative;
  }

  #stage{
    position:fixed;
    left:50%;
    top:50%;
    width:430px;
    height:768px;
    flex:none;
  }

  .art{
    position:absolute;
    left:0;top:0;
    width:430px;
    height:768px;
    overflow:hidden;
    border-radius:0;
  }
  .art img.bg{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .layer{
    position:absolute;
    display:block;
  }
  .layer img{ display:block; width:100%; height:auto; }

  /* precise placements, in % of the 430x768 art canvas */
  #l-name{ left:6%; top:1%; width:88%; z-index:5; }
  #l-stitchsmall{ left:70%; top:40%; width:25%; z-index:4; }
  #l-info{ left:8%; top:46.4%; width:84%; z-index:6; overflow:hidden; }
  #l-ubicacion{ left:33%; top:59%; width:36%; z-index:6; }
  #l-stitchbig{ left:23%; top:66%; width:30%; z-index:3; }

  #l-info img{
    display:block;
    width:100%;
    height:auto;
    animation: slideInBanner 1s cubic-bezier(.22,.85,.4,1) both;
  }

  a.link-layer{ text-decoration:none; cursor:pointer; }
  a.link-layer:active img{ filter:brightness(0.92); }

  /* floating CTA overlaid directly on the sand area of the art */
  .cta-wrap{
    position:absolute;
    left:17%;
    top:90%;
    width:65%;
    z-index:7;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
  }
  .rsvp-btn{
    appearance:none;
    border:none;
    cursor:pointer;
    width:100%;
    padding:12px;
    border-radius:40px;
    font-family:inherit;
    font-size:16px;
    font-weight:700;
    color:#fff;
    letter-spacing:0.2px;
    background:linear-gradient(180deg, var(--pink) 0%, var(--pink-dark) 100%);
    box-shadow:0 6px 0 #c8386e, 0 10px 16px rgba(233,79,138,0.35);
    transition:transform .08s ease;
  }
  .rsvp-btn:active{
    transform:translateY(4px);
    box-shadow:0 2px 0 #c8386e, 0 5px 10px rgba(233,79,138,0.3);
  }

  /* ===== animate.css-style keyframes, inlined ===== */
  .animate__animated{animation-duration:.9s;animation-fill-mode:both;}

  @keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
  .animate__fadeIn{animation-name:fadeIn;animation-duration:1.1s;}

  @keyframes fadeInUp{from{opacity:0;transform:translate3d(0,24px,0);}to{opacity:1;transform:translate3d(0,0,0);}}
  .animate__fadeInUp{animation-name:fadeInUp;}

  @keyframes fadeInLeft{from{opacity:0;transform:translate3d(-26px,0,0);}to{opacity:1;transform:translate3d(0,0,0);}}
  .animate__fadeInLeft{animation-name:fadeInLeft;}

  @keyframes fadeInRight{from{opacity:0;transform:translate3d(26px,0,0);}to{opacity:1;transform:translate3d(0,0,0);}}
  .animate__fadeInRight{animation-name:fadeInRight;}

  @keyframes bounceIn{
    0%{opacity:0;transform:scale3d(.3,.3,.3);}
    45%{opacity:1;transform:scale3d(1.08,1.08,1.08);}
    70%{transform:scale3d(.94,.94,.94);}
    100%{opacity:1;transform:scale3d(1,1,1);}
  }
  .animate__bounceIn{animation-name:bounceIn;animation-duration:.7s;}

  @keyframes pulseSoft{0%,100%{transform:scale(1);}50%{transform:scale(1.045);}}
  .animate__pulse{animation-name:pulseSoft;animation-duration:1.7s;animation-iteration-count:infinite;}

  @keyframes heartBeat{
    0%{transform:scale(1);}20%{transform:scale(1.22);}40%{transform:scale(0.96);}
    60%{transform:scale(1.14);}80%{transform:scale(0.98);}100%{transform:scale(1);}
  }
  .animate__heartBeat{animation-name:heartBeat;animation-duration:1s;}

  @keyframes shakeX{
    0%,100%{transform:translate3d(0,0,0);}
    20%,60%{transform:translate3d(-6px,0,0);}
    40%,80%{transform:translate3d(6px,0,0);}
  }
  .animate__shakeX{animation-name:shakeX;animation-duration:.5s;}

  /* slides in from off-screen left and settles centered in place, once */
  @keyframes slideInBanner{
    0%{ transform:translateX(-135%); opacity:0; }
    60%{ opacity:1; }
    100%{ transform:translateX(0); opacity:1; }
  }

  .d1{animation-delay:.05s;} .d2{animation-delay:.25s;} .d3{animation-delay:.45s;}
  .d4{animation-delay:.65s;} .d5{animation-delay:.85s;} .d6{animation-delay:1.0s;}
  .d7{animation-delay:1.15s;} .d8{animation-delay:1.3s;}

  /* ===== modal ===== */
  .modal-backdrop{
    position:fixed; inset:0;
    background:rgba(30,20,45,0.45);
    backdrop-filter:blur(2px);
    display:none;
    align-items:center; justify-content:center;
    padding:20px;
    z-index:100;
  }
  .modal-backdrop.open{ display:flex; }
  .modal-card{
    width:100%; max-width:360px; max-height:88vh; overflow-y:auto;
    background:var(--modal-bg); color:var(--modal-text);
    border-radius:26px; padding:26px 24px 22px;
    box-shadow:0 20px 50px rgba(0,0,0,0.35);
  }
  .modal-title{ margin:0 0 4px; font-size:23px; font-weight:800; color:var(--pink-dark); }
  .modal-sub{ margin:0 0 20px; font-size:13.5px; color:var(--modal-sub); }
  .field-label{ display:block; font-size:13px; font-weight:700; margin:0 0 8px; color:var(--modal-text); }
  .text-input{
    width:100%; padding:13px 14px; border-radius:14px;
    border:1.5px solid var(--input-border); background:var(--input-bg);
    color:var(--modal-text); font-size:15px; margin-bottom:18px; outline:none;
  }
  .text-input:focus{ border-color:var(--pink); }
  .counter-row{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
  .counter-pill{
    width:36px; height:36px; border-radius:50%;
    border:1.5px solid var(--circle-border); background:var(--circle-bg);
    color:var(--modal-text); font-size:14px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:transform .12s ease;
  }
  .counter-pill.active{
    background:linear-gradient(180deg, var(--pink) 0%, var(--pink-dark) 100%);
    border-color:transparent; color:#fff; transform:scale(1.08);
  }
  .counter-pill:active{ transform:scale(0.94); }
  .modal-actions{ display:flex; gap:10px; margin-top:6px; }
  .btn-primary{
    flex:1.3; appearance:none; border:none; cursor:pointer;
    padding:14px 16px; border-radius:30px; font-size:15px; font-weight:700;
    color:#fff; background:linear-gradient(180deg, var(--pink) 0%, var(--pink-dark) 100%);
    box-shadow:0 6px 0 #c8386e;
  }
  .btn-primary:active{ transform:translateY(3px); box-shadow:0 3px 0 #c8386e; }
  .btn-secondary{
    flex:1; appearance:none; border:none; cursor:pointer;
    padding:14px 16px; border-radius:30px; font-size:15px; font-weight:700;
    color:var(--modal-text); background:var(--circle-bg);
  }
  .error-text{ font-size:12.5px; color:#e0447a; margin:-12px 0 14px; display:none; }
  .error-text.show{ display:block; }
  .success-view{ display:none; text-align:center; padding:8px 0 4px; }
  .success-view.show{ display:block; }
  .success-check{
    width:64px;height:64px;border-radius:50%;
    background:linear-gradient(180deg, var(--pink) 0%, var(--pink-dark) 100%);
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 16px; color:#fff;font-size:32px;
  }
  .success-title{ font-size:19px; font-weight:800; margin:0 0 8px; color:var(--pink-dark); }
  .success-msg{ font-size:14px; color:var(--modal-sub); margin:0 0 20px; line-height:1.5; }
  .form-view.hide{ display:none; }

  /* ===== landscape lock ===== */
  #rotateOverlay{
    display:none;
    position:fixed;
    inset:0;
    z-index:999;
    background:linear-gradient(180deg,var(--sky-top) 0%, var(--sky-bottom) 100%);
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:24px;
    gap:14px;
  }
  #rotateOverlay .icon{
    font-size:52px;
    animation: rotateHint 1.6s ease-in-out infinite;
  }
  #rotateOverlay p{
    margin:0;
    font-size:17px;
    font-weight:700;
    color:var(--ink);
    max-width:280px;
  }
  @keyframes rotateHint{
    0%,100%{ transform:rotate(0deg); }
    50%{ transform:rotate(-90deg); }
  }
  @media (orientation:landscape){
    #stage{ display:none; }
    #rotateOverlay{ display:flex; }
    .modal-backdrop{ display:none !important; }
  }