/* Google Fonts se carga desde <link> en el HTML (con preconnect).
   El @import aquí generaba solicitud duplicada y bloqueaba render — fix P1 2026-07-06 */

:root {
  /* ===== PALETA SOLMARA — Fase 1 del brief de marca (2026-07-30) =====
     Reemplaza el rosa único por un sistema de acento por línea. El acento
     base (Dorado Solmara) se usa en todo el sitio salvo cuando se está
     navegando dentro de una línea específica del catálogo — ver los
     overrides body[data-linea="..."] más abajo, que sobreescriben estas
     mismas variables y cascadean automáticamente a todo lo que ya usa
     var(--brand)/var(--color-secondary)/var(--color-brand) en el sitio. */
  --color-bg-light:        #F4EFE6;   /* Crema Lienzo (brief) — fondo principal */
  --color-bg-dark:         #1C1C1C;   /* Negro suave */
  --color-bg-black:        #0A0A0A;   /* Negro profundo — footer, hero side oscuro */
  --color-bg-rose:         #F5EFE3;   /* Fondo suave neutro (antes rosa pálido) */
  --color-bg-card:         #FFFFFF;   /* Blanco para tarjetas */
  --color-dark-card:       #262626;   /* Tarjeta sobre fondo oscuro */
  --color-accent-soft:     #F5EFE3;

  /* Texto sobre fondos oscuros */
  --color-primary:         #F5F0EB;
  --color-primary-dark:    #DDD0C8;

  /* Acento — Dorado Solmara, institucional, es el default fuera del catálogo
     y dentro del catálogo cuando no se está viendo una línea específica */
  --color-secondary:       #C5A059;
  --color-secondary-hover: #A8823F;
  /* fix P2 2026-07-06: --color-accent y --color-accent-dark eran duplicados literales
     de --color-secondary. Ahora son alias explícitos para retro-compat sin duplicar valores. */
  --color-accent:          var(--color-secondary);
  --color-accent-dark:     var(--color-secondary-hover);

  /* Texto sobre fondos claros */
  --color-text:            #2A2A2A;
  --color-text-muted:      #7A6E6A;
  --color-silver:          #A09590;
  --color-silver-light:    #E8DDD8;   /* Bordes */
  --color-white:           #FFFFFF;

  /* ===== ALIAS SISTEMA SOLMARA (semánticos, apuntan a los tokens originales) ===== */
  --brand:        var(--color-secondary);        /* CTAs, acentos, hover de links, badges */
  --brand-dark:   var(--color-secondary-hover);  /* hover de botones primarios */
  --brand-pale:   var(--color-bg-rose);          /* fondos suaves */
  --brand-ink:    #2C2C2C;                       /* color de texto SOBRE el acento — oscuro por defecto (dorado es claro) */
  /* Puente: catalogo/index.php y acerca-de/index.php usan var(--color-brand, ...)
     con fallback hardcodeado — definir esta variable hace que ~67 reglas de esos dos
     archivos reciban el retema sin tocarlas una por una (Fase 1, 2026-07-30). */
  --color-brand:      var(--color-secondary);
  --color-brand-dark: var(--color-secondary-hover);
  --bg-light:     var(--color-bg-light);
  --bg-dark:      var(--color-bg-dark);          /* header, CTA oscuros */
  --bg-black:     var(--color-bg-black);         /* footer, hero side oscuro */
  --text:         var(--color-text);             /* body text */
  --text-muted:   var(--color-text-muted);       /* texto secundario */
  --silver:       var(--color-silver);           /* íconos sutiles, placeholders */
  --border:       var(--color-silver-light);    /* divisores */
  --white:        var(--color-white);
  --wa-green:     #25D366;                       /* SOLO WhatsApp */

  /* Geometría */
  --radius-lg: 14px;
  --radius-md: 8px;
  --radius-sm: 4px;

  /* Tipografía */
  --font-heading: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:   var(--font-heading);
  --font-sans:    var(--font-body);
  --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Sombras */
  --shadow-sm:    0 2px 10px rgba(0,0,0,0.06);
  --shadow-md:    0 8px 24px rgba(0,0,0,0.10);
  --shadow-lg:    0 24px 60px rgba(0,0,0,0.16);
  --shadow-glass: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-rose:  0 8px 24px rgba(197,160,89,0.25);   /* nombre histórico — ahora es la sombra del acento activo, no siempre "rosa" */

  --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== ACENTO POR LÍNEA — Fase 1 del brief de marca (2026-07-30) =====
   catalogo/index.php pone data-linea="dama|caballero|bolsos" en <body> según
   la categoría que se esté viendo (ver initCategories()/filterCategory()).
   Sin línea activa (otras páginas, o "Todos los productos" en el catálogo)
   se usa el dorado definido arriba en :root. */
body[data-linea="dama"] {
  --color-secondary:       #A8C599;  /* Verde Salvia */
  --color-secondary-hover: #8FAF80;
  --color-bg-rose:         #EEF3EA;
  --brand-ink:             #2C2C2C; /* verde salvia es claro — texto oscuro encima */
  --shadow-rose:           0 8px 24px rgba(168,197,153,0.30);
}
body[data-linea="caballero"] {
  --color-secondary:       #1C2833;  /* Azul Océano Profundo */
  --color-secondary-hover: #111A22;
  --color-bg-rose:         #E9ECEE;
  --brand-ink:             #FFFFFF; /* azul océano es oscuro — texto blanco encima */
  --shadow-rose:           0 8px 24px rgba(28,40,51,0.32);
}
body[data-linea="bolsos"] {
  --color-secondary:       #8A4B38;  /* Terracota / Cognac */
  --color-secondary-hover: #6E3B2C;
  --color-bg-rose:         #F1E4DE;
  --brand-ink:             #FFFFFF; /* terracota es oscuro — texto blanco encima */
  --shadow-rose:           0 8px 24px rgba(138,75,56,0.30);
}

/* ===== RESET BASE ===== */
* { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  line-height: 1.7;
  background-color: var(--color-bg-light);
  overflow-x: hidden;
  letter-spacing: 0;
  font-weight: 400;
}

/* ===== TEXTO JUSTIFICADO en párrafos de contenido editorial ===== */
.legal-body p,
.privacy-card p,
.privacy-card li,
.justify-text p,
.content-justify {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  word-break: break-word;
  text-justify: inter-word;
}
/* En mobile: deshabilitar justify si la columna es muy estrecha (<360px), evita huecos feos */
@media (max-width: 360px) {
  .legal-body p, .privacy-card p, .privacy-card li, .justify-text p, .content-justify {
    text-align: left;
    hyphens: none;
  }
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.15;
  letter-spacing: -0.5px;
  padding-top: 0.05em;  /* respira para descenders de italic (y, p, g) */
}

.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 48px;
}

@media (max-width: 768px) {
  .container { padding: 0 24px; }
}

/* ===== ANNOUNCEMENT BAR ===== */
.announcement-bar {
  background: var(--brand);
  color: var(--brand-ink);
  text-align: center;
  padding: 11px 15px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: var(--font-sans);
  width: 100%;
  position: relative;
  z-index: 1001;
}

.announcement-msg        { display: none; animation: fadeMsg 1s forwards; }
.announcement-msg.active { display: block; }

@keyframes fadeMsg {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== HEADER ===== */
.modern-header {
  position: sticky;
  top: 0; left: 0; width: 100%;
  padding: 2px 0; /* 2026-08-01: mínimo real — el logo (160px) es lo que determina el alto de la banda, no el padding */
  background: rgba(18,18,18,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1000;
  transition: padding 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.modern-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modern-header.scrolled {
  padding: 2px 0;
  background: rgba(18,18,18,0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.modern-header .logo img {
  max-height: 160px; /* 2026-08-01: agrandado de nuevo (128px→160px, antes 96px, originalmente 70px) */
  width: auto;
  transition: var(--transition);
  /* resplandor dorado sutil que sigue el contorno real del logo (drop-shadow, no una caja) */
  filter: drop-shadow(0 0 5px rgba(197,160,89,0.5)) drop-shadow(0 0 14px rgba(197,160,89,0.28));
}
.modern-header.scrolled .logo img { max-height: 104px; }

/* ===== NAV LINKS ===== */
.modern-nav ul {
  list-style: none;
  display: flex;
  gap: 35px;
  margin: 0; padding: 0;
  align-items: center;
}

.modern-nav a {
  text-decoration: none;
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  padding-bottom: 4px;
}

.modern-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 100%; height: 1.5px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-nav a:hover::after,
.modern-nav a.active::after { transform: scaleX(1); }
.modern-nav a:hover,
.modern-nav a.active { color: var(--brand); }

.header-icons { display: flex; gap: 20px; align-items: center; }
.header-icon-btn {
  background: transparent; border: none;
  color: #fff; cursor: pointer;
  transition: var(--transition); padding: 5px;
  display: flex;
}
.header-icon-btn:hover { color: var(--color-secondary); }

/* ===== MEGA MENU ===== */
.nav-item-has-mega { position: static; }

.mega-menu {
  position: absolute;
  top: 100%; left: 0;
  width: 100%;
  background: var(--bg-light);
  border-top: 2px solid var(--color-secondary);
  box-shadow: var(--shadow-lg);
  padding: 22px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.3s ease;
  z-index: 999;
  display: flex;
  justify-content: center;
  gap: 36px;
}

.modern-nav li:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega-menu-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 150px;
  text-decoration: none;
}

.mega-menu-column img {
  width: 100%;
  height: 88px;
  border-radius: var(--radius-md);
  object-fit: cover;
  margin-bottom: 10px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.mega-menu-column:hover img {
  transform: scale(1.04);
  box-shadow: var(--shadow-rose);
}

.mega-menu-column span {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: var(--color-text);
  font-weight: 600;
  margin-top: 0;
}

/* Descripción de 2 líneas ocultada — hacía el dropdown demasiado grueso (2026-07-31) */
.mega-menu-column p {
  display: none;
}

/* ===== HERO ===== */
.modern-hero {
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: white;
  margin: 0; padding: 0;
}

.modern-hero video {
  position: absolute;
  top: 50%; left: 50%;
  min-width: 100%; min-height: 100%;
  width: auto; height: auto;
  transform: translateX(-50%) translateY(-50%);
  z-index: 0;
  object-fit: cover;
}

/* Crossfade de los 7 videos del hero — 2026-07-31: dos <video> superpuestos que
   se cruzan en opacidad para que nunca se vea un cuadro en blanco entre uno y otro. */
.hero-video { opacity: 0; transition: opacity 1.5s ease; }
.hero-video.hero-video-active { opacity: 1; }

/* Hero con imagen de fondo (páginas internas) */
.modern-hero[style*="background-image"] {
  background-size: cover;
  background-position: center;
}

.modern-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(to top,
    rgba(0,0,0,0.82) 0%,
    rgba(0,0,0,0.35) 60%,
    rgba(0,0,0,0.20) 100%);
  z-index: 1;
}

.modern-hero .container {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
}

.modern-hero h1 {
  color: #fff;
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  font-weight: 700;
  letter-spacing: -1px;
  margin-bottom: 22px;
  text-align: center;
  line-height: 1.25;
  padding-top: 0.15em;
  padding-bottom: 0.08em;
}

/* Cuando hay un <span> italic dentro del h1 del hero, dar respiración extra para descenders */
.modern-hero h1 span[style*="italic"],
.modern-hero h1 em {
  display: inline-block;
  padding-bottom: 0.12em;
  padding-top: 0.05em;
  line-height: 1.2;
}

.modern-hero p {
  font-size: 1.1rem;
  max-width: 600px;
  color: rgba(255,255,255,0.85);
  margin: 0 auto 40px;
  text-align: center;
  font-weight: 300;
  letter-spacing: 0.5px;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.hero-glass-card {
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.22);
  padding: 28px 38px;
  border-radius: var(--radius-lg);
  margin: 40px auto 0;
  display: inline-block;
  max-width: 500px;
}

.hero-glass-card h3 {
  color: var(--color-secondary);
  margin-bottom: 10px;
  font-size: 0.9rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: var(--font-body);
  font-weight: 600;
}
.hero-glass-card p {
  color: rgba(255,255,255,0.9);
  font-size: 0.95rem;
  margin-bottom: 0;
  line-height: 1.65;
}

/* ===== BOTONES — SISTEMA SOLMARA ===== */
.modern-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: var(--brand-ink) !important;
  padding: 18px 32px;
  border-radius: 8px;
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  box-shadow: var(--shadow-rose);
  transition: var(--transition);
  border: none;
  cursor: pointer;
}

.modern-btn:hover {
  background: var(--brand-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(197,160,89,0.35);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--brand);
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: var(--transition);
  border: 1.5px solid var(--brand);
  cursor: pointer;
  gap: 8px;
}

.btn-outline:hover {
  background: var(--brand);
  color: var(--brand-ink);
  transform: translateY(-2px);
  box-shadow: var(--shadow-rose);
}

/* ===== WISHLIST ===== */
.wishlist-btn {
  position: absolute;
  top: 12px; right: 12px;
  background: rgba(255,255,255,0.94);
  border: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--silver);
  cursor: pointer;
  z-index: 10;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-sm);
}

.wishlist-btn:hover      { transform: scale(1.12); color: var(--brand); box-shadow: 0 4px 16px rgba(197,160,89,0.25); }
.wishlist-btn.active     { color: var(--brand); }
.wishlist-btn.active svg { fill: var(--brand); }

/* ===== TRUST RIBBON ===== */
.trust-ribbon {
  background: var(--bg-light);
  padding: 48px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

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

.trust-item           { text-align: center; }
.trust-item h3        { font-size: 1.1rem; color: var(--text); margin-bottom: 8px; font-weight: 600; letter-spacing: -0.3px; font-family: var(--font-serif); }
.trust-item h2        { font-family: var(--font-serif); font-size: 2.4rem; font-weight: 700; color: var(--text); margin-bottom: 8px; letter-spacing: -0.5px; }
.trust-item p         { color: var(--text-muted); font-size: 11px; margin: 0; text-transform: uppercase; letter-spacing: 2px; font-weight: 500; font-family: var(--font-sans); }

@media (max-width: 768px) {
  .trust-ribbon { padding: 40px 0; }
  .trust-grid { gap: 32px; }
}

/* ===== PRODUCT SHOWCASE ===== */
.product-showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 50px;
}

@media (max-width: 1180px) { .product-showcase-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
@media (max-width: 900px)  { .product-showcase-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 480px)  { .product-showcase-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* ===== CAROUSEL ===== */
.carousel-container { position: relative; width: 100%; margin: 0 auto; }

.carousel-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 20px 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-item { min-width: 320px; scroll-snap-align: center; flex: 0 0 auto; }

.carousel-nav { display: flex; justify-content: center; gap: 16px; margin-top: 30px; }
.carousel-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px solid var(--color-secondary);
  background: transparent;
  color: var(--color-secondary);
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.carousel-btn:hover { background: var(--color-secondary); color: var(--brand-ink); transform: scale(1.08); }

/* ===== FEATURED CARD ===== */
.featured-card {
  background: var(--color-bg-card);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid var(--border);
  position: relative;
}

.featured-card:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-md);
  border-color: rgba(197,160,89,0.4);
}

.featured-card .img-container {
  width: 100%;
  aspect-ratio: 1;
  background: var(--brand-pale);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
}

.featured-card img                  { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.7s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.featured-card .img-secondary       { position: absolute; top: 0; left: 0; opacity: 0; }
.featured-card:hover .img-primary   { opacity: 0; transform: scale(1.06); }
.featured-card:hover .img-secondary { opacity: 1; transform: scale(1.06); }

.featured-card .info { padding: 24px 22px 22px; }
.featured-card a,
.product-card a {
  color: inherit;
  text-decoration: none;
}
.featured-card h4 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  margin: 0 0 8px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 1.2;
}
.featured-card .price {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--brand);
  font-size: 1rem;
  letter-spacing: 0.5px;
}

.featured-card .btn-quick {
  margin-top: 14px;
  display: inline-block;
  padding: 12px 20px;
  background: transparent;
  color: var(--brand);
  border: 1.5px solid var(--brand);
  border-radius: 8px;
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: var(--transition);
  width: 100%;
  text-align: center;
  cursor: pointer;
}
.featured-card .btn-quick:hover { background: var(--brand); color: var(--brand-ink); }

/* ===== BENTO GRID (secciones oscuras de contraste) ===== */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  margin: 60px 0;
}

.bento-card {
  background: var(--color-dark-card);
  border-radius: 16px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--color-primary);
  position: relative;
  overflow: hidden;
}

.bento-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 4px; height: 100%;
  background: var(--brand);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bento-card:hover {
  transform: scale(1.02);
  box-shadow: 0 20px 48px rgba(0,0,0,0.32);
  border-color: rgba(197,160,89,0.3);
}
.bento-card:hover::before { opacity: 1; }

.bento-card-large { grid-column: span 8; }
.bento-card-small { grid-column: span 4; }

.bento-icon {
  width: 52px; height: 52px;
  background: rgba(197,160,89,0.15);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  color: var(--color-secondary);
  transition: var(--transition);
}
.bento-card:hover .bento-icon { background: var(--color-secondary); color: var(--brand-ink); }

.bento-card h3 { font-size: 1.45rem; margin-bottom: 12px; font-weight: 600; color: var(--color-primary); letter-spacing: 0; }
.bento-card p  { color: rgba(245,240,235,0.62); font-size: 0.98rem; line-height: 1.7; font-weight: 300; }

/* ===== NEWSLETTER INPUT ===== */
.newsletter-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(255,255,255,0.2);
  color: var(--color-primary);
  padding: 10px 0;
  margin-bottom: 20px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  outline: none;
  transition: var(--transition);
}
.newsletter-input::placeholder { color: rgba(245,240,235,0.45); }
.newsletter-input:focus { border-bottom-color: var(--color-secondary); }

/* ===== FOOTER BOTTOM ===== */
.footer-bottom {
  text-align: center;
  padding-top: 22px;
  margin-top: 30px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 10px;
  color: rgba(255,255,255,0.32);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: var(--font-sans);
  font-weight: 400;
}

/* ===== WIDGET FLOTANTE DE WHATSAPP (clon del de ACLIMIN, colores Solmara) ===== */
/* 2026-07-31: reemplaza el botón simple (.wa-floating-btn) por el widget con
   burbuja de chat + anillo de pulso que ya usa ACLIMIN. Degradado 100%
   institucional (dorado → dorado oscuro) — el usuario pidió explícitamente
   quitar el verde de WhatsApp que sí se usa en ACLIMIN, en Solmara solo
   colores de marca. Posición: abajo-IZQUIERDA (a diferencia de ACLIMIN)
   porque el carrito flotante de Solmara ya ocupa abajo-derecha. */
.wa-widget { position: fixed; bottom: 30px; left: 30px; z-index: 900; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; transition: bottom 0.3s ease, opacity 0.25s ease; }
body.nav-open .wa-widget { display: none; }
.wa-widget.wa-widget-hidden { opacity: 0; pointer-events: none; }

.wa-bubble { background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); width: 270px; padding: 16px 16px 14px; position: relative; animation: wa-fade-in 0.35s ease; }
.wa-bubble::after { content: ''; position: absolute; bottom: -7px; left: 26px; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); box-shadow: 2px 2px 4px rgba(0,0,0,0.06); }
.wa-bubble-close { position: absolute; top: 8px; right: 10px; border: none; background: none; color: #94a3b8; font-size: 18px; line-height: 1; cursor: pointer; padding: 2px; }
.wa-bubble-inner { display: flex; gap: 12px; align-items: flex-start; }
.wa-bubble-avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); display: flex; align-items: center; justify-content: center; color: var(--brand-ink); font-family: var(--font-serif); font-weight: 700; font-size: 0.8rem; }
.wa-bubble-name { margin: 0 0 3px; font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem; color: var(--text); }
.wa-bubble-text { margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--text-muted); }
.wa-bubble-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 9px 16px; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); color: #fff; font-size: 0.8rem; font-weight: 700; border-radius: 30px; text-decoration: none; }

.wa-fab { width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-rose); cursor: pointer; border: 3px solid #fff; position: relative; padding: 0; outline: none; }
.wa-fab-ring { position: absolute; inset: 0; border-radius: 50%; background: var(--brand); opacity: 0.5; animation: wa-pulse-ring 2.4s ease-out infinite; }
.wa-fab svg { width: 28px; height: 28px; fill: #fff; position: relative; }
@keyframes wa-pulse-ring { 0% { transform: scale(1); opacity: 0.45; } 70%, 100% { transform: scale(1.7); opacity: 0; } }
@keyframes wa-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 600px) {
  /* 2026-08-01: ya NO se achica ni se reposiciona .wa-widget/.wa-fab aquí — el
     carrito (.cart-floating-btn) no tiene override móvil y se queda en 58px/30px
     siempre; achicar solo WhatsApp los desalineaba visiblemente en el celular. */
  .wa-bubble { width: 230px; }
}

/* ===== CARRITO FLOTANTE ===== */
.cart-floating-btn {
  position: fixed;
  bottom: 30px; right: 30px;
  background: var(--brand);
  border: none;
  color: var(--brand-ink);
  width: 58px; height: 58px;
  border-radius: 50%;
  display: flex; justify-content: center; align-items: center;
  box-shadow: var(--shadow-rose);
  cursor: pointer;
  z-index: 1000;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0; outline: none;
}
.cart-floating-btn:hover { transform: scale(1.08); background: var(--brand-dark); box-shadow: 0 16px 40px rgba(197,160,89,0.45); }

.cart-badge {
  position: absolute;
  top: -3px; right: -3px;
  background: var(--color-bg-dark);
  color: #fff;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; justify-content: center; align-items: center;
  font-size: 11px; font-weight: 700;
  border: 2px solid #fff;
}

/* ===== MODAL CARRITO ===== */
.cart-modal-overlay {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.45);
  z-index: 2000;
  opacity: 0; visibility: hidden;
  transition: 0.3s ease;
}
.cart-modal-overlay.active { opacity: 1; visibility: visible; }

.cart-modal {
  position: fixed; top: 0; right: -420px;
  width: 420px; max-width: 100%; height: 100%;
  background: #fff;
  z-index: 2001;
  box-shadow: -8px 0 30px rgba(0,0,0,0.12);
  transition: 0.35s ease;
  display: flex; flex-direction: column;
  border-left: 1px solid var(--color-silver-light);
}
.cart-modal.active { right: 0; }

.cart-header {
  padding: 22px 24px;
  border-bottom: 1px solid var(--color-silver-light);
  display: flex; justify-content: space-between; align-items: center;
  background: var(--color-bg-light);
}
.cart-header h2 {
  margin: 0;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-text);
  font-family: var(--font-heading);
}
.close-cart {
  background: none; border: none;
  color: var(--color-text-muted);
  font-size: 1.6rem; cursor: pointer;
  transition: color 0.2s; line-height: 1;
}
.close-cart:hover { color: var(--color-secondary); }

.cart-items {
  flex-grow: 1; overflow-y: auto;
  padding: 20px;
  background: #fff;
  font-family: var(--font-body);
}
.cart-item {
  display: flex; align-items: flex-start;
  border-bottom: 1px solid var(--color-silver-light);
  padding-bottom: 16px; margin-bottom: 16px;
}
.cart-item-img {
  width: 66px; height: 66px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-right: 14px;
  border: 1px solid var(--color-silver-light);
  flex-shrink: 0;
}
.cart-item-details { flex-grow: 1; color: var(--color-text); }
.cart-item-title   { font-size: 0.88rem; font-weight: 600; color: var(--color-text); margin: 0 0 4px; line-height: 1.4; }
.cart-item-price   { font-size: 0.85rem; color: var(--color-text-muted); }
.cart-item-remove  {
  background: none; border: none;
  color: var(--color-secondary);
  cursor: pointer;
  font-size: 0.78rem; padding: 0; margin-top: 6px;
  text-decoration: underline;
  font-family: var(--font-body);
}
.cart-empty-msg { text-align: center; color: var(--color-text-muted); margin-top: 60px; font-size: 0.95rem; }

.cart-footer {
  padding: 20px 24px;
  border-top: 1px solid var(--color-silver-light);
  background: var(--color-bg-light);
}
.cart-total { display: flex; justify-content: space-between; font-size: 0.98rem; margin-bottom: 10px; color: var(--color-text); }
.cart-total span { color: var(--color-text); }

.checkout-btn {
  width: 100%; padding: 18px;
  background: var(--brand);
  color: var(--brand-ink);
  border: none; border-radius: 8px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  letter-spacing: 2px; text-transform: uppercase;
  font-family: var(--font-sans);
  box-shadow: var(--shadow-rose);
}
.checkout-btn:hover { background: var(--brand-dark); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(197,160,89,0.35); }

/* ===== MODAL CHECKOUT ===== */
.checkout-modal-overlay {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.52);
  z-index: 3000; opacity: 0; visibility: hidden;
  transition: 0.3s ease;
  display: flex; justify-content: center; align-items: center;
}
.checkout-modal-overlay.active { opacity: 1; visibility: visible; }

.checkout-modal {
  background: #fff;
  width: 90%; max-width: 520px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(20px);
  transition: 0.3s ease;
  max-height: 90vh;
  display: flex; flex-direction: column;
}
.checkout-modal-overlay.active .checkout-modal { transform: translateY(0); }

.checkout-header {
  padding: 20px 24px;
  background: var(--color-bg-light);
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--color-silver-light);
}
.checkout-header h2 {
  margin: 0;
  font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px;
  color: var(--color-secondary);
  font-family: var(--font-heading);
}

.checkout-body { padding: 24px; overflow-y: auto; background: #fff; }

.form-group { margin-bottom: 16px; }
.form-group label {
  display: block; margin-bottom: 6px;
  font-weight: 600; color: var(--color-text);
  font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.5px;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--color-silver-light);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  background: #fff;
  color: var(--color-text);
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(197,160,89,0.12);
}
.form-group input[type="checkbox"] { width: auto; margin-right: 8px; accent-color: var(--color-secondary); }
.checkbox-label { display: flex; align-items: center; font-weight: normal !important; cursor: pointer; color: var(--color-text); }

.checkout-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--color-silver-light);
  background: var(--color-bg-light);
  display: flex; justify-content: flex-end; gap: 10px;
}

.btn-cancel {
  padding: 14px 24px;
  background: transparent;
  color: var(--text-muted);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  cursor: pointer; font-weight: 600;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: var(--transition);
}
.btn-cancel:hover { border-color: var(--brand); color: var(--brand); }

.btn-submit {
  padding: 14px 28px;
  background: var(--brand); color: var(--brand-ink);
  border: none; border-radius: 8px;
  cursor: pointer; font-weight: 600;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
  transition: var(--transition);
  box-shadow: var(--shadow-rose);
}
.btn-submit:hover { background: var(--brand-dark); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(197,160,89,0.35); }

.loading-spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== ANIMACIONES ===== */
.fade-in-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-in-scroll.visible { opacity: 1; transform: translateY(0); }

/* ===== MARQUEE / micro-interacciones extra ===== */
/* fix P2 2026-07-06: @keyframes brand-pulse eliminado — no se usaba en ningún selector. */

@media (prefers-reduced-motion: reduce) {
  .fade-in-scroll { opacity: 1; transform: none; transition: none; }
  .modern-nav a::after { transition: none; }
  .featured-card:hover, .product-card:hover, .bento-card:hover { transform: none; }
  .featured-card:hover .img-primary, .featured-card:hover .img-secondary,
  .product-card:hover .img-main, .product-card:hover .img-secondary { transform: none; }
}

/* ===== FOOTER GLOBAL ===== */
.modern-footer {
  background-color: var(--bg-black);
  color: var(--color-primary);
  padding: 56px 0 24px;
}
.modern-footer .container {
  max-width: 1440px; margin: 0 auto; padding: 0 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 48px;
}
.footer-col h4 {
  color: var(--brand);
  font-size: 11px; margin-bottom: 22px;
  letter-spacing: 2px; font-weight: 600;
  text-transform: uppercase;
  font-family: var(--font-sans);
}
.footer-col p,
.footer-col a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  font-size: 0.88rem;
  margin-bottom: 10px;
  display: block;
  line-height: 1.7;
  font-family: var(--font-sans);
  font-weight: 400;
  transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.footer-col a:hover { color: var(--brand); }

@media (max-width: 768px) {
  .modern-footer { padding: 44px 0 20px; }
  .modern-footer .container { padding: 0 24px; gap: 36px; }
}

/* ===== PRODUCT DETAIL SPA ===== */
.product-detail-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 16px; }
@media (max-width: 768px) { .product-detail-layout { grid-template-columns: 1fr; } }

.product-gallery {
  position: relative;
  background: var(--color-bg-rose);
  border-radius: var(--radius-lg);
  display: flex; justify-content: center; align-items: center;
  overflow: hidden;
  border: 1px solid var(--color-silver-light);
}
.product-gallery { flex-direction: column; }
.gallery-main-img { width: 100%; max-height: 340px; object-fit: contain; }
.gallery-thumbs { display: flex; gap: 10px; padding: 14px 16px 6px; flex-wrap: wrap; justify-content: center; }
.gallery-thumb {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: 8px; cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.65;
  transition: opacity 0.2s, border-color 0.2s;
}
.gallery-thumb:hover { opacity: 0.9; }
.gallery-thumb.active { border-color: var(--color-secondary); opacity: 1; }
.product-info-panel  { display: flex; flex-direction: column; }

.pd-category { color: var(--color-secondary); text-transform: uppercase; font-weight: 600; font-size: 0.78rem; margin-bottom: 8px; letter-spacing: 1.5px; }
.pd-title    { font-size: 1.7rem; margin-bottom: 6px; color: var(--color-text); letter-spacing: -0.5px; }
.pd-sku      { color: var(--color-text-muted); font-size: 0.82rem; margin-bottom: 16px; }
.pd-price    { font-size: 1.55rem; font-weight: 700; color: var(--color-text); margin-bottom: 16px; border-bottom: 1px solid var(--color-silver-light); padding-bottom: 14px; }
.pd-price span { font-size: 0.9rem; font-weight: 400; color: var(--color-text-muted); }
.pd-description { color: var(--color-text-muted); line-height: 1.7; margin-bottom: 22px; }
.pd-actions  { display: flex; gap: 14px; }

.btn-add {
  flex: 1;
  background: var(--brand); color: var(--brand-ink);
  border: none; padding: 18px; border-radius: 8px;
  font-weight: 600; text-transform: uppercase;
  font-size: 12px;
  cursor: pointer;
  display: flex; justify-content: center; align-items: center; gap: 10px;
  transition: var(--transition);
  letter-spacing: 2px;
  box-shadow: var(--shadow-rose);
  font-family: var(--font-sans);
}
.btn-add:hover { background: var(--brand-dark); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(197,160,89,0.35); }

.btn-datasheet {
  background: transparent; color: var(--brand);
  border: 1.5px solid var(--brand);
  padding: 18px; text-decoration: none; border-radius: 8px;
  display: flex; align-items: center; gap: 8px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: var(--font-sans);
  transition: var(--transition);
}
.btn-datasheet:hover { background: var(--brand); color: var(--brand-ink); transform: translateY(-2px); box-shadow: var(--shadow-rose); }

.back-to-catalog {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--color-secondary); text-decoration: none;
  margin-bottom: 20px; font-weight: 600; transition: var(--transition);
}
.back-to-catalog:hover { color: var(--color-secondary-hover); }

/* ===== ZOOM LIGHTBOX ===== */
.gallery-main-img { cursor: zoom-in; }

.gallery-zoom-hint {
  font-size: 0.72rem; color: var(--color-text-muted);
  text-align: center; padding: 6px 0 4px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  opacity: 0.75;
}

.img-zoom-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.93);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s;
}
.img-zoom-overlay.visible { opacity: 1; pointer-events: all; }

.img-zoom-overlay img {
  max-width: 88vw; max-height: 82vh;
  object-fit: contain;
  border-radius: 6px;
  transform-origin: center;
  transition: transform 0.18s ease;
  user-select: none;
}

.img-zoom-close {
  position: absolute; top: 18px; right: 24px;
  color: #fff; font-size: 2.2rem; line-height: 1;
  cursor: pointer; background: none; border: none;
  opacity: 0.75; transition: opacity 0.15s;
}
.img-zoom-close:hover { opacity: 1; }

.img-zoom-controls {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.1); backdrop-filter: blur(8px);
  border-radius: 50px; padding: 8px 18px;
}
.img-zoom-controls button {
  background: none; border: none; color: #fff;
  font-size: 1.3rem; cursor: pointer; width: 32px; height: 32px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.img-zoom-controls button:hover { background: rgba(255,255,255,0.15); }
.img-zoom-controls #zoomLabel { color: #fff; font-size: 0.85rem; min-width: 44px; text-align: center; font-family: var(--font-body); }

.related-products { margin-top: 80px; border-top: 1px solid var(--color-silver-light); padding-top: 40px; }
.related-products h3 { font-size: 1.5rem; text-align: center; margin-bottom: 30px; color: var(--color-text); }
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 768px) { .related-grid { grid-template-columns: repeat(2, 1fr); } }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) { .modern-footer .container { grid-template-columns: 1fr 1fr; } }

@media (max-width: 768px) {
  .modern-header { padding: 8px 0; }
  .modern-header.scrolled { padding: 6px 0; }
  .modern-header .logo img { max-height: 84px; } /* 2026-08-01: subido de 48px, se veía chico junto al de escritorio (160px) */
  .modern-nav { display: none; }
  .modern-hero { min-height: 70vh; }
  .modern-hero h1 { font-size: clamp(2rem, 8vw, 2.8rem); letter-spacing: -0.5px; }
  .modern-hero p  { margin: 0 auto 28px; font-size: 0.95rem; padding: 0 16px; }
  .modern-btn { padding: 15px 28px; font-size: 11px; }
  .btn-outline { padding: 12px 22px; font-size: 11px; }
  .announcement-bar { font-size: 10px; padding: 9px 14px; letter-spacing: 1.5px; }
  .bento-card-large, .bento-card-small { grid-column: span 12; }
  .bento-card { padding: 28px 24px; }
  .bento-card h3 { font-size: 1.3rem; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .trust-item h2 { font-size: 2rem; }
  .modern-footer .container { grid-template-columns: 1fr; gap: 32px; }
  .editorial-quote { padding: 0 16px; }
  /* Modal checkout en mobile */
  .checkout-modal { max-width: 100%; margin: 16px; border-radius: 14px; max-height: calc(100vh - 32px); }
  .checkout-header { padding: 16px 20px; }
  .checkout-header h2 { font-size: 0.95rem; }
  .checkout-body { padding: 20px 18px; }
  .checkout-footer { padding: 14px 18px; }
  /* Cart drawer en mobile */
  .cart-header { padding: 18px 20px; }
  .cart-items { padding: 16px; }
  .cart-footer { padding: 18px 20px; }
  /* Trust ribbon */
  .trust-item h3 { font-size: 1rem; }
  .trust-item p { font-size: 10px; letter-spacing: 1.5px; }
}

@media (max-width: 380px) {
  .trust-grid { grid-template-columns: 1fr; }
  .modern-hero h1 { font-size: 1.85rem; }
}

/* fix 2026-08-03: en celular el hero ya no carga video (ver index.php,
   ahorro de ancho de banda) — solo queda la imagen poster estática. El
   overlay oscuro de .modern-hero::before estaba pensado para un video en
   movimiento; sobre una imagen fija se veía plano/gris ("muy sobrio",
   feedback del usuario). Mismo punto de corte que el JS (700px) — un
   degradado con los colores de marca en vez de negro liso, mantiene
   buen contraste para el texto pero con más carácter visual. */
/* fix 2026-08-03 (feedback: "es azul y mata un poco la imagen"): el navy
   #1C3B5E no es el tono oscuro real de la marca — el header/footer del
   sitio usan un negro cálido neutro (rgba(18,18,18,...)), no azul.
   Cambiado a ese mismo tono + opacidades más bajas para que la foto se
   siga viendo, con suficiente contraste solo donde vive el texto/botón. */
@media (max-width: 700px) {
  .modern-hero::before {
    background: linear-gradient(180deg,
      rgba(197,160,89,0.26) 0%,
      rgba(18,18,18,0.30) 45%,
      rgba(18,18,18,0.72) 100%);
  }
}

/* ===== MENÚ MÓVIL HAMBURGER ===== */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: none; border: none;
  cursor: pointer; padding: 8px;
  z-index: 1200;
}
.hamburger-btn span {
  display: block;
  width: 24px; height: 1.5px;
  background: #fff;
  transition: all 0.35s ease;
  transform-origin: center;
}
.hamburger-btn.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger-btn.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger-btn.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.60);
  z-index: 1150;
  backdrop-filter: blur(4px);
}
.mobile-nav-overlay.active { display: block; }

.mobile-nav-panel {
  position: fixed;
  top: 0; right: -100%;
  width: min(270px, 82vw); height: 100%;
  background: #fff;
  z-index: 1200;
  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; flex-direction: column;
  padding: 0;
  overflow-y: auto;
  box-shadow: -6px 0 28px rgba(0,0,0,0.10);
}
.mobile-nav-panel.active { right: 0; }

.mobile-nav-close {
  position: absolute; top: 14px; right: 14px;
  background: none; border: none;
  color: var(--color-text-muted);
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.4rem;
  transition: color 0.2s;
  border-radius: 50%;
}
.mobile-nav-close:hover { color: var(--color-secondary); }

.mobile-nav-logo {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--color-silver-light);
  flex-shrink: 0;
}
.mobile-nav-logo img { height: 44px; width: auto; }

.mobile-nav-panel > a {
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-silver-light);
  display: block;
  transition: color 0.2s, background 0.2s;
}
.mobile-nav-panel > a:hover,
.mobile-nav-panel > a.active { color: var(--color-secondary); background: var(--color-bg-rose); }

.mobile-nav-subcategory {
  background: var(--color-bg-rose);
  padding: 4px 0 6px;
  display: flex; flex-direction: column;
  border-bottom: 1px solid var(--color-silver-light);
}
.mobile-nav-subcategory a {
  font-size: 0.74rem; letter-spacing: 1.5px;
  padding: 8px 20px 8px 34px;
  border-bottom: none;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-weight: 500;
  background: transparent !important;
}
.mobile-nav-subcategory a:hover { color: var(--color-secondary) !important; padding-left: 38px; }

.mobile-nav-cart { margin-top: auto; padding: 16px 20px; border-top: 1px solid var(--color-silver-light); }
.mobile-nav-cart button {
  width: 100%; padding: 16px;
  background: var(--brand);
  border: none; color: var(--brand-ink);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: var(--transition);
  box-shadow: var(--shadow-rose);
}
.mobile-nav-cart button:hover { background: var(--brand-dark); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(197,160,89,0.35); }

@media (max-width: 768px) {
  .hamburger-btn       { display: flex; }
  .product-showcase-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
  .contact-wrapper     { grid-template-columns: 1fr !important; }
  .modern-footer form  { flex-direction: column !important; }
  .cart-modal          { width: 100% !important; right: -100% !important; }
  .cart-modal.active   { right: 0 !important; }
}

/* Pantallas muy pequeñas: cards de producto más compactas (no 1 columna gigante) */
@media (max-width: 380px) {
  .product-showcase-grid { gap: 10px !important; }
  .featured-card .info { padding: 16px 14px 16px !important; }
  .featured-card h4 { font-size: 0.95rem !important; }
}

/* Featured cards en mobile: reducir padding interno y tamaño de tipografía */
@media (max-width: 768px) {
  .featured-card .info { padding: 18px 18px 18px; }
  .featured-card h4 { font-size: 1rem; }
  .featured-card .price { font-size: 0.95rem; }
  .featured-card .btn-quick { padding: 10px 14px; font-size: 0.7rem; letter-spacing: 1.5px; }
}

/* ═══ Menú mobile — acordeón (fix P3 UX 2026-07-06) ═══ */
.mobile-accordion {
  border-top: 1px solid var(--color-silver-light);
  border-bottom: 1px solid var(--color-silver-light);
}
.mobile-accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: transparent;
  border: none;
  /* 2026-08-01: alineado a la misma tipografía que INICIO/NOSOTROS/CONTACTO
     (.mobile-nav-panel > a) — antes usaba 15px sin negrita, se veía como un
     nivel distinto en vez del mismo tipo de link de nivel superior. */
  padding: 14px 20px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
}
.mobile-accordion-icon {
  transition: transform 0.3s ease;
  opacity: 0.7;
}
.mobile-accordion[aria-expanded="true"] .mobile-accordion-icon,
.mobile-accordion-header[aria-expanded="true"] .mobile-accordion-icon {
  transform: rotate(180deg);
}
.mobile-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  padding-left: 14px;
  background: var(--color-bg-rose);
}
.mobile-accordion-body a {
  display: block;
  /* 2026-08-01: más chico y con más sangría que INICIO/COLECCIÓN/NOSOTROS/CONTACTO
     (antes 13px, casi idéntico a los items de nivel superior) — para que se lea
     claramente como submenú, no como otro nivel principal. */
  padding: 10px 4px 10px 16px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--color-silver-light);
}
.mobile-accordion-body a:hover { color: var(--color-secondary); }
.mobile-accordion-body a:last-child { border-bottom: none; }
.mobile-accordion.open .mobile-accordion-body { max-height: 320px; }
@media (prefers-reduced-motion: reduce) {
  .mobile-accordion-icon { transition: none; }
  .mobile-accordion-body { transition: none; }
}