/* Conviene: estilos del sitio (estático, borde y asistente usan este mismo archivo).

   Idea visual: un asesor de compras serio. Página blanca, el producto adelante, el precio
   grande y en cifras parejas, y un único gesto de marca: el sello del veredicto con el óvalo
   del logo. Lo demás, sobrio: sin texturas, sin letra a mano, sin adornos.

   Principio de producto: una respuesta, no un informe. Arriba lo que la persona necesita para
   decidir (veredicto, precio, dónde comprar); el resto, ordenado y a mano.

   Una sola familia, Archivo, en tres anchos: normal para leer, semicondensada para títulos y
   condensada para precios. */

@font-face { font-family: "Archivo"; src: url("/static/fuentes/Archivo-variable.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

/* ===== Tokens =============================================================== */
:root {
  --fondo: #FFFFFF;        /* página, tarjetas, campos */
  --superficie: #F3F4F1;   /* bloques de apoyo: aviso, pie, filas destacadas */
  --tinta: #1B2440;        /* texto y botón principal (la tinta del logo) */
  --texto-2: #535C6D;      /* texto secundario */
  --texto-3: #6A7280;      /* letra chica, fechas */
  --linea: #E0E3DE;        /* bordes y separadores */
  --linea-fuerte: #C3C8C1; /* bordes de campos y botones secundarios */
  --verde: #197A4C;        /* el verde del logo: solo marca y "Conviene" */

  /* Colores de veredicto: el mismo en el sello, la ficha, la extensión y el asistente. */
  --v-conviene: #197A4C;
  --v-normal: #4D5A70;
  --v-esperar: #B42318;
  --v-trucho: #7A3E9D;
  --v-datos: #687080;

  --foco: #197A4C;

  --f-texto: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;

  /* Escala tipográfica (razón ~1.25 sobre 16 px; sube a 17 px en pantallas grandes). */
  --t-chica: 0.8125rem;   /* 13 */
  --t-nota: 0.875rem;     /* 14 */
  --t-base: 1rem;         /* 16 */
  --t-media: 1.125rem;    /* 18 */
  --t-h3: 1.25rem;        /* 20 */
  --t-h2: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  --t-h1: clamp(1.875rem, 1.3rem + 2.6vw, 3rem);

  /* Espacios en múltiplos de 4 px. */
  --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: 4rem;

  --radio: 8px;
  --ancho-texto: 42rem;
  --ancho-pagina: 76rem;

  /* Nombres viejos que usan la bandeja y algunas piezas: apuntan a los nuevos. */
  --papel: var(--fondo); --hoja: var(--fondo); --borde: var(--linea); --suave: var(--texto-2); --tenue: var(--texto-3);
  --sello: var(--verde); --esperar: var(--v-esperar); --violeta: var(--v-trucho); --ocre: var(--v-normal);
  --birome: var(--tinta); --resaltador: color-mix(in srgb, var(--verde) 14%, var(--fondo)); --margen: var(--v-esperar);
  --f-titulo: var(--f-texto); --f-mano: var(--f-texto);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #12161F;
    --superficie: #1A1F2B;
    --tinta: #EDF0F5;
    --texto-2: #B3BAC7;
    --texto-3: #9199A8;
    --linea: #2A3140;
    --linea-fuerte: #414A5C;
    --verde: #4CC48A;
    --v-conviene: #4CC48A;
    --v-normal: #A9B4C8;
    --v-esperar: #FF7A70;
    --v-trucho: #C99BE6;
    --v-datos: #9AA2B1;
    --foco: #4CC48A;
    color-scheme: dark;
  }
}

/* ===== Base ================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (min-width: 1100px) { html { font-size: 106.25%; } }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font-family: var(--f-texto); font-size: var(--t-base); line-height: 1.55; font-weight: 400;
  font-stretch: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
p { margin: 0 0 var(--e-4); }
ul, ol { margin: 0 0 var(--e-4); padding-left: 1.25rem; }
h1, h2, h3 { font-family: var(--f-texto); font-stretch: 88%; font-weight: 700; line-height: 1.12;
  letter-spacing: -0.012em; margin: 0 0 var(--e-3); text-wrap: balance; }
h1 { font-size: var(--t-h1); letter-spacing: -0.02em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
strong { font-weight: 650; }
code { font-size: 0.92em; background: var(--superficie); padding: 0.1em 0.35em; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.saltar { position: absolute; left: -9999px; top: 0; z-index: 10; background: var(--tinta); color: var(--fondo); padding: var(--e-2) var(--e-4); }
.saltar:focus { left: var(--e-4); top: var(--e-2); }

.envoltura { width: 100%; max-width: var(--ancho-pagina); margin-inline: auto; padding-inline: var(--e-4); }
@media (min-width: 760px) { .envoltura { padding-inline: var(--e-6); } }
.contenido { padding-top: var(--e-5); padding-bottom: var(--e-8); min-height: 60vh; }

/* ===== Cabecera ============================================================= */
.cabecera { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--e-3);
  padding-top: var(--e-3); padding-bottom: var(--e-2); }
.cabecera-fondo { background: var(--fondo); border-bottom: 1px solid var(--linea); }
.logo { display: block; line-height: 0; }
.logo img { width: 112px; height: auto; }
.cabecera .buscador { min-width: 0; }
.menu { grid-column: 1 / -1; display: flex; gap: var(--e-5); overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--e-4)); padding: var(--e-1) var(--e-4) 0; }
.menu::-webkit-scrollbar { display: none; }
.menu a { color: var(--texto-2); text-decoration: none; font-weight: 500; font-size: 0.9375rem; white-space: nowrap;
  padding: var(--e-2) 0; border-bottom: 2px solid transparent; }
.menu a:hover { color: var(--tinta); }
.menu a[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--verde); }
@media (min-width: 900px) {
  .cabecera { grid-template-columns: auto minmax(0, 40rem) 1fr; gap: var(--e-6); padding-block: var(--e-4); }
  .logo img { width: 136px; }
  .menu { grid-column: auto; justify-content: flex-end; margin: 0; padding: 0; overflow: visible; gap: var(--e-5); }
}

/* ===== Buscador y campos ==================================================== */
.buscador { display: flex; align-items: stretch; gap: 0; position: relative; }
.campo, .buscador input[type="search"], .buscador input[type="text"], .formulario input[type="email"], .filtro select, .filtro input {
  font: inherit; color: var(--tinta); background: var(--fondo); border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
  min-width: 0; min-height: 44px; padding: 0.55rem 0.8rem; }
.campo::placeholder, input::placeholder { color: var(--texto-3); opacity: 1; }
.campo:focus, input:focus, select:focus, textarea:focus { outline: none; border-color: var(--tinta);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--foco) 28%, transparent); }
.buscador .campo, .buscador input[type="search"], .buscador input[type="text"] { flex: 1 1 auto;
  border-top-right-radius: 0; border-bottom-right-radius: 0; }
.buscador > .boton { border-top-left-radius: 0; border-bottom-left-radius: 0; flex: none; }
.cabecera .buscador .campo { min-height: 42px; background: var(--superficie); border-color: var(--superficie); }
.cabecera .buscador .campo:focus { background: var(--fondo); border-color: var(--tinta); }
.cabecera .buscador .boton { min-height: 42px; padding-inline: 0.9rem; }
.boton-lupa { display: none; }
@media (max-width: 520px) {
  .logo img { width: 100px; }
  .cabecera .buscador .boton { padding-inline: 0.75rem; }
  .cabecera .buscador .boton-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .boton-lupa { display: block; width: 20px; height: 20px; }
}

/* La búsqueda del inicio: grande, para pegar un link. */
.buscador.buscador--grande .campo { min-height: 56px; font-size: var(--t-media); border-width: 1.5px; border-color: var(--tinta); }
.buscador.buscador--grande .boton { min-height: 56px; padding-inline: var(--e-5); font-size: var(--t-base); }
@media (max-width: 520px) {
  .buscador.buscador--grande { flex-direction: column; gap: var(--e-2); }
  .buscador.buscador--grande .campo, .buscador.buscador--grande .boton { border-radius: var(--radio); }
}

/* Buscador con filtros (página Buscar): campo arriba, filtros en fila. */
.buscador--filtros { flex-wrap: wrap; gap: var(--e-3); align-items: end; margin: var(--e-4) 0 var(--e-5); max-width: 56rem; }
.buscador--filtros > input[type="search"] { flex: 1 1 100%; border-radius: var(--radio); min-height: 50px; font-size: var(--t-media); }
.buscador--filtros > .boton { border-radius: var(--radio); min-height: 44px; }
.filtro { display: grid; gap: var(--e-1); font-size: var(--t-chica); color: var(--texto-2); font-weight: 500; }
.filtro select { padding-right: 2rem; }
main .buscador:not(.buscador--grande):not(.buscador--filtros) { margin: var(--e-4) 0 var(--e-5); max-width: 44rem; }
main .buscador:not(.buscador--grande):not(.buscador--filtros) input { min-height: 50px; font-size: var(--t-media); }
main .buscador:not(.buscador--grande):not(.buscador--filtros) .boton { min-height: 50px; }

/* ===== Botones ============================================================== */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 44px; padding: 0.5rem 1.1rem; border: 1.5px solid var(--tinta); border-radius: var(--radio);
  background: var(--tinta); color: var(--fondo); font: 600 0.9375rem/1.2 var(--f-texto); text-decoration: none;
  text-align: center; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.boton:hover { background: color-mix(in srgb, var(--tinta) 86%, var(--fondo)); }
.boton svg { width: 18px; height: 18px; flex: none; }
.boton--primario { background: var(--tinta); }
.boton--grande { min-height: 52px; padding-inline: var(--e-5); font-size: var(--t-base); }
.boton--ancho { width: 100%; }
.boton--secundario { background: var(--fondo); color: var(--tinta); border-color: var(--linea-fuerte); }
.boton--secundario:hover { background: var(--superficie); border-color: var(--tinta); }
.boton--compacto { min-height: 38px; padding: 0.35rem 0.85rem; font-size: var(--t-nota); }
.boton--whatsapp { background: var(--fondo); color: var(--tinta); border-color: var(--linea-fuerte); }
.boton--whatsapp:hover { background: var(--superficie); border-color: var(--tinta); }
.boton[aria-disabled="true"] { background: var(--superficie); color: var(--texto-2); border-color: var(--linea); cursor: default; }
.link-fuerte { font-weight: 600; }

/* ===== Texto de apoyo ======================================================= */
.bajada { font-size: var(--t-media); color: var(--texto-2); max-width: var(--ancho-texto); line-height: 1.5; }
.nota { font-size: var(--t-nota); color: var(--texto-3); max-width: var(--ancho-texto); }
.frase { color: var(--texto-2); }
.miga { font-size: var(--t-nota); color: var(--texto-3); margin-bottom: var(--e-4); }
.miga a { color: var(--texto-2); }
.vacio { padding: var(--e-5); background: var(--superficie); border-radius: var(--radio); max-width: var(--ancho-texto); }
.vacio p:last-child { margin-bottom: 0; }
.aviso-comision, .aviso-corto { font-size: var(--t-chica); color: var(--texto-3); }
.etiqueta-ia { display: inline-block; font-size: var(--t-chica); font-weight: 600; color: var(--texto-2);
  border: 1px solid var(--linea-fuerte); border-radius: 4px; padding: 0 0.4rem; margin-right: var(--e-2); }
.banda-borrador { background: var(--v-esperar); color: #fff; text-align: center; padding: var(--e-2); font-weight: 600; }
.titulo-pagina { margin-top: var(--e-2); }
.resultado-cuenta { color: var(--texto-2); margin-bottom: var(--e-4); }
.fechas-linea { font-size: var(--t-nota); color: var(--texto-2); margin-top: var(--e-4); }

/* Páginas de texto (metodología, privacidad, términos, extensión). */
.texto { max-width: var(--ancho-texto); }
.texto h2 { margin-top: var(--e-6); font-size: var(--t-h3); }
.texto ul, .texto ol { padding-left: 1.2rem; }
.texto li { margin-bottom: var(--e-2); }
.texto .sello { vertical-align: 0.1em; }

/* ===== Secciones ============================================================ */
.bloque { margin-top: var(--e-7); }
.bloque > h2 { margin-bottom: var(--e-4); }
.bloque > .bajada { margin-top: calc(-1 * var(--e-2)); }
.bloque-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e-2) var(--e-4);
  margin-bottom: var(--e-4); }
.bloque-cabeza h2 { margin: 0; }
.bloque-cabeza a { font-weight: 600; font-size: var(--t-nota); }
.hoja { position: relative; }

/* ===== Precio =============================================================== */
.precio { font-family: var(--f-texto); font-stretch: 72%; font-weight: 700; font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.01em; white-space: nowrap; }
.precio-tachado, s.precio { color: var(--texto-3); font-weight: 500; text-decoration-thickness: 1.5px; }

/* ===== Sello del veredicto: sello de goma =====================================
   El único gesto de marca (decisión de la directora: el cartel de goma de la versión
   anterior). Doble borde, apenas torcido, el mismo color de veredicto en todo el sitio. */
.sello { --c: var(--v-datos); display: inline-block; color: var(--c); font-family: var(--f-texto); font-weight: 800;
  font-stretch: 108%; font-size: 0.92rem; line-height: 1; letter-spacing: -0.005em; white-space: nowrap;
  padding: 0.4em 0.62em 0.44em; border: 2px solid currentColor; border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--fondo), inset 0 0 0 3.5px currentColor;
  background: color-mix(in srgb, var(--c) 6%, var(--fondo)); transform: rotate(-3deg); margin: 0; }
.sello--conviene, .sello--comprar { --c: var(--v-conviene); }
.sello--normal { --c: var(--v-normal); }
.sello--esperar { --c: var(--v-esperar); }
.sello--trucho, .sello--inflado { --c: var(--v-trucho); }
.sello--datos, .sello--sin_historial { --c: var(--v-datos); }
.sello--grande { font-size: clamp(1.3rem, 4vw, 1.65rem); border-width: 3px;
  box-shadow: inset 0 0 0 3px var(--fondo), inset 0 0 0 5px currentColor; transform: rotate(-5deg);
  transform-origin: left center; }
.texto .sello { transform: rotate(-2deg); font-size: 0.82rem; }

/* ===== Tarjetas de producto ==================================================
   Celular: una fila por producto (foto a la izquierda), como un listado de compras.
   Compu: grilla de fichas con la foto arriba. Toda la tarjeta lleva a la ficha. */
.lista-productos { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--linea); }
.tarjeta-producto { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--e-1) var(--e-4);
  padding: var(--e-4) 0; border-bottom: 1px solid var(--linea); }
.tarjeta-foto { grid-row: 1 / span 2; width: 96px; height: 96px; object-fit: contain; background: #fff; border-radius: 6px; }
.tarjeta-producto--sin-foto { grid-template-columns: minmax(0, 1fr); }
.tarjeta-cuerpo { min-width: 0; display: grid; gap: var(--e-1); align-content: start; }
.tarjeta-titulo { font-size: var(--t-base); font-stretch: 100%; font-weight: 500; line-height: 1.3; letter-spacing: 0; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta-titulo a { text-decoration: none; }
.tarjeta-titulo a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.tarjeta-titulo a:hover { text-decoration: underline; }
.tarjeta-linea { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-3); }
.tarjeta-linea .precio { font-size: 1.625rem; line-height: 1.1; }
.tarjeta-producto .frase { font-size: var(--t-nota); line-height: 1.4; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta-ahorro { font-size: var(--t-nota); font-weight: 600; color: var(--v-conviene); margin: 0; }
.tarjeta-acciones { grid-column: 2; position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--e-2) var(--e-4); margin-top: var(--e-2); }
.tarjeta-producto--sin-foto .tarjeta-acciones { grid-column: 1; }
.tarjeta-acciones .boton { min-height: 38px; padding: 0.35rem 0.9rem; font-size: var(--t-nota); }
.tarjeta-acciones .boton--primario { background: var(--fondo); color: var(--tinta); border-color: var(--tinta); }
.tarjeta-acciones .boton--primario:hover { background: var(--tinta); color: var(--fondo); }
.tarjeta-acciones a:not(.boton) { font-size: var(--t-nota); font-weight: 600; color: var(--texto-2); }
.tarjeta-ml { font-size: var(--t-nota); font-weight: 600; }

@media (min-width: 640px) {
  .lista-productos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr)); gap: var(--e-6) var(--e-5);
    border-top: 0; }
  .tarjeta-producto { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; padding: 0; border-bottom: 0; gap: var(--e-3); }
  .tarjeta-foto { grid-row: auto; width: 100%; height: auto; aspect-ratio: 1; padding: var(--e-4);
    border: 1px solid var(--linea); border-radius: var(--radio); }
  .tarjeta-acciones { grid-column: 1; margin-top: 0; }
  .tarjeta-producto:hover .tarjeta-foto { border-color: var(--linea-fuerte); }
}

/* La que conviene (arriba de una guía o categoría). */
.tarjeta-producto--elegida { border: 1.5px solid var(--v-conviene); border-radius: var(--radio); padding: var(--e-5) var(--e-4) var(--e-4); }
.tarjeta-elegida-sello { position: absolute; top: -0.85rem; left: var(--e-4); background: var(--fondo); z-index: 1; }
@media (min-width: 640px) {
  .tarjeta-producto--elegida { grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: auto auto; padding: var(--e-6) var(--e-5) var(--e-5); max-width: 46rem; }
  .tarjeta-producto--elegida .tarjeta-foto { grid-row: 1 / span 2; }
  .tarjeta-producto--elegida .tarjeta-acciones { grid-column: 2; }
  .tarjeta-producto--elegida.tarjeta-producto--sin-foto { grid-template-columns: minmax(0, 1fr); }
  .tarjeta-producto--elegida.tarjeta-producto--sin-foto .tarjeta-acciones { grid-column: 1; }
}
.ganador { margin: var(--e-6) 0 var(--e-5); }

/* ===== Inicio =============================================================== */
.pregunta { display: grid; gap: var(--e-6); padding: var(--e-4) 0 var(--e-6); border-bottom: 1px solid var(--linea); }
.pregunta-titulo { font-size: clamp(2.25rem, 1.4rem + 4vw, 4rem); font-stretch: 82%; letter-spacing: -0.03em; line-height: 1; margin-bottom: var(--e-4); }
.pregunta-bajada { font-size: var(--t-media); color: var(--texto-2); max-width: 36rem; }
.pregunta-form { margin-top: var(--e-5); max-width: 40rem; }
.pregunta-ejemplos { font-size: var(--t-nota); color: var(--texto-3); margin-top: var(--e-3); }
.pregunta-respuesta { display: grid; gap: var(--e-2); align-content: start; }
.pregunta-respuesta .tarjeta-producto { border: 1px solid var(--linea); border-radius: var(--radio); padding: var(--e-4); }
.pregunta-leyenda { font-size: var(--t-nota); color: var(--texto-3); margin: 0; }
@media (min-width: 960px) {
  .pregunta { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; padding: var(--e-6) 0 var(--e-7); gap: var(--e-8); }
  .pregunta-respuesta .tarjeta-producto { grid-template-columns: 120px minmax(0, 1fr); }
  .pregunta-respuesta .tarjeta-foto { grid-row: 1 / span 2; width: 120px; height: 120px; padding: 0; border: 0; aspect-ratio: auto; }
  .pregunta-respuesta .tarjeta-acciones { grid-column: 2; }
}

/* Dónde contestamos: tres caminos, uno al lado del otro. */
.caminos { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-5); }
.camino { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--e-3); align-items: start; }
.camino svg { width: 28px; height: 28px; color: var(--texto-2); margin-top: 2px; }
.camino h3 { font-size: var(--t-base); font-stretch: 100%; font-weight: 650; letter-spacing: 0; margin-bottom: var(--e-1); }
.camino p { color: var(--texto-2); font-size: var(--t-nota); margin-bottom: var(--e-2); }
.camino a { font-weight: 600; font-size: var(--t-nota); }
@media (min-width: 760px) { .caminos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-6); } }

/* Por qué confiar: tres afirmaciones cortas. */
.confianza { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-4); }
.confianza li { color: var(--texto-2); font-size: var(--t-nota); }
.confianza strong { display: block; color: var(--tinta); font-size: var(--t-base); margin-bottom: var(--e-1); }
@media (min-width: 760px) { .confianza { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-6); } }

/* Categorías en columnas de texto. */
.chips { list-style: none; padding: 0; margin: 0; columns: 2 11rem; column-gap: var(--e-6); }
.chips li { break-inside: avoid; border-bottom: 1px solid var(--linea); }
.chips a { display: flex; justify-content: space-between; gap: var(--e-2); padding: var(--e-3) 0; text-decoration: none; font-weight: 500; }
.chips a:hover { text-decoration: underline; }
.chips small { color: var(--texto-3); font-weight: 400; font-variant-numeric: tabular-nums; }

/* Lista de guías (y de categorías): filas con separador. */
.guias { list-style: none; padding: 0; margin: 0; display: grid; border-top: 1px solid var(--linea); }
.guias > li { border-bottom: 1px solid var(--linea); }
.guia { display: grid; gap: var(--e-1); padding: var(--e-4) 0; text-decoration: none; }
.guia-titulo { font-size: var(--t-media); font-weight: 650; font-stretch: 92%; line-height: 1.25; }
.guia-texto { color: var(--texto-2); font-size: var(--t-nota); }
.guia-accion { font-size: var(--t-nota); font-weight: 600; color: var(--verde); }
.guia:hover .guia-titulo { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
@media (min-width: 760px) {
  .guias { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-6); border-top: 0; }
  .guias > li:nth-child(-n+2) { border-top: 1px solid var(--linea); }
}

/* Cifras (si una plantilla las usa): en línea, sin cajas. */
.cifras { display: flex; flex-wrap: wrap; gap: var(--e-4) var(--e-6); margin: 0 0 var(--e-5); }
.cifras div { display: flex; flex-direction: column-reverse; }
.cifras dt { font-size: var(--t-nota); color: var(--texto-2); }
.cifras dd { margin: 0; font-size: 1.75rem; font-stretch: 72%; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ===== Ficha de producto (borde) ===========================================
   Arriba, la respuesta: foto, título, sello, precio, porqué y botón. */
.respuesta { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); margin-top: var(--e-2); }
.respuesta-cuerpo { display: grid; gap: var(--e-3); align-content: start; min-width: 0; }
.respuesta-cuerpo > * { margin: 0; }
.respuesta-foto { margin: 0; display: flex; justify-content: center; background: #fff; border-radius: var(--radio); padding: var(--e-3); }
.respuesta-foto img { width: 100%; max-width: 200px; max-height: 168px; aspect-ratio: 1; object-fit: contain; }
.respuesta-titulo { font-size: clamp(1.375rem, 1.1rem + 1.4vw, 2.125rem); font-stretch: 90%; line-height: 1.15; }
.respuesta-veredicto { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-5); margin: var(--e-1) 0; }
.respuesta .sello--grande { justify-self: start; }
.respuesta-precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-1) var(--e-3); }
.respuesta-precio .precio { font-size: clamp(2.75rem, 2rem + 4vw, 4.25rem); line-height: 0.95; letter-spacing: -0.02em; }
.respuesta-tachado { color: var(--texto-3); font-size: var(--t-media); font-variant-numeric: tabular-nums; }
.respuesta-ojo { color: var(--v-trucho); font-weight: 600; }
.respuesta-frase { font-size: var(--t-media); color: var(--tinta); max-width: 36rem; line-height: 1.45; }
.respuesta-acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-1); }
.respuesta-acciones .boton--grande { flex: 1 1 15rem; }
.respuesta-acciones .boton--secundario { flex: 0 1 auto; }
.respuesta .aviso-corto { margin-bottom: calc(-1 * var(--e-2)); }
.respuesta-revisado { color: var(--texto-3); font-size: var(--t-nota); }
@media (max-width: 759px) {
  .respuesta-acciones .boton { flex: 1 1 100%; }
}
@media (min-width: 760px) {
  .respuesta { grid-template-columns: minmax(260px, 420px) minmax(0, 1fr); column-gap: var(--e-7); align-items: start; margin-top: var(--e-4); }
  .respuesta-foto { padding: var(--e-5); border: 1px solid var(--linea); position: sticky; top: var(--e-4); }
  .respuesta-foto img { max-width: 100%; max-height: 380px; }
}

/* Saltos dentro de la ficha: cada paso de la decisión a un toque. */
.saltos { display: flex; gap: var(--e-5); overflow-x: auto; scrollbar-width: none; margin: var(--e-6) calc(-1 * var(--e-4)) 0;
  padding: 0 var(--e-4); border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 2; background: var(--fondo); }
.saltos::-webkit-scrollbar { display: none; }
.saltos a { flex: none; padding: var(--e-3) 0; font-size: var(--t-nota); font-weight: 500; color: var(--texto-2); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.saltos a:hover { color: var(--tinta); border-bottom-color: var(--linea-fuerte); }
@media (min-width: 760px) { .saltos { margin-inline: 0; padding-inline: 0; } }
#tiendas, #precio, #datos, #alt, #cuotas, #avisame { scroll-margin-top: 3.5rem; }
.saltos + .bloque { margin-top: var(--e-6); }

/* Dónde comprarlo: una fila por oferta (tienda, precio, condiciones, botón). */
.ofertas { list-style: none; padding: 0; margin: 0 0 var(--e-3); max-width: 52rem; border-top: 1px solid var(--linea); }
.oferta { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tienda precio" "datos ir";
  gap: var(--e-2) var(--e-4); align-items: center; padding: var(--e-4) 0; border-bottom: 1px solid var(--linea); }
.oferta-tienda { grid-area: tienda; } .oferta-precio { grid-area: precio; } .oferta-datos { grid-area: datos; } .oferta-ir { grid-area: ir; }
.oferta-tienda { display: grid; gap: 2px; min-width: 0; }
.oferta-tienda strong { font-size: var(--t-base); font-weight: 650; }
.oferta-tienda span { font-size: var(--t-nota); color: var(--texto-2); }
.oferta-marca { font-style: normal; font-weight: 650; color: var(--verde); margin-left: var(--e-1); }
.oferta-precio { font-size: 1.5rem; text-align: right; }
.oferta-datos { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4);
  font-size: var(--t-nota); color: var(--texto-2); }
.oferta-ir { justify-self: end; }
.oferta--mejor { box-shadow: inset 3px 0 0 var(--verde); padding-left: var(--e-4); }
@media (min-width: 760px) {
  .oferta { grid-template-columns: minmax(10rem, 1.1fr) minmax(0, 2fr) auto auto; grid-template-areas: "tienda datos precio ir"; gap: var(--e-4); }
}
.mas-datos { margin-top: var(--e-2); }
.mas-datos summary { cursor: pointer; font-weight: 600; font-size: var(--t-nota); padding: var(--e-3) 0; }

/* Mínimo, habitual y máximo: tres números en línea. */
.tres-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--e-4) 0 var(--e-3); max-width: 34rem;
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.tres-numeros div { padding: var(--e-3) var(--e-3) var(--e-3) 0; }
.tres-numeros div + div { border-left: 1px solid var(--linea); padding-left: var(--e-3); }
.tres-numeros dt { color: var(--texto-2); font-size: var(--t-chica); }
.tres-numeros dd { margin: 0; font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); }

/* Gráfico de 90 días. */
.grafico { width: 100%; max-width: 46rem; height: auto; overflow: visible; }
.g-grilla { stroke: var(--linea); stroke-width: 1; }
.g-eje { fill: var(--texto-3); font: 500 12px var(--f-texto); font-variant-numeric: tabular-nums; }
.g-linea { fill: none; stroke: var(--tinta); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-justo { stroke: var(--texto-2); stroke-width: 1.25; stroke-dasharray: 4 4; }
.g-justo-texto { fill: var(--texto-2); font: 600 12px var(--f-texto); }
.g-hoy-texto { fill: var(--tinta); font: 700 12px var(--f-texto); }
.g-punto { fill: var(--verde); stroke: var(--fondo); stroke-width: 2; }
.g-minimo { fill: var(--verde); }
.g-minimo-texto { fill: var(--verde); font-weight: 700; }
@media (max-width: 520px) { .g-eje { font-size: 15px; } .g-justo-texto { font-size: 15px; } }

/* Quién lo vende más barato. */
.vendedores { list-style: none; padding: 0; margin: 0 0 var(--e-3); max-width: 40rem; border-top: 1px solid var(--linea); }
.vendedores li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-1) var(--e-4); padding: var(--e-3) 0;
  border-bottom: 1px solid var(--linea); }
.vendedores .precio { font-size: 1.375rem; min-width: 7.5rem; }
.vendedores-datos { color: var(--texto-2); font-size: var(--t-nota); flex: 1 1 12rem; }
.vendedores-mejor { box-shadow: inset 3px 0 0 var(--verde); padding-left: var(--e-3) !important; }
.vendedores-marca { font-size: var(--t-chica); font-weight: 700; color: var(--verde); }

/* Plegables: cuotas, especificaciones (y el desplegable de la ficha estática). */
.plegables { display: grid; max-width: 46rem; border-top: 1px solid var(--linea); }
.plegables details, .desplegable { border-bottom: 1px solid var(--linea); }
.plegables summary, .desplegable > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  gap: var(--e-3); padding: var(--e-4) 0; font-weight: 650; font-size: var(--t-media); }
.plegables summary::-webkit-details-marker, .desplegable > summary::-webkit-details-marker { display: none; }
.plegables summary::after, .desplegable > summary::after { content: ""; width: 10px; height: 10px; flex: none;
  border-right: 2px solid var(--texto-2); border-bottom: 2px solid var(--texto-2); transform: rotate(45deg) translate(-2px, -2px); }
.plegables details[open] summary::after, .desplegable[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.desplegable > summary small { margin-left: auto; color: var(--texto-3); font-weight: 400; font-size: var(--t-nota); }
.plegable-cuerpo, .desplegable-cuerpo { padding: 0 0 var(--e-4); }
.tabla-chica { border-collapse: collapse; width: 100%; font-size: var(--t-nota); margin-bottom: var(--e-3); font-variant-numeric: tabular-nums; }
.tabla-chica th, .tabla-chica td { text-align: left; padding: var(--e-2) var(--e-2) var(--e-2) 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla-chica th { font-weight: 600; color: var(--texto-2); font-size: var(--t-chica); }
.datos { display: grid; margin: 0; }
.datos div { display: grid; grid-template-columns: minmax(8rem, 40%) 1fr; gap: var(--e-3); padding: var(--e-2) 0; border-bottom: 1px solid var(--linea); }
.datos dt { color: var(--texto-2); font-size: var(--t-nota); }
.datos dd { margin: 0; font-size: var(--t-nota); }

/* Ficha estática de respaldo (solo sin Cloudflare): mismas ideas que la del borde. */
.ficha-arriba { display: grid; gap: var(--e-4); }
.ficha-foto { background: #fff; display: flex; justify-content: center; padding: var(--e-3); border-radius: var(--radio); }
.ficha-foto img { max-height: 220px; width: auto; object-fit: contain; }
.ficha-respuesta { display: grid; gap: var(--e-3); }
.ficha-respuesta > * { margin: 0; }
.ficha-titulo { font-size: clamp(1.375rem, 1.1rem + 1.4vw, 2.125rem); font-stretch: 90%; }
.ficha-precio-valor { font-size: clamp(2.75rem, 2rem + 4vw, 4.25rem); line-height: 0.95; }
.ficha-precio-nota, .ficha-actualizado { color: var(--texto-3); font-size: var(--t-nota); }
.ficha-acciones { display: grid; gap: var(--e-2); max-width: 30rem; }
.ficha .sello--grande, .ficha-respuesta .sello--grande { justify-self: start; }
.ficha > div + div { margin-top: var(--e-6); }
@media (min-width: 760px) { .ficha-arriba:has(> .ficha-foto) { grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: var(--e-7); } }

/* ===== Avisos y formularios ================================================= */
.aviso-baja { background: var(--superficie); border-radius: 12px; padding: var(--e-5); max-width: 46rem; }
.aviso-baja h2 { font-size: var(--t-h3); margin-bottom: var(--e-2); }
.aviso-baja p { color: var(--texto-2); }
.formulario { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-3) 0; }
.formulario input[type="email"] { flex: 1 1 14rem; min-height: 46px; }
.formulario .boton { min-height: 46px; }
.consentimiento { font-size: var(--t-chica); color: var(--texto-3); margin: 0; }
.alternativa { display: flex; align-items: center; gap: var(--e-3); margin: var(--e-2) 0 var(--e-3); color: var(--texto-3); }

/* Filtros en forma de chips (ofertas). */
.filtros-chips { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0 0 var(--e-4); }
.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0.3rem 0.8rem; border: 1px solid var(--linea-fuerte);
  border-radius: 6px; background: var(--fondo); color: var(--tinta); text-decoration: none; font-weight: 500; font-size: var(--t-nota); }
.chip:hover { border-color: var(--tinta); }
.chip[aria-current="page"] { background: var(--tinta); border-color: var(--tinta); color: var(--fondo); }
/* Muchas categorías: una sola fila que se desliza, para no tapar los productos. */
.filtros-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: var(--e-1); }
.chip { flex: none; }
@media (max-width: 640px) {
  .filtros-chips { scrollbar-width: none; margin-inline: calc(-1 * var(--e-4)); padding-inline: var(--e-4); }
  .filtros-chips::-webkit-scrollbar { display: none; }
}
.vacio-grande { max-width: 46rem; padding: var(--e-5) 0; }
.como-se-usa ol { padding-left: 1.3rem; max-width: var(--ancho-texto); }
.como-se-usa li { margin-bottom: var(--e-2); }

/* ===== Guías (comparativas) ================================================= */
.comparativa { max-width: 48rem; }
.comparativa-cabeza { padding-bottom: var(--e-4); border-bottom: 1px solid var(--linea); }
.comparativa-cabeza .bajada { margin-bottom: var(--e-3); }
.firma { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); font-size: var(--t-nota); color: var(--texto-3); margin: 0; }
.comparativa-cuerpo { margin-top: var(--e-5); }
.comparativa-cuerpo h2 { margin-top: var(--e-7); }
.comparativa-cuerpo h3 { margin-top: var(--e-5); font-size: var(--t-media); }
.comparativa-cuerpo ul { padding-left: 1.2rem; }
.comparativa-cuerpo li { margin-bottom: var(--e-2); }
.comparativa-cuerpo table { width: 100%; border-collapse: collapse; font-size: var(--t-nota); margin: var(--e-4) 0 var(--e-5);
  font-variant-numeric: tabular-nums; display: block; overflow-x: auto; }
.comparativa-cuerpo th, .comparativa-cuerpo td { text-align: left; padding: var(--e-2) var(--e-3) var(--e-2) 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.comparativa-cuerpo th { font-weight: 600; color: var(--texto-2); font-size: var(--t-chica); border-bottom-color: var(--linea-fuerte); }
.comparativa-cuerpo td strong { font-weight: 650; }
.comparativa-cuerpo .tarjeta-producto { margin: var(--e-4) 0; }
.compartir { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-4); margin-top: var(--e-6);
  padding-top: var(--e-5); border-top: 1px solid var(--linea); }
.compartir p { margin: 0; font-weight: 600; }

/* ===== Pie ================================================================= */
.pie { background: var(--superficie); margin-top: var(--e-7); padding: var(--e-6) 0 var(--e-7); font-size: var(--t-nota); color: var(--texto-2); }
.pie-grilla { display: grid; gap: var(--e-5); }
.pie p { max-width: 36rem; }
.pie-logo img { width: 104px; }
.pie-lema { font-weight: 650; color: var(--tinta); margin-top: var(--e-3); }
.pie-enlaces { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-2); }
.pie-enlaces a { color: var(--tinta); }
@media (min-width: 760px) { .pie-grilla { grid-template-columns: 1fr 1fr; gap: var(--e-7); } .pie-enlaces { grid-template-columns: 1fr 1fr; } }

/* ===== Componentes compartidos (contrato con functions/ y el asistente) =====
   .boton, .boton--primario, --secundario, --grande, --ancho, --compacto
   .sello + .sello--conviene | --normal | --esperar | --trucho | --datos, y .sello--grande
   .precio, .precio-tachado, .frase, .nota, .bajada
   .tarjeta-producto (.tarjeta-foto, .tarjeta-cuerpo, .tarjeta-titulo, .tarjeta-linea, .tarjeta-acciones), .lista-productos
   .buscador (+ --grande, --filtros), .campo, .formulario, .aviso-baja, .aviso-comision, .etiqueta-ia
   .respuesta-* (ficha), .vendedores, .tres-numeros, .plegables, .tabla-chica, .datos, .chip, .vacio */