/* Página de naturaleza (actividades) — Hotel Jasayma */
:root{--deep:#0c241b;--deep-2:#123326;--mist:#e8efe9}

/* ---------- hero ---------- */
.nat-hero{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 85% 10%,#1d5a43 0%,var(--deep) 55%,#081a13 100%);color:#fff;padding:clamp(56px,9vw,110px) 0 clamp(40px,6vw,70px)}
.nat-grain{position:absolute;inset:0;opacity:.18;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.nat-hero-grid{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.nat-hero .kicker{color:var(--sun)}
.nat-hero h1{color:#fff;font-size:clamp(2.5rem,6.2vw,5rem);line-height:1.02;margin-bottom:.35em}
.nat-hero h1 em{font-style:italic;color:#9fe3c8}
.nat-hero .lead{color:#d6e6dd;max-width:520px}
.nat-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.nat-collage{position:relative;height:clamp(380px,46vw,560px)}
.nat-collage figure{position:absolute;margin:0;border-radius:22px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.45);border:4px solid rgba(255,255,255,.08);will-change:transform;transform:translateY(var(--dy,0px)) rotate(var(--r,0deg))}
.nat-collage img{width:100%;height:100%;object-fit:cover}
.nat-collage .c1{width:48%;height:78%;left:0;top:8%;--r:-3deg}
.nat-collage .c2{width:42%;height:62%;right:0;top:0;--r:3deg}
.nat-collage .c3{width:40%;height:46%;right:10%;bottom:0;--r:-1.5deg}
.nat-stats{list-style:none;padding:0;margin:clamp(40px,6vw,70px) 0 0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.16)}
.nat-stats li{padding:22px 18px 0 0;display:flex;flex-direction:column;gap:4px}
.nat-stats li+li{padding-left:22px;border-left:1px solid rgba(255,255,255,.12)}
.nat-stats strong{font:400 clamp(2rem,4vw,3rem)/1 var(--serif);color:#fff}
.nat-stats span{color:#b9cfc3;font-size:.9rem}
.nat-hero + .crumbs{margin-top:14px}
@media (max-width:900px){
  .nat-hero-grid{grid-template-columns:1fr}
  .nat-collage{height:340px;max-width:520px;width:100%;margin:0 auto}
  .nat-stats{grid-template-columns:1fr 1fr;row-gap:20px}
  .nat-stats li:nth-child(3){padding-left:0;border-left:0}
}

/* ---------- manifesto ---------- */
.nat-manifesto{padding:clamp(50px,8vw,100px) 0;background:var(--sand);text-align:center}
.nat-manifesto p{font:400 clamp(1.5rem,3.2vw,2.3rem)/1.3 var(--serif);color:var(--jungle-d);margin:0}
.nat-manifesto p span{display:block;margin-top:.6em;color:var(--sea);font-style:italic}

/* ---------- bento ---------- */
.nat-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:260px;gap:16px}
.nb{position:relative;margin:0;border-radius:20px;overflow:hidden;background:var(--jungle);isolation:isolate}
.nb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1);z-index:-2}
.nb::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,26,19,0) 30%,rgba(8,26,19,.88) 100%)}
.nb:hover img{transform:scale(1.06)}
.nb-txt{position:absolute;left:0;right:0;bottom:0;padding:22px;color:#fff}
.nb-txt h3{color:#fff;font:400 1.6rem/1.1 var(--serif);margin:.15em 0 .3em}
.nb-txt p{margin:0;font-size:.92rem;color:#dfeae4;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s ease,opacity .4s ease}
.nb:hover .nb-txt p,.nb:focus-within .nb-txt p,.nb-xl .nb-txt p{max-height:9em;opacity:1}
.nb-n{font:800 .75rem var(--sans);letter-spacing:.2em;color:var(--sun)}
.nb-xl{grid-column:span 2;grid-row:span 2}
.nb-xl .nb-txt h3{font-size:2.3rem}
.nb-wide{grid-column:span 2}
@media (max-width:980px){.nat-bento{grid-template-columns:1fr 1fr}.nb-xl{grid-row:span 1}}
@media (max-width:600px){.nat-bento{grid-template-columns:1fr;grid-auto-rows:300px}.nb-xl,.nb-wide{grid-column:auto}.nb-txt p{max-height:9em;opacity:1}}
@media (hover:none){.nb-txt p{max-height:9em;opacity:1}}

/* ---------- route ---------- */
.nat-route{background:linear-gradient(180deg,var(--deep) 0%,var(--deep-2) 100%);color:#fff;padding:clamp(60px,9vw,120px) 0}
.nat-route h2,.nat-route h3{color:#fff}
.nat-route .kicker{color:var(--sun)}
.nat-route .lead{color:#cfe0d6}
.nat-route-head{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,5vw,60px);align-items:center;margin-bottom:clamp(40px,6vw,80px)}
.nat-legend{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:.88rem;color:#cfe0d6}
.nat-legend li{display:flex;align-items:center;gap:8px}
.sw{width:11px;height:11px;border-radius:50%;display:inline-block}
.sw-yes{background:#3ccf8e}.sw-care{background:var(--sun)}.sw-no{background:#ef5a4c}
.nat-map{position:relative;display:block;border-radius:20px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.4);transform:rotate(1.2deg);transition:transform .4s}
.nat-map:hover{transform:rotate(0) scale(1.01)}
.nat-map img{width:100%;height:auto}
.nat-map span{position:absolute;right:14px;bottom:14px;background:rgba(8,26,19,.85);color:#fff;font:700 .82rem var(--sans);padding:.55em .95em;border-radius:999px}
@media (max-width:860px){.nat-route-head{grid-template-columns:1fr}.nat-map{transform:none}}

.nat-trail{list-style:none;margin:0;padding:0 0 0 70px;position:relative;display:flex;flex-direction:column;gap:clamp(40px,7vw,90px)}
.nt-rail{position:absolute;left:24px;top:10px;bottom:10px;width:3px;background:rgba(255,255,255,.14);border-radius:3px}
.nt-fill{position:absolute;left:0;top:0;width:100%;height:calc(var(--p,0) * 100%);background:linear-gradient(180deg,var(--sun),#3ccf8e);border-radius:3px}
.nt-hiker{position:absolute;left:50%;top:calc(var(--p,0) * 100%);transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:18px;box-shadow:0 0 0 6px rgba(240,166,58,.25)}
.nt-dot{position:absolute;left:-70px;top:0;width:52px;height:52px;border-radius:50%;background:var(--deep);border:2px solid rgba(255,255,255,.35);display:grid;place-items:center;font:800 .82rem var(--sans);color:#fff;transition:background .3s,border-color .3s,transform .3s}
.nt-stop.here .nt-dot,.nt-start .nt-dot{background:var(--sun);border-color:var(--sun);color:#2b1b00;transform:scale(1.08)}
.nt-start{position:relative;display:flex;align-items:center;gap:16px;min-height:52px}
.nt-start strong{display:block;font-size:1.1rem}
.nt-start span{color:#b9cfc3;font-size:.92rem}
.nt-stop{position:relative;display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(20px,4vw,50px);align-items:center}
.nt-stop figure{margin:0;position:relative;border-radius:22px;overflow:hidden;box-shadow:0 26px 50px rgba(0,0,0,.4);aspect-ratio:4/3}
.nt-stop figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.nt-stop:hover figure img{transform:scale(1.05)}
.nt-stop figcaption{position:absolute;left:14px;top:14px;background:rgba(8,26,19,.78);backdrop-filter:blur(6px);color:#fff;font:800 .72rem var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:.5em .9em;border-radius:999px}
.nt-stop.flip figure{order:2}
.nt-time{font-size:.85rem;color:#b9cfc3;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.4em}
.nt-time strong{font:400 3.4rem/1 var(--serif);color:var(--sun);margin-right:6px;letter-spacing:0}
.nt-txt h3{font:400 clamp(1.8rem,3vw,2.5rem)/1.1 var(--serif);margin-bottom:.4em}
.nt-txt h3 small{display:block;font:600 .95rem var(--sans);color:#b9cfc3;margin-top:.3em}
.nt-txt p{color:#dbe8e1}
.nat-route .swim{display:inline-block;padding:.45em .9em;border-radius:999px;font-weight:700;font-size:.88rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff}
.nat-route .swim-yes{border-color:rgba(60,207,142,.6)}.nat-route .swim-no{border-color:rgba(239,90,76,.7)}.nat-route .swim-care{border-color:rgba(240,166,58,.7)}
.nt-hero-stop{grid-template-columns:1.6fr 1fr}
.nt-duo{display:grid;grid-template-columns:1fr 1fr;gap:6px;aspect-ratio:16/9 !important;background:var(--deep)}
.nt-duo img{border-radius:0}
.nat-note{color:#9fb7aa;margin-top:40px;padding-left:70px}
@media (max-width:860px){
  .nat-trail{padding-left:54px}
  .nt-rail{left:18px}
  .nt-dot{left:-54px;width:40px;height:40px;font-size:.72rem}
  .nt-stop,.nt-hero-stop{grid-template-columns:1fr}
  .nt-stop.flip figure{order:0}
  .nt-duo{grid-template-columns:1fr;aspect-ratio:auto !important}
  .nt-duo img{aspect-ratio:4/3;height:auto}
  .nat-note{padding-left:54px}
}

/* ---------- life ---------- */
.nat-life-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.nat-life-img{position:relative;padding-bottom:12%}
.nat-life-img img:first-child{width:100%;height:auto;border-radius:22px;box-shadow:var(--shadow);aspect-ratio:16/10;object-fit:cover}
.nat-life-img img:last-child{position:absolute;right:-4%;bottom:0;width:38%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:18px;border:6px solid #fff;box-shadow:var(--shadow)}
.nat-species{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px}
.nat-species li{display:flex;gap:14px;align-items:center;background:var(--sand);border-radius:14px;padding:12px 16px}
.nat-species li>span{font-size:1.6rem;width:44px;height:44px;display:grid;place-items:center;background:#fff;border-radius:50%;flex:none}
.nat-species strong{display:block;color:var(--jungle-d)}
.nat-species small{color:var(--muted)}
@media (max-width:860px){.nat-life-grid{grid-template-columns:1fr}.nat-life-img img:last-child{right:0}}

/* ---------- sacred ---------- */
.nat-sacred{background:var(--sand);padding:clamp(60px,8vw,110px) 0}
.nat-sacred-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.nat-sacred h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}
.nat-sacred h3{margin-top:1.6em;color:var(--jungle)}
.nat-care{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.nat-care li{position:relative;padding-left:26px;font-size:.95rem}
.nat-care li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:14px;border-radius:50%;background:var(--leaf);box-shadow:inset 0 0 0 4px #cfe9db}
.nat-signs{display:grid;gap:14px}
.nat-signs img{width:100%;height:auto;border-radius:18px;box-shadow:var(--shadow);aspect-ratio:3/2;object-fit:cover}
.nat-signs img:last-child{width:82%;margin-left:auto;margin-top:-60px;border:6px solid var(--sand)}
@media (max-width:860px){.nat-sacred-grid{grid-template-columns:1fr}.nat-care{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){.nat-collage figure{--dy:0px !important}}

/* ---------- ajuste al tema 2026 (tarjetas claras redondeadas) ---------- */
.nat-hero{margin:10px auto 0;max-width:1240px;width:calc(100% - 32px);border-radius:28px;background:linear-gradient(120deg,var(--mint) 0%,#eef7f2 55%,#dcefe5 100%);color:var(--ink)}
.nat-grain{display:none}
.nat-hero .kicker{color:var(--jungle)}
.nat-hero h1{color:var(--ink);font-weight:800}
.nat-hero h1 em{color:var(--jungle);font-style:normal}
.nat-hero .lead{color:#33433b}
.nat-hero .btn-ghost{color:var(--jungle);border-color:#cfe3d9;background:#fff;backdrop-filter:none}
.nat-collage figure{border:5px solid #fff;box-shadow:var(--shadow-lg)}
.nat-stats{border-top-color:#cfe3d9}
.nat-stats li+li{border-left-color:#cfe3d9}
.nat-stats strong{color:var(--jungle);font-weight:800}
.nat-stats span{color:var(--muted)}
.nat-manifesto{background:#fff}
.nat-manifesto p{font-weight:700;color:var(--ink);letter-spacing:-.015em}
.nat-manifesto p span{color:var(--jungle);font-style:normal}
.nb-txt h3{font-weight:800}
.nb-n{color:#a8e6c9}
.nat-route{margin:0 auto;max-width:1240px;width:calc(100% - 32px);border-radius:28px;background:linear-gradient(115deg,#0b3d2e 0%,#0f5a40 100%)}
.nat-route .kicker{color:#a8e6c9}
.nt-txt h3{font-weight:800}
.nt-time strong{color:#8fe0b9;font-weight:800}
.nt-fill{background:linear-gradient(180deg,#8fe0b9,#fff)}
.nt-hiker{box-shadow:0 0 0 6px rgba(143,224,185,.3)}
.nt-stop.here .nt-dot,.nt-start .nt-dot{background:#8fe0b9;border-color:#8fe0b9;color:#0b3d2e}
.nat-species li{background:var(--mint-2);border:1px solid #dcefe5}
.nat-care li::before{background:var(--jungle);box-shadow:inset 0 0 0 4px #cfe9db}
.nat-sacred{margin-top:clamp(30px,5vw,60px)}
@media (max-width:860px){.nat-route{width:calc(100% - 16px);border-radius:22px}}
.nt-from{font-size:.92rem;color:#a8e6c9;font-weight:600;margin-top:-.3em}
.nt-time strong{text-transform:none}