/* Contraste (2026-10-02): los grises y azules de texto secundario de la
   Home estaban entre 2,9:1 y 4,3:1, debajo del 4,5:1 que pide WCAG AA para
   texto normal. Se oscurecieron lo justo para llegar, sin cambiar de tono;
   los números grandes de las guías, a 3:1 (texto grande). */
/* Home editorial — septiembre 2026. Tema acotado a esta experiencia. */
.pagina-inicio main { padding-top: 0; }
.pagina-inicio a, .pagina-inicio button { -webkit-tap-highlight-color: transparent; }
.pagina-inicio :is(a, button, summary, input):focus-visible { outline: 2px solid var(--azul); outline-offset: 5px; }
.pagina-inicio [id] { scroll-margin-top: 110px; }

/* Portada de ancho abierto, sin caja exterior. */
.portada { position: relative; isolation: isolate; padding: 2.5rem 0 0; }
.portada::before { content: ''; position: absolute; z-index: -1; inset: -90px calc((100% - 100vw)/2) 0; background: radial-gradient(ellipse at 82% 36%, #dce9fc85, transparent 43%), radial-gradient(ellipse at 20% 70%, #eef3fb60, transparent 46%), linear-gradient(#fcfdff, #f7f9fd 90%, #fff); pointer-events: none; }
.portada-principal { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; min-height: min(760px, calc(100svh - 165px)); }
.portada-intro { position: relative; z-index: 3; min-width: 0; padding: 1rem 0 2.25rem; }
.portada h1 { margin: 0; font-size: clamp(3.3rem, 5.4vw, 4.85rem); line-height: 1.025; letter-spacing: -.067em; font-weight: 620; color: #18202f; }
.portada h1 > span { color: var(--azul); }
/* La línea que rota (`titulo-dinamico.js`): `inline-block` para que el alto que reserva el script se respete. */
.portada h1 > [data-frases] { display: inline-block; }
.portada-apoyo { max-width: 42ch; margin: 1.75rem 0 2rem; color: #687386; font-size: 1rem; line-height: 1.75; }
.portada .portada-buscador { position: relative; display: flex; flex-direction: row; max-width: none; margin: 0; padding: .5rem; border-radius: 22px; background: #fff; border: 1px solid #e0e7f2; box-shadow: 0 3px 5px #14295003, 0 18px 36px -15px #254d8722, inset 0 1px 0 #fff; transition: border-color 180ms, box-shadow 180ms; }
.portada .portada-buscador:focus-within { border-color: #9eb9ec; box-shadow: 0 0 0 4px #2459d30a, 0 18px 36px -15px #254d8722; }
.portada .buscador-campo { min-width: 0; width: 100%; }
.portada .buscador input { min-height: 60px; padding-left: 2.8rem; border: 0; background: transparent; font-size: 1rem; }
.portada .buscador-icono { left: .75rem; color: #8997ac; }
.portada .buscador button { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; min-width: 118px; min-height: 60px; padding: .9rem 1.15rem; border: 1px solid #2459d3; border-radius: 15px; background: linear-gradient(#376be0, #2459d3); box-shadow: inset 0 1px 0 #ffffff38, 0 4px 8px #2459d315; color: #fff; font-size: .86rem; font-weight: 500; }
.portada .buscador button:hover { background: #194ab8; }
.portada .sugerencias { color: var(--texto); z-index: 20; text-align: left; }
.portada-atajos { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: .8rem 0 1.9rem; font-size: .7rem; color: #636b79; }
.portada-atajos a { display: inline-flex; align-items: center; min-height: 32px; color: #4f5d72; text-decoration: none; border-bottom: 1px solid #d8e0ed; }
.portada-atajos a:hover { color: var(--azul); border-color: var(--azul); }
.portada-beneficios { display: flex; flex-wrap: wrap; gap: .8rem 1.15rem; }
.portada-beneficios > span { display: inline-flex; align-items: center; gap: .4rem; font-size: .7rem; color: #63718a; }
.portada-beneficios svg { width: 17px; height: 17px; color: #5279bb; }
.portada-cierre { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 72px; border-bottom: 1px solid #e7edf5; }
.portada-cierre > span { color: #65748b; font-size: .7rem; letter-spacing: .14em; }
.portada-cierre a { display: flex; align-items: center; gap: 1rem; min-height: 44px; color: #52627c; font-size: .7rem; text-decoration: none; }
.portada-cierre a > span { font-size: 1rem; }

/* Escenario de producto: luz, sombra y una ficha que permanece legible. */
.hero-selector { min-width: 0; padding: 0 0 1.5rem; }
.portada-ejemplo { position: relative; min-width: 0; }
.hero-selector .portada-ejemplo[hidden], .hero-controles[hidden] { display: none; }
.ejemplo-escena { position: relative; isolation: isolate; min-height: clamp(320px, 30vw, 430px); }
.ejemplo-escena::before { content: ''; position: absolute; inset: 2% 0 2% 6%; border: 1px solid #dfe7f166; border-radius: 50%; background: radial-gradient(ellipse at 50% 45%, #fff 5%, #e0eafb70 60%, transparent 71%); transform: rotate(-12deg); }
.ejemplo-escena::after { content: ''; position: absolute; bottom: 2%; left: 16%; width: 73%; height: 25px; border-radius: 50%; background: #637b9b25; filter: blur(12px); z-index: -1; }
.ejemplo-edicion { position: absolute; top: 4%; left: 3%; color: #65748b; font-size: .7rem; letter-spacing: .16em; }
.ejemplo-edicion > span { font-size: .95rem; color: #556c8f; margin-right: .4rem; }
/* Arranca debajo de «En el catálogo» (4% + su alto) a cualquier ancho: con
   un `inset` en porcentaje, una foto ancha —los parlantes Logitech— la
   tapaba a 820, 1100 y 1280 px. */
.ejemplo-imagen { position: absolute; inset: calc(4% + 2rem) -1% 1% 10%; display: grid; place-items: center; }
.ejemplo-imagen img, .ejemplo-imagen .miniatura { position: absolute; inset: 0; min-height: 0; width: 100%; height: 100%; max-height: 450px; object-fit: contain; mix-blend-mode: multiply; filter: drop-shadow(14px 24px 15px #1d385b20); transition: transform 650ms var(--inicio-curva); }
.ejemplo-imagen:hover img { transform: translateY(-6px) rotate(-1deg); }
/* Recorte de la fotografía STC600 existente: conserva sus píxeles y retira
   el fondo y el sello externo. El contorno usa las coordenadas del original
   cuadrado; inset y object-fit mantienen la misma escala en cada pantalla. */
.ejemplo-imagen:has(img[src$="/cougar-fuente-stc600-80-plus-white.jpg"]) {
  aspect-ratio: 1;
  width: min(100%, clamp(295px, 30vw, 430px));
  height: auto;
  inset: 0 auto auto 50%;
  transform: translateX(-50%);
  margin: 0;
  filter: drop-shadow(10px 18px 14px #1d385b20);
}
.ejemplo-imagen img[src$="/cougar-fuente-stc600-80-plus-white.jpg"] {
  clip-path: polygon(.6% 20%, 26.5% 15.9%, 63.6% 18.9%, 63.6% 39.6%, 99.6% 39.8%, 99.6% 86.4%, 55.9% 85.9%, 56% 60%, 50% 60.4%, 26.7% 62.5%, .6% 58.7%);
  filter: none;
}
.ejemplo-categoria { position: absolute; bottom: 9%; right: -1%; writing-mode: vertical-rl; color: #65748b; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; }
.ejemplo-presentacion { display: flex; justify-content: space-between; align-items: center; gap: 1rem; position: relative; margin-top: -.25rem; padding: 1.3rem 1.4rem; border: 1px solid #ffffff; border-radius: 18px; background: #ffffffd9; box-shadow: 0 4px 8px #1e385c03, 0 15px 30px #1e385c07; backdrop-filter: blur(12px); }
.ejemplo-identidad { min-width: 0; }
.ejemplo-marca { color: #616b7f; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; }
.ejemplo-marca > span { margin: 0 .3rem; }
.ejemplo-presentacion h3 { margin: .45rem 0 .3rem; font-size: 1.1rem; line-height: 1.3; font-weight: 600; letter-spacing: -.025em; overflow-wrap: anywhere; }
.ejemplo-meta { color: #65748b; font-size: .7rem; }
/* La versión más barata de la misma familia (2026-10-16): una línea
   debajo, chica, para que no compita con el precio del producto. */
.ejemplo-otra-version { display: block; margin-top: .5rem; font-size: .72rem; color: var(--azul); text-decoration: none; }
.ejemplo-otra-version:hover { text-decoration: underline; }
.ejemplo-otra-version strong { font-weight: 700; }
.ejemplo-cta { min-width: 115px; flex-shrink: 0; text-decoration: none; text-align: right; color: #65748b; font-size: .7rem; }
.ejemplo-cta strong { display: block; font-size: 1.2rem; line-height: 1.45; letter-spacing: -.03em; color: #176841; font-weight: 600; }
.ejemplo-cta small { display: block; margin-top: .4rem; color: var(--azul); font-size: .7rem; }
.ejemplo-cta small span { margin-left: .5rem; }
.ejemplo-detalle { margin: .4rem .5rem 0; }
.ejemplo-detalle summary { display: flex; justify-content: space-between; align-items: center; min-height: 44px; list-style: none; cursor: pointer; color: #4f5d72; font-size: .85rem; font-weight: 500; }
.ejemplo-detalle summary::-webkit-details-marker { display: none; }
.ejemplo-detalle summary > span { font-size: 1.15rem; color: var(--azul); }
.ejemplo-ofertas { padding: .5rem .8rem; border: 1px solid #e2e8f2; border-radius: 12px; background: #fff; }
.ejemplo-oferta { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .65rem 0; border-bottom: 1px solid #edf1f7; font-size: .72rem; }
.ejemplo-oferta small { display: block; margin-top: .15rem; color: var(--texto-suave); font-size: .7rem; }
.ejemplo-oferta strong { flex-shrink: 0; font-size: .82rem; }
.ejemplo-oferta-mejor strong, .ejemplo-diferencia strong { color: #176841; }
.ejemplo-diferencia { font-size: .7rem; color: var(--texto-suave); }
.ejemplo-mas-tiendas { margin: .35rem 0 0; font-size: .75rem; }
.hero-controles { display: flex; align-items: center; justify-content: flex-end; gap: .8rem; margin-top: .5rem; }
.hero-controles button { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #dce4f0; border-radius: 50%; color: #617899; background: #ffffff70; font: inherit; cursor: pointer; transition: background 180ms, border-color 180ms; }
.hero-controles button:hover { color: var(--azul); border-color: #a4bce5; background: #fff; }
.hero-controles [data-hero-posicion] { font-size: .7rem; color: #616c7d; font-variant-numeric: tabular-nums; }
.portada-orientacion { padding: 3rem; background: #edf3fd; border: 1px solid #e0e8f4; border-radius: 28px; }
.portada-orientacion h2 { font-size: 2.4rem; line-height: 1.2; letter-spacing: -.05em; }
.portada-orientacion p { color: var(--texto-suave); margin: 1.5rem 0; }

/* Tipografía y ritmo editorial de todas las secciones. */
.inicio-seccion { margin-top: 7rem; }
.portada-etiqueta { display: block; color: #616c7d; font-size: .7rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 1.2rem; }
.inicio-seccion-cabecera { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 1.5rem 3rem; margin-bottom: 2.5rem; }
.inicio-seccion-cabecera h2 { margin: 0; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.08; letter-spacing: -.052em; font-weight: 550; }
.inicio-seccion-cabecera p { color: #616b7a; font-size: .87rem; line-height: 1.7; margin: 0 0 .5rem; }
.inicio-enlace { display: inline-flex; align-items: center; min-height: 44px; gap: 1.2rem; color: #30476a; font-size: .75rem; text-decoration: none; }
.inicio-enlace:hover { color: var(--azul); }
.inicio-boton { display: inline-flex; align-items: center; justify-content: center; gap: 1.4rem; min-height: 52px; padding: .9rem 1.4rem; border: 1px solid #2459d3; border-radius: 100px; color: #fff; background: var(--azul); box-shadow: 0 5px 12px #2459d310; font-size: .8rem; font-weight: 500; text-decoration: none; }
.inicio-boton:hover { background: #1a49b4; }

/* Logos: marcas del catálogo, no una declaración de acuerdos comerciales. */
.inicio-marcas { display: flex; gap: 3.5rem; align-items: center; margin: 2.5rem 0 0; padding: 1.5rem 0 2rem; border-bottom: 1px solid #edf0f5; }
.inicio-marcas-intro { flex-shrink: 0; }
.inicio-marcas-intro p { margin: 0; font-size: .73rem; line-height: 1.7; color: #626c7f; }
.inicio-marcas-intro strong { font-weight: 500; color: #48576d; }
.inicio-marcas-intro a { display: inline-flex; align-items: center; min-height: 34px; gap: 1rem; margin-top: .35rem; font-size: .7rem; color: #5f6c7f; text-decoration: none; }
.inicio-marcas-logos { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2rem; flex: 1; min-width: 0; align-items: center; }
.inicio-marcas-logos a { display: grid; place-items: center; min-height: 54px; }
.inicio-marcas-logos img { width: 100%; height: 30px; object-fit: contain; filter: grayscale(1); opacity: .65; transition: opacity 220ms, filter 220ms; }
.inicio-marcas-logos a:hover img { filter: grayscale(0); opacity: 1; }

/* Categorías fotografiadas. El icono queda como alternativa si falta imagen. */
.inicio-categorias-grilla { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.inicio-categoria { display: flex; flex-direction: column; min-width: 0; position: relative; padding: 1.15rem 1.3rem 1.35rem; border-radius: 22px; border: 1px solid #edf0f5; background: linear-gradient(145deg, #f7f9fc, #f1f4f8); color: var(--texto); text-decoration: none; transition: transform 300ms var(--inicio-curva), box-shadow 300ms, border-color 300ms; }
.inicio-categoria:nth-child(3n + 2) { background: linear-gradient(135deg, #f2f6fc, #edf2fa); }
.inicio-categoria:hover { transform: translateY(-5px); box-shadow: var(--sombra-alta); border-color: #d9e3f3; }
.inicio-categoria-arriba { display: flex; align-items: center; justify-content: space-between; color: #8fa0b9; }
.inicio-categoria-icono svg { width: 19px; height: 19px; }
.inicio-categoria-flecha { font-size: 1rem; }
.inicio-categoria-imagen { position: relative; flex-shrink: 0; display: grid; place-items: center; height: 155px; margin: .5rem 0 1rem; }
.inicio-categoria-imagen img { position: absolute; inset: 0; min-height: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; filter: drop-shadow(5px 8px 6px #1c355b12); transition: transform 500ms var(--inicio-curva); }
.inicio-categoria:hover img { transform: scale(1.06); }
.inicio-categoria-imagen > svg { width: 70px; height: 70px; color: #758dab; }
.inicio-categoria-nombre { font-size: .88rem; font-weight: 600; letter-spacing: -.025em; }
.inicio-categoria-cantidad { margin-top: .3rem; color: #65748b; font-size: .7rem; }

/* Una única tarjeta de producto, rediseñada dentro de la Home. */
.pagina-inicio .grilla-diferencias { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
.pagina-inicio .tarjeta-envoltorio { min-width: 0; }
.pagina-inicio .tarjeta { display: flex; flex-direction: column; gap: 0; padding: 2.5rem 1.3rem 1.2rem; border: 1px solid #e9edf3; border-radius: 22px; background: #fff; box-shadow: 0 3px 5px #1d355b02, 0 12px 26px #1d355b04; transition: transform 300ms var(--inicio-curva), box-shadow 300ms; }
.pagina-inicio .tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.pagina-inicio .tarjeta:has(.tarjeta-imagen) .tarjeta-imagen { display: grid; place-items: center; height: 185px; width: 100%; margin: 0 0 1.5rem; border-radius: 12px; background: #fafbfd; overflow: hidden; }
.pagina-inicio .tarjeta-imagen .miniatura { width: 88%; height: 88%; object-fit: contain; mix-blend-mode: multiply; }
.pagina-inicio .tarjeta-cuerpo { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pagina-inicio .tarjeta-titulo { min-height: 2.8em; font-size: .98rem; font-weight: 550; line-height: 1.4; letter-spacing: -.025em; margin: 0 0 .4rem; }
.pagina-inicio .tarjeta-marca { order: -1; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #65748b; margin-bottom: .45rem; }
.pagina-inicio .tarjeta-meta { font-size: .7rem; color: #65748b; margin-top: .3rem; }
.pagina-inicio .tarjeta-precio { color: #176841; font-size: 1.3rem; letter-spacing: -.035em; font-weight: 600; margin-top: .7rem; }
.pagina-inicio .tarjeta-precio .precio-desde { color: #65748b; font-size: .7rem; }
.pagina-inicio .tarjeta-specs { display: none; }
.pagina-inicio .tarjeta-diferencia { color: #527862; background: #f2f8f4; border: 0; border-radius: 6px; padding: .3rem .5rem; font-size: .7rem; margin: .65rem 0; align-self: start; }
.pagina-inicio .tarjeta-boton { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-top: auto; padding: .7rem 0 0; border: 0; border-top: 1px solid #eef1f6; border-radius: 0; background: transparent; color: #56729c; box-shadow: none; font-size: .7rem; font-weight: 500; }
.pagina-inicio .tarjeta:hover .tarjeta-boton { background: transparent; color: var(--azul); }
.pagina-inicio .tarjeta .etiqueta-nuevo { background: #f3f6fb; color: #5e6b81; border: 0; font-size: .7rem; }
.pagina-inicio .tarjeta-comparar { top: .7rem; right: .8rem; bottom: auto; }
.pagina-inicio .tarjeta-comparar-boton { opacity: 1; font-size: .7rem; min-height: 32px; color: #5b6c86; border-color: #e3eaf5; background: #fff; border-radius: 100px; }
.pagina-inicio .tarjeta-comparar-boton.activo { color: #fff; background: var(--azul); border-color: var(--azul); }
.inicio-nota { font-size: .7rem; color: #65748b; text-align: center; margin: 1.7rem auto 0; max-width: 80ch; }
.pagina-inicio .grilla-novedades { gap: 1.1rem; grid-auto-columns: minmax(240px, 24%); padding-block: .3rem 1.4rem; }
.pagina-inicio .carrusel-flecha { border: 1px solid #dce4ef; box-shadow: var(--sombra); color: #53709c; background: #fff; }

/* Un bloque de contraste que explica el producto sin simular métricas. */
.pagina-inicio .guias-grilla { grid-template-columns: 1.3fr 1fr 1fr; gap: 1.2rem; }
.pagina-inicio .guia-tarjeta { padding: 2.2rem; border: 1px solid #e7ecf4; background: #f5f7fb; border-radius: 22px; }
.pagina-inicio .guia-principal { background: #eaf0fb; border-color: #e1e9f8; color: #1f3455; }
.pagina-inicio .guia-numero { font-size: 3.5rem; color: #7c8899; font-weight: 400; margin-bottom: 2.5rem; }
.pagina-inicio .guia-tarjeta .directorio-etiqueta { color: #5e6c81; font-size: .7rem; letter-spacing: .12em; }
.pagina-inicio .guia-tarjeta h3 { font-size: 1.45rem; font-weight: 500; line-height: 1.25; letter-spacing: -.04em; }
.pagina-inicio .guia-tarjeta p { color: #606c7d; font-size: .8rem; }
.pagina-inicio .guia-enlace { color: #486793; font-size: .7rem; }
.inicio-final { position: relative; text-align: center; padding: 7rem 1rem 5rem; margin-top: 5rem; border-top: 1px solid #edf1f7; background: radial-gradient(ellipse at 50% 100%, #e9f0fd70, transparent 65%); }
.inicio-final h2 { font-size: clamp(3rem, 5.6vw, 5rem); font-weight: 550; line-height: 1.05; letter-spacing: -.06em; margin: 0 0 2rem; }
.inicio-final h2 span { color: var(--azul); }
.inicio-final p { color: #8a96a8; font-size: .72rem; margin-top: 1.5rem; }
.pagina-inicio footer { border-color: #edf1f7; background: #fbfcfe; color: #636c7b; }

/* Movimiento breve, sin ocultar contenido mientras carga. */
@media (prefers-reduced-motion: no-preference) {
  .portada-intro { animation: inicio-entrada 700ms var(--inicio-curva); }
  .portada-ejemplo:not([hidden]) .ejemplo-imagen { animation: inicio-producto 650ms var(--inicio-curva); }
  .pagina-inicio .inicio-boton { transition: transform 220ms var(--inicio-curva), background 180ms; }
  .pagina-inicio .inicio-boton:hover { transform: translateY(-2px); }
  @keyframes inicio-entrada { from { opacity: .5; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes inicio-producto { from { opacity: .5; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .pagina-inicio *, .pagina-inicio *::before, .pagina-inicio *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Tablet: la navegación y las grillas se recomponen, no se comprimen. */
@media (max-width: 75rem) {
  .portada h1 { font-size: 4rem; }
  .portada-principal { gap: 1.75rem; }
  .portada-beneficios { gap: .8rem; }
  .ejemplo-presentacion { padding: 1rem; }
  .inicio-marcas { gap: 2rem; }
  .inicio-marcas-logos { gap: 1.3rem; }
  .inicio-categorias-grilla { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
  .inicio-categoria { padding: 1rem; }
  .inicio-categoria-imagen { height: 125px; }
}
@media (max-width: 64rem) {
  .portada { padding-top: 2rem; }
  .portada h1 { font-size: clamp(2.9rem, 6vw, 3.7rem); }
  .portada-apoyo { font-size: .9rem; }
  .portada .buscador input { font-size: .87rem; min-height: 52px; }
  .portada .buscador button { min-width: 56px; min-height: 52px; padding: .8rem; }
  .portada .buscador-btn-texto { display: none; }
  .portada-principal { min-height: 590px; gap: 1.5rem; }
  .ejemplo-presentacion { flex-wrap: wrap; gap: .7rem; }
  .ejemplo-cta { text-align: left; }
  .ejemplo-cta > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; }
  .ejemplo-cta small { margin: 0 0 0 .5rem; }
  .ejemplo-categoria { right: 0; }
  .inicio-marcas { flex-direction: column; align-items: stretch; gap: 1.2rem; }
  .inicio-marcas-intro { display: flex; justify-content: space-between; align-items: center; }
  .inicio-marcas-intro p br { display: none; }
  .inicio-marcas-logos { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .inicio-categorias-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .inicio-categoria-imagen { height: 155px; }
  .pagina-inicio .grilla-diferencias { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .inicio-seccion { margin-top: 5rem; }
  .pagina-inicio .guias-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pagina-inicio .guia-principal { grid-column: 1 / -1; }
}
@media (max-width: 48rem) {
  .portada-principal { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: .5rem; }
  .portada-intro { padding: 1rem 0; }
  .portada h1 { font-size: clamp(3.2rem, 9vw, 4.75rem); }
  .portada-apoyo { max-width: 48ch; }
  .portada .buscador-btn-texto { display: inline; }
  .portada .buscador button { min-width: 106px; }
  .portada-beneficios { gap: 1rem; }
  .hero-selector { max-width: 520px; width: 100%; justify-self: center; margin: .5rem 0 0; padding-bottom: 1rem; }
  .ejemplo-escena { min-height: 340px; }
  .ejemplo-imagen { inset: calc(4% + 2rem) 8% 0 8%; }
  .ejemplo-categoria { right: 1rem; }
  .ejemplo-presentacion { flex-wrap: nowrap; }
  .ejemplo-cta { text-align: right; }
  .ejemplo-cta > span { display: block; }
  .ejemplo-cta small { margin: .4rem 0 0; }
  .portada-cierre { min-height: 60px; }
  .portada-cierre > span { font-size: .7rem; letter-spacing: .06em; }
  .inicio-categorias-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pagina-inicio .grilla-diferencias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pagina-inicio .tarjeta:has(.tarjeta-imagen) .tarjeta-imagen { height: 160px; }
  .inicio-marcas-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem 2.5rem; }
}
@media (max-width: 40rem) {
  .pagina-inicio main { padding-inline: 1.25rem; }
  .portada { padding-top: 1.3rem; }
  .portada h1 { font-size: clamp(2.5rem, 10.5vw, 3.7rem); letter-spacing: -.065em; }
  .portada-apoyo { font-size: .87rem; line-height: 1.75; margin: 1.25rem 0 1.4rem; }
  .portada .portada-buscador { border-radius: 18px; padding: .4rem; }
  .portada .buscador input { font-size: .9rem; padding-left: 2.2rem; min-height: 50px; }
  .portada .buscador-icono { left: .4rem; width: 19px; }
  .portada .buscador button { min-width: 50px; min-height: 50px; border-radius: 12px; }
  .portada .buscador-btn-texto { display: none; }
  .portada-atajos { gap: .15rem .6rem; margin-bottom: 1.1rem; font-size: .7rem; }
  .portada-beneficios { gap: .5rem .8rem; }
  .portada-beneficios > span { font-size: .7rem; }
  .portada-beneficios svg { width: 15px; height: 15px; }
  .ejemplo-escena { min-height: 295px; }
  .ejemplo-edicion { font-size: .7rem; }
  .ejemplo-presentacion { padding: 1rem; border-radius: 16px; gap: .5rem; }
  .ejemplo-presentacion h3 { font-size: .9rem; }
  .ejemplo-meta { font-size: .7rem; }
  .ejemplo-marca { font-size: .7rem; }
  .ejemplo-cta { min-width: 92px; }
  .ejemplo-cta strong { font-size: 1rem; }
  .hero-controles button { min-width: 44px; min-height: 44px; }
  .portada-cierre > span { display: none; }
  .portada-cierre { justify-content: center; }
  .inicio-marcas { margin-top: 1.25rem; padding-bottom: 1.5rem; }
  .inicio-marcas-intro { gap: 1rem; }
  .inicio-marcas-intro p { font-size: .7rem; }
  .inicio-marcas-intro p br { display: initial; }
  .inicio-marcas-intro a { font-size: .7rem; gap: .4rem; }
  .inicio-marcas-logos { gap: .6rem 1.4rem; }
  .inicio-marcas-logos img { height: 24px; }
  .inicio-seccion { margin-top: 3.75rem; }
  .inicio-seccion-cabecera { gap: 1rem; margin-bottom: 1.5rem; }
  .inicio-seccion-cabecera h2 { font-size: 2.1rem; }
  .inicio-seccion-cabecera p { font-size: .77rem; }
  .portada-etiqueta { font-size: .7rem; margin-bottom: .9rem; }
  .inicio-enlace { font-size: .7rem; }
  .inicio-categorias-grilla { gap: .7rem; }
  .inicio-categoria { border-radius: 18px; padding: .9rem; }
  .inicio-categoria-imagen { height: 125px; margin-bottom: .6rem; }
  .inicio-categoria-nombre { font-size: .79rem; }
  .inicio-categoria-cantidad { font-size: .7rem; }
  .pagina-inicio .grilla-diferencias { gap: .75rem; }
  /* En el celular, 4 de las 8: con dos columnas son dos filas, y la
     prueba se entiende igual sin ocupar dos pantallas (2026-10-13). */
  .pagina-inicio .grilla-diferencias > :nth-child(n+5) { display: none; }
  .pagina-inicio .tarjeta { display: flex; flex-direction: column; padding: 2.5rem .85rem .85rem; border-radius: 18px; }
  .pagina-inicio .tarjeta:has(.tarjeta-imagen) { display: flex; }
  .pagina-inicio .tarjeta:has(.tarjeta-imagen) .tarjeta-imagen { height: 125px; width: 100%; margin-bottom: 1rem; }
  .pagina-inicio .tarjeta-titulo { font-size: .81rem; min-height: 4.2em; }
  .pagina-inicio .tarjeta-marca { font-size: .7rem; }
  .pagina-inicio .tarjeta-meta { font-size: .7rem; }
  .pagina-inicio .tarjeta-precio { font-size: 1.1rem; }
  .pagina-inicio .tarjeta-diferencia { padding: .25rem .3rem; font-size: .7rem; }
  .pagina-inicio .tarjeta-comparar { top: .55rem; right: .6rem; }
  .pagina-inicio .tarjeta-comparar-boton { font-size: .7rem; }
  .pagina-inicio .tarjeta:has(.tarjeta-imagen) .tarjeta-boton { display: flex; padding-top: .6rem; font-size: .7rem; }
  .pagina-inicio .grilla-novedades { grid-auto-columns: 68%; }
  .inicio-nota { font-size: .7rem; }
  .pagina-inicio .guias-grilla { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .pagina-inicio .guia-tarjeta { padding: 1.75rem; }
  .pagina-inicio .guia-numero { margin-bottom: 1.5rem; }
  .inicio-final { padding: 4rem .5rem 2rem; margin-top: 3.5rem; }
  .inicio-final h2 { font-size: 3rem; }
  .inicio-final p { font-size: .7rem; }
}

/* Fila de cifras bajo el buscador (2026-10-12): lo que da confianza
   —cuántas tiendas, cuántos productos, sin registro— va arriba, no al pie. */
/* Con aire arriba y abajo (operador, 2026-10-24): cifras y beneficios
   pegados al buscador y al cierre se leían apretados. Sin «sin registro»,
   que también lo pidió sacar: nadie llega pensando que hay que registrarse. */
.portada-cifras { margin: 1.4rem 0 .9rem; color: var(--texto-suave); font-size: .9rem; line-height: 1.5; }
.portada-beneficios { margin-bottom: 2.4rem; }
.portada-cifras strong { color: var(--texto); font-weight: 600; }