/* ================================
   Variables
   ================================ */
:root{
  --c-bg:#3a4653;
  --c-card:#e1e1e1;
  --c-text:#000000;
  --c-text2:#ffffff;
  --c-muted:#6a6a6a;
  --c-border:#041842;

  --c-primary:#22c55e;
  --c-primary-600:#16a34a;
  --c-accent:#f97316;

  --radius:12px;
  --shadow-sm:0 4px 10px rgba(0,0,0,.05);
  --shadow-md:0 10px 24px rgba(0,0,0,.08);
}

/* ================================
   Reset / base + sticky footer
   ================================ */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  display:flex;flex-direction:column;
  background:var(--c-bg); color:var(--c-text);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
main{flex:1}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.muted{color:var(--c-muted)}
.center{text-align:center}

/* ================================
   HEADER
   ================================ */
.site-header{position:sticky;top:0;z-index:50}

/* Barra verde con logo + texto */
.title-bar{background:#14542e;color:#fff;padding:10px 0}
.title-brand{display:flex;align-items:center;justify-content:center;gap:12px}
.title-brand img{height:40px;width:auto}
.title-bar h1{margin:0;color:#fff;font-size:1.6rem;font-weight:800;letter-spacing:.3px}

/* Navegación gris oscuro */
.main-nav{background:#232c36}
.main-nav .container{display:flex;justify-content:center;gap:25px;padding:10px 0}
.main-nav a{
  color:#fff;background:#232c36;border:1px solid rgba(255,255,255,.7);
  padding:6px 18px;border-radius:7px;font-weight:700;
  transition:background .15s ease,border-color .15s ease;
}
.main-nav a:hover{background:#2a3442;border-color:#fff}
.main-nav a.active{background:#2f3a49;border-color:#fff}

/* ================================
   Botones base
   ================================ */
.btn{
  display:inline-block;background:var(--c-primary);color:#ffffff;
  padding:10px 26px;border-radius:8px;font-weight:600;
  border:1px solid transparent;transition:background .15s,transform .1s;
}
.btn:hover{background:var(--c-primary-600)}
.btn:active{transform:scale(.98)}
.btn.btn-gray{background:#f97316;border:1px solid #a94e0e;color:#fff}
.btn.btn-gray:hover{background:#a94e0e;border-color:#f97316}

/* ================================
   Carrusel principal (HERO) full-width (9:1, sin recorte)
   ================================ */
.title-bar,.site-header,.main-nav{margin-bottom:0 !important}
.site-header + .carousel.hero,
.main-nav + .carousel.hero{margin-top:0 !important;padding-top:0 !important;border-top:0 !important}

.carousel.hero{
  width:100%;
  max-width:100%;
  border-radius:0;
  margin:0;              /* sin espacios */
  border:0;
}
.carousel.hero .slides{
  display:flex;
  will-change: transform;
  transition: transform .5s ease;
}
.carousel.hero .slide{
  flex:0 0 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  /* reservamos el alto con la misma relación del banner 1800x200 = 9:1 */
  aspect-ratio: 9 / 1;
  background: #232c36; /* por si la imagen tiene transparencias; coincide con la franja gris */
}
.carousel.hero .slide img{
  width:100%;
  height:100%;
  object-fit: contain;   /* muestra la imagen completa */
  object-position: center;
  display:block;
}

/* ================================
   Hero (bloque de título/botones)
   ================================ */
.carousel.hero + .hero-block{margin-top:0;padding-top:0}
.hero-block{
  text-align:center;padding:36px 20px;margin:0 0 24px 0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c-primary) 12%,#ffffff42) 0%,transparent 0%);
  border-radius:var(--radius);
}
.hero-block h2{font-size:2rem;margin-bottom:8px}
.hero-block p{margin-bottom:16px}

/* ================================
   Cards de productos
   ================================ */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin-top:20px}
.product{
  position:relative;background:var(--c-card);border:1px solid var(--c-border);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .15s,box-shadow .15s,border-color .15s;
}
.product:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--c-primary) 25%,var(--c-border))}
.product img{width:100%;height:180px;object-fit:cover}
.pbody{padding:12px;display:flex;flex-direction:column;gap:6px;flex:1}
.prow{margin-top:auto;display:flex;gap:6px;flex-wrap:wrap}
.pill{display:inline-block;background:#f3f4f6;padding:3px 10px;border-radius:999px;font-size:.8rem;color:#374151}
/* Badge destacado */
.product .badge{
  position:absolute;top:8px;right:0;background:var(--c-accent);color:#fff;font-weight:700;font-size:.8rem;
  padding:4px 12px;border-radius:6px 0 0 6px;box-shadow:-2px 2px 6px rgba(0,0,0,.18);white-space:nowrap;pointer-events:none;
}

/* ================================
   Carrusel de LOGOS (4 por slide, centrados)
   ================================ */
.carousel-logos{overflow:hidden}
.carousel-logos .slides{
  display:flex;
  flex-wrap:nowrap;
  transition:transform .5s ease-in-out;
}

.carousel-logos .slide{
  flex:0 0 100%;
  display:grid;
  grid-template-columns: repeat(4, 1fr); /* 4 logos por slide */
  align-items:center;
  justify-items:center;
  gap:24px;
  padding:20px 0;
}

/* Los logos NO fuerzan ancho: ocupan su celda y limitan su tamaño */
.carousel-logos .slide img{
  width:90%;
  max-width:180px;              /* tu objetivo */
  height:auto;
  object-fit:contain;
  transition:transform .25s ease;
}

.carousel-logos .slide img:hover{ transform:scale(1.06) }

/* Responsivo: 3–2–1 columnas para pantallas chicas */
@media (max-width: 1024px){
  .carousel-logos .slide{ grid-template-columns: repeat(3, 1fr); gap:20px; }
  .carousel-logos .slide img{ max-width:200px; }
}
@media (max-width: 768px){
  .carousel-logos .slide{ grid-template-columns: repeat(2, 1fr); gap:16px; }
  .carousel-logos .slide img{ max-width:160px; }
}
@media (max-width: 480px){
  .carousel-logos .slide{ grid-template-columns: 1fr; gap:12px; }
  .carousel-logos .slide img{ max-width:140px; }
}
/* ================================
   WhatsApp flotante (PNG dentro de círculo)
   ================================ */
.wa-float{
  position:fixed;bottom:20px;right:20px;z-index:100;
  width:70px;height:70px;border-radius:50%;
  background:#25d366; /* círculo verde */
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 10px rgba(0,0,0,.2);
  transition:transform .2s,box-shadow .2s;
}
.wa-float img{
  width:60%;height:60%;object-fit:contain; /* usa tu PNG */
}
.wa-float:hover{transform:scale(1.08);box-shadow:0 6px 14px rgba(0,0,0,.3)}
@media (max-width:600px){.wa-float{width:60px;height:60px}}

/* ================================
   Footer
   ================================ */
.site-footer{background:#14542e;color:#fff;padding:32px 16px;margin-top:48px;width:100%}
.footer-grid{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.footer-brand{display:flex;align-items:center;gap:12px;justify-content:center}
.footer-brand img{max-height:48px;width:auto}
.footer-brand .brand-name{font-weight:800;letter-spacing:.3px;font-size:1.1rem;color:#fff}

/* Iconos en colores reales (sin filtros) */
.footer-social{display:flex;gap:16px}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;transition:transform .2s ease,opacity .2s ease}
.footer-social img{width:28px;height:28px;display:block}
.footer-social a:hover img{transform:scale(1.1)}
.footer-copy small{font-size:.9rem;color:#d1d5db}

/* ================================
   Responsive general
   ================================ */
@media (min-width:1280px){
  .container{max-width:1200px}
  .hero-block{padding:48px 0 40px}
  .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
}
@media (min-width:768px) and (max-width:1023px){
  .main-nav a{padding:8px 14px;font-size:15px}
  .hero-block{padding:36px 0 28px}
  .hero-block h2{font-size:28px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
}
@media (max-width:767px){
  .main-nav a{padding:6px 10px;font-size:13px;border-radius:10px}
  .hero-block{padding:22px 0 16px}
  .hero-block h2{font-size:22px}
  .grid{grid-template-columns:1fr;gap:12px}
  .product img{max-height:180px}
}

/* Espaciado entre productos destacados (cards) y carrusel de logos */
#randomGrid {
  margin-bottom: 40px;   /* separación extra debajo de las cards */
}

.brands {
  margin-top: 40px;      /* asegura aire arriba del carrusel de logos */
}

/* ===== Banner de publicidad (bajo la barra gris) ===== */
.promo-banner{
  margin: 0;              /* sin separación con la barra gris */
  padding: 0;
  background: #1f2833;    /* color de fondo por si la imagen tiene transparencia */
}
.promo-banner picture,
.promo-banner img{
  display: block;
  width: 100%;
  height: auto;
}
.promo-banner a{
  display: block;
  line-height: 0;         /* elimina posibles espacios en torno a la imagen */
}

/* Si querés que el banner vaya full-bleed (ignorando .container), descomenta:
.promo-banner{
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}
*/

/* ===== Banner de publicidad ANIMADO (slide horizontal tipo carrusel) ===== */
/* Contenedor y fallback de altura: igual que antes */
.promo-banner{
  position: relative;
  margin: 0;
  padding: 0;
  background: #1f2833;
}
.promo-banner::before{
  content: "";
  display: block;
  width: 100%;
  padding-top: calc(396 / 1856 * 100%); /* 21.34% relación 1856x396 */
}

/* Pista ocupa todo el área */
.promo-banner .banner-slides{
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Dos slides superpuestos; animamos el “swap” deslizándolos */
.promo-banner .banner-slides > a{
  position: absolute;
  inset: 0;
  will-change: transform, opacity;
}

/* Slide 1: visible, luego se desliza a la izquierda */
.promo-banner .banner-slides > a:nth-child(1){
  animation: oepSlideA 12s ease-in-out infinite both;
}

/* Slide 2: entra desde la derecha y se queda, luego se va */
.promo-banner .banner-slides > a:nth-child(2){
  animation: oepSlideB 12s ease-in-out infinite both;
}

.promo-banner .banner-slides img{
  width: 100%;
  height: 100%;
  object-fit: cover;    /* usa 'contain' si preferís no recortar */
  display: block;
}

/* Timeline (12s):
   - 0%–40%: se ve el slide 1
   - 40%–55%: transición; 1 sale a la izq, 2 entra desde la der
   - 55%–95%: se ve el slide 2
   - 95%–100%: “reset” para arrancar otra vez
*/
@keyframes oepSlideA{
  0%   { transform: translateX(0%);    opacity: 1; }
  40%  { transform: translateX(0%);    opacity: 1; }
  55%  { transform: translateX(-100%); opacity: 1; }
  95%  { transform: translateX(-100%); opacity: 0; }
  100% { transform: translateX(0%);    opacity: 1; } /* resetea al inicio */
}

@keyframes oepSlideB{
  0%   { transform: translateX(100%);  opacity: 0; }
  40%  { transform: translateX(100%);  opacity: 0; }
  55%  { transform: translateX(0%);    opacity: 1; }
  95%  { transform: translateX(0%);    opacity: 1; }
  100% { transform: translateX(100%);  opacity: 0; } /* resetea para el próximo ciclo */
}

/* Respeto a accesibilidad: sin animación si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  .promo-banner .banner-slides > a{ animation: none; }
  .promo-banner .banner-slides > a:nth-child(1){ opacity: 1; transform:none; }
  .promo-banner .banner-slides > a:nth-child(2){ opacity: 0; transform:translateX(100%); }
}

/* Botón Ingresar (igual al de Ver catálogo pero naranja) */
.btn-ingresar {
  background-color: #d97706;  /* naranja */
  border: 1px solid #d97706;
  color: #fff;
}

.btn-ingresar:hover {
  background-color: #f59e0b;  /* naranja más oscuro al pasar el mouse */
  border-color: #d97706;
}

.btn, .btn-ingresar {
  cursor: pointer; /* mano al pasar */
  text-decoration: none; /* quita subrayado si fuera <a> */
}

.am-x{
  position:absolute; right:12px; top:8px;
  background:transparent; border:none;
  font-size:22px; font-weight:700; color:#6b7280;
  cursor:pointer;
}
.am-x:hover{ color:#111827; }

.nav-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.nav-links {
  display:flex;
  gap:20px;              /* espacio entre enlaces */
  margin:0 auto;         /* centrado en el contenedor */
}
.nav-links a {
  text-decoration:none;
  font-weight:600;
  color:#fff;            /* o el color que uses para tu nav */
}
.nav-links a.active {
  text-decoration:underline;
}

/* Navegación centrada con links y botón en línea */
.main-nav .container {
  display: flex;
  justify-content: center;
}

.nav-links {
  display: flex;
  gap: 28px;              /* espacio uniforme entre cada elemento */
  align-items: center;
}

.nav-links a {
  text-decoration: none;
  font-weight: 600;
  color: #fff;            /* o el color que uses en el header */
}

.nav-links a.active {
  text-decoration: underline;
}