/* =============================================================
   Moysi · landing para ayuntamientos
   Arquitectura "monumento sobre lienzo oscuro" (referencia ThoughtLab)
   con la identidad de moysi: lienzo grafito, verde como única señal,
   Sora + IBM Plex Sans, logo de dos arcos y chispa.
   Reglas: un solo acento (verde) y solo en la acción principal y en la
   chispa del logo · sin sombras, sin degradados, sin rellenos de tarjeta ·
   esquinas redondas solo en botones y etiquetas · jerarquía por escala.
   Sin dependencias externas: tipografías alojadas en assets/fonts
   ============================================================= */

/* =============================================================
   1. Tipografías (locales, licencia OFL; archivos variables)
   ============================================================= */
@font-face {
  font-family: "Sora";
  src: url("assets/fonts/sora-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("assets/fonts/ibm-plex-sans-latin.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

/* Solo para la demo animada: la voz por el cable (serif cursiva) y la voz hecha texto (mono) */
@font-face {
  font-family: "IBM Plex Serif";
  src: url("assets/fonts/ibm-plex-serif-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =============================================================
   2. Tokens
   ============================================================= */
:root {
  /* Color: cinco tonos y una señal */
  --vacio: #1F2328;       /* grafito moysi: el lienzo */
  --blanco: #FFFFFF;      /* titulares, texto que manda, trazos principales */
  --ceniza: #C4C9D2;      /* texto de lectura sobre el lienzo (9,5:1) */
  --meta: #A8AEB8;        /* cejas, numeración, pie (7:1) */
  --senal: #3ECF9A;       /* verde moysi: solo acción principal y chispa del logo */
  --linea: rgba(255, 255, 255, .14);         /* separadores finos */
  --linea-fuerte: rgba(255, 255, 255, .34);  /* contornos de píldoras */

  /* Tipografía */
  --display: "Sora", "Segoe UI", system-ui, sans-serif;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --t-display: clamp(2.125rem, 7.8vw, 12.375rem);     /* hasta 198 px */
  --t-titular: clamp(2.25rem, 6.2vw, 5.6875rem);  /* hasta 91 px */
  --t-frase: clamp(1.75rem, 4.6vw, 4.5rem);       /* hasta 72 px */
  --t-elemento: clamp(1.375rem, 1.9vw, 1.6875rem);/* hasta 27 px */

  /* Espaciado */
  --gutter: clamp(20px, 8.75vw, 126px);
  --max: 1400px;
  --seccion: clamp(86px, 9vw, 140px);
  --hueco: 22px;
  --cabecera: 72px;

  /* Movimiento */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* =============================================================
   3. Base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--cabecera) + 16px);
  overflow-x: clip;
  background: var(--vacio);
  color-scheme: dark;
}
body {
  font-family: var(--sans);
  font-size: 1.125rem;            /* 18 px de base: lectura cómoda para todas las edades */
  line-height: 1.55;
  color: var(--ceniza);
  background: var(--vacio);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
html.menu-abierto { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; color: var(--blanco); }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--blanco); color: var(--vacio); }
:focus-visible { outline: 2px solid var(--blanco); outline-offset: 4px; }

/* =============================================================
   4. Utilidades y tipografía del sistema
   ============================================================= */
.salto {
  position: fixed; top: -100px; left: 16px; z-index: 1000;
  padding: 12px 18px; border-radius: 999px;
  background: var(--blanco); color: var(--vacio); font-weight: 500;
}
.salto:focus { top: 16px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.contenedor {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Titular monumental: Sora 700, mayúsculas, interlineado apretado */
.display {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-display);
  line-height: .92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--blanco);
}
.titular {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-titular);
  line-height: .94;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--blanco);
}

/* Ceja: rótulo de cada bloque. Raya blanca, número en blanco y nombre en gris claro */
.ceja {
  display: inline-flex; align-items: center; flex-wrap: nowrap;
  font-family: var(--display);
  font-size: 0.9375rem; font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ceniza);
}
.ceja::before { content: ""; width: 36px; height: 2px; margin-right: 14px; background: var(--blanco); flex-shrink: 0; }
.ceja-num { color: var(--blanco); font-variant-numeric: tabular-nums; margin-right: .75em; flex-shrink: 0; }

/* Botón principal: la única píldora rellena, en verde */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px;
  padding: 0 30px;
  border-radius: 9999px;
  font-family: var(--display);
  font-size: 0.9375rem; font-weight: 600; line-height: 1.2;
  letter-spacing: 0.04em; text-transform: uppercase;
  text-align: center;
  transition: background-color .25s, color .25s;
}
.boton--senal { background: var(--senal); color: var(--vacio); }
@media (hover: hover) { .boton--senal:hover { background: var(--blanco); } }

/* Enlace fantasma: texto, sin caja, subrayado al pasar */
.enlace {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  font-family: var(--display);
  font-size: 1rem; font-weight: 500;
  color: var(--blanco);
  text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 6px; text-decoration-thickness: 1px;
  transition: text-decoration-color .25s;
}
@media (hover: hover) { .enlace:hover { text-decoration-color: currentColor; } }
.enlace-texto { color: var(--blanco); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Etiqueta en píldora de contorno */
.etiqueta-pildora {
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 9999px;
  font-size: 0.875rem; line-height: 1.3;
  color: var(--blanco);
  white-space: nowrap;
}

/* Barras de voz animadas */
.barras { display: flex; align-items: center; gap: 4px; height: 20px; color: var(--blanco); }
.barras span {
  display: block; width: 2px; border-radius: 2px;
  background: currentColor;
  animation: barra 1.4s ease-in-out infinite;
}
.barras span:nth-child(2) { animation-delay: -.3s; }
.barras span:nth-child(3) { animation-delay: -.6s; }
.barras span:nth-child(4) { animation-delay: -.9s; }

/* Dibujos de línea (ilustraciones propias) */
.d-trazo { fill: none; stroke: var(--ceniza); stroke-width: 1.25; }
.d-tenue { fill: none; stroke: var(--meta); stroke-width: 1.25; opacity: .55; }
.d-fuerte { fill: none; stroke: var(--blanco); stroke-width: 2; }
.d-lleno { fill: var(--blanco); stroke: none; }
.d-hueco { fill: var(--vacio); stroke: var(--ceniza); stroke-width: 1.25; }
.d-fondo { fill: var(--vacio); }
.d-discontinuo { stroke-dasharray: 4 5; }

/* =============================================================
   5. Cabecera: logo · lema · demostración · menú
   ============================================================= */
.cabecera {
  position: sticky; top: 0; z-index: 60;
  background: var(--vacio);
}
.cabecera-fila {
  min-height: var(--cabecera);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center; gap: 24px;
}
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--blanco); }
.logo-simbolo { width: 32px; height: auto; flex-shrink: 0; }
.logo-texto {
  font-family: var(--display);
  font-weight: 600; font-size: 1.5rem;
  letter-spacing: -0.035em; line-height: 1;
  padding-bottom: 3px;
}
.cabecera-acciones { display: flex; align-items: center; gap: 22px; justify-self: end; }
/* Páginas legales: solo logo y "Volver a la web" */
.cabecera-fila > .enlace { grid-column: -2; justify-self: end; }
.boton--cabecera { min-height: 42px; padding: 0 22px; font-size: 0.8125rem; }
/* En la cabecera, contorno: el verde se reserva a la acción principal de cada vista */
.boton--contorno { background: transparent; color: var(--blanco); border: 1px solid var(--linea-fuerte); }
@media (hover: hover) { .boton--contorno:hover { background: var(--blanco); color: var(--vacio); border-color: var(--blanco); } }

.menu-boton {
  display: none; align-items: center; gap: 12px;
  min-height: 44px; padding: 0 2px;
  font-family: var(--display); font-size: 0.875rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--blanco);
}
.js .menu-boton { display: inline-flex; }
.menu-boton-lineas { position: relative; width: 26px; height: 14px; }
.menu-boton-lineas span {
  position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
  transition: transform .35s var(--ease-out), top .35s var(--ease-out);
}
.menu-boton-lineas span:first-child { top: 2px; }
.menu-boton-lineas span:last-child { top: 10px; }
.menu-boton[aria-expanded="true"] .menu-boton-lineas span:first-child { top: 6px; transform: rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-boton-lineas span:last-child { top: 6px; transform: rotate(-45deg); }

/* Sin JavaScript: enlaces en la propia cabecera */
.nav-simple { display: flex; flex-wrap: wrap; gap: 8px 22px; grid-column: 1 / -1; padding-bottom: 14px; font-size: 1rem; color: var(--blanco); }
.js .nav-simple { display: none; }

/* Menú a pantalla completa */
.menu {
  position: fixed; inset: 0; z-index: 55;
  background: var(--vacio);
  padding-top: var(--cabecera);
  overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu-cuerpo {
  min-height: 100%;
  display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
  padding-block: clamp(36px, 6vw, 86px) 43px;
  border-top: 1px solid var(--linea);
}
.menu-lista li { border-bottom: 1px solid var(--linea); }
.menu-lista a {
  display: flex; align-items: baseline; gap: clamp(16px, 3vw, 43px);
  padding-block: 14px;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.25rem, 7vw, 6rem); line-height: .95; letter-spacing: -0.03em;
  text-transform: uppercase; color: var(--blanco);
  transition: color .25s;
}
.menu-num { font-family: var(--sans); font-size: 0.875rem; font-weight: 500; letter-spacing: .1em; color: var(--meta); min-width: 2em; }
@media (hover: hover) { .menu-lista a:hover { color: var(--meta); } }
.menu-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; }
.js .menu-lista li { opacity: 0; transform: translateY(14px); }
.menu-visible .menu-lista li { opacity: 1; transform: none; transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
.menu-visible .menu-lista li:nth-child(2) { transition-delay: .05s; }
.menu-visible .menu-lista li:nth-child(3) { transition-delay: .1s; }
.menu-visible .menu-lista li:nth-child(4) { transition-delay: .15s; }

/* =============================================================
   6. Portada
   ============================================================= */
.portada { position: relative; overflow: hidden; }
.portada-marco {
  position: relative;
  min-height: calc(100svh - var(--cabecera));
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: clamp(64px, 10vw, 140px);
  padding-bottom: clamp(36px, 5vw, 72px);
}
.portada-ilustracion {
  position: absolute; z-index: 0;
  right: calc(var(--gutter) * -0.4); top: clamp(16px, 4vw, 72px);
  width: clamp(300px, 54vw, 860px);
  pointer-events: none;
}
.portada-ceja, .portada h1, .portada-pie { position: relative; z-index: 1; }
.portada-ceja { margin-bottom: clamp(18px, 2.5vw, 36px); }
.portada h1 { max-width: 15em; }
.portada-pie {
  display: grid; gap: 30px;
  margin-top: clamp(36px, 4vw, 65px);
  padding-top: var(--hueco);
  border-top: 1px solid var(--linea);
}
.portada-sub { font-size: clamp(1.125rem, 1.4vw, 1.3125rem); line-height: 1.45; color: var(--ceniza); max-width: 36ch; }
.portada-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; }

/* Ilustración "Señal": la m de moysi en curvas de nivel y la chispa que responde */
.senal { width: 100%; height: auto; overflow: visible; }
.senal .arco { fill: none; stroke: var(--ceniza); stroke-width: 1; vector-effect: non-scaling-stroke; }
.senal .arco--principal { stroke: var(--blanco); stroke-width: 2; }
.senal .punto { fill: var(--senal); }
.senal .onda { fill: none; stroke: var(--blanco); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; }

/* =============================================================
   7. Qué es Moysi (frase que se enciende al bajar)
   ============================================================= */
.declaracion { padding-block: var(--seccion); }
.declaracion-marco { display: grid; gap: 30px; align-items: center; }
.declaracion-texto {
  max-width: 24ch;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 3.125rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--blanco);
}
/* Cada palabra: la visible y, debajo, una copia invisible en negrita que reserva su ancho */
.declaracion-texto .p { display: inline-grid; }
.declaracion-texto .p > span, .declaracion-texto .p::after { grid-area: 1 / 1; }
.declaracion-texto .p::after { content: attr(data-t); font-weight: 700; visibility: hidden; }
.declaracion-texto .p > span { font-weight: 700; transition: opacity .35s ease, font-weight .35s ease; }
.declaracion-texto .p.apagada > span { font-weight: 400; opacity: .22; }

/* Conexión: auricular, ondas que salen de su hueco y chispa. --avance (0 a 1) lo pone main.js al bajar;
   sin JavaScript o con «reducir movimiento» se queda en 1: el dibujo completo. */
.conexion { --avance: 1; width: min(100%, 400px); justify-self: center; }
.conexion-dibujo { width: 100%; height: auto; overflow: visible; opacity: calc(.15 + .85 * clamp(0, calc(var(--avance) * 1.6), 1)); }
.conexion-auricular {
  fill: none; stroke: var(--blanco); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - clamp(0, calc(var(--avance) / .4), 1));
}
.conexion-arco {
  fill: none; stroke: var(--ceniza); stroke-width: 1.25; stroke-linecap: round;
  opacity: clamp(.06, calc((var(--avance) - .32 - var(--i) * .11) / .1), calc(.42 + var(--i) * .14));
}
.conexion-arco--fuerte { stroke: var(--blanco); stroke-width: 2; }
.conexion-rayo {
  fill: none; stroke: var(--blanco); stroke-width: 1.25; stroke-dasharray: 2 6; stroke-linecap: round;
  opacity: clamp(0, calc((var(--avance) - .74) / .1), .6);
}
.conexion-chispa { opacity: clamp(0, calc((var(--avance) - .84) / .1), 1); }
.conexion-punto { fill: var(--senal); }
.conexion-halo {
  fill: none; stroke: var(--senal); stroke-width: 1.25;
  transform-box: fill-box; transform-origin: center;
  transform: scale(calc(.6 + .4 * clamp(0, calc((var(--avance) - .88) / .12), 1)));
  opacity: .55;
}

/* =============================================================
   8. Secciones y cabeceras
   ============================================================= */
.seccion { padding-bottom: var(--seccion); }
.cabeza {
  display: grid; gap: 22px;
  padding-top: var(--hueco);
  border-top: 1px solid var(--linea);
  margin-bottom: clamp(48px, 6vw, 108px);
}
.cabeza-texto { font-size: clamp(1.125rem, 1.4vw, 1.3125rem); line-height: 1.45; color: var(--ceniza); max-width: 40ch; }

/* Listas en filas con línea fina (problema, beneficios) */
.lista { border-bottom: 1px solid var(--linea); }
.fila {
  display: grid; gap: 10px 30px;
  padding-block: var(--hueco) 36px;
  border-top: 1px solid var(--linea);
}
.paso-num, .etapa-num {
  font-family: var(--display); font-size: 0.9375rem; color: var(--meta);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.fila-titulo { font-family: var(--display); font-size: var(--t-elemento); line-height: 1.2; letter-spacing: -0.02em; }
.fila-texto { font-size: 1.0625rem; line-height: 1.55; max-width: 48ch; }
.fila .etiqueta-pildora { justify-self: start; margin-top: 6px; }

/* =============================================================
   8b. Secciones de «una pantalla» (El problema y Cómo funciona)
   En ordenador, texto y animación conviven en la misma pantalla.
   ============================================================= */
.pantalla-cabeza {
  display: grid; gap: 18px;
  padding-top: var(--hueco);
  border-top: 1px solid var(--linea);
  margin-bottom: clamp(32px, 4vw, 48px);
}
.titular--compacto { font-size: clamp(2rem, 4.6vw, 3.5rem); line-height: .95; }
.pantalla-cabeza > * { grid-column: 1 / -1; }

/* El problema: el ayuntamiento y sus cuatro globos (animación de Bruno) */
.pb-escena-caja { margin-bottom: 18px; }
.pb-escena { display: block; width: 100%; height: auto; }
/* Globos: también se eligen con el teclado */
.pb-escena .pb-bubble:focus { outline: none; }
.pb-escena .pb-bubble:focus-visible .pb-frame { stroke: var(--blanco); stroke-width: 3; }
/* Debajo del ayuntamiento: solo la información del globo activo */
.pb-detalle {
  display: grid; gap: 14px 30px; align-items: start;
  padding-top: var(--hueco);
  border-top: 1px solid var(--linea);
}
.pb-infos { display: grid; gap: 22px; }
.pb-info { display: grid; gap: 6px; max-width: 70ch; }
.pb-info-num { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: .08em; color: var(--meta); }
.pb-info-titulo { font-family: var(--display); font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.02em; }
.pb-info-texto { font-size: 1.0625rem; line-height: 1.5; }
/* Con JavaScript, el resto queda solo para lectores de pantalla */
.js .pb-infos { gap: 0; min-height: 7.25rem; }
.js .pb-info { animation: aparece .45s ease-out; }
.js .pb-info.oculta {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; animation: none;
}
.pb-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.pb-nota { font-size: 0.875rem; color: var(--meta); }
.pb-pie .demo-control { display: none; }
.js .pb-pie .demo-control { display: inline-flex; }

.pb-escena .pb-s-num { font: 500 13px var(--mono); fill: #8b8e94; }
.pb-escena .pb-s-title { font: 600 17px var(--display); fill: #ffffff; letter-spacing: -0.01em; transition: fill .4s; }
.pb-escena .pb-s-lab { font: 500 9.5px var(--mono); fill: #8b8e94; letter-spacing: .14em; }
.pb-escena .pb-s-mono { font-family: var(--mono); }
.pb-escena .pb-bubble { cursor: pointer; transition: opacity .5s; }
.pb-escena .pb-frame { fill: #22252a; stroke: #3a3d43; stroke-width: 1.5; transition: stroke .4s; }
.pb-escena .pb-bubble.activo .pb-frame { stroke: var(--senal); }
.pb-escena .pb-trail { transition: opacity .5s; }
.pb-escena .pb-trail circle { fill: #22252a; stroke: #3a3d43; stroke-width: 1.5; transition: stroke .4s; }
.pb-escena .pb-trail.activo circle { stroke: var(--senal); }
.js .pb-escena .pb-trail:not(.activo) { opacity: .42; }
/* Globo inactivo: marco, número y título nítidos; solo se atenúa el dibujo de dentro */
.pb-escena .pb-bub-in > * { transition: opacity .5s; }
.js .pb-escena .pb-bubble:not(.activo) .pb-bub-in > :not(.pb-frame):not(.pb-s-num):not(.pb-s-title) { opacity: .4; }
.js .pb-escena .pb-bubble:not(.activo) .pb-s-title { fill: #c9ccd1; }
.pb-escena .pb-bub-in { transform-box: fill-box; transform-origin: 50% 50%; }
.pb-escena .pb-bubble.salta .pb-bub-in { animation: pb-salto .55s cubic-bezier(.3, 1.6, .5, 1); }

/* El edificio: de día y de noche */
.pb-escena .pb-win { fill: #3a3d43; transition: fill .8s; }
.pb-escena.pb-noche .pb-win { fill: #1c1e22; }
.pb-escena .pb-refl { stroke: #8b8e94; transition: opacity .8s; }
.pb-escena.pb-noche .pb-refl { opacity: 0; }
.pb-escena .pb-lamp { fill: #8b8e94; transition: fill .8s; }
.pb-escena.pb-noche .pb-lamp { fill: #ffffff; }
.pb-escena .pb-sky { opacity: 0; transition: opacity .9s; }
.pb-escena.pb-noche .pb-sky { opacity: 1; }
.pb-escena .pb-hand { transform-box: fill-box; transform-origin: 50% 100%; }
.pb-escena .pb-hand.pb-min { animation: pb-giro 9s linear infinite; }
.pb-escena .pb-hand.pb-hr { animation: pb-giro 108s linear infinite; }
.pb-escena .pb-flag { transform-box: fill-box; transform-origin: 50% 0; animation: pb-ondea 2.4s ease-in-out infinite; }
.pb-escena .pb-flag.pb-f2 { animation-delay: -.8s; }
.pb-escena .pb-flag.pb-f3 { animation-delay: -1.6s; }

/* 01 · el personal se satura */
.pb-escena .pb-shake { transform-box: fill-box; transform-origin: 50% 100%; animation: pb-timbre 1.4s ease-in-out infinite; }
.pb-escena .pb-rw { opacity: 0; animation: pb-sonido 1.4s ease-out infinite; }
.pb-escena .pb-rw.pb-r2 { animation-delay: .18s; }
.pb-escena #pb-chip { transition: opacity .35s, transform .35s; }
.pb-escena #pb-chip.fuera { opacity: 0; transform: translateY(8px); }
.pb-escena .pb-sweat { animation: pb-sudor 1.8s ease-in infinite; }
/* 02 · fuera de horario */
.pb-escena .pb-dot2 { transform-box: fill-box; transform-origin: 50% 50%; animation: pb-puntos 4.4s infinite; }
.pb-escena .pb-dot2.pb-d2 { animation-delay: .15s; }
.pb-escena .pb-dot2.pb-d3 { animation-delay: .3s; }
.pb-escena .pb-noans { opacity: 0; animation: pb-sin-respuesta 4.4s infinite; }
.pb-escena .pb-hs2 { transform-box: fill-box; transform-origin: 50% 50%; animation: pb-telefono 4.4s infinite; }
.pb-escena .pb-twinkle { animation: pb-titila 2.6s ease-in-out infinite; }
.pb-escena .pb-twinkle.pb-t2 { animation-delay: -1.2s; }
/* 03 · trámites */
.pb-escena .pb-scroll3 { animation: pb-desplaza 16s linear infinite; }
.pb-escena .pb-cursor { animation: pb-cursor 6s ease-in-out infinite; }
.pb-escena .pb-q { opacity: 0; animation: pb-duda 3s infinite; }
.pb-escena .pb-q.pb-q2 { animation-delay: .6s; }
.pb-escena .pb-q.pb-q3 { animation-delay: 1.2s; }
/* 04 · datos */
.pb-escena .pb-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: pb-barra 3.2s ease-in-out infinite alternate; }
.pb-escena .pb-mag { animation: pb-lupa 5.5s ease-in-out infinite alternate; }

/* Pausa (botón) y reposo (fuera de pantalla) */
.pausada .pb-escena *, .pb-quieta .pb-escena * { animation-play-state: paused !important; }

@keyframes pb-salto { 0% { transform: scale(.88); } 100% { transform: scale(1); } }
@keyframes pb-giro { to { transform: rotate(360deg); } }
@keyframes pb-ondea { 0%, 100% { transform: skewX(0); } 50% { transform: skewX(8deg); } }
@keyframes pb-timbre { 0%, 40%, 100% { transform: rotate(0); } 5%, 15%, 25%, 35% { transform: rotate(-5deg); } 10%, 20%, 30% { transform: rotate(5deg); } }
@keyframes pb-sonido { 0% { opacity: 0; } 10% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes pb-sudor { 0% { opacity: 0; transform: translateY(0); } 20%, 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
@keyframes pb-puntos { 0%, 58% { opacity: 1; transform: translateY(0); } 6%, 18%, 30%, 42% { transform: translateY(-5px); } 12%, 24%, 36%, 48% { transform: translateY(0); } 60%, 100% { opacity: 0; } }
@keyframes pb-sin-respuesta { 0%, 60% { opacity: 0; } 66%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pb-telefono { 0%, 58% { opacity: 1; } 2%, 10%, 18%, 26%, 34%, 42%, 50% { transform: rotate(-8deg); } 6%, 14%, 22%, 30%, 38%, 46%, 54% { transform: rotate(8deg); } 60%, 100% { transform: rotate(0); opacity: .35; } }
@keyframes pb-titila { 50% { opacity: .25; } }
@keyframes pb-desplaza { from { transform: translateY(126px); } to { transform: translateY(-78px); } }
@keyframes pb-cursor { 0% { transform: translate(150px, 128px); } 18% { transform: translate(120px, 150px); } 30% { transform: translate(170px, 140px); } 46% { transform: translate(110px, 176px); } 60% { transform: translate(160px, 160px); } 78% { transform: translate(132px, 134px); } 100% { transform: translate(150px, 128px); } }
@keyframes pb-duda { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 80% { opacity: 0; transform: translateY(-22px); } 100% { opacity: 0; } }
@keyframes pb-barra { 0% { transform: scaleY(.15); } 100% { transform: scaleY(1); } }
@keyframes pb-lupa { 0% { transform: translate(70px, 118px); } 100% { transform: translate(240px, 118px); } }

/* =============================================================
   9. Cómo funciona: cuatro pasos y la demo animada
   ============================================================= */
.pantalla--como .demo { margin-bottom: clamp(40px, 5vw, 64px); }
.pasos { display: grid; gap: 0 30px; margin-bottom: clamp(48px, 6vw, 86px); }
.paso { display: grid; gap: 10px; align-content: start; padding-block: var(--hueco) 30px; border-top: 1px solid var(--linea); }
.paso h3 { font-family: var(--display); font-size: var(--t-elemento); line-height: 1.2; letter-spacing: -0.02em; margin-top: 14px; }
.paso p { font-size: 1.0625rem; }

/* Demo: «Una llamada al ayuntamiento» (animación de Bruno, integrada) */
.demo { border: 1px solid var(--linea-fuerte); }
.demo-cabeza, .demo-nombres, .demo-subtitulo, .demo-pie, .demo-nota { padding-inline: clamp(18px, 2.5vw, 30px); }
.demo-cabeza {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 30px;
  padding-block: 18px;
  border-bottom: 1px solid var(--linea);
}
.demo-marca { display: flex; align-items: center; gap: 12px; }
.demo-marca .barras { color: var(--senal); }
.demo-marca .ceja { color: var(--blanco); }
.demo-elegir { display: none; flex-wrap: wrap; gap: 9px; }
.js .demo-elegir { display: flex; }
.demo-boton-escena {
  min-height: 44px; padding: 0 20px; border-radius: 9999px;
  border: 1px solid var(--linea-fuerte);
  font-family: var(--display); font-size: 0.9375rem; font-weight: 500; color: var(--ceniza);
  transition: background-color .25s, color .25s, border-color .25s;
}
.demo-boton-escena[aria-pressed="true"] { background: var(--senal); border-color: var(--senal); color: var(--vacio); font-weight: 600; }
@media (hover: hover) { .demo-boton-escena[aria-pressed="false"]:hover { color: var(--blanco); border-color: var(--blanco); } }
.demo-estado {
  display: none; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 0.875rem; color: var(--ceniza); font-variant-numeric: tabular-nums;
}
.js .demo-estado { display: flex; }
.demo-punto { width: 9px; height: 9px; border-radius: 50%; background: var(--senal); animation: pulso 1.6s ease-in-out infinite; }
.demo-estado.terminada .demo-punto { animation: none; background: var(--meta); }

.demo-escenario { background: var(--vacio); }
.demo-svg { display: block; width: 100%; height: auto; }
.demo-nombres {
  display: flex; justify-content: space-between; gap: 16px;
  padding-block: 14px 16px;
  border-top: 1px solid var(--linea);
}
.demo-nombre { font-size: 0.8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--meta); }
.demo-nombre b {
  display: block; margin-bottom: 2px;
  font-family: var(--display); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; text-transform: none;
  color: var(--ceniza); transition: color .3s;
}
.demo-nombre.activo b { color: var(--blanco); }
.demo-nombre--derecha { text-align: right; }
.demo-nombre--derecha.activo b { color: var(--senal); }

/* Subtítulo que se escribe solo */
.demo-subtitulo {
  display: none; align-content: start; gap: 10px;
  min-height: 10.5rem;
  padding-block: 24px;
  border-top: 1px solid var(--linea);
}
.js .demo-subtitulo { display: grid; }
.demo-subtitulo.derecha { justify-items: end; text-align: right; }
.demo-quien { font-size: 0.8125rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--meta); }
.demo-subtitulo.marina .demo-quien { color: var(--senal); }
.demo-texto {
  max-width: 40ch;
  font-family: var(--display); font-size: clamp(1.25rem, 2.3vw, 1.75rem); line-height: 1.35; letter-spacing: -0.01em;
  color: var(--blanco); text-wrap: pretty;
}
.demo-cursor { display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -3px; background: var(--senal); animation: parpadeo 1s steps(1) infinite; }
.demo-cursor[hidden] { display: none; }

.demo-pie {
  display: none; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 30px;
  padding-block: 18px;
  border-top: 1px solid var(--linea);
}
.js .demo-pie { display: flex; }
.demo-progreso { display: flex; gap: 6px; }
.demo-progreso span { width: 22px; height: 3px; border-radius: 2px; background: var(--linea-fuerte); transition: background-color .3s; }
.demo-progreso span.hecho { background: var(--ceniza); }
.demo-progreso span.actual { background: var(--senal); }
.demo-resultado {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 9999px;
  background: var(--senal); color: var(--vacio);
  font-family: var(--display); font-size: 0.9375rem; font-weight: 600;
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s var(--ease-out), transform .5s var(--ease-out);
}
.demo-resultado::before { content: "✓"; }
.demo-resultado.visible { opacity: 1; transform: none; }
.demo-resultado:empty { display: none; }
.demo-controles { display: flex; gap: 10px; }
.demo-control {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 9999px;
  border: 1px solid var(--linea-fuerte);
  font-family: var(--display); font-size: 0.875rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--blanco);
  transition: background-color .25s, color .25s, border-color .25s;
}
.demo-control svg { width: 16px; height: 16px; }
.demo-control .icono-play, .pausada .demo-control .icono-pausa { display: none; }
.pausada .demo-control .icono-play { display: block; }
.demo-control--senal { border-color: var(--senal); color: var(--senal); }
@media (hover: hover) {
  .demo-control:hover { border-color: var(--blanco); }
  .demo-control--senal:hover { background: var(--senal); border-color: var(--senal); color: var(--vacio); }
}

/* Transcripción completa (lectores de pantalla y sin JavaScript) */
.demo-transcripcion { border-top: 1px solid var(--linea); padding-inline: clamp(18px, 2.5vw, 30px); }
.demo-transcripcion summary {
  display: flex; align-items: center; gap: 10px; min-height: 52px;
  cursor: pointer; list-style: none;
  font-family: var(--display); font-size: 1rem; color: var(--blanco);
}
.demo-transcripcion summary::-webkit-details-marker { display: none; }
.demo-transcripcion summary::before { content: "+"; width: 1em; font-size: 1.25rem; line-height: 1; color: var(--senal); }
.demo-transcripcion[open] summary::before { content: "−"; }
.demo-transcripciones { display: grid; gap: 30px; padding-bottom: 26px; }
.demo-transcripciones h3 { font-family: var(--display); font-size: 1.125rem; margin-bottom: 12px; }
.demo-transcripciones ol { display: grid; gap: 8px; font-size: 1rem; line-height: 1.5; }
.demo-transcripciones b { color: var(--blanco); font-weight: 500; }
.demo-transcripciones p { margin-top: 12px; font-size: 0.9375rem; color: var(--meta); }
.demo-nota { padding-block: 14px 18px; border-top: 1px solid var(--linea); font-size: 0.875rem; color: var(--meta); }

/* Escena SVG */
.demo-svg .anillo { fill: none; stroke: #3a3d43; }
.demo-svg .cordon { fill: none; stroke: #8b8e94; stroke-width: 2.6; stroke-linecap: round; }
.demo-svg .chispa { fill: var(--senal); }
.demo-svg .chispa-halo { fill: none; stroke: var(--senal); stroke-width: 1.5; }
.demo-svg .luz-micro { fill: #1c1e22; transition: fill .2s; }
.demo-svg .persona.habla .luz-micro { fill: var(--senal); }
.demo-svg .demo-noche, .demo-svg .demo-departamento, .demo-svg .demo-sobre { opacity: 0; transition: opacity .6s; }
.demo-svg.escena-fuera .demo-noche, .demo-svg .demo-departamento.visible { opacity: 1; }
.demo-svg .departamento-nodo { fill: var(--vacio); stroke: #5c5f65; stroke-width: 1.5; transition: stroke .4s; }
.demo-svg .demo-departamento.recibido .departamento-nodo { stroke: var(--senal); stroke-width: 2.5; }
.demo-svg .departamento-texto { font-family: var(--mono); font-size: 15px; letter-spacing: 1px; fill: #c9ccd1; }
.demo-svg .estrella { animation: titila 3s ease-in-out infinite; }

/* Personajes: hablan, escuchan, parpadean */
.demo-svg .cabeza-dibujo { transform-box: fill-box; transform-origin: 50% 95%; }
.demo-svg .persona.habla .cabeza-dibujo { animation: hablar 1.1s ease-in-out infinite; }
.demo-svg .persona.escucha .cabeza-dibujo { animation: asentir 2.6s ease-in-out infinite; }
.demo-svg .boca { transform-box: fill-box; transform-origin: 50% 30%; transform: scaleY(.08); }
.demo-svg .persona.habla .boca { animation: boca .26s ease-in-out infinite alternate; }
.demo-svg .ojos { transform-box: fill-box; transform-origin: 50% 50%; animation: parpadear 5.2s infinite; }
.demo-svg [data-persona="marina"] .ojos { animation-duration: 4.1s; animation-delay: .8s; }
.demo-svg .destello { animation: destello 6s ease-in-out infinite; }
.demo.pausada *, .demo.pausada *::before { animation-play-state: paused !important; }

/* =============================================================
   10. Servicios: lista monumental, un servicio por fila
   ============================================================= */
.servicios { border-bottom: 1px solid var(--linea); }
.servicios { display: grid; gap: 0 30px; }
.servicio {
  display: grid; gap: 20px; align-content: start;
  padding-block: var(--hueco) clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--linea);
}
.servicio-texto { display: grid; gap: 12px; align-content: start; }
.servicio h3 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.5rem, 2.1vw, 2rem); line-height: 1; letter-spacing: -0.03em;
  text-transform: uppercase;
}
.servicio p { font-size: 1rem; line-height: 1.5; max-width: 46ch; }
.servicio-dibujo { width: 100%; max-width: 190px; height: auto; }

/* Cabeceras más contenidas para que el apartado quepa en una pantalla */
.cabeza--compacta { margin-bottom: clamp(28px, 3.5vw, 52px); }
.cabeza--centro { justify-items: center; text-align: center; }
.cabeza--centro .cabeza-texto { max-width: 52ch; }

/* =============================================================
   11. Cifras
   ============================================================= */
.rejilla-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 30px; }
.cifra {
  display: flex; flex-direction: column; gap: 14px;
  padding-block: var(--hueco) 36px;
  border-top: 1px solid var(--linea);
}
.cifra-valor {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(3rem, 5.6vw, 5.75rem);
  letter-spacing: -0.045em; line-height: .9;
  font-variant-numeric: tabular-nums;
  color: var(--blanco);
}
.cifra-texto { font-size: 1rem; line-height: 1.45; max-width: 22ch; }

/* =============================================================
   12. Privacidad y confianza
   ============================================================= */
.confianza { display: grid; gap: clamp(48px, 6vw, 86px); }
.confianza-principal { display: grid; place-items: center; }
.confianza-simbolo { width: clamp(200px, 22vw, 290px); height: auto; overflow: visible; }
.confianza-separador { fill: none; stroke: var(--linea-fuerte); stroke-width: 1; }
.compromisos { border-bottom: 1px solid var(--linea); }
.compromiso { display: grid; gap: 8px; padding-block: 18px 22px; border-top: 1px solid var(--linea); }
.compromiso h3 { font-family: var(--display); font-size: var(--t-elemento); line-height: 1.2; letter-spacing: -0.02em; }
.compromiso p { font-size: 1.0625rem; max-width: 52ch; }

/* =============================================================
   13. Cómo trabajamos
   ============================================================= */
.proceso { display: grid; gap: 0 30px; }
.etapa { display: grid; gap: 12px; align-content: start; padding-block: var(--hueco) 36px; border-top: 1px solid var(--linea); }
.etapa h3 { font-family: var(--display); font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.02em; margin-top: 18px; }
.etapa p { font-size: 1rem; }
.etapa:last-child .etapa-num { color: var(--blanco); }

/* =============================================================
   14. Detrás de Moysi
   ============================================================= */
.fundador { display: grid; gap: clamp(36px, 5vw, 86px); align-items: start; }
.fundador-foto { max-width: 460px; }
.fundador-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1); }
.fundador-foto figcaption { padding-top: 12px; font-size: 0.875rem; color: var(--meta); }
.fundador-texto { display: grid; gap: 22px; justify-items: start; max-width: 64ch; }
.fundador-rol { font-family: var(--display); font-size: var(--t-elemento); line-height: 1.2; color: var(--blanco); }
.fundador-texto p:not(.fundador-rol) { line-height: 1.65; }
.hitos { display: flex; flex-wrap: wrap; gap: 9px; }

/* =============================================================
   15. Preguntas frecuentes
   ============================================================= */
.preguntas { border-bottom: 1px solid var(--linea); }
.pregunta { border-top: 1px solid var(--linea); }
.pregunta summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 22px;
  padding-block: 26px;
  font-family: var(--display); font-size: var(--t-elemento); line-height: 1.25; letter-spacing: -0.02em;
  color: var(--blanco);
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
  content: ""; width: 22px; height: 22px; flex-shrink: 0;
  background:
    linear-gradient(var(--blanco), var(--blanco)) center / 18px 1.5px no-repeat,
    linear-gradient(var(--blanco), var(--blanco)) center / 1.5px 18px no-repeat;
  transition: transform .35s var(--ease-out);
}
.pregunta[open] summary::after { transform: rotate(45deg); }
.pregunta-respuesta { padding-bottom: 30px; font-size: 1.0625rem; line-height: 1.6; max-width: 68ch; }

/* =============================================================
   16. Cierre y pie
   ============================================================= */
.cierre { padding-bottom: 30px; }
.cierre-cta {
  display: grid; gap: clamp(22px, 3vw, 43px);
  padding-top: var(--hueco);
  border-top: 1px solid var(--linea);
  padding-bottom: clamp(86px, 10vw, 160px);
}
.cierre-titulo { font-size: clamp(2.75rem, 11vw, 12.375rem); line-height: .86; }
.cierre-fila { display: grid; gap: 30px; align-items: end; }
.cierre-fila > p { font-size: clamp(1.125rem, 1.6vw, 1.5rem); line-height: 1.4; color: var(--ceniza); max-width: 30ch; }
.cierre-acciones { display: grid; gap: 22px; justify-items: start; }
.cierre-alternativa {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  font-size: 0.9375rem; color: var(--meta);
}
.correo-visible { color: var(--blanco); font-weight: 500; user-select: all; }
.copiar {
  display: none; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 16px; border-radius: 9999px;
  border: 1px solid var(--linea-fuerte); color: var(--blanco); font-size: 0.875rem;
  transition: border-color .25s;
}
.js .copiar { display: inline-flex; }
.copiar svg { width: 14px; height: 14px; }
@media (hover: hover) { .copiar:hover { border-color: var(--blanco); } }
.copiar-estado { color: var(--blanco); font-weight: 500; min-width: 4em; }

/* Diálogo «Solicitar una demostración»: elegir Gmail, Outlook o el programa de correo.
   Mismo lenguaje que el resto: lienzo grafito, línea fina, sin sombras ni relleno de tarjeta.
   Ningún botón en verde: las tres opciones pesan lo mismo. */
/* Navegadores sin <dialog>: la ventana no debe pintarse al pie */
.solicitud:not([open]) { display: none; }
.solicitud {
  width: min(560px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--linea);
  background: var(--vacio);
  color: var(--ceniza);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.solicitud::backdrop { background: rgba(14, 16, 19, .82); }
/* Mientras está abierto, la página de detrás no se desplaza */
html:has(.solicitud[open]) { overflow: hidden; }
.solicitud-cuerpo {
  position: relative;
  display: grid; gap: var(--hueco);
  padding: clamp(28px, 5vw, 43px);
}
.solicitud-cerrar {
  position: absolute; top: 12px; right: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 9999px;
  border: 1px solid transparent; color: var(--blanco);
  transition: border-color .25s;
}
.solicitud-cerrar svg { width: 20px; height: 20px; }
@media (hover: hover) { .solicitud-cerrar:hover { border-color: var(--linea-fuerte); } }
.solicitud-titulo {
  padding-right: 48px;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.125rem); line-height: 1;
  letter-spacing: -0.03em; text-transform: uppercase;
}
.solicitud-texto { font-size: 1.0625rem; line-height: 1.5; color: var(--ceniza); max-width: 42ch; }
.solicitud-opciones { display: grid; gap: 12px; }
.solicitud-opciones .boton { width: 100%; }
.solicitud-alternativa {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding-top: var(--hueco);
  border-top: 1px solid var(--linea);
  font-size: 0.9375rem; color: var(--meta);
}
.solicitud-alternativa .correo-visible { overflow-wrap: anywhere; }
@keyframes solicitud-entra { from { opacity: 0; transform: translateY(14px); } }
@keyframes solicitud-fondo { from { opacity: 0; } }
.solicitud[open] { animation: solicitud-entra .4s var(--ease-out); }
.solicitud[open]::backdrop { animation: solicitud-fondo .3s ease-out; }

.pie {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 22px 43px;
  padding-top: var(--hueco);
  border-top: 1px solid var(--linea);
}
.pie .logo-simbolo { width: 26px; }
.pie .logo-texto { font-size: 1.25rem; }
.pie-enlaces { display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 0.875rem; color: var(--meta); }
.pie-enlaces a { display: inline-block; padding-block: 8px; }
.pie-enlaces span { display: inline-block; padding-block: 8px; }
@media (hover: hover) { .pie-enlaces a:hover { color: var(--blanco); } }

/* =============================================================
   17. Páginas legales
   ============================================================= */
.legal { padding-block: clamp(48px, 7vw, 108px) var(--seccion); }
.legal-cuerpo { max-width: 760px; display: flex; flex-direction: column; gap: 18px; }
.legal-cuerpo h1 { margin: 6px 0 14px; }
.legal-cuerpo h2 { font-family: var(--display); font-size: 1.5rem; letter-spacing: -0.02em; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--linea); }
.legal-cuerpo ul { list-style: disc; padding-left: 1.25em; display: flex; flex-direction: column; gap: 6px; }
.legal-cuerpo a { color: var(--blanco); text-decoration: underline; text-underline-offset: 3px; }
/* Datos del titular aún por completar */
.legal-cuerpo .pendiente { color: var(--blanco); border: 1px dashed var(--meta); padding: 0 6px; font-weight: 500; }
.legal-cuerpo .actualizado { color: var(--meta); font-size: 0.9375rem; }

/* =============================================================
   18. Movimiento
   ============================================================= */
@keyframes barra { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.5); } }
@keyframes pulso { 50% { opacity: .25; } }
@keyframes parpadeo { 50% { opacity: 0; } }
@keyframes titila { 0%, 100% { opacity: .9; } 50% { opacity: .25; } }
@keyframes hablar { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-2deg) translateY(-2px); } 65% { transform: rotate(1.5deg); } }
@keyframes asentir { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(2.5deg) translateY(3px); } 60% { transform: rotate(0); } }
@keyframes boca { 0% { transform: scaleY(.15); } 100% { transform: scaleY(1); } }
@keyframes parpadear { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
@keyframes destello { 0%, 80%, 100% { opacity: 0; } 88% { opacity: .9; } }
@keyframes entrada { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes trazar { to { stroke-dashoffset: 0; } }
@keyframes onda { 0% { opacity: .55; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

/* Aparición al hacer scroll: solo si hay JavaScript (sin JS todo se ve) */
.js .revelar { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-out), transform .7s var(--ease-out); }
.js .revelar.visible { opacity: 1; transform: none; }
.js .revelar[data-retraso="1"] { transition-delay: .06s; }
.js .revelar[data-retraso="2"] { transition-delay: .12s; }
.js .revelar[data-retraso="3"] { transition-delay: .18s; }
.js .revelar[data-retraso="4"] { transition-delay: .24s; }

/* Entrada de la portada */
.js .portada-ceja, .js .portada h1, .js .portada-pie { animation: entrada 1s var(--ease-out) both; }
.js .portada h1 { animation-delay: .1s; }
.js .portada-pie { animation-delay: .3s; }
/* La m se dibuja línea a línea y la chispa empieza a emitir */
.js .senal .arco { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trazar 1.8s cubic-bezier(.65, 0, .35, 1) forwards; animation-delay: calc(var(--i) * 70ms + 200ms); }
.js .senal .punto { animation: aparece .6s ease-out 1.4s both; }
.senal .onda { animation: onda 4.2s ease-out infinite; }
.senal .onda:nth-child(2) { animation-delay: 1.4s; }
.senal .onda:nth-child(3) { animation-delay: 2.8s; }
.js .senal .onda { animation-delay: 1.8s; }
.js .senal .onda:nth-child(2) { animation-delay: 3.2s; }
.js .senal .onda:nth-child(3) { animation-delay: 4.6s; }

/* =============================================================
   19. Responsive (mobile-first)
   ============================================================= */
@media (max-width: 719px) {
  /* Cabecera: logo y menú */
  .cabecera-fila { grid-template-columns: 1fr auto; }
  .boton--cabecera { display: none; }
  .portada-marco { min-height: auto; padding-top: clamp(250px, 80vw, 360px); }
  .portada-ilustracion { top: 0; right: -6vw; width: 100vw; }
  .boton { padding: 0 20px; letter-spacing: .02em; }
  .portada-acciones { flex-direction: column; align-items: stretch; }
  .portada-acciones .boton { width: 100%; }
  .portada-acciones .enlace { justify-content: center; }
  .cierre-acciones { justify-items: stretch; }
  .demo-cabeza { flex-direction: column; align-items: stretch; }
  .demo-elegir { flex-direction: column; }
  .demo-boton-escena { width: 100%; }
  .demo-estado { justify-content: flex-start; }
  .demo-reloj { margin-left: auto; }
  .demo-pie { flex-direction: column; align-items: stretch; }
  .demo-controles .demo-control { flex: 1 1 0; }
  .demo-subtitulo { min-height: 12.5rem; }
  .conexion { width: min(78%, 300px); }
  /* Diálogo de demostración: casi a pantalla completa */
  .solicitud { width: calc(100% - 24px); max-height: calc(100dvh - 24px); }
  .solicitud-cuerpo { padding: 24px 20px 28px; }
}
@media (min-width: 720px) {
  .rejilla-cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proceso { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fila { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .fila-titulo { grid-row: 1 / span 2; }
  .fila-texto, .fila .etiqueta-pildora { grid-column: 2; }
  .portada-pie { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}

@media (min-width: 1024px) {
  /* Cabeceras de sección en dos columnas: ceja | titular */
  /* Rejilla común de 12 columnas: todo se alinea con los titulares */
  .cabeza, .fila, .fundador { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 30px; }
  .cabeza .ceja { grid-column: 1 / 4; grid-row: span 2; padding-top: .6em; }
  .cabeza .titular, .cabeza-texto { grid-column: 4 / -1; }
  .fila-titulo { grid-column: 4 / 8; grid-row: 1 / span 2; }
  .fila-texto, .fila .etiqueta-pildora { grid-column: 8 / -1; }
  .servicios { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Cabecera centrada (Servicios): una sola columna */
  .cabeza--centro { grid-template-columns: minmax(0, 1fr); }
  .cabeza--centro .ceja, .cabeza--centro .titular, .cabeza--centro .cabeza-texto { grid-column: 1 / -1; grid-row: auto; padding-top: 0; }
  .rejilla-cifras { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .proceso { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .confianza { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 30px; }
  .declaracion-marco { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 30px; }
  .declaracion-marco > .ceja { grid-column: 1 / -1; }
  .fundador-foto { grid-column: 1 / 4; }
  .fundador-texto { grid-column: 4 / -1; }
  .cierre-fila { grid-template-columns: minmax(0, 1fr) auto; }
  .cierre-acciones { justify-items: end; }
  .cierre-alternativa { justify-content: flex-end; }
  .preguntas { margin-left: calc((100% - 330px) / 4 + 90px); }
}

/* Ordenador: «El problema» y «Cómo funciona» caben enteros en una pantalla */
@media (min-width: 1100px) and (min-height: 700px) {
  .seccion.seccion--pantalla {
    min-height: calc(100svh - var(--cabecera));
    display: flex; align-items: center;
    padding-block: 32px;
  }
  .pantalla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 30px; align-items: center; }
  .pantalla--problema .pantalla-cabeza { grid-column: 1 / -1; margin-bottom: 14px; }
  .pantalla--problema .titular--compacto { font-size: clamp(2rem, 3.1vw, 3.5rem); }
  /* El ayuntamiento manda: ocupa todo el ancho y el alto que deja la pantalla */
  .pantalla--problema .pb-escena-caja { grid-column: 1 / -1; margin: 0 0 12px; }
  .pantalla--problema .pb-escena { max-height: calc(100svh - var(--cabecera) - 330px); }
  .pantalla--problema .pb-detalle { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; }
  .pantalla--problema .pb-pie { flex-direction: column; align-items: flex-end; }
  .pantalla--problema .pb-info-titulo { font-size: 1.25rem; }
  .pantalla--problema .pb-info-texto { font-size: 1rem; }
  /* Cómo funciona: rótulo y pasos a la izquierda; título y demo a la derecha */
  /* Cómo funciona: rótulo y título arriba a la izquierda, como en el resto de apartados;
     debajo, la demo a la izquierda y los cuatro pasos a la derecha */
  .pantalla--como { align-items: start; }
  .pantalla--como .pantalla-cabeza { grid-column: 1 / -1; margin-bottom: 14px; }
  .pantalla--como .titular--compacto { font-size: clamp(2rem, 3.1vw, 3.5rem); }
  .pantalla--como .demo { grid-column: 1 / 8; grid-row: 2; margin: 0; }
  .pantalla--como .pantalla-texto { grid-column: 8 / -1; grid-row: 2; align-self: start; }
  /* La escena se encoge con el alto de la pantalla para que la demo entera quepa */
  .pantalla--como .demo-escenario { max-width: calc((100svh - var(--cabecera) - var(--demo-resto, 500px)) * 2.17); margin-inline: auto; }
  .pantalla--como .cabeza-texto { margin-bottom: 10px; font-size: 1.125rem; }
  .pantalla--como .pasos { grid-template-columns: minmax(0, 1fr); margin: 0; }
  .pantalla--como .paso { grid-template-columns: 2.4em minmax(0, 1fr); gap: 4px 10px; padding-block: 14px 16px; }
  .pantalla--como .paso-num { grid-row: span 2; padding-top: 4px; }
  .pantalla--como .paso h3 { margin: 0; font-size: 1.3125rem; }
  .pantalla--como .paso p { font-size: 1.0625rem; line-height: 1.5; }
  /* Demo compacta: nombres sobre la escena y subtítulo más bajo */
  .pantalla .demo-cabeza, .pantalla .demo-pie { padding-block: 12px; }
  .pantalla .demo-boton-escena { min-height: 40px; padding: 0 16px; font-size: 0.875rem; }
  .pantalla .demo-cabeza { flex-wrap: nowrap; gap: 16px; }
  .pantalla .demo-elegir { flex-wrap: nowrap; }
  .pantalla .demo-escenario { position: relative; }
  .pantalla .demo-nombres { position: absolute; top: 0; left: 0; right: 0; border-top: 0; padding-block: 12px; pointer-events: none; }
  .pantalla .demo-nombre b { display: inline; margin-right: 8px; font-size: 1rem; }
  .pantalla .demo-nombre { font-size: 0.6875rem; }
  .pantalla .demo-subtitulo { min-height: 6.5rem; padding-block: 12px; gap: 4px; }
  .pantalla .demo-texto { font-size: clamp(1rem, 1.2vw, 1.25rem); }
  .pantalla .demo-transcripcion summary { padding-block: 12px; }
}


/* En ordenadores no muy anchos, el estado de la demo se queda en el punto y el reloj */
@media (min-width: 1100px) and (max-width: 1599px) and (min-height: 700px) {
  .pantalla .demo-estado [data-demo-estado-texto] { display: none; }
}

/* Pantallas de ordenador más bajas: todo un poco más compacto para que siga cabiendo */
@media (min-width: 1100px) and (min-height: 700px) and (max-height: 820px) {
  .seccion.seccion--pantalla { padding-block: 20px; }
  .pantalla-cabeza { gap: 10px; padding-top: 14px; }
  .pantalla--problema .pantalla-cabeza { margin-bottom: 10px; }
  .pantalla--problema .pb-escena { max-height: calc(100svh - var(--cabecera) - 270px); }
  .pantalla--problema .pb-info-titulo { font-size: 1.125rem; }
  .pantalla--problema .pb-info-texto { font-size: 0.9375rem; line-height: 1.45; }
  .js .pantalla--problema .pb-infos { min-height: 6.25rem; }
  .pantalla--como .pantalla-cabeza { margin-bottom: 10px; }
  .pantalla--como .titular--compacto { font-size: clamp(1.875rem, 2.6vw, 3rem); }
  .pantalla--como { --demo-resto: 420px; }
  .pantalla--como .cabeza-texto { font-size: 1.0625rem; }
  .pantalla--como .paso { padding-block: 10px 12px; }
  .pantalla--como .paso h3 { font-size: 1.1875rem; }
  .pantalla--como .paso p { font-size: 1rem; line-height: 1.45; }
  .pantalla .demo-subtitulo { min-height: 5.75rem; padding-block: 10px; }
  .pantalla .demo-cabeza, .pantalla .demo-pie { padding-block: 9px; }
}

@media (min-width: 1280px) {
}

/* =============================================================
   20. Movimiento reducido
   Se apaga lo continuo y lo que se desplaza; el contenido aparece sin moverse.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .barras span, .senal .onda { animation: none !important; }
  .senal .onda { opacity: .18; }
  .senal .onda:nth-child(2) { transform: scale(1.35); opacity: .1; }
  .senal .onda:nth-child(3) { display: none; }
  .js .senal .arco { animation: none; stroke-dashoffset: 0; }
  .js .senal .punto, .js .portada-ceja, .js .portada h1, .js .portada-pie { animation: none; }
  .js .revelar { transform: none; transition: opacity .3s linear; }
  .js .menu-lista li { opacity: 1; transform: none; }
  .demo-svg .cabeza-dibujo, .demo-svg .ojos, .demo-svg .destello, .demo-svg .estrella,
  .demo-punto, .demo-cursor { animation: none !important; }
  .demo-svg .persona.habla .boca { animation: none; transform: scaleY(.6); }
  .demo-resultado { transition: opacity .3s linear; transform: none; }
  .pb-escena * { animation: none !important; }
  .pb-escena .pb-rw, .pb-escena .pb-noans, .pb-escena .pb-q { opacity: 1; }
  .pb-escena .pb-cursor { transform: translate(150px, 150px); }
  .pb-escena .pb-mag { transform: translate(150px, 118px); }
  .solicitud[open], .solicitud[open]::backdrop { animation: none; }
}