/* ============================================================================
   Velas y Cirios Santa María — Hoja de estilos única
   Paleta del logotipo: azul marino + dorado + crema. Serif + script + sans.
   ============================================================================ */

:root{
  /* Colores */
  --azul:        #1E2E43;
  --azul-oscuro: #14202F;
  --dorado:      #B08D4F;
  --dorado-claro:#C9AE7C;
  --crema:       #FAF6EF;
  --crema-2:     #F2EADD;
  --blanco:      #FFFFFF;
  --texto:       #2B2B2B;
  --texto-suave: #6B6B6B;
  --linea:       #E3D8C5;
  --verde-wa:    #25D366;

  /* Tipografía */
  --font-script: 'Parisienne', cursive;
  --font-serif:  'Cormorant Garamond', serif;
  --font-sans:   'Jost', sans-serif;

  --radio: 8px;
  --sombra: 0 6px 24px rgba(30,46,67,.08);
  --sombra-fuerte: 0 12px 40px rgba(30,46,67,.16);
  --ancho: 1200px;
}

/* ---------- Reset ligero ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-sans);
  font-weight:400;
  color:var(--texto);
  background:var(--crema);
  line-height:1.6;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family:var(--font-serif); color:var(--azul); font-weight:600; line-height:1.15; margin:0 0 .5em; }

.contenedor{ width:100%; max-width:var(--ancho); margin:0 auto; padding:0 1.25rem; }
.seccion{ padding:4rem 0; }
.seccion--crema2{ background:var(--crema-2); }
.seccion--azul{ background:var(--azul); }
.seccion--azul .seccion__titulo{ color:#fff; }
.seccion--azul .kicker{ color:var(--dorado-claro); }
.seccion--azul .filete{ background:var(--dorado); }

/* Textura de mármol (vetas doradas + nubes suaves, SVG inline sin archivos externos) */
.seccion--textura{
  position:relative;
  background-color:#efe6d6;
  background-image:
    /* vetas doradas irregulares */
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='760'%20height='760'%3E%3Cfilter%20id='v'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.016'%20numOctaves='5'%20seed='4'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.69%200%200%200%200%200.55%200%200%200%200%200.32%200%200%200%20-1.35%201'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23v)'%20opacity='0.22'/%3E%3C/svg%3E"),
    /* segunda veta gris/azulada más fina */
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='760'%20height='760'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.022'%20numOctaves='5'%20seed='11'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.12%200%200%200%200%200.18%200%200%200%200%200.26%200%200%200%20-1.55%201'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23g)'%20opacity='0.14'/%3E%3C/svg%3E"),
    /* brillo y nubes suaves del mármol */
    radial-gradient(70% 55% at 18% 20%, rgba(255,255,255,.4), rgba(255,255,255,0) 60%),
    radial-gradient(60% 50% at 82% 80%, rgba(30,46,67,.035), rgba(30,46,67,0) 62%),
    radial-gradient(55% 45% at 62% 12%, rgba(30,46,67,.03), transparent 58%),
    linear-gradient(180deg, rgba(255,251,244,.6), rgba(233,222,203,.25));
  background-size:cover, cover, auto, auto, auto, auto;
}
.seccion--textura > *{ position:relative; z-index:1; }
.centro{ text-align:center; }
.oculto{ display:none !important; }

/* Kicker / etiqueta pequeña */
.kicker{
  display:inline-block;
  font-family:var(--font-sans);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.72rem;
  font-weight:600;
  color:var(--dorado);
  margin-bottom:.6rem;
}
.script{ font-family:var(--font-script); color:var(--dorado); font-weight:400; }

.seccion__titulo{ font-size:2.1rem; margin-bottom:.3rem; }
.seccion__intro{ max-width:640px; margin:0 auto 2.5rem; color:var(--texto-suave); }

/* Línea decorativa dorada bajo títulos centrados */
.filete{ width:64px; height:2px; background:var(--dorado); border:0; margin:.8rem auto 1.4rem; }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-sans); font-weight:500; font-size:.95rem;
  padding:.8rem 1.6rem; border-radius:var(--radio); border:1px solid transparent;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
  line-height:1;
}
.btn:active{ transform:translateY(1px); }
.btn--primario{ background:var(--azul); color:#fff; }
.btn--primario:hover{ background:var(--azul-oscuro); color:var(--dorado-claro); }
.btn--dorado{ background:var(--dorado); color:#fff; }
.btn--dorado:hover{ background:var(--azul-oscuro); color:var(--dorado-claro); }
.btn--fantasma{ background:transparent; color:var(--azul); border-color:var(--azul); }
.btn--fantasma:hover{ background:transparent; color:var(--dorado); border-color:var(--dorado); }
/* WhatsApp: enlace simple (ícono + texto), sin botón verde grueso */
.btn--wa{ background:transparent; color:var(--azul); font-weight:600; padding:.55rem .5rem; border:0; }
.btn--wa:hover{ background:transparent; color:var(--verde-wa); }
.btn--wa .wa-icon, .btn--wa svg{ color:var(--verde-wa); }
.franja .btn--wa{ color:#fff; }
.franja .btn--wa:hover{ color:var(--dorado-claro); }
.btn--bloque{ width:100%; }
.btn--sm{ padding:.6rem 1rem; font-size:.85rem; }
.wa-icon{ width:1.05em; height:1.05em; flex:0 0 auto; }

/* Botón flotante de WhatsApp (fijo, todas las páginas del sitio) */
.wa-fab{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:90;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--verde-wa); color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  transition:transform .2s ease, box-shadow .2s ease;
}
.wa-fab:hover{ transform:scale(1.08); box-shadow:0 8px 22px rgba(0,0,0,.34); color:#fff; }
.wa-fab .wa-icon{ width:30px; height:30px; }
@media (max-width:768px){
  .wa-fab{ right:1rem; bottom:1rem; width:52px; height:52px; }
}

/* ---------- Barra de anuncio ---------- */
.anuncio{ background:var(--azul-oscuro); color:#e9e0cf; }
.anuncio__inner{
  margin:0 auto; text-align:center; padding:.65rem 1.25rem;
  font-family:var(--font-sans); font-size:.74rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
}

/* ---------- Encabezado (logo centrado, tipo catálogo) ---------- */
.header{
  position:sticky; top:0; z-index:100;
  background:var(--crema);
  border-bottom:2px solid var(--dorado);
}
.header__inner{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:1rem; padding:.5rem 1.25rem; min-height:92px;
}
.header__lado{ display:flex; align-items:center; gap:1.2rem; }
.header__lado--der{ justify-content:flex-end; }
.header__icono{
  color:var(--azul); display:inline-flex; align-items:center; justify-content:center;
  width:25px; height:25px; transition:color .2s ease;
}
.header__icono svg{ width:100%; height:100%; }
.header__icono:hover{ color:var(--dorado); }
.header__icono--wa{ color:var(--verde-wa); }
.header__icono--wa:hover{ color:#0f8a54; }

.logo{ display:flex; align-items:center; }
.logo img{ height:52px; width:auto; }
.logo--centro{ justify-self:center; }
.logo--centro img{ height:104px; }

/* Menú (navbar Bootstrap) a ancho completo bajo el logo */
.header__menu{ padding:0; border-top:1px solid var(--linea); background:var(--crema); }
.header__menu .navbar-collapse{ width:100%; }
.header__nav{
  width:100%; justify-content:center; align-items:center;
  gap:.2rem 2.8rem; flex-wrap:wrap; padding:.5rem 1.25rem;
}
.header__nav .nav-item{ display:flex; }
.header__nav .nav-link{
  font-family:var(--font-sans); font-size:.82rem; font-weight:500; color:var(--azul);
  letter-spacing:.16em; text-transform:uppercase; padding:.4rem .2rem; position:relative;
}
.header__nav .nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--dorado); transform:scaleX(0); transform-origin:center; transition:transform .28s ease;
}
.header__nav .nav-link:hover, .header__nav .nav-link:focus{ color:var(--dorado); }
.header__nav .nav-link:hover::after,
.header__nav .nav-link.active::after{ transform:scaleX(1); }
.header__nav .nav-link.active{ color:var(--dorado); }

/* ---------- Mega menú de categorías ---------- */
.mega-item{ position:relative; }
.mega-caret{
  display:inline-block; width:.42em; height:.42em; margin-left:.45em; vertical-align:middle;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform .2s ease;
}
.header.mega-open .mega-caret{ transform:rotate(-135deg) translateY(0); }

.mega{
  position:absolute; top:100%; left:0; right:0;
  background:var(--crema); border-top:1px solid var(--linea); border-bottom:2px solid var(--dorado);
  box-shadow:var(--sombra-fuerte);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s; z-index:80;
}
.header.mega-open .mega{ opacity:1; visibility:visible; transform:none; }
.mega__inner{ display:grid; grid-template-columns:1fr 340px; gap:2rem; padding:1.8rem 1.25rem; }
/* Dos columnas que se llenan de arriba abajo: la 1ª lleva las primeras
   categorías y la 2ª sigue. Con grid de 2 columnas se rellenaba por filas
   (1,2 / 3,4 …) y leyendo cada columna el orden del panel no se veía. */
.mega__lista{ column-count:2; column-gap:1.2rem; }
.mega__lista .mega__link{ break-inside:avoid; }
.mega__link{
  display:block; padding:.6rem .85rem; border-radius:6px; color:var(--azul);
  font-size:.95rem; font-weight:500; border-left:2px solid transparent;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.mega__link:hover, .mega__link.activo{ background:var(--crema-2); color:var(--dorado); border-left-color:var(--dorado); }
.mega__preview{ position:relative; border-radius:10px; overflow:hidden; aspect-ratio:1/1; align-self:start; background:#fff; display:block; }
.mega__preview img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:transform .5s ease; }
.mega__preview:hover img{ transform:scale(1.05); }
.mega__preview-cap{
  position:absolute; left:0; right:0; bottom:0; padding:1.1rem 1.2rem;
  font-family:var(--font-serif); font-size:1.35rem; font-weight:600; color:#fff;
  background:linear-gradient(0deg, rgba(20,32,47,.9), rgba(20,32,47,0));
}
/* Listado de categorías desplegable en móvil (oculto en escritorio) */
.mega-movil{ display:none; }
@media (max-width:991.98px){
  .mega{ display:none; }
  .mega-caret{ display:inline-block; }
  .mega-item.abierto .mega-caret{ transform:rotate(-135deg) translateY(0); }
  .mega-movil{
    list-style:none; margin:.1rem auto .3rem; padding:0;
    width:100%; max-width:320px;
  }
  .mega-item.abierto .mega-movil{ display:block; }
  .mega-movil li{ display:block; }
  .mega-movil__link{
    display:block; text-align:center; padding:.7rem .2rem;
    color:var(--azul); font-size:.9rem; letter-spacing:.1em; text-transform:uppercase;
    border-bottom:1px solid var(--linea);
  }
  .mega-movil__link:hover, .mega-movil__link:focus{ color:var(--dorado); }
}

/* Hamburguesa (solo móvil) */
.hamburguesa{
  display:none; background:transparent; border:0; padding:.4rem;
  width:42px; height:42px; flex-direction:column; justify-content:center; gap:5px;
}
.hamburguesa span{ display:block; height:2px; width:24px; background:var(--azul); transition:.3s; }
.hamburguesa[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Animación de entrada al cargar la página (una sola vez) ---------- */
@keyframes introBajar{ from{ opacity:0; transform:translateY(-18px); } to{ opacity:1; transform:translateY(0); } }
@keyframes introSubir{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:translateY(0); } }
@keyframes menuFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes menuItem{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } }
.anuncio{ animation:introBajar .55s ease both; }
/* backwards (no both) para no dejar un transform residual que rompa el menú fijo en móvil */
.header{ animation:introBajar .7s ease .08s backwards; }
.hero__box > *, .banner__inner > *{ opacity:0; animation:introSubir .75s cubic-bezier(.2,.65,.3,1) both; }
.hero__box > *:nth-child(1), .banner__inner > *:nth-child(1){ animation-delay:.35s; }
.hero__box > *:nth-child(2), .banner__inner > *:nth-child(2){ animation-delay:.50s; }
.hero__box > *:nth-child(3), .banner__inner > *:nth-child(3){ animation-delay:.65s; }
.hero__box > *:nth-child(4), .banner__inner > *:nth-child(4){ animation-delay:.80s; }

/* ---------- Hero (home) ---------- */
.hero{ position:relative; color:#fff; overflow:hidden; }
.hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,32,47,.55), rgba(20,32,47,.72));
}
.hero__inner{
  position:relative; z-index:2; max-width:760px; margin:0 auto;
  padding:6.5rem 1.25rem; text-align:center;
}
.hero__kicker{ color:var(--dorado-claro); }
.hero__titulo{ color:#fff; font-size:clamp(2.4rem,6vw,4rem); margin:0 0 .2rem; }
.hero__titulo .script{ color:var(--dorado-claro); font-size:1.18em; }
.hero__sub{ font-size:1.1rem; color:#f3ede2; max-width:560px; margin:1rem auto 2rem; }

/* Variante home: banner claro de producto, texto a la izquierda con velo */
.hero--home::after{
  background:linear-gradient(90deg, rgba(20,32,47,.80) 0%, rgba(20,32,47,.58) 42%, rgba(20,32,47,.18) 68%, rgba(20,32,47,0) 88%);
}
.hero--home .hero__inner{
  max-width:var(--ancho); width:100%; margin:0 auto; text-align:left;
  padding:5.5rem 1.25rem;
}
.hero--home .hero__box{ max-width:none; }
.hero--home .hero__titulo{
  font-size:clamp(2.1rem,4.6vw,3.4rem); white-space:nowrap; margin-bottom:.4rem;
}
.hero--home .hero__sub{ margin-left:0; max-width:520px; }

/* Banner interior */
.banner{ position:relative; color:#fff; }
.banner__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.banner::after{ content:""; position:absolute; inset:0; background:rgba(20,32,47,.62); }
.banner__inner{ position:relative; z-index:2; text-align:center; padding:5rem 1.25rem; }
.banner__titulo{ color:#fff; font-size:clamp(2rem,4.5vw,2.9rem); margin-bottom:.2rem; }
.banner__sub{ color:#efe7d9; max-width:560px; margin:.6rem auto 0; }

/* ---------- Bienvenida ---------- */
.bienvenida p{ max-width:760px; margin:0 auto; font-size:1.12rem; color:#43423f; }
.bienvenida p strong{ color:var(--azul); }

/* ---------- Grid de categorías ---------- */
.cats-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem;
}
.cat-card{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio);
  overflow:hidden; box-shadow:var(--sombra); transition:transform .2s ease, box-shadow .2s ease;
  display:block;
}
.cat-card:hover{ transform:translateY(-4px); box-shadow:var(--sombra-fuerte); }
.cat-card__media{ aspect-ratio:1/1; overflow:hidden; background:var(--crema-2); }
.cat-card__media img{ width:100%; height:100%; object-fit:cover; }
.cat-card__cuerpo{ padding:1rem; text-align:center; }
.cat-card__nombre{ font-family:var(--font-serif); font-size:1.2rem; color:var(--azul); }
.cat-card__link{ font-size:.8rem; color:var(--dorado); text-transform:uppercase; letter-spacing:.12em; }

/* ---------- Grid de productos / destacados ---------- */
.prod-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
}
.prod-grid--3{ grid-template-columns:repeat(3,1fr); }
.prod-card{
  background:var(--blanco); border:1px solid var(--linea); border-radius:10px;
  overflow:hidden; display:flex; flex-direction:column;
  box-shadow:var(--sombra); transition:transform .2s ease, box-shadow .2s ease;
}
.prod-card:hover{ transform:translateY(-4px); box-shadow:var(--sombra-fuerte); }
.prod-card__media{
  aspect-ratio:1/1; overflow:hidden; position:relative;
  background:linear-gradient(180deg, #fbf8f2, #f1e9db);
  border-bottom:1px solid var(--linea);
}
.prod-card__media img{ width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .5s ease; }
.prod-card:hover .prod-card__media img{ transform:scale(1.05); }
.prod-card__badge{
  position:absolute; top:.6rem; left:.6rem; background:var(--dorado); color:#fff;
  font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; font-weight:600;
  padding:.28rem .6rem; border-radius:99px; box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.prod-card__cuerpo{ padding:1.1rem 1.1rem 1.25rem; display:flex; flex-direction:column; gap:.4rem; flex:1; }
.prod-card__nombre{
  font-family:var(--font-serif); font-size:1.15rem; color:var(--azul); line-height:1.25; font-weight:600;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.5em;
}
.prod-card__meta{ font-size:.82rem; color:var(--texto-suave); display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .7rem; }
.prod-card__codigo{ font-weight:600; color:var(--dorado); letter-spacing:.03em; }
.prod-card__acciones{ margin-top:auto; display:flex; flex-direction:column; gap:.5rem; padding-top:1rem; }
.prod-card__acciones .btn{ width:100%; }
.prod-card__acciones .btn--wa{
  border:1px solid var(--linea); color:var(--azul); padding:.6rem 1rem; border-radius:var(--radio);
}
.prod-card__acciones .btn--wa:hover{ border-color:var(--verde-wa); color:var(--verde-wa); background:transparent; }

/* Tarjeta de GRUPO: subtítulo + lista de velas del grupo */
.prod-card--grupo .prod-card__nombre{ min-height:auto; }
.prod-card__sub{ font-size:.8rem; color:var(--texto-suave); margin:-.15rem 0 .15rem; }
.prod-card__velas{ list-style:none; margin:.3rem 0 0; padding:0; display:flex; flex-direction:column; gap:.15rem; }
.prod-card__vela{
  display:flex; justify-content:space-between; align-items:flex-start; gap:.6rem;
  font-size:.84rem; padding:.2rem .4rem; border-radius:6px; border-left:3px solid transparent;
}
/* Nombre completo (permite varias líneas); el código queda arriba a la derecha */
.prod-card__vela-nombre{ color:var(--texto); flex:1 1 auto; min-width:0; line-height:1.3; }
.prod-card__vela-codigo{ color:var(--dorado); font-size:.74rem; font-weight:600; flex:0 0 auto; }
.prod-card__vela.resaltada{ background:var(--crema-2); border-left-color:var(--dorado); }

/* Detalle de GRUPO: lista de velas (reemplaza la ficha única) */
.grupo-velas{ margin-top:1.4rem; }
.grupo-velas__titulo{ font-size:1.25rem; margin:0 0 .8rem; color:var(--azul); }
.grupo-velas__lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.grupo-vela{
  border:1px solid var(--linea); border-radius:var(--radio); padding:.85rem 1rem; background:var(--blanco);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.grupo-vela.resaltada{ border-color:var(--dorado); box-shadow:0 0 0 2px rgba(176,141,79,.22); }
.grupo-vela__top{ display:flex; justify-content:space-between; align-items:baseline; gap:.8rem; }
.grupo-vela__nombre{ font-weight:600; color:var(--azul); }
.grupo-vela__codigo{
  font-size:.76rem; color:var(--texto-suave); background:var(--crema-2);
  padding:.12rem .55rem; border-radius:99px; flex:0 0 auto; white-space:nowrap;
}
.grupo-vela__meta{ font-size:.85rem; color:var(--texto-suave); margin-top:.35rem; }

/* Aviso de resultados vacíos */
.sin-resultados{ text-align:center; padding:3rem 1rem; color:var(--texto-suave); grid-column:1/-1; }

/* Carrusel horizontal de productos (relacionados) */
.slider-wrap{ position:relative; }
.prod-slider{
  display:flex; gap:1.25rem; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:.5rem .2rem 1rem;
  scrollbar-width:none; -ms-overflow-style:none;
}
.prod-slider::-webkit-scrollbar{ display:none; }
/* 3 tarjetas por vista: 3 cards + 2 gaps (1.25rem) llenan el 100% del contenedor */
.prod-slider .prod-card{ flex:0 0 calc((100% - 2.5rem) / 3); scroll-snap-align:start; }
.slider-nav{
  position:absolute; top:42%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; background:var(--azul); color:#fff; border:0;
  font-size:1.5rem; line-height:1; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sombra); z-index:2; transition:background .2s ease;
}
.slider-nav:hover{ background:var(--dorado); }
.slider-nav--prev{ left:-.7rem; }
.slider-nav--next{ right:-.7rem; }
@media (max-width:768px){
  .slider-nav{ width:40px; height:40px; font-size:1.35rem; opacity:.95; }
  .slider-nav--prev{ left:.25rem; }
  .slider-nav--next{ right:.25rem; }
}

/* ---------- Teaser nosotros / bloque 2 columnas ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:center; }
.split__media img,
.split__media .img-placeholder{ border-radius:var(--radio); box-shadow:var(--sombra); }
.split__media img{ aspect-ratio:4/3; object-fit:cover; width:100%; }
.split__texto p{ color:#43423f; }

/* ---------- Franjas CTA ---------- */
.franja{
  background:var(--azul); color:#fff; border-radius:var(--radio);
  padding:2.5rem; text-align:center; box-shadow:var(--sombra);
}
.franja h2{ color:#fff; }
.franja p{ color:#e7ddcd; max-width:620px; margin:.4rem auto 1.5rem; }
.franja--full{ border-radius:0; box-shadow:none; }

/* Franja a 100% de ancho con imagen de fondo (reemplazable) */
.franja--imagen{
  position:relative; overflow:hidden; width:100%;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  padding:5.5rem 1.25rem;
}
.franja--imagen::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,23,34,.9), rgba(15,23,34,.86));
}
.franja--imagen > *{ position:relative; z-index:1; }
.franja--imagen .franja__contenido{ max-width:var(--ancho); margin:0 auto; }

/* ---------- Misión / Visión / Valores ---------- */
.mvv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.mvv-card{
  background:var(--blanco); border:1px solid var(--linea); border-top:3px solid var(--dorado);
  border-radius:var(--radio); padding:1.8rem; box-shadow:var(--sombra);
}
.mvv-card h3{ font-size:1.4rem; }
.mvv-card p{ color:#43423f; margin:0; }
.valores-lista{ display:flex; flex-direction:column; gap:.1rem; }
.valores-lista li{
  display:flex; align-items:center; gap:.7rem;
  color:var(--azul); font-weight:500; font-size:1.02rem;
  padding:.55rem 0; border-bottom:1px solid var(--linea);
}
.valores-lista li:last-child{ border-bottom:0; }
.valores-lista li::before{
  content:""; width:8px; height:8px; flex:0 0 auto;
  background:var(--dorado); transform:rotate(45deg);
}

/* ---------- Chips de categorías ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
.chip{
  background:var(--blanco); border:1px solid var(--linea); color:var(--azul);
  padding:.5rem 1rem; border-radius:99px; font-size:.9rem; font-weight:500;
  transition:background .2s, color .2s, border-color .2s;
}
.chip:hover{ background:transparent; color:var(--dorado); border-color:var(--dorado); }

/* ---------- Testimonios ---------- */
.test-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.test-card{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio);
  padding:1.8rem; box-shadow:var(--sombra); display:flex; flex-direction:column; gap:1rem;
}
.test-card__texto{ font-family:var(--font-serif); font-size:1.15rem; font-style:italic; color:#3b3b3b; }
.test-card__pie{ display:flex; align-items:center; gap:.8rem; margin-top:auto; }
.test-card__avatar{ width:56px; height:56px; border-radius:50%; object-fit:cover; background:var(--crema-2); border:2px solid var(--dorado); }
.test-card__nombre{ font-weight:600; color:var(--azul); font-size:.95rem; }
.test-card__lugar{ font-size:.82rem; color:var(--texto-suave); }

/* Slider de testimonios: muestra 3, desplaza con flechas */
.seccion-icono{ display:block; height:76px; width:auto; margin:0 auto .9rem; }
.test-slider{
  display:flex; gap:1.5rem; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:.5rem .2rem 1rem;
  scrollbar-width:none; -ms-overflow-style:none;
}
.test-slider::-webkit-scrollbar{ display:none; }
.test-slider .test-card{ flex:0 0 calc((100% - 3rem) / 3); scroll-snap-align:start; }
@media (max-width:992px){ .test-slider .test-card{ flex-basis:calc((100% - 1.5rem) / 2); } }

/* ---------- Móvil: cada tarjeta del carrusel queda centrada ----------
   La tarjeta ocupa el 82% y se ancla al centro (scroll-snap-align:center).
   Los espaciadores ::before/::after ocupan la mitad del sobrante para que la
   PRIMERA y la ÚLTIMA tarjeta también queden centradas; se les resta un gap
   porque entre espaciador y tarjeta hay separación, así el centro cae en 50%. */
@media (max-width:768px){
  .prod-slider,
  .test-slider{ gap:1rem; }
  .prod-slider .prod-card,
  .test-slider .test-card{ flex:0 0 82%; scroll-snap-align:center; }
  .prod-slider::before, .prod-slider::after,
  .test-slider::before, .test-slider::after{
    content:""; flex:0 0 calc(9% - 1rem); align-self:stretch;
  }
}

/* Carrusel de testimonios (Bootstrap) */
.test-carousel{ max-width:760px; margin:0 auto; position:relative; }
.test-carousel .carousel-inner{ padding-bottom:2.6rem; }
.test-carousel .test-card{ max-width:620px; margin:0 auto; text-align:center; }
.test-carousel .test-card__texto{ font-size:1.25rem; }
.test-carousel .test-card__pie{ justify-content:center; }
.test-carousel .carousel-control-prev,
.test-carousel .carousel-control-next{
  width:44px; height:44px; top:50%; transform:translateY(-50%);
  background:var(--azul); border-radius:50%; opacity:.9; transition:background .2s, opacity .2s;
}
.test-carousel .carousel-control-prev{ left:0; }
.test-carousel .carousel-control-next{ right:0; }
.test-carousel .carousel-control-prev:hover,
.test-carousel .carousel-control-next:hover{ background:var(--dorado); opacity:1; }
.test-carousel .carousel-control-prev-icon,
.test-carousel .carousel-control-next-icon{ width:1rem; height:1rem; }
.test-carousel .carousel-indicators{ bottom:0; margin:0; }
.test-carousel .carousel-indicators [data-bs-target]{
  width:9px; height:9px; border-radius:50%; border:0; background:var(--linea); opacity:1; margin:0 4px;
}
.test-carousel .carousel-indicators .active{ background:var(--dorado); }

/* ---------- Catálogo: filtros ---------- */
.catalogo-layout{ display:grid; grid-template-columns:260px 1fr; gap:2rem; align-items:start; }
.filtros{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio);
  padding:1.4rem; box-shadow:var(--sombra); position:sticky; top:92px;
  max-height:calc(100vh - 108px); overflow-y:auto;
}
.filtros__titulo{ font-family:var(--font-serif); font-size:1.3rem; color:var(--azul); margin:0 0 1rem; }
.filtro-grupo{ margin-bottom:1.3rem; }
.filtro-grupo > label{ display:block; font-weight:600; font-size:.85rem; color:var(--azul); margin-bottom:.5rem; text-transform:uppercase; letter-spacing:.06em; }
.campo{
  width:100%; padding:.6rem .7rem; border:1px solid var(--linea); border-radius:6px;
  background:var(--crema); color:var(--texto); font-family:var(--font-sans); font-size:.9rem;
}
.campo:focus{ outline:2px solid var(--dorado-claro); outline-offset:1px; border-color:var(--dorado); }
select.campo{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23B08D4F' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .8rem center; padding-right:2rem; }

/* Lista de categorías ordenada (vertical, tipo menú de tienda) */
.chips-filtro{ display:flex; flex-direction:column; gap:.15rem; }
.chip-filtro{
  width:100%; text-align:left; background:transparent; border:0;
  border-left:2px solid transparent; color:var(--azul);
  padding:.5rem .75rem; border-radius:6px; font-size:.9rem; font-weight:500;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.chip-filtro:hover{ background:var(--crema-2); border-left-color:var(--dorado-claro); color:var(--dorado); }
.chip-filtro.activo{ background:var(--azul); color:#fff; border-left-color:var(--dorado); }

.catalogo-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.2rem; flex-wrap:wrap; gap:.6rem; }
.catalogo-conteo{ color:var(--texto-suave); font-size:.9rem; }

/* Botón "Mostrar más productos" */
.cargar-mas-wrap{ text-align:center; margin-top:2.2rem; }
.cargar-mas-wrap .btn{ min-width:240px; }

.filtros-toggle{ display:none; }
.filtros__cerrar{ display:none; }
.filtros-backdrop{ display:none; }

/* ---------- Migas de pan ---------- */
.migas{ font-size:.85rem; color:var(--texto-suave); padding:1.2rem 0 0; }
.migas a:hover{ color:var(--dorado); }
.migas span{ color:var(--azul); }

/* ---------- Producto individual ---------- */
.producto{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; padding:2rem 0 3rem; align-items:start; }
/* La foto grupal es apaisada y queda más baja que la lista de velas: se centra
   verticalmente en su columna y se fija (sticky) para acompañar el scroll,
   evitando el hueco vacío debajo de la imagen. */
.producto__media{ position:sticky; top:1.5rem; align-self:center; }
/* Foto completa (sin recorte) a todo el ancho; clic para ampliar */
.producto__media img{
  width:100%; height:auto; object-fit:contain; display:block;
  background:var(--crema-2); border-radius:var(--radio); box-shadow:var(--sombra);
  cursor:zoom-in;
}

/* ---------- Lightbox / zoom de imagen ---------- */
.lightbox{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center; padding:1.5rem;
  background:rgba(15,23,34,.92); cursor:zoom-out;
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s;
}
.lightbox.abierto{ opacity:1; visibility:visible; }
.lightbox img{
  max-width:96vw; max-height:92vh; object-fit:contain;
  border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.55);
  transform:scale(.96); transition:transform .25s ease;
}
.lightbox.abierto img{ transform:scale(1); }
.lightbox__cerrar{
  position:absolute; top:1rem; right:1.1rem;
  width:44px; height:44px; border:0; border-radius:50%;
  background:rgba(255,255,255,.16); color:#fff; font-size:1.7rem; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .2s ease;
}
.lightbox__cerrar:hover{ background:var(--dorado); }
.producto__titulo-script{
  font-family:var(--font-serif); font-weight:600; color:var(--azul);
  font-size:clamp(2.1rem,4.8vw,3.2rem); line-height:1.08; margin:.1rem 0 .2rem;
}
.producto__titulo-serif{ font-family:var(--font-sans); color:var(--texto-suave); font-size:1rem; letter-spacing:.02em; margin:0 0 .7rem; font-weight:400; }
.producto__codigo{
  display:inline-block; background:var(--crema-2); color:var(--dorado); border:1px solid var(--linea);
  font-weight:600; letter-spacing:.05em; font-size:.85rem; padding:.3rem .7rem; border-radius:6px; margin-bottom:1rem;
}
.producto__desc{ color:#43423f; margin-bottom:1.5rem; }
.producto__acciones{ display:flex; gap:.7rem; flex-wrap:wrap; margin-bottom:1.8rem; }
.ficha{ width:100%; border-collapse:collapse; font-size:.92rem; }
.ficha caption{ text-align:left; font-family:var(--font-serif); font-size:1.2rem; color:var(--azul); margin-bottom:.6rem; }
.ficha th,.ficha td{ text-align:left; padding:.6rem .2rem; border-bottom:1px solid var(--linea); vertical-align:top; }
.ficha th{ color:var(--texto-suave); font-weight:500; width:42%; }
.ficha td{ color:var(--azul); font-weight:500; }

/* ---------- Placeholder de imagen ---------- */
.img-placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.4rem; text-align:center; padding:1rem; width:100%;
  background:var(--crema-2); border:1px dashed var(--dorado); border-radius:var(--radio);
  color:var(--texto-suave); min-height:120px;
}
.img-placeholder__dim{ font-family:var(--font-sans); font-weight:600; color:var(--azul); }
.img-placeholder__desc{ font-family:var(--font-sans); font-size:.85rem; }

/* ---------- Contacto ---------- */
.contacto-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:2.5rem; align-items:stretch; }
.contacto-grid > div{ display:flex; flex-direction:column; }
.contacto-grid form{ flex:1; }
.form-campo{ margin-bottom:1rem; }
.form-campo label{ display:block; font-weight:500; font-size:.88rem; color:var(--azul); margin-bottom:.35rem; }
textarea.campo{ resize:vertical; min-height:130px; }
.datos-contacto{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio);
  padding:1.8rem; box-shadow:var(--sombra); height:100%; display:flex; flex-direction:column;
}
.datos-contacto__logo{ display:block; height:120px; width:auto; margin:0 auto 1.2rem; }
.datos-contacto ul{ margin:0; }
.datos-contacto ul li{ display:flex; gap:.7rem; padding:.7rem 0; border-bottom:1px solid var(--linea); font-size:.95rem; }
.datos-contacto ul li:last-child{ border-bottom:0; }
.datos-contacto .etq{ color:var(--dorado); font-weight:600; min-width:92px; }
.datos-contacto .btn--wa{ margin-top:auto; }
.mapa iframe{ width:100%; height:400px; border:0; border-radius:var(--radio); display:block; }

/* ---------- Pie de página ---------- */
.footer{ background:var(--azul-oscuro); color:#d9d2c6; padding:3.5rem 0 0; margin-top:0; }
.footer a{ color:#d9d2c6; }
.footer a:hover{ color:var(--dorado-claro); }
/* Bloque centrado: logo + texto + menú en una sola fila debajo. */
.footer__centro{ display:flex; flex-direction:column; align-items:center; text-align:center; padding-bottom:2.5rem; }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1.2fr 1fr; gap:2rem; padding-bottom:2.5rem; }
.footer__logo{ display:inline-block; margin-bottom:1rem; }
.footer__logo img{ height:58px; width:auto; }
.footer h4{ color:#fff; font-family:var(--font-serif); font-size:1.15rem; margin-bottom:1rem; }
.footer__col p{ font-size:.9rem; line-height:1.7; }
.footer__col li{ padding:.28rem 0; font-size:.92rem; }
.footer__texto{ font-size:.9rem; line-height:1.7; max-width:620px; margin:0 auto; }

/* Menú del pie: una sola fila, mismo tratamiento tipográfico que el header. */
.footer__nav{ margin-top:1.6rem; }
.footer__nav ul{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:.4rem 2.4rem;
}
.footer__nav a{
  font-family:var(--font-sans); font-size:.82rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; padding:.35rem .2rem;
  position:relative; display:inline-block;
}
.footer__nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--dorado); transform:scaleX(0); transform-origin:center; transition:transform .28s ease;
}
.footer__nav a:hover::after, .footer__nav a:focus::after{ transform:scaleX(1); }
.footer__legal{ border-top:1px solid rgba(255,255,255,.12); padding:1.2rem 0; text-align:center; font-size:.82rem; color:#9c968b; }
.footer__redes{ display:flex; gap:.7rem; margin-top:.6rem; }
.footer__redes a{
  width:38px; height:38px; border:1px solid rgba(255,255,255,.2); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; transition:.2s;
}
.footer__redes a:hover{ background:var(--dorado); border-color:var(--dorado); color:#fff; }

/* ---------- Micrositio de vendedor ---------- */
.vendedor-header{ background:var(--azul); color:#fff; }
.vendedor-header__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; flex-wrap:wrap; }
.vendedor-header .logo{ display:inline-flex; }
.vendedor-header .logo img{ height:52px; width:auto; }
.vendedor-id{ text-align:right; }
.vendedor-id__nombre{ font-family:var(--font-serif); font-size:1.65rem; color:#fff; font-weight:600; line-height:1.15; }
.vendedor-id__contacto{ font-size:.98rem; color:#f2ead9; margin-top:.15rem; }
.vendedor-id__contacto a{ color:var(--dorado-claro); font-weight:600; text-decoration:underline; }
/* Móvil: logo centrado arriba y la info del distribuidor centrada debajo */
@media (max-width:768px){
  .vendedor-header__inner{ flex-direction:column; justify-content:center; text-align:center; gap:.55rem; padding:1.1rem 0; }
  .vendedor-id{ text-align:center; }
  .vendedor-id__nombre{ font-size:1.5rem; }
}

/* ---------- Login (mockup) ---------- */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem 1.25rem;
  background:radial-gradient(circle at top, var(--crema) 0%, var(--crema-2) 100%); }
.login-card{
  width:100%; max-width:400px; background:var(--blanco); border:1px solid var(--linea);
  border-top:4px solid var(--dorado); border-radius:var(--radio); padding:2.5rem 2rem; box-shadow:var(--sombra-fuerte);
  text-align:center;
}
.login-card img{ height:70px; margin:0 auto 1.2rem; }
.login-card h1{ font-size:1.6rem; margin-bottom:.2rem; }
.login-card .campo{ text-align:left; }
.login-card .form-campo{ text-align:left; }
.login-nota{ font-size:.8rem; color:var(--texto-suave); margin-top:1.4rem; font-style:italic; }

/* ---------- Panel admin (mockup) ---------- */
.panel{ display:grid; grid-template-columns:250px 1fr; min-height:100vh; }
.panel__side{ background:var(--azul-oscuro); color:#d9d2c6; padding:1.5rem 1rem; }
.panel__side .logo{ margin-bottom:1.5rem; display:inline-block; }
.panel__side .logo img{ height:52px; width:auto; }
.panel__nav-label{ display:block; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:#8a8478; margin:.2rem .85rem .7rem; }
.panel__nav-sep{ display:block; height:1px; background:rgba(255,255,255,.1); margin:.9rem .85rem; }
.panel__nav a{
  display:flex; align-items:center; gap:.75rem; padding:.7rem .85rem; border-radius:8px;
  font-size:.92rem; color:#c9c2b5; border-left:2px solid transparent; margin-bottom:.1rem;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.panel__nav a svg{ width:18px; height:18px; flex:0 0 auto; opacity:.8; }
.panel__nav a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.panel__nav a:hover svg{ opacity:1; }
.panel__nav a.activo{ background:rgba(176,141,79,.16); color:#fff; border-left-color:var(--dorado); }
.panel__nav a.activo svg{ color:var(--dorado-claro); opacity:1; }
.panel__nav-volver{ color:#9c968b !important; }
.panel__main{ padding:2rem; background:var(--crema); }
.panel__topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; flex-wrap:wrap; gap:.6rem; }
.badge-demo{ background:var(--dorado); color:#fff; font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; font-weight:600; padding:.25rem .6rem; border-radius:4px; }
.panel-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
.panel-card{ background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio); padding:1.6rem; box-shadow:var(--sombra); }
.panel-card h3{ display:flex; align-items:center; gap:.5rem; font-size:1.25rem; }
.panel-card p{ color:var(--texto-suave); font-size:.92rem; margin:.3rem 0 1rem; }
.panel-skel{ height:12px; border-radius:6px; background:var(--crema-2); margin-bottom:.6rem; }
.panel-skel.corto{ width:60%; }

/* ---------- Utilidades de espaciado ---------- */
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.mt-2{ margin-top:1.5rem; }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width:1024px){
  .cats-grid{ grid-template-columns:repeat(3,1fr); }
  .prod-grid{ grid-template-columns:repeat(3,1fr); }
  .footer__grid{ grid-template-columns:1fr 1fr; }
}

/* Encabezado / menú: colapsa bajo lg (992px), igual que la navbar Bootstrap */
@media (max-width:991.98px){
  .header__inner{ grid-template-columns:auto 1fr auto; min-height:64px; gap:.6rem; }
  .header__lado--izq{ gap:.4rem; }
  .hamburguesa{ display:flex; }
  .header__icono.soloescritorio{ display:none; }
  .logo--centro img{ height:58px; }
  .header__menu{ border-top:0; padding:0; position:static; }
  /* Menú móvil a pantalla completa, translúcido y elegante */
  .header__menu .navbar-collapse{
    position:fixed; inset:0; z-index:150; overflow-y:auto;
    background:rgba(250,246,239,.93);
    -webkit-backdrop-filter:blur(10px) saturate(120%);
    backdrop-filter:blur(10px) saturate(120%);
    padding:1.4rem 1.5rem 2.5rem;
  }
  /* Sin animación de altura de Bootstrap (evita el lag al abrir); fade propio.
     opacity:0 en .collapsing evita el parpadeo: sin esto Bootstrap pinta el menú
     completo un instante antes de que .show inicie el fade desde opacity:0. */
  .header__menu .navbar-collapse.collapsing{ transition:none !important; height:auto !important; opacity:0; }
  .header__menu .navbar-collapse.show{ animation:menuFade .22s ease both; }
  .header__menu .navbar-collapse::before{
    content:""; display:block; width:100%; height:120px; margin:.3rem auto 1.4rem;
    background:url("../img/logo-vertical.png") center/contain no-repeat;
  }
  .header__nav{ flex-direction:column; align-items:center; gap:.1rem; width:100%; padding:0; }
  .header__nav .nav-item{ display:block; width:100%; max-width:320px; text-align:center; }
  .header__menu .navbar-collapse.show .header__nav .nav-item{ animation:menuItem .32s ease both; }
  .header__nav .nav-item:nth-child(1){ animation-delay:.05s; }
  .header__nav .nav-item:nth-child(2){ animation-delay:.10s; }
  .header__nav .nav-item:nth-child(3){ animation-delay:.15s; }
  .header__nav .nav-item:nth-child(4){ animation-delay:.20s; }
  .header__nav .nav-item:nth-child(5){ animation-delay:.25s; }
  .header__nav .nav-item:nth-child(6){ animation-delay:.30s; }
  .header__nav .nav-link{
    font-size:1.02rem; letter-spacing:.14em; padding:.9rem .2rem;
    border-bottom:1px solid var(--linea);
  }
  .header__nav .nav-link::after{ display:none; }
  .hamburguesa{ position:relative; z-index:200; }
}

@media (max-width:768px){
  .seccion{ padding:3rem 0; }
  .hero--home .hero__titulo{ white-space:normal; }
  /* Centrado SOLO en móvil (en PC queda como estaba) */
  .footer__col{ text-align:center; }
  .footer__redes{ justify-content:center; }
  .seccion__intro{ text-align:center; }
  .split__texto{ text-align:center; }
  .mvv-card{ text-align:center; }
  .valores-lista{ align-items:center; }
  .valores-lista li{ justify-content:center; width:100%; }
  .cats-grid{ grid-template-columns:repeat(2,1fr); }
  .prod-grid, .prod-grid--3{ grid-template-columns:repeat(2,1fr); }
  #catalogo-grid{ grid-template-columns:1fr; } /* catálogo: 1 producto por fila en móvil */
  #catalogo-grid .prod-card__nombre{ font-size:1.35rem; } /* título un poco más grande en móvil */
  .mvv-grid, .test-grid{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; }
  .split--invertido .split__media{ order:-1; }
  .contacto-grid{ grid-template-columns:1fr; }
  .producto{ grid-template-columns:1fr; }
  .producto__media{ position:static; align-self:auto; } /* sin sticky en móvil */

  /* Catálogo: botón flotante + hoja inferior de filtros */
  .catalogo-layout{ grid-template-columns:1fr; }
  .filtros-toggle{
    display:inline-flex; align-items:center; gap:.55rem; margin:0;
    position:fixed; left:1.1rem; right:auto; bottom:1.1rem; z-index:140;
    width:auto; border:0; border-radius:99px; color:#fff; background:var(--azul);
    font-weight:600; padding:.85rem 1.4rem; box-shadow:0 10px 26px rgba(20,32,47,.42);
  }
  .filtros-toggle:hover{ background:var(--azul-oscuro); }
  /* Panel de filtros tipo CAJÓN: entra desde la izquierda, ancho parcial (no cubre
     todo el viewport); el fondo visible se toca para cerrarlo. */
  .filtros{
    position:fixed; top:0; left:0; bottom:0; right:auto; z-index:160;
    width:min(84%, 330px); height:100%; max-height:none; overflow-y:auto;
    border-radius:0 18px 18px 0;
    box-shadow:2px 0 34px rgba(20,32,47,.28);
    transform:translateX(-100%); transition:transform .32s ease;
  }
  .filtros:not(.colapsado){ transform:translateX(0); }
  /* Fondo oscuro tras el panel de filtros: se toca para cerrarlo */
  .filtros-backdrop{
    display:block; position:fixed; inset:0; z-index:150;
    background:rgba(20,32,47,.42);
    opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
  }
  body.filtros-abierto .filtros-backdrop{ opacity:1; visibility:visible; }
  body.filtros-abierto{ overflow:hidden; }
  /* Botón X para cerrar el panel de filtros en móvil */
  .filtros__cerrar{
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:.7rem; right:.7rem; width:36px; height:36px; padding:0;
    border:0; border-radius:50%; background:var(--crema-2); color:var(--azul);
    font-size:1.6rem; line-height:1; cursor:pointer;
  }
  .filtros__cerrar:hover{ background:var(--linea); color:var(--azul-oscuro); }

  /* Panel admin en móvil */
  .panel{ grid-template-columns:1fr; }
  .panel__side{ padding:1rem 1rem .4rem; }
  .panel__side .logo{ display:block; text-align:center; margin-bottom:.9rem; }
  .panel__nav{ display:flex; flex-wrap:nowrap; overflow-x:auto; gap:.4rem; padding-bottom:.5rem; -webkit-overflow-scrolling:touch; }
  .panel__nav-label, .panel__nav-sep{ display:none; }
  .panel__nav a{
    flex:0 0 auto; white-space:nowrap; margin-bottom:0;
    border-left:0; border-bottom:2px solid transparent; border-radius:6px;
  }
  .panel__nav a.activo{ border-left:0; border-bottom-color:var(--dorado); }
  .panel-cards{ grid-template-columns:1fr; }
}

@media (max-width:480px){
  .hero__inner{ padding:4rem 1.25rem; }
  .hero--home::after{ background:linear-gradient(180deg, rgba(20,32,47,.35) 0%, rgba(20,32,47,.55) 55%, rgba(20,32,47,.8) 100%); }
  .hero--home .hero__inner{ text-align:center; padding:4rem 1.25rem; }
  .hero--home .hero__box{ max-width:none; }
  .cats-grid{ grid-template-columns:1fr 1fr; gap:.8rem; }
  .prod-grid, .prod-grid--3{ grid-template-columns:repeat(2,1fr); gap:.8rem; }
  .prod-card__nombre{ font-size:1rem; }
  .prod-card__cuerpo{ padding:.8rem .8rem 1rem; }
  .footer__grid{ grid-template-columns:1fr; }
  .footer__nav ul{ gap:.4rem 1.3rem; }
  .footer__nav a{ font-size:.76rem; letter-spacing:.12em; }
  .seccion__titulo{ font-size:1.7rem; }
  .franja{ padding:1.8rem 1.2rem; }
  .producto__acciones .btn{ width:100%; }
}

/* ---------- Animación de aparición al hacer scroll (repetible) ---------- */
.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.2,.65,.3,1), transform .7s cubic-bezier(.2,.65,.3,1);
  will-change:opacity, transform;
}
.reveal.reveal-in{ opacity:1; transform:none; }

/* Accesibilidad: respetar reduce motion */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .hero__box > *, .banner__inner > *{ opacity:1 !important; transform:none !important; }
}