/* ==========================================================================
   MOLVIA — hoja de estilos (Brandbook Molvia V1.0)
   Estética de documento de ingeniería: retícula visible, líneas finas,
   numeración de secciones y cajetín tipo plano.
   ========================================================================== */

/* ---------- Fuentes (alojadas en local, licencia OFL) ----------
   Solo dos pesos: Regular 400 y SemiBold 600. Sin cursivas. */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fuentes/ibm-plex-sans-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fuentes/ibm-plex-sans-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fuentes/ibm-plex-mono-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Variables ---------- */

:root {
  --tinta: #1B2A3A;     /* todo el texto, logo, líneas de plano */
  --fondo: #F4F5F6;     /* superficie base */
  --blanco: #FFFFFF;    /* tablas, capturas, bloques de lectura */
  --gris: #8A939C;      /* SOLO retícula, separadores y cotas. Nunca texto */
  --naranja: #E5622D;   /* SOLO zona problemática y cifra de ahorro */

  --sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "Consolas", "Courier New", monospace;

  --linea: 1px solid var(--gris);
  --ancho-hoja: 72rem;
  --ancho-margen: 13rem;
}

/* ---------- Escala tipográfica (px de referencia) ----------
   H1            Sans 600   40/44
   H2            Sans 600   24/30
   Cuerpo        Sans 400   16/26
   Dato técnico  Mono 400   13/18, mayúsculas
   Pie           Mono 400   11/16                                        */

.dato {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.125rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0 1rem;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.625rem;
  font-weight: 400;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
}

h1 {
  font-size: 2.5rem;
  line-height: 2.75rem;
}

h2 {
  font-size: 1.5rem;
  line-height: 1.875rem;
}

/* Sin nivel propio en la escala: cuerpo en SemiBold */
h3 {
  font-size: 1rem;
  line-height: 1.625rem;
}

strong {
  font-weight: 600;
}

p {
  margin: 0 0 1rem;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--tinta);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

a:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
}

.mono {
  font-family: var(--mono);
}

.salto {
  position: absolute;
  left: -9999px;
}

.salto:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  background: var(--blanco);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--tinta);
}

/* Marcador de contenido pendiente: visible a propósito, sin naranja */
.pendiente {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.125rem;
  font-weight: 400;
  color: var(--tinta);
  background: var(--blanco);
  border: 1px dashed var(--tinta);
  padding: 0 0.3em;
  overflow-wrap: anywhere;
}

/* ---------- Hoja (marco del documento) ---------- */

.hoja {
  max-width: var(--ancho-hoja);
  margin: 1.5rem auto;
  border: var(--linea);
  background: var(--fondo);
}

/* Regla superior con zonas numeradas, como el marco de un plano */
.regla {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: var(--linea);
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1rem;
  text-align: center;
}

.regla li {
  padding: 0.125rem 0;
}

.regla li + li {
  border-left: var(--linea);
}

/* ---------- Cabecera ---------- */

/* El relleno (20 px) supera la altura de la "M" del wordmark: área de protección */
.cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 1.5rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--tinta);
}

.marca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 1.5rem;
}

/* Wordmark, variante B "línea de partición".
   El corte es una franja del color del fondo a media altura de las mayúsculas.
   Con line-height 1, la base de las letras queda a 0,875em del borde superior
   y la mitad de la altura de mayúscula (0,698em) a 0,526em. */
.marca__nombre {
  position: relative;
  display: inline-block;
  font-family: var(--sans);
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--tinta);
  text-decoration: none;
}

.marca__nombre::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(0.526em - 0.03em);
  height: 0.06em;
  background: var(--fondo);
}

/* Enlaces de la cabecera: selector de idioma y contacto / volver */
.cabecera__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

/* Selector ES · EN: el idioma actual sin subrayar, el otro como enlace */
.idioma {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* ---------- Secciones ---------- */

.seccion {
  display: grid;
  grid-template-columns: var(--ancho-margen) 1fr;
  border-bottom: var(--linea);
}

.seccion:last-of-type {
  border-bottom: 0;
}

.seccion__margen {
  padding: 1.5rem;
  border-right: var(--linea);
}

.seccion__num {
  display: block;
  margin-bottom: 0.25rem;
}

.seccion__cuerpo {
  padding: 2.5rem 2rem 3rem;
  min-width: 0;
}

.seccion__cuerpo > * {
  max-width: 48rem;
}

.seccion h2 {
  margin-bottom: 1.25rem;
}

.seccion h3 {
  margin-bottom: 0.5rem;
}

/* ---------- 01 · Qué hacemos ---------- */

.seccion--portada .seccion__cuerpo {
  padding-top: 3rem;
}

.seccion--portada h1 {
  margin-bottom: 1.5rem;
  max-width: 22ch;
}

/* Cajetín: tabla de datos tipo plano */
.cajetin {
  display: grid;
  grid-template-columns: max-content 1fr;
  margin: 2rem 0;
  border: 1px solid var(--tinta);
  background: var(--blanco);
}

.cajetin dt,
.cajetin dd {
  margin: 0;
  padding: 0.5rem 0.875rem;
  border-bottom: var(--linea);
}

.cajetin dt {
  border-right: var(--linea);
  padding-top: 0.75rem;
}

.cajetin dt:last-of-type,
.cajetin dd:last-of-type {
  border-bottom: 0;
}

/* ---------- Botón (llamada a la acción): tinta, nunca naranja ---------- */

.boton {
  display: inline-block;
  background: var(--tinta);
  color: var(--blanco);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.625rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--tinta);
}

.boton:hover {
  background: var(--blanco);
  color: var(--tinta);
}

.boton:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
}

/* ---------- Lista con líneas finas (02 · Qué revisamos, 05 · Confidencialidad) ---------- */

.lista-titulo {
  margin-top: 2rem;
}

.lista {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--linea);
}

.lista li {
  padding: 0.875rem 0;
  border-bottom: var(--linea);
}

/* Variante en dato técnico (Mono, mayúsculas): filas más compactas */
.lista.dato li {
  padding: 0.625rem 0;
}

/* Nota al pie de una sección: nivel "Pie" de la escala (Mono 11/16) */
.nota {
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1rem;
}

/* Índice numerado (04 · contenido del Informe DFM): columna fija para el número */
.indice {
  margin-top: 1.5rem;
}

.indice li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0 0.5rem;
}

.indice__nota {
  margin-top: 1.25rem;
}

/* ---------- 04 · Extracto del informe de ejemplo ---------- */

/* Hoja de documento: borde tinta, cabecera y pie separados con línea tinta, bloques con línea fina */
.extracto {
  margin-top: 2rem;
  border: 1px solid var(--tinta);
}

.extracto__cabecera {
  margin: 0;
  padding: 0.625rem 1.5rem;
  border-bottom: 1px solid var(--tinta);
}

.extracto__bloque {
  padding: 1.5rem;
}

.extracto__bloque + .extracto__bloque {
  border-top: var(--linea);
}

.extracto__etiqueta {
  margin-bottom: 0.5rem;
}

.extracto .cajetin {
  margin: 1rem 0 0;
}

.extracto__bloque > .cajetin:first-child {
  margin-top: 0;
}

/* Nivel "Pie" de la escala (Mono 11/16), en mayúsculas */
.extracto__pie {
  margin: 0;
  padding: 0.75rem 1.5rem;
  border-top: 1px solid var(--tinta);
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1rem;
  text-transform: uppercase;
}

/* Fila de cifras: misma caja blanca que el cajetín. La del ahorro, más ancha */
.cifras {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.6fr;
  margin: 1.25rem 0 0;
  border: 1px solid var(--tinta);
  background: var(--blanco);
}

.cifras > div {
  padding: 0.75rem 0.875rem;
}

.cifras > div + div {
  border-left: var(--linea);
}

.cifras dd {
  margin: 0.375rem 0 0;
  font-size: 1.5rem;
  line-height: 1.875rem;
  font-weight: 600;
}

/* Cifra de ahorro del resumen: texto naranja. Solo permitido porque es texto grande
   (24 px SemiBold, sobre blanco): 3,4:1 cumple el mínimo WCAG de 3:1 para texto grande.
   No reducir su tamaño por debajo de 24 px, ni siquiera en móvil. */
.cifras dd.cifra-ahorro {
  color: var(--naranja);
  font-size: 1.5rem;
  line-height: 1.875rem;
  font-weight: 600;
}

/* Cifra de ahorro en texto normal (tabla de costes): el texto va en tinta (contraste 4,5:1)
   y el naranja la marca con una barra inferior */
.ahorro {
  border-bottom: 3px solid var(--naranja);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Tabla de costes */
.extracto .tabla--coste {
  margin-top: 0;
}

.tabla--coste caption {
  padding-bottom: 0.5rem;
  text-align: left;
}

.tabla .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tabla__total > * {
  font-weight: 600;
  border-top: 1px solid var(--tinta);
}

/* ---------- 02 · El problema ---------- */

.figura {
  margin: 2rem 0;
  border: var(--linea);
  background: var(--blanco);
}

/* Tamaño natural 340 px: 1 unidad del dibujo = 1 px, así las etiquetas miden 13 px.
   Si el hueco es más estrecho, el dibujo se reduce; ver el ajuste de móvil. */
.figura svg {
  display: block;
  width: 21.25rem;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.figura figcaption {
  padding: 0.625rem 0.875rem;
  border-top: var(--linea);
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1rem;
}

.esquema-texto {
  font-family: var(--mono);
  font-size: 13px;
  fill: var(--tinta);
}

/* ---------- 03 · Cómo funciona ---------- */

.pasos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  border: var(--linea);
  background: var(--blanco);
}

.seccion__cuerpo > .pasos {
  max-width: none;
}

.pasos li {
  padding: 1.25rem;
}

.pasos li + li {
  border-left: var(--linea);
}

.pasos__num {
  display: block;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: var(--linea);
}

/* ---------- 06 · Revisión gratuita ---------- */

.oferta {
  border: 1px solid var(--tinta);
  background: var(--blanco);
  padding: 1.5rem;
}

.oferta .boton {
  margin-top: 1.5rem;
}

/* Tabla comparativa: mismo lenguaje que el cajetín (borde tinta, líneas finas, cabecera en dato técnico) */
.tabla {
  margin-top: 1.5rem;
  overflow-x: auto;
}

.tabla table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--tinta);
  background: var(--blanco);
}

.tabla th,
.tabla td {
  padding: 0.625rem 0.875rem;
  text-align: left;
  vertical-align: top;
  border-bottom: var(--linea);
}

.tabla tr > * + * {
  border-left: var(--linea);
}

.tabla thead th {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.125rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--tinta);
}

.tabla tbody th {
  font-weight: 400;
}

.tabla tbody tr:last-child > * {
  border-bottom: 0;
}

/* ---------- Pie ---------- */

.pie {
  display: grid;
  grid-template-columns: var(--ancho-margen) 1fr auto;
  border-top: 1px solid var(--tinta);
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1rem;
}

.pie > * {
  padding: 1rem 1.5rem;
}

.pie > * + * {
  border-left: var(--linea);
}

/* Wordmark pequeño (menos de 100 px de ancho): variante A, sin corte */
.pie__marca {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.pie ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  list-style: none;
}

/* ---------- Páginas legales ---------- */

.legal h1 {
  margin-bottom: 2rem;
}

.legal .seccion__cuerpo h2 {
  margin: 2rem 0 0.75rem;
}

.legal .seccion__cuerpo h2:first-of-type {
  margin-top: 0;
}

/* ---------- Móvil ---------- */

@media (max-width: 760px) {
  .hoja {
    margin: 1rem auto;
  }

  .cabecera {
    padding: 1.25rem;
  }

  /* El brandbook permite reducir el H1 en móvil */
  h1 {
    font-size: 2rem;
    line-height: 2.375rem;
  }

  .seccion {
    grid-template-columns: 1fr;
  }

  .seccion__margen {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    padding: 0.75rem 1rem;
    border-right: 0;
    border-bottom: 1px dashed var(--gris);
  }

  .seccion__num {
    margin-bottom: 0;
  }

  .seccion__cuerpo {
    padding: 1.75rem 1rem 2.25rem;
  }

  .seccion--portada .seccion__cuerpo {
    padding-top: 2rem;
  }

  .cajetin {
    grid-template-columns: 1fr;
  }

  .cajetin dt {
    border-right: 0;
    border-bottom: 0;
    padding-bottom: 0;
  }

  /* La figura ocupa todo el ancho de la hoja para que los rótulos no bajen de 11 px */
  .figura {
    margin-left: -1rem;
    margin-right: -1rem;
    border-left: 0;
    border-right: 0;
  }

  .pasos {
    grid-template-columns: 1fr;
  }

  .pasos li + li {
    border-left: 0;
    border-top: var(--linea);
  }


  /* Extracto: ocupa todo el ancho de la hoja, como la figura */
  .extracto {
    margin-left: -1rem;
    margin-right: -1rem;
    border-left: 0;
    border-right: 0;
  }

  .extracto__cabecera,
  .extracto__bloque,
  .extracto__pie {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .cifras {
    grid-template-columns: 1fr 1fr;
  }

  .cifras > div:nth-child(odd) {
    border-left: 0;
  }

  .cifras > div:nth-child(n + 3) {
    border-top: var(--linea);
  }

  /* Tabla de costes en móvil: la partida ocupa su propia línea y las tres cifras
     van debajo, en tres columnas alineadas con la cabecera */
  .tabla--coste table,
  .tabla--coste thead,
  .tabla--coste tbody,
  .tabla--coste caption {
    display: block;
  }

  /* En bloque, el título queda dentro del borde: se separa con una línea tinta, como la cabecera */
  .tabla--coste caption {
    padding: 0.5rem;
    border-bottom: 1px solid var(--tinta);
  }

  .tabla--coste tr {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .tabla--coste tr > * {
    border-left: 0;
  }

  .tabla--coste thead th:first-child {
    grid-column: 1 / -1;
    border-bottom: var(--linea);
  }

  .tabla--coste tbody th {
    grid-column: 1 / -1;
    border-bottom: 0;
    padding-bottom: 0;
  }

  .tabla--coste .tabla__total th {
    border-top: 1px solid var(--tinta);
  }

  .tabla--coste .tabla__total td {
    border-top: 0;
  }

  /* Márgenes interiores más ajustados para que la tabla quepa sin desplazamiento a 360-375 px */
  .oferta {
    padding: 1.25rem 0.75rem;
  }

  .tabla th,
  .tabla td {
    padding: 0.5rem 0.4375rem;
  }

  .boton {
    display: block;
    text-align: center;
  }

  .pie {
    grid-template-columns: 1fr;
  }

  .pie > * {
    padding: 0.875rem 1rem;
  }

  .pie > * + * {
    border-left: 0;
    border-top: var(--linea);
  }
}