/* Fonts: cargadas vía <link rel="preload"> en HTML para no bloquear el render.
   @import causaba que el CSS bloqueara hasta descargar las fuentes. */

:root {
  /* === COLOR — PRIMARY === */
  --primary-red: #D81B24;
  --primary-red-hover: #b0151c;
  --primary-red-soft: rgba(216, 27, 36, 0.08);
  --primary-red-glow: rgba(216, 27, 36, 0.22);
  --accent-amber: #FF8A00;

  /* === COLOR — CLAY (neutro cálido, conecta con materialidad de muebles) === */
  --clay-50: #FBF8F3;
  --clay-100: #F4EDDF;
  --clay-200: #E8DCC0;
  --clay-300: #D6C29A;
  --clay-400: #B89669;
  --clay-500: #9A754A;
  --clay-600: #785835;
  --clay-700: #4A3520;

  /* === COLOR — INK (neutros fríos, textos y superficies) === */
  --ink-50: #F6F7F9;
  --ink-100: #ECEEF1;
  --ink-200: #D9DCE2;
  --ink-300: #98A1AE;
  --ink-500: #6B7280;
  --ink-700: #2F3742;
  --ink-900: #0F141A;

  /* === COLOR — SURFACES === */
  --bg-color: #F6F7F9;
  --bg-warm: #FBFAF7;
  --bg-clay: #FBF8F3;
  --card-bg: #FFFFFF;

  /* === COLOR — TEXT (aliases legacy) === */
  --text-main: var(--ink-900);
  --text-soft: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-faint: var(--ink-300);
  --border-light: #E5E7EB;
  --border-subtle: rgba(15, 20, 26, 0.06);

  /* === TYPOGRAPHY === */
  --font-main: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-serif: 'Newsreader', Georgia, serif;

  /* Escala modular 1.25 (Major Third) */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.375rem;    /* 22px */
  --text-2xl: 1.75rem;    /* 28px */
  --text-3xl: 2.25rem;    /* 36px */
  --text-4xl: 3rem;       /* 48px */
  --text-5xl: 3.75rem;    /* 60px */
  --text-display: clamp(2.6rem, 5.2vw, 4.6rem);

  /* === SPACING — escala 4px grid === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* === RADII === */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-pill: 999px;

  /* === SHADOWS === */
  --shadow-sm: 0 4px 14px -4px rgba(15, 20, 26, 0.08);
  --shadow-md: 0 18px 40px -16px rgba(15, 20, 26, 0.12);
  --shadow-lg: 0 36px 72px -24px rgba(15, 20, 26, 0.18);
  --shadow-xl: 0 60px 120px -32px rgba(15, 20, 26, 0.24);
  --shadow-glass: 0 30px 60px -28px rgba(15, 20, 26, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --shadow-red: 0 14px 28px -10px rgba(216, 27, 36, 0.4);
  --shadow-clay: 0 18px 40px -16px rgba(154, 117, 74, 0.28);

  /* === GLASS SYSTEM === */
  --c-glass: #bbbbbc;
  --c-light: #fff;
  --c-dark: #000;
  --glass-reflex-dark: 1;
  --glass-reflex-light: 1;
  --glass-saturation: 190%;

  /* === MOTION === */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-anticipate: cubic-bezier(0.68, -0.55, 0.27, 1.55);
  --transition: transform 0.35s var(--ease-soft), background-color 0.35s var(--ease-soft), color 0.35s var(--ease-soft), box-shadow 0.35s var(--ease-soft), border-color 0.35s var(--ease-soft), opacity 0.35s var(--ease-soft);
  --transition-fast: transform 0.2s var(--ease-soft), background-color 0.2s var(--ease-soft), color 0.2s var(--ease-soft), opacity 0.2s var(--ease-soft);
  --transition-slow: transform 0.5s var(--ease-out), background-color 0.5s var(--ease-out), color 0.5s var(--ease-out), opacity 0.5s var(--ease-out);

  /* === FOCUS RING (accesibilidad) === */
  --focus-ring: 0 0 0 3px rgba(216, 27, 36, 0.35), 0 0 0 5px rgba(255, 255, 255, 0.95);
}

/* Accesibilidad: foco visible consistente */
*:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
  /* Base 16px -> 17px: agranda el texto (rem) en todo el sitio, móvil y escritorio */
  font-size: 106.25%;
}

/* ============= SCROLLBARS — clean, consistent, brand-aligned ============= */
/* Firefox + modern browsers */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 20, 26, 0.22) transparent;
}
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 20, 26, 0.18) transparent;
}
/* WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(15, 20, 26, 0.18);
  border-radius: 100px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background-color 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(216, 27, 36, 0.55);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:active {
  background: rgba(216, 27, 36, 0.75);
  background-clip: padding-box;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

/* Native cross-document page transitions (supported browsers) */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 460ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  mix-blend-mode: normal;
}

::view-transition-group(root) {
  background: var(--bg-color);
  isolation: isolate;
}

.navbar {
  view-transition-name: site-nav;
}

::view-transition-group(site-nav) {
  z-index: 1000;
  animation-duration: 460ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(site-nav),
::view-transition-new(site-nav) {
  animation-duration: 460ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  animation-name: pageSlideOut;
}

::view-transition-new(root) {
  animation-name: pageSlideIn;
}

@keyframes pageSlideOut {
  from {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: translateY(-6px) scale(0.996);
    filter: blur(1.5px);
  }
}

@keyframes pageSlideIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(1.004);
    filter: blur(1.5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(site-nav),
  ::view-transition-new(site-nav) {
    animation-duration: 1ms;
  }
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-color);
  color: var(--text-main);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* Desactivamos el "scroll anchoring" del navegador. Cuando una imagen
     lazy arriba del viewport carga y empuja contenido, Chrome reajusta
     scrollY para mantener visualmente el mismo punto — pero ese ajuste
     combinado con ScrollTrigger.refresh() puede tirar la página hacia
     arriba al final del sticky de la silla. Mejor scroll predecible. */
  overflow-anchor: none;
  font-feature-settings: "ss01", "ss02", "kern";
}

/* Performance: skip rendering de secciones lejanas al viewport.
   IMPORTANTE: sólo aplicamos a las que están realmente lejos para evitar saltos
   de altura cuando entran y disparan ScrollTrigger.refresh implícito.
   intrinsic-size más realista para reducir reflows al expandirse.

   SOLO desktop: en iOS Safari móvil, content-visibility:auto causa
   saltos de scroll al hacer "skip" y luego "expandir" el contenido
   (sobre todo si la altura intrínseca es muy distinta a la real). */
@media (min-width: 769px) {
  .branches,
  .follow-us {
    content-visibility: auto;
    contain-intrinsic-size: 1px 1400px;
  }
}

a {
  text-decoration: none;
  color: inherit;
  transition: color 0.35s var(--ease-soft);
}

img,
video {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
}

/* ============= LIQUID GLASS UTILITY ============= */
/*
   Liquid glass technique:
   1. Very low opacity background to let backdrop-filter shine
   2. backdrop-filter with blur + saturate + brightness for depth
   3. Pseudo-element ::before for specular highlight (diagonal sheen)
   4. Pseudo-element ::after for top edge lighting (light bevel)
   5. box-shadow with multiple inset edges for bisel
   6. Subtle border with refraction gradient
*/

.liquid-glass {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(240, 240, 245, 0.75) 100%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 22px 44px -14px rgba(15, 18, 23, 0.32),
    0 6px 14px -6px rgba(15, 18, 23, 0.1),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(255, 255, 255, 0.15),
    inset 0 0 18px rgba(255, 255, 255, 0.2);
  isolation: isolate;
  overflow: hidden;
}

/* Diagonal Sheen / Glare */
.liquid-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.4) 0%,
    transparent 40%,
    transparent 65%,
    rgba(255, 255, 255, 0.25) 100%);
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 0;
}

/* Subtle Top Edge Glow */
.liquid-glass::after {
  content: "";
  position: absolute;
  top: 0;
  left: 6%;
  right: 6%;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, transparent 100%);
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(0.5px);
  z-index: 1;
}

.liquid-glass > * {
  position: relative;
  z-index: 3;
}

/* Glass Card Variation */
.glass-card {
  border-radius: 32px;
  padding: 24px;
}

.glass-card:hover {
  transform: translateY(-8px);
  background: color-mix(in srgb, var(--c-glass) 18%, transparent);
  box-shadow:
    0 40px 80px -20px color-mix(in srgb, var(--c-dark) 20%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--c-light) 15%, transparent),
    inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light) 95%, transparent),
    inset -1.5px 2.5px 0px -2px color-mix(in srgb, var(--c-dark) 25%, transparent);
}

/* Pill variant (small, rounded) */
.glass-pill {
  position: relative;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.25) 100%);
  backdrop-filter: blur(12px) saturate(180%) brightness(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(180%) brightness(1.08);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-pill);
  box-shadow:
    0 12px 26px -10px rgba(15, 20, 26, 0.16),
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.15),
    inset 0 0 14px rgba(255, 255, 255, 0.18);
  isolation: isolate;
  overflow: hidden;
}

.glass-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.35) 0%,
    transparent 40%,
    transparent 65%,
    rgba(255, 255, 255, 0.25) 100%);
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 1;
}

.glass-pill > * {
  position: relative;
  z-index: 2;
}

.glass-dark {
  position: relative;
  background: linear-gradient(135deg, rgba(15, 20, 26, 0.7), rgba(15, 20, 26, 0.4));
  backdrop-filter: blur(12px) saturate(160%) brightness(0.9);
  -webkit-backdrop-filter: blur(12px) saturate(160%) brightness(0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 24px 60px -20px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  color: #FFF;
}

.container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============= TYPOGRAPHY ============= */
h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--text-main);
}

.text-hero {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: var(--space-5);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.text-hero em {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(3rem, 6.4vw, 4.8rem);
  color: var(--primary-red);
  letter-spacing: -0.01em;
  line-height: 1.0;
  margin-top: 0.06em;
}

/* Reusable accent italic — only for VERY important words */
.accent-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "SOFT" 60, "opsz" 144;
  color: var(--primary-red);
  letter-spacing: -0.005em;
}

/* Acento italic inline (Newsreader) — tarjetas y usos pequeños */
h2 em, h3 em, h4 em,
.section-title em,
.hero-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--primary-red);
  letter-spacing: -0.01em;
}

/* El sistema de "título display" (palabra clave en bloque) se define
   al final del archivo para ganar especificidad sobre las reglas
   por-sección heredadas (.b2b-content h2, .branches-header h2, etc.). */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--primary-red);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary-red);
  flex-shrink: 0;
}

/* Variante para fondos oscuros (hero sobre imagen) */
.eyebrow-on-image {
  color: rgba(255, 255, 255, 0.92);
}

.eyebrow-on-image::before {
  background: #ff4d57;
  box-shadow: 0 0 0 3px rgba(255, 77, 87, 0.25);
}

p {
  font-family: var(--font-main);
  color: var(--text-soft);
  line-height: 1.65;
  letter-spacing: -0.005em;
}

/* ============= BUTTONS ============= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.94rem;
  cursor: pointer;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), background 0.3s ease;
  border: none;
  font-family: var(--font-main);
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary-red), #ad131a);
  color: #FFF;
  box-shadow: var(--shadow-red);
}

.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease-out);
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 40px -10px rgba(216, 27, 36, 0.5);
}

.btn-primary:hover::after {
  transform: translateX(120%);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  color: var(--text-main);
  border: 1px solid rgba(15, 20, 26, 0.08);
  box-shadow: 0 12px 24px -10px rgba(15, 20, 26, 0.08);
}

.btn-secondary:hover {
  background: #FFF;
  transform: translateY(-3px);
  box-shadow: 0 18px 32px -12px rgba(15, 20, 26, 0.16);
}

.btn-ghost {
  background: transparent;
  color: var(--text-main);
  border: 1px solid rgba(15, 20, 26, 0.12);
}

.btn-ghost:hover {
  background: var(--text-main);
  color: #FFF;
  border-color: var(--text-main);
}

.btn-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--primary-red);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.btn-arrow svg {
  width: 16px;
  height: 16px;
  transition: transform 0.4s var(--ease-out);
}

.btn-arrow:hover svg {
  transform: translateX(6px);
}

/* ============= NAVBAR ============= */
.navbar {
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
}

.navbar > .container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 1;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0;
}

.logo span {
  color: var(--primary-red);
}

.logo-img {
  width: auto;
  height: 58px;
  max-width: 180px;
  object-fit: contain;
}

.logo-text {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.5s ease;
}

.nav-links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 32px;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.nav-links a {
  position: relative;
  transition: color 0.4s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--text-main);
}

.nav-links a.active::after {
  display: none;
}

.nav-icons {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-main);
  transition: color 0.4s ease;
}

.icon-btn svg {
  width: 20px;
  height: 20px;
}

/* ============= NAVBAR — INTERIOR PAGES ============= */
.navbar-inner {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 40px), 1240px);
  min-height: 64px;
  padding: 10px 14px 10px 18px;
  display: grid;
  grid-template-columns: minmax(180px, 0.75fr) auto minmax(190px, 0.75fr);
  gap: 18px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px) saturate(190%) brightness(1.06);
  -webkit-backdrop-filter: blur(14px) saturate(190%) brightness(1.06);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 100px;
  box-shadow:
    0 20px 44px -16px rgba(15, 20, 26, 0.18),
    0 6px 14px -6px rgba(15, 20, 26, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12);
  z-index: 100;
  isolation: isolate;
  overflow: hidden;
}

.navbar-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.32) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.navbar-inner > * {
  position: relative;
  z-index: 2;
}

.navbar-inner .nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-main);
}

.navbar-inner .brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--primary-red);
  color: #FFF;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(216, 27, 36, 0.25);
  overflow: hidden;
}

.brand-mark img {
  display: block;
  width: 66%;
  height: 66%;
  object-fit: contain;
  object-position: center;
  transform: translate(1px, 1px);
  transition: transform 0.4s var(--ease-out);
}

.brand-mark:hover img {
  transform: translate(1px, 1px) scale(1.08);
}

.navbar-inner .brand-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.05;
}

.navbar-inner .brand-copy strong {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 900;
}

.navbar-inner .brand-copy small {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.navbar-inner .nav-links {
  justify-content: center;
  gap: clamp(16px, 2vw, 30px);
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.88rem;
  font-weight: 600;
}

.navbar-inner .nav-links a {
  color: rgba(15, 20, 26, 0.62);
}

.navbar-inner .nav-links a:hover,
.navbar-inner .nav-links a.active {
  color: var(--primary-red);
}

.navbar-inner .nav-icons {
  justify-content: flex-end;
  gap: 10px;
}

.navbar-inner .icon-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(15, 20, 26, 0.06);
  transition: all 0.3s ease;
}

.navbar-inner .icon-btn:hover {
  background: #FFF;
  transform: translateY(-1px);
}

.navbar-inner .btn-quote {
  background: linear-gradient(135deg, var(--primary-red), #ad131a);
  color: #FFF;
  padding: 10px 18px;
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 10px 24px rgba(216, 27, 36, 0.28);
  transition: transform 0.3s var(--ease-out);
}

.navbar-inner .btn-quote:hover {
  transform: translateY(-1px);
}

/* ============= NAVBAR — HOME STYLE SHARED ============= */
.navbar-home {
  position: fixed;
  top: 18px;
  left: 50%;
  width: min(calc(100% - 48px), 1240px);
  min-height: 66px;
  padding: 10px 14px 10px 18px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
  gap: 18px;
  background: rgba(255, 255, 255, 0.38);
  /* El backdrop-filter NO va aquí: tenerlo en el mismo elemento que el
     border-radius causaba que las esquinas parpadearan cuadradas 1 frame
     al cargar (bug Chromium/Brave de backdrop-filter+border-radius). El
     blur vive ahora en ::before (capa interna) y este contenedor lo recorta
     redondo de forma ESTABLE con overflow:hidden. Tampoco isolation:isolate
     aquí, porque convertiría al navbar en backdrop-root y ::before dejaría
     de "ver" la página para difuminarla. */
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 100px;
  box-shadow:
    0 22px 46px -16px rgba(15, 18, 23, 0.2),
    0 6px 14px -6px rgba(15, 18, 23, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

/* Capa de blur + specular highlight. El blur del navbar vive AQUÍ; el
   contenedor (overflow:hidden + border-radius) lo recorta redondo estable.
   SIN border-radius propio: el redondeo lo hace el padre, no este pseudo. */
.navbar-home::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(12px) saturate(200%) brightness(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(200%) brightness(1.08);
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.1) 45%,
    transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* Soft chromatic glow — premium iridescent feel without seams */
.navbar-home::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 180% at 50% -40%,
    rgba(255, 255, 255, 0.18) 0%,
    transparent 60%);
  pointer-events: none;
  z-index: 0;
}

@keyframes navbarChroma {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .navbar-home::after { animation: none; }
}

/* Scrolled (solo desktop): SOLO subimos un poco la opacidad del fondo
   para legibilidad cuando pasa contenido detrás. Mantenemos
   width/padding/top/min-height IDÉNTICOS al estado inicial para que el
   cambio sea casi imperceptible. En móvil (<=900px) no aplica este
   override — el navbar es idéntico al hacer scroll. */
@media (min-width: 901px) {
  .navbar-home.scrolled {
    background: rgba(255, 255, 255, 0.62);
    box-shadow:
      0 22px 46px -16px rgba(15, 18, 23, 0.22),
      0 6px 14px -6px rgba(15, 18, 23, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.8),
      inset 0 -1px 0 rgba(255, 255, 255, 0.18);
  }
}

.navbar-home > * {
  position: relative;
  z-index: 2;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--text-main);
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--primary-red);
  color: #FFF;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: 0 10px 24px rgba(216, 27, 36, 0.25);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.05;
}

.brand-copy strong {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0;
}

.brand-copy small {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.navbar-home .nav-links {
  position: relative;
  justify-content: center;
  gap: clamp(4px, 0.9vw, 12px);
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.88rem;
  font-weight: 600;
  isolation: isolate;
  padding: 4px;
  border-radius: 999px;
}

.navbar-home .nav-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  color: rgba(17, 24, 39, 0.62);
  z-index: 2;
}

.navbar-home .nav-links a:hover,
.navbar-home .nav-links a.active {
  color: var(--primary-red);
}

.navbar-home .nav-active-liquid {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  display: block;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transform-origin: center;
  /* Sin backdrop-filter: era un blur ANIDADO dentro del blur del navbar
     (caro en Safari y disparador de repaints en las esquinas del navbar).
     El pill se lee frosted con blanco translúcido + los inset highlights. */
  background: rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.38),
    inset 2px 2px 0 -1px rgba(255, 255, 255, 0.75),
    inset -2px -5px 8px -6px rgba(18, 24, 38, 0.38),
    inset -1px 2px 5px -3px rgba(18, 24, 38, 0.22),
    0 8px 18px -12px rgba(18, 24, 38, 0.28);
  transition:
    transform 0.42s var(--ease-out),
    width 0.42s var(--ease-out),
    height 0.42s var(--ease-out),
    opacity 0.25s ease;
}

.navbar-home .nav-icons {
  justify-content: flex-end;
  gap: 10px;
  min-width: 220px;
}

.navbar-home .icon-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.46);
  border: 1px solid rgba(17, 24, 39, 0.08);
  transition: all 0.3s ease;
}

.navbar-home .icon-btn:hover {
  background: #FFF;
  transform: translateY(-1px);
}

.navbar-home .btn-quote {
  background: linear-gradient(135deg, var(--primary-red), #ad131a);
  color: #FFF;
  padding: 10px 18px;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 700;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 10px 24px rgba(216, 27, 36, 0.26);
}

.navbar-home .btn-quote:hover {
  transform: translateY(-1px);
}

/* .navbar.scrolled — el navbar ya es position:fixed siempre (ver .navbar-home),
   así que acá no cambiamos posición ni tamaño. Solo asegura z-index alto. */
.navbar.scrolled {
  z-index: 9999;
}

/* ============= PAGE TRANSITION ============= */
.page-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #FFF;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.page-transition.active {
  opacity: 1;
  pointer-events: all;
}

/* ============= SECTION HEADER ============= */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
  padding: 0 40px;
  gap: 24px;
}

.header-content h2 {
  font-size: clamp(2rem, 3.4vw, 3rem);
  margin-bottom: 12px;
  letter-spacing: -0.04em;
}

.header-content p {
  font-size: 1.05rem;
  max-width: 500px;
  color: var(--text-muted);
}

/* Eliminado: .badge-accent — usar .eyebrow */

.btn-outline {
  padding: 12px 24px;
  border: 1px solid var(--border-light);
  border-radius: 100px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-outline:hover {
  background: var(--text-main);
  border-color: var(--text-main);
  color: #FFF;
  transform: translateY(-2px);
}

/* ============= PRODUCT SECTIONS ============= */
.products-section {
  width: 100%;
  max-width: 1500px;
  margin: 80px auto;
  padding: 0;
  position: relative;
}

/* Best Sellers — pinned horizontal */
.best-sellers {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(80px, 10vh, 110px);
  padding-bottom: clamp(40px, 6vh, 70px);
  box-sizing: border-box;
  border-radius: 0;
  overflow: hidden;
  color: #FFF;
}

/* Estados de carga / vacío del grid dinámico */
.best-sellers-loading,
.best-sellers-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 24px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

#top-ventas-grid[data-loading="true"] {
  min-height: 240px;
}

/* Eyebrow blanco para .best-sellers (fondo rojo/oscuro) */
.best-sellers .eyebrow {
  color: rgba(255, 255, 255, 0.92);
}
.best-sellers .eyebrow::before {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

.best-sellers .section-header {
  margin-bottom: 28px;
}

/* Scroll hint — solo visible en desktop con pinning horizontal */
.bs-scroll-hint {
  position: relative;
  z-index: 5;
  max-width: 1500px;
  margin: 0 auto 18px;
  padding: 0 40px;
  display: none;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.9;
  pointer-events: none;
}

@media (min-width: 901px) {
  .bs-scroll-hint {
    display: inline-flex;
  }
}

.bs-scroll-hint-arrow {
  width: 18px;
  height: 1.5px;
  background: transparent;
  position: relative;
  overflow: visible;
  display: inline-flex;
  align-items: center;
}

.bs-scroll-hint-arrow svg {
  position: absolute;
  right: -2px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.85);
  animation: bsScrollHintArrow 1.8s ease-in-out infinite;
}

@keyframes bsScrollHintArrow {
  0%, 100% { transform: translate(0, -50%); opacity: 0.7; }
  50% { transform: translate(6px, -50%); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .bs-scroll-hint-arrow svg { animation: none; }
}

.best-sellers .header-content h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin-bottom: 8px;
}

.best-sellers .header-content p {
  font-size: 1rem;
}

.video-bg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.section-video-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7) contrast(1.1);
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.18) 50%, rgba(0, 0, 0, 0.55));
}

/* ============= SILK BACKGROUND — reemplaza video en .best-sellers ============= */
.silk-bg-container {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  background:
    linear-gradient(135deg, #4a080d 0%, #7a0c14 45%, #a8131c 100%);
  isolation: isolate;
}

.silk-layer {
  position: absolute;
  inset: -20%;
  will-change: transform;
  filter: blur(60px);
  mix-blend-mode: screen;
  transform: translate3d(0, 0, 0);
}

.silk-layer-1 {
  background:
    radial-gradient(circle at 30% 40%, rgba(216, 27, 36, 0.85) 0%, rgba(216, 27, 36, 0) 45%),
    radial-gradient(circle at 70% 60%, rgba(255, 60, 70, 0.55) 0%, rgba(255, 60, 70, 0) 50%);
  /* Animación retirada: el infinite-alternate sobre gradientes full-screen
     traba Safari (compositor a tope cada frame). El gradiente estático se
     ve casi idéntico y libera CPU/GPU. */
}

.silk-layer-2 {
  background:
    radial-gradient(circle at 80% 30%, rgba(255, 138, 0, 0.32) 0%, rgba(255, 138, 0, 0) 40%),
    radial-gradient(circle at 20% 75%, rgba(255, 100, 50, 0.28) 0%, rgba(255, 100, 50, 0) 45%);
}

.silk-layer-3 {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 30%, rgba(40, 0, 4, 0.55) 100%),
    radial-gradient(circle at 10% 20%, rgba(120, 8, 14, 0.6) 0%, rgba(120, 8, 14, 0) 35%);
  mix-blend-mode: multiply;
}

.silk-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}

@keyframes silkFlow1 {
  0%   { transform: translate3d(-4%, -3%, 0) scale(1.05); }
  50%  { transform: translate3d(3%, 2%, 0) scale(1.12); }
  100% { transform: translate3d(-2%, 4%, 0) scale(1.05); }
}

@keyframes silkFlow2 {
  0%   { transform: translate3d(3%, 2%, 0) scale(1.1); }
  50%  { transform: translate3d(-3%, -4%, 0) scale(1.18); }
  100% { transform: translate3d(2%, -2%, 0) scale(1.1); }
}

@keyframes silkFlow3 {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1.05); }
  50%  { transform: translate3d(-2%, 1%, 0) rotate(2deg) scale(1.08); }
  100% { transform: translate3d(2%, -1%, 0) rotate(-2deg) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .silk-layer { animation: none; }
}

.best-sellers .section-header,
.best-sellers .products-grid {
  position: relative;
  z-index: 2;
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 40px;
}

.best-sellers .section-header,
.best-sellers .product-card,
.horizontal-grid {
}

.best-sellers .product-img img {
}

@media (prefers-reduced-motion: reduce) {
  .product-card,
  .product-img img,
  .btn-cart {
    transition: none !important;
  }
}

.best-sellers .header-content h2 {
  color: #FFF;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.best-sellers .header-content h2 .animated-letter {
  display: inline-block;
  transform-origin: center bottom;
}

.best-sellers .header-content h2 .animated-space {
  display: inline;
  white-space: pre;
}

.best-sellers .header-content p {
  color: rgba(255, 255, 255, 0.85);
}

.best-sellers .btn-outline {
  color: #FFF;
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
}

.best-sellers .btn-outline:hover {
  background: #FFF;
  color: #000;
  border-color: #FFF;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 32px;
  padding: 0 40px;
}

.horizontal-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  width: fit-content;
  gap: 26px;
  padding: 14px 44px 26px;
}

.horizontal-grid .product-card {
  flex-shrink: 0;
  width: 288px;
}

.horizontal-grid .product-img {
  aspect-ratio: 1 / 0.92;
}

/* Product Card — Liquid Glass */
.product-card {
  position: relative;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 32px;
  padding: 14px;
  transition:
    transform 0.4s var(--ease-out),
    box-shadow 0.4s var(--ease-out),
    background 0.35s var(--ease-out),
    border-color 0.35s var(--ease-out);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 24px 48px -16px rgba(15, 20, 26, 0.10),
    0 2px 6px rgba(15, 20, 26, 0.04);
  transform: translateZ(0);
  backface-visibility: hidden;
}

.best-sellers .product-card {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    0 30px 70px -22px rgba(0, 0, 0, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.product-card:hover {
  transform: translateY(-12px);
  background: #ffffff;
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow:
    0 60px 110px -28px rgba(15, 20, 26, 0.28),
    0 8px 20px -8px rgba(15, 20, 26, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.4);
}

.best-sellers .product-card:hover {
  box-shadow:
    0 70px 130px -30px rgba(0, 0, 0, 0.55),
    0 10px 30px -10px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Eliminado: .product-badge (pill rojo con shine animation) — usamos eyebrow editorial */

.product-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 14px;
  background: #e8e8e8;
  position: relative;
  isolation: isolate;
}

.product-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.18));
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
  pointer-events: none;
  z-index: 1;
}

.product-card:hover .product-img::after {
  opacity: 1;
}

.product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s var(--ease-out);
}

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

.product-info {
  padding: 6px 10px 8px;
}

.product-info h3 {
  font-size: 1.18rem;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #1a1a1a;
}

.product-info p {
  font-size: 0.88rem;
  color: #707783;
  margin-bottom: 14px;
  line-height: 1.5;
}

.product-footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #2F3742;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.price-label::before {
  content: "•";
  color: var(--primary-red);
  font-size: 1.2rem;
  line-height: 0;
}

.btn-cart {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  color: #000;
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    transform 0.55s var(--ease-out),
    background 0.4s var(--ease-out),
    color 0.4s var(--ease-out),
    box-shadow 0.55s var(--ease-out);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.btn-cart svg {
  width: 18px;
  height: 18px;
  transition: transform 0.55s var(--ease-out);
}

.price-label {
  font-size: 0.86rem;
}

.btn-cart:hover {
  background: var(--primary-red);
  color: #fff;
  transform: scale(1.1);
  box-shadow:
    0 18px 36px -8px rgba(216, 27, 36, 0.45),
    0 4px 12px rgba(216, 27, 36, 0.25);
}

.btn-cart:hover svg {
  transform: translateX(3px);
}

/* === "Lo más vendido": compactación −20% en desktop (≥901px) ===
   Tarjetas y header más pequeños para que las tarjetas no queden
   cortadas dentro del viewport pineado. El carrusel móvil (≤900px)
   mantiene sus propios tamaños sin cambios. */
@media (min-width: 901px) {
  .best-sellers {
    padding-top: clamp(60px, 8vh, 88px);
    padding-bottom: clamp(28px, 4.5vh, 56px);
  }
  .best-sellers .section-header {
    margin-bottom: 20px;
  }
  .best-sellers .header-content h2 {
    font-size: clamp(1.45rem, 2.4vw, 2.1rem);
  }
  .best-sellers .header-content p {
    font-size: 0.9rem;
  }
  .best-sellers .product-card {
    padding: 12px;
    border-radius: 26px;
  }
  .best-sellers .product-img {
    border-radius: 20px;
    margin-bottom: 11px;
  }
  .best-sellers .product-info {
    padding: 4px 8px 6px;
  }
  .best-sellers .product-info h3 {
    font-size: 1.04rem;
  }
  .best-sellers .product-info p {
    font-size: 0.82rem;
    margin-bottom: 10px;
  }
  .best-sellers .price-label {
    font-size: 0.8rem;
  }
  .best-sellers .btn-cart {
    width: 38px;
    height: 38px;
  }
  .best-sellers .btn-cart svg {
    width: 16px;
    height: 16px;
  }
}

/* ============= FOOTER ============= */
.footer {
  background-color: var(--card-bg);
  padding: 64px 40px 40px;
  margin-top: 0;
  border-top: none;
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}

.footer-links h4 {
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.footer-links ul {
  list-style: none;
}

.footer-links li {
  margin-bottom: 12px;
}

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

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

.footer-bottom {
  text-align: center;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
  color: var(--text-muted);
  font-size: 0.85rem;
  max-width: 1500px;
  margin: 0 auto;
}

/* ============= REVEAL ANIMATIONS ============= */
.gs-reveal,
.gs-fade {
}

.split-line {
  display: block;
  overflow: hidden;
}

.split-line > span {
  display: inline-block;
}

/* ============= RESPONSIVE ============= */
@media (max-width: 1500px) {
  .navbar-home {
    width: min(calc(100% - 40px), 1180px);
    min-height: 60px;
    padding: 8px 12px 8px 14px;
    grid-template-columns: minmax(190px, 0.9fr) auto minmax(190px, 0.9fr);
    gap: 10px;
  }

  .navbar-home .brand-mark {
    width: 38px;
    height: 38px;
  }

  .navbar-home .brand-copy strong {
    font-size: 0.92rem;
    white-space: nowrap;
  }

  .navbar-home .brand-copy small {
    font-size: 0.62rem;
    white-space: nowrap;
  }

  .navbar-home .nav-links {
    gap: 2px;
    font-size: 0.82rem;
  }

  .navbar-home .nav-links a {
    min-height: 34px;
    padding: 0 10px;
  }

  .navbar-home .nav-icons {
    min-width: 190px;
    gap: 7px;
  }

  .navbar-home .btn-quote {
    padding: 9px 15px;
    font-size: 0.8rem;
    line-height: 1;
    white-space: nowrap;
  }

  .navbar-home .icon-btn {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
  }
}

@media (max-width: 1220px) {
  .navbar-home {
    width: min(calc(100% - 32px), 1080px);
    grid-template-columns: minmax(170px, 0.85fr) auto minmax(170px, 0.85fr);
  }

  .navbar-home .nav-links {
    font-size: 0.78rem;
  }

  .navbar-home .nav-links a {
    padding: 0 8px;
  }

  .navbar-home .nav-icons {
    min-width: 168px;
  }

  .navbar-home .btn-quote {
    padding: 9px 13px;
  }

  .navbar-home .icon-btn:last-child {
    display: none;
  }
}

@media (max-width: 1100px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  /* Los nav-links se mantienen visibles aquí. Solo se ocultan en
     <900px (donde aparece la hamburguesa). Antes desaparecían en
     1024px dejando un navbar tipo móvil sobre layout desktop. */
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .navbar-inner,
  .navbar-home {
    grid-template-columns: 1fr auto;
  }
  .navbar-inner .nav-links,
  .navbar-home .nav-links {
    display: none;
  }
  /* En móvil el navbar pasa a fixed para que SIEMPRE esté tocable.
     Antes era position:absolute y al cargar la animación de entrada
     del hero podía solaparlo, dando la sensación de que "no responde
     al tocar al cargar". Fixed garantiza que esté arriba siempre y
     que el usuario pueda abrir el menú desde cualquier scroll. */
  .navbar-home {
    position: fixed !important;
    top: 12px;
    z-index: 1000;
  }
  /* En móvil el navbar es CERO cambio al hacer scroll. El override de
     .navbar-home.scrolled está envuelto en @media (min-width: 901px),
     así que acá no hace falta hacer nada — el navbar se ve idéntico al
     hacer scroll. */
  /* Cuando el drawer está abierto, ocultamos el navbar para que su
     backdrop-filter no muestre el rojo/contenido del menú detrás.
     El drawer ya tiene su propio header con logo + botón X. */
  body.menu-open .navbar-home {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  /* Compensamos el hero-container para que el contenido no quede
     pisado por el navbar fixed. */
  .hero-container {
    padding-top: 96px;
  }
  /* "Lo más vendido": en móvil/tablet es un carrusel horizontal deslizable
     (en desktop ≥901px el desplazamiento horizontal lo maneja el pin de GSAP). */
  .best-sellers .horizontal-grid {
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;
    width: 100%;
    max-width: none;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 24px;
    gap: 16px;
    padding: 14px 24px 30px;
    scrollbar-width: none;
  }
  .best-sellers .horizontal-grid::-webkit-scrollbar { display: none; }
  .best-sellers .horizontal-grid .product-card {
    flex: 0 0 auto;
    width: clamp(248px, 76vw, 320px);
    scroll-snap-align: start;
  }
  /* Pista de deslizar también en móvil/tablet (en desktop ya se muestra) */
  .bs-scroll-hint {
    display: inline-flex;
    align-self: flex-start;
    margin: 0 0 12px;
    padding: 0 24px;
    font-size: 0.66rem;
  }
  /* En móvil: solo texto + flecha, sin la barra/línea de la par */
  .bs-scroll-hint-arrow {
    width: 16px;
    background: transparent;
  }
}

@media (max-width: 768px) {
  /* En móvil el navbar va 100% opaco para que NO se note el contenido
     que pasa por detrás al hacer scroll. Sin backdrop-filter (caro en
     Safari móvil). Aplica a TODAS las páginas (home + interiores). */
  .navbar-home,
  .navbar-inner {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .footer-top {
    grid-template-columns: 1fr;
  }
  .navbar {
    padding: 16px 20px;
  }
  .logo-img {
    height: 48px;
    max-width: 150px;
  }
  .nav-icons {
    gap: 12px;
  }
  .products-section {
    padding: 0 24px;
    margin: 60px auto;
  }
  .best-sellers {
    min-height: auto;
    padding: 96px 0 60px;
  }
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 0 24px;
  }
  .header-content h2 {
    font-size: 2.1rem;
  }
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding: 0 16px;
  }
  .best-sellers .horizontal-grid {
    gap: 14px;
    padding: 12px 16px 28px;
    scroll-padding-left: 16px;
  }
  .best-sellers .horizontal-grid .product-card {
    width: clamp(240px, 82vw, 300px);
  }
  .bs-scroll-hint { padding: 0 16px; }
  /* Product card compacto en grid de 2 columnas (estilo Amazon) */
  .product-card {
    padding: 8px;
    border-radius: 22px;
  }
  .product-img {
    border-radius: 16px;
    margin-bottom: 10px;
  }
  .product-info {
    padding: 4px 6px 6px;
  }
  .product-info h3 {
    font-size: 0.95rem;
    margin-bottom: 2px;
    line-height: 1.25;
  }
  .product-info p {
    font-size: 0.78rem;
    margin-bottom: 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .price-label {
    font-size: 0.82rem;
  }
  .btn-cart {
    width: 34px;
    height: 34px;
  }
  .btn-cart svg {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 600px) {
  .navbar-inner,
  .navbar-home {
    min-height: 58px;
    padding: 8px 10px 8px 12px;
    width: calc(100% - 24px);
  }
  .navbar-inner .brand-mark,
  .navbar-home .brand-mark {
    width: 38px;
    height: 38px;
  }
  .navbar-inner .brand-copy small,
  .navbar-home .brand-copy small {
    display: none;
  }
  .navbar-inner .brand-copy strong,
  .navbar-home .brand-copy strong {
    font-size: 0.92rem;
  }
  .navbar-inner .btn-quote,
  .navbar-home .btn-quote {
    font-size: 0;
    min-width: 86px;
    padding: 9px 12px;
    justify-content: center;
  }
  .navbar-inner .btn-quote::before,
  .navbar-home .btn-quote::before {
    content: "Cotizar";
    font-size: 0.78rem;
  }
  .navbar-inner .icon-btn:last-child,
  .navbar-home .icon-btn:last-child {
    display: none;
  }
}

.footer-logo {
  width: 90px;
  height: auto;
  margin-bottom: 20px;
  display: block;
}

/* ============= VIDEO BACKGROUND UTILITY ============= */
.section-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
}

.video-overlay-dark {
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 19, 0.45);
  z-index: 2;
  pointer-events: none;
}

/* ============= LIVING GRADIENT ANIMATION ============= */
@keyframes ambientPulse {
  0%, 100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

.living-gradient::before {
  /* ambientPulse retirada: pulso continuo sobre full-section gradient era
     visualmente sutil pero caro. Sin la animación, el efecto base se ve igual. */
}

/* ============================================================
   ============== LIQUID GLASS OVERLAYS ======================
   Search · Profile · Cart Drawer · Toast
   ============================================================ */

/* Easing tokens — Apple-style buttery curves */
:root {
  --mr-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --mr-ease-in: cubic-bezier(0.5, 0, 0.75, 0);
}

.mr-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 0.55s;
}
.mr-overlay.is-open {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s linear 0s;
}

.mr-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, rgba(15, 20, 26, 0.55) 0%, rgba(15, 20, 26, 0.7) 60%, rgba(15, 20, 26, 0.82) 100%);
  backdrop-filter: blur(12px) saturate(105%);
  -webkit-backdrop-filter: blur(12px) saturate(105%);
  opacity: 0;
  transition: opacity 0.28s var(--mr-ease-in);
}
.mr-overlay.is-open .mr-overlay-backdrop {
  opacity: 1;
  transition: opacity 0.42s var(--mr-ease-out);
}

/* ---- Panel transitions — Apple-style smooth ---- */
.mr-search-panel,
.mr-profile-panel {
  opacity: 0;
  transform: translateX(-50%) translateY(10px) scale(0.96);
  transition:
    opacity 0.2s var(--mr-ease-in),
    transform 0.22s var(--mr-ease-in);
}
.mr-profile-panel {
  transform: translate(-50%, calc(-50% + 10px)) scale(0.96);
}
.mr-overlay.is-open .mr-search-panel {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  transition:
    opacity 0.38s var(--mr-ease-out),
    transform 0.45s var(--mr-ease-out);
}
.mr-overlay.is-open .mr-profile-panel {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition:
    opacity 0.38s var(--mr-ease-out),
    transform 0.45s var(--mr-ease-out);
}

.mr-cart-panel {
  transform: translateX(100%);
  transition: transform 0.28s var(--mr-ease-in);
}
.mr-overlay.is-open .mr-cart-panel {
  transform: translateX(0);
  transition: transform 0.52s var(--mr-ease-out);
}

/* ---- Decorative shine + edge (HIDDEN — were causing red bleed/edges) ---- */
.mr-shine,
.mr-edge { display: none; }

.mr-cart-item--leaving {
  animation: mrItemLeave 0.32s cubic-bezier(0.55, 0, 0.55, 0.2) forwards !important;
  pointer-events: none;
}
@keyframes mrItemLeave {
  to { opacity: 0; transform: translateX(-30px); max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; border-width: 0; }
}

/* ---- noise overlay shared on glass panels ---- */
.mr-search-panel::after,
.mr-profile-panel::after,
.mr-cart-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("../assets/noise.svg");
  background-size: 220px;
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

/* ---- editorial italic accent (Newsreader) ---- */
.mr-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  color: var(--primary-red);
  letter-spacing: -0.01em;
}

/* ---- top hairline edge / luminous border ---- */
.mr-edge {
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 27, 36, 0.55), transparent);
  pointer-events: none;
  z-index: 4;
  border-radius: inherit;
}
.mr-cart-panel .mr-edge {
  top: 14%;
  bottom: 14%;
  left: 0;
  width: 1px;
  height: auto;
  background: linear-gradient(180deg, transparent, rgba(216, 27, 36, 0.5), transparent);
}

/* ---- shared eyebrow ---- */
.mr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-red);
}

/* =================== SEARCH =================== */
.mr-search-panel {
  position: absolute;
  top: 92px;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 40px), 720px);
  max-height: calc(100vh - 130px);
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.55) 100%);
  backdrop-filter: blur(12px) saturate(190%) brightness(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(190%) brightness(1.05);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 40px 80px -30px rgba(15, 20, 26, 0.35),
    0 16px 32px -12px rgba(15, 20, 26, 0.18),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 40px rgba(255, 255, 255, 0.22);
  isolation: isolate;
  overflow: hidden;
}

.mr-search-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.5) 0%,
    transparent 35%,
    transparent 65%,
    rgba(255, 255, 255, 0.3) 100%);
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}

.mr-search-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 16px 20px 24px;
  border-bottom: 1px solid rgba(15, 20, 26, 0.06);
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, transparent 100%);
}

.mr-search-bar-icon {
  width: 22px;
  height: 22px;
  color: var(--primary-red);
  flex-shrink: 0;
  transition: transform 0.5s var(--mr-ease-spring);
}
.mr-search-panel:focus-within .mr-search-bar-icon {
  transform: scale(1.1) rotate(-8deg);
}

.mr-search-input {
  flex: 1;
  font-family: var(--font-main);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text-main);
  background: transparent;
  border: none;
  outline: none;
  /* Padding generoso y border-radius para que el focus ring rojo global
     (--focus-ring) respire alrededor del texto en lugar de tocarlo. */
  padding: 8px 14px;
  border-radius: 100px;
  letter-spacing: -0.01em;
  min-width: 0;
}
.mr-search-input::placeholder { color: var(--text-faint); }

.mr-search-clear {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(15, 20, 26, 0.06);
  border: none;
  color: var(--text-soft);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.22s var(--ease-out);
}
.mr-search-clear:hover { background: rgba(15, 20, 26, 0.12); transform: rotate(90deg); }

.mr-search-close {
  background: rgba(15, 20, 26, 0.06);
  border: 1px solid rgba(15, 20, 26, 0.06);
  padding: 7px 12px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.22s var(--ease-out);
}
.mr-search-close .kbd {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-soft);
}
.mr-search-close:hover { background: rgba(15, 20, 26, 0.1); }

.mr-search-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px 22px;
  position: relative;
  z-index: 2;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 20, 26, 0.2) transparent;
}
.mr-search-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.mr-search-scroll::-webkit-scrollbar-thumb {
  background: rgba(15, 20, 26, 0.18);
  border-radius: 100px;
  border: 1px solid transparent;
  background-clip: padding-box;
  transition: background-color 0.2s ease;
}
.mr-search-scroll::-webkit-scrollbar-thumb:hover { background: rgba(216, 27, 36, 0.55); background-clip: padding-box; }

.mr-search-section { margin-bottom: 22px; }
.mr-search-section:last-child { margin-bottom: 0; }

.mr-search-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.mr-search-section-header h4 {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.mr-results-count {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-faint);
  letter-spacing: 0.04em;
}

.mr-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Búsquedas recientes: scroll horizontal en lugar de wrap.
   - Si un chip queda muy largo (typo, frase larga) no rompe el layout vertical.
   - Truncado con ellipsis + max-width para que cada chip sea predecible.
   - scroll-snap para que el flick se sienta natural en móvil.
   - mask-image en el borde derecho indica que hay más contenido (sin scrollbar). */
#mrRecentChips {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
  margin-right: -16px;
  padding-right: 16px;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
}
#mrRecentChips::-webkit-scrollbar { display: none; }
#mrRecentChips .mr-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
#mrRecentChips .mr-chip svg {
  flex-shrink: 0;
}
.mr-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 100px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.4) 100%);
  border: 1px solid rgba(15, 20, 26, 0.08);
  color: var(--text-soft);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: var(--font-main);
  cursor: pointer;
  transition: transform 0.45s var(--mr-ease-spring), background 0.4s var(--mr-ease-glide), color 0.4s var(--mr-ease-glide), box-shadow 0.4s var(--mr-ease-glide), border-color 0.4s var(--mr-ease-glide);
  animation: mrChipIn 0.6s var(--mr-ease-spring) backwards;
  animation-delay: calc(var(--i, 0) * 50ms + 0.25s);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.mr-chip svg { opacity: 0.55; transition: opacity 0.3s; }
.mr-chip:hover {
  background: linear-gradient(135deg, var(--primary-red), #ad131a);
  border-color: var(--primary-red);
  color: #FFF;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 14px 26px -10px rgba(216, 27, 36, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.mr-chip:hover svg { opacity: 1; }
.mr-chip:active { transform: translateY(0) scale(0.97); }

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

.mr-text-btn {
  background: none;
  border: none;
  color: var(--primary-red);
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
  font-family: var(--font-main);
  padding: 4px 6px;
}
.mr-text-btn:hover { text-decoration: underline; }
.mr-text-btn-danger { color: var(--text-muted); }
.mr-text-btn-danger:hover { color: var(--primary-red); }

.mr-search-results {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.mr-result-card {
  display: grid;
  grid-template-columns: 68px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(15, 20, 26, 0.06);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition:
    transform 0.5s var(--mr-ease-spring),
    background 0.4s var(--mr-ease-glide),
    border-color 0.4s var(--mr-ease-glide),
    box-shadow 0.5s var(--mr-ease-glide);
  animation: mrResultIn 0.7s var(--mr-ease-spring) backwards;
  animation-delay: calc(var(--i, 0) * 65ms + 0.32s);
  position: relative;
  overflow: hidden;
}
.mr-result-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.32s var(--ease-out);
  pointer-events: none;
}
.mr-result-card:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(216, 27, 36, 0.18);
  transform: translateY(-1px);
  box-shadow: 0 14px 32px -16px rgba(15, 20, 26, 0.25);
}
.mr-result-card:hover::before { opacity: 1; }

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

.mr-result-img {
  width: 68px;
  height: 68px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-color);
  box-shadow: inset 0 0 0 1px rgba(15, 20, 26, 0.06);
  isolation: isolate;
}
.mr-result-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}
.mr-result-card:hover .mr-result-img img { transform: scale(1.08); }

.mr-result-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mr-result-cat {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primary-red);
}
.mr-result-info strong {
  font-family: var(--font-heading);
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mr-result-action {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 2px;
}
.mr-result-action em {
  font-style: normal;
  color: var(--primary-red);
  font-weight: 800;
  transition: transform 0.32s var(--ease-out);
  display: inline-block;
}
.mr-result-card:hover .mr-result-action em { transform: translateX(4px); }

.mr-result-add {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-red), #ad131a);
  color: #FFF;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 10px 22px -8px rgba(216, 27, 36, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition:
    transform 0.5s var(--mr-ease-spring),
    box-shadow 0.4s var(--mr-ease-glide);
  position: relative;
  z-index: 2;
}
.mr-result-add:hover {
  transform: scale(1.12) rotate(90deg);
  box-shadow: 0 14px 28px -8px rgba(216, 27, 36, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.mr-result-add:active { transform: scale(0.95) rotate(90deg); }

.mr-search-empty {
  text-align: center;
  padding: 36px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.mr-empty-icon, .mr-empty-illus {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(216, 27, 36, 0.08);
  display: grid;
  place-items: center;
  color: var(--primary-red);
  margin-bottom: 6px;
}
.mr-search-empty strong {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-main);
}
.mr-search-empty p {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* =================== PROFILE =================== */
.mr-profile-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(calc(100% - 40px), 460px);
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  border-radius: 28px;
  padding: 30px 28px 26px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.58) 100%);
  backdrop-filter: blur(12px) saturate(190%) brightness(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(190%) brightness(1.05);
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow:
    0 40px 80px -30px rgba(15, 20, 26, 0.4),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 40px rgba(255, 255, 255, 0.25);
  isolation: isolate;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 20, 26, 0.18) transparent;
}
.mr-profile-panel::-webkit-scrollbar { width: 6px; height: 6px; }
.mr-profile-panel::-webkit-scrollbar-thumb {
  background: rgba(15, 20, 26, 0.18);
  border-radius: 100px;
  border: 1px solid transparent;
  background-clip: padding-box;
  transition: background-color 0.2s ease;
}
.mr-profile-panel::-webkit-scrollbar-thumb:hover { background: rgba(216, 27, 36, 0.55); background-clip: padding-box; }
.mr-profile-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.5) 0%,
    transparent 40%,
    transparent 60%,
    rgba(255, 255, 255, 0.3) 100%);
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}
.mr-profile-panel > * { position: relative; z-index: 2; }

.mr-panel-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(15, 20, 26, 0.06);
  border: 1px solid rgba(15, 20, 26, 0.06);
  color: var(--text-soft);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.28s var(--ease-out);
  z-index: 5;
}
.mr-panel-close:hover {
  background: var(--primary-red);
  color: #FFF;
  border-color: var(--primary-red);
  transform: rotate(90deg);
}

.mr-profile-head {
  text-align: center;
  margin-bottom: 22px;
}
.mr-profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-red), #ad131a);
  color: #FFF;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  box-shadow: 0 14px 28px -10px rgba(216, 27, 36, 0.55);
}
.mr-profile-head h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--text-main);
  margin-top: 10px;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.mr-profile-head h3 .mr-italic {
  display: inline-block;
  font-size: 0.94em;
  margin-left: 2px;
  color: inherit;
}
.mr-profile-head p {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.45;
}

.mr-tabs {
  display: flex;
  position: relative;
  background: rgba(15, 20, 26, 0.06);
  border-radius: 100px;
  padding: 4px;
  margin-bottom: 18px;
}
.mr-tab {
  flex: 1;
  background: none;
  border: none;
  padding: 9px 14px;
  border-radius: 100px;
  font-family: var(--font-main);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: color 0.32s var(--ease-out);
}
.mr-tab.active { color: var(--text-main); }
.mr-tab-indicator {
  position: absolute;
  top: 4px;
  left: 0;
  height: calc(100% - 8px);
  background: #FFF;
  border-radius: 100px;
  box-shadow: 0 4px 14px -4px rgba(15, 20, 26, 0.15);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), width 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
}

.mr-form { display: flex; flex-direction: column; gap: 12px; }
.mr-overlay [hidden],
.mr-profile-view[hidden] { display: none !important; }
.mr-field { display: flex; flex-direction: column; gap: 6px; }
.mr-field > span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.mr-field input {
  font-family: var(--font-main);
  font-size: 0.95rem;
  padding: 11px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(15, 20, 26, 0.08);
  color: var(--text-main);
  outline: none;
  transition: all 0.28s var(--ease-out);
}
.mr-field input:focus {
  background: #FFF;
  border-color: var(--primary-red);
  box-shadow: 0 0 0 4px rgba(216, 27, 36, 0.12);
}

.mr-form-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: -2px;
}
.mr-check { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.mr-check input { width: 16px; height: 16px; accent-color: var(--primary-red); }
.mr-text-link {
  color: var(--primary-red);
  font-weight: 700;
  text-decoration: none;
}
.mr-text-link:hover { text-decoration: underline; }

.mr-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 100px;
  background: linear-gradient(135deg, var(--primary-red), #ad131a);
  color: #FFF;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 0.92rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 14px 28px -10px rgba(216, 27, 36, 0.55);
  transition: all 0.32s var(--ease-out);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.mr-btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 80%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s var(--ease-out);
}
.mr-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -10px rgba(216, 27, 36, 0.65);
}
.mr-btn-primary:hover::before { left: 120%; }
.mr-btn-block { width: 100%; }

.mr-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  border-radius: 100px;
  background: rgba(15, 20, 26, 0.05);
  color: var(--text-soft);
  border: 1px solid rgba(15, 20, 26, 0.08);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  font-family: var(--font-main);
  transition: all 0.28s var(--ease-out);
}
.mr-btn-ghost:hover {
  background: var(--primary-red);
  color: #FFF;
  border-color: var(--primary-red);
}

.mr-profile-foot {
  text-align: center;
  font-size: 0.74rem;
  color: var(--text-faint);
  margin-top: 16px;
}

/* Account view */
.mr-account-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.mr-account-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-red), #ad131a);
  color: #FFF;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.4rem;
  display: grid;
  place-items: center;
  box-shadow: 0 14px 28px -10px rgba(216, 27, 36, 0.55);
}
.mr-account-meta { display: flex; flex-direction: column; }
.mr-account-meta strong {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-main);
}
.mr-account-meta span { font-size: 0.84rem; color: var(--text-muted); }

.mr-account-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(15, 20, 26, 0.06);
  margin-bottom: 18px;
}
.mr-stat { text-align: center; }
.mr-stat strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--text-main);
}
.mr-stat span {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.mr-account-menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 18px;
  padding: 0;
}
.mr-account-menu li > * {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(15, 20, 26, 0.05);
  color: var(--text-main);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  font-family: var(--font-main);
  cursor: pointer;
  transition: all 0.28s var(--ease-out);
}
.mr-account-menu li > * svg { color: var(--primary-red); flex-shrink: 0; }
.mr-account-menu li > * span { flex: 1; }
.mr-account-menu li > * em {
  font-style: normal;
  color: var(--text-faint);
  font-weight: 800;
  transition: transform 0.28s var(--ease-out);
}
.mr-account-menu li > *:hover {
  background: #FFF;
  border-color: rgba(216, 27, 36, 0.18);
  transform: translateX(2px);
}
.mr-account-menu li > *:hover em { transform: translateX(4px); color: var(--primary-red); }

/* =================== CART DRAWER =================== */
.mr-cart-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(calc(100% - 30px), 440px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.62) 100%);
  backdrop-filter: blur(12px) saturate(190%) brightness(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(190%) brightness(1.05);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    -30px 0 60px -20px rgba(15, 20, 26, 0.3),
    inset 1.5px 0 0 rgba(255, 255, 255, 0.95);
  isolation: isolate;
}
.mr-cart-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.4) 0%,
    transparent 35%,
    transparent 70%,
    rgba(255, 255, 255, 0.25) 100%);
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}
.mr-cart-panel > * { position: relative; z-index: 2; }

.mr-cart-head {
  padding: 22px 22px 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid rgba(15, 20, 26, 0.06);
  flex-shrink: 0;          /* header fijo arriba, no se comprime */
}
.mr-cart-title h3 {
  font-family: var(--font-heading);
  font-size: 1.85rem;
  font-weight: 900;
  color: var(--text-main);
  letter-spacing: -0.02em;
  margin-top: 6px;
  line-height: 1;
}
.mr-cart-title h3 em.mr-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text-muted);
  margin-left: 2px;
}

.mr-cart-body {
  flex: 1 1 auto;
  min-height: 0;            /* CLAVE: permite que el flex item se encoja y active el scroll */
  overflow-y: auto;
  overscroll-behavior: contain;  /* el scroll no se "filtra" a la página de atrás */
  -webkit-overflow-scrolling: touch;
  padding: 14px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
}
.mr-cart-body::-webkit-scrollbar { width: 6px; height: 6px; }
.mr-cart-body::-webkit-scrollbar-thumb {
  background: rgba(15, 20, 26, 0.18);
  border-radius: 100px;
  border: 1px solid transparent;
  background-clip: padding-box;
  transition: background-color 0.2s ease;
}
.mr-cart-body::-webkit-scrollbar-thumb:hover { background: rgba(216, 27, 36, 0.55); background-clip: padding-box; }

.mr-cart-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 13px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 4px 16px -10px rgba(15, 20, 26, 0.14);
  align-items: center;
  flex-shrink: 0;          /* no se comprime: mantiene su altura y deja scrollear el body */
  animation: mrItemIn 0.55s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 65ms);
  transition: transform 0.32s var(--ease-out), box-shadow 0.32s var(--ease-out), border-color 0.32s var(--ease-out), background 0.32s var(--ease-out);
  overflow: hidden;
}
.mr-cart-item:hover {
  background: #FFF;
  border-color: rgba(216, 27, 36, 0.22);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -14px rgba(15, 20, 26, 0.28);
}

@keyframes mrItemIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

.mr-cart-item-img {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-color);
  box-shadow: inset 0 0 0 1px rgba(15, 20, 26, 0.05);
}
.mr-cart-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease-out);
}
.mr-cart-item:hover .mr-cart-item-img img { transform: scale(1.06); }

.mr-cart-item-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mr-cart-item-cat {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primary-red);
}
.mr-cart-item-info strong {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mr-cart-item-price {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
}
/* Swatch de color del item */
.mr-cart-item-color {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-soft);
}
.mr-color-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow:
    inset 0 0 0 1px rgba(15, 20, 26, 0.14),
    0 1px 3px rgba(15, 20, 26, 0.2);
}

.mr-cart-item-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
.mr-qty {
  display: inline-flex;
  align-items: center;
  background: rgba(15, 20, 26, 0.05);
  border-radius: 100px;
  padding: 3px;
}
.mr-qty button {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: #FFF;
  color: var(--text-main);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 6px -2px rgba(15, 20, 26, 0.15);
  transition: all 0.22s var(--ease-out);
}
.mr-qty button:hover { background: var(--primary-red); color: #FFF; }
.mr-qty span {
  min-width: 26px;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.84rem;
  color: var(--text-main);
}
.mr-cart-item-remove {
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: all 0.22s var(--ease-out);
}
.mr-cart-item-remove:hover { color: var(--primary-red); transform: scale(1.15); }

.mr-cart-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  gap: 8px;
}
.mr-cart-empty strong {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
}
.mr-cart-empty p {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.5;
}

.mr-cart-foot {
  padding: 18px 22px 20px;
  border-top: 1px solid rgba(15, 20, 26, 0.06);
  background: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;          /* footer fijo abajo, no se comprime */
}

.mr-cart-summary {
  margin-bottom: 14px;
}
.mr-cart-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 0.88rem;
  color: var(--text-soft);
}
.mr-cart-row strong { font-weight: 700; }
.mr-cart-row-total {
  padding: 10px 0 6px;
  border-top: 1px dashed rgba(15, 20, 26, 0.12);
  margin-top: 6px;
}
.mr-cart-row-total span { font-weight: 700; color: var(--text-main); }
.mr-cart-row-total strong {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--primary-red);
}
.mr-cart-foot small {
  display: block;
  font-size: 0.72rem;
  color: var(--text-faint);
  text-align: center;
  margin-top: 6px;
}

.mr-btn-whats {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 100px;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #FFF;
  font-family: var(--font-main);
  font-weight: 800;
  font-size: 0.94rem;
  text-decoration: none;
  box-shadow: 0 14px 28px -8px rgba(37, 211, 102, 0.55);
  transition: all 0.32s var(--ease-out);
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
}
.mr-btn-whats::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 80%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transition: left 0.7s var(--ease-out);
}
.mr-btn-whats:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -8px rgba(37, 211, 102, 0.65);
}
.mr-btn-whats:hover::before { left: 120%; }

/* =================== Badge on nav cart icon =================== */
.mr-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--primary-red);
  color: #FFF;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.66rem;
  display: grid;
  place-items: center;
  padding: 0 5px;
  box-shadow: 0 4px 10px -2px rgba(216, 27, 36, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.95);
  pointer-events: none;
  letter-spacing: -0.02em;
}

.icon-btn { position: relative; }

.mr-badge-pop { animation: mrBadgePop 0.5s var(--ease-out); }
@keyframes mrBadgePop {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); }
}

.mr-icon-bounce { animation: mrIconBounce 0.55s var(--ease-out); }
@keyframes mrIconBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-4px) scale(1.1); }
  60% { transform: translateY(2px) scale(0.97); }
}

.icon-btn.mr-has-user::after {
  content: "";
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px #FFF;
}

.catalog-card-add {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(15, 20, 26, 0.05);
  border: 1px solid rgba(15, 20, 26, 0.06);
  color: var(--text-main);
  cursor: pointer;
  display: grid;
  place-items: center;
  margin-right: 6px;
  transition: all 0.28s var(--ease-out);
}
.catalog-card-add:hover {
  background: var(--primary-red);
  color: #FFF;
  border-color: var(--primary-red);
  transform: rotate(90deg) scale(1.05);
}
.catalog-card-add svg { width: 16px; height: 16px; }

/* =================== Toast =================== */
.mr-toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translate(-50%, 100px);
  padding: 12px 22px;
  background: rgba(15, 20, 26, 0.92);
  color: #FFF;
  border-radius: 100px;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: var(--font-main);
  z-index: 10100;
  opacity: 0;
  pointer-events: none;
  transition: all 0.45s var(--ease-out);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 40px -16px rgba(15, 20, 26, 0.5);
  max-width: calc(100% - 40px);
  text-align: center;
}
.mr-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.mr-toast[data-kind="success"] {
  background: linear-gradient(135deg, #16a34a, #15803d);
}

@media (max-width: 640px) {
  .mr-search-panel { top: 70px; max-height: calc(100vh - 90px); border-radius: 22px; }
  .mr-search-bar { padding: 14px 12px 14px 18px; }
  .mr-search-input { font-size: 1rem; }
  .mr-search-close { display: none; }
  .mr-search-scroll { padding: 14px 18px 18px; }
  .mr-profile-panel { border-radius: 22px; padding: 26px 22px 22px; }
  .mr-profile-head h3 { font-size: 1.3rem; }
  .mr-cart-panel { width: 100%; }
  .mr-cart-head { padding: 18px 18px 14px; }
  .mr-cart-body { padding: 12px 18px; }
  .mr-cart-foot { padding: 16px 18px 18px; }
  .mr-cart-item-img { width: 56px; height: 56px; }
  .mr-result-card { grid-template-columns: 52px 1fr auto; }
  .mr-result-img { width: 52px; height: 52px; }
}

/* =================================================================
   WHATSAPP FAB — Floating Action Button (sticky, all pages)
   ================================================================= */
.wa-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  height: 60px;
  border-radius: 999px;
  background: linear-gradient(135deg, #25D366 0%, #1FAD55 100%);
  color: #fff;
  text-decoration: none;
  box-shadow:
    0 18px 38px -10px rgba(37, 211, 102, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.18) inset,
    0 1px 0 rgba(255, 255, 255, 0.4) inset;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), width 0.4s var(--ease-out);
  width: 60px;
}

.wa-fab::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(37, 211, 102, 0.55), transparent 70%);
  z-index: -1;
  opacity: 0.9;
  animation: wa-pulse 2.6s ease-in-out infinite;
}

@keyframes wa-pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.35); opacity: 0; }
}

.wa-fab-icon {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
}

.wa-fab-icon svg {
  width: 28px;
  height: 28px;
  fill: #fff;
}

.wa-fab-label {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  padding-right: 22px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  pointer-events: none;
}

.wa-fab:hover {
  width: 232px;
  transform: translateY(-3px);
  box-shadow:
    0 26px 48px -10px rgba(37, 211, 102, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.22) inset,
    0 1px 0 rgba(255, 255, 255, 0.5) inset;
}

.wa-fab:hover .wa-fab-label {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.08s;
}

@media (max-width: 768px) {
  .wa-fab {
    bottom: 16px;
    right: 16px;
    height: 50px;
    width: 50px;
    /* En Safari iOS, los gradientes radiales sobre elementos fixed con
       overflow:hidden generan artefactos visibles ("cuadro difuminado")
       durante el scroll elástico. Reemplazamos el aura pulsante por una
       sombra simple. */
    box-shadow: 0 10px 22px -8px rgba(37, 211, 102, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.2) inset;
  }
  .wa-fab::before {
    display: none;
  }
  .wa-fab-icon {
    flex-basis: 50px;
    width: 50px;
    height: 50px;
  }
  .wa-fab-icon svg {
    width: 22px;
    height: 22px;
  }
  .wa-fab:hover {
    width: 50px;
  }
  .wa-fab:hover .wa-fab-label {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-fab::before { animation: none; }
  .wa-fab, .wa-fab:hover { transition: none; }
}

/* Footer social icons — global base styles */
.footer-socials {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.social-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #F4F5F7;
  color: var(--text-main);
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out), transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
  text-decoration: none;
  flex-shrink: 0;
}

.social-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}

.social-btn:hover {
  background: var(--primary-red);
  color: #FFF;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(216, 27, 36, 0.5);
}

/* WhatsApp green accent for the footer social icon */
.social-btn.social-btn-wa:hover {
  background: linear-gradient(135deg, #25D366 0%, #1FAD55 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 14px 28px -10px rgba(37, 211, 102, 0.5) !important;
}

/* =================================================================
   HERO TRUST BAR — badges and trust signals below hero CTAs
   ================================================================= */
.hero-trust-bar {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 8px 14px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(15, 20, 26, 0.08);
  justify-content: start;
}

.hero-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--text-soft);
  letter-spacing: -0.005em;
  line-height: 1.2;
  white-space: nowrap;
}

.hero-trust-item svg {
  width: 13px;
  height: 13px;
  stroke: var(--primary-red);
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .hero-trust-bar { grid-template-columns: 1fr; gap: 9px; }
}

/* =================================================================
   "WHY ROCA" SECTION — 4 columns with icons
   ================================================================= */
.why-roca {
  max-width: 1400px;
  margin: 80px auto 40px;
  padding: 64px 40px;
  position: relative;
}

.why-roca-header {
  text-align: center;
  margin-bottom: 56px;
}

.why-roca-header .eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-red);
}

.why-roca-header h2 {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--text-main);
  max-width: 760px;
  margin: 0 auto;
}

.why-roca-header h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--primary-red);
}

.why-roca-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.why-roca-card {
  position: relative;
  padding: 32px 26px 30px;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 24px;
  box-shadow: var(--shadow-md);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}

.why-roca-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.why-roca-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(216, 27, 36, 0.12), rgba(255, 138, 0, 0.1));
  margin-bottom: 20px;
}

.why-roca-icon svg {
  width: 26px;
  height: 26px;
  stroke: var(--primary-red);
  stroke-width: 1.8;
  fill: none;
}

.why-roca-card h3 {
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-main);
  margin-bottom: 8px;
}

.why-roca-card p {
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.why-roca-stat {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--primary-red);
  margin-bottom: 8px;
  letter-spacing: -0.04em;
}

@media (max-width: 1024px) {
  .why-roca-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .why-roca { padding: 48px 22px; margin-top: 40px; }
  .why-roca-header { margin-bottom: 36px; }
  .why-roca-grid { grid-template-columns: 1fr; gap: 16px; }
  .why-roca-card { padding: 26px 22px 24px; }
}

/* =================================================================
   B2B SECTION — solutions for businesses
   ================================================================= */
.b2b-section {
  max-width: 1400px;
  margin: 60px auto 80px;
  padding: 0 40px;
}

.b2b-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  padding: 72px 64px;
  background: linear-gradient(135deg, #FBF7F2 0%, #F4EDE3 100%);
  border: 1px solid rgba(15, 20, 26, 0.06);
  border-radius: 36px;
  overflow: hidden;
  color: #0F141A;
  isolation: isolate;
  box-shadow: 0 30px 70px -28px rgba(15, 20, 26, 0.14);
}

.b2b-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 70%;
  background: radial-gradient(ellipse at top right, rgba(216, 27, 36, 0.14), transparent 70%);
  z-index: -1;
  pointer-events: none;
}

.b2b-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 60%;
  background: radial-gradient(ellipse at bottom left, rgba(216, 27, 36, 0.06), transparent 70%);
  z-index: -1;
  pointer-events: none;
}

.b2b-content .eyebrow {
  display: inline-block;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary-red);
  margin-bottom: 14px;
}

.b2b-content h2 {
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-bottom: 20px;
  color: #0F141A;
}

.b2b-content h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--primary-red);
  -webkit-text-fill-color: currentColor;
}

.b2b-content > p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #4A5462;
  max-width: 480px;
  margin-bottom: 28px;
}

.b2b-segments {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 22px;
  margin-bottom: 32px;
}

.b2b-segment {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink-700);
  padding: 10px 14px 10px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(15, 20, 26, 0.06);
  transition: background 0.4s var(--ease-out), border-color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.b2b-segment:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(216, 27, 36, 0.20);
  transform: translateY(-2px);
}

.b2b-segment-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-red-soft);
  flex-shrink: 0;
  transition: background 0.4s var(--ease-out);
}

.b2b-segment:hover .b2b-segment-icon {
  background: var(--primary-red);
}

.b2b-segment-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--primary-red);
  transition: stroke 0.4s var(--ease-out);
}

.b2b-segment:hover .b2b-segment-icon svg {
  stroke: #fff;
}

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

/* CTA principal — Ver soluciones (acción primaria del negocio) */
.b2b-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  background: linear-gradient(135deg, var(--primary-red), #ad131a);
  color: #fff;
  font-weight: 600;
  font-size: 0.96rem;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: var(--shadow-red);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.b2b-cta-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 40px -10px rgba(216, 27, 36, 0.5);
}

.b2b-cta-primary svg {
  width: 16px;
  height: 16px;
  transition: transform 0.4s var(--ease-out);
}

.b2b-cta-primary:hover svg {
  transform: translateX(4px);
}

/* CTA secundaria WhatsApp — visible pero subordinada */
.b2b-cta-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px 13px 14px;
  background: rgba(37, 211, 102, 0.1);
  border: 1px solid rgba(37, 211, 102, 0.28);
  color: #1FAD55;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  border-radius: 999px;
  transition: background 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.b2b-cta-whatsapp:hover {
  background: linear-gradient(135deg, #25D366, #1FAD55);
  color: #fff;
  transform: translateY(-2px);
}

.b2b-cta-whatsapp svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Stats B2B — ahora son beneficios concretos */
.b2b-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-content: center;
}

.b2b-stat {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(15, 20, 26, 0.06);
  border-radius: 18px;
  box-shadow: 0 10px 24px -16px rgba(15, 20, 26, 0.10);
  transition: background 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.b2b-stat:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateX(4px);
}

.b2b-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--primary-red-soft);
  color: var(--primary-red);
  flex-shrink: 0;
}

.b2b-stat-icon svg {
  width: 22px;
  height: 22px;
}

.b2b-stat-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  margin-bottom: 3px;
}

.b2b-stat-label {
  font-size: 0.84rem;
  color: var(--ink-500);
  line-height: 1.4;
}

@media (max-width: 900px) {
  .b2b-card {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 48px 36px;
  }
}

/* Móvil: sección compactada — más liviana al ojo y al scroll. */
@media (max-width: 768px) {
  .b2b-section {
    padding: 0 18px;
    margin: 28px auto 36px;
  }
  .b2b-card {
    padding: 28px 22px;
    border-radius: 24px;
    gap: 24px;
    box-shadow: 0 14px 30px -20px rgba(15, 20, 26, 0.16);
  }
  .b2b-content .eyebrow {
    font-size: 0.66rem;
    margin-bottom: 8px;
  }
  .b2b-content h2 {
    font-size: clamp(1.5rem, 6vw, 1.85rem);
    margin-bottom: 12px;
  }
  .b2b-content > p {
    font-size: 0.92rem;
    line-height: 1.5;
    margin-bottom: 18px;
  }
  .b2b-segments {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 20px;
  }
  .b2b-segment {
    font-size: 0.78rem;
    padding: 7px 10px 7px 7px;
    gap: 8px;
  }
  .b2b-segment-icon {
    width: 26px;
    height: 26px;
  }
  .b2b-segment-icon svg {
    width: 14px;
    height: 14px;
  }
  .b2b-cta-group {
    gap: 10px;
    flex-wrap: wrap;
  }
  .b2b-cta-primary,
  .b2b-cta-whatsapp {
    padding: 12px 18px;
    font-size: 0.88rem;
  }
  .b2b-stats {
    gap: 12px;
  }
  .b2b-stat {
    padding: 14px;
    gap: 12px;
  }
  .b2b-stat-icon {
    width: 32px;
    height: 32px;
  }
  .b2b-stat-icon svg {
    width: 16px;
    height: 16px;
  }
  .b2b-stat-title {
    font-size: 0.92rem;
    margin-bottom: 2px;
  }
  .b2b-stat-label {
    font-size: 0.78rem;
    line-height: 1.4;
  }
}

/* =================================================================
   BRANCHES SECTION — Sucursales with maps
   ================================================================= */
.branches {
  max-width: 1400px;
  margin: 60px auto 80px;
  padding: 0 40px;
}

.branches-header {
  text-align: center;
  margin-bottom: 48px;
}

.branches-header .eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-red);
}

.branches-header h2 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--text-main);
}

.branches-header h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--primary-red);
}

.branches-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.branch-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}

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

.branch-map {
  position: relative;
  height: 220px;
  overflow: hidden;
  background: #e5e7eb;
}

.branch-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.branch-body {
  padding: 26px 28px 28px;
}

.branch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.branch-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-red);
}

.branch-badge::before { content: none; }

.branch-badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--primary-red);
}

/* Sede central — acento sólido */
.branch-badge-flagship {
  color: var(--primary-red);
}
.branch-badge-flagship .branch-badge-dot {
  background: var(--primary-red);
}

/* Secundaria — sobrio */
.branch-badge-secondary {
  color: var(--ink-500, #6b7280);
}
.branch-badge-secondary .branch-badge-dot {
  background: var(--ink-500, #6b7280);
}

.branch-location {
  font-size: 0.78rem;
  color: var(--ink-500);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.branch-card h3 {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin-bottom: 6px;
}

.branch-address {
  font-size: 0.96rem;
  color: var(--ink-500);
  margin-bottom: 18px;
  line-height: 1.5;
}

/* Branch hours — mini-tabla con día abierto/cerrado */
.branch-hours {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px 14px;
  background: rgba(15, 20, 26, 0.03);
  border-radius: 14px;
  border: 1px solid rgba(15, 20, 26, 0.05);
  margin-bottom: 18px;
}

.branch-hours-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.branch-hours-day {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.branch-hours-time {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-900);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.branch-hours-row .branch-hours-time::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #18c56e;
  box-shadow: 0 0 6px rgba(24, 197, 110, 0.5);
}

.branch-hours-row--closed .branch-hours-time {
  color: var(--ink-300);
}

.branch-hours-row--closed .branch-hours-time::before {
  background: var(--ink-300);
  box-shadow: none;
}

.branch-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  font-size: 0.88rem;
  margin-bottom: 22px;
}

.branch-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-700);
  font-weight: 600;
  transition: color 0.3s var(--ease-out);
}

.branch-meta-item:hover {
  color: var(--primary-red);
}

.branch-meta-item svg {
  width: 16px;
  height: 16px;
  stroke: var(--primary-red);
}

.branch-meta-wa {
  color: #1FAD55 !important;
}

.branch-meta-wa svg {
  fill: #1FAD55;
  stroke: none;
}

.branch-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* CTA primary — Cómo llegar (rojo) */
.branch-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  font-weight: 600;
  font-size: 0.94rem;
  text-decoration: none;
  border-radius: 999px;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), background 0.35s var(--ease-out);
}

.branch-cta-primary {
  flex: 2 1 200px;
  background: linear-gradient(135deg, var(--primary-red), #ad131a);
  color: #fff;
  box-shadow: var(--shadow-red);
}

.branch-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 40px -10px rgba(216, 27, 36, 0.5);
}

.branch-cta-arrow {
  margin-left: 4px;
  width: 14px !important;
  height: 14px !important;
  transition: transform 0.4s var(--ease-out);
}

.branch-cta-primary:hover .branch-cta-arrow {
  transform: translateX(4px);
}

/* CTA secundario Waze */
.branch-cta-waze {
  flex: 1 1 110px;
  background: rgba(51, 204, 255, 0.10);
  color: #1AA3D6;
  border: 1px solid rgba(51, 204, 255, 0.32);
}

.branch-cta-waze:hover {
  background: linear-gradient(135deg, #33CCFF 0%, #1AA3D6 100%);
  color: #fff;
  transform: translateY(-2px);
}

.branch-cta svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

@media (max-width: 900px) {
  .branches-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .branches { padding: 0 22px; }
  .branch-body { padding: 22px 24px 26px; }
}


/* =================================================================
   FOLLOW US — social cards with animated dynamic background
   ================================================================= */
.follow-us {
  position: relative;
  margin: 120px 0 0;
  padding: 140px 40px 160px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #07090E 0%, #0B0F16 50%, #07090E 100%);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
  max-width: none;
  --mx: 50%;
  --my: 50%;
}

/* Separadores hairline arriba/abajo — refuerzan la idea de sección completa */
.follow-us::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 15%,
    rgba(255, 0, 80, 0.35) 50%,
    rgba(255, 255, 255, 0.08) 85%,
    transparent 100%);
  z-index: 4;
  pointer-events: none;
  -webkit-mask: none;
          mask: none;
  -webkit-mask-composite: source-over;
          mask-composite: add;
  animation: none;
  opacity: 1;
  padding: 0;
}

.follow-us::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 20%,
    rgba(24, 119, 242, 0.3) 50%,
    rgba(255, 255, 255, 0.06) 80%,
    transparent 100%);
  z-index: 4;
  pointer-events: none;
  inset: auto 0 0 0;
  box-shadow: none;
}

/* Spotlight que sigue al mouse — capa principal de iluminación */
.follow-spotlight {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle 520px at var(--mx) var(--my),
      rgba(255, 0, 80, 0.18) 0%,
      rgba(204, 57, 164, 0.14) 22%,
      rgba(24, 119, 242, 0.10) 42%,
      transparent 70%),
    radial-gradient(circle 260px at var(--mx) var(--my),
      rgba(255, 255, 255, 0.12) 0%,
      transparent 70%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
  mix-blend-mode: screen;
}

.follow-us:hover .follow-spotlight,
.follow-us.is-pointing .follow-spotlight { opacity: 1; }

.follow-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Aurora gradient flotante — color drifting suave en el fondo.
   NOTA: animación retirada. El combo `filter: blur(60px)` + `animation
   infinite` sobre un elemento de 70%×70% del viewport satura el compositor
   de Safari (cada frame recalcula un blur enorme). Se deja estática: la
   estética suave del fondo se conserva. */
.follow-bg::before {
  content: "";
  position: absolute;
  width: 70%;
  height: 70%;
  top: -10%;
  left: -10%;
  background: radial-gradient(circle at 30% 30%, rgba(204, 57, 164, 0.22), transparent 60%);
  filter: blur(60px);
}
.follow-bg::after {
  content: "";
  position: absolute;
  width: 70%;
  height: 70%;
  bottom: -10%;
  right: -10%;
  background: radial-gradient(circle at 70% 70%, rgba(24, 119, 242, 0.2), transparent 60%);
  filter: blur(60px);
}

/* Orbs adicionales flotantes que dan más vida al fondo */
.follow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.45;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: transform;
}
/* Orbs estáticos: animación retirada (cada uno hace blur(50px) + screen
   blend; animados en loop pegan al compositor de Safari). Quedan como
   manchas suaves de color en el fondo. */
.follow-orb-1 {
  width: 280px;
  height: 280px;
  top: 18%;
  left: 8%;
  background: radial-gradient(circle, rgba(37, 244, 238, 0.55), transparent 65%);
}
.follow-orb-2 {
  width: 240px;
  height: 240px;
  top: 55%;
  right: 6%;
  background: radial-gradient(circle, rgba(255, 0, 80, 0.5), transparent 65%);
}
.follow-orb-3 {
  width: 200px;
  height: 200px;
  bottom: 12%;
  left: 22%;
  background: radial-gradient(circle, rgba(37, 211, 102, 0.45), transparent 65%);
}

.follow-bg .follow-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 44px 44px;
  /* La rejilla se ilumina alrededor del cursor; en reposo, viñeta suave central */
  mask-image:
    radial-gradient(circle 360px at var(--mx, 50%) var(--my, 50%), rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.3) 55%, transparent 100%),
    radial-gradient(ellipse at center, black 0%, transparent 75%);
  -webkit-mask-image:
    radial-gradient(circle 360px at var(--mx, 50%) var(--my, 50%), rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.3) 55%, transparent 100%),
    radial-gradient(ellipse at center, black 0%, transparent 75%);
  mask-composite: add;
  -webkit-mask-composite: source-over;
  opacity: 0.75;
  transition: opacity 0.4s var(--ease-out);
}

/* Partículas/puntos flotantes que dan sensación juguetona */
.follow-bg .follow-particles {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 22%, rgba(255, 255, 255, 0.35) 1px, transparent 1.5px),
    radial-gradient(circle at 82% 18%, rgba(255, 0, 80, 0.4) 1px, transparent 1.5px),
    radial-gradient(circle at 28% 78%, rgba(37, 244, 238, 0.35) 1px, transparent 1.5px),
    radial-gradient(circle at 71% 64%, rgba(255, 255, 255, 0.3) 1px, transparent 1.5px),
    radial-gradient(circle at 92% 88%, rgba(37, 211, 102, 0.35) 1px, transparent 1.5px),
    radial-gradient(circle at 8% 60%, rgba(24, 119, 242, 0.35) 1px, transparent 1.5px);
  /* followParticles retirada: backgrounds animando bg-position en loop es
     costoso en Safari. Las partículas estáticas se ven igual. */
  pointer-events: none;
  opacity: 0.6;
}
@keyframes followParticles {
  0%   { transform: translate(0, 0); opacity: 0.5; }
  50%  { opacity: 0.8; }
  100% { transform: translate(20px, -15px); opacity: 0.5; }
}

/* orbFloat keyframes eliminados con los orbs */

.follow-content {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
}

.follow-us .eyebrow {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.follow-us h2 {
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
  margin-bottom: 18px;
  color: #fff;
}

.follow-us h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(
    110deg,
    #cc39a4 0%,
    #ff0050 20%,
    #1877F2 40%,
    #25F4EE 60%,
    #25D366 80%,
    #cc39a4 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
  /* Animación retirada: `background-clip: text` + `animation infinite` sobre
     background-position es un combo que Safari renderiza muy mal (text
     parpadea o desaparece). El gradiente estático se ve bien y es estable. */
}

.follow-us h2 {
  /* titleFloat retirada: mover continuamente un H2 grande dispara reflows
     constantes; Safari sufre más. El título estático queda perfecto. */
}

.follow-content > p {
  font-size: 1.06rem;
  color: rgba(255, 255, 255, 0.72);
  max-width: 540px;
  margin: 0 auto 56px;
  line-height: 1.6;
}

/* Folio bar superior — refuerza la idea de sección/capítulo */
.follow-folio {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.follow-folio span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.follow-folio .folio-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff0050;
  box-shadow: 0 0 12px rgba(255, 0, 80, 0.6);
  animation: folioPulse 2.4s ease-in-out infinite;
}
@keyframes folioPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.8); }
}

/* Footer bar inferior */
.follow-footer {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 80px auto 0;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.follow-footer span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.social-cards-wrap {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.social-main {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  width: 100%;
  max-width: 1080px;
}

.social-row {
  display: contents;
}

/* Social card — verticales, espaciosas, full-bleed */
.social-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 28px 26px 26px;
  text-decoration: none;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  min-height: 180px;
  transition: transform 0.5s var(--ease-out), background 0.5s var(--ease-out), border-color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
  --cx: 50%;
  --cy: 50%;
}

.social-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--brand-gradient, transparent);
  opacity: 0;
  transition: opacity 0.55s var(--ease-out);
  z-index: 0;
}

.social-card:hover::before { opacity: 1; }

/* Glow interior — sigue al mouse dentro de la card */
.social-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle 160px at var(--cx) var(--cy),
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.06) 35%,
    transparent 70%);
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: overlay;
}

.social-card:hover::after { opacity: 1; }

.social-card > * { position: relative; z-index: 3; }

.social-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--brand-color, rgba(255, 255, 255, 0.1));
  flex-shrink: 0;
  transition: transform 0.5s var(--ease-back), box-shadow 0.5s var(--ease-out);
}

.social-card svg {
  width: 26px;
  height: 26px;
  fill: #fff;
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.social-card-label {
  display: block;
  font-size: 1.18rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-top: auto;
}

.social-card-handle {
  display: block;
  font-size: 0.84rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 6px;
  transition: color 0.4s var(--ease-out);
}

.social-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 22px 44px -16px rgba(0, 0, 0, 0.45);
}

.social-card:hover .social-card-icon {
  transform: scale(1.08) rotate(-4deg);
}

.social-card:hover .social-card-handle {
  color: rgba(255, 255, 255, 0.85);
}

/* Brand colors */
.social-ig {
  --brand-color: #cc39a4;
  --brand-gradient: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.social-fb {
  --brand-color: #1877F2;
  --brand-gradient: linear-gradient(135deg, #1877F2, #0d5fcf);
}

.social-tt {
  --brand-color: #25F4EE;
  --brand-gradient: linear-gradient(135deg, #010101 0%, #25F4EE 50%, #FE2C55 100%);
}

.social-tt .social-card-icon {
  background: #010101;
  box-shadow: 2px 2px 0 #FE2C55, -2px -2px 0 #25F4EE;
}

.social-wa {
  --brand-color: #25D366;
  --brand-gradient: linear-gradient(135deg, #25D366, #128C7E);
}

@media (max-width: 960px) {
  .social-main { grid-template-columns: repeat(2, 1fr); max-width: 560px; }
}

@media (max-width: 768px) {
  .follow-us { padding: 80px 22px 100px; margin: 80px 0 0; }
  .social-main { grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 480px; }
  .social-card { padding: 22px 20px; min-height: 160px; gap: 14px; }
  .social-card-icon { width: 48px; height: 48px; }
  .social-card svg { width: 22px; height: 22px; }
  .social-card-label { font-size: 1.02rem; }
  .follow-orb-1 { width: 200px; height: 200px; }
  .follow-orb-2 { width: 180px; height: 180px; }
  .follow-orb-3 { display: none; }
  .follow-spotlight { display: none; }
}

@media (max-width: 420px) {
  .social-main { grid-template-columns: 1fr; max-width: 320px; }
  .social-card { min-height: 0; flex-direction: row; align-items: center; padding: 18px 20px; }
  .social-card-label { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .social-card { animation: none !important; }
  .follow-bg::before,
  .follow-bg::after,
  .follow-orb,
  .follow-bg .follow-particles,
  .follow-us h2 {
    animation: none !important;
  }
}

/* ============================================================
   MOBILE MENU — Hamburger + Drawer
   Patrón: botón visible <900px, drawer lateral derecho con backdrop.
   ============================================================ */

.menu-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(15, 20, 26, 0.1);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  flex-shrink: 0;
  z-index: 110;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
  box-shadow: 0 6px 14px -6px rgba(15, 20, 26, 0.12);
}

.menu-toggle:hover {
  background: #FFF;
  border-color: rgba(216, 27, 36, 0.3);
}

.menu-toggle:active {
  transform: scale(0.94);
}

.menu-toggle .bar {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 2px;
  margin-left: -9px;
  background: var(--ink-900);
  border-radius: 2px;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.25s ease, top 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.menu-toggle .bar:nth-child(1) { top: 15px; }
.menu-toggle .bar:nth-child(2) { top: 21px; }
.menu-toggle .bar:nth-child(3) { top: 27px; }

.menu-toggle.active .bar:nth-child(1) {
  top: 21px;
  transform: rotate(45deg);
}
.menu-toggle.active .bar:nth-child(2) {
  opacity: 0;
  transform: translateX(-12px);
}
.menu-toggle.active .bar:nth-child(3) {
  top: 21px;
  transform: rotate(-45deg);
}

/* Backdrop — z-index alto para cubrir incluso el navbar fixed en móvil.
   pointer-events:none mientras está cerrado: sin esto, el backdrop con
   opacity:0 pero display:block (activado por body.js-ready) intercepta
   todos los taps sobre el navbar al cargar la página. iOS Safari "lo
   arregla" al scrollear porque recompone los layers de hit-testing —
   por eso el bug se sentía como "el navbar no responde al inicio". */
.mobile-menu-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 26, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1050;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.mobile-menu-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* Drawer */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 360px);
  background: linear-gradient(180deg, #FFFFFF 0%, var(--clay-50) 100%);
  /* z-index 1100 para quedar SIEMPRE arriba del navbar fixed (1000),
     evitando que el rojo del CTA se vea a través del backdrop-filter
     del navbar cuando el drawer está abierto. */
  z-index: 1100;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -24px 0 60px -20px rgba(15, 20, 26, 0.25);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
}

.mobile-menu.open {
  transform: translateX(0);
  visibility: visible;
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.mobile-menu-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-main);
  text-decoration: none;
}

.mobile-menu-brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--primary-red);
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(216, 27, 36, 0.22);
}

.mobile-menu-brand-mark img {
  width: 66%;
  height: 66%;
  object-fit: contain;
}

.mobile-menu-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.mobile-menu-brand-text strong {
  font-family: var(--font-heading);
  font-size: 0.96rem;
  font-weight: 800;
  color: var(--ink-900);
}

.mobile-menu-brand-text small {
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.mobile-menu-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  background: #FFF;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink-700);
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.mobile-menu-close:hover {
  background: var(--primary-red);
  color: #FFF;
  border-color: var(--primary-red);
}

.mobile-menu-close:active {
  transform: scale(0.94);
}

.mobile-menu-close svg {
  width: 18px;
  height: 18px;
}

.mobile-menu-links {
  display: flex;
  flex-direction: column;
  padding: 14px 12px;
  gap: 2px;
  flex-grow: 1;
}

.mobile-menu-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-radius: 14px;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink-900);
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
  opacity: 0;
  transform: translateX(20px);
}

.mobile-menu.open .mobile-menu-links a {
  opacity: 1;
  transform: translateX(0);
  transition: background 0.25s ease, color 0.25s ease, opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-menu.open .mobile-menu-links a:nth-child(1) { transition-delay: 0.08s; }
.mobile-menu.open .mobile-menu-links a:nth-child(2) { transition-delay: 0.14s; }
.mobile-menu.open .mobile-menu-links a:nth-child(3) { transition-delay: 0.20s; }
.mobile-menu.open .mobile-menu-links a:nth-child(4) { transition-delay: 0.26s; }
.mobile-menu.open .mobile-menu-links a:nth-child(5) { transition-delay: 0.32s; }

.mobile-menu-links a::after {
  content: "→";
  font-size: 1.1rem;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  color: var(--primary-red);
}

.mobile-menu-links a:hover,
.mobile-menu-links a:active {
  background: var(--clay-100);
  color: var(--primary-red);
}

.mobile-menu-links a:hover::after,
.mobile-menu-links a.active::after {
  opacity: 1;
  transform: translateX(0);
}

.mobile-menu-links a.active {
  background: linear-gradient(135deg, rgba(216, 27, 36, 0.08), rgba(216, 27, 36, 0.02));
  color: var(--primary-red);
}

.mobile-menu-footer {
  padding: 18px 22px 26px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-shrink: 0;
}

.mobile-menu-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  background: var(--primary-red);
  color: #FFF;
  border-radius: 100px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 12px 24px -10px rgba(216, 27, 36, 0.55);
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.mobile-menu-cta:hover {
  background: var(--primary-red-hover);
  transform: translateY(-1px);
}

.mobile-menu-cta:active {
  transform: translateY(0) scale(0.98);
}

.mobile-menu-cta svg {
  width: 18px;
  height: 18px;
}

.mobile-menu-contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}

.mobile-menu-contact a {
  font-size: 0.84rem;
  color: var(--text-soft);
  font-weight: 600;
  text-decoration: none;
}

.mobile-menu-contact a:hover {
  color: var(--primary-red);
}

.mobile-menu-contact span {
  font-size: 0.7rem;
  color: var(--text-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Bloquear scroll del body cuando el menú está abierto */
body.menu-open {
  overflow: hidden;
}

/* Mostrar hamburguesa solo en móvil. Requiere body.js-ready para
   no exponer un botón sin handler si el JS falla en cargar. */
@media (max-width: 900px) {
  body.js-ready .menu-toggle {
    display: block;
  }
  body.js-ready .mobile-menu-backdrop {
    display: block;
  }
  /* En móvil los 3 iconos (buscar/carrito/perfil) MATCHEAN el tamaño del
     menu-toggle (44×44) para que el navbar móvil se vea uniforme. SVG 18px
     proporcional. Apple HIG / WCAG AAA tap target. flex:0 0 44px + aspect-ratio
     bloquean el círculo (sin flex-shrink el navbar apretado los ovala). */
  .navbar-home .nav-icons .icon-btn,
  .navbar-inner .nav-icons .icon-btn,
  .navbar-home .nav-icons .icon-btn:last-child,
  .navbar-inner .nav-icons .icon-btn:last-child {
    display: grid !important;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    aspect-ratio: 1 / 1;
    padding: 0;
  }
  .navbar-home .nav-icons .icon-btn svg,
  .navbar-inner .nav-icons .icon-btn svg {
    width: 18px;
    height: 18px;
  }
  .navbar-home .nav-icons,
  .navbar-inner .nav-icons {
    gap: 8px;
    min-width: 0;
  }
  /* Ocultamos el botón Cotizar en móvil: el navbar quedaba demasiado
     apretado (logo + Cotizar + 3 iconos + hamburguesa = 6 elementos).
     El CTA Cotizar sigue accesible vía el menú hamburguesa (Cotizar por
     WhatsApp) y el FAB verde flotante. */
  .navbar-home .btn-quote,
  .navbar-inner .btn-quote {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .mobile-menu-backdrop,
  .mobile-menu-links a,
  .menu-toggle .bar {
    transition: none !important;
  }
}

/* ============================================================
   MOBILE LAYOUT FIXES — Pulido general de la versión móvil
   ============================================================ */

@media (max-width: 768px) {
  /* Footer: colapso vertical con padding más cómodo */
  .footer-top {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 40px 24px 28px !important;
  }
  .footer-bottom {
    padding: 16px 24px !important;
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
  /* Mapas y embeds responsivos */
  .branch-map,
  .map-embed,
  iframe[src*="google.com/maps"] {
    aspect-ratio: 4 / 3;
    height: auto !important;
    width: 100% !important;
  }
  /* Inputs y textareas con tamaño mínimo cómodo */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important; /* Evita el zoom automático de iOS Safari */
    min-height: 48px;
    border-radius: 12px;
  }
  textarea {
    min-height: 120px;
  }
  /* Botones más cómodos */
  .btn {
    min-height: 48px;
    padding: 14px 22px;
  }
  /* Reducir espaciados grandes */
  section {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
  /* Headings con balance mejor. Sin word-break ni overflow-wrap: estos
     partían palabras innecesariamente ("Razones" → "Razon es"). */
  h1, h2, h3 { text-wrap: balance; }
  /* Imágenes nunca rebasan */
  img, video, iframe { max-width: 100%; }
}

@media (max-width: 480px) {
  /* Ajustar paddings de hero y secciones grandes */
  .hero-container,
  .hero-content {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Botón cotizar en navbar bien proporcionado */
  .navbar-inner .btn-quote,
  .navbar-home .btn-quote {
    min-width: 0;
    padding: 9px 14px;
  }
  /* Cards de productos: gap compacto para 2 columnas estilo Amazon */
  .products-grid {
    gap: 12px !important;
    padding: 0 14px !important;
  }
  /* Carrusel "Lo más vendido": deslizable de lado, con aire para la sombra */
  .best-sellers .horizontal-grid {
    gap: 12px;
    padding: 10px 14px 24px;
    scroll-padding-left: 14px;
  }
  .best-sellers .horizontal-grid .product-card {
    width: clamp(232px, 80vw, 288px);
  }
  .bs-scroll-hint { padding: 0 14px; }
  /* En pantallas muy estrechas, las 2 cols deben quedar bien legibles */
  .product-card {
    padding: 7px;
    border-radius: 20px;
  }
  .product-img {
    border-radius: 14px;
    margin-bottom: 8px;
  }
  .product-info h3 {
    font-size: 0.88rem;
  }
  .product-info p {
    font-size: 0.72rem;
    margin-bottom: 6px;
  }
  .price-label {
    font-size: 0.76rem;
  }
  .btn-cart {
    width: 30px;
    height: 30px;
  }
  .btn-cart svg {
    width: 12px;
    height: 12px;
  }
  /* Headings escala más compacta */
  .header-content h2 {
    font-size: 1.7rem !important;
    line-height: 1.15;
  }
  /* Footer: enlaces con tap target ≥44px (Apple HIG / WCAG AAA) */
  .footer-top a,
  .footer-bottom a {
    padding: 12px 0;
    display: inline-block;
  }
}

@media (max-width: 380px) {
  .navbar-inner .brand-copy strong,
  .navbar-home .brand-copy strong {
    font-size: 0.84rem;
  }
  .navbar-inner .brand-mark,
  .navbar-home .brand-mark {
    width: 34px;
    height: 34px;
  }
  .navbar-inner .btn-quote,
  .navbar-home .btn-quote {
    min-width: 0;
    padding: 8px 12px;
  }
  .navbar-inner .btn-quote::before,
  .navbar-home .btn-quote::before {
    font-size: 0.72rem;
  }
}

/* WhatsApp FAB en móvil: que no choque con el menú ni con el navbar */
@media (max-width: 600px) {
  .whatsapp-fab,
  .mr-whatsapp-fab {
    bottom: max(20px, env(safe-area-inset-bottom)) !important;
    right: 16px !important;
  }
}

/* ============= TÍTULO DISPLAY — palabra clave en bloque (Camino 2) =============
   El sans "presenta" arriba en peso 600; la palabra clave (<em>) salta a su
   propia línea, más grande, en Newsreader cursiva roja. Selector calificado por
   elemento + ubicación al final del archivo = gana por orden sobre las reglas de
   sección heredadas (.b2b-content h2, .branches-header h2, .follow-us h2, etc.). */
h1.display-title,
h2.display-title {
  font-weight: 600;
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
h1.display-title em,
h2.display-title em {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  color: var(--primary-red);
  font-size: clamp(2.5rem, 5.4vw, 3.9rem);
  line-height: 1.0;
  margin-top: 0.06em;
  letter-spacing: -0.01em;
}

/* ============= PRESS FEEDBACK (Emil Kowalski: buttons must feel responsive)
   :active compone con :hover existente (browser cascade). 120ms ease-out =
   feedback táctil instantáneo en móvil sin sentirse animado. Bloque al final
   para auditar/revertir sin tocar definiciones existentes. */
.btn-primary:active,
.btn-secondary:active,
.btn-outline:active,
.mr-btn-primary:active,
.mr-btn-whats:active,
.navbar-inner .btn-quote:active,
.navbar-home .btn-quote:active {
  transform: translateY(-1px) scale(0.97);
  transition: transform 120ms var(--ease-out);
}

.btn-ghost:active,
.btn-arrow:active,
.mr-btn-ghost:active {
  transform: scale(0.97);
  transition: transform 120ms var(--ease-out);
}

.btn-cart:active {
  transform: scale(1.05);
  transition: transform 120ms var(--ease-out);
}

/* Botones internos de los overlays (search/profile/cart). Mismo press
   feedback. Selectores incluyen close buttons, tabs, chips, qty +/-,
   remove de cart-item y links del menú de cuenta. */
.mr-panel-close:active,
.mr-search-close:active,
.mr-search-clear:active,
.mr-text-btn:active,
.mr-cart-item-remove:active,
.mr-qty button:active,
.mr-account-menu a:active,
.mr-account-menu button:active {
  transform: scale(0.92);
  transition: transform 120ms var(--ease-out);
}

.mr-tab:active,
.mr-chip:active {
  transform: scale(0.97);
  transition: transform 120ms var(--ease-out);
}

/* === LOGIN/CUENTA OCULTO — el "login" actual es solo localStorage (no es auth real).
   Para reactivarlo cuando exista Supabase Auth de verdad, borra este bloque.
   El selector es específico a propósito: gana sobre la regla móvil
   `.navbar-* .nav-icons .icon-btn { display: grid !important }`. === */
.profile-btn,
.navbar-home .nav-icons .icon-btn.profile-btn,
.navbar-inner .nav-icons .icon-btn.profile-btn { display: none !important; }