/* Hueco — web comercial (apex huecoapp.com).

   LA TESIS: la oferta no se va nunca de la pantalla. En escritorio la página es un
   tablero de dos columnas: la izquierda queda clavada (position: sticky) con el titular,
   el botón y el precio; la derecha desfila la prueba. Se rechaza el hero que desaparece
   al primer scroll y obliga a volver arriba para saber cuánto cuesta.

   Paleta y tipografía vienen del panel (app/www/styles.css). No se inventa nada aquí: el
   visitante entra en la app un clic después y el salto no se nota. Es un despliegue
   independiente sin build compartido, así que los tokens están repetidos: si se toca uno,
   hay que tocarlo también en app/www/styles.css.

   Contrastes medidos con la fórmula de la WCAG:
     · --txt  #F3F6F8 sobre --bg  → 17,0:1     · --txt2 #98A3AF sobre --bg    → 7,4:1
     · --mut  #7C8794 sobre --bg  →  5,2:1     · --mut  sobre --card #171B22  → 4,73:1
     · --txt2 sobre --card2 #1F242C → 6,1:1    · tinta #0E1116 sobre lima     → 15,4:1
   OJO: --mut sobre --card2 se queda en 4,27:1, por debajo del mínimo. Por eso en el
   cierre y en la barra del móvil (los dos suelos --card2) el texto secundario es --txt2.
   Blanco sobre lima da 1,23:1 y está PROHIBIDO. */

/* ---------- Tipografía propia, auto-alojada. No se sirve desde Google: el navegador
     del visitante no le manda su IP a nadie. Licencia SIL OFL. ---------- */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #0E1116;
  --card: #171B22;
  --card2: #1F242C;
  --line: rgba(255, 255, 255, .07);
  --txt: #F3F6F8;
  --txt2: #98A3AF;
  --mut: #7C8794;
  --accent: #C6F94D;
  --accent-ink: #0E1116;
  --accsoft: rgba(198, 249, 77, .14);

  --radio: 12px;
  /* Alto de la cabecera. Es una medida, no un adorno: de ella cuelgan el `top` de la
     columna pegajosa, su altura y el `scroll-padding` de los enlaces internos. */
  --cab: 68px;
  /* Aire interior de cada panel. Una sola variable para que los cuatro respiren igual. */
  --pad: clamp(22px, 3.2vw, 56px);
  --salida: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* La cabecera se queda pegada arriba: sin esto, un salto a #precio deja el titular
     de la sección escondido debajo de ella. */
  scroll-padding-top: calc(var(--cab) + 12px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.salta-al-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 12px 18px;
  font-weight: 800;
  z-index: 60;
}
.salta-al-contenido:focus { left: 12px; top: 12px; }

/* ---------- Tipografía ---------- */
h1 {
  margin: 0;
  font-size: clamp(2.3rem, 3.6vw, 3.5rem);
  line-height: .98;
  letter-spacing: -.035em;
  font-weight: 800;
  text-wrap: balance;
}
h2 {
  margin: 0;
  font-size: clamp(1.75rem, 2.9vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  font-weight: 800;
  text-wrap: balance;
}
h3 {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.2;
  letter-spacing: -.02em;
  font-weight: 800;
}
.entradilla {
  margin: 0;
  font-size: clamp(1.02rem, 1.25vw, 1.2rem);
  color: var(--txt2);
  max-width: 36ch;
  text-wrap: pretty;
}
.parrafo {
  margin: 0;
  color: var(--txt2);
  max-width: 62ch;
  text-wrap: pretty;
}
.apunte {
  margin: 0;
  font-size: 14.5px;
  color: var(--mut);
  max-width: 50ch;
}
.destacado { color: var(--txt); font-weight: 700; }

/* ---------- Botón ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  align-self: flex-start;
  /* 15px arriba y abajo sobre una línea de 1 dan 52px de alto: por encima del mínimo
     táctil de 44px sin tener que forzar min-height. */
  padding: 15px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  transition: background-color .18s;
}
.boton:hover { background: #d3ff63; }
.boton svg { width: 19px; height: 19px; flex: none; }

/* ---------- Cabecera ----------
   Va pegada arriba porque en esta variante NADA de la oferta se va de la pantalla: la
   píldora es la misma promesa que sostiene la columna de abajo. El logotipo queda justo
   encima del ancla, en su mismo eje vertical: cabecera y columna se leen como una pieza. */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--cab);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 var(--pad);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  text-decoration: none;
}
/* El símbolo va en su versión simplificada (solo la «h»): a 30px el calendario entero
   se empasta. El logotipo de al lado sí hereda el color del enlace. */
.marca img { width: 30px; height: 30px; }
.marca svg { width: 92px; height: 28px; }
.cabecera nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 26px);
}
.cabecera nav a {
  color: var(--txt2);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
}
.cabecera nav a:hover { color: var(--txt); }
/* El color va explícito porque `.cabecera nav a` es MÁS específico que `.boton` y le
   pisaba la tinta: gris sobre lima son 2,08:1, ilegible. Así son 15,4:1. */
.cabecera .boton {
  color: var(--accent-ink);
  padding: 10px 18px;
  font-size: 14.5px;
  box-shadow: none;
}
.idioma {
  font-variant: all-small-caps;
  letter-spacing: .06em;
  font-weight: 700;
}

/* ---------- El tablero: ancla a la izquierda, prueba a la derecha ---------- */
.tablero {
  display: grid;
  /* 42/58. minmax(0,·) y no fracciones a secas: sin él una captura ancha empuja su
     columna y aparece scroll horizontal. */
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  align-items: start;
}

/* ---------- La columna pegajosa ----------
   `align-self: start` es lo que hace que funcione: un elemento de rejilla estirado ocupa
   toda la fila y entonces `sticky` no tiene margen donde pegarse. Con altura propia, sí. */
.oferta {
  position: sticky;
  top: var(--cab);
  align-self: start;
  height: calc(100vh - var(--cab));
  height: calc(100svh - var(--cab));
  display: flex;
  padding: var(--pad);
  /* Si el contenido no cabe (pantalla baja, tipografía ampliada), que se pueda leer
     desplazándolo en vez de quedar cortado. */
  overflow-y: auto;
}
/* Centrado con márgenes automáticos y no con justify-content: si un día el contenido
   desborda, `center` recortaría por arriba y el titular sería inalcanzable. */
.oferta-dentro {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  width: 100%;
}

/* La tarifa. Va DEBAJO del botón, no delante: el reclamo es la prueba gratis y los
   3 € son la respuesta a «¿y luego qué?». Detrás, pero sin bajar ni un scroll. */
.tarifa {
  width: 100%;
  max-width: 30rem;
  margin-top: 4px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
}
.tarifa-fila {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.tarifa-cifra {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tarifa-periodo { color: var(--txt2); font-size: 15.5px; }
.tarifa-regalo {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accsoft);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.tarifa-cancela {
  margin: 2px 0 0;
  font-size: 14.5px;
  color: var(--mut);
}

/* ---------- Los cuatro paneles de la derecha ----------
   El filete es la costura permanente entre el ancla y la prueba: esté el panel en el
   suelo que esté, la columna siempre se ve como dos planos y no como uno solo. */
.paneles {
  min-width: 0;
  border-left: 1px solid var(--line);
}
.panel {
  /* Casi la pantalla entera: al hacer scroll rápido, cada panel es una parada. */
  min-height: calc(100vh - var(--cab));
  min-height: calc(100svh - var(--cab));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  padding: calc(var(--pad) * 1.4) var(--pad);
  border-bottom: 1px solid var(--line);
}
/* El suelo alterna. Es la señal que hace que un visitante que no lee cuente cuatro
   paradas sin esfuerzo: cambia el plano, cambia el tema. */
.panel--alto { background: var(--card); }

/* ---------- Panel 1: el enlace ---------- */
.enlace-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 40px);
  align-items: start;
}
.enlace-texto { display: grid; gap: 26px; }

/* Los tres pasos van numerados a propósito: aquí el orden ES la información (primero
   mandas, luego elige, luego te aparece). No es un rótulo decorativo. */
.pasos {
  list-style: none;
  counter-reset: paso;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px;
}
.pasos li {
  counter-increment: paso;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 4px 14px;
  align-items: baseline;
}
.pasos li::before {
  content: counter(paso);
  grid-row: 1 / 3;
  font-size: 15px;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--accent);
  border-radius: 999px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  align-self: start;
}
.pasos h3 { margin-bottom: 4px; }
.pasos .parrafo { font-size: 15.5px; }

/* ---------- Capturas ---------- */
.captura {
  margin: 0;
  border-radius: var(--radio);
  border: 1px solid var(--line);
  background: var(--card);
  overflow: hidden;
}
.captura img { width: 100%; height: auto; }
/* La pantalla que ve el cliente tiene fondo claro: su contenedor va en blanco para que
   la imagen no flote sobre un recorte oscuro que no le pertenece. */
.captura--cliente { background: #fff; }
.pie-captura {
  font-size: 13.5px;
  color: var(--mut);
  margin: 10px 0 0;
}
figure.marco { margin: 0; }

/* Panel 3: la captura se sale por el borde derecho. Es la tercera composición distinta
   de la columna (retrato / ancha centrada / ancha a sangre / pareja), que es lo que
   permite distinguir los paneles sin leerlos. */
.panel--sangra { overflow: hidden; }
.panel--sangra .captura {
  margin-right: calc(var(--pad) * -1);
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Panel 4: las dos capturas del panel van en pareja, a la misma altura de partida. */
.par {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.6vw, 24px);
  align-items: start;
}

/* Agrupa párrafo y apunte dentro de un panel: sin esto los dos llevan margin 0 y se
   quedan pegados el uno al otro. */
.grupo { display: grid; gap: 14px; }

/* ---------- Secciones a ancho completo (ya sin columna pegajosa) ---------- */
.bloque {
  padding: clamp(48px, 6vw, 96px) var(--pad);
  border-bottom: 1px solid var(--line);
}
.bloque--alto { background: var(--card); }
.bloque--cierre { background: var(--card2); border-bottom: 0; }
.bloque-dentro {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  gap: 30px;
}

/* Precio a ancho completo: aquí no se repiten las cifras grandes (ya viven en el ancla),
   se explica qué entra en el plan y cómo funciona el IVA. */
.plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.plan-izq { display: grid; gap: 18px; align-content: start; }
.resumen-tarifa {
  margin: 0;
  font-size: 1.05rem;
  color: var(--txt);
  font-weight: 700;
}
.resumen-tarifa .regalo { color: var(--accent); font-weight: 800; }
.incluye {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 12px;
  max-width: 44ch;
}
.incluye li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  color: var(--txt2);
  font-size: 15.5px;
}
.incluye svg {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin-top: 3px;
  color: var(--accent);
}

/* ---------- Preguntas ---------- */
.preguntas { display: grid; max-width: 72ch; }
.pregunta { border-top: 1px solid var(--line); }
.pregunta:last-child { border-bottom: 1px solid var(--line); }
.pregunta summary {
  cursor: pointer;
  padding: 18px 40px 18px 0;
  font-weight: 700;
  font-size: 17px;
  list-style: none;
  position: relative;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--mut);
  border-bottom: 2px solid var(--mut);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s var(--salida);
}
.pregunta[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.pregunta summary:hover { color: var(--accent); }
.pregunta summary:hover::after { border-color: var(--accent); }
.pregunta p {
  margin: 0 0 20px;
  color: var(--txt2);
  max-width: 66ch;
}

/* ---------- Cierre ---------- */
.cierre { display: grid; gap: 22px; justify-items: start; max-width: 40rem; }
/* Sobre --card2, --mut se queda en 4,27:1. Este texto sube a --txt2 (6,1:1). */
.cierre .entradilla { color: var(--txt2); }

/* ---------- Pie ---------- */
.pie {
  padding: clamp(28px, 4vw, 52px) var(--pad);
  display: flex;
  flex-wrap: wrap;
  gap: 18px 34px;
  align-items: center;
  justify-content: space-between;
  color: var(--mut);
  font-size: 14.5px;
}
.pie p { margin: 0; }
.pie nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pie a { color: var(--txt2); text-decoration: none; }
.pie a:hover { color: var(--txt); text-decoration: underline; }

/* ---------- La barra pegajosa del móvil ----------
   En escritorio la oferta es una columna; en el teléfono no cabe, así que se convierte
   en una barra baja y discreta. Fuera del móvil no existe. */
.barra {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--card2);
  border-top: 1px solid var(--line);
}
.barra p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.25;
  /* --txt2 y no --mut: sobre --card2 el gris apagado cae a 4,27:1. */
  color: var(--txt2);
  min-width: 0;
}
.barra p b { color: var(--txt); font-weight: 700; }
.barra .boton {
  padding: 12px 18px;
  font-size: 15px;
  box-shadow: none;
}

/* ---------- Pantallas BAJAS: el ancla tiene que seguir cabiendo entera ----------
   Medido: con el aire de reposo el ancla ocupa 490px y necesita una ventana de 640px de
   alto. Por debajo de eso la tarifa se salía por abajo y había que desplazarse por dentro
   de la columna para ver el precio, que es exactamente lo que esta página promete que no
   pasa. Un portátil de 1280x720 con la barra del navegador se queda en 600 y pico.
   Se aprieta el aire y se baja un punto la escala; no se quita ni una línea.
   El corte va en 660 y no en 720: a 661px de ventana el ancla en reposo aún cabe (490 de
   contenido en 511 de hueco), y apretarla antes de tiempo sería encoger porque sí. */
@media (min-width: 901px) and (max-height: 660px) {
  .oferta { padding-top: 26px; padding-bottom: 26px; }
  .oferta-dentro { gap: 15px; }
  .oferta h1 { font-size: clamp(2rem, 2.9vw, 2.7rem); }
  .oferta .entradilla { font-size: 1rem; }
  .oferta .boton { padding: 13px 22px; font-size: 15.5px; }
  .tarifa { margin-top: 0; padding-top: 15px; gap: 8px; }
  .tarifa-cifra { font-size: 1.45rem; }
}

/* ---------- 1180px: la pareja de capturas y el plan se estrechan ---------- */
@media (max-width: 1180px) {
  .enlace-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .enlace-cuerpo .marco { max-width: 320px; }
  .plan { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 900px: se apila. El ancla deja de ser columna y baja a la barra ---------- */
@media (max-width: 900px) {
  body { font-size: 16px; }
  /* En el teléfono la cabecera no se pega: entre ella y la barra de abajo se comerían
     un tercio de la pantalla, y lo que hay que pulsar ya vive abajo. */
  .cabecera { position: static; }
  /* Abajo hay una barra fija de 67px. Sin `scroll-padding-bottom`, cualquier salto de
     ancla o del foco del teclado puede dejar el destino DEBAJO de ella. Hoy no cae ninguno
     ahí por poco, y eso es suerte, no una garantía: se declara. */
  html {
    scroll-padding-top: 12px;
    scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
  /* A 390px no caben logotipo + secciones + idioma + Entrar + píldora. Se caen los
     enlaces de sección y el idioma (que sigue a un toque en el pie). La píldora no. */
  .cabecera nav a.enlace-seccion,
  .cabecera nav a.idioma { display: none; }

  .tablero { grid-template-columns: minmax(0, 1fr); }
  .oferta {
    position: static;
    height: auto;
    overflow: visible;
    padding: calc(var(--pad) * 1.3) var(--pad) calc(var(--pad) * 1.1);
    border-bottom: 1px solid var(--line);
  }
  .paneles { border-left: 0; }
  .panel {
    min-height: 0;
    padding: calc(var(--pad) * 1.5) var(--pad);
  }
  .panel--sangra .captura {
    margin-right: 0;
    border-right: 1px solid var(--line);
    border-radius: var(--radio);
  }
  .par { grid-template-columns: minmax(0, 1fr); }
  .enlace-cuerpo .marco { max-width: 100%; }

  .barra { display: flex; }
  /* La barra flota: sin este colchón taparía la última línea del pie. */
  .pie { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 460px) {
  .barra .boton { padding: 12px 15px; font-size: 14.5px; }
  .barra p { font-size: 12.5px; }
  .tarifa-cifra { font-size: 1.55rem; }
}

/* ---------- El único momento animado ----------
   Al entrar cada panel de la derecha, su contenido asciende 12px con fundido y salida
   exponencial, escalonado en tres tiempos para que se lea como una entrada dirigida y
   no como tres cosas apareciendo a la vez. Nada más se mueve en toda la página.

   El estado oculto lo pone el SCRIPT (clase .preparada) y nunca la hoja de estilos: si
   el JavaScript no llega a ejecutarse, el contenido se ve desde el principio en vez de
   quedarse invisible para siempre. */
@media (prefers-reduced-motion: no-preference) {
  .sube.preparada {
    opacity: 0;
    transform: translateY(12px);
  }
  .sube.preparada.puesta {
    opacity: 1;
    transform: none;
    transition:
      opacity .5s var(--salida) var(--retraso, 0ms),
      transform .66s var(--salida) var(--retraso, 0ms);
  }
}
.sube--b { --retraso: 80ms; }
.sube--c { --retraso: 160ms; }


/* ---------- Páginas legales ----------
   Aquí no hay parrilla, y es a propósito. La regla de «o hay contenido o hay agenda»
   gobierna la portada, que es una demostración del producto puesta en pie. Un aviso legal
   es texto largo y lo único que pide es poder leerse de un tirón: una columna, medida de
   lectura y los mismos tokens de siempre. Cero adornos, que aquí sobran más que en ningún
   otro sitio.
   Además, estas páginas necesitan listas y tablas, y la hoja no definía ninguna de las dos
   porque la portada no las usa. Todo lo de aquí abajo cuelga de .legal para que no se
   filtre a la portada. */
.legal {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 72px) clamp(20px, 5vw, 40px) clamp(60px, 10vw, 120px);
}
.legal h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  margin: 0 0 8px;
}
.legal .actualizado {
  color: var(--mut);
  font-size: 14px;
  margin: 0 0 clamp(28px, 5vw, 48px);
}
.legal h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  margin: clamp(38px, 6vw, 56px) 0 12px;
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--line);
}
.legal h3 {
  font-size: 1.08rem;
  margin: 28px 0 8px;
}
.legal p,
.legal li {
  color: var(--txt2);
  max-width: 72ch;
  text-wrap: pretty;
  line-height: 1.62;
}
.legal p { margin: 0 0 14px; }
.legal strong { color: var(--txt); font-weight: 700; }
.legal ul,
.legal ol {
  margin: 0 0 16px;
  padding-left: 22px;
}
.legal li { margin-bottom: 8px; }
.legal li::marker { color: var(--mut); }

/* Los datos del titular. <address> viene en cursiva por defecto del navegador y aquí no
   pinta nada: esto es una ficha, no una firma. */
.legal address {
  font-style: normal;
  color: var(--txt2);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radio);
  padding: 20px 22px;
  line-height: 1.7;
}

/* Las tablas de subencargados y cookies son anchas de verdad. En un teléfono no caben ni
   forzándolas, así que se dejan desplazar dentro de su caja en vez de romper la página. */
.tabla-legal {
  overflow-x: auto;
  margin: 0 0 20px;
  border: 1px solid var(--line);
  border-radius: var(--radio);
}
.tabla-legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 520px;
}
.tabla-legal th,
.tabla-legal td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.tabla-legal th {
  color: var(--txt);
  font-weight: 700;
  background: var(--card2);
  white-space: nowrap;
}
.tabla-legal td { color: var(--txt2); }
.tabla-legal tr:last-child td { border-bottom: 0; }

/* Un aparte que el lector no debe saltarse: lo importante de verdad de cada página. */
.aviso {
  background: var(--accsoft);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radio) var(--radio) 0;
  padding: 16px 20px;
  margin: 0 0 20px;
}
.aviso p:last-child { margin-bottom: 0; }

/* El índice de la propia página. Sin viñetas: son enlaces, no una enumeración. */
.sumario {
  list-style: none;
  padding: 0;
  margin: 0 0 clamp(20px, 4vw, 32px);
  columns: 2;
  column-gap: 28px;
}
.sumario li { margin-bottom: 6px; break-inside: avoid; }
@media (max-width: 620px) {
  .sumario { columns: 1; }
}