/* 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: #14663D;
  --primario-hover: #0E4D2D;
  --primario-suave: #E3F2EA;
  --enlace-oscuro: #7FD3A5;

  /* 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ñadidos de esta web (no están en main.css) */
.nota { font-size: .9rem; color: var(--texto-suave); }
.comparar__accion .btn-sec { white-space: nowrap; }
.tarjeta__pie .btn-oferta + .btn-oferta { margin-top: 8px; }
.tabla-simple .btn-oferta { min-height: 40px; padding: 8px 14px; white-space: nowrap; }
.calc__resultado .botones { margin: 10px 0 0; }
.calc__resultado ul { margin: 8px 0 0; }
.calc fieldset { border: 0; padding: 0; margin: 0; }
.tabla-simple td.num, .tabla-simple th.num { text-align: right; white-space: nowrap; }
@media (min-width: 860px) {
  .comparar--denso th, .comparar--denso td { font-size: .92rem; padding-left: 10px !important; padding-right: 10px !important; }
}

/* 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; }
}