:root{
    --cream:#fdf7ec;
    --cream-2:#faeedb;
    --teal:#2f8f88;
    --teal-soft:#a3ccc8;
    --teal-pale:#e3f0ee;
    --coral:#f19195;
    --coral-pale:#fde6e7;
    --periwinkle:#c0caed;
    --gold:#f5981f;
    --pink:#e0335f;
    --ink:#5c4d4d;
    --ink-dark:#3f3434;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{ scroll-behavior:smooth; scroll-padding-top:86px; }
  body{
    font-family:'Quicksand', sans-serif;
    color:var(--ink);
    background:var(--cream);
    overflow-x:hidden;
  }
  h1,h2,h3,.brand,.btn,.badge,.date-band{ font-family:'Baloo 2', sans-serif; }

  /* ---------- NAV ---------- */
  nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 28px;
    background:rgba(253,247,236,0.75);
    backdrop-filter:blur(8px);
    border-bottom:1px solid rgba(0,0,0,0.05);
  }
  nav .brand{
    font-weight:800; font-size:20px; color:var(--teal);
    letter-spacing:0.3px;
  }
  nav .brand span{ color:var(--pink); }
  nav ul{
    list-style:none; display:flex; gap:22px;
  }
  nav a{
    text-decoration:none; color:var(--ink-dark); font-weight:700;
    font-size:14.5px; padding:6px 4px; border-bottom:2px solid transparent;
    transition:all .25s;
  }
  nav a:hover{ color:var(--teal); border-color:var(--teal); }

  section{ position:relative; padding:100px 20px 70px; }

  /* ---------- DECOR ---------- */
  .decor{ position:absolute; pointer-events:none; z-index:0; }
  .confetti{
    position:absolute; border-radius:50%; opacity:0.55;
  }
  .garland{
    position:absolute; top:0; left:0; right:0; height:70px;
    display:flex; justify-content:space-between; z-index:1; overflow:hidden;
  }
  .flag{
    width:0; height:0; border-left:26px solid transparent; border-right:26px solid transparent;
    margin-top:-6px;
  }

  /* ---------- HERO ---------- */
  .hero{
    min-height:100vh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
    padding-top:130px;
    background:
      radial-gradient(circle at 8% 18%, var(--teal-pale) 0%, transparent 40%),
      radial-gradient(circle at 92% 15%, var(--coral-pale) 0%, transparent 42%),
      radial-gradient(circle at 88% 85%, var(--teal-pale) 0%, transparent 38%),
      radial-gradient(circle at 6% 88%, var(--coral-pale) 0%, transparent 40%),
      var(--cream);
  }
  .hero-inner{ position:relative; z-index:2; max-width:720px; }
  .edition-badge{
    display:inline-block;
    background:var(--teal);
    color:#fff;
    font-weight:700;
    font-size:14px;
    letter-spacing:1.2px;
    padding:7px 18px;
    border-radius:30px;
    margin-bottom:22px;
    box-shadow:0 6px 14px rgba(47,143,136,0.28);
  }
  .logo-img{
    width:min(78vw, 460px);
    display:block;
    margin:0 auto 6px;
    filter:drop-shadow(0 10px 18px rgba(0,0,0,0.08));
  }
  .tagline{
    font-family:'Baloo 2', sans-serif;
    font-weight:600;
    font-size:clamp(16px,2.6vw,20px);
    color:var(--teal);
    margin:6px 0 34px;
  }

  .date-band{
    display:inline-block;
    background:var(--teal-soft);
    color:#fff;
    font-weight:800;
    font-size:clamp(20px,4.4vw,28px);
    letter-spacing:1px;
    padding:12px 40px;
    border-radius:6px;
    position:relative;
    text-transform:uppercase;
  }
  .date-band::before, .date-band::after{
    content:"";
    position:absolute; top:0; width:0; height:0;
    border-top:26px solid transparent; border-bottom:26px solid transparent;
  }
  .date-band::before{ left:-16px; border-right:16px solid var(--teal-soft); }
  .date-band::after{ right:-16px; border-left:16px solid var(--teal-soft); }
  .date-year{
    display:block; margin-top:10px; font-weight:700; color:var(--ink);
    font-size:14px; letter-spacing:2px;
  }

  .info-row{
    display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
    margin-top:30px;
  }
  .info-card{
    display:flex; align-items:center; gap:10px;
    background:#fff; border:1px solid rgba(0,0,0,0.06);
    padding:12px 18px; border-radius:16px;
    font-weight:700; color:var(--ink-dark); font-size:15px;
    box-shadow:0 8px 20px rgba(0,0,0,0.04);
  }
  .info-card svg{ width:24px; height:24px; flex-shrink:0; }
  .info-card b{ color:var(--pink); font-weight:800; }

  .quote{
    margin:38px auto 0;
    max-width:520px;
    font-family:'Baloo 2', sans-serif;
    font-weight:600;
    font-style:italic;
    font-size:16px;
    color:var(--ink);
    opacity:0.9;
  }

  .map-link{
    display:inline-flex; align-items:center; gap:8px;
    margin-top:34px;
    color:var(--teal); font-weight:800; text-decoration:none;
    font-size:14.5px;
    border-bottom:2px solid var(--teal-soft);
    padding-bottom:2px;
  }
  .map-link:hover{ color:var(--pink); border-color:var(--coral); }

  .scroll-cue{
    margin-top:46px;
    text-decoration:none; cursor:pointer;
    display:flex; flex-direction:column; align-items:center;
    gap:6px; color:var(--teal); font-weight:700; font-size:13px;
    letter-spacing:0.5px;
  }
  .scroll-cue:hover{ color:var(--pink); }
  .scroll-cue svg{ animation:bounce 1.6s ease-in-out infinite; }
  @keyframes bounce{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(6px); }
  }

  /* ---------- SECTIONS: LUDOTECA / RSVP ---------- */
  .alt{ background:var(--cream-2); }
  .section-inner{
    position:relative; z-index:2;
    max-width:640px; margin:0 auto; text-align:center;
  }
  .section-icon{
    width:64px; height:64px; margin:0 auto 18px;
    display:flex; align-items:center; justify-content:center;
    background:#fff; border-radius:50%;
    box-shadow:0 10px 24px rgba(0,0,0,0.08);
    font-size:30px;
  }
  h2.section-title{
    font-size:clamp(28px,5.2vw,38px);
    color:var(--ink-dark);
    font-weight:800;
  }
  h2.section-title span{ color:var(--teal); }
  .section-sub{
    margin-top:8px;
    font-size:15.5px;
    color:var(--ink);
    opacity:0.85;
    max-width:460px;
    margin-left:auto; margin-right:auto;
  }
  .soon-card{
    margin:34px auto 0;
    max-width:360px;
    background:#fff;
    border:2.5px dashed var(--teal-soft);
    border-radius:24px;
    padding:34px 24px;
  }
  .soon-card .emoji{ font-size:40px; }
  .soon-card h3{
    font-weight:800; font-size:22px; color:var(--pink);
    margin-top:10px; letter-spacing:0.5px;
  }
  .soon-card p{
    margin-top:8px; font-size:14.5px; color:var(--ink); opacity:0.85;
  }
  .hidden{ display:none !important; }

  .rsvp-form{
    margin:34px auto 0;
    max-width:440px;
    background:#fff;
    border-radius:24px;
    padding:34px 28px;
    box-shadow:0 10px 24px rgba(0,0,0,0.06);
    text-align:left;
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  .form-field{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .form-field label{
    font-weight:700;
    font-size:14px;
    color:var(--ink-dark);
  }
  .form-field .opt{
    font-weight:500;
    opacity:0.6;
    font-size:12.5px;
  }
  .form-field input[type="text"],
  .form-field select{
    font-family:'Quicksand', sans-serif;
    font-size:15px;
    padding:10px 14px;
    border:1.5px solid var(--teal-soft);
    border-radius:12px;
    color:var(--ink-dark);
    background:#fff;
    outline:none;
    transition:border-color .2s;
  }
  .form-field input[type="text"]:focus,
  .form-field select:focus{
    border-color:var(--teal);
  }
  .form-field input:disabled{
    background:var(--cream-2);
    color:var(--ink);
    opacity:0.6;
    cursor:not-allowed;
  }
  .form-field #fraseOtro{ margin-top:2px; }
  .check-row{
    display:flex; align-items:center; gap:8px;
    font-weight:600; font-size:13.5px;
    color:var(--ink);
    cursor:pointer;
  }
  .check-row input{ width:16px; height:16px; accent-color:var(--teal); cursor:pointer; }

  .btn-submit{
    margin-top:6px;
    background:var(--pink);
    color:#fff;
    font-family:'Baloo 2', sans-serif;
    font-weight:800;
    font-size:16px;
    border:none;
    border-radius:16px;
    padding:14px;
    cursor:pointer;
    box-shadow:0 10px 20px rgba(224,51,95,0.28);
    transition:transform .15s, box-shadow .15s;
  }
  .btn-submit:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 26px rgba(224,51,95,0.34);
  }

  /* ---------- EDITAR REGISTRO ---------- */
  .edit-cue{
    margin-top:18px;
    font-size:14.5px; color:var(--ink); opacity:0.85;
  }
  .btn-link{
    background:none; border:none; padding:0;
    font-family:inherit; font-size:inherit; font-weight:700;
    color:var(--teal); cursor:pointer;
    border-bottom:1.5px solid var(--teal-soft);
    transition:color .2s, border-color .2s;
  }
  .btn-link:hover{ color:var(--pink); border-color:var(--coral); }
  .lookup-form .btn-link{ margin-top:2px; text-align:center; align-self:center; }
  .lookup-intro{
    font-size:14.5px; color:var(--ink); line-height:1.5;
  }
  .edit-banner{
    background:var(--teal-pale);
    border:1px solid var(--teal-soft);
    border-radius:14px;
    padding:12px 14px;
    font-size:14px; line-height:1.5; color:var(--ink-dark);
  }
  .edit-banner b{ color:var(--teal); }

  .form-error{
    margin-top:12px;
    color:#e0335f;
    font-size:14px;
    font-weight:600;
    text-align:center;
  }

  .participants-empty{
    text-align:center;
    color:var(--ink);
    opacity:0.6;
    font-size:15px;
    grid-column:1/-1;
  }

  .rsvp-success{
    margin:34px auto 0;
    max-width:360px;
    background:#fff;
    border:2.5px solid var(--teal);
    border-radius:24px;
    padding:34px 24px;
  }
  .rsvp-success .emoji{ font-size:40px; }
  .rsvp-success h3{
    font-weight:800; font-size:22px; color:var(--teal);
    margin-top:10px;
  }
  .rsvp-success p{
    margin-top:8px; font-size:14.5px; color:var(--ink); opacity:0.85;
  }

  .participants-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:16px;
    margin-top:34px;
    text-align:left;
  }
  .participant-card{
    background:#fff;
    border-radius:18px;
    padding:18px 20px;
    box-shadow:0 8px 20px rgba(0,0,0,0.05);
  }
  .participant-name{
    font-weight:800;
    font-size:15px;
    color:var(--ink-dark);
  }
  .participant-alias{
    color:var(--pink);
  }
  .participant-level{
    display:inline-block;
    margin-top:8px;
    padding:3px 12px;
    border-radius:20px;
    font-size:11.5px;
    font-weight:800;
    letter-spacing:0.3px;
  }
  .level-tutorial{ background:var(--teal-pale); color:var(--teal); }
  .level-casual{ background:var(--periwinkle); color:var(--ink-dark); }
  .level-estratega{ background:var(--coral-pale); color:var(--coral); }
  .level-deidad{ background:var(--gold); color:#fff; }

  .participant-phrase{
    margin-top:10px;
    font-style:italic;
    font-weight:700;
    font-size:13.5px;
    color:var(--teal);
  }

  footer{
    text-align:center; padding:34px 20px 40px;
    font-size:13.5px; color:var(--ink); opacity:0.7;
  }
  footer b{ color:var(--pink); }

  /* En móvil el menú se aprieta y se rompe: se oculta y se navega scrolleando. */
  @media (max-width:768px){
    nav{ display:none; }
    html{ scroll-padding-top:0; }
    section{ padding:56px 20px 56px; }
    .hero{ padding-top:56px; }
  }

  @media (max-width:560px){
    section{ padding:48px 16px 48px; }
    .hero{ padding-top:48px; }
    .info-row{ gap:10px; }
    .info-card{ font-size:13.5px; padding:10px 14px; }
  }