/* base.css — JL Mercantil v3. TECH CANVAS pulido: navy + cyan + mascota, un solo elemento firma,
 * mucho aire, degradados SIEMPRE laterales sobre foto, cero valores hardcodeados fuera de :root. */

/* ============ TOKENS ============ */
:root{
  --azul-oscuro:#081547;
  --azul-oscuro-2:#0b1c5e;
  --azul-claro:#29C5F4;
  --crema:#F5F7FB;
  --blanco:#FFFFFF;
  --gris:#4D4D4D;
  --gris-claro:#8A8F9E;
  --negro:#1C1C1B;
  --naranja:#FF6A1A;
  --naranja-oscuro:#E4590E;
  --verde-exito:#1B9E5A;
  --rojo-error:#D9432B;

  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;

  --radio-sm:8px;
  --radio-md:14px;
  --radio-lg:20px;

  --sombra-sm:0 2px 8px rgba(8,21,71,.08);
  --sombra-md:0 8px 24px rgba(8,21,71,.14);
  --sombra-lg:0 20px 48px rgba(8,21,71,.20);

  --container:1280px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --transicion:220ms var(--ease-out);
}

/* ============ RESET ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);font-size:16px;line-height:1.6;color:var(--negro);
  background:var(--blanco);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
ul,ol{list-style:none}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.15;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5vw,3.4rem);font-weight:800}
h2{font-size:clamp(1.6rem,3.5vw,2.3rem)}
h3{font-size:1.15rem}
p{color:var(--gris)}
.container{max-width:var(--container);margin:0 auto;padding:0 1.25rem}
@media(min-width:900px){.container{padding:0 2rem}}
.oculto{display:none!important}
@media(max-width:899px){.oculto-movil{display:none!important}}
@media(min-width:900px){.oculto-desktop{display:none!important}}
.text-muted{color:var(--gris-claro)}
.center{text-align:center}
.eyebrow{display:flex;align-items:center;gap:.6rem;font-size:.8rem;font-weight:600;color:var(--azul-claro);text-transform:uppercase;letter-spacing:.06em;margin-bottom:1rem}
.eyebrow::before{content:'';width:28px;height:1px;background:var(--azul-claro)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* Foco de teclado visible en TODO — no opcional */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--azul-claro);outline-offset:2px;border-radius:4px;
}

.skip-link{position:absolute;left:-999px;top:0;background:var(--azul-oscuro);color:#fff;padding:.75rem 1.25rem;z-index:200;border-radius:0 0 var(--radio-sm) 0}
.skip-link:focus{left:0}

/* ============ BOTONES (todos los estados) ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-display);font-weight:600;font-size:.95rem;
  padding:.85rem 1.6rem;border-radius:var(--radio-sm);border:1.5px solid transparent;
  transition:background var(--transicion),border-color var(--transicion),transform var(--transicion),box-shadow var(--transicion),opacity var(--transicion);
  white-space:nowrap;
}
.btn:active{transform:scale(.97)}
.btn-block{width:100%}
.btn[disabled],.btn.cargando{opacity:.55;cursor:not-allowed;pointer-events:none}
.btn.cargando{position:relative;color:transparent}
.btn.cargando::after{
  content:'';position:absolute;width:18px;height:18px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:girar .7s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}

.btn-primario{background:var(--naranja);color:#fff}
.btn-primario:hover{background:var(--naranja-oscuro)}

.btn-secundario{background:transparent;border-color:var(--azul-claro);color:var(--azul-oscuro)}
.btn-secundario:hover{background:var(--azul-claro);color:var(--azul-oscuro)}

.btn-outline-claro{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.btn-outline-claro:hover{background:#fff;border-color:#fff;color:var(--azul-oscuro)}

.btn-ghost{background:transparent;color:var(--azul-oscuro);padding:.6rem 1rem}
.btn-ghost:hover{background:var(--crema)}

/* ============ HEADER ============ */
.site-header{position:sticky;top:0;z-index:100;background:var(--blanco);box-shadow:0 1px 0 rgba(8,21,71,.06);transition:box-shadow var(--transicion)}
.site-header.con-scroll{box-shadow:var(--sombra-sm)}
.site-header .container{display:flex;align-items:center;gap:1.5rem;padding-top:.85rem;padding-bottom:.85rem}
.logo{flex-shrink:0;display:flex;transition:opacity var(--transicion)}
.logo:hover{opacity:.85}
.logo img{height:44px;width:auto}

.header-buscador{
  flex:1;max-width:520px;position:relative;display:flex;align-items:center;
  background:var(--crema);border-radius:999px;padding:.15rem .3rem .15rem 1rem;
  border:1.5px solid transparent;transition:border-color var(--transicion),background var(--transicion);
}
.header-buscador:focus-within{border-color:var(--azul-claro);background:#fff;box-shadow:0 0 0 4px rgba(41,197,244,.14)}
.icono-buscar{font-size:.95rem;opacity:.55;flex-shrink:0}
.header-buscador input{flex:1;background:none;border:none;padding:.65rem .75rem;font-size:.92rem;outline:none}
.buscador-resultados{
  position:absolute;top:calc(100% + .6rem);left:0;right:0;background:#fff;border-radius:var(--radio-md);
  box-shadow:var(--sombra-lg);max-height:70vh;overflow-y:auto;z-index:50;display:none;padding:.5rem;
}
.buscador-resultados.abierto{display:block}
.buscador-item{display:flex;gap:.75rem;align-items:center;padding:.6rem;border-radius:var(--radio-sm);transition:background var(--transicion)}
.buscador-item:hover,.buscador-item:focus-visible{background:var(--crema)}
.buscador-item img{width:44px;height:44px;object-fit:contain;background:var(--crema);border-radius:var(--radio-sm);flex-shrink:0}
.buscador-item-info{flex:1;min-width:0}
.buscador-item-nombre{font-size:.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buscador-item-precio{font-size:.8rem;color:var(--azul-oscuro);font-weight:700}
.buscador-vacio{padding:1.5rem;text-align:center;color:var(--gris-claro);font-size:.88rem}

.nav-desktop{display:none}
@media(min-width:1080px){
  .nav-desktop{display:flex;align-items:center;gap:1.6rem;flex-shrink:0}
  .nav-desktop a{font-size:.95rem;font-weight:600;color:var(--negro);position:relative;padding:.4rem 0;transition:color var(--transicion)}
  .nav-desktop a::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--azul-claro);transition:width var(--transicion)}
  .nav-desktop a:hover,.nav-desktop a.activo{color:var(--azul-oscuro)}
  .nav-desktop a:hover::after,.nav-desktop a.activo::after{width:100%}
  .nav-desktop a.nav-credito{background:var(--azul-claro);color:var(--azul-oscuro);padding:.5rem 1rem;border-radius:999px}
  .nav-desktop a.nav-credito::after{display:none}
  .nav-desktop a.nav-credito:hover{background:var(--naranja);color:#fff}
}
.header-acciones{display:flex;align-items:center;gap:.4rem;flex-shrink:0;margin-left:auto}
@media(min-width:1080px){.header-acciones{margin-left:0}}
.header-icono-btn{
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  font-size:1.1rem;position:relative;transition:background var(--transicion);
}
.header-icono-btn:hover{background:var(--crema)}
.carrito-contador{
  position:absolute;top:2px;right:2px;background:var(--naranja);color:#fff;font-size:.65rem;font-weight:700;
  min-width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0 3px;
}
.carrito-contador[data-count="0"]{display:none}
.btn-menu-movil{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:1.2rem;transition:background var(--transicion)}
.btn-menu-movil:hover{background:var(--crema)}
@media(min-width:1080px){.btn-menu-movil{display:none}}

.nav-bar-secundaria{background:var(--azul-oscuro);color:rgba(255,255,255,.85);font-size:.78rem;display:none}
@media(min-width:900px){.nav-bar-secundaria{display:block}}
.nav-bar-secundaria .container{display:flex;gap:1.75rem;padding-top:.5rem;padding-bottom:.5rem;flex-wrap:wrap}
.nav-bar-secundaria a{transition:color var(--transicion)}
.nav-bar-secundaria a:hover{color:var(--azul-claro)}

/* ESCALA DE CAPAS (respetar al agregar cualquier cosa flotante):
 *   60  sticky de compra      70  botón arriba       100 header (sticky)
 *   105 buscador móvil        110/111 overlays+paneles (menú móvil, carrito)
 *   150 banner de cookies     200 lightbox
 * Todo lo que deba tapar el header va >100. Con 90/98/99 el header (100) se comía los primeros
 * 114px de estos paneles y sus botones de cerrar quedaban inclicables. */
.buscador-movil-panel{position:fixed;inset:0 0 auto 0;background:#fff;z-index:105;box-shadow:var(--sombra-md);padding-top:.5rem}
.buscador-movil-panel input{width:100%;padding:.85rem 1rem;border-radius:var(--radio-sm);background:var(--crema);border:1.5px solid transparent;outline:none}
.buscador-movil-panel input:focus{border-color:var(--azul-claro)}

.menu-movil-overlay{position:fixed;inset:0;background:rgba(8,21,71,.5);z-index:110;opacity:0;pointer-events:none;transition:opacity var(--transicion)}
.menu-movil-overlay.abierto{opacity:1;pointer-events:auto}
.menu-movil{
  position:fixed;top:0;right:0;bottom:0;width:min(340px,86vw);background:#fff;z-index:111;
  transform:translateX(100%);transition:transform 280ms var(--ease-out);overflow-y:auto;padding-bottom:2rem;
}
.menu-movil.abierto{transform:translateX(0)}
.menu-movil-header{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.25rem;border-bottom:1px solid var(--crema)}
.menu-movil-header button{width:36px;height:36px;border-radius:50%;transition:background var(--transicion)}
.menu-movil-header button:hover{background:var(--crema)}
.menu-movil ul{padding:.5rem 0}
.menu-movil>ul>li>a{display:block;padding:.9rem 1.25rem;font-weight:600;transition:background var(--transicion)}
.menu-movil>ul>li>a:hover{background:var(--crema)}
.menu-movil details summary{display:flex;justify-content:space-between;align-items:center;padding:.9rem 1.25rem;font-weight:600;cursor:pointer;list-style:none}
.menu-movil details summary::-webkit-details-marker{display:none}
.menu-movil .submenu{padding-left:1.25rem}
.menu-movil .submenu a{display:block;padding:.6rem 1.25rem;color:var(--gris);transition:color var(--transicion)}
.menu-movil .submenu a:hover{color:var(--azul-oscuro)}
.menu-movil-credito{background:var(--azul-claro);color:var(--azul-oscuro)!important;margin:.5rem 1.25rem;border-radius:var(--radio-sm);width:calc(100% - 2.5rem)}

/* ============ DRAWER CARRITO ============ */
/* z-index POR ENCIMA del header (100). Con 98/99 el header tapaba los primeros 114px del
 * drawer: el título "Tu carrito" y la ✕ quedaban ocultos y el botón de cerrar era INCLICABLE
 * (elementFromPoint devolvía el header). Misma regla para el menú móvil. */
.drawer-overlay{position:fixed;inset:0;background:rgba(8,21,71,.5);z-index:110;opacity:0;pointer-events:none;transition:opacity var(--transicion)}
.drawer-overlay.activo{opacity:1;pointer-events:auto}
.drawer-carrito{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);background:#fff;z-index:111;
  transform:translateX(100%);transition:transform 280ms var(--ease-out);display:flex;flex-direction:column;
}
/* .activo (no .abierto): carrito.js -- YA VERIFICADO, cobra plata -- usa esta clase para abrir/cerrar */
.drawer-carrito.activo{transform:translateX(0)}
.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem;border-bottom:1px solid var(--crema);font-family:var(--font-display)}
.drawer-header button{width:36px;height:36px;border-radius:50%;transition:background var(--transicion)}
.drawer-header button:hover{background:var(--crema)}
.drawer-body{flex:1;overflow-y:auto;padding:1rem 1.25rem}
.drawer-footer{padding:1.25rem;border-top:1px solid var(--crema)}
.item-carrito{display:flex;gap:.85rem;padding:.85rem 0;border-bottom:1px solid var(--crema)}
.item-carrito img{width:64px;height:64px;object-fit:contain;background:var(--crema);border-radius:var(--radio-sm)}
.item-carrito-info{flex:1;font-size:.85rem}
.item-carrito-nombre{font-weight:600;display:block;margin-bottom:.2rem}
.item-carrito-cantidad{display:flex;align-items:center;gap:.6rem;margin-top:.5rem}
.item-carrito-cantidad button{width:26px;height:26px;border:1.5px solid var(--crema);border-radius:6px;transition:background var(--transicion),border-color var(--transicion)}
.item-carrito-cantidad button:hover{background:var(--crema);border-color:var(--azul-claro)}
.item-carrito-quitar{color:var(--rojo-error);font-size:.78rem;text-decoration:underline;margin-top:.35rem}
.carrito-vacio{text-align:center;padding:3.5rem 1rem;color:var(--gris-claro)}
.carrito-vacio .btn{margin-top:1.25rem}

/* ============ HERO (home) — elemento firma: mascota + cyan ============ */
.hero-full{
  position:relative;overflow:hidden;color:#fff;padding:4rem 0 3.25rem;
  background:var(--azul-oscuro) url('/img/banners/hero-mascota.webp') right center/cover no-repeat;
}
.hero-full::before{
  content:'';position:absolute;inset:0;z-index:1;
  /* la mascota real cae ~50%-85% del ancho — el degradado tiene que estar casi transparente ahí */
  background:linear-gradient(90deg,var(--azul-oscuro) 0%,rgba(8,21,71,.92) 26%,rgba(8,21,71,.3) 46%,rgba(8,21,71,.03) 66%);
}
.hero-full .container{position:relative;z-index:2}
.hero-orb{position:absolute;border-radius:50%;filter:blur(64px);opacity:.3;pointer-events:none;z-index:1;background:radial-gradient(circle,var(--azul-claro),transparent 70%)}
.hero-orb-1{width:420px;height:420px;top:-130px;left:-110px;animation:orbFlotar1 24s linear infinite}
.hero-orb-2{width:320px;height:320px;bottom:-140px;right:10%;animation:orbFlotar2 30s linear infinite}
@keyframes orbFlotar1{0%,100%{transform:translate(0,0)}50%{transform:translate(36px,26px)}}
@keyframes orbFlotar2{0%,100%{transform:translate(0,0)}50%{transform:translate(-28px,-22px)}}

.hero-titulo{max-width:26ch}
.hero-titulo .gradiente{background:linear-gradient(90deg,var(--azul-claro),#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-desc{margin-top:1.1rem;font-size:1.05rem;color:rgba(255,255,255,.8);max-width:42ch}
.hero-cta-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.85rem}
.hero-stats{display:flex;gap:2.2rem;margin-top:2.75rem;flex-wrap:wrap}
.stat-item{display:flex;flex-direction:column}
.stat-num{font-family:var(--font-display);font-size:1.7rem;font-weight:700;color:#fff}
.stat-label{font-size:.78rem;color:rgba(255,255,255,.65)}
@media(min-width:900px){.hero-full{min-height:560px;display:flex;align-items:center;padding:3rem 0}}

/* ============ FRANJA NAVY (interior: hubs, crédito) ============ */
.franja-navy{background:var(--azul-oscuro);color:#fff;padding:2.5rem 0 2.25rem;position:relative;overflow:hidden}
.franja-navy h1{font-size:clamp(1.7rem,3.5vw,2.4rem)}
.franja-navy p{color:rgba(255,255,255,.75);margin-top:.6rem;max-width:60ch}
.franja-navy .breadcrumb{background:transparent}
.franja-navy .breadcrumb a{color:rgba(255,255,255,.65)}
.franja-navy .breadcrumb a:hover{color:var(--azul-claro)}
.franja-navy .breadcrumb li[aria-current]{color:#fff}
/* flex-direction:column es OBLIGATORIO: la sección tiene 2 hijos (breadcrumb + container).
 * Con el row por defecto quedaban lado a lado — el breadcrumb a la izquierda y el h1 corrido
 * al centro, encima de la zona clara de la foto. Se apilan y el grupo se centra vertical. */
/* `auto 100%` (NO cover): la foto se escala a la ALTURA de la franja y se ancla a la derecha,
 * así se ve SIEMPRE COMPLETA — nunca recortada ni ampliada por encima de su tamaño real (que es
 * lo que la pixelaba: solar y movilidad son pequeños en el original de Óscar). El navy de fondo
 * rellena lo que sobre a la izquierda, y como el banner lleva el degradado navy HORNEADO en ese
 * lado (tools/normalizar-banners.js), la unión no tiene costura. Sirve para cualquier ancho. */
.franja-navy-foto{min-height:280px;display:flex;flex-direction:column;justify-content:center;background-size:auto 100%;background-position:right center;background-repeat:no-repeat;background-color:var(--azul-oscuro)}
/* width:100% en los hijos: en flex-column, el `margin:0 auto` de .container gana sobre el
 * stretch y lo encoge al ancho del contenido (queda centrado). Con esto ocupa toda la franja
 * y el h1 arranca a la izquierda, sobre el navy sólido del degradado. */
.franja-navy-foto > *{width:100%}
/* Velo muy suave. El degradado fuerte ya viene HORNEADO en la imagen; este ::before solo aporta
 * un refuerzo mínimo de contraste sobre el lado del texto. Si se sube, oscurece la foto de más. */
.franja-navy-foto::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,21,71,.55) 0%,rgba(8,21,71,.25) 35%,rgba(8,21,71,0) 60%)}
.franja-navy-foto .container{position:relative;z-index:2}
.franja-navy .hero-stats{margin-top:1.6rem}

/* ============ FRANJA DE CONFIANZA ============ */
.franja-confianza{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem 1rem;padding:2.5rem 0;border-bottom:1px solid var(--crema)}
@media(min-width:640px){.franja-confianza{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){.franja-confianza{grid-template-columns:repeat(6,1fr)}}
.item-confianza{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem}
.item-confianza img{transition:transform var(--transicion)}
.item-confianza:hover img{transform:translateY(-3px)}
.item-confianza span{font-size:.8rem;font-weight:600;color:var(--gris)}

/* ============ BENTO GRID (categorías) ============ */
.bento-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin:3.5rem 0}
.bento-item{
  position:relative;border-radius:var(--radio-lg);overflow:hidden;min-height:190px;
  border:1px solid rgba(41,197,244,.2);background-size:cover;background-position:right center;background-repeat:no-repeat;
  background-color:var(--azul-oscuro);display:flex;align-items:flex-end;
  transition:transform var(--transicion),box-shadow var(--transicion);
}
.bento-item::before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,21,71,.88) 0%,rgba(8,21,71,.35) 45%,rgba(8,21,71,.05) 75%)}
.bento-item:hover{box-shadow:var(--sombra-lg);transform:translateY(-3px)}
.bento-item:hover .bento-bg{transform:scale(1.06)}
.bento-item:focus-visible{outline-offset:3px}
.bento-lg{grid-column:span 2;min-height:250px}
/* Categoría sin banner de Óscar (hoy: Celulares): navy con acento cyan en vez de foto — se ve
 * intencional, no rota. Al llegar el banner se le pasa `bg` en home.js y esta clase desaparece
 * sola. NUNCA reusar el banner de otra categoría para tapar el hueco. */
.bento-sin-foto{
  background-image:radial-gradient(circle at 78% 30%, rgba(41,197,244,.30), transparent 62%);
  background-color:var(--azul-oscuro);border-color:rgba(41,197,244,.45);
}
.bento-sin-foto::before{background:linear-gradient(0deg,rgba(8,21,71,.75) 0%,rgba(8,21,71,.15) 60%,transparent 100%)}
.bento-inner{position:relative;z-index:2;padding:1.5rem;color:#fff;width:100%}
.bento-inner h3{font-size:1.3rem;margin-bottom:.25rem}
.bento-inner p{font-size:.85rem;color:rgba(255,255,255,.82);margin-bottom:.7rem}
.bento-arrow{display:inline-flex;align-items:center;gap:.35rem;font-size:.82rem;font-weight:600;color:var(--azul-claro);transition:gap var(--transicion)}
.bento-item:hover .bento-arrow{gap:.6rem}
@media(min-width:640px){.bento-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.bento-lg{grid-column:span 2}}

/* ============ CARRUSEL DESTACADOS ============ */
.seccion-destacados{padding:3.5rem 0}
.destacados-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:1.75rem;gap:1rem;flex-wrap:wrap}
.carrusel-wrap{position:relative}
.carrusel-track{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:.25rem}
.carrusel-track::-webkit-scrollbar{display:none}
.carrusel-track>*{flex:0 0 220px;scroll-snap-align:start}
@media(min-width:640px){.carrusel-track>*{flex-basis:250px}}
.carrusel-btn{
  display:none;position:absolute;top:40%;width:44px;height:44px;border-radius:50%;background:#fff;
  box-shadow:var(--sombra-md);align-items:center;justify-content:center;z-index:5;transition:background var(--transicion),transform var(--transicion);
}
.carrusel-btn:hover{background:var(--crema);transform:translateY(-50%) scale(1.05)}
@media(min-width:900px){.carrusel-btn{display:flex}}
#carrusel-prev{left:-22px}
#carrusel-next{right:-22px}

/* ============ CARD PRODUCTO (la más repetida) ============ */
.grid-productos{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
@media(min-width:640px){.grid-productos{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.grid-productos{grid-template-columns:repeat(4,1fr)}}
.card-producto{
  background:#fff;border-radius:var(--radio-md);border:1px solid var(--crema);overflow:hidden;
  box-shadow:var(--sombra-sm);transition:box-shadow var(--transicion),transform var(--transicion);display:flex;flex-direction:column;
}
.card-producto:hover{box-shadow:var(--sombra-md);transform:translateY(-3px)}
.card-producto .img-wrap{display:block;background:var(--crema);aspect-ratio:1/1;padding:1rem}
.card-producto .img-wrap img{width:100%;height:100%;object-fit:contain;transition:transform var(--transicion)}
.card-producto:hover .img-wrap img{transform:scale(1.04)}
.card-producto .contenido{padding:1rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.card-producto .marca{font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gris-claro)}
.card-producto .nombre{
  font-family:var(--font-body);font-size:.92rem;font-weight:600;color:var(--negro);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em;
}
.card-producto .nombre:hover{color:var(--azul-oscuro)}
.card-producto .precios{margin-top:.15rem}
.precio-contado{font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--azul-oscuro);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.badge{font-size:.68rem;font-weight:700;padding:.2rem .5rem;border-radius:999px}
.badge-descuento{background:rgba(255,106,26,.12);color:var(--naranja-oscuro)}
.precio-credito{font-size:.78rem;color:var(--gris-claro);margin-top:.15rem}
.card-producto .btn{margin-top:.5rem}
.resultados-contador{font-size:.85rem;color:var(--gris-claro);margin-bottom:1.1rem}

/* ============ MARQUEE DE MARCAS — logos GRANDES (requisito de Francisco, ~3x) ============ */
.marquee-wrap{padding:3rem 0;border-top:1px solid var(--crema);overflow:hidden}
.marquee-titulo{text-align:center;font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gris-claro);margin-bottom:1.75rem}
.marquee{display:flex;width:max-content;animation:marqueeScroll 42s linear infinite}
@media(prefers-reduced-motion:reduce){.marquee{animation:none;flex-wrap:wrap;justify-content:center}}
@keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-item{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  padding:1.5rem 2.75rem;background:#fff;border:1px solid var(--crema);border-radius:var(--radio-md);
  margin:0 .65rem;box-shadow:var(--sombra-sm);transition:box-shadow var(--transicion),filter var(--transicion);
  filter:grayscale(.15);
}
.marquee-item:hover{filter:grayscale(0);box-shadow:var(--sombra-md)}
.marquee-item img{height:140px;width:auto;max-width:230px;object-fit:contain}
@media(max-width:900px){.marquee-item{padding:1.1rem 1.75rem}.marquee-item img{height:100px;max-width:170px}}
@media(max-width:640px){.marquee-item{padding:.9rem 1.4rem}.marquee-item img{height:76px;max-width:130px}}

/* ============ CÓMO FUNCIONA (crédito, 3 pasos — secuencia real, sí numerar) ============ */
.pasos-credito{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:720px){.pasos-credito{grid-template-columns:repeat(3,1fr)}}
.paso-credito{text-align:center;padding:1.5rem}
.paso-credito-icono{
  width:64px;height:64px;border-radius:50%;background:var(--azul-oscuro);display:flex;align-items:center;
  justify-content:center;margin:0 auto 1rem;box-shadow:var(--sombra-md);
}
.paso-credito-num{display:block;font-family:var(--font-display);font-size:.78rem;font-weight:700;color:var(--azul-claro);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.4rem}
.paso-credito h3{margin-bottom:.4rem}

/* ============ PÁGINA DE PRODUCTO ============ */
.producto-layout{display:grid;grid-template-columns:1fr;gap:2.5rem;padding:2.25rem 0 3.5rem}
@media(min-width:960px){.producto-layout{grid-template-columns:55fr 45fr}}
.galeria-principal{background:var(--crema);border-radius:var(--radio-lg);aspect-ratio:1/1;overflow:hidden;position:relative;cursor:zoom-in}
.galeria-principal img{width:100%;height:100%;object-fit:contain;padding:1.5rem}
/* Flechas sobre la foto principal (sin ampliar). En escritorio aparecen al pasar el mouse;
 * en táctil (donde no hay hover) están siempre visibles, si no serían inalcanzables. */
.galeria-flecha{
  position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--azul-oscuro);box-shadow:var(--sombra-md);
  display:flex;align-items:center;justify-content:center;z-index:2;
  opacity:0;transition:opacity var(--transicion),background var(--transicion),transform var(--transicion);
}
.galeria-principal:hover .galeria-flecha,.galeria-flecha:focus-visible{opacity:1}
@media(hover:none){.galeria-flecha{opacity:1}}
.galeria-flecha:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
.galeria-flecha-prev{left:.85rem}
.galeria-flecha-next{right:.85rem}
.galeria-contador{
  position:absolute;bottom:.85rem;left:50%;transform:translateX(-50%);z-index:2;
  background:rgba(8,21,71,.75);color:#fff;font-size:.78rem;font-weight:600;
  padding:.28rem .8rem;border-radius:999px;pointer-events:none;
}
.galeria-thumbs{display:flex;gap:.6rem;margin-top:.85rem;overflow-x:auto;padding-bottom:.25rem}
.galeria-thumb{width:64px;height:64px;flex-shrink:0;border-radius:var(--radio-sm);border:2px solid transparent;background:var(--crema);overflow:hidden;transition:border-color var(--transicion)}
.galeria-thumb img{width:100%;height:100%;object-fit:contain;padding:.35rem}
.galeria-thumb:hover{border-color:rgba(41,197,244,.5)}
.galeria-thumb.activo{border-color:var(--azul-claro)}
.producto-marca{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--gris-claro)}
.producto-titulo{margin-top:.35rem}
.producto-precios{margin-top:1.25rem;padding:1.25rem;background:var(--crema);border-radius:var(--radio-md)}
.producto-precio-contado{font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--azul-oscuro);display:flex;align-items:center;gap:.65rem;flex-wrap:wrap}
.producto-precio-credito{margin-top:.35rem;color:var(--gris);font-size:.95rem}
.producto-codigo{font-size:.78rem;color:var(--gris-claro);margin-top:.3rem}
.producto-cta-row{display:flex;gap:.85rem;margin-top:1.5rem;flex-wrap:wrap;align-items:stretch}
.producto-cta-row .btn{flex:1;min-width:180px}
.selector-cantidad{display:flex;align-items:center;gap:0;border:1.5px solid var(--crema);border-radius:var(--radio-sm);overflow:hidden}
.selector-cantidad button{width:42px;height:100%;min-height:48px;font-size:1.1rem;font-weight:700;transition:background var(--transicion)}
.selector-cantidad button:hover{background:var(--crema)}
.selector-cantidad span{min-width:38px;text-align:center;font-weight:700;font-family:var(--font-display)}
.producto-beneficios{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--crema)}
.producto-beneficios h2{font-size:1rem;margin-bottom:.4rem}
.producto-beneficios a{color:var(--azul-oscuro);font-weight:600;text-decoration:underline}
.cross-sell{margin-top:3rem;padding-top:2.5rem;border-top:1px solid var(--crema)}
.cross-sell h2{margin-bottom:1.5rem}
.chips-confianza{display:flex;flex-wrap:wrap;gap:1.25rem;margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--crema)}
.chip-confianza{display:flex;align-items:center;gap:.55rem;font-size:.82rem;color:var(--gris);font-weight:500}
.chip-confianza img{flex-shrink:0}
.caracteristicas{margin-top:2.5rem;padding-top:2.5rem;border-top:1px solid var(--crema)}
.specs-lista{display:grid;grid-template-columns:1fr;gap:.6rem}
@media(min-width:640px){.specs-lista{grid-template-columns:1fr 1fr}}
.specs-lista li{padding:.65rem .9rem;background:var(--crema);border-radius:var(--radio-sm);font-size:.9rem;color:var(--gris)}
.caracteristicas-prosa p{margin-bottom:.75rem;line-height:1.7}
.sticky-compra{
  position:fixed;bottom:0;left:0;right:0;background:#fff;box-shadow:0 -4px 20px rgba(8,21,71,.12);
  padding:.85rem 1.25rem;display:flex;align-items:center;gap:1rem;z-index:60;transform:translateY(100%);
  transition:transform var(--transicion);
}
.sticky-compra.visible{transform:translateY(0)}
.sticky-compra .precio-contado{font-size:1.1rem}
.sticky-compra .btn{flex-shrink:0}
@media(min-width:960px){.sticky-compra{display:none}}

/* ============ LIGHTBOX ============ */
.lightbox-overlay{position:fixed;inset:0;background:rgba(8,21,71,.92);z-index:200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--transicion)}
.lightbox-overlay.abierto{opacity:1;pointer-events:auto}
.lightbox-overlay img{max-width:90vw;max-height:80vh;object-fit:contain;border-radius:var(--radio-sm)}
.lightbox-cerrar{position:absolute;top:1.5rem;right:1.5rem;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:1.4rem;transition:background var(--transicion);z-index:2}
.lightbox-cerrar:hover{background:rgba(255,255,255,.2)}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:1.6rem;display:flex;align-items:center;justify-content:center;transition:background var(--transicion);z-index:2}
.lightbox-nav:hover{background:rgba(255,255,255,.2)}
.lightbox-prev{left:1rem}
.lightbox-next{right:1rem}
.lightbox-contador{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);color:#fff;font-size:.85rem;background:rgba(255,255,255,.12);padding:.35rem .9rem;border-radius:999px}

/* ============ FACADES (yt / mapa) ============ */
.yt-facade,.mapa-facade{position:relative;border-radius:var(--radio-md);overflow:hidden;cursor:pointer;background:var(--azul-oscuro)}
.yt-facade img,.mapa-facade img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform var(--transicion)}
.yt-facade:hover img,.mapa-facade:hover img{transform:scale(1.03)}
.play-btn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.play-btn svg{background:rgba(8,21,71,.75);border-radius:50%;padding:1rem;transition:background var(--transicion),transform var(--transicion)}
.yt-facade:hover .play-btn svg{background:var(--naranja);transform:scale(1.08)}
.facade-caption{margin-top:.6rem;font-size:.85rem}
.mapa-facade-boton{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);background:#fff;color:var(--azul-oscuro);padding:.6rem 1.1rem;border-radius:999px;font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:.4rem;box-shadow:var(--sombra-md)}

/* ============ BREADCRUMB ============ */
.breadcrumb{background:var(--crema);font-size:.82rem}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:.4rem;padding:.75rem 0}
.breadcrumb li:not(:last-child)::after{content:'/';margin-left:.4rem;color:var(--gris-claro)}
.breadcrumb a{color:var(--gris);transition:color var(--transicion)}
.breadcrumb a:hover{color:var(--azul-oscuro)}
.breadcrumb li[aria-current]{color:var(--negro);font-weight:600}

/* ============ FOOTER ============ */
.site-footer{background:var(--azul-oscuro);color:rgba(255,255,255,.75);padding:3.5rem 0 1.75rem;margin-top:4rem}
.footer-grid{display:grid;grid-template-columns:1fr;gap:2.25rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.12)}
@media(min-width:720px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.footer-desc{color:rgba(255,255,255,.65);font-size:.88rem;max-width:32ch}
.footer-redes{display:flex;gap:.75rem;margin-top:1.25rem}
.footer-redes a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;transition:background var(--transicion)}
.footer-redes a:hover{background:var(--azul-claro)}
.site-footer h4{color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:1rem}
.site-footer a{display:block;padding:.35rem 0;font-size:.9rem;color:rgba(255,255,255,.7);transition:color var(--transicion)}
.site-footer a:hover{color:var(--azul-claro)}
.footer-bottom{display:flex;flex-direction:column;gap:.5rem;padding-top:1.75rem;font-size:.78rem;color:rgba(255,255,255,.5)}
@media(min-width:720px){.footer-bottom{flex-direction:row;justify-content:space-between}}

/* ============ COOKIES BANNER ============ */
.cookies-banner{
  position:fixed;bottom:1.25rem;left:1.25rem;right:1.25rem;max-width:480px;background:#fff;
  border-radius:var(--radio-md);box-shadow:var(--sombra-lg);padding:1.25rem;z-index:150;
  transform:translateY(140%);transition:transform 320ms var(--ease-out);
}
.cookies-banner.visible{transform:translateY(0)}
.cookies-banner p{font-size:.85rem;margin-bottom:.9rem}
.cookies-banner .btn{padding:.6rem 1.1rem;font-size:.85rem}

/* ============ BOTÓN ARRIBA ============ */
.btn-arriba{
  position:fixed;bottom:1.5rem;right:1.5rem;width:46px;height:46px;border-radius:50%;background:var(--azul-oscuro);
  color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--sombra-md);z-index:70;
  opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity var(--transicion),transform var(--transicion),background var(--transicion);
}
.btn-arriba.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.btn-arriba:hover{background:var(--azul-claro);color:var(--azul-oscuro)}

/* ============ CTA SHOWROOM ============ */
.cta-showroom{
  display:flex;align-items:center;gap:1.5rem;background:var(--crema);border-radius:var(--radio-lg);
  padding:1.75rem;margin:3.5rem 0;border:1px solid rgba(41,197,244,.2);box-shadow:var(--sombra-sm);flex-wrap:wrap;
}
.cta-showroom img{width:120px;height:120px;object-fit:cover;border-radius:var(--radio-md);flex-shrink:0}
.cta-showroom-info{flex:1;min-width:220px}
.cta-showroom-info .eyebrow{margin-bottom:.5rem}

/* ============ NEWSLETTER ============ */
.seccion-newsletter{background:var(--azul-oscuro);color:#fff;padding:3rem 0;border-radius:var(--radio-lg);margin:3.5rem 0;text-align:center}
.seccion-newsletter h2{color:#fff}
.seccion-newsletter p{color:rgba(255,255,255,.75);margin-top:.6rem}
.form-newsletter{display:flex;gap:.75rem;max-width:420px;margin:1.75rem auto 0;flex-wrap:wrap;justify-content:center}
.form-newsletter input{flex:1;min-width:220px;padding:.85rem 1.1rem;border-radius:var(--radio-sm);border:1.5px solid transparent;outline:none;color:var(--negro)}
.form-newsletter input:focus{border-color:var(--azul-claro)}

/* ============ FILTROS (hubs) ============ */
.hub-layout{display:grid;grid-template-columns:1fr;gap:1.25rem;padding:2rem 0}
@media(min-width:860px){.hub-layout{grid-template-columns:250px 1fr;gap:2rem;padding:2.5rem 0}}
.filtros{background:var(--crema);border-radius:var(--radio-md);padding:1.5rem;align-self:start}
@media(min-width:860px){.filtros{position:sticky;top:90px}}

/* Filtros en móvil: el panel abierto ocupaba casi toda la pantalla y obligaba a pasarlo entero
 * para ver el primer producto. Va cerrado tras un botón; en escritorio (≥860px) el botón
 * desaparece y el panel vuelve a estar siempre visible. */
.btn-filtros{
  display:flex;align-items:center;gap:.6rem;width:100%;justify-content:center;
  padding:.85rem 1.25rem;border:1.5px solid var(--crema);border-radius:var(--radio-sm);
  background:#fff;font-family:var(--font-display);font-weight:600;font-size:.95rem;
  color:var(--azul-oscuro);box-shadow:var(--sombra-sm);transition:border-color var(--transicion),background var(--transicion);
}
.btn-filtros:hover{border-color:var(--azul-claro)}
.btn-filtros[aria-expanded="true"]{border-color:var(--azul-claro);background:var(--crema)}
.btn-filtros-conteo{
  background:var(--azul-claro);color:var(--azul-oscuro);font-size:.75rem;font-weight:700;
  min-width:20px;height:20px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;
}
@media(max-width:859px){
  .filtros{display:none}
  .filtros.abierto{display:block}
}
@media(min-width:860px){.btn-filtros{display:none}}
.filtros h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:var(--gris-claro);margin:1.1rem 0 .65rem}
.filtros h3:first-child{margin-top:0}
.filtro-opcion{display:flex;align-items:center;gap:.55rem;font-size:.88rem;padding:.4rem 0;cursor:pointer;transition:color var(--transicion)}
.filtro-opcion:hover{color:var(--azul-oscuro)}
.filtro-opcion input[type="checkbox"]{accent-color:var(--azul-claro);width:16px;height:16px}
#filtro-precio{accent-color:var(--azul-claro);width:100%}

/* ============ FORMULARIOS ============ */
.form-grupo{display:flex;flex-direction:column;gap:.4rem}
.form-grupo label{font-size:.85rem;font-weight:600;color:var(--negro)}
.form-grupo input,.form-grupo select,.form-grupo textarea{
  padding:.75rem .9rem;border:1.5px solid var(--crema);border-radius:var(--radio-sm);background:#fff;
  outline:none;transition:border-color var(--transicion),box-shadow var(--transicion);font-size:.95rem;
}
.form-grupo input:focus,.form-grupo select:focus,.form-grupo textarea:focus{border-color:var(--azul-claro);box-shadow:0 0 0 4px rgba(41,197,244,.12)}
.form-grupo input.error,.form-grupo select.error{border-color:var(--rojo-error)}
.form-grupo .msg-error{font-size:.78rem;color:var(--rojo-error)}
.form-fila{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:560px){.form-fila{grid-template-columns:1fr 1fr}}
.form-card{background:var(--crema);border-radius:var(--radio-md);padding:1.75rem}
.form-msg{padding:.85rem 1rem;border-radius:var(--radio-sm);font-size:.88rem}
.form-msg-exito{background:rgba(27,158,90,.12);color:var(--verde-exito)}
.form-msg-error{background:rgba(217,67,43,.12);color:var(--rojo-error)}

/* ============ CRÉDITO ============ */
.franja-credito{display:grid;grid-template-columns:1fr;gap:1.25rem;margin:1.5rem 0 2.5rem}
@media(min-width:640px){.franja-credito{grid-template-columns:1fr 1fr}}
.aliado-credito{background:var(--crema);border-radius:var(--radio-md);padding:1.5rem;border-top:3px solid var(--azul-claro);transition:transform var(--transicion),box-shadow var(--transicion)}
.aliado-credito:hover{transform:translateY(-3px);box-shadow:var(--sombra-sm)}
.aliado-credito img{height:32px;width:auto;margin-bottom:1rem}
.aliado-credito h3{margin-bottom:.4rem}
.simulador-credito{background:var(--crema);border-radius:var(--radio-md);padding:1.75rem;margin-bottom:2rem}
.simulador-resultado{margin-top:1.25rem;padding:1.25rem;background:#fff;border-radius:var(--radio-sm);font-family:var(--font-display);font-weight:600}

/* ============ CARRITO / CHECKOUT (páginas completas) ============ */
.carrito-layout{display:grid;grid-template-columns:1fr;gap:2rem;padding:2.5rem 0}
@media(min-width:900px){.carrito-layout{grid-template-columns:1.6fr 1fr}}
.resumen-pedido{background:var(--crema);border-radius:var(--radio-md);padding:1.5rem;align-self:start}
@media(min-width:900px){.resumen-pedido{position:sticky;top:90px}}
.resumen-titulo{margin-bottom:1.1rem}
.resumen-items{display:flex;flex-direction:column;gap:.85rem;margin-bottom:1.25rem;max-height:340px;overflow-y:auto}
.resumen-item{display:flex;gap:.75rem;align-items:center}
.resumen-item img{width:52px;height:52px;object-fit:contain;background:#fff;border-radius:var(--radio-sm);flex-shrink:0}
.resumen-item-info{flex:1;min-width:0}
.resumen-item-nombre{display:block;font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.resumen-item-cant{font-size:.75rem;color:var(--gris-claro)}
.resumen-item-precio{font-size:.82rem;font-weight:700;color:var(--azul-oscuro);flex-shrink:0}
.resumen-linea{display:flex;justify-content:space-between;padding:.5rem 0;font-size:.9rem;border-top:1px solid rgba(8,21,71,.08)}
.resumen-linea.total{font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:var(--azul-oscuro)}
.metodo-pago{display:flex;align-items:center;gap:.9rem;padding:1rem;border:1.5px solid var(--crema);border-radius:var(--radio-sm);margin-bottom:.75rem;cursor:pointer;transition:border-color var(--transicion),background var(--transicion)}
.metodo-pago:hover{background:var(--crema)}
.metodo-pago:has(input:checked),.metodo-pago.seleccionado{border-color:var(--azul-claro);background:rgba(41,197,244,.06)}
.metodo-pago input[type="radio"]{accent-color:var(--azul-claro);width:18px;height:18px;flex-shrink:0}
.metodo-icono,.metodo-logo{height:26px;width:auto;flex-shrink:0}
.metodo-icono{color:var(--azul-oscuro)}
.metodo-nombre{display:block;font-weight:600;font-size:.92rem}
.metodo-desc{display:block;font-size:.8rem;color:var(--gris-claro);margin-top:.15rem}
.form-nota{font-size:.8rem;color:var(--gris-claro);margin-top:1rem;padding-top:1rem;border-top:1px solid var(--crema)}

.carrito-pagina-items{display:flex;flex-direction:column;gap:1rem}

/* ============ CONFIRMACIÓN ============ */
.confirmacion-box{max-width:520px;margin:3rem auto;text-align:center;padding:2rem}
.confirmacion-check{
  width:72px;height:72px;border-radius:50%;background:rgba(27,158,90,.12);color:var(--verde-exito);
  font-size:2rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem;font-weight:700;
}
.confirmacion-box h1{margin-bottom:.5rem}
.confirmacion-ref{color:var(--gris-claro);font-size:.85rem;margin-top:.5rem}
.confirmacion-box .resumen-pedido{margin-top:2rem;text-align:left}

/* ============ BANNER DE PÁGINA (promotores/empresas) ============
 * Composición completa de marca (logo + mascota + mensaje horneado): se muestra ENTERA, nunca
 * recortada de fondo — su texto vive dentro de la imagen y se pisaría con el h1. */
.banner-pagina{
  width:100%;height:auto;border-radius:var(--radio-lg);
  box-shadow:var(--sombra-md);margin:-1.25rem 0 2.5rem;position:relative;z-index:3;
}
/* Variante para el banner de financiación: su mitad inferior es BLANCA. Con sombra y esquinas
 * redondeadas abajo parecería una caja blanca flotando; sin ellas, ese blanco se funde con la
 * página y la mascota queda "saliendo" de la franja navy. Redondeo solo arriba, donde hay navy. */
.banner-pagina-fundido{
  box-shadow:none;border-radius:var(--radio-lg) var(--radio-lg) 0 0;margin-bottom:.5rem;
}

/* ============ DATOS DE EMPRESA (nosotros) ============ */
.datos-empresa{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin:0 0 2.5rem}
@media(min-width:720px){.datos-empresa{grid-template-columns:repeat(4,1fr)}}
.dato-empresa{
  display:flex;flex-direction:column;gap:.25rem;padding:1.25rem;text-align:center;
  background:var(--crema);border-radius:var(--radio-md);border-top:3px solid var(--azul-claro);
}
.dato-num{font-family:var(--font-display);font-size:1.6rem;font-weight:700;color:var(--azul-oscuro);line-height:1.1}
.dato-label{font-size:.78rem;color:var(--gris);line-height:1.35}

/* ============ HORARIOS (reuniones de capacitación) ============ */
.horarios-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.25rem}
@media(min-width:560px){.horarios-grid{grid-template-columns:1fr 1fr}}
.horario-card{
  display:flex;flex-direction:column;gap:.25rem;padding:1.25rem 1.4rem;
  background:var(--crema);border-radius:var(--radio-md);border-left:3px solid var(--azul-claro);
}
.horario-dias{font-size:.82rem;font-weight:600;color:var(--gris);text-transform:uppercase;letter-spacing:.04em}
.horario-hora{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--azul-oscuro)}

/* ============ NEGOCIO / LEGALES ============ */
.pagina-legal{padding:2.5rem 0 3.5rem;max-width:75ch}
.pagina-legal h2{margin-top:2rem;margin-bottom:.75rem}
.pagina-legal p,.pagina-legal li{margin-bottom:.75rem;color:var(--gris)}
.pagina-legal ul{list-style:disc;padding-left:1.5rem}
.error-404{padding:5rem 0;text-align:center}
.error-404 h1{font-size:5rem;color:var(--azul-claro)}

/* ============ HOVER GATING (touch no dispara falsos hovers) ============ */
@media(hover:none){.card-producto:hover,.bento-item:hover,.marquee-item:hover{transform:none;box-shadow:var(--sombra-sm)}}