/* Tokens de la web: lo único que cambia entre webs es este archivo. */
@font-face {
  font-family: 'Figtree';
  src: url('../fuentes/figtree-var.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
}

:root {
  /* Color de la web */
  --primario: #4B3AA6;
  --primario-hover: #392B85;
  --primario-suave: #ECEAF8;
  --enlace-oscuro: #B3A8F5;

  /* Estilo: minimalista */
  --fondo: #FFFFFF;
  --fondo-alt: #F5F7F9;
  --tarjeta: #FFFFFF;
  --radio: 10px;
  --radio-boton: 10px;

  --texto: #1B2430;
  --texto-suave: #4B5563;
  --borde: #DDE3EA;
  --oferta: #A4161A;
  --ok: #14663D;

  --fuente: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ancho: 1120px;
  --ancho-texto: 760px;
  --sombra: 0 2px 10px rgba(20, 30, 50, .08);
  --sombra-alta: 0 10px 28px rgba(20, 30, 50, .14);
}

html.text-base { font-size: 16px; }
html.text-lg { font-size: 18px; }
html.text-xl { font-size: 20px; }

/* Añadido de esta web: espacio entre bloques dentro de una misma sección y el botón del asistente */
.seccion h2 + .tabla-simple, .seccion p + .tabla-simple { margin-bottom: 18px; }
.bloque-sup { margin-top: 36px; }
.calc__resultado .btn-oferta { margin-top: 6px; }
.calc__resultado p { margin-bottom: .6em; }
.nota { font-size: .92rem; color: var(--texto-suave); }

/* Añadido de esta web: en móvil, las tablas de decisión se apilan para que se lea la última columna sin desplazar */
@media (max-width: 719px) {
  .tabla-simple.tabla-apilada table { min-width: 0; }
  .tabla-simple.tabla-apilada thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .tabla-simple.tabla-apilada tr { display: block; padding: 12px 14px; border-top: 1px solid var(--borde); }
  .tabla-simple.tabla-apilada tbody tr:first-child { border-top: 0; }
  .tabla-simple.tabla-apilada td { display: block; border: 0; padding: 3px 0; }
  .tabla-simple.tabla-apilada td:first-child { font-weight: 700; }
  .tabla-simple.tabla-apilada td + td::before { font-weight: 700; color: var(--texto-suave); }
  .t-casa td:nth-child(2)::before { content: 'Mira primero: '; }
  .t-casa td:nth-child(3)::before { content: 'Modelos: '; }
  .t-base td:nth-child(2)::before { content: 'Tú: '; }
  .t-base td:nth-child(3)::before { content: 'La base: '; }
  .t-base td:nth-child(4)::before { content: 'Modelos: '; }
  .t-altura td:nth-child(2)::before { content: 'Altura: '; }
  .t-altura td:nth-child(3)::before { content: 'Dato de: '; }
  .t-recambios td:nth-child(2)::before { content: 'La cuenta: '; }
  .t-recambios td:nth-child(3)::before { content: 'Estimación al año: '; }
  .t-fechas td:nth-child(2)::before { content: 'Plazo: '; }
  .t-fechas td:nth-child(3)::before { content: 'Dónde verlo: '; }
  .t-ofertas td:nth-child(2)::before { content: 'Oferta: '; }
  .t-ofertas td:nth-child(3)::before { content: 'Plazo: '; }
  .t-ofertas td:nth-child(4)::before { content: 'Dónde: '; }
}

/* Menú largo con el logo «Guía Comprar Bien»: en línea desde 1280 px; por debajo, con el botón «Menú» */
@media (min-width: 1280px) { html .menu__lista a { padding: 8px 5px; font-size: .86rem; white-space: nowrap; } html .logo { white-space: nowrap; } }
@media (min-width: 980px) and (max-width: 1279px) {
  html .menu__boton { display: inline-flex; }
  html .controles .menu { position: static; }
  html body .menu__lista, html.js body .menu.abierta .menu__lista { position: absolute; right: 16px; top: calc(100% + 1px); width: min(300px, calc(100vw - 32px)); background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-alta); padding: 8px; display: grid; gap: 0; }
  html.js body .menu__lista { display: none; }
  html.js body .menu.abierta .menu__lista { display: grid; }
  html .menu__lista a { padding: 10px 12px; font-size: 1rem; }
}