/* ──────────────────────────────────────────────────────────────────────────
   CAPA DE PRESENTACIÓN (web-premium, 24-sep-2026).

   Base: sistema editorial «kami» adaptado a la identidad de Derechos (papel
   crema, tinta, bronce; Newsreader + Public Sans). Diales: VARIANCE 7,
   MOTION 6, DENSITY 3.

   Regla que manda sobre la estética: la cinemática vive SOLO en las
   superficies de presentación (portada, manifiesto, ayudas del municipio,
   expansión, cifras). El cuestionario y el plan no se animan: los usa gente
   en situaciones difíciles, a veces con móviles modestos, y ahí el movimiento
   no aporta nada. Sin JavaScript o con movimiento reducido todo se ve entero.

   Los colores salen de los tokens de :root de cada página.
   ────────────────────────────────────────────────────────────────────────── */

:root{
  --noche:#101216;          /* velo del hero y de la expansión */
  --noche-texto:#f4f1ec;
  --noche-suave:rgba(244,241,236,.78);
  --oro-claro:#e0c08a;
  --accent:var(--acento);   /* nombres que espera el motion kit */
  --bg:var(--noche);
  --fg:var(--noche-texto);
}

/* ── Barra de progreso y navegación ─────────────────────────────────────── */
.progreso{position:fixed;top:0;left:0;right:0;height:2px;background:var(--oro);transform:scaleX(0);transform-origin:left;z-index:60}
.pnav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px clamp(16px,4vw,40px);
  color:var(--noche-texto);
  transition:background-color .25s ease,color .25s ease,box-shadow .25s ease;
}
.pnav.solid{background:var(--papel);color:var(--texto);box-shadow:0 1px 0 var(--filete);backdrop-filter:blur(8px)}
.pnav a{color:inherit;text-decoration:none}
.pnav-logo{font-family:var(--serif);font-size:1.25rem;font-weight:500;letter-spacing:-.01em}
.pnav-logo i{color:var(--oro-claro);font-style:italic}
.pnav.solid .pnav-logo i{color:var(--acento)}
.pnav-links{display:flex;align-items:center;gap:18px;font-size:.84rem}
.pnav-cta{border:1px solid currentColor;padding:7px 14px;border-radius:999px}
.pnav-cta:hover,.pnav-cta:focus-visible{background:var(--oro);border-color:var(--oro);color:var(--noche)}
@media (max-width:560px){.pnav-links .solo-ancho{display:none}}

/* ── Portada ────────────────────────────────────────────────────────────── */
.portada{
  position:relative;min-height:100svh;overflow:hidden;
  display:flex;align-items:flex-end;
  background:var(--noche);color:var(--noche-texto);
}
.portada-media{position:absolute;inset:0}
.portada-media img{width:100%;height:115%;object-fit:cover;display:block}
.portada-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(16,18,22,.94) 0%,rgba(16,18,22,.72) 38%,rgba(16,18,22,.18) 75%),
    rgba(16,18,22,.18);
}
.portada-copy{
  position:relative;z-index:2;width:100%;max-width:1120px;margin:0 auto;
  padding:120px clamp(16px,5vw,56px) clamp(40px,8vh,88px);
}
.portada .eyebrow{color:var(--oro-claro);margin-bottom:18px}
.portada h1{
  font-family:var(--serif);font-weight:400;color:var(--noche-texto);
  font-size:clamp(2.7rem,9vw,6.4rem);line-height:.98;letter-spacing:-.035em;
  margin:0 0 22px;max-width:12ch;text-wrap:balance;
}
.portada h1 em{font-style:italic;color:var(--oro-claro)}
.portada .sub{color:var(--noche-suave);font-size:clamp(1rem,2.2vw,1.18rem);max-width:46ch;margin:0 0 26px}
.portada .privacidad{color:var(--noche-suave);border-left-color:var(--oro);max-width:52ch;margin-top:22px}
.portada-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.btn-portada{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--noche-texto);color:var(--noche);
  font-weight:600;font-size:1rem;text-decoration:none;
  padding:16px 26px;border-radius:999px;
  transition:background-color .15s ease,color .15s ease;
}
.btn-portada svg{width:18px;height:18px}
.btn-portada:hover,.btn-portada:focus-visible{background:var(--oro-claro)}
.btn-portada:focus-visible,.pnav a:focus-visible,.btn-linea:focus-visible{outline:2px solid var(--oro-claro);outline-offset:3px}
.credito-foto{
  position:absolute;right:clamp(16px,4vw,40px);bottom:10px;z-index:2;
  margin:0;font-size:.66rem;color:rgba(244,241,236,.6);
}
.credito-foto a{color:inherit}

/* Demostración municipal: escudo + ayudas propias en el primer pantallazo */
.marca-municipal{display:flex;align-items:center;gap:14px;margin:0 0 20px}
.marca-municipal img{height:62px;width:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
.marca-municipal p{margin:0;font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--oro-claro);line-height:1.5}
.marca-municipal p span{display:block;color:var(--noche-suave);letter-spacing:.08em;text-transform:none;font-weight:400;font-size:.78rem}
.portada-ayudas{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:8px;max-width:640px}
.portada-ayudas li{
  font-size:.84rem;line-height:1.3;padding:8px 13px;border-radius:999px;
  background:rgba(244,241,236,.1);border:1px solid rgba(244,241,236,.28);
  backdrop-filter:blur(6px);
}

/* ── Manifiesto: palabras que se encienden ──────────────────────────────── */
.manifiesto{padding:clamp(88px,16vh,180px) clamp(16px,5vw,56px);max-width:1120px;margin:0 auto}
.manifiesto p{
  font-family:var(--serif);font-weight:400;margin:0;
  font-size:clamp(1.9rem,5.2vw,3.7rem);line-height:1.12;letter-spacing:-.02em;
  --hl-on:var(--texto);--hl-off:color-mix(in oklab,var(--texto) 22%,transparent);
}

/* ── Ayudas del municipio ───────────────────────────────────────────────── */
.locales{padding:0 clamp(16px,5vw,56px) clamp(80px,12vh,140px);max-width:1120px;margin:0 auto}
.locales h2,.expandir h2,.pcifras h2,.herr-cab h2{
  font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.05;
  font-size:clamp(2rem,5vw,3.4rem);margin:0 0 18px;text-wrap:balance;
}
.locales-intro{color:var(--suave);max-width:58ch;margin:0 0 40px}
.locales-lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--texto)}
.locales-lista li{
  display:grid;grid-template-columns:3.2rem 1fr;gap:4px 18px;
  padding:26px 0;border-bottom:1px solid var(--filete);
}
.locales-lista .n{font-family:var(--serif);font-style:italic;color:var(--acento);font-size:1.5rem;line-height:1.1;grid-row:span 3}
.locales-lista h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.25rem,2.6vw,1.6rem);line-height:1.2;margin:0}
.locales-lista p{margin:0;color:var(--suave);font-size:.95rem;max-width:64ch}
.locales-lista a{font-size:.8rem;color:var(--acento)}
.locales-cta{
  margin-top:48px;padding:clamp(28px,5vw,48px);
  background:var(--noche);color:var(--noche-texto);border-radius:6px;
  display:grid;gap:18px;
}
.locales-cta p{margin:0;max-width:60ch;color:var(--noche-suave)}
.locales-cta strong{color:var(--noche-texto);font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,3vw,2rem);display:block;line-height:1.2;margin-bottom:8px}
.locales-cta .botones{display:flex;flex-wrap:wrap;gap:12px}
.btn-linea{
  display:inline-block;padding:13px 22px;border-radius:999px;text-decoration:none;font-weight:600;font-size:.92rem;
  border:1px solid rgba(244,241,236,.5);color:var(--noche-texto);
}
.btn-linea.lleno{background:var(--oro-claro);border-color:var(--oro-claro);color:var(--noche)}
.btn-linea:hover{border-color:var(--oro-claro)}

/* ── Imagen que se expande ──────────────────────────────────────────────── */
.expandir{height:100svh;position:relative;overflow:hidden;background:var(--papel)}
.expandir-marco{--cy:14%;--cx:18%;--cr:6px;position:absolute;inset:0;clip-path:inset(var(--cy) var(--cx) round var(--cr))}
.expandir-marco img{width:100%;height:100%;object-fit:cover;transform:scale(1.2);display:block}
.expandir-marco::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(16,18,22,.9),rgba(16,18,22,.35))}
.expandir-copy{
  position:absolute;inset:auto 0 0 0;z-index:2;color:var(--noche-texto);
  max-width:1120px;margin:0 auto;padding:0 clamp(16px,5vw,56px) clamp(40px,9vh,96px);
}
.expandir-copy .eyebrow{color:var(--oro-claro)}
.expandir h2{color:var(--noche-texto)}
.promesas{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));max-width:1000px}
.promesas li{border-top:1px solid rgba(244,241,236,.35);padding-top:14px;color:var(--noche-suave);font-size:.95rem}
.promesas b{display:block;color:var(--noche-texto);font-family:var(--serif);font-weight:500;font-size:1.25rem;margin-bottom:4px}

/* ── Cifras y marquesina ────────────────────────────────────────────────── */
.pcifras{padding:clamp(80px,14vh,160px) 0 clamp(40px,8vh,80px);overflow:hidden}
.pcifras-fila{
  max-width:1120px;margin:0 auto;padding:0 clamp(16px,5vw,56px);
  display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.pcifras-fila b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(3.6rem,10vw,6.5rem);line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.pcifras-fila span{display:block;margin-top:10px;color:var(--suave);max-width:24ch}
.marquesina{margin-top:clamp(56px,10vh,110px);border-top:1px solid var(--filete);border-bottom:1px solid var(--filete);padding:18px 0;overflow:hidden}
.marquesina [data-marquee]{display:flex;width:max-content;white-space:nowrap}
.marquesina span{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,3vw,2rem);color:var(--suave);padding:0 28px;position:relative}
.marquesina span::after{content:"·";position:absolute;right:-4px;color:var(--acento);font-style:normal}

/* ── La herramienta ─────────────────────────────────────────────────────── */
.herramienta{border-top:1px solid var(--texto);padding-top:clamp(56px,9vh,96px);scroll-margin-top:64px}
.herr-cab{margin-bottom:26px}
.herr-cab .sub{max-width:52ch}

/* ── Movimiento reducido y sin JS: todo visible, sin recortes ───────────── */
.mk-static .expandir{height:auto;min-height:100svh}
.mk-static .expandir-marco{clip-path:none}
.mk-static .expandir-marco img{transform:none}
.mk-static .manifiesto p{color:var(--texto)}
@media (prefers-reduced-motion:reduce){
  .expandir-marco{clip-path:none}
  .expandir-marco img{transform:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media (max-width:760px){
  .expandir-marco{--cy:10%;--cx:5%}
  .portada-copy{padding-top:96px}
  .credito-foto{left:16px;right:auto}
}

/* Recortes de SplitType: las líneas se enmascaran para entrar desde abajo */
.mk-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}

@media print{
  .pnav,.progreso,.pres{display:none!important}
  .herramienta{border:0;padding:0}
}

/* ── Página de ayuntamientos: galería de demostraciones ─────────────────── */
.demos{overflow:hidden;padding:clamp(72px,12vh,140px) 0;background:var(--noche);color:var(--noche-texto)}
.demos-cab{max-width:1120px;margin:0 auto 40px;padding:0 clamp(16px,5vw,56px)}
.demos-cab .eyebrow{color:var(--oro-claro)}
.demos-cab h2{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.05;font-size:clamp(2rem,5vw,3.4rem);margin:0 0 14px;color:var(--noche-texto)}
.demos-cab p{color:var(--noche-suave);max-width:60ch;margin:0}
.demos-pista{display:flex;gap:24px;padding:0 clamp(16px,5vw,56px)}
.demo-tarjeta{
  flex:0 0 min(78vw,520px);position:relative;border-radius:6px;overflow:hidden;
  aspect-ratio:4/5;color:var(--noche-texto);text-decoration:none;display:block;
}
.demo-tarjeta img.foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,0,0,1)}
.demo-tarjeta:hover img.foto{transform:scale(1.04)}
.demo-tarjeta::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(16,18,22,.92),rgba(16,18,22,.1) 60%)}
.demo-pie{position:absolute;inset:auto 0 0 0;z-index:2;padding:24px}
.demo-pie img{height:48px;width:auto;margin-bottom:12px}
.demo-pie h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3.2vw,2.2rem);margin:0 0 4px;line-height:1.1}
.demo-pie p{margin:0;font-size:.88rem;color:var(--noche-suave)}
.demo-pie .ver{display:inline-block;margin-top:14px;font-size:.85rem;border-bottom:1px solid var(--oro-claro);color:var(--oro-claro)}
.demo-tarjeta:focus-visible{outline:2px solid var(--oro-claro);outline-offset:4px}
@media (max-width:900px){.demos-pista{flex-direction:column}.demo-tarjeta{flex-basis:auto;aspect-ratio:4/3}}
.precio{padding:clamp(80px,14vh,160px) clamp(16px,5vw,56px);max-width:1120px;margin:0 auto}
.precio-fila{display:grid;gap:40px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));border-top:1px solid var(--texto);padding-top:32px}
.precio-fila b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(3.4rem,9vw,6rem);line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.precio-fila span{display:block;margin-top:12px;color:var(--suave);max-width:28ch}
.precio .eyebrow{margin-bottom:12px}
.precio h2{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.05;font-size:clamp(2rem,5vw,3.4rem);margin:0 0 36px}
.demo-pie h3{text-transform:none;letter-spacing:-.01em;color:var(--noche-texto);font-size:clamp(1.6rem,3.2vw,2.2rem)}
.portada-media img.encuadre-bajo{object-position:50% 100%}