/* ============================================================
   L&S Liquidations — hoja de estilos principal
   Sistema de diseño de marca: azul del logo + teal + negro.
   Mobile-first, mucho aire, sombras suaves, bordes redondeados.
   ============================================================ */

:root {
  --brand: #2b8fc9;
  --brand-600: #1f77ad;
  --brand-700: #175f8c;
  --brand-900: #0e3f5f;
  --teal: #7fb0b5;
  --teal-600: #5b9299;
  --ink: #10222e;
  --muted: #5b6b76;
  --line: #e6ecf0;
  --bg: #ffffff;
  --bg-soft: #f4f8fb;
  --offer: #e0483f;
  --ok: #2f9e58;
  --gray: #8a97a0;
  --gold: #f0a530;

  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 10px 30px rgba(16, 34, 46, .08);
  --shadow-lg: 0 24px 60px rgba(16, 34, 46, .16);
  --shadow-sm: 0 4px 14px rgba(16, 34, 46, .07);
  --maxw: 1200px;
  --header-h: 94px;   /* alto del header: acompaña al logo de 66px (1.5×) */
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
/* Los enlaces del menú apuntan a secciones: con el header pegajoso (más alto
   desde que el logo es 1.5×) hay que dejarles ese hueco al saltar. */
section[id], [id="top"] { scroll-margin-top: calc(var(--header-h) + 8px); }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); color: var(--ink);
  background: var(--bg); line-height: 1.6; font-size: 16px;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .4em; font-weight: 700; letter-spacing: -.01em; }
h2.section-title { font-size: clamp(1.6rem, 3.5vw, 2.4rem); text-align: center; }
p { margin: 0 0 1rem; }
.wrap { width: min(100% - 2.4rem, var(--maxw)); margin-inline: auto; }
section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.eyebrow {
  display: inline-block; color: var(--brand-600); font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; margin-bottom: .6rem;
}
.section-head { text-align: center; max-width: 640px; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.section-head p { color: var(--muted); font-size: 1.05rem; }
.center { text-align: center; }
.icon { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: -.18em; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem; cursor: pointer;
  font: inherit; font-weight: 600; border: 0; border-radius: 999px;
  padding: .85rem 1.5rem; transition: transform .15s, box-shadow .2s, background .2s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 8px 22px rgba(43,143,201,.35); }
.btn-primary:hover { background: var(--brand-600); box-shadow: 0 12px 28px rgba(43,143,201,.42); transform: translateY(-2px); }
.btn-ghost { background: #fff; color: var(--brand-700); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn-wa { background: #25d366; color: #fff; box-shadow: 0 8px 22px rgba(37,211,102,.35); }
.btn-wa:hover { background: #1fb457; transform: translateY(-2px); }
.btn-lg { padding: 1rem 1.9rem; font-size: 1.05rem; }

/* ---------- Barra superior ---------- */
.topbar {
  background: linear-gradient(90deg, var(--brand-700), var(--brand-900));
  color: #eaf4fb; font-size: .82rem; font-weight: 500;
}
.topbar .wrap { display: flex; gap: 1.2rem; justify-content: center; align-items: center;
  padding: .5rem 0; flex-wrap: wrap; text-align: center; }
.topbar span { display: inline-flex; align-items: center; gap: .4rem; }
.topbar .icon { width: 1rem; height: 1rem; opacity: .9; }
.topbar a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
  transition: box-shadow .2s;
}
.site-header.scrolled { box-shadow: var(--shadow-sm); }
.header-inner { display: flex; align-items: center; gap: 1rem; height: var(--header-h); }
.brand { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
/* Logo 1.5× (44px -> 66px) a petición del cliente; la altura del header
   sube en la misma proporción para que siga centrado y con aire. */
.brand img { height: 66px; width: auto; }
.nav { display: none; gap: .3rem; margin-left: .5rem; }
.nav a { padding: .5rem .8rem; border-radius: 10px; font-weight: 600; font-size: .95rem; color: var(--ink); white-space: nowrap; transition: background .15s, color .15s; }
.nav a:hover { background: var(--bg-soft); color: var(--brand-600); }
.header-actions { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.search {
  display: none; align-items: center; gap: .5rem; background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: .5rem .9rem; min-width: 210px;
}
.search input { border: 0; background: transparent; font: inherit; width: 100%; outline: none; color: var(--ink); }
.search .icon { color: var(--muted); flex-shrink: 0; }
.header-phone { display: none; }
.menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line);
  background: #fff; cursor: pointer; color: var(--ink);
}
.menu-toggle .icon { width: 1.5em; height: 1.5em; }

/* Menú móvil desplegable */
/* El offset de arriba NO puede ser el --header-h fijo: la barra de
   anuncios (.topbar) encima del header cambia de alto según el idioma y
   el ancho de pantalla (en móviles angostos su texto pasa a 2 líneas), así
   que el header real puede terminar más abajo de lo que --header-h supone.
   Con un offset fijo, el panel del menú arrancaba detrás de la parte baja
   del header (la franja del logo quedaba tapada por el propio menú al
   abrirlo). app.js mide el borde real del header al abrir/al cambiar de
   tamaño y fija --mnav-top; --header-h queda solo como respaldo por si
   JS aún no corrió. */
.mobile-nav {
  position: fixed; inset: var(--mnav-top, var(--header-h)) 0 0 0; background: rgba(255,255,255,.98);
  backdrop-filter: blur(8px); z-index: 55; transform: translateX(100%);
  transition: transform .25s ease; padding: 1.5rem; overflow-y: auto;
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav a { display: block; padding: 1rem .5rem; font-size: 1.15rem; font-weight: 600;
  border-bottom: 1px solid var(--line); }
.mobile-nav .search { display: flex; margin-bottom: 1rem; width: 100%; }
.mobile-nav .btn { width: 100%; justify-content: center; margin-top: 1.2rem; }
/* Enlace al panel /adminedit: separado de los enlaces de la tienda y más
   discreto —es para el dueño, no un enlace de compra— pero sigue a un
   toque de distancia, sin escribir la URL. El selector con ".mobile-nav"
   delante (mismo patrón que ".mobile-nav .btn") es necesario para pesar
   más que ".mobile-nav a" y así quitarle el borde/tamaño de los demás. */
.mobile-nav .mobile-nav-admin {
  display: flex; align-items: center; gap: .5rem; margin-top: 1.4rem;
  padding: .6rem .5rem; font-size: .82rem; font-weight: 600;
  color: var(--muted); border: 0;
}
.mobile-nav-admin .icon { width: 1.1em; height: 1.1em; }
.mobile-nav-admin:hover { color: var(--brand-700); }

/* ---------- Hero ---------- */
.hero { position: relative; color: #fff; overflow: hidden; padding: 0; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(14,63,95,.92) 0%, rgba(23,95,140,.82) 42%, rgba(43,143,201,.42) 100%); }
.hero-inner { position: relative; z-index: 2; padding: clamp(3.5rem, 9vw, 7rem) 0; max-width: 640px; }
.hero h1 { font-size: clamp(2rem, 5.5vw, 3.4rem); }
.hero h1 .hl { color: #bfe3f6; }
.hero p { font-size: clamp(1rem, 2.4vw, 1.2rem); color: #e5f1f9; max-width: 34rem; }
.hero-cta { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.6rem; }
.hero-trust { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-top: 2.2rem; }
.hero-trust div { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .92rem; }
.hero-trust .icon { color: #bfe3f6; }

/* ---------- Categorías ---------- */
.cat-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(2, 1fr); }
.cat-card {
  position: relative; border-radius: var(--radius); overflow: hidden; min-height: 190px;
  display: flex; flex-direction: column; justify-content: flex-end; color: #fff;
  box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s;
  background: linear-gradient(135deg, var(--brand-600), var(--teal-600)); cursor: pointer;
  border: 0; text-align: left; font: inherit; padding: 0;
}
.cat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.cat-card .cat-img { position: absolute; inset: 0; }
.cat-card .cat-img img { width: 100%; height: 100%; object-fit: cover; }
.cat-card::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,34,46,0) 30%, rgba(14,34,46,.82) 100%); }
.cat-card .cat-body { position: relative; z-index: 2; padding: 1rem 1.1rem 1.15rem; width: 100%; }
.cat-icon { position: absolute; top: 1rem; left: 1rem; z-index: 2;
  width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,.9);
  display: flex; align-items: center; justify-content: center; color: var(--brand-700);
  box-shadow: var(--shadow-sm); }
.cat-icon .icon { width: 1.6em; height: 1.6em; }
.cat-card h3 { font-size: 1.12rem; margin: 0 0 .15rem; }
.cat-card .cat-nota { font-size: .82rem; opacity: .9; margin: 0 0 .55rem; line-height: 1.35; }
.cat-meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.cat-desde { font-weight: 700; font-size: .95rem; }
.cat-desde small { font-weight: 500; opacity: .85; font-size: .72rem; display: block; }

/* Insignias de estado */
.badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700;
  padding: .28rem .6rem; border-radius: 999px; letter-spacing: .02em; }
.badge.disponible { background: rgba(47,158,88,.18); color: #d6ffe4; border: 1px solid rgba(47,158,88,.4); }
.badge.oferta { background: var(--offer); color: #fff; }
.badge.agotado { background: rgba(255,255,255,.2); color: #fff; border: 1px solid rgba(255,255,255,.35); }
.card-badge.disponible { background: #e7f6ec; color: var(--ok); border: 1px solid #c5ecd2; }
.card-badge.agotado { background: #eef1f3; color: var(--gray); border: 1px solid #dde3e7; }

/* ---------- Ventajas ---------- */
.ventajas { background: var(--bg-soft); }
.ventaja-grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
.ventaja {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem 1.4rem; text-align: center; box-shadow: var(--shadow-sm);
  transition: transform .2s;
}
.ventaja:hover { transform: translateY(-4px); }
.ventaja .v-ic { width: 58px; height: 58px; border-radius: 16px; margin: 0 auto .9rem;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand), var(--teal-600)); color: #fff; }
.ventaja .v-ic .icon { width: 1.8em; height: 1.8em; stroke-width: 1.7; }
.ventaja h3 { font-size: 1.08rem; margin-bottom: .25rem; }
.ventaja p { color: var(--muted); font-size: .92rem; margin: 0; }

/* ---------- Ofertas / Destacados ---------- */
.card-grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
.prod-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s;
  display: flex; flex-direction: column;
}
.prod-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.prod-media { position: relative; aspect-ratio: 4 / 3; background: var(--bg-soft); }
.prod-media img { width: 100%; height: 100%; object-fit: cover; }
.prod-tags { position: absolute; top: .7rem; left: .7rem; display: flex; gap: .4rem; flex-wrap: wrap; }
.tag { font-size: .7rem; font-weight: 700; padding: .28rem .55rem; border-radius: 8px; background: rgba(16,34,46,.72); color: #fff; }
.tag.oferta { background: var(--offer); }
.tag.cond { background: rgba(255,255,255,.92); color: var(--ink); }
.prod-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.prod-body h3 { font-size: 1.05rem; margin-bottom: .5rem; }
/* Tamaños disponibles (tallas o pulgadas) en la tarjeta del producto. */
.prod-sizes { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 600;
  color: var(--muted); margin-bottom: .4rem; }
.prod-sizes .icon { color: var(--brand); flex: none; }
.prod-price { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .35rem; }
.prod-price .now { font-size: 1.4rem; font-weight: 800; color: var(--brand-700); }
/* "From" delante del precio cuando el producto se vende por rangos de pulgadas. */
.prod-price .from { font-size: .72rem; font-weight: 600; color: var(--muted); align-self: center; }
.prod-price .was { font-size: .95rem; color: var(--gray); text-decoration: line-through; }
.prod-price .off { font-size: .72rem; font-weight: 700; color: var(--offer); background: #fdeceb; padding: .1rem .45rem; border-radius: 6px; }
.card-badge { align-self: flex-start; margin-bottom: .8rem; }
.prod-body .btn { margin-top: auto; justify-content: center; }
.empty-note { text-align: center; color: var(--muted); grid-column: 1 / -1; padding: 2rem; }

/* ---------- Franja premio / nosotros ---------- */
.award { background: linear-gradient(120deg, var(--brand-900), var(--brand-700)); color: #fff; }
.award .wrap { display: grid; gap: 2rem; align-items: center; }
.award .a-badge { display: inline-flex; align-items: center; gap: .6rem; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: .5rem 1rem; font-weight: 700; font-size: .85rem; margin-bottom: 1rem; }
.award .a-badge .icon { color: var(--gold); }
.award h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); }
.award p { color: #dbeaf4; }
.award .stat-row { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 1.4rem; }
.award .stat b { font-size: 1.9rem; display: block; color: #bfe3f6; }
.award .stat span { font-size: .85rem; color: #cfe3ef; }

/* ---------- Testimonios ---------- */
.testi-grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
.testi { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem; box-shadow: var(--shadow-sm); }
.testi .stars { color: var(--gold); letter-spacing: 2px; margin-bottom: .7rem; }
.testi p { font-style: italic; color: #37474f; }
.testi .who { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; }
.testi .avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--teal-600));
  color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; }
.testi .who b { display: block; font-size: .95rem; }
.testi .who span { font-size: .82rem; color: var(--muted); }

/* ---------- Galería (carrusel de fotos de producto) ----------
   Una foto por producto (armada por JS en renderGallery, app.js), no
   fotos fijas del showroom. Se desliza con el dedo/mouse o con las
   flechas; el ancho de cada foto se eligió a propósito para que la
   siguiente asome cortada en el borde (se nota que hay más para
   deslizar). Gira infinito: JS duplica algunas fotos en ambas puntas
   de la tira y, cuando el usuario termina de deslizar dentro de esa
   zona duplicada, salta sin animación al tramo real equivalente —
   así nunca se “acaba”, en cualquier dirección. */
.gallery { background: var(--bg-soft); }
.gal-carousel { position: relative; display: flex; align-items: center; gap: .6rem; }
.gal-track {
  display: flex; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: .3rem .1rem;
}
.gal-track::-webkit-scrollbar { display: none; }
.gal-slide {
  flex: 0 0 auto; width: 220px; scroll-snap-align: start; border-radius: var(--radius-sm);
  overflow: hidden; box-shadow: var(--shadow-sm); background: var(--bg-soft); cursor: pointer;
}
.gal-slide img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; transition: transform .4s; display: block; }
.gal-slide:hover img { transform: scale(1.07); }
.gal-arrow {
  flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--brand-700); cursor: pointer; display: flex; align-items: center;
  justify-content: center; box-shadow: var(--shadow-sm);
}
.gal-arrow:hover { background: var(--bg-soft); border-color: var(--brand); }
.gal-arrow .icon { width: 1.3em; height: 1.3em; }
.gal-prev .icon { transform: scaleX(-1); }
/* En pantallas angostas las flechas quitan ancho útil a las fotos: se
   deja solo el deslizado táctil, como en cualquier carrusel de app. */
@media (max-width: 640px) {
  .gal-arrow { display: none; }
  .gal-slide { width: 46vw; }
}

/* ---------- Ubicación / Contacto ---------- */
.contacto .wrap { display: grid; gap: 1.6rem; grid-template-columns: 1fr; }
.map-box { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); min-height: 320px; border: 1px solid var(--line); position: relative; }
.map-box iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }
.map-load { width: 100%; min-height: 320px; border: 0; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .5rem; text-align: center; padding: 2rem 1.4rem; font: inherit;
  color: var(--ink); background:
    radial-gradient(circle at 30% 30%, rgba(43,143,201,.10), transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(127,176,181,.14), transparent 55%),
    repeating-linear-gradient(0deg, var(--bg-soft) 0 24px, #eef4f8 24px 25px),
    repeating-linear-gradient(90deg, var(--bg-soft) 0 24px, #eef4f8 24px 25px);
  transition: background-color .2s; }
.map-load:hover .map-cta { background: var(--brand-600); }
.map-load .map-pin { width: 56px; height: 56px; border-radius: 50%; background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); }
.map-load .map-pin .icon { width: 1.8em; height: 1.8em; }
.map-load b { font-size: 1.02rem; }
.map-load .map-cta { background: var(--brand); color: #fff; font-weight: 700; padding: .55rem 1.2rem;
  border-radius: 999px; margin-top: .3rem; transition: background .2s; }
.map-load .map-note { color: var(--muted); font-size: .78rem; max-width: 22rem; }
.info-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.8rem; box-shadow: var(--shadow-sm); }
.open-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  padding: .18rem .5rem; border-radius: 999px; vertical-align: middle; margin-left: .3rem; text-transform: uppercase; }
.open-badge.on { background: #e7f6ec; color: var(--ok); border: 1px solid #c5ecd2; }
.open-badge.off { background: #eef1f3; color: var(--gray); border: 1px solid #dde3e7; }
.open-badge.on::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); display: inline-block; }
.info-card h3 { font-size: 1.3rem; }
.info-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.info-list li { display: flex; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.info-list li:last-child { border-bottom: 0; }
.info-list .icon { color: var(--brand); flex-shrink: 0; margin-top: .15rem; }
.info-list b { display: block; }
.info-list span { color: var(--muted); font-size: .92rem; }
.info-card .btn { margin-top: 1.2rem; width: 100%; justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #c3ced5; padding: clamp(3rem,6vw,4rem) 0 1.5rem; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 1rem; }
.site-footer a { color: #c3ced5; }
.site-footer a:hover { color: #fff; }
.footer-brand img { height: 40px; width: auto; margin-bottom: .9rem; background: #fff;
  padding: .5rem .7rem; border-radius: 10px; }
.footer-brand p { font-size: .9rem; }
.foot-list { list-style: none; padding: 0; margin: 0; }
.foot-list li { padding: .35rem 0; font-size: .92rem; }
.foot-list .icon { color: var(--brand); width: 1.05em; height: 1.05em; }
.socials { display: flex; gap: .6rem; margin-top: .8rem; }
.socials a { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center; transition: background .2s; }
.socials a:hover { background: var(--brand); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.5rem; padding-top: 1.4rem;
  text-align: center; font-size: .82rem; color: #8ea0aa; }

/* ---------- WhatsApp flotante ---------- */
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 70; width: 58px; height: 58px;
  border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(37,211,102,.5); animation: waPulse 2.4s infinite; }
.wa-float .icon { width: 2em; height: 2em; stroke-width: 0; fill: currentColor; }
@keyframes waPulse { 0%,100% { box-shadow: 0 10px 26px rgba(37,211,102,.5);} 50% { box-shadow: 0 10px 26px rgba(37,211,102,.5), 0 0 0 12px rgba(37,211,102,0);} }

/* ---------- Popup "cara de oferta" ---------- */
.offer-modal { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center;
  padding: 1.2rem; background: rgba(10,30,44,.6); backdrop-filter: blur(3px); }
.offer-modal.open { display: flex; animation: fadeIn .25s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.offer-card { background: #fff; border-radius: 22px; max-width: 420px; width: 100%; overflow: hidden;
  box-shadow: var(--shadow-lg); position: relative; animation: popIn .3s cubic-bezier(.2,.9,.3,1.2); }
@keyframes popIn { from { transform: translateY(20px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.offer-card .ribbon { background: var(--offer); color: #fff; text-align: center; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; padding: .55rem; }
.offer-card .o-media { aspect-ratio: 16/10; background: var(--bg-soft); }
.offer-card .o-media img { width: 100%; height: 100%; object-fit: cover; }
.offer-card .o-body { padding: 1.4rem 1.5rem 1.6rem; text-align: center; }
.offer-card h3 { font-size: 1.3rem; margin-bottom: .3rem; }
.offer-card .o-price { display: flex; gap: .6rem; align-items: baseline; justify-content: center; margin: .5rem 0 1rem; }
.offer-card .o-price .now { font-size: 2rem; font-weight: 800; color: var(--brand-700); }
.offer-card .o-price .was { text-decoration: line-through; color: var(--gray); font-size: 1.1rem; }
.offer-card .btn { width: 100%; justify-content: center; }
.offer-close { position: absolute; top: .6rem; right: .6rem; z-index: 3; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.92); border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--ink); box-shadow: var(--shadow-sm); }
.offer-modal .muted-link { display: block; margin-top: .8rem; color: var(--muted); font-size: .82rem; background: none; border: 0; cursor: pointer; width: 100%; }

/* ============================================================
   Responsive
   ============================================================ */
@media (min-width: 560px) {
  .ventaja-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .testi-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .ventaja-grid { grid-template-columns: repeat(3, 1fr); }
  .header-phone { display: inline-flex; }
  .contacto .wrap { grid-template-columns: 1.2fr 1fr; }
  .award .wrap { grid-template-columns: 1.3fr 1fr; }
}
@media (min-width: 992px) {
  .nav { display: flex; }
  /* El buscador entra a partir de 1100px: con el logo a 66px (1.5×), menú,
     idioma y "Call" no caben todos entre 992 y 1100 y la barra desbordaba. */
  .menu-toggle { display: none; }
  .mobile-nav { display: none; }
  .cat-grid { grid-template-columns: repeat(4, 1fr); }
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .ventaja-grid { grid-template-columns: repeat(5, 1fr); }
  .testi-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
  .wa-float { width: 64px; height: 64px; right: 26px; bottom: 26px; }
}
/* ============================================================
   Añadidos: tarjetas premium, marcas, pasos, financiamiento,
   carrusel del popup y página de detalle de producto.
   ============================================================ */

/* Tarjetas de producto más ricas */
.prod-media { position: relative; display: block; }
.prod-see { position: absolute; left: 0; right: 0; bottom: 0; text-align: center;
  background: linear-gradient(0deg, rgba(16,34,46,.82), transparent); color: #fff;
  font-weight: 700; font-size: .82rem; padding: 1.6rem .8rem .6rem; opacity: 0; transition: opacity .2s; }
.prod-card:hover .prod-see { opacity: 1; }
.prod-rating { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.prod-rating .stars { color: var(--gold); letter-spacing: 1px; font-size: .95rem; }
.prod-rating .warranty { font-size: .72rem; color: var(--ok); font-weight: 700; display: inline-flex; align-items: center; gap: .25rem; }
.prod-body h3 a { color: inherit; }
.prod-body h3 a:hover { color: var(--brand-600); }

/* Marcas */
.brands { margin-top: 2.6rem; text-align: center; border-top: 1px solid var(--line); padding-top: 2rem; }
.brands-label { display: block; color: var(--muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1rem; }
.brand-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.6rem; }
.brand-pills span { font-weight: 800; font-size: 1.15rem; color: var(--brand-900); opacity: .5; letter-spacing: -.02em; }

/* Cómo funciona */
.howto { background: var(--bg-soft); }
.steps { display: grid; gap: 1.6rem; grid-template-columns: 1fr; }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.9rem 1.4rem 1.5rem; position: relative; box-shadow: var(--shadow-sm); }
.step-n { position: absolute; top: -18px; left: 1.4rem; width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, var(--brand), var(--teal-600)); color: #fff; font-weight: 800; font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); }
.step h3 { margin-top: .8rem; }
.step p { color: var(--muted); margin: 0; }

/* Financiamiento */
.finance { background: linear-gradient(120deg, var(--brand-700), var(--brand-900)); color: #fff; }
.finance-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap; }
.finance h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: .2rem 0; }
.finance p { color: #dbeaf4; max-width: 40rem; margin: 0; }

/* Popup: carrusel */
.offer-track { display: flex; transition: transform .4s ease; }
.offer-slide { min-width: 100%; }
.offer-slide .o-desc { color: var(--muted); font-size: .92rem; margin: .1rem 0 .7rem; }
.offer-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: .3rem 0 .2rem; }
.offer-arrow { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 1.4rem; line-height: 1; color: var(--brand-700); }
.offer-arrow:hover { background: var(--bg-soft); }
.offer-dots { display: flex; gap: .4rem; }
.offer-dot { width: 9px; height: 9px; border-radius: 50%; border: 0; background: var(--line); cursor: pointer; padding: 0; }
.offer-dot.on { background: var(--brand); }
.offer-modal .muted-link { padding: .2rem 0 1.1rem; }

/* Página de detalle de producto */
.producto-wrap { padding: 1.4rem 1.2rem 3.5rem; }
.crumbs { display: inline-block; margin: .4rem 0 1.2rem; color: var(--muted); font-weight: 600; }
.crumbs:hover { color: var(--brand-600); }
.prod-detail { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.pd-main { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--bg-soft); aspect-ratio: 4/3; }
.pd-main img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumbs { display: flex; gap: .6rem; margin-top: .7rem; }
.pd-thumb { width: 76px; height: 60px; border-radius: 10px; overflow: hidden; border: 2px solid var(--line); padding: 0; cursor: pointer; background: none; }
.pd-thumb.on { border-color: var(--brand); }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-info h1 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); margin: .3rem 0 .5rem; }
.pd-desc { color: var(--muted); }
.pd-opts { margin: 1.1rem 0; }
.pd-opt-label { display: block; font-weight: 700; font-size: .85rem; margin-bottom: .5rem; }
.opt-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.opt { padding: .6rem 1.1rem; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font: inherit; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.opt:hover { border-color: var(--brand); }
.opt.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.pd-price { margin: 1.2rem 0; }
.pd-price .now { font-size: 2.3rem; font-weight: 800; color: var(--brand-700); }
.pd-price-note { display: block; color: var(--muted); font-size: .85rem; margin-top: .2rem; }
.pd-info .btn { width: 100%; justify-content: center; margin-bottom: .7rem; }
.pd-trust { display: flex; gap: 1.3rem; flex-wrap: wrap; margin-top: 1rem; color: var(--muted); font-weight: 600; font-size: .88rem; }
.pd-trust span { display: inline-flex; align-items: center; gap: .4rem; }
.pd-trust .icon { color: var(--brand); }

@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .prod-detail { grid-template-columns: 1.05fr 1fr; align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
}

/* ===== Language switch (EN | ES) =====================================
   English is the site's native language; ES applies a translation layer.
   ==================================================================== */
.lang-switch {
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--line); border-radius: 999px;
  background: #fff; padding: 2px; gap: 2px; flex: none;
}
.lang-switch button {
  font: inherit; font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  color: var(--brand-700); background: transparent; border: 0; cursor: pointer;
  padding: .34rem .62rem; border-radius: 999px; line-height: 1;
  transition: background .18s, color .18s;
}
.lang-switch button:hover { color: var(--brand); }
.lang-switch button.on { background: var(--brand); color: #fff; }
.lang-switch button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* In the mobile menu it becomes a full-width pair with the long labels. */
.lang-switch-mobile { display: flex; width: 100%; margin: .5rem 0; }
.lang-switch-mobile button { flex: 1; font-size: .9rem; padding: .6rem .5rem; }

/* On narrow screens the header switch hides — the mobile menu carries it. */
@media (max-width: 900px) { .site-header .lang-switch { display: none; } }

/* ===== Category cards: status badge fixed in the top-right corner =====
   (aligned across all cards regardless of note length). ================ */
.cat-card .cat-status {
  position: absolute; top: .85rem; right: .85rem; z-index: 3;
  box-shadow: 0 2px 8px rgba(10,30,45,.25);
}
.cat-card .cat-status.disponible { background: #1f9d57; color: #fff; border: 0; }
.cat-card .cat-status.oferta { background: var(--offer); color: #fff; border: 0; }
.cat-card .cat-status.agotado { background: rgba(20,34,44,.78); color: #fff; border: 0; }
.cat-card .cat-body h3 { margin-top: .1rem; }
.cat-meta { flex-wrap: wrap; }
.cat-go { font-size: .78rem; font-weight: 700; opacity: .92; letter-spacing: .01em; }

/* ===== Category page (categoria.html) ===== */
.categoria-wrap { padding: 1.4rem 0 3.5rem; }
.cat-hero {
  display: flex; align-items: center; gap: 1.2rem; margin: .2rem 0 1.6rem;
  padding: 1.5rem 1.6rem; border-radius: var(--radius); color: #fff;
  background: linear-gradient(135deg, var(--brand-600), var(--teal-600));
  box-shadow: var(--shadow-sm);
}
.cat-hero-icon {
  flex: none; width: 64px; height: 64px; border-radius: 16px; background: rgba(255,255,255,.92);
  display: flex; align-items: center; justify-content: center; color: var(--brand-700);
}
.cat-hero-icon .icon { width: 2em; height: 2em; }
.cat-hero .eyebrow { color: #cfe9f8; }
.cat-hero h1 { margin: .1rem 0; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.cat-hero-note { margin: .1rem 0 .3rem; color: #eaf5fb; }
.cat-hero-from { margin: .2rem 0 0; font-weight: 800; font-size: 1.15rem; }
.cat-hero-from small { font-weight: 500; opacity: .85; }
.cat-count { color: var(--muted); font-weight: 600; margin: 0 0 1rem; }
.cat-empty {
  text-align: center; padding: 3rem 1.5rem; border: 1.5px dashed var(--line);
  border-radius: var(--radius); background: var(--surface-2, #f6f9fb);
}
.cat-empty h2 { margin: 0 0 .4rem; }
.cat-empty p { color: var(--muted); max-width: 40ch; margin: 0 auto 1.3rem; }
.cat-more { margin-top: 2.6rem; border-top: 1px solid var(--line); padding-top: 1.4rem; }
.cat-more h2 { margin: 0 0 .9rem; }
.cat-more-links { display: flex; flex-wrap: wrap; gap: .6rem; }
.cat-more-links a {
  padding: .5rem .9rem; border-radius: 999px; border: 1.5px solid var(--line);
  color: var(--brand-700); font-weight: 700; font-size: .9rem; transition: border-color .18s, color .18s;
}
.cat-more-links a:hover { border-color: var(--brand); color: var(--brand); }

/* Product detail: placeholder when a product has no photo (extra gallery removed) */
.pd-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-weight: 600; font-size: .95rem; background: var(--bg-soft, #eef3f7); }

/* El buscador del header aparece a partir de 1100px (ver nota en el bloque
   de 992px): así el logo a 1.5× convive con el menú sin que nada desborde. */
@media (min-width: 1100px) { .search { display: flex; } }

/* ============================================================
   Lista de consulta ("carrito"): preguntar por VARIOS aparatos
   en un solo mensaje de WhatsApp. No cobra nada.
   ============================================================ */
.btn-block { width: 100%; justify-content: center; }
.btn-sm { padding: .45rem .85rem; font-size: .82rem; }

/* Fila de acciones de la tarjeta de producto */
.prod-cta { display: flex; gap: .5rem; margin-top: .2rem; flex-wrap: wrap; }
.prod-cta .btn { flex: 1 1 8rem; justify-content: center; padding-left: .7rem; padding-right: .7rem; }
.add-cart.added { background: #eaf6ee; color: var(--ok); border-color: #bfe2cb; }

/* Botón flotante */
.cart-fab { position: fixed; left: 20px; bottom: 20px; z-index: 60; width: 56px; height: 56px;
  border-radius: 50%; border: 0; cursor: pointer; background: var(--brand); color: #fff;
  box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center; }
.cart-fab[hidden] { display: none; }
.cart-fab:hover { background: var(--brand-600); }
.cart-fab .icon { width: 26px; height: 26px; }
.cart-fab.pop { animation: cartpop .3s ease; }
@keyframes cartpop { 0%{transform:scale(1)} 50%{transform:scale(1.18)} 100%{transform:scale(1)} }
.cart-count { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 999px; background: var(--offer); color: #fff; font-size: .75rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; }

/* Panel lateral */
.cart-drawer { position: fixed; inset: 0; z-index: 70; background: rgba(10,30,44,.5);
  opacity: 0; visibility: hidden; transition: opacity .2s; }
.cart-drawer.open { opacity: 1; visibility: visible; }
.cart-panel { position: absolute; top: 0; right: 0; height: 100%; width: min(420px, 92vw);
  background: #fff; display: flex; flex-direction: column; transform: translateX(100%);
  transition: transform .25s; box-shadow: -10px 0 30px rgba(10,30,44,.2); }
.cart-drawer.open .cart-panel { transform: translateX(0); }
.cart-head { display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--line); }
.cart-head h3 { margin: 0; font-size: 1.15rem; }
.cart-close { border: 0; background: none; font-size: 1.3rem; cursor: pointer; color: var(--muted); line-height: 1; }
.cart-body { flex: 1; overflow: auto; padding: .8rem 1.2rem; }
.cart-empty { color: var(--muted); text-align: center; padding: 2rem 0; }
.cart-item { display: grid; grid-template-columns: 60px 1fr auto; gap: .7rem; align-items: center;
  padding: .7rem 0; border-bottom: 1px solid var(--line); }
.ci-img { width: 60px; height: 60px; border-radius: 10px; overflow: hidden; background: var(--bg-soft); }
.ci-img img { width: 100%; height: 100%; object-fit: cover; }
.ci-main { min-width: 0; }
.ci-main b { display: block; font-size: .92rem; }
.ci-price { font-size: .8rem; color: var(--muted); }
.ci-qty { display: flex; align-items: center; gap: .4rem; margin-top: .35rem; flex-wrap: wrap; }
.ci-qty button { width: 28px; height: 28px; border-radius: 7px; border: 1.5px solid var(--line);
  background: #fff; cursor: pointer; font-weight: 700; color: var(--ink); }
.ci-del { border: 0 !important; background: none !important; color: var(--offer) !important;
  width: auto !important; font-size: .78rem; text-decoration: underline; margin-left: .3rem; }
.ci-total { font-weight: 700; white-space: nowrap; }
.cart-foot { border-top: 1px solid var(--line); padding: 1rem 1.2rem; display: grid; gap: .6rem; }
.cart-sub { display: flex; justify-content: space-between; font-size: 1.05rem; }
.cart-note { font-size: .78rem; color: var(--muted); margin: 0; }

/* ============================================================
   SEO local: áreas de servicio y preguntas frecuentes
   ============================================================ */
.areas { background: var(--bg-soft); }
.areas-grid { display: grid; gap: 1.8rem; grid-template-columns: 1fr; }
.areas-col h3 { font-size: 1.05rem; color: var(--brand-900); margin-bottom: .7rem; }
.area-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.area-list li { background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: .32rem .8rem; font-size: .84rem; color: var(--muted); font-weight: 500; }
.areas-note { text-align: center; margin: 1.8rem auto 0; max-width: 60ch; color: var(--muted); font-size: .92rem; }

.faq-list { display: grid; gap: .7rem; max-width: 820px; margin: 0 auto; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); padding: 0 1.1rem; }
.faq-item summary { cursor: pointer; font-weight: 600; padding: 1rem 0; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 1.4rem; font-weight: 400; color: var(--brand);
  line-height: 1; flex: none; }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { margin: 0 0 1rem; color: var(--muted); font-size: .95rem; }

@media (min-width: 768px) {
  .areas-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   Móviles estrechos (320–560px): que NADA se salga de la pantalla.
   Con el logo a 1.5× la barra superior necesita un poco de aire.
   ============================================================ */
@media (max-width: 560px) {
  .header-inner { gap: .6rem; }
  .header-actions { gap: .4rem; }
  .header-actions .btn { padding: .65rem 1rem; font-size: .95rem; }
  .info-card { padding: 1.3rem; }
  /* Los hijos de un grid no bajan de su "ancho mínimo" salvo que se les
     diga: sin esto la tarjeta de contacto se salía de la pantalla. */
  .contacto .wrap > *, .info-card, .map-box { min-width: 0; }
  /* Direcciones y textos largos parten de línea en vez de desbordar. */
  .info-list li > div { min-width: 0; overflow-wrap: anywhere; }
  .info-list li > div span { overflow-wrap: anywhere; }
  /* Categorías / Ofertas / Ventajas más compactas en móvil: el cliente
     pidió que estas tres secciones no obliguen a tanto scroll — que se
     vea "más de una cosa a la vez" en vez de tarjetas a todo lo ancho.
     .cat-grid ya es 2 columnas por regla base; aquí solo se achican
     ícono/insignia/tipografía para que quepan sin tocarse en una tarjeta
     de ~140-165px. .card-grid y .ventaja-grid pasan de 1 a 2 columnas. */
  .card-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .ventaja-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; }

  .cat-card { min-height: 132px; }
  .cat-icon { width: 32px; height: 32px; top: .55rem; left: .55rem; border-radius: 9px; }
  .cat-icon .icon { width: 1.15em; height: 1.15em; }
  .cat-card .cat-status { top: .55rem; right: .55rem; font-size: .62rem; padding: .2rem .48rem; }
  .cat-card .cat-body { padding: .7rem .75rem .8rem; }
  .cat-card h3 { font-size: .92rem; margin-bottom: .1rem; }
  /* La notita de una línea sobra en una tarjeta tan chica y es la que más
     empujaba el bloque de texto hacia arriba, hacia el ícono/insignia. */
  .cat-card .cat-nota { display: none; }
  .cat-desde { font-size: .82rem; }
  .cat-go { display: none; }

  /* Tarjetas de "Deals" a 2 columnas: precio y botones se acomodan en
     columna dentro de cada mitad en vez de forzarse en una fila. */
  .prod-body { padding: .75rem .8rem .9rem; }
  /* Estrellas + "Warranty" no caben una junto a otra en ~135px (320px de
     pantalla): que "Warranty" baje de línea en vez de salirse de la
     tarjeta (probado: se salía ~20px a la derecha). */
  .prod-rating { flex-wrap: wrap; row-gap: .2rem; }
  .prod-body h3 { font-size: .92rem; margin-bottom: .3rem; }
  .prod-price .now { font-size: 1.15rem; }
  /* "$899  $1,299  -31%" no cabe en una fila a ~150px: que baje de línea
     en vez de desbordar la tarjeta. */
  .prod-price { flex-wrap: wrap; row-gap: .1rem; }
  .prod-cta { flex-direction: column; align-items: stretch; gap: .5rem; }
  /* El cliente pidió los botones "View details"/"Add to list" un poco más
     chicos y menos redondeados en móvil (sin cambiar los colores): la
     forma píldora (999px) del resto del sitio se ve muy grande en una
     tarjeta angosta. ".prod-card .btn" también cubre el botón suelto
     "View details" de "You may also like" en la ficha de producto, para
     que las tarjetas se vean iguales en todos lados. Solo móvil; en
     escritorio no cambia nada. */
  .prod-card .btn { width: 100%; border-radius: 10px; padding: .68rem 1rem; font-size: .92rem; }

  /* "Shop with confidence" a 2 columnas: tarjetas más chicas y compactas. */
  .ventaja { padding: 1.1rem .9rem; }
  .ventaja .v-ic { width: 44px; height: 44px; margin-bottom: .6rem; }
  .ventaja h3 { font-size: .92rem; }
  .ventaja p { font-size: .82rem; }
}
@media (max-width: 430px) {
  /* El logo sigue siendo mayor que el original (44px), pero deja sitio
     al teléfono en pantallas muy estrechas. */
  .brand img { height: 56px; }
  /* El propio logo ya lleva a la portada: en móviles muy estrechos el
     botón "← Back" sobra y era justo lo que sacaba la barra de la pantalla. */
  .site-header .header-actions .btn-ghost { display: none; }
  .btn { padding: .8rem 1.15rem; }
  .prod-cta { gap: .4rem; }
  /* (el ancho 100% de los botones ya lo pone la regla de 560px arriba;
     acá solo se ajusta el espacio entre ellos, no flex-basis, porque a
     esta anchura .prod-cta ya está en columna — flex-basis:100% ahí
     competiría por el alto entre los dos botones en vez de por el ancho). */
}

/* ============================================================
   Pantallas muy grandes (TV y monitores 4K): el contenido no se
   queda en una columna diminuta en medio de la pantalla.
   ============================================================ */
@media (min-width: 1800px) {
  :root { --maxw: 1500px; }
  body { font-size: 17px; }
  .card-grid { grid-template-columns: repeat(4, 1fr); }
  .cat-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 2400px) {
  :root { --maxw: 1800px; }
  body { font-size: 18px; }
  .testi-grid { grid-template-columns: repeat(4, 1fr); }
}