/* ==========================================================================
   JRV Lab — sistema de estilos
   Paleta y geometría según docs de marca: navy / blue / slate / tile / card / line.
   No se introduce ningún color fuera de esa lista.
   ========================================================================== */

:root {
  /* Marca */
  --navy: #1E3A5F;
  --azul: #2C6E9E;
  --pizarra: #64748B;
  --loseta: #EEF2F6;
  --superficie: #F8FAFC;
  --linea: #CBD2D9;

  /* Tipografía */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Retícula */
  --ancho: 1344px;
  --margen: 48px;

  /* Ritmo vertical */
  --seccion: 92px;
}

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

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--navy);
  background: var(--superficie);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
svg { display: block; }

a { color: var(--azul); text-decoration: none; }
a:hover { color: var(--navy); }

:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 3px;
}

/* Solo para lectores de pantalla, hasta que recibe el foco. */
.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 14px 22px;
  background: var(--navy);
  color: var(--superficie);
  font-size: 14px;
  font-weight: 700;
  z-index: 20;
}
.saltar:focus {
  left: 0;
  color: var(--superficie);
}

/* --------------------------------------------------------------- Estructura */

.envoltura {
  max-width: var(--ancho);
  margin: 0 auto;
  padding-left: var(--margen);
  padding-right: var(--margen);
}

.seccion { padding-top: var(--seccion); }
.seccion--fin { padding-bottom: var(--seccion); }
.seccion--loseta {
  background: var(--loseta);
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  padding-bottom: var(--seccion);
  margin-top: var(--seccion);
}

/* Banda oscura, con la textura de lino por debajo cuando existe. */
.seccion--navy {
  padding-bottom: var(--seccion);
  background-color: var(--navy);
  background-image:
    linear-gradient(90deg, rgba(30, 58, 95, 0.95) 0%, rgba(30, 58, 95, 0.88) 46%, rgba(30, 58, 95, 0.76) 100%),
    url("../img/lino.jpg");
  background-size: cover;
  background-position: center;
  color: var(--superficie);
}
.seccion--navy h2,
.seccion--navy h3 { color: var(--superficie); }
.seccion--navy p { color: var(--loseta); }

.rejilla {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 56px;
}
.rejilla--estrecha { gap: 48px; }
.rejilla--arriba { align-items: start; }
.rejilla--centro { align-items: center; }
.rejilla--abajo { align-items: end; }

.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-12 { grid-column: span 12; }

/* --------------------------------------------------------------- Tipografía */

.antetitulo {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--azul);
}
.seccion--navy .antetitulo { color: var(--linea); }

h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

.titular {
  margin: 24px 0 0;
  font-family: var(--serif);
  font-size: clamp(40px, 5vw, 66px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.022em;
}
.titular em { font-style: italic; color: var(--azul); }

.titulo-2 {
  margin: 18px 0 0;
  font-family: var(--serif);
  font-size: clamp(30px, 3.2vw, 40px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.titulo-3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.entrada {
  margin: 26px 0 0;
  max-width: 44ch;
  font-size: 17px;
  line-height: 1.65;
  color: var(--pizarra);
}
.parrafo {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.66;
  color: var(--pizarra);
}
.menudo {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--pizarra);
}

/* ------------------------------------------------------------------ Botones */

.boton {
  display: inline-block;
  padding: 17px 30px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid var(--navy);
  cursor: pointer;
}
.boton--solido { background: var(--navy); color: var(--superficie); }
.boton--solido:hover { background: #17304f; color: var(--superficie); }
.boton--hueco { background: transparent; color: var(--navy); border-color: var(--linea); }
.boton--hueco:hover { border-color: var(--navy); color: var(--navy); }
.boton--claro { background: var(--superficie); color: var(--navy); border-color: var(--superficie); }
.boton--claro:hover { color: var(--navy); }

.enlace-subrayado {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--navy);
  border-bottom: 2px solid var(--linea);
  padding-bottom: 3px;
}
.enlace-subrayado:hover { border-bottom-color: var(--navy); }

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

.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 26px var(--margen);
  border-bottom: 1px solid var(--linea);
  background: var(--superficie);
}
.marca { display: flex; align-items: center; gap: 13px; }
.marca__nombre {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
}
.marca__producto {
  margin-left: 4px;
  padding-left: 14px;
  border-left: 1px solid var(--linea);
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  color: var(--navy);
}
.menu { display: flex; align-items: center; gap: 30px; }
.menu a { font-size: 13.5px; font-weight: 500; color: var(--pizarra); }
.menu a:hover, .menu a[aria-current] { color: var(--navy); }

.hamburguesa { display: none; }

/* -------------------------------------------------------------------- Héroe */

.pilares {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: end;
}
.pilar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 22px;
  color: var(--superficie);
}
.pilar:hover { color: var(--superficie); }
.pilar--navy { background: var(--navy); }
.pilar--azul { background: var(--azul); }
.pilar--pizarra { background: var(--pizarra); }
.pilar__epigrafe {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--loseta);
}
.pilar__nombre {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 500;
  line-height: 1.1;
}
.pilar__datos {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(248, 250, 252, 0.3);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
}
.pilar__pie { display: flex; flex-direction: column; gap: 9px; }

.regla-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--linea);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pizarra);
}

/* ------------------------------------------------------------------- Cifras */

.cifras {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
}
.cifra { padding: 30px 28px 32px; background: var(--superficie); }
.cifra__valor {
  font-family: var(--serif);
  font-size: clamp(38px, 3.6vw, 52px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--azul);
}
.cifra__titulo { margin-top: 12px; font-size: 15px; font-weight: 600; line-height: 1.4; }
.cifra__apunte {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--pizarra);
}

/* ------------------------------------------------------- Rejilla con filete */

.fichas {
  display: grid;
  gap: 2px;
  background: var(--linea);
  border: 1px solid var(--linea);
}
.fichas--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fichas--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fichas--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ficha { padding: 30px 30px 34px; background: var(--superficie); }
.ficha__numero { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--azul); }
.ficha h3 { margin: 12px 0 0; font-size: 17px; font-weight: 700; line-height: 1.32; }
.ficha p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--pizarra); }

/* Pasos numerados con filete superior, sin caja. */
.pasos {
  display: grid;
  gap: 32px;
  margin-top: 48px;
}
.pasos--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pasos--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.paso { padding-top: 20px; border-top: 2px solid var(--navy); }
.paso__numero { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--azul); }
.paso h3 { margin: 14px 0 0; font-size: 17px; font-weight: 700; line-height: 1.3; }
.paso p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--pizarra); }

/* -------------------------------------------------------------- Destacados */

.aparte {
  padding: 26px 30px;
  background: var(--loseta);
  border-left: 3px solid var(--azul);
}
.aparte--sobrio { border-left-color: var(--pizarra); }
.aparte p { margin: 0; font-size: 15.5px; line-height: 1.66; color: var(--pizarra); }
.aparte p + p { margin-top: 12px; }
.aparte__cita {
  margin: 0;
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.5;
  color: var(--navy);
}

/* Filas con barra de color a la izquierda. */
.tira { display: grid; grid-template-columns: 6px minmax(0, 1fr); gap: 0 28px; padding: 24px 0; border-top: 1px solid var(--linea); }
.tira:last-child { border-bottom: 1px solid var(--linea); }
.tira__barra { align-self: stretch; }
.tira h3 { margin: 0; font-size: 17.5px; font-weight: 700; line-height: 1.35; }
.tira p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--pizarra); }

.barra--navy { background: var(--navy); }
.barra--azul { background: var(--azul); }
.barra--pizarra { background: var(--pizarra); }
.barra--linea { background: var(--linea); }

/* Lista con cuadrito de color. */
.lista-marcada { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.lista-marcada li { display: flex; gap: 12px; font-size: 15px; line-height: 1.6; color: var(--navy); }
.lista-marcada li::before {
  content: "";
  flex-shrink: 0;
  margin-top: 7px;
  width: 8px;
  height: 8px;
  background: var(--navy);
}

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

.pie { padding: 44px var(--margen); background: var(--navy); color: var(--linea); }
.pie a { color: var(--linea); }
.pie a:hover { color: var(--superficie); }
.pie a[aria-current] { color: var(--superficie); }
.pie__fila {
  max-width: var(--ancho);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.pie__marca { display: flex; align-items: center; gap: 12px; }
.pie__marca span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--superficie);
}
.pie__productos { display: flex; align-items: center; gap: 28px; font-size: 13px; }
.pie__legal {
  max-width: var(--ancho);
  margin: 30px auto 0;
  padding-top: 26px;
  border-top: 1px solid rgba(248, 250, 252, 0.2);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
}
.pie__identidad { font-family: var(--mono); font-size: 11px; line-height: 1.8; }
.pie__enlaces { display: flex; align-items: center; gap: 26px; flex-shrink: 0; font-family: var(--mono); font-size: 11.5px; }

/* =========================================================== Adaptabilidad */

@media (max-width: 1180px) {
  :root { --margen: 32px; --seccion: 72px; }
  .rejilla { gap: 40px; }
  .menu { gap: 22px; }
  .menu a { font-size: 12.5px; }
  .marca__producto { font-size: 17px; }
  .pasos--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fichas--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  /* La rejilla pasa a UNA columna, no a doce columnas apiladas: doce columnas con
     40 px de hueco imponen 11 x 40 = 440 px de ancho mínimo, y eso desbordaba la
     pantalla en 85 px. Medido en el navegador, no deducido. */
  .rejilla { grid-template-columns: 1fr; gap: 40px; }
  .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-12 { grid-column: auto; }
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pasos--4, .pasos--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fichas--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie__fila, .pie__legal { flex-direction: column; align-items: flex-start; gap: 24px; }
  .pie__enlaces { flex-wrap: wrap; gap: 14px 22px; }
  .regla-hero { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (max-width: 760px) {
  :root { --margen: 20px; --seccion: 56px; }

  /* El menú se guarda tras el botón; sin JavaScript, con el elemento details. */
  .menu { display: none; }
  .hamburguesa { display: block; position: relative; }
  .hamburguesa summary {
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    cursor: pointer;
  }
  .hamburguesa summary::-webkit-details-marker { display: none; }
  .hamburguesa summary span { display: block; height: 1.5px; background: var(--navy); }
  .hamburguesa__panel {
    position: absolute;
    right: 0;
    top: 52px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    min-width: 232px;
    background: var(--superficie);
    border: 1px solid var(--linea);
    box-shadow: 0 24px 50px -20px rgba(30, 58, 95, 0.34);
  }
  .hamburguesa__panel a {
    padding: 15px 20px;
    border-bottom: 1px solid var(--linea);
    font-size: 15px;
    font-weight: 500;
    color: var(--navy);
  }
  .hamburguesa__panel a:last-child { border-bottom: none; }

  .cabecera { padding: 14px var(--margen); }
  .marca__nombre { font-size: 13px; }
  .marca__producto { font-size: 15px; padding-left: 10px; }
  .cabecera > .boton { display: none; }

  /* Los pilares no se encogen: se tumban, conservando la proporción 36·56·44. */
  .pilares { grid-template-columns: 1fr; gap: 10px; align-items: stretch; }
  .pilar { flex-direction: row; align-items: center; gap: 16px; min-height: 86px; height: auto !important; padding: 16px 18px; }
  .pilar--navy { width: 68%; }
  .pilar--azul { width: 100%; }
  .pilar--pizarra { width: 82%; }
  .pilar__nombre { font-size: 19px; }
  .pilar__datos { display: none; }
  .pilar__pie { gap: 3px; }

  .cifras, .fichas--2, .fichas--3, .fichas--4, .pasos--4, .pasos--5 { grid-template-columns: 1fr; }
  .entrada { font-size: 16px; }
  .boton { display: block; width: 100%; }
  .tira { grid-template-columns: 6px minmax(0, 1fr); gap: 0 16px; }
}

/* ------------------------------------------------------- Ficha de evidencia */

.evidencia {
  background: var(--superficie);
  box-shadow: 0 50px 90px -35px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  color: var(--navy);
}
.evidencia__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  background: var(--loseta);
  border-bottom: 1px solid var(--linea);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.evidencia__nota { font-weight: 400; font-size: 10.5px; letter-spacing: 0.1em; color: var(--pizarra); }
.evidencia__cuerpo { display: flex; flex-direction: column; gap: 22px; padding: 28px 24px 26px; }
.evidencia__cuerpo > div > p { margin: 0; }

.evidencia__etiqueta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
}
.evidencia__etiqueta--fila { justify-content: space-between; }
.evidencia__chip {
  padding: 3px 8px;
  background: var(--loseta);
  border: 1px solid var(--linea);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--navy);
}
.evidencia__lecturas { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--navy); }
.evidencia__valor { margin-top: 7px; font-size: 18px; font-weight: 600; }
.evidencia__detalle { margin-top: 5px; font-size: 13.5px; line-height: 1.5; color: var(--pizarra); }

.evidencia__cita { margin: 0; padding: 16px 18px; background: var(--loseta); border-left: 3px solid var(--azul); }
.evidencia__cita p { margin: 0; }
.evidencia__literal { margin-top: 8px; font-family: var(--serif); font-size: 16.5px; line-height: 1.45; color: var(--navy); }
.evidencia__posicion { margin-top: 8px; font-family: var(--mono); font-size: 11px; color: var(--navy); }

.evidencia__barras { display: flex; gap: 6px; margin: 10px 0 0; }
.evidencia__barras span { flex-grow: 1; height: 6px; background: var(--navy); }

.evidencia__sello {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--linea);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--navy);
}

/* ============================================== Páginas de texto legal */

.banda-titulo {
  padding: 64px 0;
  background: var(--loseta);
  border-bottom: 1px solid var(--linea);
}
.titulo-legal {
  margin: 18px 0 0;
  font-family: var(--serif);
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.022em;
}

.indice-legal {
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--navy);
}
.indice-legal a {
  padding: 15px 0;
  border-bottom: 1px solid var(--linea);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--pizarra);
}
.indice-legal a[aria-current] { font-weight: 700; color: var(--navy); }

/* Prosa larga. Los valores vienen del tablero, no se redondean. */
.doc > *:first-child { margin-top: 0; }
.doc p { margin: 0 0 16px; font-size: 16px; line-height: 1.72; color: var(--pizarra); }
.doc h2 {
  margin: 44px 0 16px;
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.014em;
  color: var(--navy);
}
.doc h3 { margin: 30px 0 12px; font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--navy); }
.doc ul, .doc ol { margin: 0 0 18px; padding-left: 20px; }
.doc li { margin: 0 0 10px; font-size: 16px; line-height: 1.7; color: var(--pizarra); }
.doc strong { color: var(--navy); font-weight: 600; }
.doc a { border-bottom: 1px solid var(--linea); }
.doc a:hover { border-bottom-color: var(--navy); }

/* Las tablas se escriben en markdown; el filete las convierte en la retícula del sistema. */
.doc table {
  width: 100%;
  margin: 24px 0 28px;
  border-collapse: collapse;
  text-align: left;
}
.doc thead th {
  padding: 0 24px 12px 0;
  border-bottom: 2px solid var(--navy);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pizarra);
  vertical-align: bottom;
}
.doc tbody td {
  padding: 16px 24px 16px 0;
  border-bottom: 1px solid var(--linea);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--pizarra);
  vertical-align: top;
}
.doc tbody td:first-child { color: var(--navy); font-weight: 600; }
.doc tbody td:last-child, .doc thead th:last-child { padding-right: 0; }

/* La regla que abre la política de cookies: argumento, no trámite. */
.destacado-oscuro {
  padding: 34px 36px;
  margin: 0 0 8px;
  background: var(--navy);
}
.destacado-oscuro .rotulo {
  margin: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--linea);
}
.destacado-oscuro .titular-corto {
  margin: 16px 0 0;
  font-family: var(--serif);
  font-size: 27px;
  line-height: 1.35;
  color: var(--superficie);
}
.destacado-oscuro p { margin: 16px 0 0; font-size: 15.5px; line-height: 1.68; color: var(--loseta); }
.destacado-oscuro strong { color: var(--superficie); }

@media (max-width: 900px) {
  .indice-legal { flex-direction: row; flex-wrap: wrap; gap: 0 24px; }
  .indice-legal a { border-bottom: none; padding: 10px 0; }
  .doc table, .doc thead, .doc tbody, .doc tr, .doc th, .doc td { display: block; }
  .doc thead { display: none; }
  .doc tbody tr { padding: 16px 0; border-bottom: 1px solid var(--linea); }
  .doc tbody td { padding: 0 0 6px; border-bottom: none; }
}

/* ============================================ Correcciones de contraste

   Medidas en el navegador el 01/09/2026, no deducidas de la hoja.

   1. `.seccion--navy p { color: loseta }` se colaba DENTRO de la ficha de evidencia,
      que tiene fondo claro: «Régimen de firma» quedaba a 1,08 de contraste — invisible.
      Un componente con fondo propio tiene que reponer su tinta, pase lo que pase fuera.

   2. `--pizarra` sobre `--loseta` da 4,23 y no llega al mínimo de 4,5. En superficie sí
      pasa (4,55). Sobre loseta, las etiquetas pequeñas van en navy.
   -------------------------------------------------------------------------------- */

.evidencia,
.evidencia p,
.evidencia h3,
.evidencia span,
.evidencia div { color: var(--navy); }

.evidencia__valor { color: var(--navy); }
.evidencia__detalle { color: var(--pizarra); }

/* Etiquetas pequeñas sobre loseta: navy, porque pizarra no llega al mínimo. */
.evidencia__nota,
.evidencia__cita .evidencia__etiqueta,
.evidencia__posicion { color: var(--navy); }

.evidencia__cabecera .evidencia__nota { font-weight: 400; }

/* Sobre fondos de color, el texto va en --superficie, nunca en --loseta:
   loseta sobre pizarra da 4,23 y no llega al mínimo. */
.pilar__epigrafe { color: var(--superficie); }

/* Y al revés: --pizarra sobre --loseta también da 4,23. En las superficies de
   loseta el texto atenuado pasa a navy. La paleta de marca no tiene una pareja
   de texto atenuado sobre loseta que cumpla — anotado para Juan. */
.seccion--loseta .parrafo,
.seccion--loseta .menudo,
.seccion--loseta .tira p,
.seccion--loseta .lista-marcada li,
.banda-titulo .menudo,
.cierre-prueba .parrafo,
.cierre-prueba .menudo,
.ficha--loseta p,
.aparte p { color: var(--navy); }

/* ============================================== Páginas de producto */

.hero-producto { display: flex; align-items: center; gap: 18px; }
.hero-producto__norma {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--azul);
  margin: 0;
}
.titular-producto {
  margin: 30px 0 0;
  font-family: var(--serif);
  font-size: clamp(36px, 4.6vw, 58px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.022em;
}

/* Barra de proporción: la proporción la lleva la barra, la identidad los rótulos.
   Nada de repartir los rótulos con flex-grow — no se alinean con los segmentos. */
.proporcion { display: flex; gap: 2px; margin-top: 28px; }
.proporcion > span { min-width: 0; height: 48px; }
.proporcion__mayor { flex: 88 1 0%; background: var(--navy); }
.proporcion__menor { flex: 12 1 0%; background: var(--azul); }

.leyenda {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-top: 18px;
}
.leyenda > div { display: flex; gap: 12px; max-width: 320px; }
.leyenda__punto { flex-shrink: 0; margin-top: 6px; width: 10px; height: 10px; }
.leyenda strong { display: block; font-size: 15.5px; line-height: 1.4; color: var(--navy); }
/* «apunte», no «pie»: .pie es el PIE DE PÁGINA y lleva fondo navy. Reutilizar ese
   nombre para un estilo de texto pintaba de navy el fondo de los rótulos. */
.leyenda .apunte { display: block; margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--pizarra); }

/* Tarjetas sobre banda navy */
.tarjeta-navy {
  padding: 28px 26px 30px;
  background: rgba(248, 250, 252, 0.08);
  border: 1px solid rgba(248, 250, 252, 0.28);
}
.tarjeta-navy--acento { border: none; border-left: 3px solid var(--azul); }
.tarjeta-navy h3 { margin: 0; font-size: 17.5px; font-weight: 700; line-height: 1.35; color: var(--superficie); }
.tarjeta-navy p { margin: 12px 0 0; font-size: 15px; line-height: 1.65; color: var(--loseta); }

/* Precios */
.tramos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  background: var(--linea);
  border: 1px solid var(--linea);
}
.tramo { display: flex; flex-direction: column; padding: 34px 28px 32px; background: var(--superficie); }
.tramo--destacado { box-shadow: inset 0 4px 0 0 var(--azul); }
.tramo__nombre { font-family: var(--serif); font-size: 26px; font-weight: 500; line-height: 1.15; }
.tramo__rango { margin-top: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pizarra); }
.tramo__precio { margin-top: 24px; font-family: var(--serif); font-size: 44px; font-weight: 500; line-height: 1; }
.tramo__unidad { margin-top: 8px; font-family: var(--mono); font-size: 11px; color: var(--pizarra); }
.tramo p { margin: 22px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--pizarra); }
.etiqueta-tramo {
  padding: 3px 9px;
  background: var(--loseta);
  border: 1px solid var(--linea);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul);
}

.modelo { display: flex; flex-direction: column; padding: 36px 32px 34px; background: var(--superficie); border: 1px solid var(--linea); }
.modelo__nombre { margin: 14px 0 0; font-family: var(--serif); font-size: 30px; font-weight: 500; line-height: 1.15; }
.modelo__precio { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--linea); font-family: var(--serif); font-size: 30px; font-weight: 500; line-height: 1; color: var(--azul); }

.condiciones { display: flex; flex-direction: column; gap: 18px; padding: 26px 28px; border: 1px solid var(--linea); }
.condiciones__fila { display: flex; gap: 11px; }
.condiciones__punto { flex-shrink: 0; margin-top: 8px; width: 8px; height: 8px; background: var(--navy); }
.condiciones strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--navy); }
.condiciones .apunte { display: block; margin-top: 2px; font-size: 14px; line-height: 1.55; color: var(--pizarra); }

.cierre-prueba {
  padding: 92px 0;
  background: var(--loseta);
  border-top: 1px solid var(--linea);
  margin-top: var(--seccion);
}

@media (max-width: 900px) {
  .tramos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leyenda { flex-direction: column; gap: 16px; }
}
@media (max-width: 760px) {
  .tramos { grid-template-columns: 1fr; }
  .hero-producto { flex-wrap: wrap; gap: 14px; }
}

.ficha--loseta { background: var(--loseta); }

/* ================================================ Formulario */

.formulario {
  padding: 44px 44px 40px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  box-shadow: 0 30px 70px -30px rgba(30, 58, 95, 0.22);
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.campo { display: flex; flex-direction: column; }
.campo label { margin-bottom: 8px; font-size: 13.5px; font-weight: 600; color: var(--navy); }
.campo label .opcional { font-weight: 400; color: var(--pizarra); }
.campo input,
.campo textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--navy);
}
.campo input { height: 50px; padding-top: 0; padding-bottom: 0; }
.campo textarea { min-height: 118px; resize: vertical; }
.campo input::placeholder,
.campo textarea::placeholder { color: var(--pizarra); opacity: 1; }
.campo input:focus, .campo textarea:focus { border-color: var(--azul); outline: 2px solid var(--azul); outline-offset: -2px; }
.campo__apunte { margin: 7px 0 0; font-size: 13px; line-height: 1.5; color: var(--pizarra); }

.pareja { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

/* Selector de producto: casillas grandes, no una lista de radios diminutos. */
.eleccion { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
.eleccion label {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 16px;
  background: var(--superficie);
  border: 2px solid var(--linea);
  cursor: pointer;
}
.eleccion label:hover { border-color: var(--pizarra); }
.eleccion input { position: absolute; opacity: 0; width: 0; height: 0; }
.eleccion input:checked + label,
.eleccion label:has(input:checked) { background: var(--loseta); border-color: var(--azul); }
.eleccion__marca { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--navy); }
.eleccion__caja { flex-shrink: 0; width: 16px; height: 16px; background: var(--superficie); border: 2px solid var(--linea); }
.eleccion label:has(input:checked) .eleccion__caja { background: var(--azul); border-color: var(--azul); box-shadow: inset 0 0 0 2px var(--superficie); }
.eleccion__pie { font-size: 12.5px; line-height: 1.5; color: var(--pizarra); }
/* Al marcarse, la tarjeta pasa a fondo loseta y --pizarra deja de cumplir. */
.eleccion label:has(input:checked) .eleccion__pie { color: var(--navy); }

/* Información básica de protección de datos: el formato de primera capa de la AEPD. */
.capa-basica { padding: 24px 26px; background: var(--loseta); border: 1px solid var(--linea); }
.capa-basica__titulo { margin: 0; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); }
.capa-basica dl { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 0 18px; margin: 16px 0 0; }
.capa-basica dt {
  padding: 9px 0;
  border-top: 1px solid var(--linea);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
}
.capa-basica dd { margin: 0; padding: 9px 0; border-top: 1px solid var(--linea); font-size: 13.5px; line-height: 1.55; color: var(--navy); }
.capa-basica dl > dt:last-of-type, .capa-basica dl > dd:last-of-type { border-bottom: 1px solid var(--linea); }

.consentimiento { display: flex; align-items: flex-start; gap: 13px; cursor: pointer; }
.consentimiento input { flex-shrink: 0; margin: 2px 0 0; width: 18px; height: 18px; accent-color: var(--azul); }
.consentimiento span { font-size: 14.5px; line-height: 1.6; color: var(--navy); }
.consentimiento .matiz { color: var(--pizarra); }

.enviar { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 4px; }

/* Pasos numerados en columna, para la barra lateral de la solicitud */
.pasos-columna { display: flex; flex-direction: column; margin-top: 40px; }
.pasos-columna > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 18px; padding: 22px 0; border-top: 1px solid var(--linea); }
.pasos-columna > div:last-child { border-bottom: 1px solid var(--linea); }
/* El numeral va en --pizarra, no en --linea: en línea daba 1,46 de contraste.
   Recessivo no es invisible. */
.pasos-columna__n { font-family: var(--serif); font-size: 26px; font-weight: 500; line-height: 1; color: var(--pizarra); }
.pasos-columna h3 { margin: 0; font-size: 16.5px; font-weight: 700; line-height: 1.35; }
.pasos-columna p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--pizarra); }

/* Resumen de la solicitud enviada */
.resumen { padding: 34px 32px 32px; background: var(--superficie); border: 1px solid var(--linea); }
.resumen dl { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 0 18px; margin: 18px 0 0; }
.resumen dt { padding: 13px 0; border-top: 1px solid var(--linea); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); }
.resumen dd { margin: 0; padding: 13px 0; border-top: 1px solid var(--linea); font-size: 14.5px; line-height: 1.5; color: var(--navy); }
.resumen dl > dt:last-of-type, .resumen dl > dd:last-of-type { border-bottom: 1px solid var(--linea); }

@media (max-width: 900px) {
  .eleccion { grid-template-columns: 1fr; }
  .pareja { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .formulario { padding: 28px 22px 26px; }
  .capa-basica dl, .resumen dl { grid-template-columns: 1fr; gap: 0; }
  .capa-basica dd, .resumen dd { border-top: none; padding-top: 0; }
  .capa-basica dt, .resumen dt { padding-bottom: 4px; }
}

/* ── El banner de las cuatro marcas, en la portada ──────────────────────────
   El video YA trae su propio fondo azul marino y sus propios margenes, asi
   que aqui no lleva ni marco ni sombra: pintarle una caja encima duplicaria
   el borde. Solo se le redondea la esquina para que acompane al resto. */
.marcas-video { display: grid; gap: 28px; }
.marcas-video__texto { max-width: 54ch; }
.marcas-video__pieza { margin: 0; }
.marcas-video__pieza video {
  display: block; width: 100%; height: auto; border-radius: 10px;
  background: var(--navy);
}
@media (min-width: 900px) {
  /* A partir de tablet el texto va al lado: el video es ancho y debajo de un
     titulo centrado se queda flotando en medio de la pagina. */
  .marcas-video { grid-template-columns: 1fr 1.45fr; gap: 44px; align-items: center; }
  .marcas-video__texto { max-width: none; }
}