/* WEB-V5: superficies de lectura, paisaje localizado y transición acotada.
   El follaje se recorta por esquina; nunca se estira como un marco completo. */
:root {
  --azul-institucional: #cde6f5;
  --tinta-institucional: #215779;
  --papel-mapotas: #fbf8f1;
  --salvia-mapotas: #e8eee7;
  --tinta-mapotas: #163b31;
}

body.pagina-landing, body.pagina-municipios {
  background: var(--papel-mapotas);
  color: var(--ink);
}

.cabecera { background: #fbf8f1; }
.cabecera nav .nav-entidades {
  border: 1px solid #aed2e8;
  background: var(--azul-institucional);
  color: var(--tinta-institucional);
  box-shadow: none;
}
.cabecera nav .nav-entidades:hover,
.cabecera nav .nav-entidades:focus-visible {
  background: #b9dced;
  border-color: #86b9d6;
  color: #163e59;
}
.cabecera nav .nav-entidades:focus-visible { outline-color: #367ca4; }

/* El paisaje vive en el mismo plano sticky que el contenido del hero. */
.pagina-landing .hero-narra {
  height: 165vh;
  height: 165svh;
  background: var(--papel-mapotas);
}
.pagina-landing .hero-narra-fix {
  height: 100vh;
  height: 100svh;
  background:
    linear-gradient(0deg, var(--papel-mapotas), transparent 22%),
    linear-gradient(90deg, rgba(251,248,241,.9), rgba(251,248,241,.76) 54%, rgba(251,248,241,.35)),
    url('/img/optimized/entorno/plaza-torre.webp') center 54% / cover no-repeat;
}
.pagina-landing .hero-narra-fix::before,
.pagina-landing .hero-narra-fix::after {
  display: block;
  position: absolute;
  z-index: 0;
  top: 3.8rem;
  width: clamp(110px, 17vw, 230px);
  height: clamp(110px, 18vw, 240px);
  background-image: url('/img/optimized/entorno/follage-frame.webp');
  background-repeat: no-repeat;
  background-size: 880px 660px;
  content: '';
  opacity: 1;
  pointer-events: none;
}
.pagina-landing .hero-narra-fix::before {
  left: 0;
  background-position: left top;
  mask-image: linear-gradient(90deg, #000 65%, transparent), linear-gradient(#000 60%, transparent);
  mask-composite: intersect;
}
.pagina-landing .hero-narra-fix::after {
  right: 0;
  bottom: auto;
  background-position: right top;
  mask-image: linear-gradient(90deg, transparent, #000 35%), linear-gradient(#000 60%, transparent);
  mask-composite: intersect;
}
.pagina-landing .hero-emblema,
.pagina-landing .hero-kicker,
.pagina-landing .hero-tagline,
.pagina-landing .hero-cta { z-index: 2; }
html.js .pagina-landing .hero-caida {
  position: absolute;
  inset: 0;
  height: 100%;
  z-index: 1;
  transition: none;
}
.pagina-landing .hero-caida .lucas-cayendo {
  left: max(1rem, calc(50% - 540px));
  width: clamp(150px, 18vw, 245px);
}

/* No marcos vegetales, ni franjas blancas entre película y producto. */
.pagina-landing .pelicula {
  overflow: hidden;
  padding-block: clamp(7rem, 10vw, 9rem) 4.5rem;
  background: linear-gradient(var(--papel-mapotas) 78%, var(--salvia-mapotas));
  border: 0;
}
.pelicula::before, .pelicula-stage::before { display: none; }
.pelicula-inner { width: min(calc(100% - 3rem), 1120px); padding-inline: 0; }
.pelicula-stage { width: 100%; }
.pelicula-heading { margin-bottom: 2rem; }
.pelicula-heading h2 { max-width: 23ch; }
.pelicula-player {
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 18px 46px rgba(48,55,38,.13);
}
#peliculaPlayer { scroll-margin-block: 1rem; }
.pelicula-actions { min-height: 3rem; }
.pelicula-play { min-width: 7.5rem; min-height: 7.5rem; }

/* Las zonas útiles conservan una superficie opaca para la lectura. */
.flujo-real, .pista-real,
.pagina-landing .municipios-real, .pagina-landing .final-real,
.pagina-municipios .caso-compartido, .pagina-municipios .centro-real,
.pagina-municipios .piloto-real, .pagina-municipios .cta-real {
  position: relative;
  isolation: isolate;
}
.flujo-real::before, .flujo-real::after,
.pista-real::before, .pista-real::after,
.pagina-landing .municipios-real::before, .pagina-landing .municipios-real::after,
.pagina-landing .final-real::before, .pagina-landing .final-real::after,
.pagina-municipios .caso-compartido::before, .pagina-municipios .caso-compartido::after,
.pagina-municipios .centro-real::before, .pagina-municipios .centro-real::after,
.pagina-municipios .piloto-real::before, .pagina-municipios .piloto-real::after,
.pagina-municipios .cta-real::before, .pagina-municipios .cta-real::after {
  display: none;
}
.flujo-real > .envoltorio, .pista-real > .envoltorio,
.pagina-landing .municipios-real > .envoltorio, .pagina-landing .final-real > .envoltorio,
.pagina-municipios section > .envoltorio { position: relative; z-index: 1; }

.flujo-real {
  overflow: clip;
  padding-block: 5rem 6rem;
  background: var(--salvia-mapotas);
}
.flujo-real-heading { gap: 2rem; margin-bottom: 2.8rem; }
.flujo-real-heading .titulo-seccion { max-width: 21ch; }
.flujo-real-layout {
  grid-template-columns: minmax(250px,.85fr) minmax(0,1.15fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 6rem);
}
.flujo-real-figure { position: relative; top: auto; }
.flujo-real-figure::before {
  position: absolute;
  z-index: -1;
  inset: -1.5rem -1rem;
  background: url('/img/optimized/entorno/plaza-parque.webp') center / cover;
  mask-image: radial-gradient(ellipse, #000 20%, transparent 72%);
  content: '';
}
.flujo-real-device { width: min(245px, 100%); }
.flujo-real-pasos { display: grid; gap: .65rem; border: 0; }
.flujo-real-pasos li { border: 0; }
.flujo-real-paso, .flujo-real-paso.activo {
  grid-template-columns: 2.75rem minmax(0,1fr);
  align-items: center;
  gap: .95rem;
  padding: 1.1rem;
  border: 1px solid #cbd8cc;
  border-left: 3px solid transparent;
  border-radius: .85rem;
  background: #f4f6ef;
  box-shadow: none;
}
.flujo-real-paso:hover { background: #fffdf7; }
.flujo-real-paso.activo {
  border-left-color: var(--terracota-editorial);
  background: #fffdf7;
  box-shadow: 0 6px 18px rgba(42,65,45,.06);
}
.flujo-real-num {
  display: grid;
  place-items: center;
  justify-self: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: .7rem;
  background: #dce8dc;
  color: var(--bosque);
  letter-spacing: 0;
}
.flujo-real-paso.activo .flujo-real-num { background: #f1dfd0; color: #874d36; }
.flujo-real-paso small { color: #415c50; }

.pista-real {
  padding-block: 5.5rem;
  background: linear-gradient(var(--salvia-mapotas), #f0e5d7);
}
.pista-real > .envoltorio { gap: 3.5rem; }
.pista-real-copy > p:not(.seccion-eyebrow) { color: #41584d; }
.pista-real-editorial { padding-top: .5rem; }
.pista-real-signal { background: #fffdf7; box-shadow: 0 8px 24px rgba(53,59,39,.09); }
.pista-real-map { border: 0; box-shadow: 0 16px 36px rgba(53,59,39,.13); }
.pista-real-editorial > figcaption { color: #41584d; }

.pagina-landing .municipios-real {
  overflow: hidden;
  background: #104c40;
  padding-block: 5.5rem;
}
.municipios-real-layout { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 3.5rem; }
.municipios-real .titulo-seccion { max-width: 18ch; font-size: clamp(2rem,3.2vw,3rem); color: #fffaf0; }
.municipios-real .municipios-intro { color: #d5e5dc; }
.municipios-real-figure { height: auto; overflow: visible; transform: none; }
.municipios-real-figure .producto-frame { background: #fffdf7; }
.municipios-real-figure figcaption { color: #d5e5dc; }

.pagina-landing .final-real {
  overflow: hidden;
  padding-block: 5rem;
  background: #f0e5d7;
  color: var(--tinta-mapotas);
  text-align: left;
}
.pagina-landing .final-real .titulo-grande,
.pagina-landing .final-real .titulo-grande em { color: var(--bosque); }
.pagina-landing .final-real .final-copy > p:not(.seccion-eyebrow) { color: #41584d; }
.pagina-landing .final-real .seccion-eyebrow { background: #e7cdbc; color: #75442f; }
.pagina-landing .final-real .enlace-claro { color: var(--bosque); }
.pagina-landing .final-real .enlace-claro:hover { color: #75442f; }
.pagina-landing .final-real .lucas-suelo { width: min(100%,280px); }

/* Dos entradas al paisaje: el hero y el cierre. Nunca detrás del copy. */
.pagina-municipios .municipios-hero-real {
  position: relative;
  padding-block: 5.5rem;
  background:
    linear-gradient(90deg, #fbf8f1 30%, rgba(251,248,241,.96) 47%, rgba(251,248,241,.15) 74%),
    url('/img/optimized/entorno/calle-mediterranea.webp') right center / cover;
}
.pagina-municipios .municipios-hero-real::after { display: none; }
.pagina-municipios .municipios-hero-real-grid {
  grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr);
  align-items: center;
  gap: 3rem;
}
.pagina-municipios .municipios-hero-real h1 { max-width: 17ch; font-size: clamp(2.8rem,4.4vw,4rem); line-height: 1.07; }
.pagina-municipios .municipios-hero-lead { color: #3a5147; }
.pagina-municipios .municipios-hero-real-art { min-height: 0; }
.pagina-municipios .municipios-hero-real-art img { width: min(100%,290px); }
.pagina-municipios .municipios-hero-real-art figcaption { color: #173d32; padding: .6rem .85rem; background: #fbf8f1; border-radius: .6rem; }
.pagina-municipios .caso-compartido { background: var(--papel-mapotas); }
.pagina-municipios .centro-real { background: var(--salvia-mapotas); }
.pagina-municipios .piloto-real { background: var(--papel-mapotas); }
.pagina-municipios .cta-real { background: #f0e5d7; }
.pagina-municipios .caso-compartido,
.pagina-municipios .centro-real,
.pagina-municipios .piloto-real { padding-block: 5.5rem; }
.pagina-municipios .caso-compartido-intro {
  width: 100%;
  grid-template-columns: minmax(0,1fr) minmax(0,.8fr);
  margin-bottom: 3rem;
}
.pagina-municipios .caso-compartido-intro h2 { max-width: 21ch; }
.pagina-municipios .caso-compartido-pasos {
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 1.3rem;
  padding: 0;
}
.pagina-municipios .caso-compartido-pasos::before { display: none; }
.pagina-municipios .caso-compartido-pasos > li {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.pagina-municipios .caso-compartido-pasos li > .caso-step-marker {
  position: static;
  margin-bottom: 1rem;
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  border-radius: .7rem;
  background: #ead7c6;
  color: #75442f;
}
.pagina-municipios .caso-step-content { gap: .65rem; }
.pagina-municipios .caso-compartido-pasos figure {
  display: block;
  min-height: 0;
  margin: .3rem 0 .5rem;
  padding: 0;
  border: 0;
  background: none;
}
.pagina-municipios .caso-compartido-pasos figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  border: 1px solid #cfdbd2;
  box-shadow: 0 7px 20px rgba(45,60,40,.06);
  transform: none;
}
.pagina-municipios .caso-compartido-pasos > li:last-child figure img { object-position: center; }
.pagina-municipios .caso-compartido-pasos h3 { font-size: 1.08rem; max-width: none; }
.pagina-municipios .caso-compartido-pasos p { font-size: .9rem; color: #41584d; }
.pagina-municipios .caso-compartido-pasos:hover > li:not(:hover) { opacity: 1; }
.pagina-municipios .caso-compartido-pasos > li:hover figure img { transform: none; }
.pagina-municipios .centro-real-media { background: #fffdf7; box-shadow: 0 14px 38px rgba(31,55,38,.1); }
.pagina-municipios .centro-real-media img { max-height: 620px; }
.pagina-municipios .centro-real.informe-activo .centro-real-media img { max-width: min(100%,460px); max-height: 600px; }
.pagina-municipios .piloto-real-heading {
  max-width: none;
  grid-template-columns: minmax(0,1fr) minmax(0,.8fr);
  gap: 1rem 3rem;
}
.pagina-municipios .piloto-real-heading .seccion-eyebrow { grid-column: 1 / -1; }
.pagina-municipios .piloto-real-heading h2 { grid-column: 1; max-width: 20ch; margin: 0; }
.pagina-municipios .piloto-real-heading > p:last-child { grid-column: 2; max-width: 38ch; margin: 0; }
.pagina-municipios .piloto-real-steps::before { display: none; }
.pagina-municipios .cta-real { overflow: clip; }
.pagina-municipios .cta-real h2 { max-width: 16ch; color: var(--bosque); }
.pagina-municipios .cta-real-fineprint { max-width: 31ch; color: #41584d; }

/* Ramas puntuales en el margen; su caja queda fuera de la zona de lectura. */
.detalle-rama {
  position: absolute;
  z-index: 0;
  width: 145px;
  height: 160px;
  overflow: hidden;
  background: url('/img/optimized/entorno/follage-frame.webp') no-repeat;
  background-size: 640px 480px;
  pointer-events: none;
}
.detalle-rama--izquierda {
  left: -45px;
  bottom: 0;
  background-position: left bottom;
  mask-image: linear-gradient(90deg, #000 45%, transparent), linear-gradient(0deg, transparent, #000 15%, #000 45%, transparent);
  mask-composite: intersect;
}
.detalle-rama--derecha {
  right: -45px;
  bottom: 0;
  background-position: right bottom;
  mask-image: linear-gradient(90deg, transparent, #000 55%), linear-gradient(0deg, transparent, #000 15%, #000 45%, transparent);
  mask-composite: intersect;
}
.detalle-rama--alta {
  top: 0;
  bottom: auto;
  right: -50px;
  background-position: right top;
  mask-image: linear-gradient(90deg, transparent, #000 55%), linear-gradient(#000 45%, transparent);
  mask-composite: intersect;
}
.pagina-landing .seccion-eyebrow,
.pagina-municipios .seccion-eyebrow { width: fit-content; }

/* La lectura no depende de que una animación de opacidad haya terminado. */
html.js .pagina-municipios [data-reveal],
html.js .pagina-landing [data-reveal],
html.js .caso-compartido-pasos[data-caso-story] > li,
html.js .piloto-real-steps[data-piloto-story] > li {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (max-width: 1050px) {
  .pagina-municipios .caso-compartido-pasos { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2.5rem; }
  .pagina-municipios .caso-compartido-pasos figure img { max-height: 210px; width: auto; max-width: 100%; }
}
@media (min-width: 641px) {
  .pagina-municipios .caso-compartido-pasos figure {
    display: grid;
    grid-template-rows: 195px auto;
    align-items: center;
  }
  .pagina-municipios .caso-compartido-pasos figure img { max-height: 195px; width: auto; max-width: 100%; }
}
@media (max-width: 899px) {
  .municipios-real-layout { grid-template-columns: 1fr; }
  .municipios-real .titulo-seccion { max-width: 24ch; }
  .municipios-real-figure { max-width: 740px; width: 100%; }
  .pista-real > .envoltorio { grid-template-columns: 1fr; gap: 2.5rem; }
  .detalle-rama { width: 100px; height: 120px; background-size: 520px 390px; }
}
@media (max-width: 820px) {
  .pagina-municipios .municipios-hero-real { padding-block: 4rem; background: var(--papel-mapotas); }
  .pagina-municipios .municipios-hero-real-grid { grid-template-columns: 1fr; gap: 2rem; }
  .pagina-municipios .municipios-hero-real-art {
    order: 1;
    padding: 1.5rem;
    border-radius: 1rem;
    background: url('/img/optimized/entorno/calle-mediterranea.webp') center / cover;
  }
  .pagina-municipios .municipios-hero-real-art img { width: 220px; }
  .pagina-municipios .caso-compartido-intro { grid-template-columns: 1fr; }
  .pagina-municipios .piloto-real-heading { grid-template-columns: 1fr; }
  .pagina-municipios .piloto-real-heading > p:last-child { grid-column: 1; }
  .pagina-municipios .caso-compartido-intro h2,
  .pagina-municipios .caso-compartido-intro > p:last-child { grid-column: 1; }
}
@media (max-width: 640px) {
  .pagina-landing .hero-narra-fix::before,
  .pagina-landing .hero-narra-fix::after { width: 100px; height: 130px; top: 3.4rem; background-size: 520px 390px; }
  .pagina-landing .hero-caida .lucas-cayendo { left: 1rem; width: 128px; }
  .pagina-landing .pelicula { padding-block: 5.5rem 3rem; }
  .pelicula-inner { width: calc(100% - 2rem); }
  .pelicula-heading h2 { font-size: 1.8rem; }
  .pelicula-player { border-radius: .75rem; }
  .pelicula-play { min-width: 5rem; min-height: 5rem; padding: .65rem; font-size: .7rem; }
  .pelicula-play-icon { font-size: 1.35rem; }
  .flujo-real, .pista-real, .pagina-landing .municipios-real,
  .pagina-landing .final-real, .pagina-municipios .caso-compartido,
  .pagina-municipios .centro-real, .pagina-municipios .piloto-real { padding-block: 3.5rem; }
  .flujo-real-heading { margin-bottom: 2rem; }
  .flujo-real-layout { grid-template-columns: 1fr; gap: 2rem; }
  .flujo-real-device { width: 205px; }
  .flujo-real-paso, .flujo-real-paso.activo { padding: .9rem .75rem; gap: .65rem; grid-template-columns: 2.5rem minmax(0,1fr); }
  .flujo-real-num { width: 2.1rem; height: 2.1rem; }
  .pista-real-editorial > figcaption { display: block; }
  .pista-real-editorial > figcaption small { display: block; margin-top: .45rem; }
  .pagina-landing .final-real { text-align: left; }
  .pagina-landing .final-real .final-grid { gap: 1.5rem; }
  .pagina-landing .final-real .lucas-suelo { width: 190px; order: 1; }
  .pagina-municipios .municipios-hero-real h1 { font-size: clamp(2.15rem,8.8vw,2.7rem); max-width: 18ch; }
  .pagina-municipios .caso-compartido-pasos { grid-template-columns: 1fr; padding: 0; gap: 2rem; }
  .pagina-municipios .caso-compartido-pasos > li {
    display: grid;
    grid-template-columns: 2.4rem minmax(0,1fr);
    gap: 1rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #d9d6c8;
  }
  .pagina-municipios .caso-compartido-pasos li > .caso-step-marker { margin: 0; }
  .pagina-municipios .caso-compartido-pasos figure img { max-height: none; width: 100%; }
  .pagina-municipios .centro-real-media { min-height: 0; padding: .35rem; }
  .pagina-municipios .centro-real-media img { max-height: 420px; }
  .pagina-municipios .centro-real-tabs {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: .2rem;
    overflow: visible;
  }
  .pagina-municipios .centro-real-tab { min-width: 0; padding: .75rem .1rem; font-size: .78rem; }
  .detalle-rama { width: 70px; height: 85px; background-size: 400px 300px; }
  .detalle-rama--izquierda { left: -36px; }
  .detalle-rama--derecha { right: -36px; }
}
@media (max-width: 360px) {
  .pagina-municipios .centro-real-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pagina-municipios .centro-real-tab { font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pagina-landing .hero-narra { height: auto; min-height: 100svh; }
  .pagina-landing .hero-narra-fix { position: relative; height: 100svh; min-height: 38rem; }
  .pagina-landing .hero-caida .lucas-cayendo {
    top: auto;
    right: 1.25rem;
    bottom: 1rem;
    left: auto;
    width: min(24vw,150px);
    transform: none !important;
  }
  .pagina-landing .hero-caida .cuerda { display: none; }
}