/* ==========================================================================
   Ram Tzul — Espíritu de la Montaña
   Sistema visual: kit de marca oficial (Jade Olive White · Bamboo Forest Green ·
   Mayan Ceramic Red · Orchid Purple) + Nephilm (títulos) + Nunito Sans (texto).
   Reglas de movimiento: 160–220 ms controles, 500–760 ms secciones, ease-out fuerte,
   solo transform/opacity, sin rebotes. prefers-reduced-motion => estados finales.
   ========================================================================== */

@font-face{font-family:"Nephilm";src:url("../fonts/nephilm.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Nephilm";src:url("../fonts/nephilm-italic.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url("../fonts/nunito-sans-latin.woff2") format("woff2");font-weight:200 1000;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url("../fonts/nunito-sans-latin-italic.woff2") format("woff2");font-weight:200 1000;font-style:italic;font-display:swap}

:root{
  /* Paleta principal (Brand Guidelines p.13) */
  --olive:#E5E5B0;      /* Jade Olive White — fondos */
  --green:#445210;      /* Bamboo Forest Green — texto/logo, Reserva Natural */
  --red:#7D2A26;        /* Mayan Ceramic Red — Hotel / cultura (nunca para texto) */
  --purple:#512273;     /* Orchid Purple — bienestar / lujo */
  /* Apoyo (p.14): solo elementos gráficos, nunca texto */
  --olive-dk:#D4D490;
  --green-lt:#536315;
  --red-lt:#913330;
  --purple-lt:#61288A;
  /* Neutros derivados solo para superposiciones sobre fotografía */
  --night:#171d05;
  --paper-line:rgba(68,82,16,.22);
  --olive-line:rgba(229,229,176,.28);

  --f-display:"Nephilm","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --f-text:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --ease:cubic-bezier(.23,1,.32,1);          /* ease-out fuerte */
  --ease-io:cubic-bezier(.77,0,.175,1);
  --gutter:clamp(1.25rem,4.2vw,3.75rem);
  --maxw:1480px;
  --hdr:76px;
  --r:2px;                                    /* radio mínimo editorial */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--olive);color:var(--green);font-family:var(--f-text);font-size:1.0625rem;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
picture{display:contents}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
[id]{scroll-margin-top:calc(var(--hdr) + 1rem)}
::selection{background:var(--green);color:var(--olive)}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:var(--r)}
.skip{position:absolute;left:var(--gutter);top:-4rem;background:var(--green);color:var(--olive);padding:.7rem 1rem;z-index:200;transition:top .2s var(--ease)}
.skip:focus{top:.75rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Tipografía ---------- */
.display,h1,h2,h3{font-family:var(--f-display);font-weight:400;letter-spacing:-.005em;text-wrap:balance}
h1{font-size:clamp(2.55rem,7vw,6.2rem);line-height:1.02}
h2{font-size:clamp(2rem,4.6vw,4.1rem);line-height:1.06}
h3{font-size:clamp(1.4rem,2.1vw,1.85rem);line-height:1.15}
p{text-wrap:pretty}
.lead{font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.55;font-weight:400}
.eyebrow{font-family:var(--f-text);font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.8rem}
.eyebrow::before{content:"";width:2.2rem;height:1px;background:currentColor;opacity:.7}
.num{font-variant-numeric:tabular-nums}
.muted{opacity:.78}
em.it{font-family:var(--f-display);font-style:italic}

/* Divisor firma: línea · punto · línea (del logotipo) */
.rule{display:flex;align-items:center;gap:.7rem;color:currentColor;opacity:.8}
.rule::before,.rule::after{content:"";height:1px;background:currentColor;flex:1;max-width:5rem}
.rule i{width:7px;height:7px;border-radius:50%;background:currentColor}

/* ---------- Estructura ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.sec{position:relative;padding-block:clamp(4.5rem,10vw,9rem)}
.sec--paper{background:var(--olive);color:var(--green)}
.sec--green{background:var(--green);color:var(--olive)}
.sec--night{background:var(--night);color:var(--olive)}
.sec--dk{background:var(--olive-dk);color:var(--green)}
.stack>*+*{margin-top:var(--s,1.25rem)}
.grid{display:grid;gap:var(--gap,clamp(1.5rem,3vw,3rem))}
.sec-head{display:grid;gap:1.25rem;max-width:58rem;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.sec-head--center{margin-inline:auto;text-align:center;justify-items:center}

/* ---------- Botones ---------- */
.btn{--bg:var(--green);--fg:var(--olive);display:inline-flex;align-items:center;justify-content:center;gap:.7rem;min-height:3.1rem;padding:.8rem 1.6rem;border:1px solid var(--bg);
  background:var(--bg);color:var(--fg);font-family:var(--f-text);font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;border-radius:var(--r);
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .16s var(--ease);white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn svg{width:1.05em;height:1.05em;transition:transform .25s var(--ease)}
@media (hover:hover){
  .btn:hover{--bg:transparent;--fg:var(--green);border-color:var(--green);background:transparent;color:var(--green)}
  .btn:hover svg{transform:translateX(3px)}
}
.btn--olive{--bg:var(--olive);--fg:var(--green)}
@media (hover:hover){.btn--olive:hover{background:transparent;color:var(--olive);border-color:var(--olive)}}
.btn--ghost{background:transparent;color:inherit;border-color:currentColor}
@media (hover:hover){.btn--ghost:hover{background:var(--olive);color:var(--green);border-color:var(--olive)}}
.sec--paper .btn--ghost:hover,.sec--dk .btn--ghost:hover{background:var(--green);color:var(--olive);border-color:var(--green)}
.btn--text{background:none;border:0;padding:0;min-height:0;color:inherit;letter-spacing:.14em;border-bottom:1px solid currentColor;padding-bottom:.35rem;border-radius:0}
@media (hover:hover){.btn--text:hover{background:none;color:inherit;border-color:currentColor;opacity:.75}}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem}

/* ---------- Cabecera ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:90;height:var(--hdr);display:flex;align-items:center;color:var(--olive);
  transition:background-color .35s var(--ease),color .35s var(--ease),transform .5s var(--ease),box-shadow .35s var(--ease)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:2rem;width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.hdr__logo{display:block;width:clamp(120px,11vw,150px);position:relative;aspect-ratio:288/115}
.hdr__logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .3s var(--ease)}
.hdr__logo .l-dark{opacity:0}
.hdr.is-solid{background:var(--olive);color:var(--green);box-shadow:0 1px 0 var(--paper-line)}
.hdr.is-solid .l-light{opacity:0}
.hdr.is-solid .l-dark{opacity:1}
.hdr.is-hidden{transform:translateY(-100%)}
.nav{display:none}
.nav a{position:relative;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:.6rem .2rem}
.nav a::after{content:"";position:absolute;left:.2rem;right:.2rem;bottom:.2rem;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
@media (hover:hover){.nav a:hover::after{transform:scaleX(1)}}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.hdr__cta{display:none}
.burger{width:46px;height:46px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-right:-10px;border-radius:50%}
.burger span{display:block;width:24px;height:1.5px;background:currentColor;transition:transform .35s var(--ease),opacity .2s;position:relative}
.burger span+span{margin-top:6px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
@media (min-width:1280px){
  .nav{display:flex;gap:clamp(1rem,2vw,2rem);align-items:center}
  .hdr__cta{display:inline-flex}
  .burger{display:none}
  .hdr__in{justify-content:flex-start;gap:1.2rem}
  .nav{margin-left:auto}
}
.hdr.is-open{color:var(--olive);background:transparent;box-shadow:none}
.hdr.is-open .l-light{opacity:1}.hdr.is-open .l-dark{opacity:0}

/* Menú móvil (overlay) */
.menu{position:fixed;inset:0;z-index:80;background:var(--green);color:var(--olive);display:flex;flex-direction:column;justify-content:center;padding:calc(var(--hdr) + 1rem) var(--gutter) 2rem;
  clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .65s var(--ease-io),visibility 0s .65s}
.menu.is-open{clip-path:inset(0);visibility:visible;transition:clip-path .65s var(--ease-io),visibility 0s}
.menu a.big{display:block;font-family:var(--f-display);font-size:clamp(2.1rem,9vw,3.4rem);line-height:1.15;padding:.35rem 0;border-bottom:1px solid var(--olive-line);
  opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.menu.is-open a.big{opacity:1;transform:none}
.menu.is-open a.big:nth-child(2){transition-delay:.05s}.menu.is-open a.big:nth-child(3){transition-delay:.1s}.menu.is-open a.big:nth-child(4){transition-delay:.15s}
.menu.is-open a.big:nth-child(5){transition-delay:.2s}.menu.is-open a.big:nth-child(6){transition-delay:.25s}.menu.is-open a.big:nth-child(7){transition-delay:.3s}
.menu__sec{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:1.6rem;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.menu__cta{margin-top:1.6rem}
@media (min-width:1280px){.menu{display:none}}

/* ---------- Preloader ---------- */
.pre{position:fixed;inset:0;z-index:300;background:var(--green);color:var(--olive);display:none;place-items:center}
.js .pre{display:grid}
.rm .pre,.seen .pre,.pre.is-done{display:none!important}
.pre__in{display:grid;justify-items:center;gap:1.6rem}
.pre__sym{width:clamp(84px,12vw,120px);opacity:0;transform:translateY(10px) scale(.96);animation:preIn .9s var(--ease) .1s forwards}
.pre__bar{width:min(220px,50vw);height:1px;background:var(--olive-line);overflow:hidden}
.pre__bar i{display:block;height:100%;background:var(--olive);transform:scaleX(0);transform-origin:left;animation:preBar 1.5s var(--ease-io) .2s forwards}
.pre__txt{font-size:.7rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;opacity:0;animation:preIn .8s var(--ease) .35s forwards}
@keyframes preIn{to{opacity:1;transform:none}}
@keyframes preBar{to{transform:scaleX(1)}}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:var(--olive);overflow:clip;background:var(--night);isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-3}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hero__media video{position:absolute;inset:0;opacity:0;transition:opacity 1s var(--ease)}
.hero__media video.is-on{opacity:1}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(23,29,5,.88) 0%,rgba(23,29,5,.45) 38%,rgba(23,29,5,.18) 65%,rgba(23,29,5,.5) 100%)}
.mist{position:absolute;inset:-10% -20%;z-index:-2;pointer-events:none;opacity:.55}
.mist::before,.mist::after{content:"";position:absolute;inset:0;background:radial-gradient(40% 24% at 20% 60%,rgba(229,229,176,.34),transparent 70%),radial-gradient(34% 20% at 75% 45%,rgba(229,229,176,.26),transparent 70%),radial-gradient(46% 22% at 55% 85%,rgba(229,229,176,.22),transparent 70%);will-change:transform}
.mist::before{animation:drift 46s linear infinite alternate}
.mist::after{animation:drift 62s linear infinite alternate-reverse;transform:scaleX(-1)}
@keyframes drift{from{transform:translate3d(-4%,0,0)}to{transform:translate3d(6%,-3%,0)}}
.hero__in{width:100%;max-width:var(--maxw);margin-inline:auto;padding:calc(var(--hdr) + 3rem) var(--gutter) clamp(2.5rem,6vw,5rem);display:grid;gap:clamp(1.4rem,3vw,2.4rem)}
.hero h1{max-width:19ch}
.hero__sub{max-width:44rem;font-size:clamp(1.05rem,1.55vw,1.3rem);line-height:1.55;opacity:.95}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.hero__cta .btn--ghost{color:var(--olive)}
.hero__cta .btn--text{color:var(--olive);margin-left:.6rem}
.hero__meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem;align-items:flex-end;border-top:1px solid var(--olive-line);padding-top:1.25rem;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.hero__meta span{opacity:.92}
.cue{display:inline-flex;align-items:center;gap:.8rem}
.cue i{display:block;width:1px;height:2.6rem;background:var(--olive);transform-origin:top;animation:cue 2.4s var(--ease-io) infinite}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* Hero interno */
.phero{position:relative;min-height:min(78svh,760px);display:flex;align-items:flex-end;color:var(--olive);overflow:clip;background:var(--night);isolation:isolate}
.phero__media{position:absolute;inset:0;z-index:-2}
.phero__media img{width:100%;height:100%;object-fit:cover}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(23,29,5,.85),rgba(23,29,5,.3) 55%,rgba(23,29,5,.55))}
.phero__in{width:100%;max-width:var(--maxw);margin-inline:auto;padding:calc(var(--hdr) + 4rem) var(--gutter) clamp(2.5rem,5vw,4.5rem);display:grid;gap:1.4rem}
.phero h1{font-size:clamp(2.4rem,6vw,5.2rem);max-width:18ch}
.phero p.lead{max-width:44rem}
.crumb{font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.crumb a{border-bottom:1px solid transparent;transition:border-color .2s}
@media (hover:hover){.crumb a:hover{border-color:currentColor}}

/* ---------- Marquee ---------- */
.marq{overflow:hidden;border-block:1px solid var(--paper-line);padding-block:1.1rem;background:var(--olive);color:var(--green)}
.marq__t{display:flex;width:max-content;animation:marq 38s linear infinite}
.marq.is-paused .marq__t{animation-play-state:paused}
.marq__t span{font-family:var(--f-display);font-size:clamp(1.4rem,2.6vw,2.2rem);padding-inline:1.5rem;display:inline-flex;align-items:center;gap:3rem;white-space:nowrap}
.marq__t span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);opacity:.7}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- Intro editorial ---------- */
.intro{display:grid;gap:clamp(2.5rem,6vw,6rem);align-items:center}
.intro h2{margin-block:1.2rem 1.6rem}
.layers{position:relative;aspect-ratio:1/1.05;max-width:640px;margin-inline:auto;width:100%}
.layers figure{position:absolute;overflow:hidden;border-radius:var(--r)}
.layers figure img{width:100%;height:100%;object-fit:cover}
.layers figure:nth-child(1){left:0;top:0;width:68%;height:78%}
.layers figure:nth-child(2){right:0;bottom:0;width:46%;height:52%;box-shadow:0 0 0 clamp(6px,1.4vw,12px) var(--olive)}
.layers figcaption{position:absolute;left:0;bottom:-1.9rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.8}
.photo{position:relative;overflow:hidden;border-radius:var(--r);background:var(--olive-dk)}
.photo img{width:100%;height:100%;object-fit:cover;outline:1px solid rgba(0,0,0,.08);outline-offset:-1px}
@media (min-width:900px){.intro{grid-template-columns:1.05fr .95fr}}

/* Bloques destacados */
.feats{display:grid;gap:0;border-top:1px solid var(--paper-line)}
.feat{padding:clamp(1.6rem,3vw,2.4rem) 0;border-bottom:1px solid var(--paper-line);display:grid;gap:.9rem;grid-template-columns:auto 1fr;column-gap:1.4rem;align-items:start}
.feat svg{width:2.6rem;height:2.6rem;stroke:currentColor;fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.feat h3{font-size:1.5rem;margin-bottom:.4rem}
@media (min-width:900px){
  .feats{grid-template-columns:repeat(3,1fr);border-top:1px solid var(--paper-line)}
  .feat{border-bottom:0;grid-template-columns:1fr;padding-inline:clamp(1.2rem,2.4vw,2.4rem);border-left:1px solid var(--paper-line)}
  .feat:first-child{border-left:0;padding-left:0}
}

/* ---------- Pilares ---------- */
.pillars{display:grid;gap:clamp(.8rem,1.4vw,1.2rem)}
.pillar{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:min(78svh,640px);color:var(--olive);overflow:hidden;border-radius:var(--r);isolation:isolate;background:var(--night)}
.pillar .pillar__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.1s var(--ease)}
.pillar::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(23,29,5,.88),rgba(23,29,5,.15) 62%,rgba(23,29,5,.25))}
.pillar__in{padding:clamp(1.4rem,2.4vw,2.2rem);display:grid;gap:1rem}
.pillar__logo{width:clamp(110px,12vw,150px);margin-bottom:.2rem}
.pillar p{font-size:1rem;max-width:28rem;opacity:.95}
.pillar .more{display:inline-flex;align-items:center;gap:.7rem;font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.pillar .more svg{width:1.1em;transition:transform .3s var(--ease)}
@media (hover:hover){.pillar:hover .pillar__bg{transform:scale(1.045)}.pillar:hover .more svg{transform:translateX(5px)}}
@media (min-width:900px){.pillars{grid-template-columns:repeat(3,1fr)}.pillar{min-height:min(84svh,760px)}}

/* ---------- Selector de experiencias ---------- */
.xp{display:grid;gap:clamp(2rem,4vw,4rem);align-items:start}
.xp__filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.6rem}
.chip{display:inline-flex;align-items:center;min-height:2.7rem;padding:.55rem 1.2rem;border:1px solid currentColor;border-radius:999px;font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  transition:background-color .2s var(--ease),color .2s var(--ease),transform .16s var(--ease)}
.chip:active{transform:scale(.97)}
.chip[aria-pressed="true"]{background:var(--olive);color:var(--green);border-color:var(--olive)}
.sec--paper .chip[aria-pressed="true"]{background:var(--green);color:var(--olive);border-color:var(--green)}
@media (hover:hover){.chip:hover{background:color-mix(in srgb,currentColor 12%,transparent)}.chip[aria-pressed="true"]:hover{background:var(--olive)}.sec--paper .chip[aria-pressed="true"]:hover{background:var(--green)}}
.xp__list{border-top:1px solid var(--olive-line)}
.xp__item[hidden]{display:none}
.xp__item{border-bottom:1px solid var(--olive-line)}
.xp__btn{width:100%;display:grid;grid-template-columns:2.6rem 1fr auto;align-items:center;gap:1rem;text-align:left;padding:1.25rem 0;color:inherit}
.xp__btn .n{font-size:.78rem;font-weight:700;letter-spacing:.14em;opacity:.7}
.xp__btn h3{font-size:clamp(1.3rem,2.2vw,1.9rem);transition:transform .35s var(--ease),opacity .25s}
.xp__btn[aria-selected="false"] h3{opacity:.62}
@media (hover:hover){.xp__btn:hover h3{transform:translateX(6px);opacity:1}}
.xp__btn .plus{width:1.2rem;height:1.2rem;position:relative;transition:transform .35s var(--ease)}
.xp__btn .plus::before,.xp__btn .plus::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:currentColor}
.xp__btn .plus::after{transform:rotate(90deg);transition:transform .35s var(--ease)}
.xp__btn[aria-selected="true"] .plus::after{transform:rotate(0)}
.xp__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.xp__panel>div{overflow:hidden}
.xp__btn[aria-selected="true"]+.xp__panel{grid-template-rows:1fr}
.xp__panel p{padding:0 0 1.5rem 3.6rem;max-width:36rem;opacity:.92}
.xp__stage{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--night)}
.xp__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .6s var(--ease),transform 1.2s var(--ease)}
.xp__stage img.is-on{opacity:1;transform:none}
.xp__tag{position:absolute;left:1rem;bottom:1rem;background:var(--olive);color:var(--green);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:.4rem .7rem;border-radius:var(--r)}
@media (min-width:900px){.xp{grid-template-columns:1.1fr .9fr}.xp__stage{position:sticky;top:calc(var(--hdr) + 1.5rem);aspect-ratio:4/5}}

/* ---------- Testimonios ---------- */
.quotes{position:relative}
.quotes__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:clamp(1rem,3vw,3rem);-webkit-overflow-scrolling:touch}
.quotes__track::-webkit-scrollbar{display:none}
.q{flex:0 0 min(100%,56rem);scroll-snap-align:center;display:grid;gap:1.6rem;padding:clamp(1rem,2vw,2rem) 0}
.q blockquote{font-family:var(--f-display);font-size:clamp(1.55rem,3.4vw,2.9rem);line-height:1.2;text-wrap:balance}
.q footer{display:flex;align-items:center;gap:1rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.stars{display:flex;gap:.2rem;color:var(--green)}
.stars svg{width:1.05rem;height:1.05rem;fill:currentColor}
.quotes__ctl{display:flex;align-items:center;gap:1.2rem;margin-top:1.8rem}
.arr{width:3.2rem;height:3.2rem;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;transition:background-color .2s var(--ease),color .2s var(--ease),transform .16s var(--ease)}
.arr:active{transform:scale(.94)}
.arr svg{width:1.15rem}
@media (hover:hover){.arr:hover{background:var(--olive);color:var(--green)}}
.dots{display:flex;gap:.55rem}
.dots button{width:2.2rem;height:2.2rem;display:grid;place-items:center}
.dots button::after{content:"";width:.5rem;height:.5rem;border-radius:50%;border:1px solid currentColor;transition:background-color .2s,transform .2s var(--ease)}
.dots button[aria-current="true"]::after{background:currentColor;transform:scale(1.25)}

/* ---------- Historia / filosofía ---------- */
.story{display:grid;gap:clamp(2.5rem,6vw,6rem);align-items:center}
.story__imgs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.7rem,1.4vw,1.2rem);align-items:end}
.story__imgs .photo:first-child{aspect-ratio:3/4}
.story__imgs .photo:last-child{aspect-ratio:3/4;transform:translateY(clamp(1.5rem,5vw,4rem))}
@media (min-width:900px){.story{grid-template-columns:.9fr 1.1fr}}
.cards3{display:grid;gap:clamp(.8rem,1.6vw,1.4rem)}
.card{padding:clamp(1.5rem,2.6vw,2.4rem);border:1px solid var(--paper-line);border-radius:var(--r);display:grid;gap:1rem;align-content:start;background:transparent}
.sec--green .card{border-color:var(--olive-line)}
.card h3{font-size:1.7rem}
.card .tag{font-size:.72rem;letter-spacing:.2em;font-weight:700;text-transform:uppercase;opacity:.75}
.vals{display:flex;flex-wrap:wrap;gap:.5rem}
.vals li{border:1px solid currentColor;border-radius:999px;padding:.3rem .8rem;font-size:.82rem;font-weight:600;opacity:.9}
@media (min-width:900px){.cards3{grid-template-columns:repeat(3,1fr)}}

/* ---------- Impacto ---------- */
.impact{display:grid;gap:clamp(.8rem,1.6vw,1.4rem)}
.imp{display:grid;gap:1rem;padding:clamp(1.4rem,2.4vw,2rem);border:1px solid var(--olive-line);border-radius:var(--r);align-content:start}
.imp svg{width:2.4rem;height:2.4rem;stroke:currentColor;fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.imp h3{font-size:1.35rem}
.imp p{font-size:.98rem;opacity:.92}
@media (min-width:700px){.impact{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.impact{grid-template-columns:repeat(4,1fr)}}
.mosaic{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.6rem,1.2vw,1rem)}
.mosaic .photo{aspect-ratio:4/5}
@media (min-width:900px){.mosaic{grid-template-columns:repeat(4,1fr)}}

/* ---------- Timeline ---------- */
.tl{position:relative;display:grid;gap:clamp(2rem,4vw,3.4rem);padding-left:2.2rem}
.tl::before{content:"";position:absolute;left:.45rem;top:.6rem;bottom:.6rem;width:1px;background:var(--paper-line)}
.sec--green .tl::before{background:var(--olive-line)}
.tl li{position:relative;display:grid;gap:.5rem}
.tl li::before{content:"";position:absolute;left:-2.2rem;top:.55rem;width:.95rem;height:.95rem;border-radius:50%;background:var(--olive);border:1px solid currentColor;transition:background-color .35s var(--ease),transform .35s var(--ease)}
.sec--paper .tl li::before{background:var(--olive)}
.tl li.is-on::before{background:currentColor;transform:scale(1.15)}
.tl .day{font-family:var(--f-display);font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.1}
.tl p{max-width:40rem}
@media (min-width:900px){
  .tl{grid-template-columns:repeat(3,1fr);padding-left:0;padding-top:2.4rem}
  .tl::before{left:0;right:0;top:.45rem;bottom:auto;width:auto;height:1px}
  .tl li::before{left:0;top:-2.4rem}
}

/* ---------- Módulos de color ---------- */
.mods{display:grid;gap:clamp(.8rem,1.4vw,1.2rem)}
.mod{position:relative;display:grid;gap:1rem;align-content:space-between;min-height:18rem;padding:clamp(1.5rem,2.6vw,2.4rem);border-radius:var(--r);color:var(--olive);overflow:hidden;isolation:isolate;
  transition:transform .5s var(--ease)}
.mod--verde{background:var(--green)}
.mod--morado{background:var(--purple)}
.mod--rojo{background:var(--red)}
.mod::after{content:"";position:absolute;right:-18%;bottom:-30%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(229,229,176,.16),transparent);z-index:-1;transition:transform .8s var(--ease)}
@media (hover:hover){.mod:hover{transform:translateY(-4px)}.mod:hover::after{transform:scale(1.2)}}
.mod .dot{width:1.4rem;height:1.4rem;border-radius:50%;background:var(--olive)}
.mod h3{font-size:clamp(1.5rem,2.4vw,2rem)}
.mod small{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;opacity:.8}
.mod .go{display:inline-flex;align-items:center;gap:.7rem;font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.mod .go svg{width:1.1em;transition:transform .3s var(--ease)}
@media (hover:hover){.mod:hover .go svg{transform:translateX(5px)}}
@media (min-width:900px){.mods{grid-template-columns:repeat(3,1fr)}}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--paper-line)}
.sec--green .faq{border-color:var(--olive-line)}
.faq details{border-bottom:1px solid var(--paper-line)}
.sec--green .faq details{border-color:var(--olive-line)}
.faq summary{list-style:none;display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center;padding:1.3rem 0;cursor:pointer;font-family:var(--f-text);font-weight:700;font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{width:1.1rem;height:1.1rem;position:relative}
.faq summary .plus::before,.faq summary .plus::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:currentColor;transition:transform .35s var(--ease)}
.faq summary .plus::after{transform:rotate(90deg)}
.faq details[open] summary .plus::after{transform:rotate(0)}
.faq .ans{padding:0 0 1.5rem;max-width:46rem;opacity:.92;animation:ans .5s var(--ease)}
@keyframes ans{from{opacity:0;transform:translateY(-6px)}to{opacity:.92;transform:none}}

/* ---------- CTA ---------- */
.cta{position:relative;color:var(--olive);overflow:clip;isolation:isolate;background:var(--night);padding-block:clamp(5rem,12vw,10rem)}
.cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cta::before{content:"";position:absolute;inset:0;background:rgba(23,29,5,.62);z-index:-1}
.cta__in{display:grid;gap:1.6rem;justify-items:start;max-width:46rem}
.cta h2{max-width:16ch}

/* ---------- Formularios ---------- */
.form{display:grid;gap:1.1rem}
.row2{display:grid;gap:1.1rem}
@media (min-width:640px){.row2{grid-template-columns:1fr 1fr}}
.fld{display:grid;gap:.4rem}
.fld label,.fld legend{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.inp{width:100%;min-height:3.2rem;padding:.7rem .95rem;background:transparent;border:1px solid var(--paper-line);border-radius:var(--r);color:inherit;transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.inp::placeholder{color:currentColor;opacity:.5}
.inp:focus{outline:none;border-color:currentColor;background:rgba(255,255,255,.18)}
.sec--green .inp,.sec--night .inp{border-color:var(--olive-line)}
textarea.inp{min-height:7rem;resize:vertical}
.fld--err .inp{border-color:var(--red-lt)}
.err{font-size:.82rem;font-weight:600;color:var(--red);min-height:0}
.sec--green .err,.sec--night .err{color:#f0b9b4}
.note{font-size:.88rem;opacity:.85}
.status{padding:1rem 1.2rem;border-left:3px solid currentColor;background:rgba(255,255,255,.14);font-weight:600}
.status[hidden]{display:none}
.toggle{display:inline-flex;border:1px solid currentColor;border-radius:999px;padding:.25rem;gap:.2rem}
.toggle button{min-height:2.5rem;padding:.4rem 1.2rem;border-radius:999px;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;transition:background-color .2s var(--ease),color .2s var(--ease)}
.toggle button[aria-pressed="true"]{background:var(--olive);color:var(--green)}
.sec--paper .toggle button[aria-pressed="true"]{background:var(--green);color:var(--olive)}

/* Selector de módulo (reservar) */
.modpick{display:grid;gap:.8rem;border:0;padding:0;margin:0}
.modpick legend{margin-bottom:.8rem}
.mp{position:relative;display:block}
.mp input{position:absolute;opacity:0;inset:0;cursor:pointer;z-index:2}
.mp .mod{min-height:0;grid-template-columns:auto 1fr;align-items:center;gap:1rem 1.2rem;padding:1.2rem 1.4rem;border:2px solid transparent;transition:border-color .2s var(--ease),transform .16s var(--ease),box-shadow .2s var(--ease)}
.mp .mod::after{display:none}
.mp .mod strong{font-family:var(--f-display);font-weight:400;font-size:1.3rem;line-height:1.15;display:block;margin-top:.2rem}
.mp .mod .d{font-size:.92rem;opacity:.9;grid-column:2}
.mp input:checked+.mod{border-color:var(--olive);box-shadow:0 0 0 3px var(--green)}
.mp input:focus-visible+.mod{outline:2px solid var(--green);outline-offset:4px}
.mp input:active+.mod{transform:scale(.99)}
@media (hover:hover){.mp:hover .mod{transform:none}}
.policy{display:grid;gap:.7rem;padding:1.4rem;border:1px solid var(--paper-line);border-radius:var(--r)}
.policy li{display:grid;grid-template-columns:auto 1fr;gap:.8rem;font-size:.95rem}
.policy li::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:currentColor;margin-top:.62em;opacity:.7}

/* ---------- Contacto / mapa / tarjetas informativas ---------- */
.info{display:grid;gap:clamp(1.5rem,3vw,3rem)}
@media (min-width:900px){.info{grid-template-columns:1fr 1fr}}
.dl{display:grid;gap:1rem}
.dl div{display:grid;gap:.15rem;padding-bottom:1rem;border-bottom:1px solid var(--paper-line)}
.sec--green .dl div{border-color:var(--olive-line)}
.dl dt{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;opacity:.75}
.dl dd{font-size:1.1rem}
.dl a{border-bottom:1px solid currentColor}
.mapbox{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--olive-dk)}
.mapbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.8) sepia(.12)}
.checks{display:grid;gap:.7rem}
.checks li{display:grid;grid-template-columns:1.4rem 1fr;gap:.8rem}
.checks li::before{content:"";width:1.1rem;height:1.1rem;margin-top:.3em;background:currentColor;opacity:.85;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center/contain no-repeat}
.split{display:grid;gap:clamp(2rem,5vw,5rem);align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr}.split--rev>:first-child{order:2}}
.split .photo{aspect-ratio:4/5}
.split .photo.land{aspect-ratio:4/3}

/* Menú del restaurante */
.menu-grid{display:grid;gap:clamp(1.5rem,3vw,3rem)}
@media (min-width:900px){.menu-grid{grid-template-columns:repeat(3,1fr)}}
.mcol h3{margin-bottom:1.2rem;padding-bottom:.8rem;border-bottom:1px solid var(--olive-line)}
.mitem{display:grid;grid-template-columns:1fr auto;gap:.2rem 1rem;padding:.7rem 0;border-bottom:1px dotted var(--olive-line)}
.mitem b{font-weight:700}
.mitem .pr{font-variant-numeric:tabular-nums;font-weight:700}
.mitem small{grid-column:1/-1;opacity:.8;font-size:.88rem}

/* ---------- Pie ---------- */
.ftr{background:var(--green);color:var(--olive);padding-top:clamp(4rem,8vw,7rem)}
.ftr__top{display:grid;gap:clamp(2rem,4vw,3.5rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
.ftr__brand img{width:min(220px,60%)}
.ftr .ftr__h{font-family:var(--f-text);font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.75;margin-bottom:1rem}
.ftr li+li{margin-top:.55rem}
.ftr a{border-bottom:1px solid transparent;transition:border-color .2s}
@media (hover:hover){.ftr a:hover{border-color:currentColor}}
.ftr__b2b{border-top:1px solid var(--olive-line);padding-block:1.4rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center;font-size:.9rem}
.ftr__legal{border-top:1px solid var(--olive-line);padding-block:1.4rem 5.5rem;display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;font-size:.82rem;opacity:.85}
@media (min-width:900px){.ftr__top{grid-template-columns:1.4fr 1fr 1fr 1.2fr}}
.social{display:flex;gap:.8rem;margin-top:1.4rem}
.social a{width:2.8rem;height:2.8rem;border:1px solid var(--olive-line);border-radius:50%;display:grid;place-items:center;transition:background-color .2s var(--ease),color .2s var(--ease)}
.social a svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.social a:hover{background:var(--olive);color:var(--green);border-color:var(--olive)}}

/* ---------- Chat flotante ---------- */
.chat-fab{position:fixed;right:clamp(1rem,2vw,1.6rem);bottom:clamp(1rem,2vw,1.6rem);z-index:70;display:inline-flex;align-items:center;gap:.7rem;min-height:3.4rem;padding:.5rem 1.2rem .5rem .6rem;background:var(--green);color:var(--olive);border:1px solid var(--olive-line);border-radius:999px;box-shadow:0 8px 28px rgba(23,29,5,.28);
  font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;transition:transform .2s var(--ease),opacity .25s}
.chat-fab:active{transform:scale(.96)}
.chat-fab img{width:2.3rem;height:2.3rem;border-radius:50%;background:var(--olive);padding:.35rem}
.chat-fab[aria-expanded="true"]{opacity:0;pointer-events:none}
.chat{position:fixed;right:clamp(.6rem,2vw,1.6rem);bottom:clamp(.6rem,2vw,1.6rem);z-index:75;width:min(400px,calc(100vw - 1.2rem));height:min(640px,calc(100svh - 1.4rem));display:flex;flex-direction:column;background:var(--olive);color:var(--green);border:1px solid var(--paper-line);border-radius:10px;box-shadow:0 22px 60px rgba(23,29,5,.35);overflow:hidden;
  transform-origin:bottom right;opacity:0;transform:translateY(14px) scale(.96);visibility:hidden;transition:opacity .22s var(--ease),transform .28s var(--ease),visibility 0s .28s}
.chat.is-open{opacity:1;transform:none;visibility:visible;transition:opacity .22s var(--ease),transform .28s var(--ease),visibility 0s}
.chat__hd{display:flex;align-items:center;gap:.9rem;padding:.9rem 1rem;background:var(--green);color:var(--olive)}
.chat__hd img{width:2.4rem;height:2.4rem;background:var(--olive);border-radius:50%;padding:.35rem}
.chat__hd b{display:block;font-family:var(--f-display);font-weight:400;font-size:1.2rem;line-height:1.1}
.chat__hd small{font-size:.74rem;opacity:.85}
.chat__x{margin-left:auto;width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;font-size:1.4rem;line-height:1}
.chat__log{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.7rem;scroll-behavior:smooth;overscroll-behavior:contain}
.msg{max-width:88%;padding:.7rem .95rem;border-radius:12px;font-size:.96rem;line-height:1.5;white-space:pre-wrap;animation:msgIn .3s var(--ease)}
.msg--bot{background:rgba(255,255,255,.55);border-bottom-left-radius:3px;align-self:flex-start}
.msg--me{background:var(--green);color:var(--olive);border-bottom-right-radius:3px;align-self:flex-end}
.msg a{text-decoration:underline;text-underline-offset:3px}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sugs{display:flex;flex-wrap:wrap;gap:.45rem;padding:0 1rem .6rem}
.sugs button{padding:.45rem .85rem;border:1px solid var(--green);border-radius:999px;font-size:.82rem;font-weight:600;transition:background-color .2s,color .2s,transform .16s var(--ease)}
.sugs button:active{transform:scale(.96)}
@media (hover:hover){.sugs button:hover{background:var(--green);color:var(--olive)}}
.chat__ft{display:flex;gap:.5rem;padding:.8rem;border-top:1px solid var(--paper-line);background:var(--olive)}
.chat__ft .inp{min-height:2.8rem;background:rgba(255,255,255,.4)}
.chat__ft .btn{min-height:2.8rem;padding-inline:1rem}
.typing{display:inline-flex;gap:4px;padding:.2rem 0}
.typing i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.4;animation:dot 1s infinite var(--ease-io)}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,100%{opacity:.25;transform:none}50%{opacity:.9;transform:translateY(-3px)}}
.chat__wa{display:block;text-align:center;font-size:.78rem;padding:.55rem;background:var(--green);color:var(--olive);font-weight:700;letter-spacing:.1em;text-transform:uppercase}

/* ---------- Animación en entrada (solo con JS y sin reduced-motion) ---------- */
.js:not(.rm) [data-reveal],.js:not(.rm) [data-stagger]>*{opacity:0;transform:translateY(26px)}
.js:not(.rm) [data-split]{visibility:hidden}
.js:not(.rm) [data-mask] img{transform:scale(1.14)}
.js:not(.rm) [data-mask]{clip-path:inset(0 0 100% 0)}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.w>span{display:inline-block;will-change:transform}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .mist,.marq__t{animation:none!important}
}
.rm .mist{display:none}
.rm .marq__t{animation:none}

/* ---------- 404 / utilidades ---------- */
.center{text-align:center}
.mt-l{margin-top:clamp(2rem,4vw,3.5rem)}
.mt-m{margin-top:1.6rem}
.hide-sm{display:none}
@media (min-width:700px){.hide-sm{display:revert}}
@media print{.hdr,.chat-fab,.chat,.pre,.menu{display:none!important}}

/* Destino de anclas: breve resalte al llegar (p. ej. #politicas) */
.sec:target{animation:flash 1.6s var(--ease) .2s}
@keyframes flash{0%{box-shadow:inset 0 0 0 0 rgba(229,229,176,0)}25%{box-shadow:inset 0 0 0 6px rgba(229,229,176,.55)}100%{box-shadow:inset 0 0 0 0 rgba(229,229,176,0)}}
.sec:focus{outline:none}

.mgrp{font-family:var(--f-text);font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.78;margin:1.6rem 0 .3rem}
.mnote{margin:.1rem 0 .4rem;font-size:.85rem}

/* ---------- Nuestra Fauna: fichas que se voltean (ilustración -> foto real) ---------- */
.fgroup+.fgroup{margin-top:clamp(2.4rem,5vw,4rem)}
.fgroup__t{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:1.2rem}
.fauna{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.2rem,2.4vw,2rem) clamp(.7rem,1.6vw,1.4rem)}
@media (min-width:760px){.fauna{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.fauna{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fcard{position:relative;margin:0;min-width:0}
.fcard__stage{position:relative}
.fcard__flip{display:block;position:relative;width:100%;aspect-ratio:4/3;padding:0;border:0;background:none;color:inherit;cursor:pointer;perspective:1100px;-webkit-tap-highlight-color:transparent}
.fcard__in{position:absolute;inset:0;display:block;transform-style:preserve-3d;transition:transform .75s var(--ease-io)}
.fcard__flip[aria-pressed="true"] .fcard__in{transform:rotateY(180deg)}
.fcard__face{position:absolute;inset:0;display:block;overflow:hidden;border-radius:var(--r);backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--green)}
.fcard__back{transform:rotateY(180deg)}
.fcard__face img{width:100%;height:100%;object-fit:cover;display:block}
.fcard__hint{position:absolute;left:.5rem;bottom:.5rem;display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .65rem;border-radius:999px;background:rgba(23,29,5,.78);color:var(--olive);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.2}
.fcard__hint svg{width:.9rem;height:.9rem;flex:none}
@media (hover:hover){.fcard__flip:hover .fcard__in{transform:rotateY(14deg)}.fcard__flip[aria-pressed="true"]:hover .fcard__in{transform:rotateY(166deg)}}
.fcard__flip:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
.fcard__credit{position:absolute;right:.5rem;top:.5rem;z-index:2;margin:0;max-width:calc(100% - 1rem);padding:.25rem .55rem;border-radius:2px;background:rgba(23,29,5,.78);color:var(--olive);font-size:.66rem;line-height:1.3;opacity:0;pointer-events:none;transition:opacity .3s var(--ease) .35s}
.fcard__credit a{text-decoration:underline;text-underline-offset:.15em}
.fcard__flip[aria-pressed="true"] ~ .fcard__credit{opacity:1;pointer-events:auto}
.fcard__txt{padding-top:.7rem;display:grid;gap:.2rem}
.fcard__n,.fcard__s{overflow-wrap:anywhere;hyphens:auto}
.fcard__n{font-family:var(--f-display);font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.1;margin:0}
.fcard__s{margin:0;font-size:.86rem;opacity:.85}
.fcard__b{margin:.3rem 0 0;display:flex;flex-wrap:wrap;gap:.3rem}
.fcard__b span{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.15rem .5rem;border:1px solid var(--olive-line);border-radius:999px;opacity:.9}
.fcard__b .is-b{background:var(--olive);color:var(--green);border-color:var(--olive)}
.fcard__ill{margin:.2rem 0 0;font-size:.7rem;opacity:.6}
.fauna__legend{margin-top:1.6rem;max-width:62ch}
/* Sin animación 3D si se prefiere menos movimiento: fundido simple */
.rm .fcard__in{transition:none}
@media (prefers-reduced-motion:reduce){.fcard__in{transition:none}.fcard__flip:hover .fcard__in{transform:none}}
.rm .fcard__flip[aria-pressed="true"] .fcard__in,.rm .fcard__flip:hover .fcard__in{transform:none}
.rm .fcard__face{backface-visibility:visible;-webkit-backface-visibility:visible;transition:opacity .25s}
.rm .fcard__back{transform:none;opacity:0}
.rm .fcard__flip[aria-pressed="true"] .fcard__back{opacity:1}
.rm .fcard__flip[aria-pressed="true"] .fcard__front{opacity:0}

/* Subtítulo editorial bajo un h2 */
.subtitle{font-family:var(--f-display);font-style:italic;font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.2;opacity:.92;margin-top:-.4rem}

/* ---------- Idiomas (es · en · de · fr) ---------- */
.lang{display:none;align-items:center;gap:.15rem;margin-left:clamp(.4rem,1.2vw,1.2rem)}
.lang a{font-size:.72rem;font-weight:700;letter-spacing:.14em;padding:.55rem .4rem;opacity:.65;border-bottom:1px solid transparent;transition:opacity .2s var(--ease),border-color .2s var(--ease)}
@media (hover:hover){.lang a:hover{opacity:1}}
.lang a[aria-current="true"]{opacity:1;border-color:currentColor}
@media (min-width:1280px){.lang{display:flex}}
.menu__lang{display:flex;gap:.4rem 1.4rem;margin-top:1.4rem;font-size:.82rem;font-weight:700;letter-spacing:.16em}
.menu__lang a{padding:.5rem 0;opacity:.75;border-bottom:1px solid transparent}
.menu__lang a[aria-current="true"]{opacity:1;border-color:currentColor}
.ftr__lang{border-top:1px solid var(--olive-line);padding-block:1.2rem;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-items:center;font-size:.9rem}
.ftr__lang span{font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.75}
.ftr__lang a[aria-current="true"]{border-color:currentColor}
.chat__priv{font-size:.72rem;line-height:1.4;opacity:.75;padding:.5rem 1rem 0}
.chat__priv a{text-decoration:underline}
/* Alemán: palabras compuestas largas en títulos y navegación */
:lang(de) h1,:lang(de) h2,:lang(de) h3{hyphens:auto;overflow-wrap:break-word}
:lang(de) .nav a{letter-spacing:.1em}
.nav a{white-space:nowrap}
.hdr__logo{flex:none}

/* ---------- Página legal (política de privacidad) ---------- */
.phero--text{position:relative;min-height:0;background:var(--green);color:var(--olive)}
.phero--text .phero__in{padding-top:calc(var(--hdr) + 3.5rem)}
.legal{max-width:46rem;display:grid;gap:1.1rem;font-size:1.02rem;line-height:1.7}
.legal .ph{font-size:clamp(1.35rem,2.4vw,1.8rem);line-height:1.2;margin-top:1.6rem}
.legal ul{margin:0;padding-left:1.2rem;display:grid;gap:.7rem}
.legal li{padding-left:.2rem}
.legal a{text-decoration:underline;text-underline-offset:.18em}
.legal__upd{opacity:.8}

/* Opiniones: nota de traducción y enlace a Google */
.q footer small{display:block;margin-top:.35rem;font-size:.74rem;opacity:.7;font-style:normal}
.quotes__g{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:center;margin-top:1.4rem;font-size:.92rem}
.quotes__g a{display:inline-flex;gap:.4rem;align-items:center;text-decoration:underline;text-underline-offset:.2em}
.quotes__g a svg{width:1rem;height:1rem}