/* ────────────────────────────────────────────────────────────────
   Andrés Gonzales — sistema visual
   Registro: informe bien hecho. Filetes finos, etiquetas en
   monoespaciada, filas alineadas y mucho aire. Ni una textura, ni un
   degradado de relleno, ni un titular en cursiva: la personalidad la
   ponen la retícula y la hoja de reporte, no los efectos.

   Ningún color ni ninguna fuente está escrito a mano aquí: entran
   como variables CSS desde datos/cliente.json (lo hace app.js).
   ──────────────────────────────────────────────────────────────── */

:root {
  /* Mientras no haya consentimiento no se piden las fuentes a Google:
     estas pilas del sistema tienen que aguantar el diseño solas. */
  --fallback-display: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --fallback-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fallback-mono: ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  --filete: 1px solid rgb(var(--niebla-rgb) / 0.42);
  --filete-fuerte: 1px solid rgb(var(--tinta-rgb) / 0.22);
  --filete-claro: 1px solid rgb(var(--arena-rgb) / 0.20);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans), var(--fallback-sans);
  background: var(--arena);
  color: var(--tinta);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Evita el parpadeo mientras el JSON no ha pintado la página */
body[data-listo="no"] { opacity: 0; }
body[data-listo="si"] { opacity: 1; transition: opacity .35s ease; }

::selection { background: var(--eucalipto); color: var(--papel); }

/* ── Tipografía ───────────────────────────────────────────────────
   Tres cortes con un papel cada uno y ninguno invade el del otro:
   Instrument Sans titula, IBM Plex Sans lee, IBM Plex Mono etiqueta. */

.font-display { font-family: var(--font-display), var(--fallback-display); font-weight: 600; }
.font-mono { font-family: var(--font-mono), var(--fallback-mono); }

.titular-hero   { font-size: clamp(46px, 8.4vw, 104px); line-height: 0.94; letter-spacing: -0.042em; }
.titular-seccion{ font-size: clamp(30px, 3.9vw, 52px);  line-height: 1.04; letter-spacing: -0.032em; }
.titular-ficha  { font-size: clamp(34px, 5.4vw, 68px);  line-height: 0.98; letter-spacing: -0.038em; }
.titular-bloque { font-size: clamp(21px, 2.1vw, 27px);  line-height: 1.16; letter-spacing: -0.022em; }

/* Sin webfont, Segoe/Helvetica vienen más anchas: al mismo tracking
   apretado las mayúsculas se tocan. Un pelo de aire hasta que cargue. */
html[data-fuentes="sistema"] .titular-hero    { letter-spacing: -0.03em; }
html[data-fuentes="sistema"] .titular-seccion { letter-spacing: -0.022em; }
html[data-fuentes="sistema"] .titular-ficha   { letter-spacing: -0.026em; }

/* La etiqueta monoespaciada es el gesto que se repite en toda la web:
   arriba de cada ficha, de cada sección y de cada fila de datos. */
.etiqueta {
  font-family: var(--font-mono), var(--fallback-mono);
  font-size: 10.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.17em;
  color: var(--tinta-suave);
}
.etiqueta-clara { color: rgb(var(--arena-rgb) / 0.62); }

.marcador {
  font-family: var(--font-mono), var(--fallback-mono);
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em;
  color: var(--eucalipto);
}
.marcador-claro { color: var(--eucalipto-claro); }

.cuerpo   { font-size: 16px; line-height: 1.72; color: var(--tinta-suave); }
.cuerpo-s { font-size: 14.5px; line-height: 1.7; color: var(--tinta-suave); }
.entradilla { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.62; color: var(--tinta-suave); }

/* Cifras y datos siempre en monoespaciada tabular: es lo que hace que
   una columna de valores se lea como un informe y no como una tabla HTML. */
.dato {
  font-family: var(--font-mono), var(--fallback-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ── Retícula y cabeceras de sección ──────────────────────────────
   Cada sección abre con un filete a todo el ancho y una barra de
   marcador + etiqueta encima. Es la costilla de la web. */

.contenedor { max-width: 1240px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
@media (min-width: 768px)  { .contenedor { padding-left: 40px; padding-right: 40px; } }
@media (min-width: 1100px) { .contenedor { padding-left: 56px; padding-right: 56px; } }

.barra-seccion {
  display: flex; align-items: baseline; gap: 14px;
  padding-top: 16px; border-top: var(--filete-fuerte);
  margin-bottom: 40px;
}
.barra-seccion-clara { border-top-color: rgb(var(--arena-rgb) / 0.26); }

.seccion { padding-top: 64px; padding-bottom: 64px; }
@media (min-width: 768px) { .seccion { padding-top: 104px; padding-bottom: 104px; } }

/* ── LA FICHA DE REPORTE ──────────────────────────────────────────
   El elemento firma. Un filete fino, la etiqueta arriba en
   monoespaciada y filas alineadas clave/valor separadas por pelo.
   Se reutiliza en los tres pasos, en lo que incluye la gestión, en
   la muestra del reporte mensual, en la prueba y en el diagnóstico. */

.ficha {
  background: var(--papel);
  border: var(--filete);
  border-radius: 2px;
  display: flex; flex-direction: column;
}
.ficha-oscura {
  background: rgb(var(--arena-rgb) / 0.05);
  border-color: rgb(var(--arena-rgb) / 0.24);
  color: var(--arena);
}

.ficha-etiqueta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 12px 18px;
  border-bottom: var(--filete);
}
/* El marcador de la derecha nunca se encoge ni se parte: si la etiqueta
   crece, crece hacia abajo y el número se queda donde está. */
.ficha-etiqueta .marcador { flex-shrink: 0; }
.ficha-oscura .ficha-etiqueta { border-bottom-color: rgb(var(--arena-rgb) / 0.24); }

.ficha-cuerpo { padding: 20px 18px; }
.ficha-cuerpo + .ficha-filas { border-top: var(--filete); }
.ficha-oscura .ficha-cuerpo + .ficha-filas { border-top-color: rgb(var(--arena-rgb) / 0.24); }

.ficha-titulo {
  font-family: var(--font-display), var(--fallback-display);
  font-weight: 600; letter-spacing: -0.022em; line-height: 1.18;
  font-size: 20px; color: var(--tinta);
}
.ficha-oscura .ficha-titulo { color: var(--arena); }

.ficha-filas { margin: 0; }
.ficha-fila {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 18px;
  border-bottom: var(--filete);
}
.ficha-fila:last-child { border-bottom: 0; }
.ficha-oscura .ficha-fila { border-bottom-color: rgb(var(--arena-rgb) / 0.24); }

.ficha-fila dt, .ficha-fila-clave {
  font-size: 13.5px; color: var(--tinta-suave); flex: 1 1 auto; min-width: 0;
}
.ficha-oscura .ficha-fila dt, .ficha-oscura .ficha-fila-clave { color: rgb(var(--arena-rgb) / 0.72); }

.ficha-fila dd, .ficha-fila-valor {
  margin: 0; flex: 0 0 auto; text-align: right;
  font-family: var(--font-mono), var(--fallback-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px; color: var(--tinta); max-width: 58%;
}
.ficha-oscura .ficha-fila dd, .ficha-oscura .ficha-fila-valor { color: var(--arena); }

/* Un valor que todavía no existe se escribe con raya, no con cero:
   un cero es un dato y una raya es la ausencia de dato. */
.ficha-fila-vacio { color: var(--niebla); }

.ficha-pie {
  padding: 12px 18px;
  border-top: var(--filete);
  font-family: var(--font-mono), var(--fallback-mono);
  font-size: 11px; line-height: 1.6; color: var(--tinta-suave);
  margin-top: auto;
}
.ficha-oscura .ficha-pie { border-top-color: rgb(var(--arena-rgb) / 0.24); color: rgb(var(--arena-rgb) / 0.66); }

/* La hoja de muestra del reporte mensual va un punto más grande:
   es la pieza que hay que poder leer desde lejos. */
.hoja .ficha-etiqueta { padding: 16px 22px; }
.hoja .ficha-fila { padding: 16px 22px; }
.hoja .ficha-fila dt { font-size: 15px; }
.hoja .ficha-fila dd { font-size: 15px; }
.hoja .ficha-pie { padding: 16px 22px; font-size: 12px; }
@media (min-width: 768px) {
  .hoja .ficha-fila { padding: 20px 30px; }
  .hoja .ficha-etiqueta, .hoja .ficha-pie { padding: 18px 30px; }
  .hoja .ficha-fila dt { font-size: 16.5px; }
  .hoja .ficha-fila dd { font-size: 16.5px; }
}

/* ── Enlaces y botones ────────────────────────────────────────────
   Botones rectos, de 2 px de radio: la píldora es de otra web. */

.enlace {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgb(var(--tinta-rgb) / 0.3);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color .25s ease, color .25s ease;
}
.enlace:hover { text-decoration-color: currentColor; }
.enlace:focus-visible { outline: 2px solid var(--eucalipto); outline-offset: 3px; border-radius: 2px; }

.enlace-claro { text-decoration-color: rgb(var(--arena-rgb) / 0.35); }
.enlace-claro:focus-visible { outline-color: var(--eucalipto-claro); }

/* Variante sin subrayado permanente: en una navegación de cinco enlaces
   seguidos, cinco rayas a la vez ensucian la cabecera. Aparece al pasar. */
.enlace-suave { text-decoration-color: transparent; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 22px; border: 1px solid transparent; border-radius: 2px;
  font-family: var(--font-sans), var(--fallback-sans);
  font-size: 14.5px; font-weight: 500; letter-spacing: -0.005em;
  cursor: pointer; text-align: center;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s cubic-bezier(.2,.7,.2,1);
}
.boton:focus-visible { outline: 2px solid var(--eucalipto); outline-offset: 3px; }
.boton:active { transform: translateY(1px); }
.boton .icono { flex-shrink: 0; display: inline-flex; }

.boton-verde { background: var(--eucalipto); color: #FFFFFF; }
.boton-verde:hover { background: var(--tinta); }

.boton-tinta { background: var(--tinta); color: var(--arena); }
.boton-tinta:hover { background: var(--eucalipto); color: #FFFFFF; }

.boton-linea { border-color: rgb(var(--tinta-rgb) / 0.3); color: var(--tinta); background: transparent; }
.boton-linea:hover { border-color: var(--tinta); background: rgb(var(--tinta-rgb) / 0.05); }

.boton-linea-clara { border-color: rgb(var(--arena-rgb) / 0.4); color: var(--arena); background: transparent; }
.boton-linea-clara:hover { border-color: var(--arena); background: rgb(var(--arena-rgb) / 0.08); }
.boton-linea-clara:focus-visible { outline-color: var(--eucalipto-claro); }

.boton-claro { background: var(--arena); color: var(--tinta); }
.boton-claro:hover { background: #FFFFFF; }
.boton-claro:focus-visible { outline-color: var(--eucalipto-claro); }

.boton:disabled { opacity: .5; cursor: not-allowed; }

/* Un botón que parece un enlace (configurar cookies, en el pie) */
.boton-texto {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
}

/* ── Listas de filete ─────────────────────────────────────────────
   La misma idea de la ficha llevada a listas largas: nada de viñetas
   redondas, solo una raya y un filete debajo. */

.lista-filete { list-style: none; }
.lista-filete > li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 15px 0; border-bottom: var(--filete);
  font-size: 15px; line-height: 1.6;
}
.lista-filete > li::before {
  content: ''; flex-shrink: 0; margin-top: 11px;
  width: 14px; height: 1px; background: var(--eucalipto);
}
.lista-filete-clara > li { border-bottom-color: rgb(var(--arena-rgb) / 0.2); }
.lista-filete-clara > li::before { background: var(--eucalipto-claro); }

/* ── Enlaces de las tarjetas de propiedad ─────────────────────── */
.tarjeta-propiedad img { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.tarjeta-propiedad:hover img { transform: scale(1.03); }
.tarjeta-propiedad .flecha { transition: transform .35s cubic-bezier(.2,.7,.2,1); display: inline-flex; }
.tarjeta-propiedad:hover .flecha { transform: translateX(4px); }
/* ── Hero con vídeo de fondo ──────────────────────────────────────
   El póster va como fondo del contenedor, no solo como atributo del
   <video>: así hay imagen aunque el vídeo no llegue a existir. */

.hero-seccion {
  position: relative; isolation: isolate;
  padding-top: 56px; padding-bottom: 72px;
}
@media (min-width: 768px) { .hero-seccion { padding-top: 96px; padding-bottom: 120px; } }

.hero-fondo {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  background-color: var(--tinta);
  background-size: cover;
  background-repeat: no-repeat;
}

.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Sin fondo propio: si el vídeo no pinta, se ve el póster de debajo */
  background: transparent;
}
/* Lo pone activarVideoHero() cuando el vídeo no arranca */
.hero-video-fuera { display: none; }

/* El velo, direccional. No es una capa uniforme que se aclara entera:
   es una elipse opaca anclada sobre el bloque de texto que se abre
   rápido hacia fuera. Detrás del titular hay tinta casi sólida; arriba
   y en el lado contrario el vídeo se ve casi limpio, que es donde se
   nota el movimiento. Encima, un velo general muy flojo que solo evita
   que las zonas más claras del cielo se vayan del todo.

   Los porcentajes están medidos contra el píxel más claro del vídeo
   detrás de cada línea de texto, en ocho instantes del clip: ver la
   tabla de contraste del README antes de tocarlos. */
.hero-velo {
  position: absolute; inset: 0; pointer-events: none;
  background:
    /* 1. Guarda del texto: elipse ceñida al bloque, casi opaca y con
          el borde muy difuminado para que no se recorte contra el
          vídeo. Es la que garantiza el contraste. */
    radial-gradient(55% 67% at 23% 46%,
      rgb(var(--tinta-rgb) / 0.97) 0%,
      rgb(var(--tinta-rgb) / 0.965) 64%,
      rgb(var(--tinta-rgb) / 0.70) 83%,
      rgb(var(--tinta-rgb) / 0.00) 100%),
    /* 2. Caída suave hacia la derecha, para que el corte de la elipse
          no se note como una mancha */
    radial-gradient(95% 105% at 10% 52%,
      rgb(var(--tinta-rgb) / 0.52) 0%,
      rgb(var(--tinta-rgb) / 0.20) 58%,
      rgb(var(--tinta-rgb) / 0.05) 100%),
    /* 3. Un poso general mínimo: solo asienta el cielo y da pie a la
          sección oscura de debajo */
    linear-gradient(180deg,
      rgb(var(--tinta-rgb) / 0.03) 0%,
      rgb(var(--tinta-rgb) / 0.00) 42%,
      rgb(var(--tinta-rgb) / 0.20) 100%);
}

/* En pantalla estrecha el texto ocupa todo el ancho, así que la elipse
   no sirve: no hay «lado contrario» donde aclarar. Se aclara arriba,
   por encima del eyebrow, que es la única franja de vídeo que queda a
   la vista, y se cierra a partir de donde empieza el titular. */
@media (max-width: 1023px) {
  .hero-velo {
    background:
      linear-gradient(180deg,
        rgb(var(--tinta-rgb) / 0.42) 0%,
        rgb(var(--tinta-rgb) / 0.52) 5%,
        rgb(var(--tinta-rgb) / 0.95) 11%,
        rgb(var(--tinta-rgb) / 0.95) 100%);
  }
}

.hero-contenido { position: relative; }

/* ── Marco del vídeo ──────────────────────────────────────────────
   El original es 360×640, o sea 9:16 clavado. El marco declara esa
   misma proporción y el vídeo la llena entera: no hay banda negra
   que rellenar porque no sobra ni falta un píxel. En escritorio se
   limita el ancho, que estirar un 360p a media pantalla no le hace
   ningún favor a nadie. */
.marco-video {
  position: relative;
  width: 100%; max-width: 410px;
  margin-inline: auto;
  background: var(--tinta);
  border: var(--filete-fuerte); border-radius: 2px;
  overflow: hidden;
  line-height: 0;
}
/* La proporción va en el <video>, no en el marco: con box-sizing:border-box
   el filete de 1 px entra en la caja y el hueco interior quedaba en 0,5607
   en vez de 0,5625, lo justo para que object-fit:cover recortase un pelo.
   Poniéndola aquí, el marco se ajusta al vídeo y no recorta nada. */
.marco-video video {
  display: block; width: 100%; height: auto;
  aspect-ratio: 9 / 16;
  background: var(--tinta);
}
.marco-video video:focus-visible { outline: 2px solid var(--eucalipto); outline-offset: 2px; }
.marco-video p { padding: 20px; color: var(--arena); }

.marco-foto { position: relative; overflow: hidden; background: var(--arena-2); }

/* Banda de la zona, en la cabecera del bloque de cada ficha. Las tres
   imágenes se exportan ya recortadas a 2:1, así que el marco declara esa
   misma proporción y object-fit no llega a recortar nada. */
.banda-zona { aspect-ratio: 2 / 1; }
.marco-foto::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgb(var(--tinta-rgb) / 0.12);
}

/* ── Marcadores PENDIENTE_ ────────────────────────────────────────
   Un dato que el cliente aún no ha dado no puede pasar por bueno:
   se pinta en monoespaciada y con subrayado punteado para que sea
   imposible confundirlo con un teléfono, un RUC o un testimonio. */
/* Nota, no código. Va en la sans del cuerpo y en cursiva: se lee como
   una acotación del que está montando la web, no como el nombre de una
   variable que se ha escapado. El subrayado punteado en verde sigue
   diciendo «esto todavía no es un dato». */
.pendiente {
  font-family: var(--font-sans), var(--fallback-sans);
  font-style: italic; font-weight: 400;
  /* Tope de cuerpo: dentro de un titular de 68 px una nota a 0.9em salía
     enorme y se comía la ficha. A 21 px sigue siendo imposible de pasar
     por alto y no descuadra el titular. */
  font-size: min(0.9em, 21px);
  letter-spacing: 0; line-height: 1.4;
  color: var(--eucalipto);
  background: rgb(var(--eucalipto-rgb) / 0.09);
  border-bottom: 1px dotted rgb(var(--eucalipto-rgb) / 0.6);
  padding: 0.1em 0.4em; border-radius: 2px;
  overflow-wrap: break-word;
}
/* Sobre tinta el verde medio se apaga: se usa el eucalipto claro */
.sobre-tinta .pendiente {
  color: var(--eucalipto-claro);
  background: rgb(var(--eucalipto-claro-rgb) / 0.14);
  border-bottom-color: rgb(var(--eucalipto-claro-rgb) / 0.6);
}

/* ── Diagnóstico ──────────────────────────────────────────────────
   Cinco preguntas en el navegador. Las opciones son radios de verdad
   (teclado y lector de pantalla) disfrazadas de filas de reporte. */

.opcion { display: block; position: relative; cursor: pointer; }
.opcion input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
  margin: 0; pointer-events: none;
}
.opcion-caja {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border: var(--filete); border-radius: 2px;
  background: var(--papel);
  transition: border-color .2s ease, background-color .2s ease;
}
.opcion:hover .opcion-caja { border-color: rgb(var(--tinta-rgb) / 0.4); }
.opcion input:focus-visible + .opcion-caja { outline: 2px solid var(--eucalipto); outline-offset: 2px; }
.opcion input:checked + .opcion-caja {
  border-color: var(--eucalipto);
  background: rgb(var(--eucalipto-rgb) / 0.07);
}
.opcion-marca {
  flex-shrink: 0; width: 16px; height: 16px; border-radius: 999px;
  border: 1px solid rgb(var(--tinta-rgb) / 0.35);
  display: inline-flex; align-items: center; justify-content: center;
}
.opcion input:checked + .opcion-caja .opcion-marca { border-color: var(--eucalipto); }
.opcion-marca::after {
  content: ''; width: 8px; height: 8px; border-radius: 999px;
  background: var(--eucalipto); transform: scale(0);
  transition: transform .2s cubic-bezier(.2,.7,.2,1);
}
.opcion input:checked + .opcion-caja .opcion-marca::after { transform: scale(1); }
.opcion-texto { font-size: 15.5px; line-height: 1.4; }

.paso-diagnostico[hidden] { display: none; }

.barra-progreso { height: 2px; background: rgb(var(--tinta-rgb) / 0.14); overflow: hidden; }
.barra-progreso span {
  display: block; height: 100%; background: var(--eucalipto);
  transition: width .4s cubic-bezier(.2,.7,.2,1);
}

/* ── Formulario ───────────────────────────────────────────────── */
.campo-etiqueta {
  display: block;
  font-family: var(--font-mono), var(--fallback-mono);
  font-size: 10.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.17em;
  color: var(--tinta-suave); margin-bottom: 8px;
}
.campo {
  width: 100%; padding: 13px 15px;
  background: var(--papel); color: var(--tinta);
  border: var(--filete); border-radius: 2px;
  font-family: var(--font-sans), var(--fallback-sans); font-size: 15.5px;
  transition: border-color .2s ease;
}
.campo::placeholder { color: var(--niebla); }
.campo:hover { border-color: rgb(var(--tinta-rgb) / 0.35); }
.campo:focus { outline: 2px solid var(--eucalipto); outline-offset: 1px; border-color: var(--eucalipto); }
.campo[aria-invalid="true"] { border-color: #B4462F; }

.error-campo {
  display: block; margin-top: 7px;
  font-family: var(--font-mono), var(--fallback-mono);
  font-size: 11.5px; line-height: 1.5; color: #B4462F;
}
.error-campo[hidden] { display: none; }

.casilla { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.casilla input {
  flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px;
  accent-color: var(--eucalipto); cursor: pointer;
}
.casilla input:focus-visible { outline: 2px solid var(--eucalipto); outline-offset: 2px; }
.casilla span { font-size: 13.5px; line-height: 1.6; color: var(--tinta-suave); }

.aviso-exito {
  border: 1px solid var(--eucalipto);
  background: rgb(var(--eucalipto-rgb) / 0.09);
  border-radius: 2px; padding: 18px 20px;
}
.aviso-exito[hidden] { display: none; }

/* ── Acordeón de preguntas ────────────────────────────────────── */
.pregunta { border-bottom: var(--filete); }
.pregunta:first-child { border-top: var(--filete); }
.pregunta summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-family: var(--font-display), var(--fallback-display);
  font-weight: 600; font-size: 17.5px; line-height: 1.35; letter-spacing: -0.018em;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary:focus-visible { outline: 2px solid var(--eucalipto); outline-offset: -2px; }
.pregunta-signo {
  flex-shrink: 0; margin-top: 2px; color: var(--eucalipto);
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.pregunta[open] .pregunta-signo { transform: rotate(45deg); }
.pregunta-respuesta { padding-bottom: 24px; max-width: 68ch; }

/* ── Banner de cookies ────────────────────────────────────────── */
.banner-cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: 14px; pointer-events: none;
}
.banner-cookies[hidden] { display: none; }

.banner-cookies-caja {
  pointer-events: auto;
  max-width: 1140px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 20px;
  padding: 22px 24px;
  background: var(--papel);
  border: var(--filete-fuerte); border-radius: 2px;
  box-shadow: 0 -2px 40px -12px rgb(var(--tinta-rgb) / 0.35);
  animation: sube .45s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes sube {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.banner-cookies-texto p { font-size: 13px; line-height: 1.65; color: var(--tinta-suave); max-width: 70ch; }
.banner-cookies-botones { display: flex; flex-wrap: wrap; gap: 10px; }
.banner-cookies-botones .boton { padding: 12px 20px; font-size: 13.5px; }

@media (max-width: 520px) {
  .banner-cookies { padding: 10px; }
  .banner-cookies-caja { padding: 18px; gap: 16px; }
  .banner-cookies-botones .boton { flex: 1 1 auto; padding: 11px 14px; font-size: 13px; }
}
@media (min-width: 900px) {
  .banner-cookies { padding: 20px; }
  .banner-cookies-caja {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 36px; padding: 24px 28px;
  }
  .banner-cookies-botones { flex-shrink: 0; }
}

/* ── Aviso de web de demostración (pie) ───────────────────────── */
/* La raya de la izquierda va posicionada, no como elemento flex: en un
   contenedor flex el texto forma un item anónimo cuyo min-width es su
   palabra más larga, y con un marcador largo como PENDIENTE_CIFRA_
   RENTABILIDAD eso sacaba 6 px de scroll horizontal a 320 px. */
.aviso-demo {
  position: relative;
  margin-top: 28px; padding-top: 20px; padding-left: 24px;
  border-top: 1px solid rgb(var(--arena-rgb) / 0.12);
  max-width: 780px;
  font-family: var(--font-mono), var(--fallback-mono);
  font-size: 11px; line-height: 1.75;
  color: rgb(var(--arena-rgb) / 0.5);
}
.aviso-demo::before {
  content: ''; position: absolute; left: 0; top: 29px;
  width: 12px; height: 1px; background: var(--eucalipto-claro);
}

/* Aviso de ficha de ejemplo, dentro de cada propiedad */
.aviso-ficha {
  border-left: 2px solid var(--eucalipto);
  background: rgb(var(--eucalipto-rgb) / 0.07);
  padding: 14px 18px;
  font-family: var(--font-mono), var(--fallback-mono);
  font-size: 11.5px; line-height: 1.65; color: var(--tinta-suave);
  max-width: 70ch;
}

/* ── Hueco del motor PMS ──────────────────────────────────────────
   No se disimula: se enseña como lo que es, un hueco reservado. */
.hueco-motor {
  border: 1px dashed rgb(var(--tinta-rgb) / 0.3);
  border-radius: 2px;
  background: repeating-linear-gradient(
    -45deg,
    transparent, transparent 9px,
    rgb(var(--tinta-rgb) / 0.035) 9px, rgb(var(--tinta-rgb) / 0.035) 18px
  );
  padding: 26px 22px;
}

/* ── Páginas legales ──────────────────────────────────────────── */
.aviso-pendiente {
  border-left: 2px solid var(--eucalipto);
  background: rgb(var(--eucalipto-rgb) / 0.07);
  padding: 16px 20px;
  font-size: 13.5px; line-height: 1.75; color: var(--tinta-suave);
  max-width: 70ch; margin-bottom: 44px;
}

.seccion-legal { padding-bottom: 40px; margin-bottom: 40px; border-bottom: var(--filete); scroll-margin-top: 120px; }
.seccion-legal:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

.parrafo-legal { font-size: 15px; line-height: 1.8; color: var(--tinta-suave); max-width: 68ch; }
.parrafo-legal + .parrafo-legal { margin-top: 16px; }

.datos-legales { margin-top: 20px; max-width: 660px; }
.datos-legales-fila {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px;
  padding: 12px 0; border-bottom: var(--filete);
}
.datos-legales-fila dt {
  flex: 0 0 210px;
  font-family: var(--font-mono), var(--fallback-mono);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--tinta-suave);
}
.datos-legales-fila dd { flex: 1 1 220px; font-size: 15px; color: var(--tinta); margin: 0; }
@media (max-width: 620px) { .datos-legales-fila dt { flex-basis: 100%; } }

.tabla-legal-caja { margin-top: 22px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla-legal { width: 100%; min-width: 620px; border-collapse: collapse; text-align: left; }
.tabla-legal th, .tabla-legal td { padding: 13px 18px 13px 0; vertical-align: top; border-bottom: var(--filete); }
.tabla-legal thead th {
  font-family: var(--font-mono), var(--fallback-mono);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em;
  font-weight: 500; color: var(--tinta-suave);
  border-bottom: var(--filete-fuerte);
}
.tabla-legal tbody th, .tabla-legal tbody td { font-size: 13.5px; line-height: 1.65; color: var(--tinta-suave); font-weight: 400; }
.tabla-legal tbody code {
  font-family: var(--font-mono), var(--fallback-mono);
  font-size: 12.5px; color: var(--eucalipto);
}

.indice-legal-lista { list-style: none; }
.indice-legal-lista li + li { margin-top: 12px; }
.indice-legal-lista a { display: flex; gap: 12px; align-items: baseline; font-size: 13.5px; line-height: 1.45; color: var(--tinta-suave); }
.indice-legal-lista a:hover { color: var(--tinta); }
.indice-legal-lista a:focus-visible { outline: 2px solid var(--eucalipto); outline-offset: 3px; }
.indice-legal-num {
  font-family: var(--font-mono), var(--fallback-mono);
  font-size: 11px; color: var(--eucalipto); flex-shrink: 0; min-width: 20px;
}

/* ── Entrada suave ────────────────────────────────────────────── */
.entra { opacity: 0; transform: translateY(10px); animation: entra .7s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes entra { to { opacity: 1; transform: translateY(0); } }

/* ── Rejilla de 12 columnas en móvil ──────────────────────────────
   Un grid-cols-12 con gap ancho mide cientos de píxeles solo de
   huecos (11 calles), por mucho que las columnas puedan valer 0, y a
   375 px eso saca scroll horizontal en toda la web. Debajo de md se
   limita el hueco horizontal; el vertical no se toca. */
@media (max-width: 767px) {
  .grid.grid-cols-12 { column-gap: 1.25rem; }
}

@media (max-width: 900px) { .ocultar-md { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .entra { opacity: 1; transform: none; }

  /* Quien pide menos movimiento no quiere un plano aéreo moviéndose
     detrás del titular. Se queda el póster, que es el mismo fotograma:
     el hero se ve igual, pero quieto. */
  .hero-video { display: none; }
}