/* ===========================
   Variables y base
=========================== */
:root{
  --color-primary:#915C3F;      /* Marrón cálido */
  --color-primary-700:#734731;
  --color-accent:#E0B084;       /* Acento beige */
  --color-bg:#FCF9F6;           /* Fondo claro */
  --color-dark:#222222;         /* Texto principal */
  --color-muted:#6B7280;        /* Texto secundario */
  --color-white:#ffffff;

  --shadow-sm:0 2px 10px rgba(0,0,0,.06);
  --shadow-md:0 10px 25px rgba(0,0,0,.08);

  --radius:14px;
  --radius-sm:10px;
  --container:1200px;
}

/* Reset básico y tipografía */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--color-dark);
  background:var(--color-bg);
  line-height:1.6;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(100%, var(--container));margin-inline:auto;padding:0 1.25rem}
.muted{color:var(--color-muted)}

/* ===========================
   Header / Navegación
=========================== */
header{
  position: sticky;
  top: 0;
  z-index: 50;

  /* Fallback seguro */
  background: #ffffffee;

  /* Solo navegadores modernos */
  @supports (backdrop-filter: blur(8px)) {
    backdrop-filter: saturate(180%) blur(8px);
    background: rgba(255,255,255,.82);
  }

  border-bottom:1px solid rgba(0,0,0,.06);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:0.75rem 0;
}
.brand{display:flex;gap:.6rem;align-items:center;font-weight:700;letter-spacing:.3px}
.brand__logo{width:42px;height:42px;border-radius:50%;object-fit:contain;background:radial-gradient(80% 80% at 30% 20%, var(--color-accent), var(--color-primary));box-shadow:var(--shadow-sm)}
.brand__name{font-weight:700}
nav ul{display:flex;gap:1.1rem;list-style:none;margin:0;padding:0}
nav a{font-weight:500;color:var(--color-dark);padding:.4rem .6rem;border-radius:10px}
nav a:hover{background:rgba(0,0,0,.05)}
.cart-badge{
  background:var(--color-primary);color:#fff;border-radius:999px;
  padding:.15rem .5rem;font-size:.8rem;margin-left:.35rem;
}
.cta{
  background:var(--color-primary);color:#fff;border:none;
  padding:.7rem 1rem;border-radius:12px;font-weight:600;
  box-shadow:var(--shadow-sm); cursor:pointer;
}
.cta:hover{background:var(--color-primary-700)}

/* ===========================
   Hero
=========================== */
.hero{
  display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;
  padding:3rem 0 2rem;
}
.hero h1{
  font-family:Montserrat, Poppins, sans-serif;
  font-size:clamp(1.8rem, 3vw + 1rem, 3rem);
  line-height:1.15;margin:.2rem 0 1rem;
}
.hero p{max-width:52ch}
.hero__tag{
  display:inline-flex;align-items:center;gap:.5rem;
  background:#fff;border:1px solid rgba(0,0,0,.06); padding:.45rem .75rem;
  border-radius:999px;font-size:.9rem;color:var(--color-primary-700)
}
.hero__media{
  position:relative;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-md);min-height:280px;background:#eee;
}
.hero__media img{object-fit:cover;height:100%;width:100%}
.hero__stamp{
  position:absolute;bottom:1rem;left:1rem;background:rgba(255,255,255,.9);
  padding:.6rem .8rem;border-radius:12px;font-weight:600;box-shadow:var(--shadow-sm)
}

/* ===========================
   Secciones y grids
=========================== */
.section{padding:2.5rem 0}
.section__head{display:flex;align-items:end;justify-content:space-between;margin-bottom:1rem}
.section__head h2{
  font-family:Montserrat, Poppins, sans-serif;font-size:1.6rem;margin:0
}
.grid{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(12, 1fr);
  grid-auto-rows: auto; 
}

/* ===========================
   Categorías
=========================== */
.cat-card{
  grid-column:span 1; 
  grid-row: span 4;   
  background:#fff;border-radius:16px;border:1px solid rgba(0,0,0,.06);
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;overflow:hidden
}
.cat-card:hover{transform:translateY(-3px)}
.cat-card__img{height:180px;width:100px;background:#ddd}
.cat-card__img img{height:100%;width:100%;object-fit:cover}
.cat-card__body{padding:1rem;display:flex;flex-direction:column;gap:.5rem}
.cat-card__title{font-weight:700;margin:.2rem 0}
.pill{display:inline-block;background:rgba(145,92,63,.1);color:var(--color-primary-700);
  padding:.2rem .6rem;border-radius:999px;font-size:.85rem}
.cat-card-link { display: block; }
.cat-card-link .cat-card { width: 100%; }

.grid > .cat-card-link { 
  grid-column: span 1;
  grid-row: span 4;    
}

/* ===========================
   Productos
=========================== */
.product-card{
  grid-column:span 3;
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* Contenedor media con fallback + modernos */
.product-media{
  position: relative;        /* fallback */
  background:#eee;
  overflow:hidden;
}

/* Fallback: reserva altura 4:3 */
.product-media::before{
  content:'';
  display:block;
  padding-top:75%;
}

/* Imagen (fallback absoluto) */
.product-media > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Modernos: aspect-ratio nativo */
@supports (aspect-ratio: 4 / 3){
  .product-media{
    aspect-ratio:4 / 3;
  }
  .product-media::before{ display:none; }
  .product-media > img{
    position:static;
    width:100%;
    height:100%;
    object-fit:cover;
  }
}

/* Cuerpo y elementos */
.product-body{
  padding:1rem;
  display:flex;
  flex-direction:column;
  gap:.5rem
}
.price{ font-weight:700; color:var(--color-primary); }

.row{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.btn{
  background:#f2f2f2;
  border:none;
  border-radius:10px;
  padding:.55rem .8rem;
  cursor:pointer;
  font-weight:600
}
.btn--primary{ background:var(--color-primary); color:#fff; }
.btn--primary:hover{ background:var(--color-primary-700); }
.btn[disabled]{ opacity:.7; cursor:not-allowed; }


/* ===========================
   Destacado
=========================== */
.feature{
  display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;
  background:linear-gradient(135deg, #fff, #f8efe8);
  border:1px solid rgba(0,0,0,.06); border-radius:var(--radius); padding:1.25rem; box-shadow:var(--shadow-sm)
}
.feature img{border-radius:12px;}

/* ===========================
   Testimonios
=========================== */
.testi{display:grid;grid-template-columns:repeat(3, 1fr);gap:1rem}
.testi-card{
  background:#fff;border-radius:14px;border:1px solid rgba(0,0,0,.06);
  padding:1rem;box-shadow:var(--shadow-sm)
}
.stars{color:#E3A008;font-size:1rem}

/* ===========================
   Formulario de contacto
=========================== */
form{
  background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:1rem;box-shadow:var(--shadow-sm)
}
label{font-weight:600}
input, textarea, select{
  width:100%;padding:.7rem;border-radius:10px;border:1px solid #e6e6e6;background:#fcfcfc
}
textarea{min-height:120px;resize:vertical}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
}

/* ===========================
   Footer
=========================== */
footer{margin-top:2rem;padding:2rem 0;background:#191919;color:#eaeaea}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:1rem}
.footer-col h4{margin-top:0}
.list-clean{list-style:none;padding:0;margin:0}
.legal{border-top:1px solid rgba(255,255,255,.1);margin-top:1rem;padding-top:.8rem;color:#bdbdbd;font-size:.9rem;display:flex;justify-content:space-between;align-items:center}
.made-with{opacity:.9}

/* ===========================
   Activos ocultos (logos y firmas)
=========================== */
.assets-hidden {
  position: absolute;
  left: -9999px;      /* fuera de la pantalla */
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.assets-hidden .asset-group { display: none; }
.asset-item img { max-width: 100%; height: auto; }

/* ===========================
   Responsivo
=========================== */
@media (max-width: 1024px){
  .product-card{grid-column:span 4}
  .cat-card{grid-column:span 6}
  .feature{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:2fr 1fr 1fr}
  .hero{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .product-card{grid-column:span 12}
  .cat-card{grid-column:span 12}
  .testi{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  nav ul{display:none} /* simplificación móvil */
}

/* ===========================
   carrito
=========================== */

.cart-page { padding: 2rem 0; }
.cart-grid { display:grid; grid-template-columns: 2fr 1fr; gap:1rem; }
.card { background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:14px; box-shadow:var(--shadow-sm); padding:1rem; }
table { width:100%; border-collapse:collapse; }
th, td { padding:.75rem; text-align:left; border-bottom:1px solid #eee; }
th { font-weight:700; font-family:Montserrat, Poppins, sans-serif; }
td img { width:72px; height:72px; object-fit:cover; border-radius:10px; }
.qty { width:64px; padding:.4rem; border:1px solid #e6e6e6; border-radius:8px; text-align:center; }
.remove { background:#f8f8f8; border:none; border-radius:8px; padding:.4rem .6rem; cursor:pointer; }
.remove:hover { background:#f1f1f1; }
.totals { display:flex; flex-direction:column; gap:.5rem; }
.totals .row { justify-content:space-between; }
.totals .row strong { font-size:1.1rem; }
.actions { display:flex; gap:.5rem; margin-top:.75rem; }
.empty { text-align:center; color:var(--color-muted); padding:2rem 1rem; }
@media (max-width: 900px){ .cart-grid{ grid-template-columns:1fr; } }

/* ===========================
   widget-chat
=========================== */
/* Floating FAQ */
:root{
  --faq-primary: var(--color-primary, #915C3F);
  --faq-primary-700: var(--color-primary-700, #734731);
  --faq-bg: #ffffff;
  --faq-text: #1f2937;
  --faq-muted: #6b7280;
}

.faq-fab{
  position:fixed; right:18px; bottom:18px; z-index:1000;
  width:56px; height:56px; border-radius:50%;
  background:var(--faq-primary); color:#fff; display:grid; place-items:center;
  box-shadow:0 10px 25px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.12);
  cursor:pointer; border:none;
}
.faq-fab:hover{ background:var(--faq-primary-700); transform:translateY(-1px); }
.faq-fab svg{ width:26px; height:26px; }
.faq-fab .dot{
  position:absolute; top:6px; right:6px; width:9px; height:9px; background:#22c55e; border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,255,255,.9);
}

.faq-panel{
  position:fixed; right:18px; bottom:88px; z-index:1000; width:340px; max-height:70vh;
  background:var(--faq-bg); color:var(--faq-text); border:1px solid rgba(0,0,0,.06);
  border-radius:16px; box-shadow:0 18px 40px rgba(0,0,0,.18), 0 6px 12px rgba(0,0,0,.12);
  display:none; overflow:hidden;
}
.faq-panel.is-open{ display:block; }

.faq-header{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.75rem .9rem; border-bottom:1px solid rgba(0,0,0,.06);
  background:linear-gradient(180deg, #fff, #faf7f4);
}
.faq-header h3{ margin:0; font-size:1rem; font-weight:700; }
.faq-header .muted{ color:var(--faq-muted); font-size:.85rem; }
.faq-header button{ background:transparent; border:none; cursor:pointer; color:var(--faq-muted); }

.faq-body{ display:flex; flex-direction:column; height:420px; }
.faq-messages{ flex:1; padding:.9rem; overflow:auto; background:#fff; }
.faq-input{ display:flex; gap:.5rem; padding:.6rem; border-top:1px solid #eee; background:#fafafa; }
.faq-input input{
  flex:1; border:1px solid #e6e6e6; border-radius:999px; padding:.6rem .9rem;
}
.faq-input button{ background:var(--faq-primary); color:#fff; border:none; border-radius:999px; padding:.55rem .9rem; font-weight:600; cursor:pointer; }
.faq-input button:hover{ background:var(--faq-primary-700); }

.msg{ max-width:85%; margin:.25rem 0; padding:.55rem .7rem; border-radius:12px; line-height:1.35; font-size:.95rem; box-shadow:0 1px 2px rgba(0,0,0,.05); }
.msg.user{ margin-left:auto; background:#f0f9ff; border:1px solid #dbeafe; }
.msg.bot{ background:#f8fafc; border:1px solid #e5e7eb; }
.msg small{ display:block; color:var(--faq-muted); font-size:.75rem; margin-top:.15rem; }

.faq-suggestions{ display:flex; gap:.4rem; flex-wrap:wrap; padding:.2rem .9rem .6rem; border-top:1px solid #eee; background:#fff; }
.faq-chip{ background:#f4f4f5; color:#333; border:none; border-radius:999px; padding:.35rem .7rem; font-size:.85rem; cursor:pointer; }
.faq-chip:hover{ background:#eaeaea; }

@media (max-width: 480px){
  .faq-panel{ right:10px; left:10px; width:auto; bottom:88px; }
}

.prod-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:1rem}
.prod-media{background:#f5f5f5;border-radius:14px;overflow:hidden}
.prod-media img{width:100%;height:auto;display:block}
.thumbs{display:flex;gap:.5rem;margin-top:.5rem;flex-wrap:wrap}
.thumbs img{width:72px;height:72px;object-fit:cover;border-radius:10px;border:2px solid transparent;cursor:pointer}
.thumbs img.active{border-color:#915C3F}
.opts{display:grid;gap:.8rem;margin-top:1rem}
.swatches{display:flex;gap:.4rem;flex-wrap:wrap}
.swatch{width:28px;height:28px;border-radius:50%;border:2px solid #ddd;cursor:pointer}
.swatch[aria-checked="true"]{outline:2px solid #915C3F; outline-offset:2px}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:.8rem}
.muted{color:#6B7280}
@media (max-width:900px){ .prod-grid{grid-template-columns:1fr} }

/* =========================================================
   OVERRIDES ESPECÍFICOS PARA TU LAYOUT
========================================================= */

/* Espaciado entre secciones (evita que se amontonen) */
.section + .section { margin-top: 2rem; }

/* --- DESTACADO en 1 columna y centrado (como acordamos) --- */
#destacado .feature{
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 1rem;
}
#destacado .feature > div{
  width: 100%;
  max-width: 900px;
}
/* respiro por si algún estilo previo pegaba las secciones */
#destacado{ margin-top: 2rem; }

/* --- CATEGORÍAS: 4 columnas × 1 fila --- */
#categorias .grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  gap: 1rem;
}
/* neutraliza spans del grid genérico dentro de categorías */
#categorias .grid > .cat-card-link{
  grid-column: auto;
  grid-row: auto;
}
/* corrige ancho de imagen para que la card no quede angosta */
#categorias .cat-card__img{ width: 100%; height: 180px; }

/* --- CATÁLOGO: 4 columnas (8 items → 2 filas) --- */
#catalogo .grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  gap: 1rem;
}
/* neutraliza span 3 de .product-card dentro del catálogo */
#catalogo .grid .product-card{ grid-column: auto; }

/* --- Responsivo --- */
/* Tablet: 2 columnas (si prefieres 3, te lo ajusto) */
@media (max-width: 1024px){
  #categorias .grid{ grid-template-columns: repeat(2, 1fr); }
  #catalogo  .grid{ grid-template-columns: repeat(2, 1fr); }
}
/* Móvil: 1 columna */
@media (max-width: 640px){
  #categorias .grid{ grid-template-columns: 1fr; }
  #catalogo  .grid{ grid-template-columns: 1fr; }
}

/* ====== FIX DEFINITIVO CATEGORÍAS (ocupe toda la fila, sin amontonarse) ====== */
#categorias .grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 columnas que llenan todo el ancho */
  gap: 1rem;
  grid-auto-rows: auto !important;  /* ignora los 70px globales */
  align-items: stretch;              /* las celdas estiran su contenido */
}

/* Cada enlace+card ocupa su columna sin spans raros del grid global */
#categorias .grid > .cat-card-link{
  grid-column: auto;
  grid-row: auto;
  width: 100%;
  display: block;   /* mantiene click en toda la tarjeta */
}

/* La tarjeta ocupa la altura completa de la celda (mejor estética y no “colapsa”) */
#categorias .cat-card{
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* La imagen ocupa el ancho completo de su columna (ya no 100px) */
#categorias .cat-card__img{
  width: 100%;
  height: 180px;    /* puedes ajustar la altura de recorte */
  background: #ddd;
}

/* Asegura respiro entre secciones (por si el global lo aplasta) */
#categorias.section{ padding-bottom: 1rem; }
#destacado{ margin-top: 1rem; }

/* Responsivo */
@media (max-width: 1024px){
  #categorias .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  #categorias .grid{ grid-template-columns: 1fr; }
}


    
media-layout{
      display:grid;
      grid-template-columns: 100px 1fr;
      gap:.75rem;
      align-items:start;
    }
    .thumbs--vertical{
      display:flex;
      flex-direction:column;
      gap:.5rem;
      max-height: 540px;         /* solo esta parte scrollea */
      overflow-y:auto;
      padding-right:.25rem;
    }
    .thumbs--vertical img{
      width:92px;height:92px;object-fit:cover;
      border-radius:10px;border:2px solid transparent;cursor:pointer;
      background:#f1f1f1;
    }
    .thumbs--vertical img.active{ border-color: var(--color-primary, #915C3F); }
    /* Ajuste para la imagen principal (ya tienes .prod-media) */
    .prod-media{
      background:#f5f5f5;border-radius:14px;overflow:hidden;
    }
    .prod-media img{ width:100%; height:auto; display:block; }
    /* Compacta el panel derecho (opciones) ya sin configurador */
    .opts--lite{ display:grid; gap:.8rem; margin-top:.25rem; }
    .desc-above{ margin:0 0 .25rem; }

    /* ====== GALERÍA: sin imagen principal, solo thumbs grandes en columna ====== */

/* Oculta por completo el contenedor de la imagen principal */
.prod-media { 
  display: none !important; 
}

/* Asegura el grid de la zona media quede bien sin la imagen */
.prod-grid {
  display: grid;
  grid-template-columns: 1fr .8fr; /* puedes dejar 1fr si quieres que thumbs ocupen todo el ancho */
  gap: 1rem;
}

/* El contenedor general de thumbs en columna (scroll si excede) */
.thumbs {
  display: flex;
  flex-direction: column;   /* columna sí o sí */
  gap: .6rem;
  max-height: 80vh;         /* controla altura máxima visible */
  overflow-y: auto;         /* scroll vertical */
  padding-right: .25rem;
}

/* Tamaño de cada miniatura: más grande */
.thumbs img {
  width: 180px;             /* ajusta a 160–220px según tu gusto */
  height: auto;             /* conserva proporción */
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid transparent;
  cursor: pointer;
  background: #f1f1f1;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* Hover / foco */
.thumbs img:hover,
.thumbs img:focus {
  transform: scale(1.02);
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}

/* Activo (te mantiene la pista visual, por si luego usas zoom/lightbox) */
.thumbs img.active {
  border-color: var(--color-primary, #915C3F);
}

/* Responsive: en móviles, hazlas un poco más chicas para caber mejor */
@media (max-width: 640px) {
  .thumbs img { width: 140px; }
}