/* ═══════════════════════════════════════════════════════════════════════════
   PÁGINAS INTERIORES — servicios, zonas, garantía, equipo y preguntas.

   Se carga SOLO en las páginas generadas por herramientas/construir-paginas.mjs.
   La portada no lo usa y no cambia en nada.

   Todo cuelga de las variables de base.css: --carbon, --oro, --blanco,
   --display, --texto… Así, cambiar la marca en un sitio la cambia también acá.

   ── POR QUÉ NO SE REUTILIZAN .cabecera Y .pie DE LA PORTADA ───────────────
   Los dos dependen de JavaScript. La cabecera esconde su navegación por debajo
   del punto de ruptura y la sustituye por una hamburguesa que abre interfaz.js;
   el pie usa data-calce, que dimensiona el logotipo con calce.js. Estas páginas
   no cargan ningún script a propósito —la CSP solo autoriza el hash del script
   en línea de index.html—, así que necesitan una cabecera y un pie que se vean
   enteros, en cualquier ancho, sin ejecutar nada.
   ═══════════════════════════════════════════════════════════════════════════ */

.pagina-interior {
  background: var(--carbon);
  color: var(--blanco);
  font-family: var(--texto);
  font-size: var(--t-base);
  line-height: 1.65;
}

.pagina-interior .wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--canal);
}

/* ── Cabecera ──────────────────────────────────────────────────────────── */

.int-cabecera {
  border-bottom: 1px solid var(--borde-osc);
  padding-block: var(--e4);
  background: var(--carbon);
}

.int-cabecera__caja {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3) var(--e5);
}

.int-cabecera .marca__logo {
  display: block;
  width: auto;
  height: 34px;
}

/* La navegación se ve SIEMPRE, también en móvil. Es la diferencia con la
   portada, y es lo que permite que estas páginas no dependan de JavaScript. */
.int-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e5);
  margin-inline-end: auto;
}

.int-nav a {
  color: var(--gris-claro);
  text-decoration: none;
  font-size: var(--t-menor);
  letter-spacing: 0.02em;
  padding-block: 6px;
  border-bottom: 1px solid transparent;
}

.int-nav a:hover,
.int-nav a:focus-visible {
  color: var(--oro-alto);
  border-bottom-color: var(--oro-linea);
}

/* ── Migas de pan ──────────────────────────────────────────────────────── */

.miga {
  border-bottom: 1px solid var(--borde-osc);
  padding-block: var(--e3);
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--gris);
}

.miga a { color: var(--gris); text-decoration: none; }
.miga a:hover, .miga a:focus-visible { color: var(--oro-alto); }
.miga__sep { margin-inline: var(--e2); color: var(--borde-osc); }
.miga [aria-current="page"] { color: var(--blanco); }

/* ── Cuerpo ────────────────────────────────────────────────────────────── */

.int { padding-block: var(--e8) var(--e7); }

.int .cota {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-cota);
  text-transform: uppercase;
  color: var(--oro);
  margin: 0 0 var(--e4);
}

.int h1 {
  font-family: var(--display);
  font-weight: 900;
  /* NO se usa --t-h1: ese es el tamaño del titular del hero de la portada, que
     está pensado para ocupar una pantalla entera él solo. En una página
     interior, cuyo trabajo es responder rápido, un titular de 124 px empuja la
     respuesta por debajo del pliegue y deja la primera pantalla sin ninguna
     información útil. Este tamaño mantiene la voz de la marca y deja ver el
     párrafo de entrada. */
  font-size: clamp(34px, 6.4vw, 72px);
  line-height: 0.98;
  letter-spacing: var(--track-display);
  margin: 0 0 var(--e5);
  max-width: 20ch;
}

.int h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-h3);
  line-height: 1.1;
  margin: var(--e8) 0 var(--e4);
  padding-top: var(--e4);
  border-top: 1px solid var(--borde-osc);
  max-width: 24ch;
}

.int h3 {
  font-family: var(--texto);
  font-weight: 600;
  font-size: var(--t-medio);
  line-height: 1.3;
  margin: var(--e6) 0 var(--e2);
  color: var(--blanco);
  max-width: 40ch;
}

/* Los párrafos se acotan a una medida legible. No es estética: un extractor
   trocea mejor un párrafo que se lee de una pasada que uno de veinte líneas. */
.int p { margin: 0 0 var(--e4); max-width: 68ch; }

.int-entrada {
  font-size: var(--t-medio);
  line-height: 1.5;
  color: var(--arena);
  max-width: 60ch;
}

.int a { color: var(--oro-alto); text-underline-offset: 3px; }
.int a:hover, .int a:focus-visible { color: var(--oro); }

.int-lista { margin: 0 0 var(--e5); padding: 0; list-style: none; max-width: 68ch; }

.int-lista li {
  position: relative;
  padding-inline-start: var(--e5);
  padding-block: var(--e2);
  border-bottom: 1px solid var(--borde-osc);
}

.int-lista li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 1.05em;
  width: 12px;
  height: 1px;
  background: var(--oro);
}

/* Ficha de definiciones: concepto y explicación. Es la forma que mejor se
   extrae de todas las que había disponibles, mejor incluso que una lista. */
.int-fichas { margin: 0 0 var(--e5); max-width: 74ch; }

.int-fichas dt {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oro);
  padding-top: var(--e3);
  border-top: 1px solid var(--borde-osc);
}

.int-fichas dd { margin: var(--e1) 0 var(--e4); color: var(--gris-claro); }

/* ── Tarjetas del índice de servicios ──────────────────────────────────── */

.int-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--e5);
  margin: var(--e6) 0 var(--e5);
}

.int-tarjeta {
  border: 1px solid var(--borde-osc);
  background: var(--carbon-2);
  padding: var(--e5);
}

.int-tarjeta__n {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  color: var(--oro);
  margin: 0 0 var(--e2);
}

/* Doble clase a propósito: `.int h2` vuelve a fijar margin-top dentro de la
   media query de ancho grande, que está MÁS ABAJO en este archivo. Con una sola
   clase las dos reglas empatan en especificidad, gana la última por orden de
   aparición, y en escritorio aparecía un hueco de 96 px entre el número de la
   tarjeta y su título. Con `.int .int-tarjeta h2` la especificidad es mayor y
   el orden dentro del archivo deja de importar. */
.int .int-tarjeta h2 {
  margin: 0 0 var(--e2);
  padding: 0;
  border: 0;
  font-size: var(--t-medio);
  max-width: none;
}

.int-tarjeta h2 a { text-decoration: none; }
.int-tarjeta p { margin: 0 0 var(--e2); color: var(--gris-claro); font-size: var(--t-menor); }

.int-tarjeta__gar {
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--oro-alto);
  margin: 0;
}

/* ── Barrios ───────────────────────────────────────────────────────────── */

.int-barrios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  list-style: none;
  margin: 0 0 var(--e5);
  padding: 0;
}

.int-barrios li {
  border: 1px solid var(--borde-osc);
  padding: 6px var(--e3);
  font-size: var(--t-menor);
  color: var(--arena);
}

/* ── Personas ──────────────────────────────────────────────────────────── */

.int-personas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--e5);
  margin: var(--e5) 0;
}

.int-persona { border-top: 1px solid var(--oro-linea); padding-top: var(--e3); }
.int-persona h3 { margin: 0 0 var(--e1); font-size: var(--t-medio); }
.int-persona p { margin: 0; color: var(--gris); font-size: var(--t-menor); }

/* ── Fecha de revisión ─────────────────────────────────────────────────── */

.int-fecha {
  margin-top: var(--e8);
  padding-top: var(--e4);
  border-top: 1px solid var(--borde-osc);
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--gris);
}

/* ── Llamada a la acción ───────────────────────────────────────────────── */

.int-cta {
  background: var(--verde-900);
  border-block: 1px solid var(--borde-osc);
  padding-block: var(--e7);
}

.int-cta h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-h3);
  margin: 0 0 var(--e3);
}

.int-cta p { margin: 0 0 var(--e4); max-width: 60ch; color: var(--arena); }
.int-cta__botones { display: flex; flex-wrap: wrap; gap: var(--e3); }
.int-cta__correo { font-family: var(--mono); font-size: var(--t-menor); }
.int-cta__correo a { color: var(--oro-alto); }

/* ── Pie ───────────────────────────────────────────────────────────────── */

.int-pie {
  border-top: 1px solid var(--borde-osc);
  padding-block: var(--e7) var(--e5);
  font-size: var(--t-menor);
}

.int-pie__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--e6);
  margin-bottom: var(--e6);
}

.int-pie h2 {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-cota);
  text-transform: uppercase;
  color: var(--oro);
  margin: 0 0 var(--e3);
  font-weight: 500;
}

.int-pie p { margin: 0 0 var(--e2); color: var(--gris-claro); max-width: 42ch; }
.int-pie ul { list-style: none; margin: 0; padding: 0; }
.int-pie li { padding-block: 4px; }
.int-pie a { color: var(--gris-claro); text-decoration: none; }
.int-pie a:hover, .int-pie a:focus-visible { color: var(--oro-alto); text-decoration: underline; }

.int-pie__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid var(--borde-osc);
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--gris);
}

/* ── Enlace de salto, igual que en la portada ──────────────────────────── */

.pagina-interior .salto {
  position: absolute;
  inset-inline-start: -9999px;
}

.pagina-interior .salto:focus {
  inset-inline-start: var(--canal);
  top: var(--e2);
  z-index: 100;
  background: var(--oro);
  color: var(--tinta);
  padding: var(--e2) var(--e3);
}

/* ── Ancho grande ──────────────────────────────────────────────────────── */

@media (min-width: 860px) {
  .int { padding-block: var(--e9) var(--e8); }
  .int h2 { margin-top: var(--e9); }
  .int-cabecera .marca__logo { height: 40px; }
}

/* ── Movimiento reducido ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .pagina-interior * { transition: none !important; animation: none !important; }
}