/* Identidad compartida por todas las páginas públicas y de cuenta. */
/* Navegación: aire, alineación y una única llamada destacada. */
body header.cabecera { position: sticky; top: 0; padding-top: 0; background: #ffffffed; backdrop-filter: blur(18px); border-bottom: 1px solid #e9edf380; box-shadow: 0 4px 18px #12233c03; }
body .cabecera-interior { min-height: 88px; gap: 3.25rem; }
body .marca { gap: .6rem; flex-shrink: 0; }
body .marca-texto { font-size: 1.6rem; letter-spacing: -.07em; }
body .marca-isotipo { width: 34px; height: 34px; }
body .nav-cabecera { gap: 1.4rem; }
body .nav-cabecera a { font-size: .84rem; font-weight: 500; color: #535e70; padding-block: .65rem; }
body .nav-cabecera a:hover { color: var(--azul); }
/* El sombreado al tocar un enlace (`:active`, estilo.css) quedaba como un
   rectángulo pegado a la palabra (2026-10-12). Píldora con aire alrededor;
   el margen negativo compensa el relleno, así nada se corre de lugar. */
body .nav-cabecera a:not(.nav-comparador):not(.nav-icono) {
  padding-inline: .6rem; margin-inline: -.6rem; border-radius: 999px;
  transition: color var(--transicion), background var(--transicion);
}
body .nav-cabecera .nav-comparador { display: inline-flex; align-items: center; gap: .85rem; padding: .7rem 1.15rem; color: #fff; background: #1d2b45; border: 1px solid #1d2b45; border-radius: 100px; order: 2; transition: background 180ms, box-shadow 180ms; }
/* `color`: sin él ganaba `body .nav-cabecera a:hover` (más específica) y el texto quedaba azul sobre azul (2026-10-16). */
body .nav-cabecera .nav-comparador:hover { color: #fff; background: var(--azul); border-color: var(--azul); box-shadow: 0 5px 16px #2459d31a; }
body .nav-cta-flecha { display: inline; }
body .nav-cuenta { margin-left: auto; }
body .selector-moneda { background: #f4f6fa; border: 1px solid #edf0f5; }
body .moneda-opcion { font-size: .7rem; }

/* Jerarquía editorial, superficies y controles comunes. */
:root {
  --inicio-curva: cubic-bezier(.22,.68,0,1.01);
  --sombra: 0 2px 5px #172d5304, 0 10px 28px #172d5307;
  --sombra-alta: 0 4px 12px #172d5308, 0 22px 48px #172d5312;
}
body :is(a, button, summary, input, select):focus-visible { outline: 2px solid var(--azul); outline-offset: 4px; }
body [id], #resumen, #tiendas, #indice, #especificaciones, #comparar-productos { scroll-margin-top: 112px; }
h1, h2 { letter-spacing: -.045em; font-weight: 600; }
.miga { padding-block: .6rem; color: var(--texto-suave); }
body:not(.pagina-inicio) .pregunta { text-align: left; padding: 3.5rem 0 3rem; }
body:not(.pagina-inicio) .pregunta::before { background: radial-gradient(ellipse at 85% 15%, #e3edfc90, transparent 60%), linear-gradient(#fbfcff, #f7f9fd); }
body:not(.pagina-inicio) .pregunta h1,
.directorio-cabecera h1,
.pagina-cuenta > h1 { font-size: clamp(2.25rem, 4.2vw, 3.6rem); line-height: 1.08; font-weight: 600; letter-spacing: -.055em; }
body:not(.pagina-inicio) .pregunta .apoyo { margin-left: 0; max-width: 55ch; line-height: 1.75; }
body:not(.pagina-inicio) .pregunta .buscador { margin-left: 0; }
.directorio-cabecera { padding: 2rem 0 1rem; margin-bottom: 2rem; }
.directorio-cabecera h1 { margin-block: .5rem 1rem; }
.buscador, .directorio-buscador { border-radius: 20px; border-color: #e0e7f2; box-shadow: 0 3px 5px #14295003, 0 18px 36px -15px #254d8722; }
.buscador input, .directorio-buscador input { min-height: 52px; }
.buscador button, .directorio-buscador button { min-height: 50px; border-radius: 13px; padding-inline: 1.4rem; background: var(--azul); }
body:not(.pagina-inicio) .tarjeta,
.directorio-tarjeta, .guia-tarjeta, .comparador-resultado { border-color: var(--borde-suave); box-shadow: var(--sombra); transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion); }
body:not(.pagina-inicio) .tarjeta:hover,
.directorio-tarjeta:hover, .guia-tarjeta:hover, .comparador-resultado:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); border-color: #bfd0ee; }
body:not(.pagina-inicio) .tarjeta { border-radius: 20px; }
.tarjeta-titulo { letter-spacing: -.025em; }
.directorio-tarjeta { padding: 2rem 1.5rem 1.25rem; }
.directorio-logo { height: 90px; margin-bottom: 1.5rem; }
.directorio-accion { border-radius: 12px; font-weight: 500; }
.directorio-banner, .directorio-vacio { background: linear-gradient(130deg, #edf3fd, #f8faff); padding: 2rem; }
.guia-tarjeta { background: #f5f7fb; padding: 2rem; }
.guia-principal { background: #eaf0fb; color: #1f3455; }
.guia-principal .directorio-etiqueta, .guia-principal .guia-enlace { color: #365887; }
.guia-principal p { color: #53647c; }
.alerta-fila { padding: 1.25rem; border-radius: 18px; }
.alerta-actual:not(.sin-dato) { color: #176841; }
.alerta-cancelar { min-height: 44px; padding: .6rem 1rem; }
.fila-tienda-verificacion { display: block; margin-top: .4rem; color: var(--texto-suave); font-size: .75rem; line-height: 1.5; }
.fila-tienda-pendiente { display: block; color: #80631d; }
.ofertas-moneda-etiqueta { margin: 1rem 0 .5rem; font-size: .8rem; color: var(--texto-suave); }
.resultados-categoria:only-child { grid-column: 1 / -1; }
.vs-hero-precio strong { font-size: clamp(1.2rem, 2vw, 1.7rem); font-weight: 650; color: #176841; }
.vs-hero-precio.ganador strong { color: #176841; }
.vs-hero-nombre, .vs-titulo-seccion { text-transform: none; font-weight: 600; letter-spacing: -.035em; }
.vs-hero-precio > .vs-precio-pendiente { color: #80631d; }
.vs-hero-indice { display: grid; justify-items: center; gap: .35rem; max-width: 8rem; }
.vs-hero-indice small { font-size: .68rem; line-height: 1.4; color: var(--texto-suave); }
.vs-desplazamiento { display: none; }
/* El flujo de comparación ya tiene su propia barra de acciones. */
body:has(.comparador-seleccion) .barra-comparacion,
body:has(.vs-barra-fija) .barra-comparacion { display: none; }
.vs-hero-grilla:focus-visible { outline: 3px solid var(--azul); outline-offset: 4px; border-radius: 12px; }
@media (max-width: 60rem) {
 .vs-desplazamiento { display: block; margin: 0 0 1rem; font-size: .8rem; color: var(--texto-suave); }
 .vs-hero[data-productos="3"] .vs-hero-producto,
 .vs-hero[data-productos="4"] .vs-hero-producto { height: auto; }
}
.pagina-cuenta .resultados-cabecera { align-items: center; gap: 1rem; margin-bottom: 2rem; }
.pagina-cuenta .resultados-cabecera .directorio-cabecera,
.pagina-cuenta .resultados-cabecera .acciones-cuenta { margin: 0; }
.pagina-cuenta .resultados-cabecera .apoyo { margin-bottom: 0; }
.pagina-cuenta .acciones-cuenta button { min-height: 44px; }
.menu-cuenta-mobile { display: none; }
@media (max-width: 40rem) {
 body .nav-cuenta > .nav-icono, body .nav-cuenta > .salir-cuenta { display: none; }
 .menu-cuenta-mobile { display: grid; gap: .25rem; padding-top: .5rem; border-top: 1px solid var(--borde-suave); }
 .menu-cuenta-mobile button { width: 100%; min-height: 44px; padding: .6rem .75rem; text-align: left; font: inherit; color: var(--texto-suave); background: none; border: 0; border-radius: 10px; cursor: pointer; }
 .menu-cuenta-mobile button:hover { background: var(--fondo-suave); color: var(--texto); }
}
.sidebar-filtros, .filtros-busqueda { background: #f6f8fc; border-color: var(--borde-suave); border-radius: 18px; }
.fila-resultado { border-color: var(--borde-suave); }
.comparador-portada { background: radial-gradient(ellipse at 85% 20%, #426ca270, transparent 55%), #15243a; box-shadow: var(--sombra-alta); }
.comparador-portada h1 { font-weight: 600; letter-spacing: -.055em; }
.comparador-portada .comparador-etiqueta { color: #b4c9eb; }
.comparador-portada-tarjeta { box-shadow: 0 20px 40px #0c1d3633; }
.ficha-imagen, .panel-precio { border-color: var(--borde-suave); border-radius: 22px; }
.ficha-navegacion { padding-block: .65rem; }
.ficha-lateral { scroll-margin-top: 112px; }
.puntuacion { background: radial-gradient(circle at 8% 8%, #eaf0fd, transparent 45%), #fff; border-color: var(--borde-suave); }
.pagina-cuenta { margin-top: 3.5rem; }
.pagina-cuenta > h1 { margin-bottom: 2rem; }
.autenticacion { max-width: 68rem; gap: 4rem; padding: 3.5rem; margin-top: 3.5rem; background: radial-gradient(ellipse at 0 0, #e8f0fd, transparent 70%), #fafcff; border-radius: 28px; }
.autenticacion-beneficios h1 { font-size: clamp(2rem, 3.7vw, 3.2rem); line-height: 1.12; }
.autenticacion-beneficios ul { padding-left: 1.2rem; color: var(--texto-suave); }
.autenticacion-beneficios li { padding-block: .4rem; }
.formulario-cuenta { padding: 2rem; border-radius: 22px; max-width: 28rem; }
.formulario-cuenta input { min-height: 48px; border-radius: 12px; }
.formulario-cuenta button { min-height: 48px; border-radius: 12px; }
.pagina-cuenta .vacio { padding: 2rem; border: 1px solid var(--borde-suave); border-radius: 20px; background: #f6f8fc; }
.pie { border-top-color: var(--borde-suave); }
/* Categorías: cada acceso tiene su propia superficie y fotografía real. */
.catalogo-categorias { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 1.2rem; margin: 3rem 0 1rem; }
.catalogo-categoria { display: flex; flex-direction: column; min-width: 0; padding: 1.5rem; border-radius: 22px; background: linear-gradient(145deg,#fff,#f0f4fa); border: 1px solid #e4ebf5; text-decoration: none; color: var(--texto); box-shadow: var(--sombra); transition: transform var(--transicion),box-shadow var(--transicion); }
.catalogo-categoria:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.catalogo-categoria-arriba { display: flex; justify-content: space-between; color: #7489a6; }
.catalogo-categoria-arriba svg { width: 22px; height: 22px; }
.catalogo-categoria-foto { position: relative; height: 150px; margin: 1rem 0 1.5rem; }
.catalogo-categoria-foto img { position: absolute; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.catalogo-categoria strong { font-size: 1rem; font-weight: 600; letter-spacing: -.025em; }
.catalogo-categoria small { margin-top: .4rem; color: var(--texto-suave); }
@media (min-width: 64rem) { .ficha-lateral { top: 112px; } }
@media (max-width: 75rem) {
 body .cabecera-interior { gap: 1.5rem; }
 body .nav-cabecera { gap: 1rem; }
 .catalogo-categorias { gap: .85rem; }
 .catalogo-categoria { padding: 1rem; }
}
@media (max-width: 64rem) {
 body .cabecera-interior { flex-wrap: nowrap; min-height: 76px; }
 body .nav-cabecera { gap: .7rem; }
 body .nav-cabecera > .nav-duplica-mobile { display: none; }
 body .marca-texto { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; font-size: 1.4rem; }
 .catalogo-categorias { grid-template-columns: repeat(3,minmax(0,1fr)); }
 .autenticacion { gap: 2rem; padding: 2rem; }
}
@media (max-width: 48rem) {
 body .cabecera-interior { padding: .5rem 1.25rem; gap: .8rem; }
 body .nav-cabecera { justify-content: flex-end; flex-wrap: nowrap; gap: .5rem; }
 body .nav-cuenta { margin-left: 0; }
 /* Dentro del menú plegado, Comparador va con el mismo relleno que Marcas,
    Tiendas y Guías: con el suyo propio quedaba corrido a la derecha. Y
    ninguno lleva el margen negativo de la fila de escritorio, que acá
    los pegaba al borde del panel (2026-10-13). */
 body .nav-cabecera .nav-comparador { order: initial; border: none; background: transparent; color: var(--texto); padding: .65rem .6rem; }
 body .nav-cabecera .menu-mas-lista a:not(.nav-icono) { margin-inline: 0; }
 body .menu-mas-lista { background: #fff; border-color: #e1e7f1; }
 body:not(.pagina-inicio) .pregunta { padding: 2rem 0; }
 .autenticacion { grid-template-columns: minmax(0,1fr); padding: 1.5rem; gap: 2rem; }
 .catalogo-categorias { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .catalogo-categoria-foto { height: 130px; }
 .directorio-tarjeta, .guia-tarjeta { padding: 1.4rem; }
 .pagina-cuenta { margin-top: 2rem; }
}
@media (max-width: 40rem) {
 .comparador-cambiar-categoria { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .5rem; }
 .comparador-cambiar-categoria a { flex-shrink: 0; }
 .comparador-categoria-portada h1 { font-size: 1.8rem; line-height: 1.2; }
 .comparador-categoria-portada .apoyo { margin-bottom: 0; }
 body .cabecera-interior { min-height: 70px; }
 body .marca-texto { font-size: 1.3rem; }
 body .marca-isotipo { width: 28px; height: 28px; }
 body .nav-cabecera { gap: .4rem; }
 body .nav-cabecera .nav-cuenta { gap: .2rem; }
 body [id], #resumen, #tiendas, #indice, #especificaciones, #comparar-productos { scroll-margin-top: 90px; }
 .catalogo-categoria-foto { height: 110px; }
 .catalogo-categoria strong { font-size: .87rem; }
 .catalogo-categoria small { font-size: .75rem; }
 .formulario-cuenta { padding: 1.4rem; }
 .directorio-cabecera { padding-top: 1rem; }
 .buscador input, .directorio-buscador input, .formulario-cuenta input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Encabezados de listados, marcas y tiendas: la misma escala editorial. */
main > h1, .encabezado-marca h1, .lista-encabezado h1 {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.05em;
  margin-block: 1.5rem;
}
.encabezado-marca { padding-block: 1rem; }
@media (max-width: 40rem) {
 main > h1, .encabezado-marca h1, .lista-encabezado h1 { font-size: 2.1rem; }
}

/* Configuración: acciones y formularios con una escala propia, sin tarjetas de catálogo. */
.cuenta-opciones { display: grid; gap: 1rem; max-width: 52rem; }
.cuenta-opcion { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1.5rem; padding: 1.75rem; border: 1px solid var(--borde-suave); border-radius: 20px; background: #fff; color: var(--texto); text-decoration: none; box-shadow: var(--sombra); transition: border-color var(--transicion), box-shadow var(--transicion); }
.cuenta-opcion:hover { border-color: var(--azul); box-shadow: var(--sombra-alta); }
.cuenta-opcion .tarjeta-titulo { margin: 0; }
.cuenta-opcion .tarjeta-meta { grid-column: 1; margin: 0; line-height: 1.65; }
.cuenta-opcion-flecha { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--azul); }
.cuenta-edicion { max-width: 34rem; margin-inline: auto; }
.cuenta-volver { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 1rem; color: var(--texto-suave); text-decoration: none; }
.cuenta-volver:hover { color: var(--azul); }
.cuenta-edicion .formulario-cuenta { max-width: none; padding: 2.25rem; }
.cuenta-edicion h1, .cuenta-confirmacion > h1 { font-size: clamp(1.8rem, 4vw, 2.3rem); line-height: 1.15; margin: .75rem 0 1rem; letter-spacing: -.045em; }
.cuenta-edicion .apoyo-bloque { margin-bottom: 1.5rem; }
.cuenta-ayuda { color: var(--texto-suave); font-size: .8rem; line-height: 1.65; }
.cuenta-ayuda ul { padding-left: 1.15rem; margin-block: .5rem; }
.formulario-cuenta .errorlist { color: #a12c32; font-size: .85rem; padding-left: 1.15rem; margin-block: .4rem; }
.formulario-cuenta input[aria-invalid="true"] { border-color: #b93840; }
.cuenta-cancelar { display: flex; justify-content: center; align-items: center; min-height: 44px; margin-top: .5rem; color: var(--texto-suave); }
.formulario-cuenta .cuenta-boton-peligro { background: #a12c32; }
.formulario-cuenta .cuenta-boton-peligro:hover { background: #852229; }
.cuenta-confirmacion { padding: 2.5rem; text-align: center; border: 1px solid var(--borde-suave); border-radius: 24px; background: #fff; box-shadow: var(--sombra); }
.cuenta-confirmacion-icono { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 1.5rem; border-radius: 50%; background: #e9f6ee; color: #246947; font-size: 1.5rem; }
@media (max-width: 40rem) {
 .cuenta-edicion .formulario-cuenta, .cuenta-confirmacion { padding: 1.5rem; }
 .cuenta-opcion { padding: 1.25rem; }
}
/* Autocompletado: estado compartido, legible sobre heroes claros y oscuros. */
.sugerencias-estado { display: block; padding: 1rem 1.1rem; border: 1px solid var(--borde-suave); border-radius: 14px; background: #fff; color: var(--texto-suave); font-size: .85rem; line-height: 1.55; text-align: left; box-shadow: var(--sombra-alta); }
.comparador-portada h1 { max-width: 13ch; line-height: 1.03; }
.sugerencias-lista { max-height: min(26rem, 55vh); overflow-y: auto; overscroll-behavior: contain; }
.sugerencias-lista a { min-height: 44px; }
.sugerencia-texto { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 40rem) {
 .sugerencias-lista a { align-items: flex-start; flex-direction: column; gap: .15rem; }
}
.comparador-portada-buscador:focus-within { outline: 2px solid #8eb7ff; outline-offset: 4px; }
body .comparador-portada-buscador input:focus-visible { outline: none; }
/* Buscador de la cabecera, desplegado (2026-10-12). La regla de arriba
   de «todo botón dentro de un buscador es azul y alto» le pegaba también
   a la X de cerrar: quedaba un bloque azul vacío, con la X azul sobre
   azul. Dos clases para ganarle también a la hoja del modo oscuro. Y el
   anillo de foco va en la caja redondeada (`.buscador:focus-within`), no
   como recuadro cuadrado alrededor del input. */
.buscador button.buscador-cabecera-limpiar {
  min-height: 0; padding: 0; border-radius: 999px;
  background: none; color: var(--texto-suave);
}
.buscador button.buscador-cabecera-limpiar:hover { background: var(--azul-tenue); color: var(--azul); }
body .buscador-cabecera input:focus-visible { outline: none; }
/* El desplegable ocupa el buscador completo, incluido el ancho del botón. */
.comparador-portada-buscador { position: relative; }
.comparador-portada-campo { position: static; }
.comparador-sugerencias { left: 0; right: 0; top: calc(100% + .6rem); }
/* Ranking: separar la puntuación del precio evita que compitan como dos importes. */
.tarjeta-precio { color: #176841; font-variant-numeric: tabular-nums; }
@media (min-width: 40rem) {
 .tarjeta-cuerpo > .tarjeta-precio:has(+ .tarjeta-boton) { margin-top: auto; padding-top: .35rem; }
 .tarjeta-cuerpo > .tarjeta-precio + .tarjeta-boton { margin-top: 0; }
}
.ranking-intro { padding: 1.5rem 1.75rem; margin-bottom: 2rem; border: 1px solid var(--borde-suave); border-radius: 18px; background: #f6f8fc; }
.ranking-intro .nota { max-width: 105ch; margin-bottom: 0; line-height: 1.75; }
.tarjeta-ranking .ranking-indice { display: flex; align-items: baseline; gap: .2rem; width: fit-content; padding: .4rem .6rem; border-radius: 8px; background: #eef3fc; margin-top: .8rem; font-variant-numeric: tabular-nums; }
.ranking-indice-etiqueta { margin-right: .3rem; color: var(--texto-suave); font-size: .7rem; font-weight: 500; }
@media (max-width: 40rem) {
 .ranking-intro { padding: 1.15rem; }
 .tarjeta-ranking .ranking-indice { margin-top: .45rem; }
}
/* En mobile el formulario necesita el ancho disponible, sin dos marcos anidados. */
@media (max-width: 40rem) {
 .autenticacion { padding: 0; border: 0; border-radius: 0; background: transparent; gap: 1.5rem; }
 .autenticacion-beneficios h1 { font-size: 2rem; }
 .autenticacion-beneficios > p:not(.eyebrow) { margin-bottom: .6rem; }
 .autenticacion-beneficios ul { margin-block: .5rem 0; font-size: .9rem; }
 .autenticacion-beneficios li { margin-block: .3rem; padding-block: 0; }
 .autenticacion .formulario-cuenta { max-width: none; padding: 1.25rem; }
}
/* Catálogo mobile: accesos explorables en una fila y filtros compactos. */
@media (max-width: 40rem) {
 .listas-chips { flex-wrap: nowrap; overflow-x: auto; padding: .3rem; margin-inline: -.3rem; scroll-padding-inline: .3rem; overscroll-behavior-x: contain; }
 .listas-chips > a { flex-shrink: 0; }
 .sidebar-filtros { padding: 1rem 1.15rem; }
 .sidebar-filtros summary h2 { margin: 0; font-size: 1.1rem; }
 .sidebar-filtros summary { min-height: 32px; }
 .sidebar-filtros[open] summary { margin-bottom: 1rem; }
}
.grilla > .directorio-vacio { grid-column: 1 / -1; }
/* La búsqueda de resultados es una barra compacta en todos los anchos. */
.buscador.buscador-barra { flex-direction: row; align-items: center; gap: .25rem; }
.buscador-barra button.buscador-lupa { flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 12px; color: #fff; background: var(--azul); }
.buscador-barra .buscador-lupa svg { flex-shrink: 0; }
.buscador-barra input { min-height: 44px; }
/* Las páginas de exploración y error conservan una búsqueda compacta en mobile. */
@media (max-width: 40rem) {
 body:not(.pagina-inicio) .pregunta .buscador, .error .buscador { flex-direction: row; align-items: center; gap: .25rem; }
 body:not(.pagina-inicio) .pregunta .buscador button, .error .buscador button { flex-shrink: 0; padding-inline: .9rem; border-radius: 12px; font-size: .85rem; }
}

/* === Buscador: un solo anillo de foco (2026-10-21) =========================
   La regla general de foco de arriba (`body :is(..., input, ...)`) le ganaba
   en especificidad a la que cada buscador usa para anular el contorno del
   campo: al hacer clic se veía un rectángulo recto adentro de la caja
   redondeada, además del anillo de la caja. El foco se marca una sola vez,
   en la caja (`:focus-within`), que sigue siendo visible con teclado. */
body :is(.buscador, .directorio-buscador, .comparador-portada-buscador) input:focus-visible { outline: none; }
.directorio-buscador:focus-within {
  outline: none;
  border-color: var(--azul-claro);
  box-shadow: 0 0 0 4px rgba(50, 104, 228, .12), var(--sombra);
}
/* El del comparador tenía contorno y además un halo: dos anillos. Queda el contorno. */
.comparador-portada-buscador:focus-within { box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, .18); }

/* === Buscador siempre a mano (2026-10-21) ==================================
   Pedido del operador: poder buscar desde cualquier página sin volver al
   inicio. La cabecera ya es fija (`position: sticky`, arriba de todo).

   Escritorio: `buscador-cabecera.js` mide el lugar libre en la fila y, si
   alcanza, deja el campo abierto (`.fijo`) en vez de la lupa. */
@media (min-width: 64.01rem) {
  .buscador-cabecera-wrap.js-listo.fijo .buscador-cabecera-toggle { display: none; }
  .buscador-cabecera-wrap.js-listo.fijo .buscador-cabecera-form {
    position: relative;
    top: auto;
    right: auto;
    margin-top: 0;
    width: var(--buscador-fijo, 20rem);
    max-width: none;
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
}

/* Pantallas chicas: fila propia debajo de la de navegación, dentro de la
   cabecera fija. */
.cabecera-busqueda { display: none; }
@media (max-width: 64rem) {
  .cabecera-busqueda {
    display: block;
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 1.25rem .65rem;
  }
  .cabecera-busqueda .buscador-cabecera {
    flex: none;
    width: 100%;
    max-width: none;
    margin: 0;
    box-shadow: none;
  }
  .cabecera-busqueda .buscador-cabecera input { font-size: 1rem; }
}

/* En la Home, mientras se ve el buscador de la portada, el de la cabecera
   no aparece: sería el mismo control dos veces en la misma pantalla. En
   pantallas chicas la fila se apoya por debajo de la cabecera (fuera del
   flujo) para que al aparecer no empuje la página. */
html:not(.buscador-principal-fuera) .buscador-cabecera-wrap.buscador-condicional { display: none; }
@media (max-width: 64rem) {
  .cabecera-busqueda.buscador-condicional {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    max-width: none;
    padding-top: .5rem;
    background: #fffffff2;
    backdrop-filter: blur(18px);
    border-bottom: 1px solid #e9edf3;
    transition: opacity 180ms, transform 180ms, visibility 180ms;
  }
  html:not(.buscador-principal-fuera) .cabecera-busqueda.buscador-condicional {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.5rem);
  }
}

/* === Menú de la cuenta (2026-10-21) ========================================
   En escritorio, con sesión iniciada, Favoritos/Historial/Alertas/
   Configuración/Salir se juntan detrás del ícono de usuario: sueltos
   ocupaban ~460px y no dejaban lugar para el buscador abierto. En
   pantallas chicas se ven como antes (barra inferior y menú ☰). */
.menu-usuario { display: none; position: relative; }
@media (min-width: 64.01rem) {
  body .nav-cuenta > .cuenta-suelta { display: none; }
  /* Flex y no block: el ícono (`.nav-icono`) trae margen negativo de
     -0.875rem para que su círculo de 44px no agrande la fila; dentro de un
     bloque, ese margen lo subía y quedaba más alto que la luna. */
  .menu-usuario { display: flex; align-items: center; }
}
.menu-usuario > summary { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; color: var(--texto-suave); list-style: none; cursor: pointer; }
.menu-usuario > summary:hover { color: var(--azul); }
.menu-usuario > summary::-webkit-details-marker { display: none; }
.menu-usuario[open] > summary { color: var(--azul); background: var(--azul-tenue); }
.menu-usuario-lista {
  position: absolute;
  right: 0;
  top: calc(100% + .6rem);
  z-index: 60;
  display: grid;
  min-width: 13.5rem;
  padding: .4rem;
  background: #fff;
  border: 1px solid #e1e7f1;
  border-radius: 14px;
  box-shadow: var(--sombra-alta);
}
.menu-usuario-lista a,
.menu-usuario-lista button {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  min-height: 44px;
  padding: .55rem .8rem;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--texto);
  font: inherit;
  font-size: .92rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu-usuario-lista svg { color: var(--texto-suave); flex-shrink: 0; }
.menu-usuario-lista a:hover,
.menu-usuario-lista button:hover { background: var(--fondo-suave); color: var(--azul); }
.menu-usuario-lista form { margin: .25rem 0 0; padding-top: .25rem; border-top: 1px solid var(--borde-suave); }
.menu-usuario-lista button { color: var(--texto-suave); }
/* Le gana a los estilos de botón de la nav (`.nav-cabecera button`): sin esto «Salir» quedaba corrido respecto de los enlaces. */
body .nav-cabecera .menu-usuario-lista button { margin: 0; padding: .55rem .8rem; }
/* Los enlaces de la nav llevan margen negativo para que su píldora de
   hover no corra nada de lugar (`body .nav-cabecera a:not(...)`, arriba).
   Dentro del menú ese margen los sacaba del borde de la tarjeta: el hover
   asomaba por la izquierda. Misma especificidad, declarada después. */
body .nav-cabecera .menu-usuario .menu-usuario-lista a {
  margin: 0;
  padding: .55rem .8rem;
  border-radius: 10px;
  font-size: .92rem;
  color: var(--texto);
}
body .nav-cabecera .menu-usuario .menu-usuario-lista a:hover { color: var(--azul); }

/* Botón de la lupa del buscador de la cabecera (2026-10-21). En escritorio
   la caja mide 2.75rem (44px) de alto y el botón también: lo llenaba entero
   y tapaba el borde de arriba, el de abajo y el de la derecha. Más chico,
   queda adentro con el mismo aire en los tres lados (el relleno de la caja,
   ~5px). El radio acompaña al de la caja (20px − 5px) para que las dos
   curvas sean paralelas; también en la fila de celular, donde el tamaño ya
   entraba bien. */
body .cabecera .buscador-cabecera button.buscador-lupa { border-radius: 15px; }
@media (min-width: 64.01rem) {
  body .cabecera .buscador-cabecera { align-items: center; }
  body .cabecera .buscador-cabecera button.buscador-lupa {
    flex: 0 0 2.125rem;
    width: 2.125rem;
    height: 2.125rem;
    min-width: 0;
    min-height: 0;
    padding: 0;
  }
}

/* ── Pizarra de precios: base visual (2026-10-24, DOCS/100-BRANDING.md §12.1) ──
   Lo que hace distinto a QuéCompro es el precio con su tienda y su fecha.
   Se probó aquietar la base (sin degradados, sin sombras, borde fino en
   cada tarjeta) y el operador prefirió los degradados de antes y sin
   bordes; queda solo lo que suma: la fecha de verificación como sello. La
   letra no cambia: Inter con números tabulares. */
:root { --sello: #1f3a7a; }

/* El sello: «Verificado el …» como un sello de goma, la marca de la casa. */
body .panel-precio-verificado, body .fila-tienda-verificacion {
  display: inline-flex; align-items: center; gap: .3rem;
  width: fit-content; padding: .1rem .45rem;
  color: var(--sello); border: 1px solid currentColor; border-radius: 4px;
  font-size: var(--t-xs); font-weight: 500; font-variant-numeric: tabular-nums;
  transform: rotate(-1.5deg);
}
/* En la fila de tienda el sello es texto corrido: si no entra en un
   renglón, la fecha baja entera debajo de «Verificado el». Con
   `inline-flex` y sin cortes se salía de su columna y se montaba sobre el
   precio en celular (2026-10-24). */
body .fila-tienda-verificacion { display: inline-block; max-width: 100%; }
body .panel-precio-verificado, body .fila-tienda-verificacion time { white-space: nowrap; }
body .panel-precio-verificado .check-verificado { color: inherit; }

/* ── Directorio de tiendas compacto (operador, 2026-10-24) ──
   Con 30 tiendas en tarjetas de tres por fila, la página era una
   columna de logos enormes. Cinco por fila, logo más bajo y la acción
   como texto: la tarjeta entera ya es el enlace. */
body .directorio-grilla-tiendas { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem; }
body .directorio-grilla-tiendas .directorio-tarjeta { padding: 1.1rem .9rem .9rem; }
body .directorio-grilla-tiendas .directorio-logo { height: 56px; margin-bottom: .75rem; }
body .directorio-grilla-tiendas .directorio-logo img.logo-tienda { width: 120px; height: 48px; max-height: 48px; }
body .directorio-grilla-tiendas .directorio-logo .logo-monograma { width: 48px; height: 48px; font-size: 1.2rem; border-radius: 12px; }
body .directorio-grilla-tiendas h2 { font-size: .92rem; }
body .directorio-grilla-tiendas .directorio-cantidad { margin: .2rem 0 .6rem; }
body .directorio-grilla-tiendas .directorio-accion { min-height: 0; padding: .2rem 0 0; background: none; font-size: .78rem; }
body .directorio-grilla-tiendas .directorio-tarjeta:hover .directorio-accion { background: none; text-decoration: underline; }
@media (max-width: 64rem) { body .directorio-grilla-tiendas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 48rem) { body .directorio-grilla-tiendas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 30rem) { body .directorio-grilla-tiendas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } }
body .fila-tienda-pendiente { margin-top: .3rem; font-size: var(--t-xs); }

/* ── Promociones publicadas por la tienda (DOCS/150-BENEFICIOS.md §3) ──
   Una línea debajo de la verificación: el precio con la promoción en
   verde, como la más barata, y la letra chica en gris al lado. El precio
   publicado de la fila no cambia ni se tacha: sigue siendo el que vale. */
body .fila-tienda-promo {
  display: block;
  margin-top: .35rem;
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--texto);
}
body .fila-tienda-promo-cuando { font-weight: 600; }
body .fila-tienda-promo strong { color: var(--verde); font-weight: 700; font-variant-numeric: tabular-nums; }
body .fila-tienda-promo-detalle { display: block; color: var(--texto-suave); }
body .nota-promociones { margin: .9rem 0 0; font-size: var(--t-xs); line-height: 1.5; color: var(--texto-suave); max-width: 60rem; }
/* En el panel de precio, la misma línea un poco más grande y separada. */
body .panel-precio-promo { margin: .5rem 0 .9rem; }
body .panel-precio-promo .fila-tienda-promo { font-size: var(--t-sm); }
body .panel-precio-pendiente { margin: .35rem 0 0; font-size: var(--t-xs); }

/* ── Tiendas de la ficha como tarjetas (operador, 2026-10-26) ──
   En PC, una fila de renglones dejaba el nombre en una punta y el precio
   en la otra. Ahora cada tienda es una tarjeta —tienda y verificación
   arriba, precio y botón abajo— en una fila que se desliza cuando no
   entran todas; las flechas solo aparecen en ese caso (`sin-desborde`,
   carrusel-novedades.js). Las cuatro primeras, las más baratas, se ven
   siempre. En celular sigue la lista de siempre. */
@media (min-width: 48rem) {
  body .carrusel-tiendas { position: relative; }
  body .carrusel-tiendas .lista-tiendas {
    display: flex; gap: .9rem;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    padding: .25rem .1rem .9rem; scrollbar-width: thin;
  }
  body .carrusel-tiendas .fila-tienda-item {
    display: flex; flex: 0 0 calc((100% - 2.7rem) / 4); min-width: 15.5rem;
    scroll-snap-align: start;
  }
  body .carrusel-tiendas .fila-tienda {
    flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr);
    /* La segunda fila (precio y botón) va al fondo: así quedan alineados
       entre tarjetas aunque una tenga promoción y otra no. */
    grid-template-rows: 1fr auto; align-items: start;
    gap: .7rem .8rem; padding: 1.1rem 1.15rem 1rem;
  }
  body .carrusel-tiendas .fila-tienda-guia { display: none; }
  body .carrusel-tiendas .fila-tienda-info { min-width: 0; }
  body .carrusel-tiendas .fila-tienda-derecha {
    grid-column: 1 / -1; align-self: end;
    display: flex; flex-direction: column; align-items: stretch; gap: .7rem;
    margin: 0; padding-top: .75rem; border-top: 1px dashed var(--borde);
  }
  body .carrusel-tiendas .fila-tienda-montos { align-items: flex-start; }
  body .carrusel-tiendas .fila-tienda-precio { font-size: 1.35rem; }
  body .carrusel-tiendas .fila-tienda .oculto { text-align: center; white-space: nowrap; }
  body .carrusel-tiendas.js-listo .carrusel-flecha { display: flex; }
  body .carrusel-tiendas.sin-desborde .carrusel-flecha { display: none; }
  body .carrusel-tiendas .carrusel-flecha-prev { left: -1.25rem; }
  body .carrusel-tiendas .carrusel-flecha-next { right: -1.25rem; }
}

/* Ajustes de celular (2026-10-26), vistos en la página publicada a 390px:
   - El precio de las tarjetas se partía en dos renglones («Desde USD /
     1.490,00»): «Desde» va arriba y el monto queda entero.
   - Las versiones ocupaban dos columnas de ancho fijo y dejaban un tercio
     vacío a la derecha: tres columnas que llenan el ancho.
   - El resumen del historial apilaba tres cajas altas: el más bajo y el
     más alto lado a lado, y las mediciones en un renglón finito abajo
     (en tres columnas, a 360px el monto quedaba cortado). */
@media (max-width: 40rem) {
  body .tarjeta-precio-desde { display: block; }
  body .tarjeta-precio .precio-valor { white-space: nowrap; }
  body .variantes-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  body .variante-foto { width: auto; min-width: 0; }
  body .resumen-historial { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  body .resumen-historial > div { padding: .65rem .8rem; }
  body .resumen-historial > div:nth-child(3) {
    grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline;
    padding-block: .45rem;
  }
  body .resumen-historial dt { font-size: .72rem; }
  body .resumen-historial dd { white-space: nowrap; }
}

/* «¿Bajó de verdad?» en el historial (2026-10-27). Un renglón con el
   veredicto y la cuenta; el color solo acompaña, el texto dice todo. */
body .bajo-de-verdad {
  margin: 0 0 1rem; padding: .8rem 1rem; border-radius: var(--radio);
  background: var(--fondo-suave); border-left: 4px solid var(--borde);
}
body .bajo-de-verdad p { margin: .2rem 0 0; font-size: .92rem; line-height: 1.45; }
body .bajo-de-verdad-titulo { font-size: .8rem; letter-spacing: .02em; color: var(--texto-suave); }
body .bajo-de-verdad-bajo { border-left-color: #1f8a4c; }
body .bajo-de-verdad-subio, body .bajo-de-verdad-subio_y_bajo { border-left-color: #c2410c; }
body .tarjeta-baja { color: #176841; }
body .bajaron-revisar { margin-top: 3rem; padding: 1.2rem 1.4rem; border: 1px dashed var(--borde); border-radius: var(--radio); }
body .bajaron-revisar h2 { font-size: 1.1rem; margin: 0 0 .4rem; }
body .bajaron-revisar li { margin: .45rem 0; font-size: .92rem; }
body .bajaron-aprobar { display: inline; margin-left: .5rem; }
body .bajaron-aprobar button { font: inherit; font-size: .85rem; padding: .15rem .6rem; border: 1px solid var(--borde); border-radius: 999px; background: #fff; cursor: pointer; }
/* Compartir por WhatsApp: mismo nivel que «Avisame», en verde para que se
   reconozca de un vistazo (2026-10-27). */
body .boton-whatsapp { color: #15803d; }
body .boton-whatsapp:hover { background: #ecfdf3; }
body .panel-compartir { margin-top: -1rem; }