/* ENTRE OSOS Y SENDAS — sistema de diseño */
:root{
  --papel:#F5F1E8;        /* blanco roto, fondo */
  --papel-2:#EDE7DA;      /* bloque alterno */
  --tinta:#26241F;        /* texto */
  --tinta-suave:#5C574E;  /* secundario */
  --musgo:#3D4A3C;        /* verde profundo */
  --tierra:#9C6B3E;       /* ocre, acento */
  --linea:rgba(38,36,31,.16);
  --serif:"American Typewriter","Zilla Slab",Rockwell,"Courier New",Georgia,serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --max:1240px;
  --gutter:clamp(20px,5vw,64px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--sans);font-size:clamp(16px,1.05vw,18px);line-height:1.75;
  font-weight:300;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:720px}
.center{text-align:center}

/* Tipografía */
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.005em;line-height:1.16;margin:0;
  overflow-wrap:break-word;word-wrap:break-word;hyphens:auto}
h1{font-size:clamp(2rem,5.4vw,4.6rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.8rem)}
h3{font-size:clamp(1.25rem,1.8vw,1.6rem)}
p{margin:0 0 1.2em}
h1+p,h1+.lead{margin-top:clamp(.8em,1.6vw,1.1em)}
h2+p,h2+.lead{margin-top:clamp(1em,2vw,1.45em)}
h3+p{margin-top:.6em}
.rule+p,.rule+.lead{margin-top:0}
.lead{font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.6;color:var(--tinta-suave)}
.kicker{font-family:var(--sans);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--tierra);font-weight:400;margin:0 0 1.4em}
.rule{width:56px;height:1px;background:var(--tierra);border:0;margin:2.4em 0}
.center .rule{margin-left:auto;margin-right:auto}

/* Cabecera */
.site-head{position:sticky;top:0;z-index:50;background:rgba(245,241,232,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--linea)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:24px;min-height:108px}
.brand{display:flex;align-items:center;text-decoration:none;padding:12px 0}
.brand img{height:clamp(46px,5vw,62px);width:auto;flex:0 0 auto}
nav ul{display:flex;gap:clamp(18px,2.4vw,38px);list-style:none;margin:0;padding:0}
nav a{text-decoration:none;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  padding-bottom:3px;border-bottom:1px solid transparent;transition:.25s}
nav a:hover,nav a[aria-current]{border-color:var(--tierra)}
.burger{display:none;background:none;border:0;font:inherit;cursor:pointer;padding:8px}
.burger span{display:block;width:24px;height:1px;background:var(--tinta);margin:6px 0;transition:.3s}
@media(max-width:860px){
  .burger{display:block;margin-left:auto;position:relative;z-index:120}
  .burger span{transition:transform .38s cubic-bezier(.2,.8,.2,1),opacity .2s}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.4)}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .site-head{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--papel)}
  .site-head .wrap{min-height:72px;gap:12px}
  .brand img{height:52px}
  .brand{position:relative;z-index:120}

  /* Menú a pantalla completa */
  nav{position:fixed;inset:0;z-index:110;padding:0;border:0;
    background:rgba(245,241,232,.72);
    -webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);
    display:flex;align-items:center;justify-content:center;
    opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s}
  nav.open{opacity:1;visibility:visible}
  nav::after{content:"";position:absolute;left:50%;bottom:9vh;width:44px;height:1px;
    background:var(--tierra);transform:translateX(-50%) scaleX(0);
    transition:transform .5s ease .45s}
  nav.open::after{transform:translateX(-50%) scaleX(1)}
  nav ul{flex-direction:column;gap:clamp(14px,3.4vh,26px);text-align:center;width:100%}
  nav li{opacity:0;transform:translateY(14px);
    transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
  nav.open li{opacity:1;transform:none}
  nav.open li:nth-child(1){transition-delay:.10s}
  nav.open li:nth-child(2){transition-delay:.17s}
  nav.open li:nth-child(3){transition-delay:.24s}
  nav.open li:nth-child(4){transition-delay:.31s}
  nav.open li:nth-child(5){transition-delay:.38s}
  nav a{font-family:var(--serif);font-size:clamp(1.6rem,7vw,2.4rem);
    letter-spacing:0;text-transform:none;border:0;padding:6px 0;display:inline-block}
  nav a[aria-current]{color:var(--tierra);position:relative}
  nav a[aria-current]::before{content:"";position:absolute;
    left:-2.1em;top:50%;width:.78em;height:.93em;
    background:url("../img/huella.png") center/contain no-repeat;
    transform:translateY(-50%) rotate(-12deg);opacity:.9}
  body.menu-abierto{overflow:hidden}

}
@media(max-width:860px) and (prefers-reduced-motion:reduce){
  nav li{transition:none}
}

/* Portada */
.hero{position:relative;min-height:min(88vh,860px);display:flex;align-items:flex-end;
  overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,22,18,.30) 0%,rgba(20,22,18,.05) 40%,rgba(20,22,18,.68) 100%)}
.hero .wrap{position:relative;z-index:2;color:#F7F4EC;padding-bottom:clamp(48px,8vw,110px);width:100%}
.hero h1{color:#F7F4EC;max-width:14ch}
.hero .kicker{color:rgba(247,244,236,.82)}
.hero p{max-width:46ch;color:rgba(247,244,236,.9);margin-top:1.2em}
.hero-logo{width:min(760px,86vw);margin-bottom:clamp(20px,3vw,34px)}
.foot-logo{width:min(230px,62%);margin-bottom:1.4em}

.page-head{padding-top:clamp(64px,9vw,130px);padding-bottom:clamp(30px,4vw,56px)}
.page-head .lead{max-width:56ch}

section{padding:clamp(56px,8vw,116px) 0}
.alt{background:var(--papel-2)}
.dark{background:var(--musgo);color:#EFEBE0}
.dark .lead,.dark p{color:rgba(239,235,224,.82)}
.dark .kicker{color:#C9A276}
.dark .rule{background:#C9A276}

/* Rejillas */
.split>*,.cols-3>*,.mosaic>*,.foot-grid>*,.ideas li>*{min-width:0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
.split.text-first{grid-template-columns:.9fr 1.1fr}
@media(max-width:820px){.split,.split.text-first{grid-template-columns:1fr}}
.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,52px)}
@media(max-width:820px){.cols-3{grid-template-columns:1fr}}

figure{margin:0}
figcaption{font-size:.78rem;letter-spacing:.05em;line-height:1.5;color:var(--tinta-suave);
  padding:.95em 0 0}
.frame>figcaption{padding:.95em 1.1em 1.1em}
.frame{overflow:hidden;background:var(--papel-2)}
.frame img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
a.frame:hover img,.frame:hover img{transform:scale(1.03)}
.ratio-4-5 img{aspect-ratio:4/5;object-fit:cover;width:100%}
.ratio-3-2 img{aspect-ratio:3/2;object-fit:cover;width:100%}
.ratio-16-9 img{aspect-ratio:16/9;object-fit:cover;width:100%}

/* Galería del estado actual: piezas pequeñas, tono documento */
.doc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px)}
@media(max-width:900px){.doc-grid{grid-template-columns:repeat(2,1fr)}}
.doc-grid figure img{aspect-ratio:1/1;object-fit:cover;filter:saturate(.72) contrast(1.02)}
.doc-grid figure:hover img{filter:none}

.mosaic{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.6vw,22px)}
.mosaic .a{grid-column:span 4}.mosaic .b{grid-column:span 2}
.mosaic .c{grid-column:span 2}.mosaic .d{grid-column:span 4}
.mosaic .e{grid-column:span 3}.mosaic .f{grid-column:span 3}
@media(max-width:820px){.mosaic{grid-template-columns:1fr}.mosaic>*{grid-column:1/-1!important}}

/* Listas de ideas */
.ideas{list-style:none;margin:0;padding:0;counter-reset:i}
.ideas li{counter-increment:i;padding:26px 0;border-top:1px solid var(--linea);
  display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:start}
.ideas li::before{content:"0" counter(i);font-family:var(--serif);color:var(--tierra);font-size:1.1rem}
.ideas li:last-child{border-bottom:1px solid var(--linea)}
.dark .ideas li{border-color:rgba(239,235,224,.18)}

blockquote{margin:0;overflow-wrap:break-word;hyphens:auto;font-family:var(--serif);font-size:clamp(1.4rem,2.7vw,2.15rem);
  line-height:1.28;max-width:20ch}
.pull{max-width:24ch}
.pull.ancha{max-width:none;text-wrap:balance}

/* Pie */
.site-foot{background:var(--musgo);color:#EFEBE0;padding:clamp(52px,7vw,96px) 0 8px}
.site-foot p,.site-foot .lead{color:#F7F4EC}
.site-foot .lead{font-size:.95rem;line-height:1.65;max-width:32ch}
.site-foot a{color:#EFEBE0;text-decoration:none;border-bottom:1px solid rgba(239,235,224,.32)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr}}
.site-foot h3{font-size:1.3rem;margin-bottom:.5em}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:.5em;font-size:.92rem}
.legal{margin-top:clamp(40px,6vw,72px);padding:22px 0 34px;border-top:1px solid rgba(239,235,224,.2);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(239,235,224,.66)}

.btn{display:inline-block;text-decoration:none;border:1px solid currentColor;
  padding:14px 30px;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;transition:.3s}
.btn:hover{background:var(--tierra);border-color:var(--tierra);color:#F7F4EC}

/* aparición suave */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* Formulario de contacto */
.form{max-width:520px}
.campo{margin:0 0 1.5em}
.campo label{display:block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tinta-suave);margin-bottom:.6em}
.campo input[type=text],.campo input[type=email],.campo textarea{
  width:100%;font:inherit;color:var(--tinta);background:transparent;
  border:0;border-bottom:1px solid var(--linea);padding:10px 2px;border-radius:0;
  transition:border-color .3s}
.campo textarea{resize:vertical;border:1px solid var(--linea);padding:12px}
.campo input:focus,.campo textarea:focus{outline:0;border-color:var(--tierra)}
.campo.check label{display:flex;gap:10px;align-items:flex-start;text-transform:none;
  letter-spacing:0;font-size:.86rem;color:var(--tinta-suave);line-height:1.5}
.campo.check input{accent-color:var(--tierra);margin-top:3px;flex:0 0 auto}
.form button{background:none;color:var(--tinta);cursor:pointer;font-family:var(--sans)}
.aviso{padding:16px 20px;border-left:2px solid var(--tierra);background:var(--papel-2);
  margin-bottom:2em;font-size:.92rem}
.aviso.error{border-color:#a33}

/* Iconos de actividades */
.icono{width:clamp(44px,4vw,54px);height:auto;color:var(--tierra);
  display:block;margin:0 0 1.1em;stroke-width:1.4}

/* Visor de fotos */
.visor{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(24,26,22,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
.visor.abierto{opacity:1;visibility:visible}
.visor figure{margin:0;max-width:min(1200px,92vw);max-height:86vh;display:flex;
  flex-direction:column;align-items:center;gap:14px}
.visor img{max-width:min(1200px,92vw);max-height:78vh;width:auto;height:auto;object-fit:contain;
  opacity:0;transform:scale(.985);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.visor.listo img{opacity:1;transform:none}
.visor figcaption{color:rgba(247,244,236,.78);font-size:.8rem;letter-spacing:.06em;
  text-align:center;padding:0}
.visor button{position:absolute;background:none;border:0;color:#F7F4EC;cursor:pointer;
  padding:14px;line-height:0;opacity:.75;transition:opacity .25s}
.visor button:hover{opacity:1}
.visor .cerrar{top:clamp(10px,2vw,22px);right:clamp(10px,2vw,22px)}
.visor .ant{left:clamp(4px,1.5vw,20px);top:50%;transform:translateY(-50%)}
.visor .sig{right:clamp(4px,1.5vw,20px);top:50%;transform:translateY(-50%)}
.visor svg{width:30px;height:30px;stroke:currentColor;stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.visor .cuenta{position:absolute;bottom:clamp(14px,3vh,30px);left:50%;transform:translateX(-50%);
  color:rgba(247,244,236,.6);font-size:.72rem;letter-spacing:.24em}
body.visor-abierto{overflow:hidden}
.frame img{cursor:zoom-in}
@media(max-width:700px){.visor .ant,.visor .sig{top:auto;bottom:8vh;transform:none}
  .visor .ant{left:14vw}.visor .sig{right:14vw}}

/* Mapa de la portada */
.mapa{height:clamp(360px,54vh,540px);width:100%;background:var(--papel);
  border:1px solid var(--linea)}
.split .mapa{height:clamp(340px,46vh,470px)}
.mapa-nota{font-size:.74rem;letter-spacing:.06em;color:var(--tinta-suave);margin:1em 0 0}
.leaflet-container{font-family:var(--sans)}
.pin-casa span,.pin-punto span{display:block;border-radius:50%;box-sizing:border-box}
.pin-casa span{width:18px;height:18px;background:var(--tierra);
  border:3px solid var(--papel);box-shadow:0 0 0 1px rgba(38,36,31,.25)}
.pin-casa b{position:absolute;left:24px;top:0;font-family:var(--serif);font-weight:400;
  font-size:.86rem;white-space:nowrap;color:var(--tinta);
  background:rgba(245,241,232,.9);padding:1px 7px;border-radius:2px}
.pin-punto span{width:12px;height:12px;background:var(--musgo);
  border:2px solid var(--papel);box-shadow:0 0 0 1px rgba(38,36,31,.2);
  transition:transform .25s}
.pin-punto:hover span{transform:scale(1.35)}
.leaflet-popup-content-wrapper{border-radius:2px;background:var(--papel);
  color:var(--tinta);box-shadow:0 6px 26px rgba(38,36,31,.18)}
.leaflet-popup-content{margin:0;width:210px!important;font-size:.82rem;line-height:1.4}
.leaflet-popup-content img{width:100%;height:120px;object-fit:cover;display:block;margin-bottom:9px}
.leaflet-popup-content strong{display:block;font-family:var(--serif);font-weight:400;
  font-size:.95rem;padding:0 11px 11px}
.leaflet-popup-tip{background:var(--papel)}
.leaflet-control-zoom a{color:var(--tinta)!important;background:var(--papel)!important;
  border-color:var(--linea)!important}

.leaflet-control-attribution{background:rgba(245,241,232,.78)!important;
  font-size:9px!important;letter-spacing:.02em;color:var(--tinta-suave)!important;
  padding:1px 6px!important}
.leaflet-control-attribution a{color:var(--tinta-suave)!important;text-decoration:none}

/* Franja Kit Digital */
.kit{background:var(--papel);padding:clamp(30px,5vw,54px) 0 clamp(34px,5vw,58px)}
.kit img{max-width:560px;width:100%;margin:0 auto;display:block;
  mix-blend-mode:multiply}
.legal .credito a{border-bottom-color:rgba(239,235,224,.28)}

/* Páginas legales */
.doc-legal{max-width:760px}
.doc-legal h2{font-size:clamp(1.25rem,1.9vw,1.6rem);margin:2.2em 0 .7em}
.doc-legal h2:first-child{margin-top:0}
.doc-legal ul{padding-left:1.1em;margin:0 0 1.4em}
.doc-legal li{margin-bottom:.5em}
.doc-legal a{color:var(--tierra)}
.doc-fecha{margin-top:3em;padding-top:1.2em;border-top:1px solid var(--linea);
  font-size:.82rem;color:var(--tinta-suave)}
.tabla{width:100%;border-collapse:collapse;margin:0 0 1.8em;font-size:.86rem;
  display:block;overflow-x:auto}
.tabla th,.tabla td{border:1px solid var(--linea);padding:10px 12px;text-align:left;
  vertical-align:top;min-width:120px}
.tabla th{font-weight:400;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-suave);background:var(--papel-2)}

/* Aviso de cookies */
.cookies{position:fixed;left:0;right:0;bottom:0;z-index:180;padding:0 var(--gutter) clamp(14px,3vw,26px);
  opacity:0;transform:translateY(16px);transition:opacity .45s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.cookies.visible{opacity:1;transform:none}
.cookies-caja{max-width:var(--max);margin:0 auto;background:var(--papel);
  border:1px solid var(--linea);box-shadow:0 10px 40px rgba(38,36,31,.14);
  padding:clamp(18px,2.4vw,26px);display:flex;gap:clamp(16px,3vw,34px);
  align-items:center;justify-content:space-between;flex-wrap:wrap}
.cookies-caja p{margin:0;font-size:.86rem;line-height:1.6;max-width:64ch;color:var(--tinta-suave)}
.cookies-caja a{color:var(--tierra)}
.cookies-btns{display:flex;gap:12px;flex-wrap:wrap}
.cookies .btn{padding:11px 20px;font-size:.7rem;white-space:nowrap}
.btn-solido{background:var(--musgo);border-color:var(--musgo);color:#F7F4EC}
.btn-solido:hover{background:var(--tierra);border-color:var(--tierra)}
@media(max-width:620px){.cookies-caja{flex-direction:column;align-items:stretch}
  .cookies-btns .btn{flex:1;text-align:center}}

/* Índice del mapa del sitio */
.indice{list-style:none;padding:0;margin:0 0 1em}
.indice li{border-top:1px solid var(--linea)}
.indice li:last-child{border-bottom:1px solid var(--linea)}
.indice a{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;
  padding:16px 2px;text-decoration:none;color:var(--tinta);transition:padding .3s,color .3s}
.indice a:hover{padding-left:10px;color:var(--tierra)}
.indice span{font-family:var(--serif);font-size:1.05rem;min-width:9em}
.indice em{font-style:normal;font-size:.86rem;color:var(--tinta-suave)}

/* La huella como recurso gráfico */
.icono-huella{width:clamp(40px,3.6vw,50px);height:auto;display:block;margin:0 0 1.1em}

.senda{display:flex;align-items:center;justify-content:flex-start;gap:clamp(14px,2vw,24px);
  margin:2.2em 0}
.center .senda{justify-content:center}
.senda span{width:clamp(15px,1.5vw,20px);height:clamp(18px,1.8vw,23px);
  background:url("../img/huella.png") center/contain no-repeat;
  opacity:.55;display:block}
.senda span:nth-child(1){transform:rotate(-14deg) translateY(3px);opacity:.3}
.senda span:nth-child(2){transform:rotate(4deg);opacity:.45}
.senda span:nth-child(3){transform:rotate(-6deg) translateY(2px);opacity:.62}
.senda-clara span{background-image:url("../img/huella-clara.png")}

.con-huella{position:relative;overflow:hidden}
.con-huella::before{content:"";position:absolute;right:-3%;bottom:-14%;
  width:min(360px,42vw);height:min(430px,50vw);
  background:url("../img/huella-clara.png") center/contain no-repeat;
  opacity:.055;transform:rotate(-12deg);pointer-events:none}
.con-huella>*{position:relative;z-index:1}

/* Huella sobre la foto de portada */
.rastro{position:absolute;inset:0;z-index:1;pointer-events:none}
.rastro span{position:absolute;display:block;
  background:url("../img/huella-blanca.png") center/contain no-repeat;
  width:min(420px,32vw);height:min(500px,38vw);
  right:7%;bottom:12%;transform:rotate(-14deg);opacity:.22}
@media(max-width:860px){
  .rastro span{width:min(240px,52vw);height:min(286px,62vw);
    right:6%;top:7%;bottom:auto;opacity:.24}
}
}

/* Portada en móvil: contenido centrado verticalmente (va al final para
   que gane a las reglas generales del hero, que están más arriba) */
@media(max-width:860px){
  .hero{align-items:center}
  .hero .wrap{padding-top:0;padding-bottom:0}
  .hero h1{max-width:none}
  .hero::after{background:linear-gradient(180deg,rgba(20,22,18,.42) 0%,rgba(20,22,18,.28) 45%,rgba(20,22,18,.55) 100%)}
}

/* Pie centrado en móvil */
@media(max-width:820px){
  .site-foot{text-align:center}
  .foot-grid{gap:34px;justify-items:center}
  .site-foot .lead{margin-left:auto;margin-right:auto}
  .foot-logo{margin-left:auto;margin-right:auto}
  .legal{flex-direction:column;align-items:center;text-align:center;gap:12px}
  .legal-links{line-height:2}
}

/* Textos SEO añadidos desde el panel */
.seo-texto{padding:clamp(34px,5vw,64px) 0}
.seo-texto p{margin-bottom:1em}
.seo-texto h2,.seo-texto h3{margin-bottom:.5em}
/* Selector de idioma en el menú */
.idiomas-nav{display:flex;gap:10px;margin-left:8px;padding-left:16px;border-left:1px solid var(--linea)}
.idiomas-nav a[aria-current]{color:var(--tierra);border-bottom-color:var(--tierra)}
@media(max-width:860px){
  .idiomas-nav{border-left:0;padding-left:0;margin-left:0;justify-content:center;gap:20px;
    margin-top:18px;padding-top:18px;border-top:1px solid var(--linea)}
  .idiomas-nav a{font-family:var(--sans);font-size:.9rem;letter-spacing:.18em}
}