:root{
  --rf-red:#d32f2f;
  --rf-red-700:#b71c1c;
  --rf-dark:#0f0f10;
  --rf-light:#ffffff;
  --rf-muted:#777b86;
  --rf-border:#e9eaef;
  --rf-bg:#fafafa;
}

/* Base */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#121317;
  background:var(--rf-bg);
}
img{ max-width:100%; display:block }
.container{ width:min(1120px,92%); margin-inline:auto }
.muted{ color:var(--rf-muted) }
.section-title{ font-size:clamp(1.6rem,2.5vw,2.2rem); margin:2rem 0 1rem }
.grid{ display:grid; gap:1.25rem }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }

/* Header */
.site-header{ position:sticky; top:0; z-index:100; background:var(--rf-light); border-bottom:1px solid var(--rf-border) }
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:64px }
.logo{ font-weight:700; font-size:1.25rem; color:var(--rf-dark); text-decoration:none }
.logo span{ color:var(--rf-red) }
.site-nav{ display:flex; gap:1rem }
.site-nav a{ text-decoration:none; color:#2a2d34; font-weight:500; padding:.4rem .6rem; border-radius:.5rem }
.site-nav a:hover,.site-nav a.active{ background:#f6f6f6 }
.nav-toggle{ display:none; background:none; border:none; font-size:1.4rem }

/* Hero */
.hero{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(211,47,47,.15), transparent 60%),
    var(--rf-light);
  border-bottom:1px solid var(--rf-border);
}
.hero-inner{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:1.5rem; padding:clamp(2rem,4vw,4rem) 0 }
.hero-text h1{ font-size:clamp(1.8rem,3.4vw,3rem); line-height:1.15; margin:0 0 1rem }
.hero-text p{ color:var(--rf-muted); margin:0 0 1.25rem }
.hero-cta{ display:flex; gap:.75rem; flex-wrap:wrap }
.accent{ color:var(--rf-red) }
.hero-art{
  min-height:320px; border-radius:18px;
  background:
    linear-gradient(180deg, rgba(215,34,34,.12), transparent 55%),
    repeating-linear-gradient(135deg, rgba(0,0,0,.04) 0 10px, transparent 10px 20px),
    #fff;
  border:1px solid var(--rf-border);
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}

/* Brands */
.brands{ padding:1rem 0 2rem }
.brand-row{ display:grid; grid-template-columns:repeat(4,minmax(120px,1fr)); gap:1rem; align-items:center }
.brand-row img{ height:44px; object-fit:contain; filter:grayscale(1) contrast(.9); opacity:.9 }

/* Product cards */
.card{
  background:var(--rf-light); border:1px solid var(--rf-border); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.08) }
.card-media{ aspect-ratio:4/3; background:#f3f4f7; display:grid; place-items:center; overflow:hidden }
.card-media img{ width:100%; height:100%; object-fit:cover }
.card-body{ padding:.9rem }
.badge{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; background:#fff1f1; color:var(--rf-red-700);
  border:1px solid #ffd0d0; padding:.25rem .5rem; border-radius:999px; font-weight:600
}
.card-title{ font-weight:600; margin:.6rem 0 .2rem; font-size:1.02rem }
.card-sub{ color:var(--rf-muted); font-size:.9rem; margin:0 0 .4rem }
.card-price{ font-weight:700; font-size:1.08rem; margin:.4rem 0 0 }
.card-actions{ display:flex; gap:.5rem; margin:.8rem 0 0 }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.6rem .9rem; border-radius:10px; border:1px solid transparent; font-weight:600; text-decoration:none; cursor:pointer }
.btn-primary{ background:var(--rf-red); color:#fff; border-color:var(--rf-red) }
.btn-primary:hover{ background:var(--rf-red-700); border-color:var(--rf-red-700) }
.btn-outline{ background:#fff; color:#1d2026; border-color:#e2e3e8 }
.btn-outline:hover{ background:#f6f6f7 }

/* Catálogo */
.catalog .filters{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin:1rem 0 }
.catalog .search input{ width:min(420px,74vw); padding:.65rem .8rem; border:1px solid var(--rf-border); border-radius:10px; outline:none }
.brands-filter{ display:flex; flex-wrap:wrap; gap:.75rem; border:none; padding:0; margin:.75rem 0 0 }
.brands-filter label{ display:flex; align-items:center; gap:.45rem; background:#fff; border:1px solid var(--rf-border); padding:.4rem .6rem; border-radius:999px; cursor:pointer }
.sort select{ padding:.55rem .7rem; border:1px solid var(--rf-border); border-radius:10px }
.results{ color:var(--rf-muted); margin:.5rem 0 1rem }

/* Contacto */
.contact{ background:var(--rf-light); border-top:1px solid var(--rf-border); border-bottom:1px solid var(--rf-border); padding:2rem 0 }
.contact-inner{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem }
.contact .bullets{ margin:0; padding-left:1.1rem }
.contact .bullets li{ margin:.35rem 0 }

/* Footer */
.site-footer{ background:#fff; border-top:1px solid var(--rf-border); margin-top:2rem }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; height:72px }
.link{ color:var(--rf-red); text-decoration:none }

/* WhatsApp floating */
.wa-float{
  position: fixed; right:16px; bottom:16px;
  width:56px; height:56px; border-radius:50%;
  background: var(--rf-red);
  box-shadow: 0 10px 20px rgba(211,47,47,.35);
  display:grid; place-items:center; text-decoration:none;
}
.wa-float img{ width:28px; height:28px; display:block; }
.wa-float:hover{ background: var(--rf-red-700); }
/* Responsive */
@media (max-width:980px){ .grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:620px){ .grid-3{ grid-template-columns:1fr } }
@media (max-width:860px){
  .nav-toggle{ display:block }
  .site-nav{ position:fixed; inset:64px 0 auto 0; background:var(--rf-light); display:none; flex-direction:column; padding:1rem; border-bottom:1px solid var(--rf-border) }
  .site-nav.open{ display:flex }
  .contact-inner{ flex-direction:column }
}



body, html {
  overflow-x: hidden !important;
}

/* ====== HERO: apilar en móvil (texto arriba, tarjeta abajo) ====== */
@media (max-width: 768px) {
  /* Forzamos layout en 1 columna */
  .hero .hero-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    align-items: stretch;
  }

  /* Aseguramos el orden deseado */
  .hero-text  { order: 1 !important; }
  .hero-card  { order: 2 !important; }

  /* Anchos 100% y sin rigideces previas */
  .hero-text,
  .hero-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    flex: initial !important;      /* por si tenían flex-basis fijo */
  }

  /* Estética “tarjeta” contenida para la derecha */
  .hero-card {
    border-radius: 16px;
    padding: clamp(14px, 3.8vw, 20px);
    overflow: hidden;              /* por si hay sombras/stripes largos */
    /* opcional: bordecito sutil
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset;
    */
  }

  /* Tipografías un poco más contenidas en móvil */
  .hero h1 {
    font-size: clamp(22px, 6vw, 28px);
    line-height: 1.15;
  }
  .hero p,
  .hero-card .muted,
  .hero-card li {
    font-size: clamp(14px, 3.9vw, 16px);
  }

  /* Botones a ancho completo en móvil */
  .hero-cta .btn,
  .hero-actions .btn {
    width: 100%;
  }

  /* Separación con la sección siguiente */
  .hero + section { margin-top: 12px; }
}

/* ===== Marcas (base) ===== */
.brands {
  padding: clamp(24px, 5vw, 56px) 0;
}

.brands .section-title {
  margin-bottom: clamp(12px, 3vw, 24px);
}

.brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 3vw, 32px);
  flex-wrap: wrap;                 /* no rompe en desktop chico */
}

.brand-row img {
  display: block;
  max-width: 160px;                /* techo en desktop */
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: .85;
  transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}

.brand-row img:hover {
  filter: none;
  opacity: 1;
  transform: translateY(-2px);
}

/* ===== Tablet (<= 992px) ===== */
@media (max-width: 992px) {
  .brand-row {
    justify-content: center;       /* centra mejor en tablet */
    gap: 20px 28px;
  }
  .brand-row img {
    max-width: 130px;
    max-height: 50px;
  }
}

/* ===== Móvil (<= 768px): 2x2 bien cuadrado ===== */
@media (max-width: 768px) {
  .brand-row {
    display: grid;                 /* pasamos a grilla */
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    gap: 14px;
    justify-items: center;
  }
  .brand-row img {
    max-width: 120px;
    max-height: 44px;
    width: 100%;
    /* “tarjetita” sin tocar el HTML */
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset;
  }
}

/* ===== Teléfonos pequeños (<= 400px) ===== */
@media (max-width: 400px) {
  .brand-row {
    grid-template-columns: repeat(2, minmax(90px, 1fr));
    gap: 10px;
  }
  .brand-row img {
    max-width: 100px;
    max-height: 38px;
    padding: 8px;
    border-radius: 10px;
  }
}


/* ===== Destacados ===== */
.featured {
  padding: clamp(40px, 6vw, 80px) 0;
  background: #181a1b;
}

.featured .section-title {
  text-align: center;
  margin-bottom: 0.5rem;
}

.featured .muted {
  text-align: center;
  margin-bottom: 2rem;
  color: #aaa;
}

#featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.product-card {
  background: #222;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  transition: transform .2s ease, box-shadow .2s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

.product-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.product-card h3 {
  font-size: 1.1rem;
  margin-bottom: .25rem;
  color: #fff;
}

.product-card p {
  font-size: 0.95rem;
  color: #ccc;
  margin-bottom: .5rem;
}

.product-card .price {
  font-weight: bold;
  font-size: 1.1rem;
  color: #ff5252;
  margin-bottom: 1rem;
}

.product-card .btn {
  margin-top: auto;
  text-align: center;
  display: block;
}


/* ===== Catálogo: arreglos responsive para filtros ===== */
@media (max-width: 768px) {
  .filters {
    display: flex;
    flex-direction: column;      /* apila izquierda y derecha */
    gap: 12px;
    align-items: stretch;
  }

  .filters-left {
    display: grid;               /* buscador + chips de marcas */
    gap: 12px;
  }

  .filters-right {
    order: 2;                    /* que quede debajo en móvil (opcional) */
    width: 100%;
  }

  /* "Ordenar: [select]" a una sola línea y con ancho 100% */
  .filters-right .sort {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  .filters-right .sort select {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;                /* evita desbordes del select */
    max-width: 100%;
  }

  /* buscador a 100% */
  .search input#q {
    width: 100%;
  }

  /* chips de marcas que envuelvan bien */
  .brands-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* Teléfonos pequeños: aún más compacto */
@media (max-width: 420px) {
  .filters-right .sort {
    flex-direction: column;      /* "Ordenar:" arriba, select abajo */
    align-items: stretch;
  }
  .filters-right .sort select {
    margin-top: 4px;
  }
}


/* Featured – tarjetas más grandes y foto completa */
#featured-grid{
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 980px){ #featured-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ #featured-grid{ grid-template-columns: 1fr; } }

.product-card{
  background: var(--rf-light);
  border: 1px solid var(--rf-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
  display: flex;
  flex-direction: column;
}

.product-card .media{
  aspect-ratio: 16 / 10;     /* ↑ área de imagen más grande */
  background: #0f141c;
  display: grid;
  place-items: center;
}
.product-card .media img{
  width: 100%;
  height: 100%;
  object-fit: contain;       /* ← muestra la foto completa */
}

.product-card .body{
  padding: .85rem .95rem 1rem;
  display: grid;
  gap: .55rem;
}
.product-card h3{
  margin: 0;
  font-size: 1.05rem;        /* subilo si querés aún más grande */
}
.product-card .btn{
  margin-top: .1rem;
}