/* ==========================================================================
   CERROVALLE.COM — Diseño elegante "ventanas redondeadas"
   Verde selva + arena + dorado · animaciones suaves · glassmorphism
   ========================================================================== */
:root{
  --selva:#0b3d2e; --selva2:#14532d; --hoja:#22c55e; --lima:#a3e635;
  --arena:#faf6ee; --crema:#fffdf7; --dorado:#d4a94e; --tinta:#1c2b24;
  --muted:#5d6f65; --white:#ffffff;
  --r-lg:32px; --r-md:24px; --r-sm:18px;
  --shadow:0 24px 60px -20px rgba(11,61,46,.35);
  --shadow-soft:0 12px 32px -12px rgba(11,61,46,.22);
  --ease:cubic-bezier(.22,.9,.28,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Outfit',system-ui,sans-serif; color:var(--tinta);
  background:
    radial-gradient(900px 500px at 10% -5%, #dcfce7 0%, transparent 60%),
    radial-gradient(800px 500px at 95% 10%, #fef3c7 0%, transparent 55%),
    var(--arena);
  line-height:1.65; overflow-x:hidden;
}
h1,h2,h3,.serif{font-family:'Fraunces',serif; line-height:1.12; letter-spacing:-.01em}
img{max-width:100%; display:block}
a{color:inherit}
.wrap{max-width:100%; margin:0 auto; padding:0 44px}

/* Transición entre ventanas */
.page-transition{position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--selva),var(--selva2)); opacity:0; pointer-events:none; transition:opacity .35s var(--ease)}
.page-transition.show{opacity:1; pointer-events:all}
.pt-leaf{font-size:64px; animation:spinLeaf 1.1s var(--ease) infinite}
@keyframes spinLeaf{0%{transform:scale(.8) rotate(-12deg)}50%{transform:scale(1.1) rotate(10deg)}100%{transform:scale(.8) rotate(-12deg)}}
#app{animation:pageIn .7s var(--ease)}
@keyframes pageIn{from{opacity:0; transform:translateY(18px) scale(.995)} to{opacity:1; transform:none}}

/* Orbes decorativos */
.bg-orbs{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
.bg-orbs span{position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; animation:float 12s ease-in-out infinite}
.bg-orbs span:nth-child(1){width:420px;height:420px; background:#bbf7d0; top:-120px; left:-120px}
.bg-orbs span:nth-child(2){width:360px;height:360px; background:#fde68a; top:20%; right:-140px; animation-delay:-4s}
.bg-orbs span:nth-child(3){width:300px;height:300px; background:#a7f3d0; bottom:-100px; left:30%; animation-delay:-8s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-30px)}}

/* NAV */
.nav{position:sticky; top:14px; z-index:100; margin:14px auto 0; max-width:100%; padding:0 44px}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:rgba(255,253,247,.82); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(11,61,46,.08); border-radius:999px; padding:10px 10px 10px 18px;
  box-shadow:var(--shadow-soft); transition:box-shadow .3s var(--ease)}
.nav.scrolled .nav-inner{box-shadow:var(--shadow)}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand-badge{width:46px;height:46px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--selva),var(--hoja)); box-shadow:0 8px 20px -6px rgba(11,61,46,.5); font-size:20px}
.brand-text{display:flex; flex-direction:column; line-height:1}
.brand-text strong{font-family:'Fraunces',serif; font-size:22px; color:var(--selva)}
.brand-text small{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.menu{display:flex; align-items:center; gap:6px}
.menu a{text-decoration:none; font-weight:500; padding:10px 16px; border-radius:999px; transition:.25s var(--ease); color:var(--tinta)}
.menu a:hover{background:#ecfdf5; transform:translateY(-1px)}
.menu a.active{background:var(--selva); color:#fff}
.menu .btn-nav{background:linear-gradient(135deg,var(--dorado),#b8860b); color:#fff !important; box-shadow:0 10px 22px -8px rgba(212,169,78,.7)}
.burger{display:none; border:0; background:var(--selva); width:46px;height:46px; border-radius:50%; cursor:pointer}
.burger span{display:block; width:20px;height:2px; background:#fff; margin:4px auto; border-radius:2px; transition:.3s}

/* HERO — ventana principal redondeada */
.hero{margin:22px auto 0; max-width:100%; padding:0 44px}
.hero-window{position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:78vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  box-shadow:var(--shadow); isolation:isolate}
.hero-window .hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.08); animation:heroZoom 14s ease-in-out infinite alternate}
@keyframes heroZoom{from{transform:scale(1.08)} to{transform:scale(1.18)}}
.hero-window::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,30,22,.42), rgba(6,30,22,.62))}
.hero-glass{position:relative; z-index:2; margin:26px auto 0; padding:20px 24px 8px;
  background:transparent; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  max-width:880px; text-align:center;
  animation:riseIn .9s var(--ease) both .15s}
@keyframes riseIn{from{opacity:0; transform:translateY(34px)} to{opacity:1; transform:none}}
.pill{display:inline-flex; align-items:center; gap:8px; background:transparent; color:#fff;
  border:1.5px solid rgba(255,255,255,.85); text-shadow:0 1px 8px rgba(0,0,0,.6);
  font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:8px 18px; border-radius:999px; margin-bottom:16px}
.hero-glass h1{font-family:'Fraunces',serif; font-weight:700; font-size:clamp(34px,5.2vw,66px);
  color:#fff; letter-spacing:.01em; line-height:1.08; margin-bottom:14px;
  text-shadow:0 3px 24px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.7)}
.hero-glass h1 em{font-style:italic; color:#fde68a}
.hero-glass p{color:#f2f7f3; font-size:clamp(16px,2vw,20px); font-weight:400;
  text-shadow:0 2px 12px rgba(0,0,0,.7); max-width:720px; margin:0 auto 28px}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; justify-content:center}
/* Botones de la portada: rellenos de color + misma animación de brillo */
.hero-cta .btn{animation:btnGlow 2.8s ease-in-out infinite; border:0}
.hero-cta .btn-primary{background:linear-gradient(135deg,#e3a82b,#a86e04); color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.35)}
.hero-cta .btn-ghost{background:linear-gradient(135deg,#0b3d2e,#16a34a); color:#fff; border:0}
.hero-cta .btn:hover{filter:brightness(1.12)}
@keyframes btnGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.5), 0 14px 30px -10px rgba(0,0,0,.55); transform:scale(1)}
  50%{box-shadow:0 0 0 14px rgba(255,255,255,0), 0 18px 38px -10px rgba(0,0,0,.6); transform:scale(1.04)}
}
.btn{display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:600;
  padding:14px 26px; border-radius:999px; border:0; cursor:pointer; transition:.28s var(--ease); font-size:15.5px}
.btn-primary{background:linear-gradient(135deg,var(--selva),#16a34a); color:#fff; box-shadow:0 14px 30px -10px rgba(11,61,46,.55)}
.btn-primary:hover{transform:translateY(-3px) scale(1.02)}
.btn-ghost{background:#fff; color:var(--selva); border:1.5px solid rgba(11,61,46,.18)}
.btn-ghost:hover{transform:translateY(-3px); border-color:var(--selva)}
.hero-badges{position:relative; z-index:2; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:18px 22px 28px}
.hbadge{background:rgba(6,30,22,.55); color:#fff; backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.25);
  padding:9px 16px; border-radius:999px; font-size:13.5px; font-weight:500}

/* Secciones en ventanas redondeadas */
.section{max-width:100%; margin:26px auto 0; padding:0 44px}
.window{background:var(--crema); border-radius:var(--r-lg); padding:clamp(26px,4vw,54px);
  box-shadow:var(--shadow-soft); border:1px solid rgba(11,61,46,.07); position:relative; overflow:hidden}
.window.tint{background:linear-gradient(135deg,#0b3d2e,#14532d); color:#fff; border:0}
.window.tint p{color:#d1fae5}
.kicker{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:#15803d; background:#dcfce7;
  padding:7px 15px; border-radius:999px; margin-bottom:14px}
.window.tint .kicker{background:rgba(255,255,255,.14); color:#fde68a}
.window h2{font-size:clamp(26px,3.4vw,42px); color:var(--selva); margin-bottom:12px}
.window.tint h2{color:#fff}
.window .lead{font-size:17.5px; color:var(--muted); max-width:720px; margin-bottom:26px}
.window.tint .lead{color:#d1fae5}

/* Tarjetas redondeadas */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.card{background:#fff; border-radius:var(--r-md); padding:26px; border:1px solid rgba(11,61,46,.08);
  box-shadow:0 10px 26px -14px rgba(11,61,46,.25); transition:.35s var(--ease); position:relative; overflow:hidden}
.card::before{content:""; position:absolute; inset:0 0 auto 0; height:5px;
  background:linear-gradient(90deg,var(--hoja),var(--dorado)); opacity:0; transition:.35s}
.card:hover{transform:translateY(-8px); box-shadow:var(--shadow)}
.card:hover::before{opacity:1}
.card .ico{width:58px;height:58px; border-radius:20px; display:grid; place-items:center; font-size:24px; color:#fff;
  background:linear-gradient(135deg,var(--selva),var(--hoja)); margin-bottom:14px}
.card h3{font-size:20px; color:var(--selva); margin-bottom:8px}
.card p{font-size:15px; color:var(--muted)}

/* Galería */
.g-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px}
.g-item{position:relative; border-radius:var(--r-md); overflow:hidden; aspect-ratio:4/4.6; cursor:pointer;
  box-shadow:var(--shadow-soft); transform:translateZ(0); transition:.4s var(--ease); background:#e7efe9}
.g-item img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.g-item:hover{transform:translateY(-6px) scale(1.01); box-shadow:var(--shadow)}
.g-item:hover img{transform:scale(1.1)}
.g-cap{position:absolute; inset:auto 12px 12px 12px; padding:14px 16px; border-radius:var(--r-sm);
  background:rgba(255,253,247,.9); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.6)}
.g-cap strong{display:block; color:var(--selva); font-size:15.5px}
.g-cap small{color:var(--muted); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase}
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px}
.filters a{text-decoration:none; padding:10px 20px; border-radius:999px; font-weight:600; font-size:14px;
  background:#fff; border:1.5px solid rgba(11,61,46,.15); transition:.25s}
.filters a:hover{border-color:var(--selva); transform:translateY(-2px)}
.filters a.active{background:var(--selva); color:#fff; border-color:var(--selva)}

/* Lightbox */
.lightbox{position:fixed; inset:0; z-index:1500; background:rgba(6,25,18,.92); backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center; flex-direction:column; padding:24px}
.lightbox.open{display:flex; animation:fadeIn .3s var(--ease)}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
.lightbox img{max-width:min(920px,94vw); max-height:76vh; border-radius:var(--r-md); box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lb-cap{color:#fff; margin-top:12px; font-size:16px}
.lb-x{position:absolute; top:20px; right:26px; font-size:40px; color:#fff; cursor:pointer; line-height:1}
.lb-nav{position:absolute; top:50%; font-size:30px; color:#fff; cursor:pointer; background:rgba(255,255,255,.14);
  width:56px;height:56px; border-radius:50%; display:grid; place-items:center; user-select:none}
.lb-prev{left:18px} .lb-next{right:18px}

/* Historia */
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:30px; align-items:center}
.round-img{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); position:relative}
.round-img img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/4.4; transition:transform .8s var(--ease)}
.round-img:hover img{transform:scale(1.06)}
.timeline{display:grid; gap:14px; margin-top:20px}
.t-item{display:flex; gap:14px; background:#fff; border-radius:var(--r-sm); padding:16px 18px;
  border:1px solid rgba(11,61,46,.08); transition:.3s var(--ease)}
.t-item:hover{transform:translateX(6px)}
.t-year{background:var(--selva); color:#fff; font-weight:700; border-radius:14px; padding:6px 14px; height:fit-content; white-space:nowrap}

/* Contacto */
.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:22px}
.info-list{display:grid; gap:12px; margin:18px 0}
.info{display:flex; gap:14px; align-items:flex-start; background:#fff; border-radius:var(--r-sm); padding:16px 18px; border:1px solid rgba(11,61,46,.08)}
.info i{width:44px;height:44px; border-radius:14px; display:grid; place-items:center; color:#fff; flex:none;
  background:linear-gradient(135deg,var(--selva),var(--hoja))}
.map-round{border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-soft); border:1px solid rgba(11,61,46,.1)}
.map-round iframe{width:100%; height:270px; border:0; display:block}
.form-card{background:#fff; border-radius:var(--r-md); padding:28px; border:1px solid rgba(11,61,46,.08); box-shadow:var(--shadow-soft)}
.field{margin-bottom:14px}
.field label{display:block; font-weight:600; font-size:14px; margin-bottom:6px; color:var(--selva)}
.field input,.field textarea,.field select{width:100%; padding:13px 16px; border-radius:14px; font:inherit; font-size:15px;
  border:1.5px solid rgba(11,61,46,.16); background:#fbfdfb; transition:.25s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--hoja); background:#fff; box-shadow:0 0 0 4px rgba(34,197,94,.15)}
.alert{border-radius:14px; padding:14px 18px; margin-bottom:14px; font-weight:500}
.alert.ok{background:#dcfce7; color:#14532d; border:1px solid #86efac}
.alert.err{background:#fee2e2; color:#7f1d1d; border:1px solid #fca5a5}
.hp{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}

/* Footer */
.footer{max-width:100%; margin:26px auto 26px; padding:0 44px}
.footer-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:18px}
.f-card{background:linear-gradient(135deg,#0b3d2e,#14532d); color:#e7f5ec; border-radius:var(--r-md); padding:28px}
.f-card h4{color:#fde68a; margin-bottom:12px; font-size:17px}
.f-card a{display:block; color:#e7f5ec; text-decoration:none; padding:5px 0; opacity:.9}
.f-card a:hover{opacity:1; color:#fff; transform:translateX(4px)}
.f-card p{font-size:14.5px; opacity:.92; margin-bottom:8px}
.social{display:flex; gap:10px; margin-top:12px}
.social a{width:42px;height:42px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.14); padding:0}
.social a:hover{background:var(--dorado)}
.f-bottom{text-align:center; color:var(--muted); font-size:13.5px; padding:18px 0 6px}
.wa-float{position:fixed; right:22px; bottom:22px; z-index:900; width:60px;height:60px; border-radius:50%;
  display:grid; place-items:center; color:#fff; font-size:30px; text-decoration:none;
  background:linear-gradient(135deg,#16a34a,#22c55e); box-shadow:0 16px 34px -10px rgba(22,163,74,.7); transition:.3s var(--ease)}
.wa-float:hover{transform:scale(1.1) rotate(6deg)}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(30px) scale(.99); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.in{opacity:1; transform:none}

/* Admin */
.admin-wrap{max-width:1280px; margin:26px auto; padding:0 44px}
.admin-card{background:var(--crema); border-radius:var(--r-lg); padding:30px; box-shadow:var(--shadow-soft); border:1px solid rgba(11,61,46,.08)}
table.admin{width:100%; border-collapse:separate; border-spacing:0 10px; font-size:14.5px}
table.admin th{text-align:left; font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); padding:0 12px}
table.admin td{background:#fff; padding:12px; border-top:1px solid rgba(11,61,46,.07); border-bottom:1px solid rgba(11,61,46,.07); vertical-align:middle}
table.admin tr td:first-child{border-left:1px solid rgba(11,61,46,.07); border-radius:14px 0 0 14px}
table.admin tr td:last-child{border-right:1px solid rgba(11,61,46,.07); border-radius:0 14px 14px 0}
.thumb{width:74px; height:56px; object-fit:cover; border-radius:10px}
.btn-sm{padding:8px 14px; font-size:13.5px; border-radius:999px}
.btn-danger{background:#dc2626; color:#fff}
.topbar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px}
.topbar a{text-decoration:none; padding:10px 18px; border-radius:999px; background:#fff; border:1.5px solid rgba(11,61,46,.14); font-weight:600; font-size:14px}
.topbar a.active,.topbar a:hover{background:var(--selva); color:#fff}

@media(max-width:920px){
  .split,.contact-grid,.footer-grid{grid-template-columns:1fr}
  .menu{position:fixed; inset:76px 16px auto 16px; background:var(--crema); border-radius:var(--r-md);
    flex-direction:column; padding:14px; box-shadow:var(--shadow); display:none; border:1px solid rgba(11,61,46,.1)}
  .menu.open{display:flex}
  .burger{display:block}
  .hero-window{min-height:82vh}
}