/* Base styles */
:root {
  --bg:#121314; /* dark gray replacing #1f1612 */
  --bg-alt:#1e1f20; /* dark gray alt replacing #2e221c */
  --accent:#ffb347;
  --accent-alt:#ff8c42;
  --text:#f5f2ef;
  --muted:#c9b8ae;
  --radius:14px;
  --transition:.35s cubic-bezier(.4,.0,.2,1);
}
* {box-sizing:border-box; margin:0; padding:0;}
body {font-family:'Montserrat', Arial, sans-serif; background:var(--bg); color:var(--text); line-height:1.5;}
main, section {scroll-margin-top:110px;}
img {display:block; max-width:100%; height:auto;}
a {color:var(--accent); text-decoration:none;}
a:hover {color:var(--accent-alt);} 

/* Layout helpers */
.section {padding:4rem 1.25rem; position:relative;}
.section:nth-of-type(odd) {background:var(--bg-alt);} 
.inner {max-width:1200px; margin:0 auto;}

/* Header */
.site-header {position:sticky; top:0; z-index:1000; backdrop-filter:blur(8px); background:rgba(18,19,20,.85); display:flex; align-items:center; justify-content:space-between; padding:.75rem 1.25rem; border-bottom:1px solid #2a2c2e;}
.site-header::before {content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg,rgba(255,179,71,.15),rgba(255,140,66,.07),transparent 70%); opacity:.4; mix-blend-mode:overlay; animation:headerGlow 6s linear infinite;}
@keyframes headerGlow {0%{filter:hue-rotate(0deg);}50%{filter:hue-rotate(45deg);}100%{filter:hue-rotate(0deg);}}
.logo {display:inline-flex; align-items:center; gap:.5rem; padding:.15rem .4rem;}
.logo img {height:114px; width:auto; display:block; filter:drop-shadow(0 6px 16px rgba(0,0,0,.55)); transition:transform .4s ease, filter .4s ease; will-change:transform; transform-origin:left center;}
.logo:hover img {transform:scale(1.03); filter:drop-shadow(0 10px 24px rgba(0,0,0,.65));}
@media (max-width:840px){
  .logo img {height:90px;}
}
@media (max-width:520px){
  .logo img {height:68px;}
}
.main-nav ul {list-style:none; display:flex; gap:1rem;}
.main-nav a {padding:.5rem .75rem; border-radius:var(--radius); font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.5px;}
.main-nav a:hover, .main-nav a:focus {background:var(--accent); color:#2d1f17;}
.main-nav a.active {background:linear-gradient(90deg,var(--accent),var(--accent-alt)); color:#2d1f17; box-shadow:0 0 0 1px rgba(255,179,71,.4),0 4px 14px -4px rgba(0,0,0,.6);} 
.site-header.shrink {padding:.35rem 1.1rem; backdrop-filter:blur(12px);}
.site-header.shrink .logo img {transform:scale(.62); filter:drop-shadow(0 4px 12px rgba(0,0,0,.55)); /* scale instead of height change to prevent layout jump */}
/* Removed shrink height adjustments in media queries to prevent layout shifts */
.nav-toggle {display:none; background:none; border:1px solid var(--accent); color:var(--accent); padding:.4rem .6rem; border-radius:8px; font-size:1.1rem;}

@media (max-width:840px){
  .main-nav ul {flex-direction:column; position:absolute; top:100%; right:0; background:rgba(18,19,20,.95); padding:1rem; min-width:220px; border:1px solid #2a2c2e; border-radius:var(--radius); display:none;}
  .main-nav ul.open {display:flex;}
  .nav-toggle {display:inline-block;}
}

/* Masthead slider */
.masthead {padding:0;}
.parallax-scene {position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;}
.plx {position:absolute; inset:0; background-repeat:no-repeat; background-size:cover; mix-blend-mode:screen; opacity:.35;}
.layer-back {background-image:radial-gradient(circle at 20% 30%, rgba(255,179,71,.25), transparent 60%), radial-gradient(circle at 80% 70%, rgba(255,140,66,.2), transparent 65%); filter:blur(6px);} 
.layer-mid {background-image:radial-gradient(circle at 40% 60%, rgba(255,179,71,.35), transparent 55%), radial-gradient(circle at 75% 25%, rgba(255,140,66,.3), transparent 60%);} 
.layer-front {background-image:radial-gradient(circle at 30% 40%, rgba(255,255,255,.12), transparent 50%), radial-gradient(circle at 65% 55%, rgba(255,179,71,.4), transparent 55%);} 
.masthead .slider {position:relative; z-index:2;}
.slider {position:relative; overflow:hidden;}
.slider .slide {min-height:60vh; display:none; position:relative;}
.slider .slide.active {display:block; animation:fade .8s ease-in-out;}
.slider img {width:100%; height:60vh; object-fit:cover; object-position:center center; filter:brightness(.75);}
.slider .slide img {will-change:transform;} 
.caption {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:clamp(1.5rem,4vw,3rem); font-weight:700; text-align:center; max-width:900px; line-height:1.1;}
.prev,.next {position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.4); border:none; color:var(--text); font-size:2.5rem; padding:.2rem .6rem; cursor:pointer; border-radius:10px;}
.prev {left:1rem;} .next {right:1rem;}
.prev:hover,.next:hover {background:rgba(0,0,0,.65);} 
.dots {position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); display:flex; gap:.5rem;}
.dots button {width:12px; height:12px; border-radius:50%; border:none; background:#7a665a; cursor:pointer;}
.dots button.active {background:var(--accent);}
@keyframes fade {from{opacity:0;} to {opacity:1;}}

/* Activities cards */
.activities h2, .whatsapp h2, .social h2, .gallery h2 {font-size:2rem; margin-bottom:2rem; text-align:center;}
.cards {display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.card {background:#1b1c1d; padding:1.5rem; border-radius:var(--radius); border:1px solid #2a2c2e; position:relative; overflow:hidden;}
.card, .link-card {transform-style:preserve-3d; transition:transform .4s cubic-bezier(.16,.68,.5,1.2);} 
.card::after, .link-card::after {content:""; position:absolute; inset:0; padding:2px; border-radius:inherit; background:linear-gradient(140deg,rgba(255,179,71,.6),rgba(255,140,66,.4),rgba(255,179,71,.6)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.0; transition:opacity .5s ease, filter .5s ease; animation:borderFlow 9s linear infinite;}
@keyframes borderFlow {0%{filter:hue-rotate(0deg);}50%{filter:hue-rotate(40deg);}100%{filter:hue-rotate(0deg);}}
.card:hover::after, .link-card:hover::after {opacity:.9;}
.card::before {content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,179,71,.15),rgba(255,140,66,.15)); opacity:0; transition:var(--transition);}
.card:hover::before {opacity:1;}
.card h3 {margin-bottom:.75rem; font-size:1.25rem;}
.card p {font-size:.9rem; color:var(--muted);} 

/* WhatsApp / Social sections */
.btn {display:inline-block; background:var(--accent); color:#2d1f17; padding:.9rem 1.4rem; font-weight:600; border-radius:var(--radius); box-shadow:0 4px 12px rgba(0,0,0,.35); transition:var(--transition);}
.btn:hover {background:var(--accent-alt); transform:translateY(-2px);} 
.btn {position:relative; overflow:hidden;}
.btn::after {content:""; position:absolute; top:0; left:-120%; width:50%; height:100%; background:linear-gradient(115deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-20deg); animation:shimmer 3.8s ease-in-out infinite;}
@keyframes shimmer {0%{left:-120%;}55%{left:140%;}100%{left:140%;}}
.whatsapp, .social {text-align:center;}
.social-links {display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; margin-top:1.25rem;}
.social-btn {background:#1b1c1d; padding:.75rem 1.1rem; border-radius:var(--radius); font-size:.8rem; font-weight:600; border:1px solid #2a2c2e; text-transform:uppercase; letter-spacing:.5px;}
.social-btn:hover {background:var(--accent); color:#2d1f17;}

/* Gallery */
.grid-gallery {display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
.grid-gallery figure {margin:0; position:relative; overflow:hidden; border-radius:12px; border:1px solid #2a2c2e;}
.grid-gallery img {transition:transform .6s ease, filter .6s ease;}
.grid-gallery figure:hover img {transform:scale(1.07); filter:brightness(.85);} 

/* Links Comunidad */
.links-intro {text-align:center; max-width:760px; margin:0 auto 2.5rem; color:var(--muted); font-size:.95rem;}
.link-grid {display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.link-card {display:flex; flex-direction:column; gap:.6rem; padding:1.4rem 1.1rem 1.3rem; background:linear-gradient(145deg,#18191a,#141516); border:1px solid #2a2c2e; border-radius:18px; position:relative; text-decoration:none; color:var(--text); overflow:hidden; isolation:isolate;}
.link-card::before {content:""; position:absolute; inset:0; background:radial-gradient(circle at 25% 15%,rgba(255,179,71,.18),transparent 60%); opacity:0; transition:var(--transition);}
.link-card:hover::before {opacity:1;}
.link-card .icon {font-size:1.6rem; line-height:1;}
.link-card h3 {font-size:1.05rem; font-weight:600; letter-spacing:.3px;}
.link-card p {font-size:.75rem; color:var(--muted); line-height:1.3;}
.link-card:hover {transform:translateY(-4px); box-shadow:0 10px 28px -6px rgba(0,0,0,.5), 0 0 0 1px rgba(255,179,71,.25); border-color:var(--accent);}
.link-card:focus-visible {outline:2px solid var(--accent); outline-offset:4px;}

/* Ubicacion */
.ubicacion {text-align:center;}
.ubicacion p {max-width:720px; margin:0 auto 1.5rem; color:var(--muted);}
.map-embed {margin:2.5rem auto 0; max-width:960px; position:relative; border:1px solid #2a2c2e; border-radius:18px; overflow:hidden; background:#111213; box-shadow:0 8px 28px -6px rgba(0,0,0,.55);} 
.map-embed iframe {width:100%; height:55vh; min-height:340px; display:block; filter:grayscale(.1) brightness(.95);}
.map-embed iframe:hover {filter:grayscale(0) brightness(1);}
.map-embed::before {content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 15% 10%,rgba(255,179,71,.15),transparent 60%); mix-blend-mode:overlay;}
@media (max-width:640px){.map-embed iframe {height:360px;}}

/* Footer */
.site-footer {background:#111213; padding:3rem 1.25rem; border-top:1px solid #2a2c2e;}
.footer-brand {text-align:center;}
.footer-brand img {max-width:160px; margin:0 auto 1rem; border-radius:12px; border:1px solid #2a2c2e;}
.footer-brand img {position:relative;}
.footer-brand img::after {content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at 20% 15%, rgba(255,179,71,.45), transparent 60%); opacity:0; animation:logoGlow 6s linear infinite;}
@keyframes logoGlow {0%,85%{opacity:0;}40%{opacity:.9;}60%{opacity:.4;}}
.footer-brand p {font-size:.75rem; color:var(--muted);} 
/* Contact form */
.contact-form-wrapper {margin:3rem auto 0; max-width:760px; background:#141516; padding:2rem 1.5rem 2.4rem; border:1px solid #2a2c2e; border-radius:22px; position:relative; overflow:hidden;}
.site-footer .contact-form-wrapper {margin-bottom:2.8rem;}
.contact-form-wrapper::before {content:""; position:absolute; inset:0; background:radial-gradient(circle at 20% 15%,rgba(255,179,71,.18),transparent 60%); opacity:.5; pointer-events:none;}
.contact-form-wrapper h2 {text-align:center; margin:0 0 1.6rem; font-size:1.6rem; letter-spacing:.5px;}
#wa-contact {display:grid; gap:1.2rem;}
.form-row {display:flex; flex-direction:column; gap:.4rem;}
.form-row.inline {flex-direction:column;}
.form-row label {font-size:.7rem; text-transform:uppercase; letter-spacing:.7px; font-weight:600; color:var(--muted);} 
.form-row input, .form-row textarea, .form-row select {background:#1b1c1d; border:1px solid #2a2c2e; color:var(--text); font:inherit; padding:.75rem .85rem; border-radius:12px; resize:vertical;}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus {outline:2px solid var(--accent); outline-offset:2px;}
.contact-form-wrapper .btn {width:100%; margin-top:.5rem;}
.contact-hint {margin-top:1rem; font-size:.65rem; text-align:center; color:var(--muted); letter-spacing:.5px;}
@media (max-width:560px){
  .contact-form-wrapper {padding:1.6rem 1.1rem 2rem;}
}

/* Smooth scroll behavior */
html {scroll-behavior:smooth;}
/* Skip link */
.skip-link {position:absolute; left:0; top:-60px; background:var(--accent); color:#2d1f17; padding:.65rem 1rem; font-weight:600; border-radius:0 0 10px 10px; transition:top .3s ease; z-index:2000; box-shadow:0 4px 12px rgba(0,0,0,.35);} 
.skip-link:focus {top:0;}
/* Lightbox navigation buttons */
.lightbox-prev,.lightbox-next {position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.55); color:#fff; border:1px solid rgba(255,255,255,.25); width:54px; height:54px; border-radius:50%; font-size:2rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.3s ease;}
.lightbox-prev {left:-70px;} .lightbox-next {right:-70px;}
@media (max-width:900px){.lightbox-prev {left:10px;} .lightbox-next {right:10px;}}
.lightbox-prev:hover,.lightbox-next:hover {background:rgba(255,179,71,.25); border-color:var(--accent); color:var(--accent);} 

/* Scroll progress bar */
.scroll-progress {position:fixed; top:0; left:0; right:0; height:4px; z-index:1200; background:rgba(255,255,255,.04);}
.scroll-progress__bar {display:block; height:100%; width:0; background:linear-gradient(90deg,var(--accent),var(--accent-alt)); box-shadow:0 0 12px -2px rgba(255,140,66,.6); transition:width .15s ease-out;}

/* Reveal animation */
.reveal {opacity:0; transform:translateY(40px) scale(.96); transition:opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);}
.reveal.visible {opacity:1; transform:translateY(0) scale(1);} 

/* Accessibility focus */
:focus-visible {outline:2px solid var(--accent); outline-offset:3px;}

/* Utility */
.caption {text-shadow:0 4px 18px rgba(0,0,0,.55);} 

/* Countdown */
.countdown {position:absolute; left:50%; bottom:6%; transform:translateX(-50%); text-align:center; background:rgba(0,0,0,.35); backdrop-filter:blur(6px); padding:1rem 1.4rem 1.2rem; border:1px solid rgba(255,179,71,.35); border-radius:22px; width:min(90%,900px); box-shadow:0 8px 32px -8px rgba(0,0,0,.55);}
.countdown h3 {font-size:clamp(1rem,2.2vw,1.4rem); margin-bottom:.8rem; font-weight:600; letter-spacing:.5px;}
.countdown-grid {display:flex; justify-content:center; gap:1.1rem; flex-wrap:wrap;}
.countdown .time {display:flex; flex-direction:column; align-items:center; min-width:72px;}
.countdown .num {position:relative; font-size:clamp(1.3rem,3.5vw,2.6rem); font-weight:700; line-height:1; background:linear-gradient(180deg,#fff,#ffdeb4); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)); padding:1.1rem 1.2rem;}
.countdown .num::before {content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 30% 25%,rgba(255,179,71,.35),rgba(255,140,66,.15) 60%,transparent 70%); box-shadow:0 0 0 1px rgba(255,179,71,.35),0 10px 28px -8px rgba(0,0,0,.55);}
.countdown .num::after {content:""; position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg, var(--accent), var(--accent-alt), var(--accent)); opacity:.35; animation:spinRing 12s linear infinite; mix-blend-mode:overlay;}
@keyframes spinRing {to {transform:rotate(360deg);}}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  * {animation-duration:.01ms !important; animation-iteration-count:1 !important; transition:none !important;}
  .slider .slide.active {animation:none;}
  .site-header::before, .countdown .num::after {animation:none;}
}
.countdown .label {font-size:.65rem; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-top:.35rem;}
.countdown-note {margin-top:.75rem; font-size:.7rem; color:var(--muted); letter-spacing:.4px;}
@media (max-width:560px){
  .countdown {bottom:4%; padding:.8rem 1rem 1rem;}
  .countdown .time {min-width:60px;}
}

/* Smaller devices */
@media (max-width:520px){
  .activities h2, .whatsapp h2, .social h2, .gallery h2 {font-size:1.6rem;}
  .caption {font-size:2rem;}
}

/* Lightbox */
.lightbox {position:fixed; inset:0; background:rgba(0,0,0,.85); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:2rem 1.2rem; z-index:1500; animation:lbFade .4s ease;}
@keyframes lbFade {from{opacity:0;} to {opacity:1;}}
.lightbox[hidden]{display:none;}
.lightbox-content {max-width:1100px; width:100%; position:relative;}
.lightbox-content img {width:100%; height:auto; border-radius:18px; box-shadow:0 12px 38px -10px rgba(0,0,0,.7); animation:imgIn .5s cubic-bezier(.16,.68,.5,1.2);}
@keyframes imgIn {from{transform:scale(.92) translateY(12px); opacity:0;} to {transform:scale(1) translateY(0); opacity:1;}}
.lightbox-caption {margin-top:1rem; text-align:center; font-size:.85rem; color:var(--muted); letter-spacing:.4px;}
.lightbox-close {position:absolute; top:1rem; right:1rem; background:rgba(0,0,0,.55); color:#fff; border:1px solid rgba(255,255,255,.2); width:42px; height:42px; border-radius:50%; font-size:1.4rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.3s ease;}
.lightbox-close:hover {background:rgba(255,179,71,.25); border-color:var(--accent); color:var(--accent);}
.grid-gallery figure {cursor:pointer;}