/* ===================================================================
   ESTILOS COMPARTIDOS DE BOCHITA STORE
   Extraido del <style> que antes vivia inline en index.html, para que
   las 4 paginas (index, camisetas, accesorios, gift-card) usen el mismo
   CSS sin duplicar ~1000 lineas en cada una. Se linkea con
   <link rel="stylesheet" href="/shared/estilos.css"> -- sigue siendo un
   archivo estatico comun, no hace falta build step para esto.
   =================================================================== */
:root{
    /* Rojo de marca: SOLO para rellenos (blanco encima = 4.6:1, pasa AA) */
    --rojo:#E30613;
    /* Rojo aclarado para TEXTO sobre fondo oscuro (5.9:1, pasa AA).
       El #E30613 como texto sobre negro da ~4:1 y NO pasa AA. */
    --rojo-txt:#FF4D4D;
    --negro:#0D0D0D;
    --blanco:#FFFFFF;
    --fondo:#0D0D0D;
    --card:#1A1A1A;
    --card-hover:#212121;
    --borde:#2E2E2E;
    --texto:#FFFFFF;
    --texto-sec:#B8B8B8;
  }
  *{box-sizing:border-box;margin:0;padding:0;}

  /* El atributo hidden del HTML tiene que ganar SIEMPRE.

     El navegador oculta con [hidden]{display:none}, pero esa regla viene de
     su hoja de estilos por defecto y CUALQUIER regla nuestra que ponga
     "display" en el mismo elemento le gana. Nos paso de verdad: el cartel
     "Estas viendo camisetas de niño" (.aviso-seccion{display:flex}) y los
     chips de talle (.chip-talle-filtro{display:inline-flex}) seguian
     VISIBLES en pantalla aunque el JavaScript los marcara como hidden.
     Peor todavia: element.hidden devolvia true, asi que revisando por
     codigo parecia que estaba todo bien mientras en la pantalla se veia mal.

     Con esto, poner hidden en cualquier elemento lo oculta de verdad, sin
     tener que acordarse de agregar una regla [hidden] por componente. */
  [hidden]{ display:none !important; }
  /* El color de fondo va en <html> y no en <body>: el canvas de las pelotas se
     dibuja detras del contenido, y si <body> tuviera fondo opaco lo taparia. */
  /* overscroll-behavior:contain corta el "deslizar para recargar" del
     celular en cuanto un scroll interno llega al borde. Antes esto estaba
     puesto ACA (html/body), en TODA la pagina -- eso evitaba el problema del
     zoom, pero de paso le sacaba al usuario el "deslizar para recargar" de
     siempre en toda la tienda, no solo en la ficha. Ahora que el zoom vive
     en su propio visor (que ya tiene su propio overscroll-behavior:contain,
     ver #visor mas abajo), esta regla general ya no hace falta -- el
     "pull to refresh" vuelve a funcionar en el catalogo y el resto del
     sitio como cualquier pagina normal. */
  html{ scroll-behavior:smooth; background:var(--fondo); }
  body{
    font-family: 'Segoe UI', Arial, sans-serif;
    background:transparent;
    color:var(--texto);
  }
  /* Canvas de fondo: fijo, detras de todo y sin capturar clics */
  #fondo-canvas{
    position:fixed; inset:0; width:100%; height:100%;
    z-index:0; pointer-events:none; display:block;
  }
  /* El contenido va por encima del canvas */
  .hero, .catalogo, footer{ position:relative; z-index:1; }
  /* ===== BARRA DE ENVIO GRATIS =====
     Va ARRIBA del header y las dos quedan pegadas al hacer scroll. Para que
     no se tapen entre si, la barra se pega en top:0 y el header se pega
     justo debajo, a la altura que mida la barra -- esa altura la publica
     shared/chrome.js como --alto-barra (mismo mecanismo que ya se usaba con
     --alto-header para la barra de filtros).
     Es puramente informativa: no lleva link ni boton. */
  .barra-envio{
    position:sticky; top:0; z-index:60;
    background:linear-gradient(90deg,#18863C,#126E31);
    color:#fff; text-align:center;
    padding:8px 14px; font-size:.82rem; font-weight:700; letter-spacing:.02em;
  }
  .barra-envio b{ font-weight:800; }

  header{
    background:var(--negro);
    color:var(--blanco);
    padding:18px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
    position:sticky; top:var(--alto-barra, 0px); z-index:50;
  }
  header h1.logo-wrap{ font-size:0; line-height:0; display:flex; align-items:center; }
  header h1.logo-wrap a{ display:flex; align-items:center; }
  .logo-header{
    height:60px; width:auto; display:block;
    /* El anillo exterior del badge es rgb(12,13,13) y el fondo es rgb(13,13,13):
       sin este halo el borde del logo se funde con el fondo y no se lee. */
    filter: drop-shadow(0 0 1.5px rgba(255,255,255,0.65)) drop-shadow(0 2px 6px rgba(0,0,0,0.6));
    transition:transform .2s ease;
  }
  header h1.logo-wrap a:hover .logo-header{ transform:scale(1.05); }
  .logo-footer{
    height:82px; width:auto; margin:0 auto 14px; display:block;
    filter: drop-shadow(0 0 1.5px rgba(255,255,255,0.5));
  }
  .header-right{ display:flex; align-items:center; gap:12px; }

  /* ===== NAV DESKTOP (Inicio / Productos / Contacto) =====
     Oculto en mobile via @media max-width:640px -- ahi manda el menu
     hamburguesa (#btn-menu / #menu-movil) en su lugar. */
  .nav-desktop{ display:flex; align-items:center; gap:28px; }
  .nav-link{
    background:none; border:none; cursor:pointer; font-family:inherit;
    color:var(--blanco); text-decoration:none; font-size:.95rem; font-weight:700;
    display:flex; align-items:center; gap:4px; padding:6px 0;
  }
  .nav-link:hover{ color:var(--rojo-txt); }
  .nav-link:focus-visible{ outline:2px solid var(--rojo-txt); outline-offset:3px; }
  .nav-item-drop{ position:relative; }
  .nav-item-drop .chevron-menu{ font-size:.75rem; }
  #btn-nav-productos[aria-expanded="true"] .chevron-menu{ transform:rotate(180deg); }
  .nav-drop-panel{
    position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%);
    background:#141414; border:1px solid var(--borde); border-radius:12px;
    box-shadow:0 16px 40px rgba(0,0,0,.6); padding:18px; z-index:60;
    display:flex; gap:28px; min-width:460px;
  }
  .nav-drop-panel[hidden]{ display:none; }
  .nav-drop-panel > a.nav-drop-item{ align-self:flex-start; }
  .nav-drop-col{ display:flex; flex-direction:column; gap:2px; min-width:140px; }
  .nav-drop-titulo{
    font-size:.72rem; text-transform:uppercase; letter-spacing:.6px; color:#8A8A8A;
    font-weight:800; margin-bottom:6px;
  }
  .nav-drop-item{
    color:var(--texto); text-decoration:none; font-size:.9rem; font-weight:600;
    padding:8px 10px; border-radius:6px; white-space:nowrap;
  }
  .nav-drop-item:hover, .nav-drop-item:focus-visible{ background:#1E1E1E; color:var(--rojo-txt); }
  /* Botones sociales: los logos reales ya vienen circulares y con su color de
     marca, asi que el boton no lleva fondo propio ni emoji. */
  header a.social-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:50%; text-decoration:none;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  header a.social-btn img{ width:44px; height:44px; display:block; border-radius:50%; }
  header a.social-btn:hover{ transform:scale(1.09); box-shadow:0 0 16px rgba(255,255,255,.28); }
  header a.social-btn:focus-visible{ outline:2px solid var(--blanco); outline-offset:3px; }
  #btn-cart-open{
    position:relative; background:transparent; border:2px solid var(--blanco);
    color:var(--blanco); border-radius:30px; padding:10px 16px; font-weight:bold;
    cursor:pointer; font-size:0.9rem; display:flex; align-items:center; gap:8px;
  }
  #cart-count{
    background:var(--rojo); color:var(--blanco); border-radius:50%;
    width:22px; height:22px; display:flex; align-items:center; justify-content:center;
    font-size:0.75rem; font-weight:bold;
  }
  /* ===== HERO: "cancha iluminada de noche", 100% por codigo (sin imagenes) ===== */
  .hero{
    position:relative; overflow:hidden; text-align:center;
    padding:clamp(60px,11vw,120px) 20px clamp(56px,9vw,100px);
    background:
      radial-gradient(ellipse 60% 80% at 50% -10%, rgba(227,6,19,0.28), transparent 60%),
      radial-gradient(ellipse 40% 60% at 12% 10%, rgba(255,255,255,0.09), transparent 55%),
      radial-gradient(ellipse 40% 60% at 88% 10%, rgba(255,255,255,0.09), transparent 55%),
      linear-gradient(180deg, rgba(20,20,20,.82) 0%, rgba(13,13,13,.90) 100%);
    border-bottom:1px solid var(--borde);
  }
  /* Halo suave que "respira" detras del titulo */
  .hero::after{
    content:''; position:absolute; left:50%; top:42%; transform:translate(-50%,-50%);
    width:min(760px,92vw); height:300px; pointer-events:none;
    background:radial-gradient(ellipse at center, rgba(227,6,19,0.20), transparent 70%);
    filter:blur(26px); animation:respirar 6s ease-in-out infinite;
  }
  @keyframes respirar{ 0%,100%{opacity:.55;} 50%{opacity:1;} }

  .hero-contenido{ position:relative; z-index:1; max-width:820px; margin:0 auto; }
  .hero h2{
    font-size:clamp(2rem,6vw,3.6rem); line-height:1.05; letter-spacing:-1px;
    margin-bottom:16px; text-transform:uppercase; font-weight:800;
    text-shadow:0 3px 22px rgba(0,0,0,.65);
    animation:entrar .7s cubic-bezier(.2,.7,.3,1) both;
  }
  /* "retro" del titulo: el degradado rojo de siempre + un destello que lo
     cruza cada tanto (la idea del "Shiny Text" de reactbits, pero hecho con
     dos capas de background y background-clip:text, sin React ni JS).

     La capa de brillo va PRIMERA para quedar encima del rojo; cuando el
     destello esta fuera del texto esa capa es transparente y se ve el
     degradado de siempre, asi que el estado de reposo no cambia en nada. */
  .hero h2 .resalte{
    background:
      linear-gradient(110deg, transparent 38%, rgba(255,255,255,.75) 50%, transparent 62%),
      linear-gradient(180deg,#FF6B6B,var(--rojo));
    background-size:250% 100%, 100% 100%;
    background-repeat:no-repeat;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    /* 6s entre pasadas y 1.4s de demora inicial: el destello arranca DESPUES
       de que termino la animacion de entrada del titulo, para que no se
       pisen, y es lo bastante espaciado como para que llame la atencion una
       vez y no moleste al que se queda leyendo. */
    animation:brilloTexto 6s ease-in-out 1.4s infinite;
  }
  @keyframes brilloTexto{
    /* Solo se mueve la capa del destello; la del degradado queda fija en 0 0.
       Arranca y termina afuera del texto, asi la mayor parte del ciclo el
       titulo se ve exactamente como antes. */
    0%,  15% { background-position:180% 0, 0 0; }
    45%, 100%{ background-position:-80% 0, 0 0; }
  }
  .hero p{
    font-size:clamp(1rem,2.3vw,1.25rem); color:var(--texto-sec); max-width:620px;
    margin:0 auto 30px; line-height:1.5;
    animation:entrar .7s .12s cubic-bezier(.2,.7,.3,1) both;
  }
  .hero-cta{
    display:inline-flex; align-items:center; gap:9px;
    background:var(--rojo); color:var(--blanco); border:none;
    padding:16px 34px; border-radius:40px; font-size:1.02rem; font-weight:bold; cursor:pointer;
    box-shadow:0 8px 26px rgba(227,6,19,.42); text-decoration:none;
    animation:entrar .7s .24s cubic-bezier(.2,.7,.3,1) both;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  }
  .hero-cta:hover{ background:#ff1a2b; transform:translateY(-3px); box-shadow:0 12px 34px rgba(227,6,19,.55); }
  .hero-cta .flecha{ transition:transform .18s ease; }
  .hero-cta:hover .flecha{ transform:translateY(3px); }
  .hero-datos{
    display:flex; justify-content:center; flex-wrap:wrap; gap:10px 26px; margin-top:32px;
    font-size:.86rem; color:#9A9A9A;
    animation:entrar .7s .36s cubic-bezier(.2,.7,.3,1) both;
  }
  .hero-datos span{ display:inline-flex; align-items:center; gap:7px; }
  @keyframes entrar{ from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:none;} }

  /* Accesibilidad: si el usuario pidio menos movimiento, apagamos animaciones */
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration:.001ms !important; animation-iteration-count:1 !important;
      transition-duration:.001ms !important; scroll-behavior:auto !important;
    }
  }
  .catalogo{
    max-width:1300px; margin:0 auto; padding:40px 20px;
    display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:25px;
  }

  /* ===== Foto que no cargo =====
     Reemplaza el icono de imagen rota del navegador por un cartel sobrio con
     el escudo. El espacio ya estaba reservado por el aspect-ratio, asi que
     esto no mueve nada de la pagina. */
  .foto-rota{
    position:relative;
    background:#1A1A1A;
    display:flex; align-items:center; justify-content:center;
  }
  /* Clase repetida a proposito para ganar especificidad: .main-img-wrap ya usa
     su propio ::after para el brillo del hover, y esta declarado MAS ABAJO en
     este archivo. Con una sola clase ganaba aquel por orden y el cartel no se
     veia nunca (verificado: content quedaba vacio). */
  .foto-rota.foto-rota::after{
    content:'Foto no disponible';
    position:absolute; inset:0; z-index:2; opacity:1;
    display:flex; align-items:center; justify-content:center;
    text-align:center; padding:12px;
    font-size:.74rem; font-weight:700; letter-spacing:.04em;
    color:#6A6A6A; text-transform:uppercase;
    background:
      radial-gradient(circle at 50% 38%, rgba(227,6,19,.10), transparent 60%),
      #1A1A1A;
  }

  /* ===== FAVORITOS ===== */
  /* El corazón de cada tarjeta. Abajo a la derecha de la foto: arriba ya
     están los badges de categoría, NUEVO y SIN STOCK. */
  .btn-corazon{
    position:absolute; top:10px; right:10px; z-index:4;
    width:38px; height:38px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(13,13,13,.62); border:1px solid rgba(255,255,255,.18);
    color:#fff; font-size:1.15rem; line-height:1; cursor:pointer;
    font-family:inherit; padding:0;
    transition:transform .15s ease, background .15s ease, color .15s ease;
    /* backdrop-filter para que se lea sobre fotos claras y oscuras por igual */
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  }
  .btn-corazon:hover{ transform:scale(1.12); background:rgba(13,13,13,.8); }
  .btn-corazon:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
  .btn-corazon.marcado{ color:var(--rojo-txt); border-color:var(--rojo-txt); }
  /* Latido corto al marcarlo, para que se note que quedó guardado */
  .btn-corazon.marcado span{ animation:latido .34s ease; }
  @keyframes latido{ 0%,100%{transform:scale(1);} 40%{transform:scale(1.35);} }

  /* Si la tarjeta ya tiene el badge NUEVO arriba a la derecha, el corazón
     baja para no pisarlo. */
  .card:has(.badge-nuevo) .btn-corazon,
  .card:has(.badge-agotado) .btn-corazon{ top:44px; }

  /* Botón del header */
  .btn-favoritos{
    position:relative; display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:50%;
    color:var(--blanco); text-decoration:none; font-size:1.2rem; line-height:1;
    border:2px solid var(--blanco);
    transition:color .18s ease, border-color .18s ease;
  }
  .btn-favoritos:hover{ color:var(--rojo-txt); border-color:var(--rojo-txt); }
  .btn-favoritos:focus-visible{ outline:2px solid var(--rojo-txt); outline-offset:3px; }
  .contador-favoritos{
    position:absolute; top:-4px; right:-4px;
    background:var(--rojo); color:#fff; border-radius:50%;
    min-width:19px; height:19px; padding:0 4px;
    display:flex; align-items:center; justify-content:center;
    font-size:.68rem; font-weight:800;
  }
  .contador-favoritos[hidden]{ display:none; }

  /* ===== ESQUELETOS DE CARGA =====
     Ocupan exactamente el mismo lugar que una tarjeta real (misma grilla,
     mismo aspect-ratio de foto) para que el footer no salte cuando entran
     los productos de verdad. Se borran solos desde shared/catalogo.js. */
  .sk-grid{
    grid-column:1 / -1;
    display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:25px;
  }
  /* El relleno usa el MISMO marcado y las mismas clases que una tarjeta real
     (article.card > .main-img-wrap + .card-body), asi hereda su alto exacto
     en cualquier ancho de pantalla. Antes usaba un aspect-ratio fijo y erraba
     por mas de 100px en mobile, porque el alto del cuerpo de la tarjeta
     cambia entre mobile y desktop. Aca solo se apaga lo que no corresponde. */
  .sk-card{ cursor:default; pointer-events:none; }
  .sk-card .main-img-wrap{ background:#1E1E1E; }
  /* El texto va invisible: solo esta para ocupar el alto que le corresponde */
  .sk-card .card-body > *{ color:transparent; }
  .sk-card .ver-ficha{ background:#242424; }
  .sk-card .precio{ background:none; }
  /* Brillo que recorre el esqueleto para que se lea como "cargando" y no
     como una tarjeta rota. */
  .sk-card::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.045), transparent);
    transform:translateX(-100%);
    animation:sk-brillo 1.3s ease-in-out infinite;
  }
  @keyframes sk-brillo{ to{ transform:translateX(100%); } }
  @media (max-width:640px){
    .sk-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
  }

  /* Espacio reservado de la home: las 3 tarjetas de categoria destacada y las
     de Novedades. Mismo motivo que los de arriba -- las arma JS y sin
     reservarles el lugar, todo lo de abajo saltaba al aparecer. */
  .sk-destacada, .sk-novedad{
    border:1px solid var(--borde); border-radius:12px; background:var(--card);
    position:relative; overflow:hidden;
  }
  .sk-destacada::after, .sk-novedad::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.045), transparent);
    transform:translateX(-100%);
    animation:sk-brillo 1.3s ease-in-out infinite;
  }
  /* La tarjeta destacada real NO es una sola proporcion: es una foto 4/5 mas
     un titulo abajo. Reservarla con un solo aspect-ratio dejaba 216px cuando
     la real mide 490 -- el hueco que faltaba seguia empujando el footer.
     Por eso el relleno copia la misma estructura: foto + franja de titulo. */
  .sk-destacada{ display:flex; flex-direction:column; pointer-events:none; }
  .sk-dest-foto{ width:100%; aspect-ratio:4/5; background:#1E1E1E; }
  .sk-dest-titulo{
    /* mismo alto que el h3 real: padding 16px arriba y abajo + una linea de
       texto de 1.05rem + el borde superior de 3px */
    height:calc(32px + 1.05rem * 1.2 + 3px);
    border-top:3px solid var(--rojo); background:var(--card);
  }
  /* Las de Novedades viven en el carrusel: mismo ancho que una tarjeta */
  .sk-novedad{ aspect-ratio:280/460; }

  /* ===== Encabezado de grupo por equipo (solo /camisetas/) =====
     Ocupa la fila entera de la grilla (1 / -1) para que corte visualmente
     entre un equipo y el siguiente en vez de meterse como una columna mas.
     Deliberadamente discreto: es una senal de orientacion, no un titulo que
     tenga que competir con las fotos de las camisetas. */
  .grupo-equipo{
    grid-column:1 / -1;
    display:flex; align-items:center; gap:14px;
    margin:14px 0 -4px; padding:0;
    font-size:.95rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
    color:var(--texto-sec);
  }
  /* La linea que acompana al nombre se dibuja sola y ocupa lo que sobra, asi
     el encabezado se lee como un separador de seccion a cualquier ancho. */
  .grupo-equipo::after{
    content:""; flex:1 1 auto; height:1px; background:var(--borde);
  }
  /* El primero no necesita despegarse del filtro que tiene justo arriba */
  .grupo-equipo:first-child{ margin-top:0; }

  /* ===== HOME: Categorias destacadas ===== */
  .seccion-destacadas{ max-width:1300px; margin:0 auto; padding:40px 20px 10px; position:relative; z-index:1; }
  .destacadas-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
  .destacada-card{
    display:block; text-decoration:none; border-radius:12px; overflow:hidden;
    background:var(--card); border:1px solid var(--borde);
    transition:transform .18s ease, border-color .18s ease;
  }
  .destacada-card:hover{ transform:translateY(-4px); border-color:var(--rojo); }
  .destacada-card img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; }
  .destacada-card h3{
    padding:16px 14px; text-align:center; font-size:1.05rem; letter-spacing:.3px;
    color:var(--texto); border-top:3px solid var(--rojo); text-transform:uppercase;
  }

  /* ===== HOME: Vistos recientemente =====
     Grilla comun y no carrusel como Novedades: son pocos (maximo 6) y
     ademas cambian en cada visitante, asi que un carrusel con flechas
     seria maquinaria de mas para algo que casi siempre entra en una fila.
     Las tarjetas son las MISMAS de .catalogo (crearTarjetaProducto), asi
     que hereda formato, hover, favoritos y badges sin duplicar nada. */
  .seccion-vistos{ position:relative; z-index:1; max-width:1300px; margin:34px auto 0; padding:0 20px 10px; }
  .seccion-vistos h2{ font-size:1.5rem; letter-spacing:-.3px; margin-bottom:20px; }
  .vistos-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:20px;
  }

  /* ===== HOME: Novedades (carrusel, mismo formato de tarjeta que .catalogo) ===== */
  .seccion-novedades{ position:relative; z-index:1; max-width:1300px; margin:34px auto 0; padding:0 20px 10px; }
  .seccion-novedades h2{ font-size:1.5rem; letter-spacing:-.3px; margin-bottom:20px; }
  .novedades-carrusel{ display:flex; align-items:center; gap:8px; }
  .novedades-viewport{ flex:1; min-width:0; overflow:hidden; }
  .novedades-grid{ display:flex; gap:20px; transition:transform .35s ease; }
  /* Los rellenos de carga van con el MISMO ancho que una tarjeta: si no,
     al ser flex sin base propia colapsan a ancho cero, no reservan altura,
     y la seccion sigue saltando igual cuando entran las novedades. */
  .novedades-grid .card,
  .novedades-grid .sk-novedad{ flex:0 0 calc((100% - 3*20px)/4); min-width:0; }
  .carrusel-flecha{
    flex:0 0 auto; width:44px; height:44px; border-radius:50%;
    background:var(--card); border:1px solid var(--borde); color:var(--texto);
    font-size:1.6rem; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:border-color .15s ease, color .15s ease, opacity .15s ease;
  }
  .carrusel-flecha:hover:not(:disabled){ border-color:var(--rojo-txt); color:var(--rojo-txt); }
  .carrusel-flecha:disabled{ opacity:.3; cursor:default; }
  .carrusel-flecha[hidden]{ display:none; }
  .card{
    border:1px solid var(--borde); border-radius:10px; overflow:hidden;
    box-shadow:0 2px 14px rgba(0,0,0,0.5);
    display:flex; flex-direction:column; background:var(--card);
    position:relative;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .card:hover{
    transform:translateY(-4px);
    border-color:var(--rojo);
    /* Doble sombra = foco de cancha: un halo rojo cercano y una luz difusa detras */
    box-shadow:0 10px 28px rgba(227,6,19,0.28), 0 0 60px rgba(227,6,19,0.14);
  }
  .card:hover .main-img-wrap::after{ opacity:1; }

  /* ===== Spotlight que sigue al cursor (idea del "Spotlight Card" de
     reactbits, en CSS + un listener delegado, ver shared/catalogo.js) =====

     Solo en equipos que REALMENTE tienen cursor: (hover:hover) descarta el
     celular, donde ademas de no haber puntero, el navegador simula un
     :hover pegajoso al tocar que dejaria la luz prendida despues del toque.
     El overflow:hidden y el border-radius de .card ya lo recortan solo. */
  @media (hover:hover) and (pointer:fine){
    /* ===== Tilt 3D (idea del "Tilted Card" de reactbits, en CSS puro) =====
       La tarjeta se inclina siguiendo al cursor. Los grados los calcula el
       mismo listener que ya movia el spotlight (ver shared/catalogo.js), asi
       que no se agrega ni un evento mas.

       perspective va en la TARJETA y no en la grilla: si estuviera en la
       grilla, todas compartirian un mismo punto de fuga y las de los bordes
       se verian deformadas, como miradas de costado. */
    .card{
      transform:
        perspective(900px)
        rotateX(var(--giro-x, 0deg))
        rotateY(var(--giro-y, 0deg));
      transform-style:preserve-3d;
      /* Sin transicion en el giro: tiene que seguir al cursor al instante.
         La transicion se la dejamos al hover de siempre (sombra y borde). */
      transition:box-shadow .18s ease, border-color .18s ease;
    }
    /* El hover levantaba la tarjeta con translateY; ahora eso se combina con
       el giro, asi que va todo en la misma propiedad para no pisarse. */
    .card:hover{
      transform:
        perspective(900px)
        rotateX(var(--giro-x, 0deg))
        rotateY(var(--giro-y, 0deg))
        translateY(-4px)
        scale(1.015);
    }
    .card::after{
      content:''; position:absolute; inset:0; pointer-events:none;
      opacity:0; transition:opacity .3s ease;
      background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
                 rgba(255,255,255,.10), transparent 45%);
    }
    .card:hover::after{ opacity:1; }
  }

  /* Equivalente tactil para el celular: como no hay cursor al que seguir, la
     tarjeta responde al toque hundiendose apenas. Da el mismo "esto es
     tocable" que da el spotlight en desktop, sin depender del hover. */
  @media (hover:none){
    .card{ transition:transform .12s ease, box-shadow .18s ease, border-color .18s ease; }
    .card:active{ transform:scale(.975); border-color:var(--rojo); }
  }
  .main-img-wrap::after{
    content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
    background:radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255,255,255,.13), transparent 70%);
    transition:opacity .25s ease;
  }
  .badge-cat{
    position:absolute; top:10px; left:10px; z-index:2;
    background:var(--negro); color:var(--blanco); font-size:0.7rem; font-weight:bold;
    padding:4px 10px; border-radius:20px; letter-spacing:0.5px;
  }
  .badge-cat.actual{ background:var(--rojo); }
  .badge-cat.accesorios{ background:#2255A4; }
  .badge-cat.giftcard{ background:#B8860B; }
  .main-img-wrap{ position:relative; width:100%; aspect-ratio: 4/5; background:#111; overflow:hidden; }
  .main-img-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
  .thumbs{
    display:flex; gap:6px; padding:8px; overflow-x:auto; background:#141414; border-bottom:1px solid var(--borde);
  }
  .thumbs img{
    width:48px; height:48px; object-fit:cover; border-radius:4px; cursor:pointer;
    border:2px solid transparent; flex-shrink:0;
    /* Fondo de espera: mientras no cargo, se ve un recuadro gris en vez de
       un icono de imagen rota o un hueco vacio. */
    background:#2A2A2A;
  }
  .thumbs img.thumb-lazy:not([src]){ opacity:.55; }
  .thumbs img{ transition:opacity .25s ease, border-color .15s ease; }
  .thumbs img.activo{ border-color:var(--rojo); }
  .card-body{ padding:16px; display:flex; flex-direction:column; flex:1; gap:8px; }
  /* Jerarquia: titulo fuerte > jugador > descripcion > precio destacado */
  .card-body h3{
    font-size:1.08rem; color:var(--texto); font-weight:700; line-height:1.28;
    letter-spacing:-.2px;
    /* 2 lineas fijas: iguala la altura aunque los nombres varien de largo */
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; min-height:2.8em;
  }
  /* El titulo es un <a> real (para que Google lo pueda seguir), pero visualmente
     tiene que verse igual que un texto suelto, no como un link celeste subrayado. */
  .card-body h3 a.link-titulo{ color:inherit; text-decoration:none; }
  .card-body h3 a.link-titulo:focus-visible{ outline:2px solid var(--rojo-txt); outline-offset:2px; }
  .card-body .desc{
    font-size:0.83rem; color:var(--texto-sec); line-height:1.5;
    /* 3 lineas fijas por el mismo motivo */
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
    overflow:hidden; min-height:3.7em;
    transition:none;
  }
  /* Al desplegar sacamos el recorte y mostramos el texto entero */
  .card-body .desc.expandida{
    -webkit-line-clamp:unset; display:block; overflow:visible; min-height:0;
  }
  .ver-mas{
    align-self:flex-start; background:none; border:none; padding:6px 0;
    color:var(--rojo-txt); font-size:.78rem; font-weight:800; cursor:pointer;
    font-family:inherit; text-decoration:underline; min-height:32px;
  }
  .ver-mas:hover{ color:#fff; }
  .ver-mas:focus-visible{ outline:2px solid var(--rojo-txt); outline-offset:2px; border-radius:4px; }
  .jugador-fijo{
    font-size:.75rem; color:#EDEDED; font-weight:700; text-transform:uppercase;
    letter-spacing:.4px; padding:5px 9px; background:#242424;
    border-left:3px solid var(--rojo); border-radius:4px; align-self:flex-start;
  }
  .campo{ display:flex; flex-direction:column; gap:3px; }
  /* Mismo problema que .grupo-subcat: sin esto, ficha-jugador-caja (que usa
     esta clase) queda visible aunque JS le ponga hidden=true. */
  .campo[hidden]{ display:none; }
  .campo label{ font-size:0.75rem; color:#9A9A9A; font-weight:bold; text-transform:uppercase; letter-spacing:.5px; }
  /* Select de JUGADOR con estilo propio (appearance:none + flecha dibujada),
     no el desplegable gris nativo del navegador */
  .campo select{
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    padding:12px 34px 12px 12px; border-radius:8px; border:1px solid #3A3A3A;
    font-size:0.9rem; font-weight:600; min-height:44px;
    background-color:#242424; color:var(--texto); cursor:pointer;
    background-image:
      linear-gradient(45deg, transparent 50%, var(--rojo-txt) 50%),
      linear-gradient(135deg, var(--rojo-txt) 50%, transparent 50%);
    background-position: calc(100% - 17px) center, calc(100% - 11px) center;
    background-size:6px 6px, 6px 6px;
    background-repeat:no-repeat;
    transition:border-color .15s ease;
  }
  .campo select:hover{ border-color:#555; }
  .campo select:focus-visible{ outline:2px solid var(--rojo-txt); outline-offset:2px; border-color:var(--rojo-txt); }

  /* Chips de TALLE: reemplazan al <select> nativo.
     Ademas resuelven el area tactil (antes 38px, minimo recomendado 44px). */
  .chips-talle{ display:flex; flex-wrap:wrap; gap:8px; }
  .chip{
    min-width:46px; min-height:44px; padding:0 13px;
    display:inline-flex; align-items:center; justify-content:center;
    background:#242424; color:var(--texto); border:1.5px solid #3A3A3A;
    border-radius:8px; font-size:.9rem; font-weight:700; cursor:pointer;
    transition:all .15s ease;
  }
  .chip:hover:not(:disabled){ border-color:var(--rojo-txt); transform:translateY(-2px); }
  .chip[aria-pressed="true"]{
    background:var(--rojo); border-color:var(--rojo); color:#fff;
    box-shadow:0 0 0 3px rgba(227,6,19,.25);
  }
  .chip:disabled{
    opacity:.32; cursor:not-allowed; text-decoration:line-through;
  }
  .chip:focus-visible{ outline:2px solid var(--rojo-txt); outline-offset:2px; }

  /* Boton secundario para avisar reposicion */
  .btn-avisar{
    background:transparent; color:var(--rojo-txt); border:1.5px solid var(--rojo-txt);
    text-align:center; padding:12px; border-radius:6px; font-weight:bold; font-size:.9rem;
    cursor:pointer; margin-top:auto; text-decoration:none; display:block;
    transition:background .15s ease, color .15s ease;
  }
  .btn-avisar:hover{ background:var(--rojo-txt); color:#141414; }
  .card-body .precio{ font-size:1.35rem; font-weight:bold; color:var(--rojo-txt); }

  /* ===== DOBLE PRECIO (lista tachado + efectivo destacado) =====
     Lo arma htmlPrecio() en shared/core.js, y se usa igual en la tarjeta del
     catalogo, en la ficha rapida y en las paginas de /p/. Grilla de 2 columnas
     para que el "% OFF" quede al lado del precio de lista y no empuje al
     precio grande, que es el que tiene que leerse primero. */
  .precio-con-lista{
    display:grid; grid-template-columns:auto auto; justify-content:start;
    align-items:center; gap:2px 8px; line-height:1.15;
  }
  .precio-lista{
    grid-column:1; font-size:.82rem; font-weight:600; color:#8A8A8A;
    text-decoration:line-through; text-decoration-thickness:1px;
  }
  .precio-off{
    grid-column:2; justify-self:start;
    font-size:.66rem; font-weight:800; letter-spacing:.04em;
    /* Verde que pasa AA con texto blanco -- el mismo del badge NUEVO */
    background:#18863C; color:#fff; padding:2px 6px; border-radius:20px;
    white-space:nowrap;
  }
  .precio-efectivo{
    grid-column:1 / -1; font-size:inherit; font-weight:inherit; color:inherit;
  }
  .precio-aclaracion{
    grid-column:1 / -1;
    font-size:.66rem; font-weight:600; color:#9A9A9A; letter-spacing:.02em;
  }
  /* En la tarjeta el bloque hereda el tamaño de .precio; el texto chico de
     abajo no tiene que competir con el numero grande. */
  .card-body .precio-con-lista .precio-efectivo{ font-size:1.35rem; }
  .card-agotada .precio-off{ background:#3A3A3A; }
  .aviso{ font-size:0.78rem; color:#FFD34D; background:rgba(255,193,7,0.10);
    border:1px solid rgba(255,193,7,0.30); padding:6px 8px; border-radius:6px; }
  .agotado{ font-size:0.85rem; color:var(--rojo-txt); font-weight:bold; }
  .btn-cart{
    background:var(--rojo); color:var(--blanco); text-align:center;
    padding:13px; border-radius:6px; border:none; font-weight:bold; font-size:0.92rem; cursor:pointer;
    margin-top:auto; transition:background .15s ease, transform .12s ease;
  }
  .btn-cart:hover:not(:disabled){ background:#ff1a2b; transform:translateY(-1px); }
  .btn-cart:disabled{ background:#333; color:#8A8A8A; cursor:not-allowed; }

  /* ===== NEWSLETTER DEL FOOTER ===== */
  /* Visible solo para lectores de pantalla: la etiqueta del campo. El
     placeholder NO alcanza como etiqueta accesible. */
  .sr-solo{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  .news-bajada{ font-size:.84rem; color:var(--texto-sec); line-height:1.5; margin-bottom:10px; }
  .news-fila{ display:flex; gap:8px; }
  .news-form input{
    flex:1 1 auto; min-width:0; min-height:44px; padding:10px 12px;
    background:#1E1E1E; border:1px solid #3A3A3A; border-radius:8px;
    color:var(--texto); font-size:.9rem; font-family:inherit;
  }
  .news-form input::placeholder{ color:#7A7A7A; }
  .news-form input:focus{ outline:2px solid var(--rojo-txt); outline-offset:1px; }
  .news-form button{
    flex:0 0 auto; min-height:44px; padding:10px 16px;
    background:var(--rojo); color:#fff; border:none; border-radius:8px;
    font-weight:700; font-size:.86rem; cursor:pointer; font-family:inherit;
  }
  .news-form button:hover:not(:disabled){ background:#ff1a2b; }
  .news-form button:disabled{ background:#333; color:#8A8A8A; cursor:not-allowed; }
  .news-msg{ font-size:.78rem; margin-top:7px; min-height:1em; }
  .news-msg.error{ color:#FFB4B4; }
  .news-ok{ color:#7BE0A0; font-size:.88rem; font-weight:700; line-height:1.45; }

  /* La foto de una reseña es un boton (se puede ampliar), pero no tiene que
     verse como uno: se le sacan los estilos propios del <button>. */
  .resena-foto-btn{
    display:block; width:100%; padding:0; border:none; background:none;
    cursor:zoom-in; font:inherit; color:inherit;
  }
  .resena-foto-btn:focus-visible{ outline:2px solid var(--rojo-txt); outline-offset:2px; }

  /* ===== Formulario "Avisame cuando haya stock" ===== */
  .form-aviso{
    margin-top:auto; background:#161616; border:1px solid var(--borde);
    border-left:3px solid var(--rojo); border-radius:8px; padding:13px 14px;
  }
  .form-aviso label{ display:block; font-size:.82rem; color:var(--texto-sec); margin-bottom:9px; line-height:1.4; }
  .form-aviso-fila{ display:flex; gap:8px; }
  .form-aviso input{
    flex:1 1 auto; min-width:0; min-height:44px; padding:10px 12px;
    background:#1E1E1E; border:1px solid #3A3A3A; border-radius:8px;
    color:var(--texto); font-size:.9rem; font-family:inherit;
  }
  .form-aviso input::placeholder{ color:#7A7A7A; }
  .form-aviso input:focus{ outline:2px solid var(--rojo-txt); outline-offset:1px; }
  .form-aviso button{
    flex:0 0 auto; min-height:44px; padding:10px 18px;
    background:var(--rojo); color:#fff; border:none; border-radius:8px;
    font-weight:700; font-size:.88rem; cursor:pointer; font-family:inherit;
  }
  .form-aviso button:hover:not(:disabled){ background:#ff1a2b; }
  .form-aviso button:disabled{ background:#333; color:#8A8A8A; cursor:not-allowed; }
  .form-aviso-msg{ font-size:.8rem; margin-top:8px; }
  .form-aviso-msg.error{ color:#FFB4B4; }
  .form-aviso-ok{ color:#7BE0A0; font-size:.9rem; font-weight:700; line-height:1.4; }

  /* Compartir: secundario a proposito -- no tiene que competir con
     "Agregar al carrito", que es la accion principal de la ficha. */
  .btn-compartir{
    width:100%; margin-top:8px; min-height:44px;
    background:transparent; color:var(--texto-sec);
    border:1px solid var(--borde); border-radius:6px;
    padding:11px; font-size:.86rem; font-weight:700; cursor:pointer;
    font-family:inherit;
    display:flex; align-items:center; justify-content:center; gap:7px;
    transition:border-color .15s ease, color .15s ease;
  }
  .btn-compartir:hover{ border-color:var(--rojo-txt); color:var(--rojo-txt); }
  .btn-compartir:focus-visible{ outline:2px solid var(--rojo-txt); outline-offset:2px; }
  footer{
    background:var(--negro); color:var(--blanco); text-align:center;
    padding:30px 20px; margin-top:20px; font-size:0.9rem;
  }
  /* Iba con var(--rojo): sobre el footer oscuro daba ~4:1 y NO pasaba AA.
     Con --rojo-txt pasa, y ademas le damos area tactil (median 19px de alto). */
  footer a{
    color:var(--rojo-txt); text-decoration:none; font-weight:600;
    display:inline-block; padding:11px 6px; min-height:44px; line-height:22px;
  }
  footer a:hover{ text-decoration:underline; }

  /* Carrito */
  #cart-overlay{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:90;
  }
  #cart-drawer{
    display:none; position:fixed; top:0; right:0; width:100%; max-width:420px; height:100%;
    background:#151515; color:var(--texto); z-index:91; flex-direction:column;
    box-shadow:-4px 0 30px rgba(0,0,0,0.7);
  }
  .cart-header{
    flex-shrink:0; background:var(--negro); color:var(--blanco); padding:18px 20px;
    display:flex; justify-content:space-between; align-items:center;
  }
  .cart-header button{ background:none; border:none; color:var(--blanco); font-size:1.5rem; cursor:pointer; }
  /* Todo lo que varia (items, sugeridos, gift card, descuento) comparte
     ESTE UNICO scroll -- antes cada seccion competia por su propio pedazo
     de un flex:column, y con el pie (gift card + descuento + total + boton)
     ya grande, #cart-items quedaba con apenas 50-60px visibles en un
     celular real: la lista de productos EXISTIA y tenia su propio scroll,
     pero se veia como una ranura vacia. min-height:0 es el fix real: sin
     eso, un flex:1 con overflow:auto igual se estira al alto de su
     contenido en vez de recortarse al espacio disponible. */
  .cart-scroll{ flex:1; overflow-y:auto; min-height:0; }
  #cart-items{ padding:15px 20px; }
  .cart-item{
    display:flex; gap:10px; padding:12px 0; border-bottom:1px solid var(--borde); align-items:center;
  }
  .cart-item img{ width:55px; height:65px; object-fit:cover; border-radius:6px; flex-shrink:0; }
  .cart-item-info{ flex:1; font-size:0.85rem; }
  .cart-item-info b{ display:block; font-size:0.88rem; }
  .cart-item-qty{ display:flex; align-items:center; gap:6px; margin-top:4px; }
  .cart-item-qty button{
    width:26px; height:26px; border:1px solid #3A3A3A; background:#242424; color:var(--texto);
    border-radius:4px; cursor:pointer; font-weight:bold;
  }
  .cart-item-qty button:hover{ border-color:var(--rojo-txt); }
  .cart-remove{ color:var(--rojo-txt); background:none; border:none; cursor:pointer; font-size:0.8rem; text-decoration:underline; }
  .cart-empty{ text-align:center; color:#9A9A9A; padding:40px 10px; }
  /* ===== "Agregá a tu compra": accesorios sugeridos en el carrito =====
     Va dentro de .cart-scroll, despues de la lista del pedido. */
  .cart-sugeridos{
    padding:12px 14px 14px; border-top:1px solid var(--borde);
    background:#121212;
  }
  .cart-sugeridos h4{
    font-size:.82rem; color:var(--texto-sec); margin-bottom:9px;
    text-transform:uppercase; letter-spacing:.5px; font-weight:700;
  }
  .sugeridos-carrusel{ position:relative; display:flex; align-items:center; }
  .sugeridos-pista{
    display:flex; gap:10px; overflow-x:auto; scroll-behavior:smooth;
    /* En el celular se desliza con el dedo y engancha en cada tarjeta */
    scroll-snap-type:x mandatory;
    /* La barra de scroll se oculta pero el gesto sigue funcionando */
    scrollbar-width:none; -ms-overflow-style:none;
    /* Que el gesto horizontal no arrastre tambien el drawer entero */
    overscroll-behavior-x:contain;
  }
  .sugeridos-pista::-webkit-scrollbar{ display:none; }
  .sug-card{
    flex:0 0 132px; scroll-snap-align:start;
    background:var(--card); border:1px solid var(--borde); border-radius:9px;
    padding:8px; display:flex; flex-direction:column; gap:6px;
  }
  .sug-card img{
    width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:6px; background:#111;
  }
  .sug-info{ display:flex; flex-direction:column; gap:5px; }
  .sug-nom{
    font-size:.74rem; line-height:1.25; color:var(--texto);
    /* dos lineas y despues puntos suspensivos: los nombres largos
       ("Botella deportiva Seleccion Argentina") desalineaban las tarjetas */
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; min-height:2.5em;
  }
  .sug-precio{ font-size:.86rem; font-weight:700; color:var(--rojo-txt); }
  .sug-opcion{
    width:100%; font-size:.72rem; padding:4px 5px; border-radius:5px;
    background:#1E1E1E; color:var(--texto); border:1px solid #3A3A3A;
  }
  .sug-add{
    width:100%; min-height:32px; border:none; border-radius:6px; cursor:pointer;
    background:var(--rojo); color:#fff; font-weight:700; font-size:.76rem;
    transition:background .15s ease;
  }
  .sug-add:hover{ background:#c0050f; }
  .sug-add-ok{ background:#2E7D32; }
  .sug-flecha{
    position:absolute; top:50%; transform:translateY(-50%); z-index:2;
    width:28px; height:28px; border-radius:50%; cursor:pointer;
    background:rgba(20,20,20,.92); color:var(--texto);
    border:1px solid var(--borde); font-size:1.1rem; line-height:1;
    display:flex; align-items:center; justify-content:center;
  }
  .sug-flecha-izq{ left:-4px; }
  .sug-flecha-der{ right:-4px; }
  /* En celular no hay puntero: las flechas sobran y encima tapan una
     tarjeta. Ahi se desliza con el dedo, que es lo natural. */
  @media (hover:none){ .sug-flecha{ display:none; } }

  .cart-footer{ flex-shrink:0; padding:16px 20px; border-top:1px solid var(--borde); background:#101010; }
  /* .cart-regalo y .cart-giftcard viven ahora en .cart-scroll, no en
     .cart-footer -- ese padding horizontal (20px) que antes heredaban del
     footer va puesto directo aca. */
  .cart-regalo{
    display:flex; align-items:center; gap:8px; font-size:.9rem; color:var(--texto);
    margin:14px 20px 12px; cursor:pointer; min-height:24px;
  }
  .cart-regalo input{ width:18px; height:18px; cursor:pointer; accent-color:var(--rojo); }
  .cart-total-row{ display:flex; justify-content:space-between; font-weight:bold; font-size:1.15rem; margin-bottom:12px; }
  .cart-total-row span:last-child{ color:var(--rojo-txt); }
  #btn-checkout{
    width:100%; background:var(--rojo); color:var(--blanco); border:none; padding:14px;
    border-radius:6px; font-weight:bold; font-size:1rem; cursor:pointer;
  }
  #btn-checkout:hover{ background:#b8050f; }
  /* Debajo del boton de WhatsApp: la duda de "y si mando el mensaje y no me
     contesta nadie" es de las que mas frena una compra por chat. El puntito
     verde hace de "estamos online" sin prometer un horario que no siempre
     se cumple. */
  .cart-respuesta{
    display:flex; align-items:center; justify-content:center; gap:6px;
    font-size:0.82rem; color:#B8B8B8; margin-top:9px; text-align:center;
  }
  .cart-respuesta::before{
    content:''; width:7px; height:7px; border-radius:50%;
    background:#2FAE4E; flex:0 0 7px;
  }
  .cart-note{ font-size:0.75rem; color:#9A9A9A; margin-top:8px; text-align:center; }

  /* ===== TARJETA DE LA GRILLA (solo portada) ===== */
  .card{ cursor:pointer; }
  .card:focus-visible{ outline:3px solid var(--rojo-txt); outline-offset:3px; }
  .talles-resumen{ font-size:.78rem; color:#9A9A9A; letter-spacing:.3px; }
  .ver-ficha{
    margin-top:auto; display:block; text-align:center; padding:11px;
    background:var(--rojo); color:#fff; border-radius:6px; font-weight:700; font-size:.88rem;
  }
  .card:hover .ver-ficha{ background:#ff1a2b; }
  .badge-agotado{
    position:absolute; top:10px; right:10px; z-index:3;
    background:#3a1a1a; color:var(--rojo-txt); border:1px solid var(--rojo-txt);
    font-size:.62rem; font-weight:800; padding:4px 9px; border-radius:20px; letter-spacing:.5px;
  }
  .badge-nuevo{
    position:absolute; top:10px; right:10px; z-index:3;
    /* Era #1FA84C: con el texto blanco encima daba 3.1:1 y NO llegaba al 4.5
       que pide WCAG AA para texto chico (este va en 9.9px). Oscurecido lo
       justo para llegar a 4.65:1 manteniendo el mismo tono de verde -- es el
       mismo criterio que ya se habia usado con --rojo/--rojo-txt mas arriba. */
    background:#18863C; color:#fff;
    font-size:.62rem; font-weight:800; padding:4px 9px; border-radius:20px; letter-spacing:.5px;
  }

  /* "Mas vendido": se marca a mano desde el panel (ver crearTarjetaProducto).
     Va DEBAJO del badge de categoria, sobre la foto: arriba a la derecha ya
     estan NUEVO y SIN STOCK, y a la izquierda esta la categoria, asi que
     este se apila abajo de esa para que nunca se superpongan.
     Ambar con texto oscuro encima: 10,4:1, muy por encima del 4.5 de AA. */
  .badge-vendido{
    position:absolute; top:42px; left:10px; z-index:2;
    background:#FFC107; color:#241a00;
    font-size:.62rem; font-weight:800; padding:4px 9px; border-radius:20px; letter-spacing:.5px;
    box-shadow:0 2px 8px rgba(0,0,0,.4);
  }

  /* Tarjetas sin stock: se ven pero opacadas, para que a simple vista se
     note la diferencia sin tener que leer el badge. La foto sigue siendo
     clickeable e intacta si la mirás en la ficha (el filtro es solo visual,
     en la grilla). */
  .card-agotada .main-img-wrap img{ filter:grayscale(70%) brightness(.6); }
  .card-agotada .card-body{ opacity:.55; }
  .card-agotada:hover .main-img-wrap img{ filter:grayscale(40%) brightness(.75); }
  .card-agotada:hover .card-body{ opacity:.75; }
  .card-agotada .precio{ color:#8A8A8A; }
  .card-agotada:hover{ border-color:#3A3A3A; box-shadow:0 2px 14px rgba(0,0,0,.5); }

  /* ===== Aplicar codigo de gift card (descuento) en el carrito =====
     Esto es aparte del PRODUCTO "Gift Card" del catalogo: uno es la tarjeta
     de regalo que se compra, el otro es el codigo de descuento que se
     genera desde el panel de admin y se canjea en el carrito. */
  .cart-giftcard{ margin:0 20px 14px; }
  .cart-giftcard label{ font-size:.8rem; color:var(--texto-sec); display:block; margin-bottom:6px; }
  .cart-giftcard-fila{ display:flex; gap:8px; }
  .cart-giftcard-fila input{
    flex:1; padding:11px; border-radius:8px; border:1px solid #3A3A3A;
    background-color:#242424; color:var(--texto); font-family:monospace; letter-spacing:1px;
    text-transform:uppercase; min-width:0;
  }
  .cart-giftcard-fila button{
    background:transparent; color:var(--rojo-txt); border:1.5px solid var(--rojo-txt);
    border-radius:8px; padding:0 16px; font-weight:700; cursor:pointer; min-height:44px;
  }
  .cart-giftcard-msg{ font-size:.8rem; margin-top:6px; }
  .cart-giftcard-msg.ok{ color:#2FAE4E; }
  .cart-giftcard-msg.error{ color:var(--rojo-txt); }
  .cart-descuento-info{ font-size:.85rem; color:#2FAE4E; margin-bottom:8px; text-align:right; }

  /* ===== FICHA DEL PRODUCTO ===== */
  #ficha{
    /* Pantalla completa en todos los tamaños, no una ventana flotante.
       overflow:visible dejaba que cualquier contenido de mas agrandara la
       ventana del navegador entero (scroll de pagina) en vez de quedar
       contenido adentro del dialog: por eso el "Agregar al carrito" y las
       miniaturas aparecian recien al scrollear toda la pantalla.
       position:fixed puesto a mano (no confiar en el que le da el navegador
       por defecto a <dialog>, que varia): asi el visor de fotos de adentro,
       que se posiciona "absolute" contra ESTE elemento, sabe siempre y sin
       ambiguedad contra que caja medirse. */
    position:fixed;
    background:var(--card); color:var(--texto); border:none;
    border-radius:0; padding:0; width:100vw; height:100vh;
    max-width:100vw; max-height:100vh; margin:0; inset:0; overflow:hidden;
    overscroll-behavior:contain;
  }
  #ficha::backdrop{ background:rgba(0,0,0,.82); backdrop-filter:blur(3px); }
  #ficha-cerrar{
    position:absolute; top:10px; right:10px; z-index:5;
    width:40px; height:40px; border-radius:50%; border:1px solid var(--borde);
    background:rgba(20,20,20,.9); color:var(--texto); font-size:1.1rem; cursor:pointer;
  }
  #ficha-cerrar:hover{ border-color:var(--rojo-txt); color:var(--rojo-txt); }
  .ficha-grid{
    /* minmax(0,...) y no 1fr a secas: una columna 1fr no baja del ancho minimo
       de su contenido, y eso hacia que la ficha se desbordara 13px en mobile. */
    /* Fila explicita de 100vh: sin esto, el grid ignora la altura del
       contenedor y crece al alto del contenido, forzando scroll de pagina
       entera en vez de quedar contenido en pantalla. */
    display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); grid-template-rows:100vh;
    gap:0; height:100vh; overflow:hidden; border-radius:0;
  }
  .ficha-galeria{ background:#111; padding:18px; display:flex; flex-direction:column; height:100vh; overflow:hidden; overscroll-behavior:contain; }
  .ficha-principal-wrap{
    /* Antes usaba aspect-ratio:4/5 sobre el ANCHO de la columna: en pantallas
       anchas eso daba una altura mayor a la pantalla y forzaba scroll vertical.
       Ahora se limita a lo que queda de alto real, sin depender del ancho. */
    width:100%; flex:1; min-height:0; background:#0F0F0F; border-radius:10px; overflow:hidden;
  }
  /* Zoom EN EL LUGAR de la foto (nada de ventana ni capa superpuesta aparte):
     un overlay a pantalla completa dependia de que su tamaño calzara pixel a
     pixel con el <dialog> que lo contiene, y en algunos celulares ese calculo
     no daba bien y dejaba la foto achicada con un borde negro alrededor. Acá
     en cambio se hace zoom sobre la MISMA caja que ya se ve bien siempre (la
     foto de la ficha), asi no hay una capa nueva que pueda desalinearse.
     touch-action:none: el pellizco/arrastre lo procesa nuestro JS (escala y
     traslado con CSS transform), no el navegador -- por eso no se confunde
     con "deslizar para recargar" ni agranda la pagina entera. */
  .ficha-principal-wrap{ position:relative; touch-action:none; overscroll-behavior:contain; }
  .ficha-principal-wrap img{
    width:100%; height:100%; object-fit:contain; display:block; cursor:zoom-in;
    -webkit-user-select:none; user-select:none; -webkit-user-drag:none;
  }
  .ficha-flecha{
    position:absolute; top:50%; transform:translateY(-50%); z-index:3;
    width:38px; height:38px; border-radius:50%; border:1px solid var(--borde);
    background:rgba(20,20,20,.75); color:var(--texto); font-size:1.3rem; line-height:1;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .ficha-flecha:hover{ background:rgba(227,6,19,.85); border-color:var(--rojo); }
  .ficha-flecha:focus-visible{ outline:2px solid var(--rojo-txt); outline-offset:2px; }
  .ficha-flecha-izq{ left:8px; }
  .ficha-flecha-der{ right:8px; }
  .ficha-zoom-ayuda{
    text-align:center; font-size:.72rem; color:var(--texto-sec); margin-top:6px;
  }
  .ficha-thumbs{ display:flex; gap:8px; margin-top:12px; overflow-x:auto; padding-bottom:4px; flex-shrink:0; }
  .ficha-thumbs img{
    width:62px; height:62px; object-fit:cover; border-radius:7px; cursor:pointer;
    border:2px solid transparent; flex-shrink:0; background:#222;
  }
  .ficha-thumbs img.activo{ border-color:var(--rojo); }

  /* ===== VISOR DE FOTOS (lightbox) =====
     Mismo patron de #ficha que ya sabemos que se ve bien pantalla completa
     en cualquier celular: <dialog> propio, position:fixed explicito,
     100vw/100vh + inset:0. Nada de esto anida adentro de otro dialog. */
  #visor{
    position:fixed; background:#000; color:var(--texto); border:none;
    border-radius:0; padding:0; width:100vw; height:100vh;
    max-width:100vw; max-height:100vh; margin:0; inset:0; overflow:hidden;
    overscroll-behavior:contain;
  }
  #visor::backdrop{ background:rgba(0,0,0,.96); }
  /* Cierre: fade + achique suave en vez de tratar de "volver exacto" al
     lugar de origen -- si el usuario navego a otra foto distinta a la que
     abrio, no hay un origen unico al que volver, y este efecto se siente
     igual de prolijo sin esa fragilidad. */
  #visor.cerrando{ animation:visorCerrar .16s ease forwards; }
  @keyframes visorCerrar{ from{opacity:1;} to{opacity:0; transform:scale(.96);} }
  #visor-cerrar{
    position:absolute; top:14px; right:14px; z-index:5;
    width:44px; height:44px; border-radius:50%; border:1px solid var(--borde);
    background:rgba(20,20,20,.85); color:var(--texto); font-size:1.2rem; cursor:pointer;
  }
  #visor-cerrar:hover{ border-color:var(--rojo-txt); color:var(--rojo-txt); }
  .visor-flecha{
    position:absolute; top:50%; transform:translateY(-50%); z-index:5;
    width:48px; height:48px; border-radius:50%; border:1px solid var(--borde);
    background:rgba(20,20,20,.75); color:var(--texto); font-size:1.6rem; line-height:1;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .visor-flecha:hover{ background:rgba(227,6,19,.85); border-color:var(--rojo); }
  .visor-flecha:focus-visible{ outline:2px solid var(--rojo-txt); outline-offset:2px; }
  .visor-flecha-izq{ left:14px; }
  .visor-flecha-der{ right:14px; }
  .visor-lienzo{
    width:100%; height:100%; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    touch-action:none; cursor:grab;
  }
  .visor-lienzo.arrastrando{ cursor:grabbing; }
  .visor-lienzo img{
    max-width:100%; max-height:100%; object-fit:contain;
    -webkit-user-select:none; user-select:none; -webkit-user-drag:none;
    touch-action:none; will-change:transform;
  }
  /* Sin transition durante el gesto (pellizco/arrastre/rueda): se aplica
     solo "a mano" cuando corresponde (doble click/tap, o el "resorte" al
     soltar), para que el gesto en vivo se sienta inmediato y no atrasado. */
  .visor-lienzo img.con-transicion{ transition:transform .25s cubic-bezier(.2,.7,.3,1); }
  .visor-contador{
    position:absolute; bottom:16px; left:0; right:0; text-align:center;
    color:var(--texto-sec); font-size:.82rem; z-index:5; pointer-events:none;
  }
  @media (max-width:640px){
    .visor-flecha{ width:40px; height:40px; font-size:1.3rem; }
    .visor-flecha-izq{ left:6px; }
    .visor-flecha-der{ right:6px; }
  }
  /* Si el contenido (descripcion larga, muchos talles) no entra en 100vh,
     scrollea SOLO esta columna, no la pagina entera. */
  .ficha-info{ padding:26px 26px 30px; display:flex; flex-direction:column; gap:12px; height:100vh; overflow-y:auto; overscroll-behavior:contain; }
  .ficha-relacionados{ margin-top:6px; }
  .ficha-relacionados h4{ font-size:.82rem; color:#9A9A9A; text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px; }
  .ficha-relacionados-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
  .ficha-relacionado{
    display:block; text-decoration:none; background:var(--card); border:1px solid var(--borde);
    border-radius:8px; overflow:hidden; cursor:pointer; transition:border-color .15s ease;
  }
  .ficha-relacionado:hover{ border-color:var(--rojo-txt); }
  .ficha-relacionado img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; }
  .ficha-relacionado span{ display:block; padding:6px 7px 8px; font-size:.72rem; color:var(--texto); font-weight:600; line-height:1.25; }
  .ficha-relacionado .fr-precio{ color:var(--rojo-txt); font-weight:700; }
  .ficha-cab{ display:flex; align-items:center; gap:10px; }
  .ficha-cab .badge-cat{ position:static; }
  .ficha-equipo{ font-size:.8rem; color:#9A9A9A; font-weight:700; text-transform:uppercase; letter-spacing:.6px; }
  #ficha-titulo{ font-size:1.5rem; line-height:1.2; letter-spacing:-.4px; }
  .ficha-desc{ font-size:.92rem; color:var(--texto-sec); line-height:1.6; }
  .ficha-precio{ font-size:2rem; font-weight:800; color:var(--rojo-txt); }
  /* El #ficha-precio ahora contiene el bloque de doble precio que arma
     htmlPrecio(); el numero grande hereda el tamaño de la ficha. */
  .ficha-precio-caja{ font-size:2rem; font-weight:800; color:var(--rojo-txt); }
  .ficha-precio-caja .precio-lista{ font-size:1rem; }
  .ficha-precio-caja .precio-off{ font-size:.72rem; }
  .ficha-precio-caja .precio-aclaracion{ font-size:.78rem; }
  .ficha-stock{ font-size:.88rem; color:var(--texto-sec); margin-bottom:6px; }
  .ficha-stock.sin-stock{ color:var(--rojo-txt); font-weight:700; }
  /* Poco stock: ambar, NO rojo. En esta ficha el rojo ya significa "sin
     stock", y usarlo tambien para "quedan pocas" haria dudar de si se puede
     comprar o no. */
  .ficha-stock.stock-ultimas{
    color:#FFC107; font-weight:800;
    display:inline-flex; align-items:center; gap:6px;
  }
  .ficha-stock.stock-ultimas::before{ content:'🔥'; font-size:.95em; }
  .ficha-datos{
    list-style:none; margin-top:6px; padding-top:14px; border-top:1px solid var(--borde);
    display:flex; flex-direction:column; gap:8px; font-size:.85rem; color:#9A9A9A;
  }

  /* ===== BARRA DE FILTROS Y BUSCADOR ===== */
  .barra-filtros{
    /* El alto del header cambia entre desktop (96px) y mobile (64px), asi que
       no puede ser un numero fijo: lo mide el JS y lo deja en --alto-header.
       Con top:78px la barra se metia 18px debajo del header en desktop y esa
       franja quedaba tapada e inclicable. */
    position:sticky; top:var(--alto-header, 96px); z-index:40;
    background:rgba(13,13,13,.94); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--borde); padding:14px 20px;
  }
  /* Para que el CTA del hero no deje el catalogo tapado por las barras sticky */
  #catalogo{ scroll-margin-top:calc(var(--alto-header, 96px) + 130px); }
  .filtros-inner{ max-width:1300px; margin:0 auto; display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

  /* Boton para plegar/desplegar los filtros. Oculto en desktop, donde hay
     ancho de sobra y conviene tenerlos siempre a la vista. */
  .toggle-filtros{
    display:none; width:100%; align-items:center; justify-content:space-between;
    gap:10px; background:#1E1E1E; border:1px solid #3A3A3A; border-radius:24px;
    color:var(--texto); padding:0 16px; min-height:46px; cursor:pointer;
    font-family:inherit; font-size:.88rem; font-weight:700;
  }
  .toggle-filtros .tf-der{ color:#9A9A9A; font-weight:600; font-size:.82rem; display:flex; align-items:center; gap:6px; }
  .toggle-filtros .tf-der b{ color:var(--texto); }
  .toggle-filtros .chevron{ transition:transform .25s ease; display:inline-block; color:var(--rojo-txt); }
  .toggle-filtros[aria-expanded="true"] .chevron{ transform:rotate(180deg); }
  .toggle-filtros:focus-visible{ outline:2px solid var(--rojo-txt); outline-offset:2px; }
  /* Puntito rojo: avisa que hay filtros puestos aunque el panel este plegado */
  .punto-activo{
    display:inline-block; width:8px; height:8px; border-radius:50%;
    background:var(--rojo-txt); margin-left:7px; vertical-align:middle;
  }
  /* Mismo problema: sin esto, el puntito de "hay filtros activos" quedaba
     visible siempre, incluso sin ningun filtro puesto. */
  .punto-activo[hidden]{ display:none; }
  /* z-index alto: la lista de sugerencias se despliega POR ENCIMA de la
     grilla de productos, y la barra de filtros es sticky. */
  .buscador{ position:relative; flex:1 1 260px; min-width:200px; z-index:30; }

  /* ===== Sugerencias del buscador ===== */
  .sugerencias{
    position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:40;
    margin:0; padding:6px; list-style:none;
    background:#141414; border:1px solid var(--borde); border-radius:12px;
    box-shadow:0 16px 40px rgba(0,0,0,.65);
    max-height:340px; overflow-y:auto;
  }
  .sugerencias[hidden]{ display:none; }
  .sugerencias li{
    display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:10px;
    padding:8px 10px; border-radius:8px; cursor:pointer;
    /* 44px de alto para que se pueda tocar comodo con el pulgar */
    min-height:44px;
  }
  .sugerencias li:hover,
  .sugerencias li[aria-selected="true"]{ background:#1E1E1E; }
  .sugerencias li img{
    width:38px; height:44px; object-fit:cover; border-radius:5px;
    background:#111; display:block;
  }
  .sug-nombre{
    font-size:.86rem; color:var(--texto); line-height:1.25;
    /* que un nombre largo no rompa la fila */
    overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  }
  .sug-precio{ font-size:.82rem; font-weight:800; color:var(--rojo-txt); white-space:nowrap; }
  .buscador input{
    width:100%; padding:12px 38px 12px 40px; min-height:46px;
    background:#1E1E1E; border:1px solid #3A3A3A; border-radius:24px;
    color:var(--texto); font-size:.94rem;
  }
  .buscador input::placeholder{ color:#8A8A8A; }
  .buscador input:focus{ outline:none; border-color:var(--rojo-txt); box-shadow:0 0 0 3px rgba(227,6,19,.18); }
  .buscador .lupa{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:#8A8A8A; pointer-events:none; }
  .buscador .limpiar{
    position:absolute; right:8px; top:50%; transform:translateY(-50%);
    background:#3A3A3A; color:#DDD; border:none; width:28px; height:28px; border-radius:50%;
    cursor:pointer; display:none; font-size:.9rem; line-height:1;
  }
  .buscador .limpiar.visible{ display:block; }

  .grupo-cat{ display:flex; gap:7px; }
  .filtro-chip{
    padding:0 16px; min-height:46px; display:inline-flex; align-items:center;
    background:#1E1E1E; color:var(--texto-sec); border:1px solid #3A3A3A;
    border-radius:24px; font-size:.88rem; font-weight:700; cursor:pointer;
    transition:all .15s ease; white-space:nowrap;
  }
  .filtro-chip:hover{ border-color:#5A5A5A; color:var(--texto); }
  .filtro-chip[aria-pressed="true"]{ background:var(--rojo); border-color:var(--rojo); color:#fff; }
  .filtro-chip:focus-visible{ outline:2px solid var(--rojo-txt); outline-offset:2px; }

  /* Subcategorias de Accesorios: mismo look que los chips de talle, con texto
     mas largo (ej "Vasos térmicos") asi que sin min-width fijo. */
  .grupo-subcat{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  /* [hidden] tiene la MISMA especificidad que .grupo-subcat (una clase vs un
     atributo, 0-0-1-0 los dos), asi que sin esta regla de mas gana la que
     este ultima en el archivo -- que era la de arriba, dejando el bloque
     visible SIEMPRE aunque hidden=true. Por eso "Accesorios" parecia roto:
     el submenu nunca se ocultaba, quedaba pegado ahi permanentemente. */
  .grupo-subcat[hidden]{ display:none; }
  .chip-subcat{
    padding:0 13px; min-height:44px; display:inline-flex; align-items:center;
    background:#1E1E1E; color:var(--texto-sec); border:1px solid #3A3A3A;
    border-radius:20px; font-size:.83rem; font-weight:700; cursor:pointer;
    font-family:inherit; transition:all .15s ease; white-space:nowrap;
  }
  .chip-subcat:hover{ border-color:#5A5A5A; color:var(--texto); }
  .chip-subcat[aria-pressed="true"]{ background:var(--rojo); border-color:var(--rojo); color:#fff; }
  .chip-subcat:focus-visible{ outline:2px solid var(--rojo-txt); outline-offset:2px; }


  .barra-filtros select{
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    padding:12px 34px 12px 14px; min-height:46px;
    background-color:#1E1E1E; color:var(--texto); border:1px solid #3A3A3A;
    border-radius:24px; font-size:.88rem; font-weight:600; cursor:pointer;
    background-image:
      linear-gradient(45deg, transparent 50%, var(--rojo-txt) 50%),
      linear-gradient(135deg, var(--rojo-txt) 50%, transparent 50%);
    background-position: calc(100% - 17px) center, calc(100% - 11px) center;
    background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
  }
  .barra-filtros select:focus-visible{ outline:2px solid var(--rojo-txt); outline-offset:2px; }

  /* Cartel de "estas parado en la seccion X" (hoy lo usa solo Niños) */
  .aviso-seccion{
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:8px 16px;
    background:#161616; border:1px solid var(--borde);
    border-left:3px solid var(--rojo);
    border-radius:8px; padding:11px 14px; margin-bottom:12px;
    font-size:.88rem; color:var(--texto-sec);
  }
  .aviso-seccion b{ color:var(--texto); }
  .aviso-seccion a{
    color:var(--rojo-txt); text-decoration:none; font-weight:700; white-space:nowrap;
  }
  .aviso-seccion a:hover{ text-decoration:underline; }

  /* Filtro de talles: se pueden marcar varios a la vez */
  .grupo-talles{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .etiqueta-talles{ font-size:.75rem; color:#9A9A9A; font-weight:800; text-transform:uppercase; letter-spacing:.6px; margin-right:2px; }
  .chip-talle-filtro{
    /* 44px es el minimo tactil recomendado (WCAG 2.5.5 / guias de Apple y
       Google). Estaba en 42 y para un chip de una sola letra ("S", "M") esos
       2px se notan cuando se toca con el pulgar. */
    min-width:44px; min-height:46px; padding:0 10px;
    display:inline-flex; align-items:center; justify-content:center;
    background:#1E1E1E; color:var(--texto-sec); border:1px solid #3A3A3A;
    border-radius:10px; font-size:.85rem; font-weight:800; cursor:pointer;
    font-family:inherit; transition:all .15s ease;
  }
  .chip-talle-filtro:hover{ border-color:#5A5A5A; color:var(--texto); }
  .chip-talle-filtro[aria-pressed="true"]{ background:var(--rojo); border-color:var(--rojo); color:#fff; }
  .chip-talle-filtro:focus-visible{ outline:2px solid var(--rojo-txt); outline-offset:2px; }

  .fila-resultados{
    max-width:1300px; margin:0 auto; padding:14px 20px 0;
    display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  }
  .contador-res{ font-size:.85rem; color:#9A9A9A; }
  .contador-res b{ color:var(--texto); }
  .btn-limpiar-todo{
    background:none; border:none; color:var(--rojo-txt); font-size:.85rem;
    font-weight:700; cursor:pointer; text-decoration:underline; padding:8px;
    min-height:44px; display:none;
  }
  .btn-limpiar-todo.visible{ display:inline-block; }

  .sin-resultados{
    grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--texto-sec);
  }
  .sin-resultados .emoji{ font-size:3rem; display:block; margin-bottom:14px; }
  .sin-resultados h3{ color:var(--texto); font-size:1.25rem; margin-bottom:8px; }

  .wrap-cargar-mas{ text-align:center; max-width:1300px; margin:0 auto; padding:0 20px 40px; }
  .btn-cargar-mas{
    background:transparent; color:var(--rojo-txt); border:1.5px solid var(--rojo-txt);
    border-radius:8px; padding:13px 26px; font-weight:700; font-size:.92rem;
    cursor:pointer; min-height:44px; transition:background .15s ease, color .15s ease;
  }
  .btn-cargar-mas:hover{ background:var(--rojo-txt); color:#141414; }
  .btn-cargar-mas[hidden]{ display:none; }

  /* ===== RESEÑAS ===== */
  .seccion-resenas{
    max-width:1300px; margin:0 auto; padding:10px 20px 50px; position:relative; z-index:1;
  }
  .seccion-resenas h2{
    font-size:1.5rem; text-align:center; margin-bottom:26px; letter-spacing:-.3px;
  }
  .resenas-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:20px;
  }
  .resena-card{
    background:var(--card); border:1px solid var(--borde); border-radius:12px;
    padding:20px; display:flex; flex-direction:column; gap:10px;
  }
  .resena-estrellas{ color:#FFC94A; font-size:1.05rem; letter-spacing:2px; }
  .resena-texto{ color:#DDD; font-size:.92rem; line-height:1.55; flex:1; }
  .resena-pie{ display:flex; justify-content:space-between; align-items:center; font-size:.82rem; color:var(--texto-sec); }
  .resena-nombre{ font-weight:700; color:var(--texto); }
  .resena-producto{
    display:inline-block; margin-top:2px; font-size:.76rem; color:var(--rojo-txt);
    text-decoration:none; font-weight:700;
  }
  .resena-producto:hover{ text-decoration:underline; }
  .resena-foto{
    width:100%; max-height:220px; object-fit:cover; border-radius:8px;
    border:1px solid var(--borde);
  }
  .sin-resenas{
    grid-column:1/-1; text-align:center; color:var(--texto-sec); padding:10px 0 6px;
  }

  .resena-cta{ text-align:center; margin-top:26px; }
  .btn-dejar-resena{
    background:transparent; color:var(--rojo-txt); border:1.5px solid var(--rojo-txt);
    border-radius:8px; padding:12px 22px; font-weight:700; font-size:.92rem;
    cursor:pointer; min-height:44px; transition:background .15s ease, color .15s ease;
  }
  .btn-dejar-resena:hover{ background:var(--rojo-txt); color:#141414; }

  .form-resena{
    max-width:560px; margin:22px auto 0; background:var(--card);
    border:1px solid var(--borde); border-radius:12px; padding:22px;
  }
  .form-resena .campo{ margin-bottom:14px; }
  .form-resena input[type="text"],
  .form-resena textarea{
    padding:12px; border-radius:8px; border:1px solid #3A3A3A;
    font-size:0.9rem; background-color:#242424; color:var(--texto);
    font-family:inherit; transition:border-color .15s ease;
  }
  .form-resena input[type="text"]:focus-visible,
  .form-resena textarea:focus-visible,
  .form-resena select:focus-visible{ outline:2px solid var(--rojo-txt); outline-offset:2px; border-color:var(--rojo-txt); }
  .form-resena textarea{ resize:vertical; min-height:90px; }
  .form-resena input[type="file"]{ color:var(--texto-sec); font-size:.85rem; }
  .form-resena .ayuda{ font-size:.75rem; color:var(--texto-sec); margin-top:4px; }

  .estrellas-picker{ display:flex; gap:4px; }
  .estrellas-picker button{
    background:none; border:none; cursor:pointer; font-size:1.6rem; line-height:1;
    color:#4A4A4A; padding:4px; min-width:44px; min-height:44px;
  }
  .estrellas-picker button.activa{ color:#FFC94A; }
  .estrellas-picker button:focus-visible{ outline:2px solid var(--rojo-txt); outline-offset:2px; border-radius:4px; }

  .btn-enviar-resena{
    background:var(--rojo-txt); color:#141414; border:none; border-radius:8px;
    padding:13px 20px; font-weight:800; font-size:.95rem; cursor:pointer;
    min-height:44px; width:100%;
  }
  .btn-enviar-resena:hover{ filter:brightness(1.08); }

  /* ===== BOTON "VOLVER ARRIBA" =====
     Se apila ARRIBA del boton de WhatsApp (que vive en bottom:18px y mide
     58px), para no taparlo. Aparece recien despues de 2 pantallas de scroll,
     ver initVolverArriba() en shared/chrome.js. */
  .btn-arriba{
    position:fixed; right:18px; bottom:88px; z-index:79;
    width:46px; height:46px; border-radius:50%;
    background:rgba(26,26,26,.92); color:var(--texto);
    border:1px solid var(--borde); cursor:pointer;
    font-size:1.15rem; line-height:1; font-family:inherit;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 16px rgba(0,0,0,.5);
    /* Arranca invisible y sin capturar clics; .visible lo trae */
    opacity:0; visibility:hidden; transform:translateY(8px);
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .btn-arriba.visible{ opacity:1; visibility:visible; transform:none; }
  .btn-arriba:hover{ border-color:var(--rojo-txt); color:var(--rojo-txt); }
  .btn-arriba:focus-visible{ outline:2px solid var(--rojo-txt); outline-offset:3px; }

  /* ===== BOTON FLOTANTE DE WHATSAPP ===== */
  .fab-wa{
    position:fixed; right:18px; bottom:18px; z-index:80;
    width:58px; height:58px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 22px rgba(0,0,0,.55); text-decoration:none;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .fab-wa img{ width:58px; height:58px; display:block; border-radius:50%; }

  /* Pulso: un anillo verde que se expande y se desvanece. Va como SEGUNDA
     sombra dentro del mismo box-shadow, asi la sombra negra de siempre
     queda igual y no hace falta un pseudo-elemento que tape el icono.
     3.2s entre pulsos y un anillo que no pasa de 14px: se nota si lo mirás,
     no molesta si estas leyendo. */
  @keyframes pulsoWa{
    0%  { box-shadow:0 6px 22px rgba(0,0,0,.55), 0 0 0 0    rgba(37,211,102,.45); }
    65% { box-shadow:0 6px 22px rgba(0,0,0,.55), 0 0 0 14px rgba(37,211,102,0); }
    100%{ box-shadow:0 6px 22px rgba(0,0,0,.55), 0 0 0 0    rgba(37,211,102,0); }
  }
  .fab-wa{ animation:pulsoWa 3.2s ease-out infinite; }
  /* Al pasar el mouse manda el estado de hover: sin esto la animacion (que
     por cascada le gana a una declaracion normal) se comeria su box-shadow. */
  .fab-wa:hover{ animation:none; }
  .fab-wa:hover{ transform:scale(1.08); box-shadow:0 8px 30px rgba(37,211,102,.55); }
  .fab-wa:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
  /* Iconos chiquitos dentro de los links del footer */
  .ico-inline{ width:18px; height:18px; vertical-align:-4px; margin-right:6px; border-radius:50%; }

  /* ===== MENU HAMBURGUESA (solo mobile, ver @media max-width:640px) ===== */
  #btn-menu{
    display:none; background:transparent; border:2px solid var(--blanco);
    border-radius:10px; width:44px; height:44px; cursor:pointer;
    flex-direction:column; align-items:center; justify-content:center; gap:5px;
  }
  #btn-menu .barra{
    display:block; width:20px; height:2px; background:var(--blanco); border-radius:2px;
    transition:transform .25s ease, opacity .2s ease;
  }
  #btn-menu[aria-expanded="true"] .barra:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  #btn-menu[aria-expanded="true"] .barra:nth-child(2){ opacity:0; }
  #btn-menu[aria-expanded="true"] .barra:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  #btn-menu:focus-visible{ outline:2px solid var(--rojo-txt); outline-offset:3px; }

  #menu-movil{
    display:none; position:fixed; left:0; right:0; z-index:45;
    top:var(--alto-header, 64px);
    background:#141414; border-bottom:1px solid var(--borde);
    box-shadow:0 12px 30px rgba(0,0,0,.6);
    flex-direction:column; padding:8px 0;
  }
  #menu-movil.abierto{ display:flex; }
  .item-menu{
    display:flex; align-items:center; gap:4px;
    padding:15px 20px; min-height:52px;
    color:var(--texto); text-decoration:none; font-size:1rem; font-weight:600;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .item-menu:last-child{ border-bottom:none; }
  .item-menu:hover, .item-menu:focus-visible{ background:#1E1E1E; color:var(--rojo-txt); }

  /* Items expandibles (Productos > Camisetas/Accesorios): son <button>, no <a>,
     para no disparar navegacion; ocupan todo el ancho y muestran una flecha
     que rota al abrirse. Tap para abrir, no hover -- pensado para mobile. */
  .item-expandible{
    width:100%; background:transparent; border:none; border-bottom:1px solid rgba(255,255,255,.06);
    justify-content:space-between; cursor:pointer; font-family:inherit;
  }
  .chevron-menu{ transition:transform .2s ease; color:var(--rojo-txt); }
  .item-expandible[aria-expanded="true"] .chevron-menu{ transform:rotate(180deg); }

  .submenu{ display:flex; flex-direction:column; background:#1A1A1A; }
  /* Mismo cuidado que en el resto del sitio: sin esta regla, [hidden] pierde
     contra el display:flex de arriba y el submenu queda siempre visible. */
  .submenu[hidden]{ display:none; }
  .submenu .submenu-item{ padding-left:34px; }
  .submenu-n2 .submenu-item{ padding-left:48px; font-weight:500; font-size:.94rem; }

  /* ===== FOOTER ===== */
  .footer-grid{
    max-width:1100px; margin:0 auto; display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
    gap:28px; text-align:left; padding-bottom:26px;
  }
  .footer-col h4{
    font-size:.82rem; text-transform:uppercase; letter-spacing:1px;
    color:#8A8A8A; margin-bottom:10px; font-weight:800;
  }
  .footer-col p{ font-size:.9rem; color:var(--texto-sec); line-height:1.6; }
  .footer-marca{ text-align:center; }
  .footer-lema{ font-size:.88rem; color:#8A8A8A; margin-top:2px; }
  .pagos{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
  .pago-badge{
    background:#1E1E1E; border:1px solid var(--borde); border-radius:6px;
    padding:7px 11px; font-size:.78rem; color:var(--texto-sec); font-weight:600;
  }
  .footer-legal{
    border-top:1px solid var(--borde); margin-top:8px; padding-top:18px;
    font-size:.8rem; color:#7A7A7A; text-align:center;
  }

  /* ===== MOBILE: layout propio, no el desktop encogido =====
     Va al FINAL del stylesheet a proposito: si se declara antes que .chip o
     .card-body, las reglas base (misma especificidad) lo pisan por orden. */
  @media (max-width: 640px){
    /* Header en una sola fila: logo + carrito + hamburguesa.
       Los botones sociales se mudan adentro del menu para ganar espacio. */
    header{ padding:10px 14px; flex-wrap:nowrap; gap:8px; }
    .logo-header{ height:42px; }
    /* El logo es el link a la home y su area tactil quedaba en 42px de alto,
       2px por debajo del minimo recomendado. Se agranda SOLO la zona
       tocable (el <a>, que ya es flex y centra): el escudo se sigue viendo
       de 42px, no cambia nada a la vista. */
    header h1.logo-wrap a{ min-height:44px; }
    .header-right{ gap:8px; }
    header a.social-btn{ display:none; }
    .nav-desktop{ display:none; }
    #btn-menu{ display:flex; }
    #btn-cart-open{ padding:0 12px; height:44px; font-size:.85rem; }
    #btn-cart-open .txt{ display:none; }

    /* DOS columnas: entran 2 camisetas por fila en vez de 1 */
    .catalogo{
      padding:18px 12px; gap:12px;
      grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    /* Categorias destacadas: carrusel horizontal con scroll-snap en vez de
       3 columnas apretadas -- mismo criterio "mobile primero" que el resto. */
    .seccion-destacadas{ padding:24px 0 6px; }
    .destacadas-grid{
      display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
      gap:12px; padding:0 14px 6px; grid-template-columns:none;
    }
    .destacada-card{ flex:0 0 72%; scroll-snap-align:start; }

    /* Vistos recientemente: 2 por fila, igual que el catalogo en mobile */
    .seccion-vistos{ padding:0 12px 6px; margin-top:24px; }
    .vistos-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }

    /* Novedades: 2 tarjetas visibles por vez en vez de 4 */
    .seccion-novedades{ padding:0 12px 6px; margin-top:24px; }
    .novedades-grid{ gap:12px; }
    .novedades-grid .card,
    .novedades-grid .sk-novedad{ flex:0 0 calc((100% - 12px)/2); }
    .carrusel-flecha{ width:36px; height:36px; font-size:1.25rem; }

    /* Todo se achica proporcionalmente para que entre en ~169px de ancho */
    .card-body{ padding:11px; gap:7px; }
    .card-body h3{ font-size:.92rem; min-height:2.6em; }
    .card-body .desc{ font-size:.76rem; -webkit-line-clamp:2; min-height:2.4em; }
    .card-body .precio{ font-size:1.15rem; }
    .jugador-fijo{ font-size:.66rem; padding:4px 7px; }
    .campo label{ font-size:.65rem; }
    /* El alto de 44px se mantiene (es lo que importa al tocar); solo baja el ancho */
    .chip{ min-width:42px; min-height:44px; font-size:.82rem; padding:0 8px; }
    .chips-talle{ gap:6px; }
    .campo select{ min-height:44px; font-size:.8rem; padding:10px 28px 10px 9px; }
    .btn-cart, .btn-avisar{ padding:13px 8px; font-size:.85rem; }
    .thumbs{ padding:6px; gap:5px; }
    .thumbs img{ width:38px; height:38px; }
    .badge-cat{ font-size:.6rem; padding:3px 8px; top:7px; left:7px; }

    /* El hero medía 462px (57% de la pantalla) y empujaba el catalogo fuera de
       vista. Compactado, el cliente entra y ya ve camisetas. */
    .hero{ padding:30px 18px 26px; }
    .hero h2{ font-size:1.75rem; margin-bottom:10px; }
    .hero p{ font-size:.92rem; margin-bottom:18px; }
    .hero-cta{ padding:13px 26px; font-size:.95rem; }
    .hero-datos{
      flex-direction:row; flex-wrap:wrap; justify-content:center;
      gap:6px 14px; margin-top:16px; font-size:.72rem;
    }

    /* Filtros plegados por defecto: pasan de 265px a ~65px */
    .barra-filtros{ padding:9px 12px; }
    .toggle-filtros{ display:flex; }
    .filtros-inner{ display:none; gap:9px; padding-top:10px; }
    .filtros-inner.abierto{ display:flex; }
    .fila-resultados{ display:none; }
    .fila-resultados.abierto{ display:flex; }
    .grupo-cat{ width:100%; }
    .filtro-chip{ flex:1; justify-content:center; padding:0 10px; font-size:.83rem; }
    .barra-filtros select{ flex:1 1 46%; font-size:.83rem; }
    .fila-resultados{ padding:10px 12px 0; }

    /* Ficha del producto a una sola columna, imagen arriba e info abajo.
       En desktop cada columna mide 100vh porque estan lado a lado; apiladas
       eso duplicaria el alto y cortaria la mitad de abajo, asi que aca se
       reparte la pantalla entre las dos franjas en vez de 100vh cada una. */
    /* Antes 42vh: las fotos (siempre verticales, 3:4) quedaban chiquitas y
       con mucho espacio vacio a los costados dentro de una caja tan baja y
       ancha. 58vh se acerca mas a la proporcion real de la foto, así se ve
       bien mas grande sin comerse toda la pantalla. */
    .ficha-grid{ grid-template-columns:minmax(0,1fr); grid-template-rows:58vh 1fr; }
    .ficha-galeria{ height:58vh; padding:12px; }
    .ficha-principal-wrap{ aspect-ratio:auto; }
    .ficha-thumbs img{ width:54px; height:54px; }
    .ficha-info{ height:auto; }
    /* El padding de abajo deja lugar para el boton pegado, para que no tape
       los ultimos datos ni los productos relacionados. */
    .ficha-info{ padding:18px 16px 88px; gap:11px; }

    /* ===== "Agregar al carrito" fijo abajo, solo en mobile =====
       En el celular la ficha es una columna larga (foto + datos + talles +
       relacionados) y el boton quedaba a mitad de camino: al scrollear para
       ver las fotos o los relacionados se perdia de vista la accion
       principal y habia que volver a buscarla.

       Va con position:fixed y NO sticky: la ficha es una grilla de dos filas
       con su propio contenedor de scroll adentro, y ahi el sticky no se
       comporta de forma predecible. El <dialog> ocupa toda la pantalla, asi
       que un fixed queda anclado justo donde se necesita.
       El padding-bottom de .ficha-info (88px) reserva el lugar para que la
       barra no tape los ultimos datos. */
    .ficha-info .btn-cart,
    .ficha-info .form-aviso{
      position:fixed; left:0; right:0; bottom:0; z-index:6;
      margin:0; border-radius:0;
      padding:14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
      box-shadow:0 -8px 22px rgba(0,0,0,.55);
    }
    .ficha-info .form-aviso{
      background:#161616; border:none; border-top:2px solid var(--rojo);
    }
    /* Compartir NO se fija: es secundario y ocuparia lugar util de pantalla */
    .ficha-info .btn-compartir{ position:static; }
    #ficha-titulo{ font-size:1.22rem; }
    .ficha-precio{ font-size:1.7rem; }
    .ficha-desc{ font-size:.88rem; }
    #ficha-cerrar{ width:44px; height:44px; top:8px; right:8px; }
  }

  /* ===== AVISO "AGREGADO AL CARRITO" (shared/toast-carrito.js) =====
     Globito que sale al lado del icono del carrito en vez de abrir el cajon
     entero. Los colores son los de la casa (negro, blanco, rojo); lo unico
     verde es el tilde, porque ahi el color ES la informacion: dice "salio
     bien" de un vistazo, sin leer. */
  .toast-carrito{
    /* position:fixed con top puesto por JS (queda justo abajo del boton del
       carrito, que es sticky y se mueve segun el ancho de pantalla).
       Cuando la ficha del producto esta abierta, el JS cuelga este nodo
       ADENTRO del <dialog> -- position:fixed hace que igual se ubique
       contra la pantalla, no contra la ficha. */
    position:fixed; right:16px; left:auto; margin:0;
    width:min(330px, calc(100vw - 32px));
    background:#151515; color:var(--texto);
    border:1px solid var(--borde); border-radius:14px;
    padding:14px 16px 16px; overflow:visible;
    box-shadow:0 18px 44px rgba(0,0,0,.62);
    z-index:80;                      /* arriba del header (60), abajo del cajon (90) */
  }
  /* La flechita que apunta al icono del carrito: un cuadradito girado 45
     grados, tapando el borde de arriba. --toast-flecha lo posiciona el JS. */
  .toast-flecha{
    position:absolute; top:-6px; left:var(--toast-flecha, 260px);
    width:11px; height:11px; background:#151515;
    border-left:1px solid var(--borde); border-top:1px solid var(--borde);
    /* translateX(-50%) para que --toast-flecha sea el CENTRO del rombo y no
       su borde izquierdo: si no, queda corrido media flechita del boton. */
    transform:translateX(-50%) rotate(45deg); border-radius:2px;
  }
  .toast-carrito.sin-flecha .toast-flecha{ display:none; }

  .toast-cerrar{
    position:absolute; top:6px; right:8px;
    width:30px; height:30px; line-height:1;
    background:none; border:none; color:var(--texto-sec);
    font-size:1.35rem; cursor:pointer; border-radius:8px;
  }
  .toast-cerrar:hover{ color:var(--texto); background:#242424; }

  .toast-titulo{
    display:flex; align-items:center; gap:8px;
    font-weight:700; font-size:.95rem; margin:0 26px 12px 0;
  }
  .toast-check{
    flex:0 0 20px; width:20px; height:20px; border-radius:50%;
    background:#2FAE4E; color:#fff; font-size:.72rem;
    display:flex; align-items:center; justify-content:center;
  }

  .toast-item{ display:flex; gap:11px; align-items:flex-start; }
  .toast-item img{
    flex:0 0 56px; width:56px; height:70px; object-fit:cover;
    border-radius:7px; background:#0D0D0D; border:1px solid var(--borde);
  }
  .toast-datos{ min-width:0; display:flex; flex-direction:column; gap:3px; }
  .toast-datos b{
    font-size:.87rem; line-height:1.25; font-weight:600;
    /* Nombres largos ("Camiseta Manchester City Titular 2025/26") se cortan
       en dos lineas en vez de estirar el globito. */
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .toast-detalle{ font-size:.8rem; color:var(--texto-sec); }
  .toast-precio{ font-size:.84rem; color:var(--texto); font-weight:600; }

  .toast-total{
    display:flex; justify-content:space-between; align-items:baseline; gap:10px;
    margin-top:12px; padding-top:10px; border-top:1px solid var(--borde);
    font-size:.85rem; color:var(--texto-sec);
  }
  .toast-total b{ font-size:1.02rem; color:var(--texto); }

  .toast-acciones{ display:flex; gap:8px; margin-top:12px; }
  .toast-acciones button{
    flex:1 1 0; min-height:40px; padding:9px 10px;
    border-radius:40px; font-size:.83rem; font-weight:600;
    cursor:pointer; font-family:inherit; line-height:1.15;
  }
  .toast-seguir{
    background:transparent; color:var(--texto); border:1px solid var(--borde);
  }
  .toast-seguir:hover{ border-color:var(--texto-sec); background:#1E1E1E; }
  .toast-ver{ background:var(--rojo); color:#fff; border:1px solid var(--rojo); }
  .toast-ver:hover{ filter:brightness(1.1); }
  .toast-acciones button:focus-visible,
  .toast-cerrar:focus-visible{ outline:2px solid var(--rojo-txt); outline-offset:2px; }

  .toast-carrito.entrando{ animation:toast-entra .22s ease-out; }
  @keyframes toast-entra{
    from{ opacity:0; transform:translateY(-8px); }
    to{ opacity:1; transform:none; }
  }

  /* En celular ocupa casi todo el ancho y se compacta: foto mas chica,
     los dos botones siguen uno al lado del otro porque son cortos. */
  @media (max-width:560px){
    .toast-carrito{
      right:10px; width:calc(100vw - 20px);
      padding:12px 13px 13px; border-radius:12px;
    }
    .toast-item img{ flex-basis:48px; width:48px; height:60px; }
    .toast-titulo{ font-size:.9rem; margin-bottom:10px; }
    .toast-datos b{ font-size:.84rem; }
    .toast-acciones button{ font-size:.8rem; padding:9px 6px; }
  }

  @media (prefers-reduced-motion:reduce){
    .toast-carrito.entrando{ animation:none; }
  }

  /* ===== SEGUINOS EN INSTAGRAM (shared/instagram.js) =====
     Grilla cuadrada tipo perfil. Las fotos son verticales (3/4), asi que se
     recortan al centro con object-fit para que la grilla quede pareja. */
  .seccion-instagram{
    position:relative; z-index:1; max-width:1300px;
    margin:44px auto 0; padding:0 20px 10px;
  }
  .ig-encabezado{
    display:flex; align-items:center; justify-content:space-between;
    gap:14px; flex-wrap:wrap; margin-bottom:6px;
  }
  .ig-titulo{ display:flex; align-items:center; gap:12px; }
  .ig-titulo h2{ margin:0; }
  .ig-arroba{ color:var(--texto-sec); font-size:.92rem; margin:2px 0 0; }
  .ig-seguir{
    display:inline-flex; align-items:center; justify-content:center;
    min-height:42px; padding:10px 26px; border-radius:40px;
    background:var(--rojo); color:#fff; text-decoration:none;
    font-weight:700; font-size:.9rem;
  }
  .ig-seguir:hover{ filter:brightness(1.1); }
  .ig-bajada{ color:var(--texto-sec); font-size:.92rem; margin:8px 0 18px; }

  .ig-grid{
    display:grid; grid-template-columns:repeat(6, 1fr); gap:10px;
  }
  .ig-foto{
    position:relative; display:block; aspect-ratio:1/1;
    border-radius:10px; overflow:hidden; background:var(--card);
    border:1px solid var(--borde);
  }
  .ig-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
  .ig-foto-tapa{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,.5); opacity:0; transition:opacity .18s ease;
  }
  .ig-foto:hover .ig-foto-tapa,
  .ig-foto:focus-visible .ig-foto-tapa{ opacity:1; }
  .ig-foto:focus-visible{ outline:2px solid var(--rojo-txt); outline-offset:2px; }

  /* En celular no hay hover, asi que la tapa no sirve de nada: se saca y se
     pasa a 3 columnas (2 filas de 3, como el perfil de Instagram). */
  @media (hover:none){
    .ig-foto-tapa{ display:none; }
  }
  @media (max-width:900px){
    .ig-grid{ grid-template-columns:repeat(3, 1fr); gap:8px; }
  }
  @media (max-width:560px){
    .seccion-instagram{ margin-top:34px; padding:0 14px 10px; }
    .ig-encabezado{ gap:10px; }
    .ig-seguir{ min-height:40px; padding:9px 22px; }
    .ig-bajada{ font-size:.86rem; margin-bottom:14px; }
  }
