/* ============================================================
   MERCERÍA DANEL — styles.css
   Sistema de tokens + todos los estilos del sitio (archivo único)
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Paleta institucional */
  --color-blanco: #FFFFFF;
  --color-negro: #000000;
  --color-rojo: #C22929;
  --color-borravino: #9E0F04;
  --color-durazno: #FCBF7F;
  --color-naranja: #E37F12;

  /* Roles semánticos */
  --color-bg: #FFFDFB;
  --color-bg-alt: #FBF3EB;
  --color-texto: #221512;
  --color-texto-suave: #6b5850;
  --color-primario: var(--color-borravino);
  --color-primario-hover: #7c0c03;
  --color-acento: var(--color-naranja);
  --color-acento-suave: var(--color-durazno);
  --color-linea: rgba(34, 21, 18, 0.10);
  --color-vidrio-bg: rgba(255, 255, 255, 0.65);
  --color-vidrio-borde: rgba(255, 255, 255, 0.5);
  --color-header-bg: rgba(20, 10, 8, 0.88);

  /* Tipografía */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Radios y espaciados */
  --radio-sm: 6px;
  --radio-md: 12px;
  --radio-lg: 20px;
  --radio-pill: 999px;
  --seccion-py: clamp(60px, 9vw, 120px);
  --container-w: 1280px;

  /* Sombra */
  --sombra-card: 0 10px 30px -12px rgba(34,21,18,0.18);
  --sombra-card-hover: 0 20px 45px -15px rgba(34,21,18,0.28);

  /* Timings sincronizados con JS */
  --hero-fade: 900ms;
  --hero-kb: 8000ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-texto);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0 0 .5em; line-height: 1.15; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--color-naranja); outline-offset: 2px; }

.skip-link {
  position: absolute; left: 8px; top: -60px;
  background: var(--color-negro); color: #fff;
  padding: 10px 16px; border-radius: var(--radio-sm);
  z-index: 3000; transition: top .2s;
}
.skip-link:focus { top: 8px; }

.contenedor { max-width: var(--container-w); margin: 0 auto; padding: 0 24px; }
.seccion { padding: var(--seccion-py) 0; }
.seccion-alt { background: var(--color-bg-alt); }
.seccion__cabecera { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.seccion__eyebrow {
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-acento); display: inline-flex;
  align-items: center; gap: 8px; margin-bottom: 14px;
}
.seccion__eyebrow::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-acento); animation: parpadeo 1.8s ease-in-out infinite;
}
@keyframes parpadeo { 0%,100%{opacity:1} 50%{opacity:.25} }
.seccion__titulo { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.seccion__subtitulo { color: var(--color-texto-suave); font-size: 1.05rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: var(--radio-pill); border: none;
  font-weight: 600; font-size: .95rem; transition: transform .25s, box-shadow .25s, background .25s;
  white-space: normal;
}
.btn-primario {
  background: linear-gradient(135deg, var(--color-naranja), var(--color-borravino));
  color: #fff;
  box-shadow: 0 0 0 0 rgba(227,127,18,.55);
  animation: latido 2.2s ease-in-out infinite;
}
.btn-primario:hover { animation-play-state: paused; box-shadow: 0 0 0 12px rgba(227,127,18,0); transform: translateY(-2px); }
@keyframes latido {
  0%,100% { box-shadow: 0 0 0 0 rgba(227,127,18,.45); transform: scale(1); }
  50% { box-shadow: 0 0 0 10px rgba(227,127,18,0); transform: scale(1.03); }
}
.btn-secundario {
  background: transparent; color: var(--color-primario);
  border: 1.5px solid var(--color-primario);
}
.btn-secundario:hover { background: var(--color-primario); color: #fff; }
.btn-fantasma { background: transparent; color: var(--color-texto); border: 1.5px solid var(--color-linea); }
.btn-fantasma:hover { border-color: var(--color-primario); color: var(--color-primario); }
.btn-sm { padding: 9px 18px; font-size: .85rem; }
.btn-icono { padding: 10px; border-radius: 50%; }

/* ---------- 3. HEADER ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  padding: 18px 0;
  transition: padding .3s;
}
.site-header::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: transparent; transition: background .3s, backdrop-filter .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled { padding: 10px 0; }
.site-header.scrolled::before {
  background: var(--color-header-bg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(255,255,255,.08);
}
/* Páginas sin hero propio (todo menos la home): el header no puede quedar
   transparente-hasta-scroll porque no hay fondo oscuro debajo que sostenga
   el contraste. Se muestra sólido desde el primer fotograma. */
.site-header--solido::before {
  background: var(--color-header-bg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(255,255,255,.08);
}
.site-header--solido { padding: 14px 0; }
.site-header .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: #fff; }
.logo__marca { color: var(--color-acento-suave); }
.logo small { display: block; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .08em; color: rgba(255,255,255,.6); font-weight: 400; }

.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a:not(.btn) {
  position: relative; color: rgba(255,255,255,.88); font-size: .92rem; font-weight: 500; padding: 4px 0;
}
.nav-links a:not(.btn)::after {
  content: ''; position: absolute; left: 0; bottom: -3px; height: 2px; width: 0%;
  background: var(--color-acento-suave); transition: width .25s;
}
.nav-links a:not(.btn):hover::after { width: 100%; }
.nav-links a:not(.btn):hover { color: #fff; }

.header-acciones { display: flex; align-items: center; gap: 12px; }
.btn-consulta {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.2);
  padding: 9px 16px; border-radius: var(--radio-pill); font-size: .85rem; font-weight: 600;
}
.btn-consulta .badge {
  background: var(--color-acento); color: #fff; border-radius: 50%;
  min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
  font-size: .7rem; font-family: var(--font-mono);
}
.btn-hamburguesa {
  display: none; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2); position: relative;
}
.btn-hamburguesa span, .btn-hamburguesa::before, .btn-hamburguesa::after {
  content: ''; position: absolute; left: 13px; right: 13px; height: 2px; background: #fff; transition: transform .25s, opacity .25s;
}
.btn-hamburguesa::before { top: 16px; }
.btn-hamburguesa span { top: 22px; }
.btn-hamburguesa::after { top: 28px; }
.btn-hamburguesa.abierto::before { transform: translateY(6px) rotate(45deg); }
.btn-hamburguesa.abierto::after { transform: translateY(-6px) rotate(-45deg); }
.btn-hamburguesa.abierto span { opacity: 0; }

/* Mega menú de categorías (desktop) */
.menu-categorias { position: relative; }
.menu-categorias__panel {
  position: fixed; left: 0; right: 0; top: 0; margin-top: 74px;
  background: rgba(20,10,8,.97); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.1);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .22s, transform .22s, visibility .22s;
  z-index: 999;
}
.menu-categorias:hover .menu-categorias__panel,
.menu-categorias__panel:hover { opacity: 1; visibility: visible; transform: translateY(0); }
.menu-categorias__grid {
  max-width: var(--container-w); margin: 0 auto; padding: 34px 24px 40px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 28px;
}
.menu-categorias__item a { color: rgba(255,255,255,.92); font-weight: 600; font-size: .92rem; display: flex; align-items: center; gap: 8px; }
.menu-categorias__item span.count { font-family: var(--font-mono); font-size: .68rem; color: var(--color-acento-suave); font-weight: 400; }

/* Panel móvil */
.panel-movil {
  position: fixed; inset: 0; z-index: 1300; height: 100dvh;
  background: #140a08; visibility: hidden; opacity: 0;
  transition: opacity .25s, visibility .25s;
  overflow-y: auto; padding: 90px 24px 40px;
}
.panel-movil.abierto { visibility: visible; opacity: 1; }
.panel-movil__categoria { border-bottom: 1px solid rgba(255,255,255,.1); }
.panel-movil__categoria summary { color: #fff; font-weight: 600; padding: 16px 4px; display: flex; justify-content: space-between; align-items: center; }
.panel-movil__categoria ul { padding: 0 4px 16px 14px; display: grid; gap: 10px; }
.panel-movil__categoria a { color: rgba(255,255,255,.75); font-size: .9rem; }
.panel-movil__acciones { margin-top: 24px; display: grid; gap: 12px; }
body.menu-abierto { overflow: hidden; }

/* ---------- 4. HERO ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  overflow: hidden; background: #140a08;
}
.hero-slide {
  position: absolute; inset: 0; opacity: 0; z-index: 0;
  transition: opacity var(--hero-fade) cubic-bezier(0.37,0.01,0.24,1);
}
.hero-slide.active { opacity: 1; z-index: 2; }
.hero-slide.leaving { opacity: 1; z-index: 1; }
.hero-slide__fondo {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(227,127,18,.35), transparent 55%),
              radial-gradient(circle at 80% 75%, rgba(194,41,41,.4), transparent 55%),
              linear-gradient(135deg, #1c0e0a 0%, #2b120b 55%, #150a08 100%);
  backface-visibility: hidden; transform: translateZ(0);
}
.hero-slide.active .hero-slide__fondo,
.hero-slide.leaving .hero-slide__fondo { animation: kenBurns var(--hero-kb) linear forwards; }
@keyframes kenBurns { from { transform: scale(1) translate(0,0); } to { transform: scale(1.08) translate(-1%,-1%); } }
.hero-slide__patron {
  position: absolute; inset: 0; opacity: .18; mix-blend-mode: screen;
  background-image: radial-gradient(rgba(255,255,255,.5) 1px, transparent 1.4px);
  background-size: 26px 26px;
}
.hero__contenido { position: relative; z-index: 5; max-width: 760px; padding: 140px 0 100px; }
.hero__badge {
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-acento-suave); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px;
}
.hero__badge::before { content:''; width:7px; height:7px; border-radius:50%; background: var(--color-acento-suave); animation: parpadeo 1.8s ease-in-out infinite; }
.hero h1 { color: #fff; font-size: clamp(2.4rem, 5.4vw, 4.1rem); min-height: 2.4em; }
.hero h1 .acento { color: var(--color-acento-suave); }
.hero__frase { display: inline; }
.hero__frase .palabra { display: inline-block; opacity: 0; transform: translateY(14px) rotateX(35deg); transition: opacity .5s ease, transform .5s ease; }
.hero__frase .palabra.visible { opacity: 1; transform: translateY(0) rotateX(0); }
.hero__frase.is-out .palabra { opacity: 0 !important; transition: opacity 420ms; }
.hero__subtitulo { color: rgba(255,255,255,.78); font-size: 1.1rem; max-width: 560px; margin-bottom: 34px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__dots { position: absolute; z-index: 6; bottom: 34px; left: 0; right: 0; display: flex; justify-content: center; gap: 10px; }
.hero__dot { width: 40px; height: 4px; border-radius: var(--radio-pill); background: rgba(255,255,255,.25); overflow: hidden; border: none; padding: 0; }
.hero__dot__barra { display: block; height: 100%; width: 0%; background: var(--color-acento-suave); }
.hero__dot.active .hero__dot__barra { animation: progresoDot var(--hero-intervalo, 7000ms) linear forwards; }
@keyframes progresoDot { from { width: 0% } to { width: 100% } }

.hero__flecha {
  position: absolute; z-index: 6; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); color: #fff;
  opacity: 0; transition: opacity .25s, background .25s;
}
.hero:hover .hero__flecha { opacity: 1; }
.hero__flecha--prev { left: 26px; } .hero__flecha--next { right: 26px; }
.hero__flecha:hover { background: rgba(255,255,255,.18); }

/* ---------- 5. TARJETAS DE VIDRIO / MACROCATEGORÍAS ---------- */
.grid-macro { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.card-macro {
  position: relative; background: var(--color-vidrio-bg); border: 1px solid var(--color-vidrio-borde);
  border-radius: var(--radio-lg); padding: 26px 22px; overflow: hidden;
  box-shadow: var(--sombra-card); transition: transform .3s, box-shadow .3s;
  --mx: 50%; --my: 50%;
}
.card-macro::before {
  content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .3s;
  background: radial-gradient(280px circle at var(--mx) var(--my), rgba(227,127,18,.18), transparent 60%);
}
.card-macro:hover::before { opacity: 1; }
.card-macro:hover { transform: translateY(-6px); box-shadow: var(--sombra-card-hover); }
.card-macro__icono {
  width: 52px; height: 52px; border-radius: var(--radio-md); display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--color-durazno), var(--color-naranja)); color: #fff; margin-bottom: 18px;
}
.card-macro h3 { font-size: 1.08rem; margin-bottom: 6px; }
.card-macro p { color: var(--color-texto-suave); font-size: .85rem; margin-bottom: 14px; }
.card-macro__link { font-size: .82rem; font-weight: 700; color: var(--color-primario); display: inline-flex; gap: 6px; align-items: center; }

/* ---------- 6. PANEL HUD ---------- */
.hud {
  background: #1a0e0a; border-radius: var(--radio-lg); padding: 34px; color: #fff;
  border: 1px solid rgba(255,255,255,.08); position: relative; overflow: hidden;
}
.hud__luces { display: flex; gap: 7px; margin-bottom: 22px; }
.hud__luces span { width: 10px; height: 10px; border-radius: 50%; }
.hud__luces span:nth-child(1){ background:#ff5f57 } .hud__luces span:nth-child(2){ background:#febc2e } .hud__luces span:nth-child(3){ background:#28c840 }
.hud__fila { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px dashed rgba(255,255,255,.12); font-family: var(--font-mono); font-size: .82rem; }
.hud__fila span:first-child { color: rgba(255,255,255,.5); }
.hud__fila span:last-child { color: var(--color-acento-suave); }

/* ---------- 7. CONTADORES ---------- */
.grid-contadores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.contador__num { font-family: var(--font-display); font-size: clamp(2rem, 3.6vw, 3rem); color: var(--color-primario); }
.contador__label { font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-texto-suave); }

/* ---------- 8. MARQUEE ---------- */
.marquee { overflow: hidden; border-top: 1px solid var(--color-linea); border-bottom: 1px solid var(--color-linea); padding: 22px 0; }
.marquee__pista { display: flex; width: max-content; gap: 60px; animation: marqueeMove 32s linear infinite; }
@keyframes marqueeMove { from { transform: translateX(0);} to { transform: translateX(-50%);} }
.marquee__item { font-family: var(--font-mono); font-size: .85rem; letter-spacing: .04em; color: var(--color-texto-suave); text-transform: uppercase; white-space: nowrap; display: flex; align-items: center; gap: 10px; }
.marquee__item::before { content: '•'; color: var(--color-acento); }

/* ---------- 9. REVEALS ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1.visible { transition-delay: .1s; }
.reveal-d2.visible { transition-delay: .2s; }
.reveal-d3.visible { transition-delay: .3s; }

/* ---------- 10. CATÁLOGO ---------- */
.breadcrumbs { font-size: .82rem; color: var(--color-texto-suave); display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.breadcrumbs a { color: var(--color-primario); font-weight: 600; }
.breadcrumbs .sep { opacity: .4; }

.catalogo-layout { display: grid; grid-template-columns: 280px 1fr; gap: 36px; align-items: start; }
.filtros {
  position: sticky; top: 100px; background: #fff; border: 1px solid var(--color-linea);
  border-radius: var(--radio-lg); padding: 22px; box-shadow: var(--sombra-card);
}
.filtros h3 { font-size: 1rem; margin-bottom: 14px; }
.filtros__grupo { margin-bottom: 22px; }
.filtros__grupo-titulo { font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-texto-suave); margin-bottom: 10px; }
.filtros__lista { display: grid; gap: 8px; max-height: 260px; overflow-y: auto; padding-right: 4px; }
.filtros__lista label { display: flex; align-items: center; gap: 8px; font-size: .86rem; cursor: pointer; }
.filtros__lista input { accent-color: var(--color-primario); }

.toolbar-catalogo { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.toolbar-catalogo__cantidad { font-size: .88rem; color: var(--color-texto-suave); }
.buscador-inline { position: relative; flex: 1; max-width: 380px; }
.buscador-inline input {
  width: 100%; padding: 12px 16px 12px 40px; border-radius: var(--radio-pill);
  border: 1px solid var(--color-linea); font-size: .9rem; background: #fff;
}
.buscador-inline svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--color-texto-suave); }

.grid-productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.card-producto {
  background: #fff; border: 1px solid var(--color-linea); border-radius: var(--radio-md);
  overflow: hidden; transition: transform .25s, box-shadow .25s; display: flex; flex-direction: column;
}
.card-producto:hover { transform: translateY(-4px); box-shadow: var(--sombra-card); }
.card-producto__img { aspect-ratio: 1/1; background: var(--color-bg-alt); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.card-producto__img img { width: 100%; height: 100%; object-fit: cover; }
.card-producto__img svg { width: 40%; opacity: .3; }
.card-producto__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-producto__codigo { font-family: var(--font-mono); font-size: .72rem; color: var(--color-naranja); font-weight: 700; }
.card-producto__nombre { font-size: .9rem; font-weight: 600; line-height: 1.35; flex: 1; }
.card-producto__presentacion { font-size: .76rem; color: var(--color-texto-suave); }
.card-producto__colores { font-size: .72rem; color: var(--color-texto-suave); }
.card-producto__acciones { display: flex; gap: 8px; margin-top: 8px; }
.card-producto__acciones .btn { flex: 1; padding: 9px 10px; font-size: .78rem; }

.paginacion { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.paginacion a, .paginacion span { min-width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radio-sm); border: 1px solid var(--color-linea); font-size: .85rem; }
.paginacion .activo { background: var(--color-primario); color: #fff; border-color: var(--color-primario); }

/* ---------- 11. FICHA DE PRODUCTO ---------- */
.ficha-producto { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
.ficha-galeria__principal { aspect-ratio: 1/1; border-radius: var(--radio-lg); overflow: hidden; background: var(--color-bg-alt); display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-linea); }
.ficha-galeria__principal img { width: 100%; height: 100%; object-fit: cover; }
.ficha-galeria__principal svg { width: 30%; opacity: .25; }
.ficha__codigo { font-family: var(--font-mono); color: var(--color-naranja); font-weight: 700; letter-spacing: .04em; margin-bottom: 10px; display: inline-block; }
.ficha h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.ficha__presentacion { color: var(--color-texto-suave); margin-bottom: 22px; }
.ficha__swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.swatch {
  padding: 8px 14px; border-radius: var(--radio-pill); border: 1.5px solid var(--color-linea);
  font-size: .78rem; font-weight: 600; background: #fff; transition: border-color .2s, background .2s;
}
.swatch.activo, .swatch:hover { border-color: var(--color-primario); background: var(--color-bg-alt); }
.ficha__acciones { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }
.ficha__nota { background: var(--color-bg-alt); border-radius: var(--radio-md); padding: 16px 18px; font-size: .85rem; color: var(--color-texto-suave); }
.ficha__relacionados { margin-top: 90px; }

/* ---------- 12. CARRITO DE CONSULTA (drawer) ---------- */
.drawer-consulta {
  position: fixed; top: 0; right: 0; height: 100dvh; width: min(420px, 100vw); z-index: 1400;
  background: #fff; box-shadow: -20px 0 50px rgba(0,0,0,.25);
  transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
}
.drawer-consulta.abierto { transform: translateX(0); }
.drawer-consulta__header { padding: 22px 22px 16px; border-bottom: 1px solid var(--color-linea); display: flex; justify-content: space-between; align-items: center; }
.drawer-consulta__lista { flex: 1; overflow-y: auto; padding: 14px 22px; display: grid; gap: 12px; }
.item-consulta { display: flex; gap: 12px; padding: 10px; border: 1px solid var(--color-linea); border-radius: var(--radio-md); align-items: center; }
.item-consulta__img { width: 52px; height: 52px; border-radius: var(--radio-sm); background: var(--color-bg-alt); flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.item-consulta__img img { width: 100%; height: 100%; object-fit: cover; }
.item-consulta__info { flex: 1; min-width: 0; }
.item-consulta__nombre { font-size: .82rem; font-weight: 600; line-height: 1.3; }
.item-consulta__codigo { font-family: var(--font-mono); font-size: .7rem; color: var(--color-naranja); }
.item-consulta__cantidad { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.item-consulta__cantidad button { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--color-linea); background: #fff; font-size: .8rem; line-height: 1; }
.item-consulta__quitar { color: var(--color-texto-suave); font-size: .72rem; text-decoration: underline; flex-shrink: 0; }
.drawer-consulta__footer { padding: 18px 22px 24px; border-top: 1px solid var(--color-linea); display: grid; gap: 10px; }
.drawer-consulta__vacio { padding: 60px 24px; text-align: center; color: var(--color-texto-suave); }
.overlay-drawer { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1350; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.overlay-drawer.visible { opacity: 1; visibility: visible; }

/* ---------- 13. FOOTER ---------- */
.site-footer { background: #140a08; color: rgba(255,255,255,.75); padding: 70px 0 26px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 40px; margin-bottom: 50px; }
.footer-grid h4 { color: #fff; font-size: .95rem; margin-bottom: 16px; font-family: var(--font-sans); font-weight: 700; }
.footer-grid ul { display: grid; gap: 10px; }
.footer-grid a { font-size: .85rem; color: rgba(255,255,255,.65); }
.footer-grid a:hover { color: var(--color-acento-suave); }
.footer-logo { font-family: var(--font-display); font-size: 1.3rem; color: #fff; margin-bottom: 12px; }
.footer-desc { font-size: .85rem; color: rgba(255,255,255,.55); max-width: 320px; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: .78rem; color: rgba(255,255,255,.45); }

/* ---------- 14. WHATSAPP BUBBLE ---------- */
.wa-bubble {
  position: fixed; right: 24px; bottom: 24px; z-index: 950;
  width: 60px; height: 60px; border-radius: 50%; background: #25D366;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.wa-bubble::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; background: #25D366;
  animation: ping 2.4s cubic-bezier(0,0,.2,1) infinite; z-index: -1;
}
@keyframes ping { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.9); opacity: 0; } }
.wa-bubble__tooltip {
  position: absolute; right: 74px; top: 50%; transform: translateY(-50%);
  background: #fff; color: var(--color-texto); padding: 8px 14px; border-radius: var(--radio-sm);
  font-size: .8rem; white-space: nowrap; box-shadow: var(--sombra-card); opacity: 0; visibility: hidden;
  transition: opacity .2s, visibility .2s;
}
.wa-bubble:hover .wa-bubble__tooltip { opacity: 1; visibility: visible; }
@media (max-width: 768px) {
  .wa-bubble { width: 54px; height: 54px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
  .wa-bubble__tooltip { display: none; }
}

/* ---------- 15. FORMULARIO ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.campo { display: grid; gap: 6px; }
.campo--full { grid-column: 1 / -1; }
.campo label { font-size: .84rem; font-weight: 600; }
.campo input, .campo select, .campo textarea {
  padding: 12px 14px; border-radius: var(--radio-sm); border: 1px solid var(--color-linea);
  font-family: inherit; font-size: .92rem; background: #fff;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--color-primario); }
.campo-check { display: flex; align-items: flex-start; gap: 10px; font-size: .82rem; grid-column: 1/-1; }
.hp-field { position: absolute; left: -9999px; opacity: 0; }
.form-estado { grid-column: 1/-1; padding: 14px 16px; border-radius: var(--radio-sm); font-size: .88rem; display: none; }
.form-estado.ok { display: block; background: #e7f5ea; color: #1c6b32; }
.form-estado.error { display: block; background: #fbe9e7; color: var(--color-borravino); }

.info-contacto { display: grid; gap: 20px; }
.info-contacto__item { display: flex; gap: 14px; align-items: flex-start; }
.info-contacto__icono { width: 44px; height: 44px; border-radius: var(--radio-md); background: var(--color-bg-alt); display: flex; align-items: center; justify-content: center; color: var(--color-primario); flex-shrink: 0; }
.mapa-embed { border-radius: var(--radio-lg); overflow: hidden; border: 1px solid var(--color-linea); margin-top: 24px; }
.mapa-embed iframe { width: 100%; height: 320px; border: 0; display: block; }

/* ---------- 16. PÁGINAS INSTITUCIONALES ---------- */
.pagina-hero { padding: 150px 0 60px; background: linear-gradient(180deg, var(--color-bg-alt), var(--color-bg)); }
.timeline-pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.timeline-pasos__item { position: relative; padding-top: 10px; }
.timeline-pasos__num { font-family: var(--font-mono); font-size: 2.2rem; color: var(--color-acento-suave); font-weight: 700; }
.pagina-error { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 140px 24px 60px; }
.pagina-error__codigo { font-family: var(--font-display); font-size: clamp(4rem,12vw,7rem); color: var(--color-acento-suave); }
.icono-check { width: 70px; height: 70px; border-radius: 50%; background: var(--color-bg-alt); display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }

/* ---------- 17. RESPONSIVE ---------- */
.grid-split { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.grid-split--top { align-items: start; }
.grid-split--wide { grid-template-columns: 1.3fr 1fr; }
@media (max-width: 1024px) {
  .grid-split, .grid-split--wide { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .grid-macro { grid-template-columns: repeat(2, 1fr); }
  .catalogo-layout { grid-template-columns: 1fr; }
  .filtros { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .ficha-producto { grid-template-columns: 1fr; }
  .grid-contadores { grid-template-columns: repeat(2, 1fr); }
  .timeline-pasos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .nav-links, .menu-categorias, .header-acciones .btn-consulta span.texto { display: none; }
  .btn-hamburguesa { display: block; }
  .grid-macro { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .form-grid { grid-template-columns: 1fr; }
  .campo--full { grid-column: 1; }
  .hero__ctas .btn { flex: 1 1 100%; }
  .grid-contadores { grid-template-columns: 1fr 1fr; }
  .toolbar-catalogo { flex-direction: column; align-items: stretch; }
  .buscador-inline { max-width: none; }
}