:root{
  --paper:#fbf4e6; --paper-2:#f5ead3; --ink:#2b2a26; --green:#2e6b2e; --green-d:#1e4b21; --green-l:#6aa84f;
  --sky:#9cc9e6; --peach:#f8c58c; --orange:#ef8a4a; --pink:#f2a7a0; --sun:#f6b26b;
  --sketch: 255px 18px 225px 18px / 18px 225px 18px 255px;
  --font-hand:'Caveat Brush','Caveat',cursive; --font-body:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); font-family:var(--font-body); font-size:17px; line-height:1.5;
  background:
    radial-gradient(1200px 500px at 50% -120px, rgba(246,178,107,.55), transparent 70%),
    linear-gradient(180deg, #a9d2ec 0%, #f7d7b0 340px, var(--paper) 760px, var(--paper) 100%);
  min-height:100vh; overflow-x:hidden; position:relative;
}
/* textura de papel / lápiz de colores */
body::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.26; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(-28deg, rgba(120,90,60,.05) 0 1px, transparent 1px 5px);
}
header,main,footer{position:relative; z-index:1}

/* ---------- HERO ---------- */
.hero{text-align:center; padding:28px 16px 8px; max-width:1100px; margin:0 auto;}
.kicker{font-family:var(--font-hand); font-size:1.35rem; letter-spacing:.06em; text-transform:uppercase; color:var(--green-d); margin:0}
.title{
  font-family:var(--font-hand); font-weight:400; color:var(--green); margin:.05em 0 0; line-height:.9;
  font-size:clamp(3.6rem, 17vw, 7rem); text-transform:uppercase; letter-spacing:.02em;
  text-shadow: 2px 2px 0 rgba(30,75,33,.18), -1px 1px 0 rgba(255,255,255,.5);
}
.title .amp{color:var(--orange); font-size:.6em; vertical-align:.2em}
.subtitle{font-family:'Caveat',cursive; font-weight:700; font-size:2rem; color:var(--green-d); margin:.1em 0 .6em; position:relative; display:inline-block}
.subtitle::after{content:""; position:absolute; left:8%; right:-4%; bottom:.05em; height:.35em; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M2 14 C40 4 90 6 130 10 S180 12 198 6' stroke='%232e6b2e' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%}
.flyer{margin:0 auto; max-width:460px; padding:10px 10px 14px; background:#fff; border-radius:6px;
  box-shadow:0 1px 0 rgba(0,0,0,.05), 0 18px 40px -16px rgba(80,50,20,.45); transform:rotate(-1.4deg); position:relative}
.flyer::before,.flyer::after{content:""; position:absolute; width:90px; height:26px; background:rgba(246,226,160,.75); top:-11px; box-shadow:0 1px 2px rgba(0,0,0,.1)}
.flyer::before{left:18px; transform:rotate(-8deg)} .flyer::after{right:18px; transform:rotate(7deg)}
.flyer img{display:block; width:100%; height:auto; border-radius:3px}
.cta-row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:22px 0 4px}

/* ---------- Botones ---------- */
.btn{
  --bg:#fff; --fg:var(--green-d);
  display:inline-flex; align-items:center; justify-content:center; gap:.4em; cursor:pointer; text-decoration:none;
  font:800 1rem/1 var(--font-body); color:var(--fg); background:var(--bg); padding:14px 20px; min-height:48px;
  border:2.5px solid var(--green-d); border-radius:var(--sketch); box-shadow:3px 4px 0 var(--green-d);
  transition:transform .12s, box-shadow .12s;
}
.btn:hover{transform:translate(-1px,-1px); box-shadow:4px 5px 0 var(--green-d)}
.btn:active{transform:translate(2px,3px); box-shadow:1px 1px 0 var(--green-d)}
.btn:disabled{opacity:.6; cursor:progress}
.btn-primary{--bg:var(--green); --fg:#fff}
.btn-ghost{--bg:rgba(255,255,255,.75)}
.btn-small{padding:10px 14px; min-height:42px; font-size:.92rem}
.btn-block{width:100%}
.btn-maps{--bg:#fff; --fg:#1a73e8}
.btn-waze{--bg:#33ccff; --fg:#08243a}

/* ---------- Cards ---------- */
main{max-width:1100px; margin:0 auto; padding:14px 14px 30px; display:grid; gap:22px}
.card{
  background:rgba(255,252,245,.92); padding:22px 18px 24px; border:2px solid rgba(46,107,46,.75);
  border-radius:var(--sketch); box-shadow:0 14px 30px -18px rgba(80,50,20,.45); position:relative;
}
.card h2{font-family:var(--font-hand); font-weight:400; color:var(--green); font-size:2.4rem; margin:0 0 .3em; line-height:1}
.card h2::after{content:""; display:block; width:110px; height:10px; margin-top:4px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M2 8 Q30 2 60 7 T118 5' stroke='%23ef8a4a' stroke-width='3.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat}
.lead{margin:.2em 0 1em; color:#4a463d}

.facts{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.facts li{display:flex; gap:14px; align-items:center; padding:12px 14px; background:var(--paper-2); border-radius:14px 22px 16px 24px}
.facts .ico{font-size:1.7rem; width:46px; height:46px; display:grid; place-items:center; background:#fff; border-radius:50%; border:2px solid var(--green-d); flex:none}
.facts strong{display:block; font-family:'Caveat',cursive; font-size:1.65rem; line-height:1.05; color:var(--green-d)}
.facts small{color:#6b6458; font-size:.88rem}
.guardia{margin:14px 0 0; padding:10px 12px; background:#fff3d6; border-left:4px solid var(--sun); border-radius:6px}

.countdown{margin:18px 0 6px; text-align:center}
.cd-label{font-family:var(--font-hand); font-size:1.6rem; margin:0 0 6px; color:var(--orange)}
.cd-grid{display:flex; gap:10px; justify-content:center}
.cd-grid div{min-width:78px; padding:8px 6px; background:#fff; border:2px dashed var(--green-l); border-radius:16px 10px 18px 12px}
.cd-grid b{display:block; font-family:var(--font-hand); font-size:2.3rem; font-weight:400; color:var(--green-d); line-height:1}
.cd-grid span{font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:#7a7264}
.cal-row{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:16px 0 4px}
.tags{text-align:center; font-family:'Caveat',cursive; font-weight:700; font-size:1.5rem; color:var(--green); margin:14px 0 0}

/* ---------- Form ---------- */
form{display:grid; gap:16px}
.field{display:grid; gap:6px; border:0; margin:0; padding:0}
.field > span, .field legend{font-weight:800; color:var(--green-d)}
.field small{font-weight:400; color:#7a7264}
input[type=text], input[type=number], textarea{
  width:100%; font:inherit; font-size:1.05rem; color:var(--ink); background:#fff; padding:12px 14px; min-height:48px;
  border:2px solid #b9ae95; border-radius:12px 16px 10px 18px; outline:none; transition:border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus{border-color:var(--green); box-shadow:0 0 0 4px rgba(106,168,79,.25)}
textarea{resize:vertical}
.yesno{display:flex; flex-wrap:wrap; gap:10px}
.yesno legend{width:100%; margin-bottom:6px}
.pill{flex:1 1 140px; position:relative}
.pill input{position:absolute; opacity:0; inset:0}
.pill span{display:flex; justify-content:center; align-items:center; min-height:52px; padding:10px 12px; background:#fff; font-weight:800;
  border:2.5px solid #b9ae95; border-radius:var(--sketch); cursor:pointer; transition:all .15s}
.pill input:checked + span{background:var(--green); color:#fff; border-color:var(--green-d); box-shadow:3px 3px 0 var(--green-d)}
.pill input[value="No"]:checked + span{background:var(--pink); color:var(--ink)}
.pill input:focus-visible + span{outline:3px solid var(--sun); outline-offset:2px}
.stepper{display:flex; align-items:center; gap:8px; max-width:220px}
.stepper input{text-align:center; font-weight:800; -moz-appearance:textfield}
.stepper input::-webkit-inner-spin-button{display:none}
.step{width:48px; height:48px; flex:none; font-size:1.6rem; font-weight:800; color:var(--green-d); background:var(--paper-2); border:2px solid var(--green-d); border-radius:50%; cursor:pointer}
#personas-wrap{transition:opacity .2s}
#personas-wrap.is-off{opacity:.35; pointer-events:none}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-msg{margin:0; min-height:1.2em; font-weight:600}
.form-msg.err{color:#b3261e}
.thanks{text-align:center; padding:10px 0}
.thanks-big{font-family:var(--font-hand); font-size:2.4rem; color:var(--green); margin:0 0 .2em; line-height:1.05}

/* ---------- Mapa ---------- */
.map-frame{border:2.5px solid var(--green-d); border-radius:18px 26px 16px 28px; overflow:hidden; aspect-ratio:4/3; background:#e8e2d2; box-shadow:4px 5px 0 rgba(30,75,33,.25)}
.map-frame iframe{width:100%; height:100%; border:0; display:block}
.map-buttons{display:grid; grid-template-columns:1fr; gap:10px; margin-top:16px}
@media (min-width:480px){.map-buttons{grid-template-columns:1fr 1fr}}

.foot{text-align:center; padding:10px 16px 40px; color:#6b6458}
.sig{font-family:var(--font-hand); font-size:1.8rem; color:var(--green)}

/* ---------- Desktop ---------- */
@media (min-width: 900px){
  body{font-size:18px}
  .hero{display:grid; grid-template-columns: 1fr 460px; grid-template-areas:"k f" "t f" "s f" "c f"; align-content:center; column-gap:48px; text-align:left; padding:48px 32px 16px}
  .kicker{grid-area:k; align-self:end} .title{grid-area:t} .subtitle{grid-area:s; justify-self:start; align-self:start} .flyer{grid-area:f; margin:0} .cta-row{grid-area:c; justify-content:flex-start; align-self:start}
  .title{font-size:clamp(5rem, 9vw, 8.5rem)}
  main{grid-template-columns: 1fr 1.15fr; padding:24px 32px 40px; gap:28px}
  .mapa{grid-column: 1 / -1}
  .map-frame{aspect-ratio: 21/8}
  .card{padding:30px 30px 32px}
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .btn{transition:none} }

/* ---------- Fecha límite + acompañantes ---------- */
.deadline{margin:0 0 12px; padding:10px 14px; background:#fff1d9; border:2px dashed var(--orange); border-radius:14px 20px 12px 22px; font-weight:700; color:#7a3d12; text-align:center; font-size:1.02rem}
.deadline strong{font-family:'Caveat',cursive; font-size:1.45rem; color:var(--orange); white-space:nowrap}
.hint{font-size:.85rem; color:#7a7264}
.acomp #acomp-list{display:grid; gap:10px}
.acomp-row{display:flex; align-items:center; gap:10px}
.acomp-row .n{flex:none; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--paper-2); border:2px solid var(--green-l); font-weight:800; color:var(--green-d); font-size:.9rem}
.acomp-row input{flex:1}
input.invalid{border-color:#b3261e; box-shadow:0 0 0 3px rgba(179,38,30,.15)}