/* ============================================================
   RESPONSIVE - @media del modulo Home, agrupados aqui.
   Se carga al final para que gane la cascada sobre las reglas
   base equivalentes. Los bloques de Producto/Personalizador/
   Checkout se agregan cuando se construyan esos modulos.
   ============================================================ */

/* Barra de envio gratis - al ser un marquee (texto en una sola linea que
   se desplaza) ya no hace falta acomodar 2 lineas como antes; solo se
   achica un poco la letra para movil. */
  @media (max-width:900px){
    .tf-announce-bar{padding:9px 0;}
    .tf-announce-group span{font-size:11px;padding:0 20px;}
    .tf-shipping-progress{padding:7px 20px;}
    .tf-shipping-progress p{font-size:10.5px;}
  }

/* Header en movil - "backdrop-filter:blur()" combinado con
   "position:sticky" (que ahora vive en ".tf-sticky-top", el contenedor
   de header.php - ver components.css seccion 00) es una combinacion con
   un bug de renderizado conocido en Chrome para Android: aparece una
   linea/costura fina justo en el borde del elemento con blur, mas
   visible cuanto mas se desplaza la pagina. En vez de perseguir esa
   costura con mas capas/trucos, se quita el desenfoque en movil (no
   hace falta ahi, la pantalla es mas chica) y se sube la opacidad del
   fondo para compensar - header solido en vez de translucido, mismo
   look oscuro, sin el bug. */
  @media (max-width:900px){
    header{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(13,11,8,.98);}
  }

/* Header - menu hamburguesa (panel lateral).
   Todas las propiedades de posicion/tamano llevan !important: Woodmart
   trae sus propios estilos genericos para "nav"/menus moviles con la
   misma especificidad, y ganaban la cascada por cargar despues (mismo
   patron que ya paso con el fondo y los titulos en otras partes del
   sitio). */
  @media (max-width:900px){
    .nav-toggle{display:flex !important;}
    body.nav-open .nav-toggle .icon-burger{display:none !important;}
    body.nav-open .nav-toggle .icon-close{display:block !important;}

    /* Fondo/borde en valores fijos (no "var(--bg-raised)"/"var(--line)")
       a proposito - el cliente pidio el 2026-08-06 que el menu hamburguesa
       sea SIEMPRE oscuro, sin importar si se abre desde una pagina de
       catalogo (oscura) o desde Carrito/Checkout/Cuenta (claras, ver
       brand.css). El texto de los links de abajo (".primary a") ya era
       "#fff" fijo, no variable - sin fijar tambien el fondo aqui, se
       hubiera visto texto blanco sobre un panel blanco en esas 3 paginas. */
    nav.primary{
      display:flex !important;flex-direction:column;align-items:stretch;gap:0;
      position:fixed !important;top:0 !important;left:0 !important;right:auto !important;
      height:100vh !important;width:76vw !important;max-width:300px !important;
      background:#141414;border-right:1px solid #3d3d3d;border-left:none;
      padding:100px 30px 30px;box-shadow:14px 0 40px rgba(0,0,0,.5);
      transform:translateX(-100%) !important;transition:transform .3s ease;
      z-index:200;overflow-y:auto;
    }
    body.nav-open nav.primary{transform:translateX(0) !important;}
    /* display:flex (no el inline por defecto de un <a>) para que la fila
       completa - texto + insignia "Nuevo"/"Popular" si tiene - quede
       centrada verticalmente y la insignia se vaya sola a la derecha
       (justify-content:space-between). Sin esto la insignia estiraba la
       altura de la fila de forma pareja y la linea divisoria de abajo
       quedaba a mitad de la fila en vez de al fondo. */
    nav.primary a{
      display:flex !important;align-items:center;justify-content:space-between;gap:10px;
      padding:16px 0;font-size:14px;letter-spacing:.06em;color:#fff;
      border-bottom:1px solid #3d3d3d;
    }
    nav.primary a:last-child,
    nav.primary a.tf-nav-account-link{border-bottom:none;}
    /* "Inicio" (primer item) en dorado, igual que "Mi Cuenta" (el ultimo)
       - pedido del cliente el 2026-08-06: asi se veia antes, cambio sin
       querer al fijar "color:#fff" para todos los items del menu de una
       sola vez (fix del 2026-08-06 anterior, mismo dia). */
    nav.primary a:first-child{color:var(--gold) !important;}
    /* "Iniciar Sesion/Registrarse": aparece solo aqui, al final del
       panel movil (ver .tf-nav-account-link{display:none} de base). */
    .tf-nav-account-link{
      display:flex !important;margin-top:8px;padding-top:20px !important;
      border-top:1px solid #3d3d3d;color:var(--gold) !important;font-weight:600;
    }

    /* z-index:90, NO 190: nav.primary vive DENTRO de <header>, que tiene
       su propio z-index:100 (position:sticky). Un z-index alto en el
       backdrop (hermano de <header>, no descendiente) le gana a TODO el
       header como bloque -incluido el menu de adentro- sin importar que
       nav.primary tenga z-index:200, porque ese 200 solo compite dentro
       del contexto interno del header, no hacia afuera. Con 90 (menor
       que el 100 del header), el backdrop queda debajo del header
       completo, y los toques llegan a los enlaces del menu en vez de
       cerrarlo por error. */
    .nav-backdrop{
      display:block;position:fixed;inset:0;background:rgba(10,8,6,.65);
      opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:90;
    }
    body.nav-open .nav-backdrop{opacity:1;pointer-events:auto;}
    body.nav-open{overflow:hidden;}
  }

/* Hero.
   La resolucion real de las fotos ya se confirmo correcta (4096x2457,
   sin srcset ni recompresion) - eso ya se descarto como causa. Lo que
   queda: combinar "filter" (saturate/contrast) CON una animacion
   continua de "transform" (el Ken Burns) sobre la misma imagen obliga a
   varios navegadores moviles (sobre todo Chrome/Android) a componer esa
   capa a una resolucion interna MAS BAJA por rendimiento, y despues
   estirarla para llenar la pantalla - eso produce el borroneo en el
   celular sin importar la calidad del archivo original, porque el
   borroneo lo genera el propio renderizado, no la foto. En escritorio
   (GPU mucho mas potente) ese mismo proceso no necesita bajar la
   resolucion. Se quitan el filtro Y la animacion solo en movil (el
   desktop, ya aprobado, sigue exactamente igual) para que el navegador
   pinte la imagen directo a su resolucion nativa. */
  @media (max-width:900px){
    /* 560px -> 480px (2026-08-05): confirmado en vivo que la foto actual
       del Hero mide 1600x960px reales (tanto el archivo "-scaled" como el
       original que subio WordPress - no es una recompresion del lado del
       servidor). A 480px de alto en pantalla, un celular retina (2x)
       necesita 960px fisicos de alto para verse nitido - exactamente lo
       que la foto tiene. Con los 560px de antes hacian falta 1120px
       fisicos, 160px mas de los que la foto real tiene, y esa diferencia
       es el borroneo que se ve. Bajar la altura no es lo mismo que el bug
       ya resuelto de mas arriba (animacion+filtro forzando una capa GPU
       de menor resolucion) - ese sigue intacto y sigue haciendo falta,
       esto es una causa distinta y nueva. */
    .hero{min-height:480px;}
    .hero-inner{padding:0 22px;}
    .hero-arrow{display:none;}
    /* "filter:none" (antes) quitaba TAMBIEN el realce de saturacion/
       contraste que la foto SI tiene en escritorio (".hero-slide img"
       base, pages.css: "saturate(1.15) contrast(1.08)") - una foto sin
       ese realce se ve mas plana/lavada, que facilmente se percibe como
       "borrosa" aunque la nitidez real no cambie. El bug de fondo
       (2026-08-04) necesitaba filter Y una animacion CONTINUA de
       transform juntos para forzar la capa GPU de baja resolucion en
       movil - con la animacion ya deshabilitada abajo, se puede devolver
       el mismo realce de escritorio sin reactivar ese bug. */
    .hero-slide img{opacity:.72;filter:saturate(1.15) contrast(1.08) !important;animation:none !important;transform:none !important;}
  }

/* Trust Indicator */
  @media (max-width:900px){.trust-grid{grid-template-columns:repeat(2,1fr);}.trust-item{border-left:none !important;padding:30px 22px;}.trust-item:nth-child(odd){border-right:1px solid var(--line) !important;}}
  @media (max-width:560px){.trust-grid{grid-template-columns:1fr;}.trust-item:nth-child(odd){border-right:none !important;}.trust-item+.trust-item{border-top:1px solid var(--line);}}

/* Como Funciona - en movil se convierte en carrusel horizontal deslizable
   (scroll-snap nativo, sin JS: el mismo patron que ya usaba Testimonios
   antes de agregarle autoplay) en vez de los 3 pasos apilados. */
  @media (max-width:900px){
    .steps{
      display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
      margin:0 -28px;padding:4px 28px 14px;
    }
    .step{flex:0 0 82%;scroll-snap-align:center;padding:0;}
    .step + .step{border-left:none;border-top:none;padding-top:0;}
  }

/* Category Tile */
  @media (max-width:900px){.cat-grid{grid-template-columns:repeat(2,1fr);}}

/* F27 del Home - carrusel horizontal deslizable en movil. Todo escopado
   a ".f27-plist" (el mini-listado de 3 productos del Home), NUNCA a
   ".f27-card" suelto - de lo contrario se filtra tambien al catalogo/
   categoria completo (".archive-grid"), que usa el mismo componente de
   tarjeta pero necesita quedarse como grilla normal. */
  @media (max-width:900px){
    /* 480px -> 450px (2026-08-05): mismo ajuste y mismo motivo que el
       Hero (ver arriba) - la foto real de F27 mide 1600x900px. A 450px
       de alto en pantalla, un celular retina (2x) necesita 900px
       fisicos de alto, calzando exacto con la foto real. */
    .f27-banner{min-height:450px;}
    .f27-inner{padding:0 22px;}
    .f27-arrow{display:none;}
    /* Mismo ajuste que ya se aplico al Hero (ver arriba) por el mismo
       motivo: animacion continua (transform) forzando una capa GPU de
       menor resolucion en movil - se aplica aqui de una vez, antes de
       que este carrusel nuevo tenga el mismo problema. */
    .f27-slide img{opacity:.8;animation:none !important;transform:none !important;}
    .f27-plist{
      display:flex;gap:18px;grid-template-columns:none;
      overflow-x:auto;scroll-snap-type:x mandatory;
      margin:0 -28px;padding:4px 28px 14px;
    }
    .f27-plist .f27-card{flex:0 0 70%;scroll-snap-align:center;}
  }

/* Catalogo/categoria completo (Combos, Productos, F27) - grilla normal
   de 2 columnas en tablet/movil, sin carrusel. */
  @media (max-width:900px){.archive-grid{grid-template-columns:repeat(2,1fr);}}

/* Combos: feat-row + combo-grid.
   feat-row se usa en 2 lugares (Combos Chocolateros y Como Funciona) con
   4 iconos cada uno - en movil pasa de columna unica a grilla 2x2. */
  @media (max-width:900px){
    .feat-row{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 20px;justify-content:stretch;}
  }
  @media (max-width:900px){.combo-grid{grid-template-columns:repeat(2,1fr);}}
  /* Celular: 2 columnas x 3 filas, tarjetas compactas (imagen + nombre +
     precio + boton, sin descripcion larga - grilla densa tipo catalogo). */
  @media (max-width:560px){
    .combo-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
    .combo-card{padding:12px;}
    .combo-card .badge{font-size:9px;padding:4px 8px;margin-bottom:10px;}
    .combo-card .ph{margin-bottom:10px;}
    .combo-card h4{font-size:12.5px;margin-bottom:4px;}
    .combo-card .desc{display:none;}
    .combo-card .price{font-size:16px;margin-bottom:8px;}
    .combo-card .btn{padding:9px 10px;font-size:10px;gap:6px;}
  }

/* Feature Card ("Por Que Elegirnos") - mismo patron de carrusel horizontal
   deslizable que Como Funciona y F27. En desktop .why-grid usa un truco de
   grid-gap+background para simular divisores finos entre celdas; ese
   truco no aplica a un carrusel horizontal, asi que en movil se
   desactiva y cada tarjeta lleva su propio borde, igual que las demas
   tarjetas de los otros carruseles. */
  @media (max-width:900px){
    .why-grid{
      display:flex;gap:16px;background:none;border:none;
      overflow-x:auto;scroll-snap-type:x mandatory;
      margin:0 -28px;padding:4px 28px 14px;
    }
    .why-card{flex:0 0 85%;scroll-snap-align:center;border:1px solid var(--line);}
    .why-card p{font-size:13px;}
  }

/* Testimonial */
  @media (max-width:900px){.testi-arrow{display:none;}}
  @media (max-width:700px){.stat-row{grid-template-columns:1fr;}.stat+.stat{border-left:none;border-top:1px solid var(--line);}}

/* Franja de pagos/envios */
  @media (max-width:700px){.pay-inner{grid-template-columns:1fr;}.pay-col+.pay-col{border-left:none;border-top:1px solid var(--line);}}

/* Footer */
  @media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;}}