/* ==========================================================================
   Mundi Chicle - Design System & Styles
   Paleta y tipografía tomadas de la guía de marca real del cliente
   (Azul Mundi Chicle / Azul Secundario / Coral / Naranja / Mantequilla / Oliva /
   Marfil, Poppins + Inter). No son colores elegidos a ojo: cada valor
   corresponde a un swatch con nombre y hex de esa guía.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  /* Paleta Mundi Chicle */
  --primary: #4E7FA8;           /* Azul Mundi Chicle (principal) */
  --primary-hover: #3E6686;
  --primary-light: #EAF1F8;
  --secondary: #E58A3A;         /* Naranja (cálido) — acentos y CTAs */
  --secondary-hover: #B76E2E;
  --accent-yellow: #E8D79A;     /* Mantequilla (crema) */
  --accent-purple: #5E66A8;     /* Azul secundario */
  --accent-coral: #D9707A;      /* Coral (suave) */
  --accent-olive: #A6AF52;      /* Oliva (suave) */
  --dark: #303A43;              /* Texto oscuro */
  --dark-surface: #3D4750;
  --gray-900: #303A43;
  --gray-800: #3D4750;
  --gray-600: #737D84;          /* Gris suave */
  --gray-400: #A7AEB3;
  --gray-200: #E4E1D8;
  --gray-100: #F7F4ED;          /* Marfil (claro) */
  --bg-main: #FFFFFF;
  --white: #FFFFFF;

  /* Glassmorphism & Shadow Effects */
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.4);
  --shadow-sm: 0 2px 8px rgba(48, 58, 67, 0.05);
  --shadow-md: 0 8px 24px rgba(48, 58, 67, 0.10);
  --shadow-lg: 0 16px 40px rgba(78, 127, 168, 0.16);
  --shadow-hover: 0 20px 40px rgba(48, 58, 67, 0.16);

  /* Typography */
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset & Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-main);
  color: var(--dark);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--dark);
  line-height: 1.25;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-fast);
}

button {
  cursor: pointer;
  border: none;
  outline: none;
  font-family: var(--font-body);
  transition: var(--transition-fast);
}

/* Layout Utilities */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Announcement Bar */
.announcement-bar {
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  color: #FFFFFF;
  font-size: 0.85rem;
  padding: 8px 0;
  position: relative;
  z-index: 1010;
}

.announcement-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  position: relative;
}

.announcement-link {
  color: #FFFFFF;
  font-weight: 700;
  text-decoration: underline;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.announcement-close {
  position: absolute;
  right: 0;
  background: transparent;
  color: #FFFFFF;
  font-size: 1.2rem;
  line-height: 1;
  opacity: 0.8;
}

.announcement-close:hover {
  opacity: 1;
}

.btn-download-pdf {
  padding: 9px 15px;
  background: #F1F5F9;
  color: #0F172A;
  border: 1px solid #CBD5E1;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-download-pdf:hover {
  background: var(--primary);
  color: #FFFFFF;
  border-color: var(--primary);
}

/* Navigation Bar */
.navbar {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(229, 231, 235, 0.6);
  transition: var(--transition-smooth);
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  gap: 16px;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 8px;
}

.brand-logo img {
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
}

.brand-title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--dark);
  letter-spacing: -0.5px;
  white-space: nowrap;
}

.brand-title span {
  color: var(--dark);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
  list-style: none;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
}

.nav-link {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--gray-800);
  position: relative;
  padding: 6px 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 4px;
  transition: var(--transition-fast);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-link:hover,
.nav-link.active {
  color: var(--primary);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.btn-quote-cart {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: var(--dark);
  color: var(--white);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: var(--shadow-sm);
}

.btn-quote-cart:hover {
  background: var(--primary);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.cart-badge {
  background: var(--primary);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  transition: var(--transition-fast);
}

.btn-quote-cart:hover .cart-badge {
  background: var(--white);
  color: var(--primary);
}

/* Hero Section */
.hero-section {
  padding-top: 60px;
  padding-bottom: 80px;
  background: radial-gradient(circle at top right, rgba(78, 127, 168, 0.06), transparent 50%),
              radial-gradient(circle at bottom left, rgba(229, 138, 58, 0.06), transparent 50%);
  position: relative;
  overflow: hidden;
}

/* Textura de cuadrícula sutil detrás del contenido. Se desvanece hacia los
   bordes con un mask radial para que no compita con los degradados de arriba. */
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(78, 127, 168, 0.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(78, 127, 168, 0.14) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(ellipse 85% 90% at 50% 35%, #000 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 85% 90% at 50% 35%, #000 45%, transparent 100%);
  pointer-events: none;
}

.hero-section > .container {
  position: relative;
  z-index: 1;
}

/* Banner de escritorio: la composición exacta del diseño de referencia
   (imagen completa, texto incluido). Sangra por encima/debajo del padding
   de la sección para que toque el navbar arriba y no deje franjas, y ocupa
   el ancho completo del viewport (no el max-width de .container) porque el
   diseño está pensado para eso. Oculto por defecto; @media lo activa en
   escritorio y apaga la versión HTML de abajo -- ver esa regla para el
   porqué (el banner queda ilegible en pantallas angostas). */
.hero-banner-desktop {
  display: none;
  position: relative;
  z-index: 1;
  margin: -60px 0 -80px;
}

.hero-banner-desktop img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-banner-link {
  position: absolute;
  top: 74.96%;
  height: 11.47%;
}

.hero-banner-link-explorar {
  left: 5.43%;
  width: 19.58%;
}

.hero-banner-link-cotizar {
  left: 24.96%;
  width: 18.55%;
}

/* Título + insignia: el diseño "básico" no los trae horneados (para que
   queden como HTML real, no imagen), así que van superpuestos en el hueco
   que el arte deja libre arriba de "Más diseños...". Coordenadas tomadas
   del lienzo de Canva, ajustadas al recorte actual (56px izq / 22px arriba
   menos que el export completo). */
.hero-banner-caption {
  position: absolute;
  top: 4.2%;
  left: 6.24%;
  width: 38.8%;
}

.hero-banner-caption .hero-badge {
  margin-bottom: 1.2vw;
}

.hero-banner-caption .hero-title {
  font-size: clamp(1.8rem, 2.6vw, 2.75rem);
  margin-bottom: 0;
}

@media (min-width: 993px) {
  .hero-banner-desktop {
    display: block;
  }

  .hero-mobile {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: #F8FAFC;
  color: var(--primary);
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 24px;
}

.hero-title {
  /* Escala con el ancho: el titular de la portada 1 es largo y a 3.5rem fijos
     se comía cuatro líneas en pantallas medianas. */
  font-size: clamp(2.1rem, 3.4vw, 3rem);
  /* El titular del banner es <p> (la portada tiene un solo <h1>): estas dos
     propiedades las heredaba de h1 y se fijan aca para que se vea igual. */
  font-family: var(--font-heading);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -1.5px;
  margin-bottom: 14px;
  color: var(--dark);
}

.hero-tagline {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 22px;
}

.hero-title .highlight-text {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-phrase-sub {
  display: block;
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--gray-600);
  margin-top: 6px;
}

.hero-description {
  font-size: 1.15rem;
  color: var(--gray-600);
  margin-bottom: 36px;
  max-width: 540px;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 1rem;
  transition: var(--transition-fast);
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--accent-purple));
  color: var(--white);
  box-shadow: 0 10px 25px rgba(78, 127, 168, 0.3);
}

.btn-primary:hover {
  transform: translateY(-3px);
  background: linear-gradient(135deg, var(--primary-hover), #4B5286);
  box-shadow: 0 15px 35px rgba(78, 127, 168, 0.4);
}

.btn-secondary {
  background: var(--white);
  color: var(--dark);
  border: 2px solid var(--gray-200);
}

.btn-secondary:hover {
  border-color: var(--dark);
  background: var(--gray-100);
  transform: translateY(-3px);
}

.hero-visual {
  position: relative;
  /* Ocupa toda la altura de la fila: si la columna de texto es más alta que
     la ilustración, sin esto quedaban franjas vacías arriba y abajo del
     arte. */
  align-self: stretch;
  /* Sangra hasta el borde derecho del viewport. La portada 3 (compuesta a
     partir del diseño de referencia del cliente en Canva) ya trae fondo
     crema con desenfoque natural en los bordes -- a diferencia de la foto
     de producto recta que tenía antes, no hace falta máscara ni freno de
     zoom para disimular un borde recto. */
  margin-right: calc(-24px - max(0px, (100vw - 1280px) / 2));
}

.hero-ilustracion {
  position: absolute;
  top: -60px;
  left: 0;
  width: 100%;
  height: calc(100% + 140px);
  max-width: none;
  margin: 0;
  object-fit: cover;
  object-position: right center;
}

/* Fila de 4 beneficios (ícono + etiqueta corta) entre la descripción y los
   botones del hero, tomada del diseño de referencia del cliente. */
.hero-features {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-bottom: 28px;
}

.hero-feature-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 120px;
}

.hero-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.06), 0 3px 8px rgba(15, 23, 42, 0.08);
}

.hero-feature-item span {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.3;
}

/* Barra de estadísticas: pastilla blanca debajo del hero. En el diseño de
   referencia se monta sobre el borde inferior con margen negativo, pero la
   altura de .hero-content varía según cómo envuelva el titular (2 vs 3
   líneas) -- un solape fijo chocaba con el botón "Explorar Catálogo" en
   algunos anchos. Con margen positivo nunca puede chocar. */
.hero-stats-bar {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 22px 28px;
  margin-top: 40px;
}

.hero-stat-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hero-stat-item + .hero-stat-item {
  border-left: 1px solid var(--gray-200);
  padding-left: 16px;
}

.hero-stat-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.hero-stat-item div {
  display: flex;
  flex-direction: column;
}

.hero-stat-item strong {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--dark);
  white-space: nowrap;
}

.hero-stat-item span {
  font-size: 0.78rem;
  color: var(--gray-600);
  white-space: nowrap;
}

/* Wholesale Trust Badges Bar */
/* Imagen exacta del diseño de referencia del cliente (Canva) -- no una
   recreación en HTML, igual que el banner del hero. Es panorámica (3:1) con
   texto chico: en mobile se reduce a ilegible, así que ahí se apaga y se
   usa la versión en tarjetas HTML (mismo patrón que el hero). */
.trust-badges-bar {
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
}

/* Sin .container ni padding: la imagen ya trae su propio fondo (los blobs
   de color) hasta el borde real del lienzo, así que cualquier padding acá
   solo agregaba una franja blanca alrededor que no está en el diseño. */
.trust-badges-desktop {
  line-height: 0;
}

.trust-badges-banner {
  display: block;
  width: 100%;
  height: auto;
}

.trust-badges-mobile {
  padding: 48px 0;
}

.trust-badges-mobile { display: block; }
.trust-badges-desktop { display: none; }

@media (min-width: 993px) {
  .trust-badges-mobile { display: none; }
  .trust-badges-desktop { display: block; }
}

.trust-badges-bar .text-primary { color: var(--primary); }
.trust-badges-bar .text-secondary { color: var(--secondary); }
.trust-badges-bar .text-green { color: #16A34A; }

.trust-badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

/* Tarjetas de respaldo para mobile: mismo contenido y colores del diseño de
   referencia, en HTML real (no la imagen panorámica, ilegible a este ancho). */
.trust-badge-item {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 22px 68px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  background: #F8FAFC;
}

.trust-badge-blue   { background: #EFF6FF; border-color: #DBEAFE; }
.trust-badge-green  { background: #F0FDF4; border-color: #DCFCE7; }
.trust-badge-orange { background: #FFF7ED; border-color: #FFEDD5; }
.trust-badge-pink   { background: #FDF2F8; border-color: #FCE7F3; }

.trust-badge-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
}

.trust-badge-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  color: var(--white);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
}

.trust-badge-blue   .trust-badge-icon { background: var(--primary); }
.trust-badge-green  .trust-badge-icon { background: #16A34A; }
.trust-badge-orange .trust-badge-icon { background: var(--secondary); }
.trust-badge-pink   .trust-badge-icon { background: #DB2777; }

.trust-badge-heading h4 {
  font-size: 1.05rem;
  color: var(--dark);
  font-weight: 800;
  line-height: 1.3;
}

.trust-badge-amount {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--primary);
  margin: 2px 0 0;
}

.trust-badge-desc {
  position: relative;
  z-index: 1;
  font-size: 0.85rem;
  color: var(--gray-600);
  margin: 0;
  max-width: 78%;
}

.trust-badge-tag {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
  background: rgba(255, 255, 255, 0.7);
}

.trust-badge-orange .trust-badge-tag { color: var(--secondary); }

.trust-badge-art {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 44%;
  height: auto;
  pointer-events: none;
}

/* Botón estilo WhatsApp, reutilizado fuera de su sección original en el CTA
   de preventa navideña (ver .navidad-section). */
.btn-sample {
  background: #25D366;
  color: #FFFFFF;
  padding: 16px 28px;
  border-radius: var(--radius-full);
  font-size: 1.05rem;
  font-weight: 800;
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);
  white-space: nowrap;
}

.btn-sample:hover {
  background: #20BA5A;
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(37, 211, 102, 0.5);
}

@media (max-width: 576px) {
  .btn-sample {
    width: 100%;
    justify-content: center;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 0.88rem;
    text-align: center;
  }
}

/* Cart Threshold Progress Bar */
.cart-threshold-box {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.cart-threshold-box.success {
  background: #F0FDF4;
  border-color: #BBF7D0;
}

.cart-threshold-box.unlocked {
  background: #DCFCE7;
  border-color: #86EFAC;
}

.threshold-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: #0F172A;
  margin-bottom: 10px;
}

.threshold-progress-bar {
  width: 100%;
  height: 8px;
  background: #E2E8F0;
  border-radius: 999px;
  overflow: hidden;
}

.threshold-progress-fill {
  height: 100%;
  transition: width 0.4s ease, background 0.4s ease;
}

/* Search Autocomplete Box */
.search-box {
  position: relative;
}

.search-suggestions {
  position: absolute;
  top: 105%;
  left: 0;
  width: 100%;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-md);
  box-shadow: 0 15px 35px rgba(0,0,0,0.12);
  z-index: 100;
  max-height: 320px;
  overflow-y: auto;
  display: none;
}

.search-suggestions.active {
  display: block;
}

.suggestion-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid #F1F5F9;
  cursor: pointer;
  transition: background 0.2s ease;
}

.suggestion-item:hover {
  background: #F8FAFC;
}

.suggestion-item img {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 6px;
}

.suggestion-text h5 {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0F172A;
  margin: 0;
}

.suggestion-text span {
  font-size: 0.75rem;
  color: #64748B;
}

/* Feature Highlights Bar - Static Grid */
.features-bar {
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  padding: 40px 0;
  box-shadow: var(--shadow-sm);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(135deg, #FFFFFF, #F8FAFC);
  padding: 18px 24px;
  border-radius: 18px;
  border: 1px solid #E2E8F0;
  min-width: 330px;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
  position: relative;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--primary), var(--secondary));
  border-radius: 4px 0 0 4px;
  opacity: 0.85;
  transition: width 0.3s ease;
}

.feature-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(78, 127, 168, 0.12);
  border-color: rgba(78, 127, 168, 0.25);
  background: #FFFFFF;
}

.feature-item:hover::before {
  width: 6px;
  opacity: 1;
}

.feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--accent-purple));
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(78, 127, 168, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-item:hover .feature-icon {
  transform: scale(1.1) rotate(-4deg);
  box-shadow: 0 8px 22px rgba(78, 127, 168, 0.35);
}

.feature-info h4 {
  font-size: 1rem;
  margin-bottom: 3px;
  color: #0F172A;
  font-weight: 800;
  letter-spacing: -0.2px;
}

.feature-info p {
  font-size: 0.82rem;
  color: #475569;
  margin: 0;
  line-height: 1.4;
}

/* Section Header */
.section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 48px auto;
}

.section-tag {
  color: var(--secondary);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  display: block;
}

.section-title {
  font-size: 2.5rem;
  letter-spacing: -1px;
  margin-bottom: 16px;
}

.section-subtitle {
  font-size: 1.05rem;
  color: var(--gray-600);
}

/* Catalog & Products Section */
.catalog-section {
  padding: 100px 0;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at top left, rgba(229, 138, 58, 0.06), transparent 50%),
              radial-gradient(circle at bottom right, rgba(78, 127, 168, 0.06), transparent 50%);
}

/* Misma textura de cuadrícula sutil que el hero, para que la sección no se
   sienta como un bloque blanco aislado entre dos secciones con fondo/imagen. */
.catalog-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(78, 127, 168, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(78, 127, 168, 0.1) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(ellipse 85% 80% at 50% 30%, #000 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 85% 80% at 50% 30%, #000 45%, transparent 100%);
  pointer-events: none;
}

.catalog-section > .container {
  position: relative;
  z-index: 1;
}

.catalog-controls {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 40px;
}

.search-box {
  position: relative;
  max-width: 500px;
  margin: 0 auto;
  width: 100%;
}

.search-input {
  width: 100%;
  padding: 16px 24px 16px 54px;
  border-radius: var(--radius-full);
  border: 2px solid var(--gray-200);
  background: var(--white);
  font-size: 1rem;
  transition: var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.search-input:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: var(--shadow-lg);
}

.search-icon {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
  font-size: 1.2rem;
}

.category-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.category-btn {
  padding: 10px 22px;
  border-radius: var(--radius-full);
  background: var(--white);
  border: 1px solid var(--gray-200);
  color: var(--gray-800);
  font-weight: 600;
  font-size: 0.9rem;
  transition: var(--transition-fast);
}

.category-btn:hover,
.category-btn.active {
  background: var(--dark);
  color: var(--white);
  border-color: var(--dark);
  box-shadow: var(--shadow-sm);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 32px;
}

.product-card {
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  overflow: hidden;
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
  position: relative;
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.product-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: var(--primary);
  color: var(--white);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* Código de referencia (ej. PR-01): visible sobre la imagen para que
   cliente, facturación y bodega puedan identificar el diseño exacto sin
   depender solo del título -- crítico con cientos de diseños parecidos. */
.product-code {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  background: rgba(15, 23, 42, 0.72);
  color: var(--white);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-family: var(--font-body);
}

.product-img-wrapper {
  position: relative;
  width: calc(100% - 24px);
  margin: 12px auto 0 auto;
  height: 220px;
  overflow: hidden;
  background: var(--gray-100);
  border-radius: 0 36px 0 36px;
}

.product-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.product-card:hover .product-img-wrapper img {
  transform: scale(1.08);
}

.product-info {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.product-category {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--secondary);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.product-title {
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.product-desc {
  font-size: 0.85rem;
  color: var(--gray-600);
  margin-bottom: 20px;
  flex-grow: 1;
}

/* Solo las categorías con precio público (Papel de Regalo, línea Koala
   Paper) traen esta fila; el resto del catálogo mayorista se sigue
   cotizando por WhatsApp y no la renderiza. */
.product-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: -8px 0 12px;
  flex-wrap: wrap;
}

.product-price {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--primary);
}

.product-price-unit {
  font-size: 0.78rem;
  color: var(--gray-600);
}

/* Línea de paquete mayorista: el precio varía según cliente/volumen y no se
   muestra en el sitio público, así que en vez del monto se ve esta etiqueta. */
.product-price.is-quote {
  font-size: 0.78rem;
  font-weight: 700;
  color: #92400E;
  background: #FEF3C7;
  border-radius: var(--radius-full);
  padding: 3px 9px;
}

.product-action-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  margin-top: 12px;
  border-top: 1px solid var(--gray-100);
}

.qty-control {
  display: flex;
  align-items: center;
  background: #F1F5F9;
  border: 1px solid #CBD5E1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  height: 38px;
}

.btn-qty {
  width: 28px;
  height: 100%;
  border: none;
  background: transparent;
  color: #1E293B;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.btn-qty:hover {
  background: #CBD5E1;
  color: var(--primary);
}

.qty-input {
  width: 36px;
  height: 100%;
  border: none;
  background: transparent;
  text-align: center;
  font-weight: 700;
  font-size: 0.88rem;
  color: #0F172A;
  -moz-appearance: textfield;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.btn-add-quote {
  flex: 1;
  height: 38px;
  padding: 0 14px;
  background: var(--primary);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(78, 127, 168, 0.2);
}

.btn-add-quote:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(78, 127, 168, 0.3);
}

/* Productos con paquete mayorista Y pliego individual (Papel de Regalo):
   dos líneas de pedido independientes, cada una con su cantidad y su botón
   "Agregar" — no un selector que alterna entre precios, porque un mismo
   diseño se puede pedir en las dos modalidades a la vez. */
.product-price-options,
.quick-view-price-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

/* Dos filas siempre, nunca una junto a la otra: con precio + unidad al lado
   de la cantidad y el botón en la misma línea, el texto del precio quedaba
   tapado por el control de cantidad en las tarjetas angostas (326 productos
   en una grilla de 3-4 columnas no dejan mucho ancho por tarjeta). */
.price-option {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: var(--bg-main);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
}

.price-option-info {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  min-width: 0;
}

.price-option-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.price-option .product-price {
  font-size: 1rem;
  white-space: nowrap;
}

.price-option .product-price-unit {
  font-size: 0.72rem;
}

.qty-control-sm {
  height: 32px;
}

.qty-control-sm .btn-qty {
  width: 24px;
  font-size: 0.9rem;
}

.qty-control-sm .qty-input {
  width: 30px;
  font-size: 0.8rem;
}

.btn-add-sm {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 12px;
  font-size: 0.78rem;
}

/* Floating WhatsApp Widget */
.floating-wa-widget {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}

.wa-widget-badge {
  background: #FFFFFF;
  color: #0F172A;
  padding: 10px 16px;
  border-radius: 999px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  font-weight: 700;
  font-size: 0.85rem;
  border: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: floatBounce 4s ease-in-out infinite;
  white-space: nowrap;
}

@keyframes floatBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.wa-widget-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--primary);
  color: #FFFFFF !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  box-shadow: 0 10px 25px rgba(78, 127, 168, 0.4);
  transition: all 0.3s ease;
  position: relative;
  text-decoration: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.wa-widget-btn:hover {
  transform: scale(1.1);
  background: var(--primary-hover);
  box-shadow: 0 15px 35px rgba(78, 127, 168, 0.5);
}

/* Special Spotlight: Costa Rica Section */
.spotlight-section {
  background: linear-gradient(135deg, var(--dark-surface), var(--dark));
  color: var(--white);
  padding: 100px 0;
  border-radius: 36px;
  margin: 40px 0;
  position: relative;
  overflow: hidden;
}

.spotlight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.spotlight-content h2 {
  color: var(--white);
  font-size: 3rem;
  margin-bottom: 20px;
}

.spotlight-content p {
  color: var(--gray-400);
  font-size: 1.1rem;
  margin-bottom: 32px;
}

.spotlight-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;
}

.spotlight-feature-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 600;
}

.spotlight-feature-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 196, 159, 0.2);
  color: var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.book-preview-wrapper {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 24px;
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
}

.book-preview-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.book-preview-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Contact & Quote Drawer */
.contact-section {
  padding: 100px 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
}

.contact-info-card {
  background: var(--white);
  padding: 40px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
}

.contact-detail-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 32px;
}

.contact-detail-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.contact-detail-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: #F3F4F6;
  color: #1F2937;
  border: 1px solid #E5E7EB;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.contact-detail-text h4 {
  font-size: 1rem;
  margin-bottom: 2px;
}

.contact-detail-text p,
.contact-detail-text a {
  font-size: 0.95rem;
  color: var(--gray-600);
}

.contact-detail-text a:hover {
  color: var(--primary);
}

.contact-form-card {
  background: var(--white);
  padding: 40px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-md);
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 8px;

}

.form-control {
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--gray-200);
  font-size: 0.95rem;
  font-family: var(--font-body);
  transition: var(--transition-fast);
}

.form-control:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 4px rgba(255, 59, 96, 0.1);
}

textarea.form-control {
  resize: vertical;
  min-height: 120px;
}

/* Quote Drawer / Modal */
.quote-drawer {
  position: fixed;
  top: 0;
  right: -420px;
  width: 100%;
  max-width: 420px;
  height: 100vh;
  background: var(--white);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.25);
  z-index: 100000;
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
}

.quote-drawer.active {
  right: 0;
}

/* Hide background floating widgets when quote drawer is active */
body:has(.quote-drawer.active) .floating-wa-widget,
body:has(.quote-drawer.active) .scroll-to-top-btn {
  opacity: 0 !important;
  pointer-events: none !important;
}

.quote-drawer-header {
  padding: 24px;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn-close-drawer {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--gray-800);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.quote-drawer-body {
  padding: 24px;
  flex-grow: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.quote-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  background: var(--gray-100);
  border-radius: var(--radius-sm);
}

.quote-item img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 6px;
}

.quote-item-details {
  flex-grow: 1;
}

.quote-item-title {
  font-size: 0.9rem;
  font-weight: 700;
}

.quote-item-code {
  font-weight: 600;
  color: var(--gray-600);
  font-size: 0.78rem;
}

.quote-item-qty {
  font-size: 0.8rem;
  color: var(--gray-600);
}

.quote-drawer-footer {
  padding: 24px;
  border-top: 1px solid var(--gray-200);
  background: var(--bg-main);
}

.quote-contact-fields {
  margin-bottom: 16px;
}

.quote-contact-fields .form-group {
  margin-bottom: 12px;
}

.quote-contact-fields .form-label {
  font-size: 0.8rem;
  margin-bottom: 4px;
}

.quote-contact-fields .form-control {
  padding: 10px 14px;
  font-size: 0.88rem;
}

.quote-contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.btn-send-whatsapp {
  width: 100%;
  padding: 16px;
  background: #25D366;
  color: var(--white);
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);
}

.btn-send-whatsapp:hover {
  background: #20BA5A;
  transform: translateY(-2px);
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-fast);
}

.overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Footer */
.footer {
  background: var(--dark);
  color: var(--white);
  padding: 80px 0 40px 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 60px;
}

.footer-brand p {
  color: var(--gray-400);
  margin-top: 16px;
  max-width: 340px;
}

.footer-column h4 {
  color: var(--white);
  font-size: 1.1rem;
  margin-bottom: 20px;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a {
  color: var(--gray-400);
  font-size: 0.9rem;
}

.footer-links a:hover {
  color: var(--primary);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  color: var(--gray-400);
  font-size: 0.85rem;
}

.footer-credit a {
  color: var(--gray-400);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-credit a:hover {
  color: var(--white);
}

/* Responsive Breakpoints */
@media (max-width: 992px) {
  .hero-grid,
  .spotlight-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  /* En una sola columna la ilustración va debajo del texto: vuelve al flujo
     normal, porque el sangrado vertical la haría chocar con el titular y con
     las tarjetas de abajo. */
  .hero-ilustracion {
    position: static;
    width: calc(100% + 24px);
    height: auto;
    margin: 0 -24px 0 0;
  }

  .hero-stats-bar {
    grid-template-columns: 1fr 1fr;
    margin-top: 24px;
  }

  .hero-stat-item:nth-child(3) {
    border-left: none;
    padding-left: 0;
  }

  .hero-stat-item {
    padding-top: 10px;
    padding-bottom: 10px;
  }


  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 576px) {

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .hero-stats-bar {
    grid-template-columns: 1fr;
  }

  .hero-stat-item {
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid var(--gray-200);
    padding-top: 12px;
  }

  .hero-stat-item:first-child {
    border-top: none;
    padding-top: 0;
  }
}

/* FAQ Accordion Styles */
.faq-item {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all 0.25s ease;
}

.faq-item.active {
  background: #FFFFFF;
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(78, 127, 168, 0.08);
}

.faq-question {
  padding: 18px 24px;
  font-weight: 700;
  font-size: 1rem;
  color: #0F172A;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

.faq-icon {
  font-size: 1.2rem;
  color: var(--primary);
  transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
  color: var(--secondary);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0, 1, 0, 1), padding 0.3s ease;
  padding: 0 24px;
}

.faq-item.active .faq-answer {
  max-height: 300px;
  padding: 0 24px 20px 24px;
}

.faq-answer p {
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.5;
}

/* Quick View Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(6px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.quick-view-container {
  background: #FFFFFF;
  width: 100%;
  max-width: 820px;
  border-radius: 24px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
  max-height: 90vh;
  overflow-y: auto;
}

.btn-close-modal {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #F1F5F9;
  color: #0F172A;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-close-modal:hover {
  background: #E2E8F0;
  color: var(--secondary);
}

.quick-view-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 32px;
  padding: 32px;
}

/* Catalog Controls & Sort Select */
.catalog-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.sort-select {
  padding: 12px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--dark);
  font-weight: 600;
  font-size: 0.9rem;
  outline: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}

.sort-select:hover, .sort-select:focus {
  border-color: var(--primary);
}

/* Scroll to Top Floating Button */
.scroll-to-top-btn {
  position: fixed;
  bottom: 150px;
  right: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent-purple));
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
  box-shadow: 0 10px 25px rgba(78, 127, 168, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-to-top-btn.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-top-btn:hover {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 14px 30px rgba(78, 127, 168, 0.45);
}

/* Christmas Pre-Sale Section 🎄 */
.navidad-section {
  padding: 80px 0;
  background: linear-gradient(135deg, #064E3B, #022C22);
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
}

.navidad-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 80% 20%, rgba(229, 138, 58, 0.25), transparent 60%);
  pointer-events: none;
}

.navidad-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.navidad-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: rgba(229, 138, 58, 0.35);
  border: 1px solid var(--secondary);
  border-radius: var(--radius-full);
  color: #FECDD3;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
}

.navidad-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.2;
  margin-bottom: 16px;
}

.navidad-title span {
  color: #F87171;
}

.navidad-desc {
  font-size: 1.05rem;
  color: #E2E8F0;
  line-height: 1.6;
  margin-bottom: 24px;
}

.navidad-perks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 32px;
}

.navidad-perk-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.08);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.88rem;
  font-weight: 600;
  color: #F8FAFC;
}

.navidad-perk-item i {
  color: #25D366;
  font-size: 1.2rem;
}

.navidad-poster-wrapper {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
  border: 3px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.4s ease;
}

.navidad-poster-wrapper:hover {
  transform: scale(1.02);
}

.navidad-poster-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 992px) {
  .navidad-grid {
    grid-template-columns: 1fr;
  }
  .navidad-perks {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   Correcciones de auditoría — Mundi Chicle
   ========================================================================== */

/* --- Guardas globales de layout ------------------------------------------ */
/* El documento nunca debe desplazarse en horizontal (usabilidad móvil / CWV). */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

*, *::before, *::after {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* --- Identidad de marca --------------------------------------------------- */
.brand-title {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand-main {
  white-space: nowrap;
}

.brand-main b {
  color: var(--secondary);
  font-weight: 800;
}

.brand-sub {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gray-600);
  margin-top: 2px;
}

.nav-link-navidad {
  color: var(--secondary);
  font-weight: 700;
}

/* --- Botón de menú móvil -------------------------------------------------- */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--dark);
  font-size: 1.4rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.nav-toggle:hover {
  background: var(--bg-main);
}

/* --- Catálogo ------------------------------------------------------------- */
.results-count {
  margin: 18px 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-600);
}

.product-img-fallback {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--accent-purple));
  color: #FFFFFF;
  font-size: 2.5rem;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.product-stock {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #166534;
  margin: 2px 0 6px;
}

.product-stock-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #25D366;
  display: inline-block;
  flex-shrink: 0;
}

.btn-add-quote.is-added {
  background: #25D366 !important;
}

/* --- Ficha rápida --------------------------------------------------------- */
.quick-view-media {
  background: #F8FAFC;
  padding: 24px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 320px;
}

/* Miniatura de la vista interior (algunas fichas traen portada + muestra
   del interior de la hoja, ej. caligrafía o cuadriculado). */
.quick-view-interior {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.quick-view-interior-img {
  max-width: 260px;
  max-height: 220px;
  width: auto;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--gray-200);
  background: var(--white);
  padding: 4px;
  cursor: zoom-in;
}

.quick-view-interior-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.quick-view-img {
  max-width: 100%;
  max-height: 420px;
  width: auto;
  object-fit: contain;
  border-radius: 12px;
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.12));
  display: block;
  margin: 0 auto;
}

.quick-view-fallback {
  height: 280px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--accent-purple));
  color: #FFFFFF;
  font-size: 4rem;
  border-radius: 16px;
}

.quick-view-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.quick-view-cat {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.quick-view-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: #0F172A;
  margin: 6px 0 12px;
}

.quick-view-desc {
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 20px;
}

.quick-view-specs {
  background: #F1F5F9;
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.85rem;
  color: #334155;
}

.quick-view-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.quick-view-actions .qty-control {
  height: 44px;
}

.quick-view-actions .btn-add-quote {
  height: 44px;
  font-size: 0.95rem;
}

.btn-share {
  height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--dark);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-share:hover {
  background: var(--bg-main);
}

/* --- Cotizador (sin precios) ---------------------------------------------- */
.cart-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  color: #1E3A8A;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 0.8rem;
  line-height: 1.45;
  margin-bottom: 16px;
}

.cart-note i {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.quote-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  margin-bottom: 12px;
}

.quote-item > img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  border-radius: 8px;
  background: #F8FAFC;
  padding: 4px;
  flex-shrink: 0;
}

.quote-item-details {
  flex: 1;
  min-width: 0;
}

.quote-item-title {
  font-weight: 700;
  font-size: 0.85rem;
  color: #0F172A;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quote-item-meta {
  font-size: 0.72rem;
  color: var(--gray-600);
  margin-bottom: 8px;
}

.qty-control-sm {
  height: 30px;
  width: 100px;
}

.qty-control-sm .btn-qty {
  width: 26px;
  height: 26px;
  font-size: 0.85rem;
}

.qty-readout {
  font-weight: 700;
  font-size: 0.85rem;
  width: 34px;
  text-align: center;
  display: inline-block;
}

.btn-remove-item {
  background: none;
  border: none;
  color: #EF4444;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}

.cart-summary {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.95rem;
  color: #0F172A;
}

.cart-summary strong {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--primary);
}

.btn-clear-cart {
  margin-top: 14px;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: var(--white);
  color: #EF4444;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-clear-cart:hover {
  background: #FEF2F2;
  border-color: #FECACA;
}

/* --- Aviso flotante ------------------------------------------------------- */
.app-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: var(--dark);
  color: var(--white);
  padding: 12px 24px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  font-weight: 600;
  font-size: 0.9rem;
  max-width: calc(100vw - 32px);
  text-align: center;
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.app-toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}


/* ==========================================================================
   Responsive — la navegación móvil estaba oculta sin botón para abrirla
   ========================================================================== */

/* 1180px y no 992: con 9 enlaces en la barra (Inicio, Productos, Koala Paper,
   Colección CR, Navidad, Blog, FAQ, Empresa, Contacto) el menú completo ya no
   cabe junto a las acciones antes de ~1180px. */
@media (max-width: 1180px) {
  .nav-toggle {
    display: inline-flex;
  }

  /* El menú pasa a ser un panel desplegable bajo la barra. */
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.12);
    padding: 8px 0;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    z-index: 999;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links li {
    width: 100%;
  }

  .nav-links .nav-link {
    display: block;
    width: 100%;
    padding: 14px 24px;
    font-size: 0.95rem;
  }

  .nav-links .nav-link::after {
    display: none;
  }

  .nav-links .nav-link:hover,
  .nav-links .nav-link.active {
    background: var(--bg-main);
  }

  .navbar,
  .navbar-inner {
    position: relative;
  }

  /* Evita que la barra superior desborde en pantallas angostas. */
  .navbar-inner {
    gap: 10px;
  }

  .nav-actions {
    gap: 8px;
    min-width: 0;
  }

  .btn-download-pdf span {
    display: none;
  }
}

@media (max-width: 576px) {
  .btn-quote-label {
    display: none;
  }

  .brand-title {
    font-size: 1.1rem;
  }

  .brand-logo img {
    height: 36px;
  }

  .quick-view-actions {
    gap: 8px;
  }

  .quick-view-actions .btn-add-quote,
  .btn-share {
    flex: 1 1 auto;
    justify-content: center;
  }

  /* La sección de Navidad desbordaba el ancho del viewport. */
  .navidad-title {
    font-size: 1.9rem;
    word-break: break-word;
  }

  .navidad-badge,
  .navidad-desc,
  .navidad-perk-item {
    max-width: 100%;
  }

  .navidad-perks {
    grid-template-columns: 1fr;
  }
}

/* --- Correcciones finales de desbordamiento -------------------------------- */
/* Los hijos de grid/flex traen min-width:auto, así que su contenido más ancho
   (títulos largos, badges) estira la columna más allá del contenedor. */
.navidad-grid > *,
.hero-grid > *,
.spotlight-grid > *,
.contact-grid > *,
.navidad-perk-item,
.trust-badge-item {
  min-width: 0;
}

.navidad-title,
.navidad-desc,
.hero-title,
.hero-description {
  overflow-wrap: break-word;
}

@media (max-width: 992px) {
  .navidad-grid,
  .navidad-perks {
    grid-template-columns: 1fr;
  }

  /* La barra superior debe caber sin empujar el botón de menú fuera de pantalla. */
  .navbar-inner {
    flex-wrap: nowrap;
  }

  .brand-logo {
    min-width: 0;
    margin-right: 0;
  }

  .brand-title {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav-actions {
    flex-shrink: 0;
  }

  .btn-quote-cart {
    padding: 10px 14px;
  }
}

/* --- Grids que antes vivían en estilos inline (no colapsaban en móvil) ----- */
.grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.empresa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 40px;
  align-items: center;
}

.empresa-grid > * {
  min-width: 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 12px;
  text-align: center;
}

@media (max-width: 992px) {
  .empresa-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 576px) {
  .grid-2col {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  /* El bloque de sellos tenía 40px de padding fijo. */
  .empresa-grid > div:last-child {
    padding: 24px;
  }

}

@media (max-width: 576px) {
  /* A 375px la marca completa + acciones no caben: se prioriza la navegación. */
  .brand-title {
    font-size: 1rem;
  }

  .brand-logo {
    gap: 8px;
  }

  .brand-logo img {
    height: 32px;
  }

  .btn-download-pdf {
    padding: 9px 11px;
  }

  .btn-quote-cart {
    padding: 9px 12px;
    gap: 6px;
  }

  .nav-actions {
    gap: 6px;
  }
}

@media (max-width: 400px) {
  /* En pantallas muy angostas el bajativo de marca sobra. */
  .brand-sub {
    display: none;
  }
}

/* .feature-item traía min-width:330px dentro de columnas minmax(260px,1fr),
   así que cada tarjeta sobresalía de su columna. */
.feature-item {
  min-width: 0;
  flex-shrink: 1;
}

/* --- Modal de vista rápida: no cabía en tablet ni móvil -------------------- */
/* .quick-view-container es un flex item con min-width:auto, así que el ancho
   mínimo de su grilla de 2 columnas lo estiraba más allá del viewport. */
.modal-overlay {
  width: 100%;
}

.quick-view-container {
  min-width: 0;
}

@media (max-width: 860px) {
  .quick-view-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px;
  }

  .quick-view-media {
    min-height: 0;
  }

  .quick-view-img {
    max-height: 260px;
  }

  .quick-view-title {
    font-size: 1.4rem;
  }
}

@media (max-width: 576px) {
  .quick-view-grid {
    padding: 20px 16px;
  }

  .quick-view-media {
    padding: 14px;
  }
}

@media (max-width: 420px) {
  /* A este ancho la marca + PDF + cotizador + menú no caben juntos.
     Se prioriza cotizador y navegación; el catálogo PDF sigue disponible
     desde el widget de WhatsApp y la sección de muestras. */
  .btn-download-pdf {
    display: none;
  }

  .brand-logo {
    min-width: 0;
    overflow: hidden;
  }

  .brand-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ==========================================================================
   Páginas de producto (/productos/<slug>/)
   ========================================================================== */
.producto-page {
  padding: 32px 24px 80px;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--gray-600);
  margin-bottom: 28px;
}

.breadcrumb a {
  color: var(--primary);
  font-weight: 600;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb span[aria-current] {
  color: var(--gray-800);
  font-weight: 600;
}

.producto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.producto-grid > * {
  min-width: 0;
}

.producto-media {
  background: #F8FAFC;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.producto-media > img {
  max-width: 100%;
  max-height: 520px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.12));
}

/* Miniatura de la vista interior (portada + muestra del interior de la
   hoja, ej. caligrafía, cuadriculado, música...). */
.producto-interior {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.producto-interior img {
  max-width: 280px;
  max-height: 230px;
  width: auto;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--gray-200);
  background: var(--white);
  padding: 4px;
  cursor: zoom-in;
}

.producto-interior span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.producto-badge {
  display: inline-block;
  background: var(--secondary);
  color: #FFFFFF;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  margin-bottom: 14px;
}

.producto-info h1 {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--dark);
  margin: 6px 0 14px;
  letter-spacing: -0.5px;
}

.producto-desc {
  font-size: 1.05rem;
  color: var(--gray-600);
  line-height: 1.65;
  margin-bottom: 20px;
}

.producto-stock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #166534;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: var(--radius-full);
  padding: 7px 14px;
  margin-bottom: 24px;
}

.producto-specs {
  list-style: none;
  background: var(--bg-main);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin: 0 0 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--gray-800);
}

.producto-specs strong {
  color: var(--dark);
}

.producto-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.producto-nota {
  font-size: 0.82rem;
  color: var(--gray-600);
  line-height: 1.5;
}

.producto-relacionados {
  margin-top: 72px;
  border-top: 1px solid var(--gray-200);
  padding-top: 40px;
}

.producto-relacionados h2 {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 24px;
}

.relacionados-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}

.relacionado-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 14px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
  min-width: 0;
}

.relacionado-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}

.relacionado-card img {
  width: 100%;
  height: 150px;
  object-fit: contain;
  background: #F8FAFC;
  border-radius: 10px;
}

.relacionado-card span {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.35;
}

/* Índice estático de productos: da enlaces rastreables al catálogo, que de otro
   modo solo existe inyectado por JavaScript. */
.indice-productos {
  padding: 72px 0;
  background: var(--bg-main);
  border-top: 1px solid var(--gray-200);
}

/* Columnas en vez de grid: las categorias tienen alturas muy distintas
   (2 productos vs 32) y el empaquetado por columnas evita los huecos. */
.indice-grid {
  columns: 3;
  column-gap: 24px;
  margin-top: 40px;
}

.indice-card {
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin-bottom: 24px;
  padding: 20px 22px 8px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
}

.indice-card-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 800;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--gray-200);
}

/* El titular lleva al catálogo dinámico filtrado en esa categoría
   (#categoria=<id>, ver openCategoryFromHash en app.js). */
.indice-card-titulo a,
.indice-subgrupo-titulo a {
  color: var(--primary);
  text-decoration: none;
}

.indice-card-titulo a:hover,
.indice-subgrupo-titulo a:hover {
  text-decoration: underline;
}

.indice-card-conteo {
  flex-shrink: 0;
  margin-left: auto;
  padding: 2px 9px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gray-800);
  background: var(--bg-main);
  border-radius: 999px;
}

/* Papel de Regalo (428 productos, 9 subcategorias) es varias veces mas alta
   que el resto de tarjetas del indice: dentro de .indice-grid, esa altura
   desbalanceaba el reparto por columnas y dejaba huecos enormes bajo las
   tarjetas cortas de las columnas vecinas. Va aparte, a lo ancho completo,
   con sus propias subcategorias en columnas internas. */
.indice-card-destacada {
  break-inside: avoid;
  margin-top: 24px;
  padding: 20px 22px 8px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
}

.indice-subgrupos {
  columns: 3;
  column-gap: 24px;
}

.indice-subgrupos .indice-subgrupo {
  break-inside: avoid;
  margin: 0 0 4px;
}

.indice-subgrupos .indice-subgrupo + .indice-subgrupo {
  border-top: none;
  padding-top: 0;
}

@media (max-width: 900px) {
  .indice-subgrupos {
    columns: 2;
  }
}

@media (max-width: 576px) {
  .indice-subgrupos {
    columns: 1;
  }
}

/* Categorias con subcategorias propias (Papel de Regalo: bebe, infantil...)
   agrupan sus enlaces por tema en vez de una lista plana. Cada tema es un
   <details> colapsado: con 8 temas, mostrarlos todos abiertos haria la
   tarjeta varias veces mas alta que el resto del indice. */
.indice-subgrupo {
  margin-top: 2px;
}

.indice-subgrupo + .indice-subgrupo {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed var(--gray-200);
}

.indice-subgrupo-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 8px 20px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gray-800);
  cursor: pointer;
  list-style: none;
  position: relative;
}

.indice-subgrupo-titulo::-webkit-details-marker {
  display: none;
}

.indice-subgrupo-titulo::before {
  content: '+';
  position: absolute;
  left: 0;
  font-weight: 800;
  color: var(--primary);
}

.indice-subgrupo[open] > .indice-subgrupo-titulo::before {
  content: '−';
}

.indice-subgrupo[open] > .indice-subgrupo-titulo {
  margin-bottom: 2px;
}

.indice-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.indice-lista li {
  border-bottom: 1px solid var(--gray-100, #F1F5F9);
}

.indice-lista li:last-child {
  border-bottom: 0;
}

.indice-lista a {
  display: block;
  padding: 9px 0;
  font-size: 0.87rem;
  color: var(--gray-800);
  line-height: 1.4;
}

.indice-lista a:hover {
  color: var(--primary);
}

/* Categorías con muchos diseños (Papel de Regalo puede llegar a cientos) se
   colapsan detrás de <details>: se ve compacta sin importar cuánto crezca el
   catálogo, y el contenido sigue siendo HTML plano y rastreable. */
.indice-detalle {
  margin-top: 2px;
}

.indice-detalle > summary {
  list-style: none;
  padding: 10px 0 10px 20px;
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  position: relative;
}

.indice-detalle > summary::-webkit-details-marker {
  display: none;
}

.indice-detalle > summary::before {
  content: '+';
  position: absolute;
  left: 0;
  font-weight: 800;
}

.indice-detalle[open] > summary::before {
  content: '−';
}

.indice-detalle[open] > summary {
  border-bottom: 1px solid var(--gray-100, #F1F5F9);
}

.product-title-link {
  color: inherit;
}

.product-title-link:hover {
  color: var(--primary);
}

@media (max-width: 992px) {
  .producto-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .producto-info h1 {
    font-size: 1.7rem;
  }

  .indice-grid {
    columns: 2;
  }
}

@media (max-width: 576px) {
  .producto-page {
    padding: 20px 16px 60px;
  }

  .producto-media {
    padding: 16px;
  }

  .producto-cta .btn {
    width: 100%;
    justify-content: center;
  }

  .indice-grid {
    columns: 1;
  }

  .relacionados-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.quick-view-full {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
}

.quick-view-full:hover {
  text-decoration: underline;
}

/* Las imagenes limitadas por altura necesitan width:auto, o el atributo width
   del HTML (que refleja el tamano real del archivo) las estira. */
.brand-logo img,
.sello-logo {
  width: auto;
  max-width: 100%;
}

.sello-logo {
  /* Altura fija (no max-height): con width:auto el navegador necesita una
     dimension concreta para deducir el ancho del aspect-ratio antes de que la
     imagen cargue. Con max-height quedaba en 0x0 y el lazy-load no disparaba. */
  height: 90px;
  object-fit: contain;
}

/* ==========================================================================
   Vista de categorías del catálogo
   Antes se volcaban los 38 productos de una vez en la home. Ahora se entra por
   categoría y los productos aparecen adentro.
   ========================================================================== */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 12px;
}

.category-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
  min-width: 0;
  font-family: inherit;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--primary);
}

.category-card-media {
  display: block;
  aspect-ratio: 16 / 10;
  background: #F1F5F9;
  overflow: hidden;
}

.category-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
}

.category-card:hover .category-card-media img {
  transform: scale(1.04);
}

.category-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  flex: 1;
}

.category-card-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.25;
}

.category-card-desc {
  font-size: 0.85rem;
  color: var(--gray-600);
  line-height: 1.5;
  flex: 1;
}

.category-count {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--primary);
  background: var(--primary-light);
  border-radius: var(--radius-full);
  padding: 4px 12px;
}

.category-count.is-empty {
  color: #92400E;
  background: #FEF3C7;
}

.category-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
}

.category-card:hover .category-card-cta {
  gap: 10px;
}

/* --- Barra de regreso dentro de una categoría ----------------------------- */
.catalog-back {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gray-200);
}

.catalog-back[hidden] {
  display: none;
}

.btn-back-categories {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--primary);
}

.btn-back-categories:hover {
  background: var(--primary-light);
  border-color: var(--primary);
}

.catalog-back h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0;
}

/* --- Estado vacío --------------------------------------------------------- */
.catalog-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 56px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.catalog-empty i {
  font-size: 3rem;
  color: var(--gray-400);
}

.catalog-empty h3 {
  color: var(--gray-800);
  font-size: 1.2rem;
}

.catalog-empty p {
  color: var(--gray-600);
  font-size: 0.9rem;
  max-width: 520px;
  line-height: 1.55;
}

.catalog-empty .btn {
  margin-top: 10px;
}

@media (max-width: 576px) {
  .categories-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .catalog-back h3 {
    font-size: 1.05rem;
  }
}

/* ==========================================================================
   Titular rotativo del hero
   ========================================================================== */
.hero-rotator {
  display: grid;
}

/* Todas las frases comparten la misma celda: la altura es la de la más larga,
   así el bloque no cambia de tamaño al rotar (evita salto de layout). */
.hero-phrase {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  pointer-events: none;
}

.hero-phrase.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Quien pidió menos movimiento ve solo la frase activa, sin transiciones. */
@media (prefers-reduced-motion: reduce) {
  .hero-phrase {
    transition: none;
  }
}

/* ==========================================================================
   Línea Koala Paper — papeles imprimibles con precio de venta al público
   ========================================================================== */
.imprimibles-section {
  padding: 80px 0;
  background: var(--bg-main);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}

.imprimibles-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.imprimibles-tag img {
  height: 20px;
  width: auto;
  object-fit: contain;
}

.imprimibles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 40px;
  align-items: start;
}

.imprimible-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
  min-width: 0;
  /* Cada producto trae su color de acento en --accent. */
  border-bottom: 4px solid var(--accent, var(--primary));
}

.imprimible-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.imprimible-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.imprimible-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Marcador mientras no haya foto del empaque. */
.imprimible-fallback {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gray-400);
}

.imprimible-fallback i {
  font-size: 2rem;
}

.imprimible-media.sin-imagen {
  background: repeating-linear-gradient(45deg, #F8FAFC, #F8FAFC 12px, #F1F5F9 12px, #F1F5F9 24px);
}

.imprimible-media.sin-imagen .imprimible-fallback {
  display: flex;
}

.imprimible-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  flex: 1;
}

.imprimible-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.imprimible-head h3 {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
  min-width: 0;
}

.imprimible-meta {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gray-600);
  margin: -4px 0 0;
}

.imprimible-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 0;
  padding: 0;
  flex: 1;
}

.imprimible-features li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 0.8rem;
  color: var(--gray-700, var(--gray-600));
  line-height: 1.45;
}

.imprimible-features i {
  color: var(--accent, var(--primary));
  font-size: 0.9rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.btn-add-imprimible {
  width: 100%;
  height: 44px;
  margin-top: 14px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--accent, var(--primary));
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.btn-add-imprimible:hover {
  filter: brightness(1.1);
}

.btn-add-imprimible.is-added {
  background: #16A34A !important;
}

.imprimibles-nota {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 32px auto 0;
  max-width: 720px;
  padding: 14px 18px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  color: var(--gray-600);
  line-height: 1.5;
}

.imprimibles-nota i {
  color: var(--primary);
  font-size: 1.05rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.imprimibles-nota a {
  color: var(--primary);
  font-weight: 700;
  text-decoration: underline;
}

/* --- Carrito con precios mixtos ------------------------------------------- */
.quote-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.quote-item-price {
  font-weight: 800;
  font-size: 0.86rem;
  color: var(--primary);
  white-space: nowrap;
}

.quote-item-price.is-quote {
  font-size: 0.74rem;
  font-weight: 700;
  color: #92400E;
  background: #FEF3C7;
  border-radius: var(--radius-full);
  padding: 3px 9px;
}

.cart-summary.is-secondary {
  margin-top: 8px;
  padding-top: 8px;
  border-top: none;
  font-size: 0.85rem;
}

.cart-summary.is-secondary strong {
  font-size: 0.95rem;
  color: var(--gray-800);
}

.cart-shipping {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  color: #1E3A8A;
  font-size: 0.8rem;
  line-height: 1.45;
}

.cart-shipping.unlocked {
  background: #F0FDF4;
  border-color: #BBF7D0;
  color: #166534;
}

.cart-shipping i {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 1px;
}

@media (max-width: 576px) {
  .imprimibles-section {
    padding: 56px 0;
  }

  .imprimibles-grid {
    grid-template-columns: 1fr;
  }

  .imprimible-head {
    flex-direction: column;
    gap: 4px;
  }

  .btn-add-imprimible {
    width: 100%;
  }
}

/* ==========================================================================
   Blog — artículos e índice
   Las páginas las genera scripts/publicar-blog.py desde contenido/blog/*.md
   ========================================================================== */
.articulo-page {
  padding: 32px 24px 80px;
  max-width: 820px;
}

.articulo-header {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--gray-200);
}

.articulo-header h1 {
  font-size: 2.3rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--dark);
  margin-bottom: 12px;
}

.articulo-meta {
  font-size: 0.85rem;
  color: var(--gray-600);
  font-weight: 600;
}

/* Tipografía de lectura: medida corta y altura de línea generosa. */
.articulo-cuerpo {
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--gray-800);
}

.articulo-cuerpo p {
  margin-bottom: 20px;
}

.articulo-cuerpo h2 {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--dark);
  margin: 40px 0 14px;
  line-height: 1.3;
}

.articulo-cuerpo h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--dark);
  margin: 30px 0 10px;
}

.articulo-cuerpo ul,
.articulo-cuerpo ol {
  margin: 0 0 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.articulo-cuerpo li {
  line-height: 1.65;
}

.articulo-cuerpo strong {
  color: var(--dark);
  font-weight: 700;
}

.articulo-cuerpo a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.articulo-cuerpo code {
  background: var(--bg-main);
  border: 1px solid var(--gray-200);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 0.9em;
}

.articulo-cuerpo blockquote {
  margin: 24px 0;
  padding: 14px 20px;
  background: var(--bg-main);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-sm);
  font-style: italic;
  color: var(--gray-700, var(--gray-600));
}

.articulo-cuerpo blockquote p {
  margin: 0;
}

.articulo-cuerpo hr {
  border: none;
  border-top: 1px solid var(--gray-200);
  margin: 36px 0;
}

/* --- Cierre con llamada a la acción --------------------------------------- */
.articulo-cta {
  margin-top: 56px;
  padding: 32px;
  background: var(--bg-main);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  text-align: center;
}

.articulo-cta h2 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 10px;
}

.articulo-cta p {
  font-size: 0.92rem;
  color: var(--gray-600);
  margin-bottom: 22px;
  line-height: 1.55;
}

.articulo-cta .btn {
  margin: 0 6px 8px;
}

/* --- Índice del blog ------------------------------------------------------ */
.blog-lista {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 32px;
}

.blog-card {
  display: block;
  padding: 26px 28px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}

.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}

.blog-card time {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.blog-card h2 {
  font-size: 1.28rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
  margin: 8px 0 10px;
}

.blog-card p {
  font-size: 0.92rem;
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: 14px;
}

.blog-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
}

.blog-card:hover .blog-card-cta {
  gap: 10px;
}

@media (max-width: 576px) {
  .articulo-page {
    padding: 20px 16px 60px;
  }

  .articulo-header h1 {
    font-size: 1.7rem;
  }

  .articulo-cuerpo {
    font-size: 1rem;
  }

  .articulo-cuerpo h2 {
    font-size: 1.25rem;
  }

  .articulo-cta {
    padding: 24px 18px;
  }

  .articulo-cta .btn {
    width: 100%;
    justify-content: center;
    margin: 0 0 8px;
  }

  .blog-card {
    padding: 20px;
  }
}

/* --- Chips de tema dentro de una categoría (Papel de Regalo) --------------- */
.subcategorias {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.subcategorias[hidden] {
  display: none;
}

.subcat-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-full);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.83rem;
  color: var(--gray-800);
  cursor: pointer;
  transition: var(--transition-fast);
}

.subcat-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.subcat-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #FFFFFF;
}

.subcat-count {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  background: var(--bg-main);
  color: var(--gray-600);
}

.subcat-btn.active .subcat-count {
  background: rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
}

@media (max-width: 576px) {
  .subcategorias {
    gap: 6px;
  }

  .subcat-btn {
    padding: 7px 11px;
    font-size: 0.78rem;
  }
}

/* Anchos medios: con 9 enlaces la barra necesita ~1300px con el gap de 18px.
   Se aprieta el espaciado en vez de esconder enlaces o mandar la hamburguesa
   a pantallas anchas. */
@media (min-width: 1181px) and (max-width: 1400px) {
  .nav-links {
    gap: 11px;
  }

  .nav-link {
    font-size: 0.83rem;
  }

  .navbar-inner {
    gap: 12px;
  }

  .nav-actions {
    gap: 10px;
  }
}

/* --- Paginas de categoria (/categorias/<slug>/) ---------------------------
   Generadas por scripts/generar-categorias.py. Reusan .producto-page,
   .breadcrumb y la grilla .relacionados-grid de las fichas de producto. */
.categoria-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 32px;
  align-items: center;
  margin: 8px 0 40px;
}
.categoria-portada {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(30, 41, 59, 0.12);
}
.categoria-intro h1 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  margin-bottom: 14px;
}
.categoria-meta {
  margin: 6px 0 18px;
  color: var(--primary);
  font-size: 0.95rem;
}
.categoria-grupo h2 small,
.relacionado-card span small {
  color: #6b7280;
  font-weight: 600;
  font-size: 0.75em;
}
.relacionado-card span small { display: block; margin-top: 2px; }
.categoria-otras { margin: 48px 0 24px; }
.categoria-otras-lista {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.categoria-otras-lista a {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #dbe3ea;
  border-radius: 999px;
  color: var(--dark);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  background: #fff;
}
.categoria-otras-lista a:hover { border-color: var(--primary); color: var(--primary); }
@media (max-width: 768px) {
  .categoria-header { grid-template-columns: 1fr; gap: 20px; }
}

/* Footer: columna de contacto (direccion, horario, telefonos, redes). */
.footer-contacto li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; color: var(--gray-400); font-size: 0.9rem; font-weight: 400; }
.footer-contacto i { margin-top: 3px; flex-shrink: 0; }
.footer-contacto a { display: inline-flex; gap: 6px; align-items: center; }
.footer-redes { gap: 16px !important; flex-wrap: wrap; }