/* Página de patrimonio (patrimonio.html / patrimoni.html). Se apoya en totem.css y cambia su aspecto solo aquí:
   papel cálido, negro y un único acento; titulares en serif; esquinas rectas; sin degradados ni textura. */
:root{
  --navy:#121110; --navy-2:#1B1A18; --navy-3:#262422;
  --wall:#F3EFE6; --wall-2:#E8E1D3; --white:#FBF9F4;
  --ink:#151311; --ink-soft:#5A544C;
  --mist:#F7F4EE; --mist-soft:#B9B3A8;
  --blue:#8F3A22; --moss:#8F3A22; --moss-deep:#8F3A22; --amber:#C9A46A;
  --display:"Source Serif 4", Georgia, "Times New Roman", serif;
  --body:"Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-lg:6px; --r-md:4px; --r-sm:3px;
}
body.light{--bg-3:#DAD2C2;--rule:#D3CBBB}
body{font-size:18px;line-height:1.6}
.grain::after{display:none}

/* Titulares: serif, peso medio, sin el apretado de la grotesca */
.vhero h1,.sec-head h2,.feature h2,.close h2{font-weight:600;letter-spacing:-.018em;line-height:1.06}
.vhero h1{font-size:clamp(42px,5.2vw,76px);max-width:15ch}
.card h3,.person h3,.steps h3,.promise h3{font-weight:600;letter-spacing:0}
.nav ul a{color:#D9D4CA}

/* Botones y controles rectos */
.btn{border-radius:4px;border-width:1px;font-weight:600;padding:15px 22px}
.lang{border-radius:4px;border-color:rgba(247,244,238,.35)}
.lang a{border-radius:3px}
.vhero{--fg-soft:#D9D4CA}
.vhero::after{background:
  linear-gradient(90deg,rgba(12,11,10,.80) 0%,rgba(12,11,10,.40) 42%,rgba(12,11,10,0) 70%),
  linear-gradient(0deg,rgba(12,11,10,.92) 0%,rgba(12,11,10,.35) 32%,rgba(12,11,10,0) 58%),
  linear-gradient(180deg,rgba(12,11,10,.55) 0%,rgba(12,11,10,0) 18%)}
.vhero .lead{color:#E9E4DA}
.vhero .note{color:#B9B3A8}
.scroll-cue{border-width:1px;border-color:rgba(247,244,238,.5)}
.media::after{display:none}
.reel,.phone{box-shadow:none}
.facts{border-top-color:rgba(247,244,238,.18)}
.facts b{font-weight:600;font-size:28px}
.person .mono{font-weight:600}
.close{padding:68px 56px}
.close::before{display:none}
.close.blue{background:var(--ink);color:var(--mist)}
.close.blue p{color:var(--mist-soft)}
.close.blue .btn{color:var(--mist)}
.close.blue .btn-solid{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.close.blue .btn-solid:hover,.close.blue .btn-ghost:hover{background:var(--mist);border-color:var(--mist);color:var(--ink)}
footer a{border-bottom-color:var(--rule)}
@media (max-width:960px){
  .vhero::after{background:linear-gradient(0deg,rgba(12,11,10,.94) 10%,rgba(12,11,10,.5) 60%,rgba(12,11,10,.6) 100%)}
  .close{padding:44px 26px}
}

/* Guía en el móvil: demo real dentro de un marco de teléfono */
.feature.guide .inner{grid-template-columns:auto 1fr;gap:72px;align-items:center}
.phone-col{display:grid;justify-items:center;gap:14px}
.phone{width:316px;height:660px;border-radius:40px;border:10px solid #000;background:#000;overflow:hidden;outline:1px solid rgba(247,244,238,.22)}
.phone iframe{width:390px;height:844px;border:0;display:block;transform:scale(.759);transform-origin:0 0;background:#0E1722}
.phone-note{margin:0;font-size:15px;color:var(--mist-soft)}
.feature.guide p{max-width:36em}
.does{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid rgba(247,244,238,.18)}
.does li{padding:16px 0;border-bottom:1px solid rgba(247,244,238,.18);color:var(--mist-soft);font-size:17px}
.does b{display:block;color:var(--mist);font:600 21px/1.25 var(--display);margin-bottom:4px}
.try{display:flex;gap:20px;align-items:center;margin-top:28px}
.try img{background:#fff;border-radius:4px;padding:6px;flex:none}
.try b{display:block;font:600 21px/1.2 var(--display);color:var(--amber)}
.try a{display:inline-block;font-weight:600;color:var(--mist);margin:4px 0 6px}
.try span{display:block;font-size:15px;color:var(--mist-soft);max-width:30em}

/* Retos: la necesidad primero, lo que haríamos después */
.formats{border-top:1px solid var(--ink)}
.format{display:grid;grid-template-columns:260px 1fr 320px;gap:44px;align-items:center;padding:36px 0;border-bottom:1px solid var(--rule)}
.format h3{font:600 30px/1.1 var(--display);letter-spacing:-.01em;margin:0;color:var(--ink);text-wrap:balance}
.format p{margin:0 0 14px}
.format .reto{color:var(--ink-soft)}
.format .haria{margin:0}
.format .haria b{display:block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:6px}
.format small{display:block;color:var(--ink-soft);font-size:15px;margin-top:12px;font-style:italic}

/* Human Universe */
.feature.hu > .wrap{padding-top:104px;padding-bottom:104px}
.hu-head{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:end;margin-bottom:48px}
.hu-head h2{margin:0}
.hu-head p:last-child{margin-bottom:0}
.kicker{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--amber) !important;margin:0 0 14px !important}
.hu-grid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:16px}
.hu-grid .media{aspect-ratio:auto;min-height:200px}
.hu-grid .media.big{grid-row:span 2;aspect-ratio:16/9}

/* Piloto (es una secuencia real) */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;counter-reset:s;margin:0;padding:0;list-style:none}
.steps li{border-top:1px solid var(--ink);padding-top:18px;counter-increment:s}
.steps li::before{content:counter(s);display:block;font:400 44px/1 var(--display);color:var(--blue);margin-bottom:14px}
.steps h3{font-size:22px;line-height:1.2;font-family:var(--display);margin:0 0 8px}
.steps p{margin:0;font-size:16px;color:var(--ink-soft)}
.promise{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:56px;border-top:1px solid var(--ink)}
.promise > div{padding:26px 28px 0 0}
.promise h3{font-size:22px;line-height:1.2;font-family:var(--display);margin:0 0 8px}
.promise p{margin:0;font-size:16px;color:var(--ink-soft)}

@media (max-width:960px){
  .feature.guide .inner{grid-template-columns:1fr;gap:44px}
  .format{grid-template-columns:1fr;gap:14px}
  .feature.hu > .wrap{padding-top:72px;padding-bottom:72px}
  .hu-head{grid-template-columns:1fr;gap:20px}
  .hu-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .hu-grid .media.big{grid-column:span 2;grid-row:auto}
  .hu-grid .media{aspect-ratio:16/10;min-height:0}
  .steps{grid-template-columns:1fr 1fr}
  .promise{grid-template-columns:1fr}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr}
  .try{align-items:flex-start}
  .try img{width:88px;height:88px}
}

/* Capturas de la app: la pantalla del móvil sobre un panel oscuro, sin recortar ni ampliar */
.format .media.shot{aspect-ratio:4/5;background:var(--navy)}
.media.shot img{position:absolute;inset:auto;left:17%;top:9%;width:66%;height:auto;object-fit:fill;border-radius:22px;border:6px solid #000;outline:1px solid rgba(247,244,238,.22)}
.media.shot.low img{top:auto;bottom:9%}
.card:hover .media.shot img{transform:none}
@media (max-width:960px){
  .format .media.shot{aspect-ratio:4/3}
  .media.shot img{width:46%;left:27%}
}

/* Lo que busca la institución: cuatro necesidades, con su fuente */
.needs{display:grid;grid-template-columns:1fr 1fr;gap:0 64px;border-top:1px solid var(--ink)}
.need{padding:30px 0 32px;border-bottom:1px solid var(--rule)}
.need h3{font:600 26px/1.15 var(--display);letter-spacing:-.01em;margin:0 0 10px;text-wrap:balance}
.need p{margin:0;color:var(--ink-soft);max-width:34em}
.src{margin:22px 0 0;font-size:14px;color:var(--ink-soft);max-width:60em}

/* Paso a paso con Landmarks */
.feature.guide .inner{align-items:start}
.phone-col{position:sticky;top:28px}
.how{list-style:none;margin:30px 0 0;padding:0;counter-reset:h;border-top:1px solid rgba(247,244,238,.18)}
.how li{counter-increment:h;display:grid;grid-template-columns:44px 1fr;column-gap:8px;padding:16px 0;border-bottom:1px solid rgba(247,244,238,.18)}
.how li::before{content:counter(h);grid-row:span 2;font:400 30px/1.05 var(--display);color:var(--amber)}
.how h3{font:600 21px/1.25 var(--display);margin:0 0 4px;color:var(--mist)}
.how p{margin:0;font-size:17px;color:var(--mist-soft);max-width:none}

@media (max-width:960px){
  .needs{grid-template-columns:1fr}
  .phone-col{position:static}
}

/* Encabezado con foto fija (sin video en bucle) */
.vhero > img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;z-index:-2;animation:heroin 1.8s ease-out both}
@keyframes heroin{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.vhero > img.bg{animation:none}}

/* La ruta: paradas numeradas */
.route{list-style:none;margin:0;padding:0;counter-reset:r;display:grid;grid-template-columns:repeat(3,1fr);gap:40px 24px}
.stop{counter-increment:r}
.stop .state{margin:14px 0 2px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.stop.live .state{color:var(--blue)}
.stop h3{font:600 23px/1.2 var(--display);margin:0 0 6px}
.stop h3::before{content:counter(r) ". ";color:var(--blue)}
.stop p{margin:0;font-size:16px;color:var(--ink-soft)}
.route-note{margin:44px 0 0;padding-top:22px;border-top:1px solid var(--ink);max-width:46em;font-size:19px}
@media (max-width:960px){.route{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.route{grid-template-columns:1fr}}

/* Mapa de la ruta */
.route-map{display:grid;grid-template-columns:1fr 260px;gap:32px;align-items:start;margin-top:56px}
#mapa-ruta{height:460px;border-radius:var(--r-md);background:var(--wall-2);z-index:0}
#mapa-ruta .leaflet-tile-pane{filter:grayscale(1) sepia(.28) contrast(.92) brightness(1.04)}
.pin{display:grid;place-items:center;border-radius:50%;background:var(--blue);color:#fff;font:700 15px/1 var(--body);border:2px solid var(--wall);box-shadow:0 1px 4px rgba(0,0,0,.35)}
.map-legend{margin:0;padding:0;list-style:none;counter-reset:m;border-top:1px solid var(--ink)}
.map-legend li{counter-increment:m;padding:12px 0;border-bottom:1px solid var(--rule);font:600 18px/1.25 var(--display)}
.map-legend li::before{content:counter(m);display:inline-grid;place-items:center;width:26px;height:26px;margin-right:12px;border-radius:50%;background:var(--blue);color:#fff;font:700 13px/1 var(--body);vertical-align:2px}

/* Cómo se guía de una parada a otra */
.guide-how{display:grid;grid-template-columns:1fr 1.6fr;gap:56px;align-items:start;margin-top:64px}
.kicker.dark{color:var(--blue) !important}
.guide-text h3{font:600 30px/1.12 var(--display);letter-spacing:-.01em;margin:0 0 14px;text-wrap:balance}
.guide-text p{margin:0;color:var(--ink-soft)}
.screens{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.screens li > p{margin:12px 0 0;font-size:15px;color:var(--ink-soft)}
.screen{display:flex;flex-direction:column;gap:6px;aspect-ratio:9/15;padding:22px 18px 18px;border-radius:22px;background:var(--navy);color:var(--mist);border:5px solid #000}
.screen .s-tag{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.screen b{font:600 20px/1.15 var(--display)}
.screen .s-meta{font-size:13px;color:var(--mist-soft)}
.screen svg{flex:1;width:100%;min-height:0;color:var(--amber);margin:6px 0}
.screen .s-btn{display:block;text-align:center;padding:10px;border-radius:4px;background:var(--amber);color:var(--ink);font-weight:700;font-size:14px}
.screen .s-btn.ghost{background:none;border:1px solid rgba(247,244,238,.4);color:var(--mist)}

@media (max-width:960px){
  .route-map{grid-template-columns:1fr}
  #mapa-ruta{height:360px}
  .guide-how{grid-template-columns:1fr;gap:28px}
}
@media (max-width:560px){.screens{grid-template-columns:1fr 1fr}}

/* Números de las paradas centrados en el mapa */
.leaflet-marker-icon.pin{display:block;text-align:center;line-height:26px;font-size:15px}

/* Más allá de la ruta: recomendaciones y próximas rutas */
.beyond{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:72px;padding-top:40px;border-top:1px solid var(--ink)}
.beyond h3{font:600 30px/1.12 var(--display);letter-spacing:-.01em;margin:0 0 14px;text-wrap:balance}
.beyond p{margin:0;color:var(--ink-soft)}
.recs,.next-routes{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--rule)}
.recs li,.next-routes li{padding:14px 0;border-bottom:1px solid var(--rule);color:var(--ink-soft);font-size:16px}
.recs b,.next-routes b{display:block;font:600 20px/1.25 var(--display);color:var(--ink);margin-bottom:2px}
.next-routes span{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:4px}
@media (max-width:960px){.beyond{grid-template-columns:1fr;gap:44px}}

/* Colaboraciones */
.collab{margin:44px 0 0;padding-top:22px;border-top:1px solid var(--ink);max-width:46em;font-size:19px}