:root{
  --forest:#123f35;
  --forest-2:#0b3028;
  --forest-3:#08251f;
  --cream:#fff9ef;
  --paper:#ffffff;
  --sand:#f4ead8;
  --ink:#1b2e28;
  --muted:#64736d;
  --orange:#f3a126;
  --orange-2:#d97812;
  --pink:#df4b86;
  --purple:#7757a4;
  --blue:#259fc8;
  --green:#78b83b;
  --teal:#38b7a4;
  --line:rgba(18,63,53,.13);
  --shadow:0 26px 75px rgba(10,44,37,.16);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-width:320px;
  overflow-x:hidden;
  background:var(--cream);
  color:var(--ink);
  font-family:"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.55;
}
img{max-width:100%;display:block}
a{color:inherit}
button,a{-webkit-tap-highlight-color:transparent}

.skip-link{
  position:fixed;left:12px;top:12px;z-index:9999;
  padding:10px 14px;border-radius:10px;background:#fff;color:var(--forest-3);
  text-decoration:none;transform:translateY(-160%);box-shadow:var(--shadow)
}
.skip-link:focus{transform:none}

.container{width:min(1180px,calc(100% - 40px));margin-inline:auto}
.section{padding:110px 0}
.section-label,.micro-label{
  margin:0 0 14px;text-transform:uppercase;letter-spacing:.2em;font-size:.76rem;font-weight:800
}
.section-label{color:var(--orange-2)}
.section-label.light{color:#ffd18c}
.body-text{color:var(--muted);font-size:1.05rem}

.topbar{
  position:fixed;inset:0 0 auto;z-index:100;
  transition:background .25s ease,box-shadow .25s ease,backdrop-filter .25s ease
}
.topbar.scrolled{background:rgba(8,37,31,.93);box-shadow:0 12px 32px rgba(4,24,20,.24);backdrop-filter:blur(16px)}
.nav-wrap{width:min(1180px,calc(100% - 40px));height:82px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:30px}
.identity{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;min-width:0}
.identity-text{display:flex;flex-direction:column;line-height:1.05}
.identity-text small{font-size:.69rem;letter-spacing:.14em;text-transform:uppercase;opacity:.72}
.identity-text strong{font-size:1rem;white-space:nowrap}
.identity-symbol,.mini-logo-symbol{position:relative;width:39px;height:39px;display:block;flex:0 0 auto}
.identity-symbol i,.mini-logo-symbol i{position:absolute;width:20px;height:20px;right:50%;bottom:50%;border-radius:75% 25% 70% 30%;transform-origin:100% 100%}
.identity-symbol i:nth-child(1),.mini-logo-symbol i:nth-child(1){background:var(--orange);transform:rotate(0)}
.identity-symbol i:nth-child(2),.mini-logo-symbol i:nth-child(2){background:var(--pink);transform:rotate(72deg)}
.identity-symbol i:nth-child(3),.mini-logo-symbol i:nth-child(3){background:var(--purple);transform:rotate(144deg)}
.identity-symbol i:nth-child(4),.mini-logo-symbol i:nth-child(4){background:var(--blue);transform:rotate(216deg)}
.identity-symbol i:nth-child(5),.mini-logo-symbol i:nth-child(5){background:var(--green);transform:rotate(288deg)}
.nav{display:flex;align-items:center;gap:28px}
.nav a{position:relative;color:rgba(255,255,255,.84);text-decoration:none;font-size:.9rem;font-weight:650}
.nav a:after{content:"";position:absolute;left:0;bottom:-8px;width:0;height:2px;background:var(--orange);transition:width .2s ease}
.nav a:hover:after,.nav a:focus-visible:after{width:100%}
.nav-toggle{display:none}

.hero{
  position:relative;min-height:760px;min-height:100svh;display:grid;align-items:center;overflow:hidden;isolation:isolate;
  background:linear-gradient(120deg,#0d372f 0%,#164d40 48%,#1f654f 100%);color:#fff
}
.hero-photo,.closing-photo{
  position:absolute;inset:0;z-index:-4;background-color:#164d40;
  background-image:url("https://upload.wikimedia.org/wikipedia/commons/e/e0/Atardecer_en_Valle_de_Bravo.jpg");
  background-size:cover;background-position:center
}
.hero-overlay{position:absolute;inset:0;z-index:-3;background:linear-gradient(90deg,rgba(5,29,24,.96) 0%,rgba(5,29,24,.76) 48%,rgba(5,29,24,.28) 80%,rgba(5,29,24,.48) 100%)}
.hero-decoration{position:absolute;z-index:-2;border-radius:50%;border:1px solid rgba(255,255,255,.09);pointer-events:none}
.deco-one{width:500px;height:500px;right:-150px;top:-100px;box-shadow:0 0 0 72px rgba(255,255,255,.022),0 0 0 144px rgba(255,255,255,.014)}
.deco-two{width:270px;height:270px;right:18%;bottom:-150px;box-shadow:0 0 0 55px rgba(243,161,38,.035)}
.hero-content{width:min(1180px,calc(100% - 40px));margin:auto;padding:145px 0 210px}
.micro-label{color:#ffd18c}
.hero h1{margin:0;max-width:850px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(3.7rem,8.1vw,7.8rem);line-height:.87;letter-spacing:-.055em;font-weight:700}
.hero h1 span{display:block;color:#ffc66b}
.hero-copy{margin:26px 0 0;font-size:clamp(1.08rem,2vw,1.35rem);color:rgba(255,255,255,.83)}
.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px}
.btn{min-height:52px;padding:0 24px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-size:.9rem;font-weight:800;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.btn:hover,.btn:focus-visible{transform:translateY(-2px)}
.btn-primary{background:var(--orange);color:#243128;box-shadow:0 16px 32px rgba(243,161,38,.2)}
.btn-primary:hover{background:#ffb449}
.btn-secondary{border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.075);color:#fff;backdrop-filter:blur(10px)}
.btn-light{background:#fff;color:var(--forest-3)}
.hero-info{
  position:absolute;left:50%;bottom:30px;transform:translateX(-50%);width:min(1040px,calc(100% - 40px));
  display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(255,255,255,.14);border-radius:24px;overflow:hidden;
  background:rgba(7,34,29,.62);backdrop-filter:blur(17px)
}
.hero-info article{padding:18px 23px}
.hero-info article+article{border-left:1px solid rgba(255,255,255,.12)}
.hero-info small{display:block;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.16em;font-size:.69rem}
.hero-info strong{display:block;margin-top:3px;font-size:clamp(1rem,2vw,1.32rem)}
.hero-info em{font-size:.65em;font-style:normal;opacity:.72}

.intro{background:linear-gradient(180deg,#fffaf1 0%,#f5ebd9 100%)}
.intro-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(42px,7vw,90px);align-items:center}
.date-line{display:flex;align-items:baseline;gap:10px;margin:0 0 4px;color:var(--forest);font-weight:900;letter-spacing:.15em}
.date-line span{font-family:Georgia,serif;font-size:clamp(3.6rem,7vw,6rem);line-height:.9;letter-spacing:-.04em;color:var(--orange-2)}
.intro h2,.festival h2,.monarch h2,.departures h2,.closing h2{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(3rem,6vw,5.4rem);line-height:.95;letter-spacing:-.045em}
.headline-note{margin:17px 0 0;color:var(--forest);font-size:1.42rem;font-weight:800}
.quick-facts{display:grid;gap:12px;margin-top:30px}
.fact{display:flex;gap:14px;align-items:center;padding:14px 16px;background:rgba(255,255,255,.68);border:1px solid var(--line);border-radius:17px}
.fact-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--forest);color:#fff;font-weight:900;flex:0 0 auto}
.butterfly-icon{background:var(--orange-2)}
.fact small,.fact strong{display:block}.fact small{color:var(--muted);font-size:.69rem;text-transform:uppercase;letter-spacing:.12em}.fact strong{color:var(--forest-3)}
.photo-card{position:relative;min-height:600px;border-radius:34px;overflow:hidden;box-shadow:var(--shadow);background:#ad6322}
.photo{position:absolute;inset:0;background-size:cover;background-position:center}
.festival-photo{
  background-color:#9a4e21;
  background-image:url("https://cdn2.telediario.mx/uploads/media/2025/10/04/festival-almas-contara-artistas-talla.jpg")
}
.photo-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(24,30,25,.78) 100%)}
.photo-caption{position:absolute;left:24px;right:24px;bottom:24px;padding:19px 20px;border-radius:19px;background:rgba(8,39,33,.64);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(12px);color:#fff}
.photo-caption small,.photo-caption strong,.photo-caption span{display:block}.photo-caption small{color:#ffd18c;letter-spacing:.16em;font-size:.7rem}.photo-caption strong{font-size:1.35rem}.photo-caption span{color:rgba(255,255,255,.7)}

.festival{position:relative;padding:110px 0;background:var(--forest-3);color:#fff;overflow:hidden}
.festival:before{content:"";position:absolute;width:530px;height:530px;right:-210px;top:-200px;border-radius:50%;border:1px solid rgba(255,255,255,.06);box-shadow:0 0 0 70px rgba(255,255,255,.018),0 0 0 140px rgba(255,255,255,.012)}
.festival-band{position:absolute;left:0;right:0;top:0;height:8px;display:grid;grid-template-columns:repeat(6,1fr)}
.festival-band span:nth-child(1){background:var(--green)}.festival-band span:nth-child(2){background:var(--teal)}.festival-band span:nth-child(3){background:var(--blue)}.festival-band span:nth-child(4){background:var(--purple)}.festival-band span:nth-child(5){background:var(--pink)}.festival-band span:nth-child(6){background:var(--orange)}
.festival-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:clamp(48px,8vw,100px)}
.festival-visual{position:relative;min-height:560px}
.festival-frame{position:absolute;inset:0 34px 0 0;border-radius:46% 54% 42% 58% / 56% 42% 58% 44%;background-color:#3c5e50;background-image:url("https://upload.wikimedia.org/wikipedia/commons/e/e0/Atardecer_en_Valle_de_Bravo.jpg");background-size:cover;background-position:center;box-shadow:0 30px 75px rgba(0,0,0,.3)}
.festival-badge{position:absolute;right:0;bottom:42px;width:174px;padding:20px;border-radius:18px;background:var(--orange);color:#26342d;transform:rotate(-4deg);box-shadow:0 18px 40px rgba(0,0,0,.28)}
.festival-badge small,.festival-badge strong{display:block}.festival-badge small{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em}.festival-badge strong{font-size:1.55rem}
.festival h2 span{color:#ffc66b}.festival-copy>p:not(.section-label){color:rgba(255,255,255,.72);font-size:1.15rem}
.price-card{display:inline-grid;grid-template-columns:auto auto;align-items:end;column-gap:9px;margin-top:25px;padding:17px 20px;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:rgba(255,255,255,.07)}
.price-card small{grid-column:1/-1;color:#ffd18c;text-transform:uppercase;letter-spacing:.16em;font-size:.68rem}.price-card strong{font-size:2.2rem;line-height:1}.price-card span{color:rgba(255,255,255,.66);font-size:.84rem}

.monarch{background:#fff}
.monarch-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(45px,8vw,100px);align-items:center}
.monarch h2 span{color:var(--orange-2)}
.route-line{display:flex;align-items:center;gap:14px;margin-top:28px;color:var(--forest);font-size:.86rem;letter-spacing:.05em}.route-line i{position:relative;width:64px;height:1px;background:rgba(18,63,53,.28)}.route-line i:after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--orange-2)}
.monarch-card{position:relative;min-height:570px;border-radius:34px;overflow:hidden;box-shadow:var(--shadow);background:#bf741b}
.monarch-photo{background-color:#8c713e;background-image:url("https://upload.wikimedia.org/wikipedia/commons/9/98/Monarch_butterflies_in_flight_in_Mexico_%2846770710125%29.jpg");background-position:center}
.monarch-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(20,32,25,.58))}
.monarch-label{position:absolute;left:22px;right:22px;bottom:22px;z-index:2;display:flex;align-items:center;gap:13px;padding:16px 18px;border-radius:17px;background:rgba(8,39,33,.7);border:1px solid rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(12px)}
.monarch-label>span{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:var(--orange);color:#30362d;font-weight:900}.monarch-label small,.monarch-label strong{display:block}.monarch-label small{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.62)}

.departures{background:linear-gradient(180deg,#f5ebd9,#fffaf1)}
.departures-card{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:34px;padding:clamp(34px,6vw,66px);background:#fff;border:1px solid var(--line);border-radius:34px;box-shadow:var(--shadow);overflow:hidden}
.departures-card:after{content:"";position:absolute;width:240px;height:240px;right:-90px;top:-95px;border-radius:50%;background:rgba(37,159,200,.08)}
.calendar-mark{position:relative;z-index:1;width:150px;aspect-ratio:1;border-radius:30px;display:grid;place-items:center;align-content:center;background:var(--forest);color:#fff;transform:rotate(-4deg);box-shadow:0 20px 40px rgba(18,63,53,.2)}
.calendar-mark small,.calendar-mark strong,.calendar-mark span{display:block;transform:rotate(4deg);text-align:center}.calendar-mark small,.calendar-mark span{font-size:.68rem;letter-spacing:.16em}.calendar-mark strong{font-family:Georgia,serif;font-size:4.8rem;line-height:.85}
.departures-copy h2 span{color:var(--orange-2)}.departures-copy p:last-child{margin-bottom:0;color:var(--muted);font-size:1.05rem}
.mini-logo{position:relative;z-index:1;display:flex;align-items:center;gap:12px;min-width:230px}.mini-logo small,.mini-logo strong{display:block}.mini-logo small{font-size:.67rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.mini-logo strong{font-size:.95rem;color:var(--forest)}

.closing{position:relative;min-height:630px;display:flex;align-items:center;overflow:hidden;isolation:isolate;color:#fff;background:var(--forest-3)}
.closing-photo{background-position:center 60%}
.closing-overlay{position:absolute;inset:0;z-index:-3;background:linear-gradient(90deg,rgba(4,27,22,.96) 0%,rgba(4,27,22,.78) 50%,rgba(4,27,22,.34) 100%)}
.closing-content{padding:95px 0;position:relative;z-index:1}.closing h2 span{color:#ffc66b}.closing-content>p:not(.section-label){font-size:1.35rem;color:rgba(255,255,255,.78)}
.closing-pills{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 30px}.closing-pills span{padding:9px 14px;border:1px solid rgba(255,255,255,.17);border-radius:999px;background:rgba(255,255,255,.08);font-size:.86rem}

.footer{background:#071f1a;color:#fff;padding:38px 0}.footer-wrap{display:flex;align-items:center;justify-content:space-between;gap:30px}.footer-brand{display:flex;align-items:center;gap:13px}.footer-brand strong,.footer-brand span{display:block}.footer-brand span{font-size:.8rem;color:rgba(255,255,255,.54)}.footer p{margin:0;color:rgba(255,255,255,.52);font-size:.82rem;text-align:right}

/* El contenido es visible por defecto. JS sólo añade mejoras de animación. */
.reveal{opacity:1;transform:none}
.js-ready .reveal{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease}
.js-ready .reveal.is-visible{opacity:1;transform:none}

@media(max-width:920px){
  .nav-wrap{height:74px}.nav-toggle{display:inline-flex;width:46px;height:46px;border:1px solid rgba(255,255,255,.2);border-radius:14px;background:rgba(255,255,255,.07);align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer}.nav-toggle span{width:20px;height:2px;border-radius:2px;background:#fff;transition:transform .2s ease,opacity .2s ease}.nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}.nav-toggle.active span:nth-child(2){opacity:0}.nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav{position:fixed;left:0;right:0;top:74px;display:grid;gap:0;padding:14px 20px 26px;background:rgba(8,37,31,.98);border-top:1px solid rgba(255,255,255,.08);backdrop-filter:blur(18px);transform:translateY(-130%);transition:transform .25s ease}.nav.open{transform:none}.nav a{padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.08);font-size:1rem}.nav a:after{display:none}
  .intro-grid,.festival-grid,.monarch-grid{grid-template-columns:1fr}.intro-grid{gap:48px}.festival-copy{order:-1}.festival-visual{min-height:500px}.monarch-card{min-height:520px}.departures-card{grid-template-columns:auto 1fr}.mini-logo{grid-column:1/-1}.footer-wrap{align-items:flex-start}
}

@media(max-width:650px){
  .container,.nav-wrap,.hero-content{width:min(100% - 28px,1180px)}.section,.festival{padding:80px 0}.identity-text strong{font-size:.92rem}.identity-symbol{width:35px;height:35px}
  .hero{min-height:790px}.hero-content{padding:120px 0 250px}.hero h1{font-size:clamp(3.2rem,17vw,5.2rem)}.hero-actions{flex-direction:column;max-width:360px}.hero-info{bottom:20px;width:calc(100% - 28px);grid-template-columns:1fr}.hero-info article{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 15px}.hero-info article+article{border-left:0;border-top:1px solid rgba(255,255,255,.1)}.hero-info strong{text-align:right}
  .intro h2,.festival h2,.monarch h2,.departures h2,.closing h2{font-size:clamp(2.7rem,13vw,4rem)}.photo-card{min-height:450px}.festival-visual{min-height:430px}.festival-frame{right:10px}.festival-badge{right:0;bottom:22px;width:155px}.monarch-card{min-height:440px}.route-line{flex-wrap:wrap}.departures-card{grid-template-columns:1fr;padding:32px 24px}.calendar-mark{width:120px;border-radius:26px}.calendar-mark strong{font-size:3.8rem}.mini-logo{grid-column:auto}.closing{min-height:590px}.closing-content{padding:80px 0}.footer-wrap{flex-direction:column}.footer p{text-align:left}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js-ready .reveal{opacity:1;transform:none;transition:none}.btn,.nav,.nav-toggle span{transition:none}}
