/* =====================================================================
 * assets/css/portada.css — LOS ESTILOS DE LA PORTADA
 * ---------------------------------------------------------------------
 * POR QUE ESTAN AQUI Y NO DENTRO DEL HTML
 *
 * Estaban en un <style> dentro de index.php. Eso significa que viajaban
 * en CADA carga: la portada, cada vuelta atras, cada recarga. Un bloque
 * dentro del HTML no se puede guardar en cache, porque la cache guarda
 * ARCHIVOS y esto no era un archivo.
 *
 * En un archivo aparte entra bajo la regla que ya existe en .htaccess:
 *
 *     <FilesMatch "\.(css|js)$">
 *       Header set Cache-Control "public, max-age=2592000"
 *
 * Un mes. Asi que el visitante lo descarga UNA vez y en las siguientes
 * paginas no lo pide.
 *
 * Se movio tal cual, sin tocar una regla: mezclar "sacarlo a un archivo"
 * con "de paso lo reordeno" convierte un cambio verificable en uno que
 * hay que revisar entero.
 * ===================================================================== */

.brands-bar{background:var(--fondo);border-top:1px solid var(--borde-suave);border-bottom:1px solid var(--borde-suave);padding:10px 0;}
.brands-inner{max-width:1400px;margin:0 auto;padding:0 25px;display:flex;align-items:center;gap:8px;}
.brands-scroll{display:flex;gap:0;align-items:center;overflow:hidden;flex:1;}
.brands-inner.fit-center .brands-arrow{display:none;}
.brands-inner.fit-center .brands-scroll{justify-content:center;}
.brand-item{flex-shrink:0;padding:8px 20px;border-right:1px solid var(--borde-suave);display:flex;align-items:center;justify-content:center;height:60px;transition:all 0.25s;}
.brand-item img{height:32px;object-fit:contain;max-width:110px;filter:grayscale(100%) opacity(0.55);transition:all 0.25s;}
.brand-item:hover img{filter:grayscale(0%) opacity(1);transform:scale(1.12);}
.brand-item span{font-size:13px;font-weight:700;color:var(--texto-tenue);transition:all 0.25s;}
.brand-item:hover span{color:var(--primario);}
.brands-arrow{background:white;border:1px solid var(--borde);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,0.08);color:var(--texto-suave);}
.brands-arrow:hover{background:var(--fondo-suave);border-color:var(--primario);color:var(--primario);}
.hero{background:var(--primario);position:relative;overflow:hidden;}
.slide{display:none;}.slide.active{display:block;}
.slide img{width:100%;height:auto;max-height:460px;object-fit:cover;object-position:center;display:block;}
/* <picture> es en linea por defecto y dejaria un hueco de unos pixeles
   bajo la imagen. Las reglas de .slide img siguen valiendo: el <img> de
   dentro las hereda igual.
   Ya no hace falta esconder una version con display:none, porque solo se
   emite una: la elige el navegador antes de descargar nada. */
.slide picture{display:block;width:100%;}
@media(max-width:640px){
  .slide img{max-height:300px;}
}
.slide-placeholder{width:100%;height:420px;background:linear-gradient(135deg,var(--primario),var(--primario-suave));display:flex;align-items:center;justify-content:center;}
.slide-text{color:white;text-align:center;}
.slide-text h2{font-size:36px;font-weight:700;margin-bottom:12px;}
.slide-text p{font-size:16px;opacity:.75;margin-bottom:24px;}
.slide-text a{background:var(--acento);color:white;padding:13px 32px;border-radius:8px;font-size:14px;font-weight:600;}
.slider-prev,.slider-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.82);border:none;width:40px;height:40px;border-radius:50%;color:var(--texto);display:flex;align-items:center;justify-content:center;z-index:10;box-shadow:0 2px 12px rgba(0,0,0,.14);cursor:pointer;transition:background .2s,box-shadow .2s;padding:0;}
.slider-prev svg,.slider-next svg{width:18px;height:18px;}
.slider-prev{left:24px;}.slider-next{right:24px;}
.slider-prev:hover,.slider-next:hover{background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.20);}
/* El recorte de "Vistos recientemente" lo hace ahora .products-grid.una-fila,
   igual que en los demas bloques de la portada. Aqui habia una regla propia
   -cinco .product-card encadenados con ~- que escondia la quinta tarjeta a
   partir de 900px: su propio breakpoint, su propia cuenta y su propia idea
   de cuantas caben. Con dos mecanismos para lo mismo, uno se queda atras. */
/* Flechas del slider en móvil: más pequeñas y pegadas al borde */
@media(max-width:640px){
  .slider-prev,.slider-next{width:32px;height:32px;box-shadow:0 2px 6px rgba(0,0,0,.12);}
  .slider-prev svg,.slider-next svg{width:16px;height:16px;}
  .slider-prev{left:8px;}
  .slider-next{right:8px;}
}
.slider-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10;}
.slider-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.5);border:none;cursor:pointer;transition:all .3s;}
.slider-dot.active{background:var(--acento);width:28px;border-radius:5px;}
.promo-section{padding:28px 0;background:var(--fondo-suave);}
.promo-inner{max-width:1400px;margin:0 auto;padding:0 25px;}
.promo-slider-wrap{position:relative;overflow:hidden;border-radius:14px;}
.promo-slider-track{display:flex;transition:transform 0.45s cubic-bezier(.4,0,.2,1);}
.promo-slide{flex-shrink:0;width:calc(100%/3);padding:0 6px;overflow:hidden;border-radius:30px;}
.promo-slide:first-child{padding-left:0;}.promo-slide:last-child{padding-right:0;}
.promo-slide a{display:block;width:100%;overflow:hidden;border-radius:30px;}
.promo-slide img{width:100%;height:180px;object-fit:fill;display:block;border-radius:30px;transition:transform 0.4s ease;}
.promo-slide:hover img{transform:scale(1.04);}
.promo-slider-btn{position:absolute;top:45%;transform:translateY(-50%);background:rgba(255,255,255,0.92);border:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.15);z-index:5;transition:all .2s;}
.promo-slider-btn:hover{background:white;box-shadow:0 4px 12px rgba(0,0,0,0.2);}
.promo-slider-btn svg{width:16px;height:16px;stroke:var(--primario);}
.promo-slider-prev{left:-4px;}.promo-slider-next{right:-4px;}
/* NACE SIN CONTROLES. Se dibujan escondidos y el navegador los muestra
   solo si de verdad hay mas de una pagina en ESTE ancho. Asi no aparecen
   y desaparecen mientras carga, que es lo que pasaba con las flechas de
   categorias y marcas. */
.promo-slider-wrap.sin-nav .promo-slider-btn,
.promo-slider-wrap.sin-nav .promo-slider-dots{display:none;}
.promo-slider-dots{display:flex;justify-content:center;gap:6px;margin-top:10px;}
.promo-slider-dot{width:8px;height:8px;border-radius:50%;background:var(--texto-apagado);border:none;cursor:pointer;transition:all .3s;padding:0;}
.promo-slider-dot.active{background:var(--primario);width:22px;border-radius:4px;}
/* EN MOVIL, PUNTOS Y NO FLECHAS. Las flechas van encima de la imagen y
   en una pantalla estrecha tapan justo la parte que se quiere ver. Los
   puntos van debajo, no estorban y ademas dicen CUANTOS banners hay y
   en cual estas, que las flechas no cuentan. */
/* EN MOVIL SE PASA CON EL DEDO, ASI QUE SOBRAN LAS FLECHAS.
   Ocupan sitio encima del contenido y en una pantalla estrecha tapan
   justo lo que se quiere ver. Marcas y categorias ya se deslizaban solas
   -sus filas llevan overflow-x:auto- y el hero recibe el gesto en
   assets/js/carrusel.js, asi que en los tres casos hay forma de pasar
   sin tocar un boton. */
@media(max-width:700px){
  .slider-prev,.slider-next{display:none;}
  .brands-arrow{display:none;}
  .cats-carousel-btn{display:none;}
  .cats-carousel-wrap{padding:0;}
}
@media(max-width:700px){.promo-slide{width:100%;padding:0;}.promo-slide img{height:180px;}
  .promo-slider-btn{display:none;}
  .promo-slider-dots{margin-top:14px;}}
.section{padding:28px 0;}
.section-inner{max-width:1400px;margin:0 auto;padding:0 25px;}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.section-title{font-size:17px;font-weight:700;color:var(--primario);border-left:4px solid var(--acento);padding-left:12px;}
.section-more{font-size:13px;color:var(--acento);font-weight:600;}
.section-more:hover{text-decoration:underline;}
.bg-white{background:white;}.bg-gray{background:var(--fondo-suave);}
.cats-carousel-wrap{position:relative;padding:0 40px;}
.cats-carousel-wrap.fit-center{padding:0;}
.cats-carousel-wrap.fit-center .cats-carousel-btn{display:none;}
.cats-carousel-wrap.fit-center .cats-row{justify-content:center;}
.cats-carousel-btn{position:absolute;top:50%;transform:translateY(-90%);background:white;border:1px solid var(--borde-suave);width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.1);z-index:5;transition:all .2s;}
.cats-carousel-btn:hover{background:var(--fondo);border-color:var(--primario);}
.cats-carousel-btn svg{width:18px;height:18px;stroke:var(--primario);}
.cats-carousel-btn.cats-prev{left:0;}.cats-carousel-btn.cats-next{right:0;}
.cats-row{display:flex;gap:0;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;}
.cats-row::-webkit-scrollbar{display:none;}
.cat-card{flex-shrink:0;width:calc(100%/6);text-align:center;padding:10px 8px;text-decoration:none;}
/* EL ANILLO CELESTE ES RELLENO DEL CIRCULO, NO PARTE DE LA IMAGEN.
   Asi lo hace sonepar: un circulo de color con la imagen -que trae su
   propio fondo blanco- centrada dentro, dejando un anillo de color
   visible alrededor.

   Se resuelve con padding y no con un porcentaje en la imagen. La
   diferencia importa: con un porcentaje, el grosor del anillo depende de
   cuanto margen traiga dibujado cada imagen, y unas categorias salen con
   anillo y otras sin el. Con padding el anillo mide siempre lo mismo,
   venga la imagen ajustada o suelta.

   box-sizing: border-box para que el padding se descuente de los 140px y
   el circulo no crezca. */
.cat-circle{width:140px;height:140px;box-sizing:border-box;padding:13px;border-radius:50%;background:#C6E2F6;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;transition:background .2s;overflow:hidden;}
/* LOS DOS TONOS DEL ANILLO
   #C6E2F6 en reposo y #A5D3EF al pasar por encima.

   El primero venia siendo #EAF4FD, tan claro que sobre el fondo blanco de
   la seccion casi no se distinguia el anillo. Y el salto al hover era de
   apenas tres puntos de luminosidad: en una pantalla de tienda, con luz
   de dia, no se notaba.

   Se compararon cuatro pares renderizando el circulo de verdad, no
   eligiendo el color a ojo en el editor. Este es el que reproduce la
   referencia: celeste visible en reposo y un salto claro al pasar por
   encima, sin llegar a competir con el producto que va dentro. */

/* HOVER: SOLO COLOR, SIN MOVIMIENTO.
   Aqui hubo dos cosas que se quitaron. Primero un borde NARANJA de 3px
   que no existe en la referencia y que ademas hacia saltar el circulo,
   porque el borde se sumaba al ancho. Despues un scale(1.04) que agrandaba
   la tarjeta al pasar por encima.
   El scale se fue a peticion, y es lo correcto en una fila de seis
   circulos pegados: al crecer uno empuja visualmente a los de al lado y la
   fila entera parece temblar cuando el raton la recorre. Cambiar el color
   ya dice "esto se puede pulsar" sin mover nada de sitio.
   La transicion se deja solo en background: sin transform que animar, no
   hace falta anunciarlo. */
.cat-card:hover .cat-circle{background:#A5D3EF;}
/* La imagen ocupa TODO el hueco que deja el relleno. Como el padding ya
   garantiza el anillo, aqui no hace falta reservar margen con un
   porcentaje: 100% del interior es lo mas grande posible sin comerse el
   anillo. object-fit contain evita cualquier deformacion. */
.cat-circle img{width:100%;height:100%;object-fit:contain;border-radius:50%;}
.cat-label{font-size:12px;color:var(--primario);font-weight:700;line-height:1.4;text-transform:uppercase;letter-spacing:0.5px;}
.banner-products-section{padding:24px 0;}
.bp-inner{max-width:1400px;margin:0 auto;padding:0 25px;}
.bp-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.bp-title{font-size:16px;font-weight:700;color:var(--primario);border-left:4px solid var(--acento);padding-left:12px;}
.bp-more{font-size:13px;color:var(--acento);font-weight:600;}
.bp-more:hover{text-decoration:underline;}
.bp-layout{display:grid;grid-template-columns:280px 1fr;gap:14px;align-items:start;}
.bp-layout.img-derecha{grid-template-columns:1fr 280px;}
.bp-layout.img-derecha .bp-img-wrap{grid-column:2;grid-row:1;}
.bp-layout.img-derecha .carousel-wrap{grid-column:1;grid-row:1;}
.bp-layout .bp-img-wrap{border-radius:12px;overflow:hidden;height:100%;}
.bp-layout .bp-img-wrap img{width:100%;height:100%;object-fit:cover;display:block;}
.bp-layout .carousel-wrap{min-width:0;overflow:hidden;}
.bp-banner{border-radius:12px;overflow:hidden;width:280px;flex-shrink:0;min-height:300px;background:linear-gradient(135deg,var(--primario),var(--primario-suave));display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;position:relative;}
.bp-banner img.banner-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;}
.bp-banner-content{position:relative;z-index:1;}
.bp-banner-logo{max-width:140px;max-height:60px;object-fit:contain;margin-bottom:14px;filter:brightness(0) invert(1);}
.bp-banner h3{color:white;font-size:18px;font-weight:700;margin-bottom:8px;}
.bp-banner p{color:rgba(255,255,255,.75);font-size:12px;margin-bottom:16px;line-height:1.5;}
.bp-banner a.bp-cta{background:var(--acento);color:white;padding:10px 20px;border-radius:8px;font-size:13px;font-weight:600;display:inline-block;}
.bp-banner a.bp-cta:hover{background:var(--acento-hover);}
.carousel-wrap{position:relative;}
.carousel-track-outer{overflow:hidden;}
.carousel-track{display:flex;gap:12px;transition:transform .4s ease;}
.carousel-track .product-card{min-width:0;width:calc(25% - 9px);flex-shrink:0;}
.carousel-wrap.fit-center .carousel-btn{display:none;}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);background:white;border:1px solid var(--borde-suave);width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.1);z-index:10;transition:all .2s;}
.carousel-btn:hover{background:var(--fondo);border-color:var(--primario);}
.carousel-btn svg{width:16px;height:16px;stroke:var(--primario);}
.carousel-btn.cprev{left:4px;}.carousel-btn.cnext{right:4px;}
.carousel-dots{display:flex;justify-content:center;gap:6px;margin-top:12px;}
.carousel-dot{width:8px;height:8px;border-radius:50%;background:var(--borde);border:none;cursor:pointer;transition:all .3s;}
.carousel-dot.active{background:var(--acento);width:20px;border-radius:4px;}
.banner-full-section{padding:16px 0;}
.banner-full-inner{max-width:1400px;margin:0 auto;padding:0 25px;}
.banner-full-img{width:100%;border-radius:12px;overflow:hidden;display:block;}
.banner-full-img img{width:100%;height:auto;display:block;border-radius:12px;}
/* Ya no hace falta esconder una version: solo se emite la que toca.
   <picture> es en linea por defecto y dejaria un hueco bajo la imagen. */
.banner-full-img picture{display:block;width:100%;}
.products-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}

/* =====================================================================
   UNA SOLA FILA — .products-grid.una-fila
   ---------------------------------------------------------------------
   El bloque manda 5 tarjetas, que es lo que cabe en la fila mas ancha.
   En pantallas menores caben menos, y las que sobran se esconden en vez
   de bajar a una segunda fila.

   POR QUE UNA FILA Y NO DOS
   La portada es un indice, no un catalogo: ensena una muestra y manda al
   listado completo con "Ver todos", que esta justo al lado del titulo.
   Con dos filas, un bloque empujaba a los de abajo fuera de la pantalla y
   el visitante no llegaba a ver que habia mas secciones.

   COLUMNAS Y RECORTE VAN JUNTOS, SIEMPRE.
   Cada media query define las columnas Y hasta que tarjeta se ve, pegadas
   una debajo de otra. Escritas por separado se desincronizan: bastaria
   cambiar las columnas de 3 a 4 y olvidar el nth-child para que quedara
   una fila de 3 y otra de 1.

   VA EN UNA CLASE APARTE Y NO EN .products-grid.
   La misma clase la usan productos.php -el catalogo- y producto.php -los
   relacionados-, donde recortar a una fila esconderia el contenido de la
   pagina. Solo la portada pide el modificador.

   SE CUENTAN TARJETAS, NO HIJOS.
   La primera version usaba `> :nth-child(n+6)` y escondia una tarjeta de
   mas: se veian 4 en PC en vez de 5. La causa es que product_card.php
   emite su <script> UNA sola vez, justo detras de la primera tarjeta, y
   ese <script> es un hijo mas de la rejilla:

       hijo 1  tarjeta 1
       hijo 2  <script>      <- corre la numeracion a partir de aqui
       hijo 3  tarjeta 2
       ...
       hijo 6  tarjeta 5     <- :nth-child(n+6) la escondia

   El <script> no ocupa celda -es display:none-, asi que la rejilla seguia
   con sus 5 columnas y la ultima quedaba vacia.

   :nth-of-type cuenta solo entre hermanos del MISMO tipo, asi que los
   <article> llevan su cuenta y el <script> la suya. Se nombra ademas
   .product-card para que la regla diga que esconde tarjetas, no
   "elementos en la posicion N".
   ===================================================================== */
.products-grid.una-fila > .product-card:nth-of-type(n+6){display:none;}

@media(max-width:1100px){
  /* Tablet: 3 */
  .products-grid.una-fila{grid-template-columns:repeat(3,1fr);}
  .products-grid.una-fila > .product-card:nth-of-type(n+4){display:none;}
}
@media(max-width:700px){
  /* Telefono: 2 */
  .products-grid.una-fila{grid-template-columns:repeat(2,1fr);}
  .products-grid.una-fila > .product-card:nth-of-type(n+3){display:none;}
}
@media(max-width:1100px){
  /* Imagen + 3 cards */
  .bp-layout{grid-template-columns:220px 1fr;}
  .bp-layout.img-derecha{grid-template-columns:1fr 220px;}
  .bp-layout.img-derecha .bp-img-wrap{grid-column:2;grid-row:1;}
  .bp-layout.img-derecha .carousel-wrap{grid-column:1;grid-row:1;}
  .bp-layout.img-derecha .bp-banner,.bp-layout.img-derecha .carousel-wrap{order:unset;}
  .bp-banner{min-height:160px;}
  .carousel-track .product-card{min-width:calc(33.333% - 8px);width:calc(33.333% - 8px);}
  .products-grid{grid-template-columns:repeat(3,1fr);}
  .cat-card{width:calc(100%/4);}
  /* El anillo se estrecha con el circulo. Con el padding fijo de 13px, a
     76px de diametro el anillo se comia un tercio del hueco y el producto
     quedaba diminuto en el telefono. */
  .cat-circle{width:110px;height:110px;padding:10px;}
}
@media(max-width:860px){
  /* Sin imagen, 3 cards */
  .bp-layout,.bp-layout.img-derecha{grid-template-columns:1fr;}
  .bp-layout .bp-img-wrap,.bp-layout.img-derecha .bp-img-wrap{display:none !important;}
  .bp-layout.img-derecha .carousel-wrap{grid-column:1;grid-row:1;}
  .carousel-track .product-card{min-width:calc(33.333% - 8px);width:calc(33.333% - 8px);}
}
@media(max-width:640px){
  /* Sin imagen, 2 cards */
  .carousel-track .product-card{min-width:calc(50% - 6px);width:calc(50% - 6px);}
}
@media(max-width:700px){
  .products-grid{grid-template-columns:repeat(2,1fr);}
  .cats-carousel-wrap{padding:0 32px;}
  .cat-card{width:calc(100%/3);}
  .cat-circle{width:90px;height:90px;padding:8px;}
  .cat-label{font-size:10px;letter-spacing:0;}
  .brands-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .brands-scroll::-webkit-scrollbar{display:none;}
  .brand-item{padding:6px 14px;height:48px;}
  .brand-item img{height:24px;}
  .bp-banner{display:none;}
  .carousel-wrap .carousel-btn{display:none !important;}
  .carousel-track-outer{overflow:visible !important;}
  .carousel-track{display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:10px !important;transform:none !important;transition:none !important;}
  .carousel-track .product-card{min-width:unset !important;width:100% !important;}
  /* Solo 4 productos en móvil: 2 filas de 2.
     Se cuenta entre tarjetas, no entre hermanos (puede haber <style>/<script>). */
  .carousel-track .product-card ~ .product-card ~ .product-card ~ .product-card ~ .product-card{display:none !important;}
  .carousel-dots{display:none;}
}
@media(max-width:400px){.cat-card{width:calc(100%/3);}.cat-circle{width:76px;height:76px;padding:7px;}}

/* Titulo solo para buscadores: se lee pero no se ve. Estaba en un
   <style> suelto de 135 bytes dentro de index.php. */
.h1-seo{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}