/* 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 — ESCALA AZUL (marca, con profundidad navy→cobalto→cielo) === */
  --blue-950: #06182F;
  --blue-900: #0A2647;
  --blue-800: #0C3A6E;
  --blue-700: #003DB3;
  --blue-600: #0052CC;   /* ancla de marca */
  --blue-500: #2E6FE0;
  --blue-400: #5C9EFF;
  --blue-300: #8CBEFF;
  --blue-200: #B9D4F7;
  --blue-100: #E2ECFB;
  --blue-50:  #F1F6FE;

  /* === COLOR — PRIMARY (aliases sobre la escala) === */
  --primary-blue: #0052cc;            /* literal: usado en SVG/meta inline */
  --primary-blue-hover: var(--blue-700);
  --primary-blue-soft: rgba(0, 82, 204, 0.08);
  --primary-blue-glow: rgba(0, 82, 204, 0.22);

  /* Gradientes azules tokenizados (reemplazan el repetido 135deg,#0052cc,#003db3) */
  --grad-blue: linear-gradient(135deg, var(--blue-600), var(--blue-700));
  --grad-blue-deep: linear-gradient(135deg, var(--blue-700), var(--blue-900));
  --grad-blue-bright: linear-gradient(135deg, var(--blue-500), var(--blue-300));

  /* === COLOR — ACERO (acento secundario, frío) ===
     Reemplaza al latón/ámbar que acompañaba al azul: el dorado sobre azul se
     leía barato y no es lo que vende Roca. El acero es literalmente el material
     del catálogo (77 productos cromados contra 45 dorados), así que el acento
     dice algo del negocio en vez de decorar.
     El dorado NO desaparece del sitio: sigue vivo donde es un DATO — la muestra
     de color de un producto con acabado dorado (ver COLOR_GRADIENTS en
     js/producto-detalle-render.js). Eso es información, no adorno. */
  --steel-700: #3E4C5D;
  --steel-600: #4E5F73;
  --steel-500: #5E7189;   /* acento principal */
  --steel-400: #8496AB;
  --steel-300: #AFBDCD;
  --steel-100: #E6EBF1;
  --accent-steel: var(--steel-500);
  --accent-steel-soft: rgba(94, 113, 137, 0.12);

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

  /* === 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 (variedad: frío base / arena cálida / azul-tinte / navy) === */
  --surface-base: #F3F5F9;   /* frío claro — fondo default */
  --surface-alt:  #FAF7F1;   /* arena cálida — secciones alternas */
  --surface-sand-2: #F3ECDF; /* arena profunda — capas */
  --surface-tint: #ECF1FB;   /* azul-tintado frío — alternas */
  --surface-card: #FFFFFF;
  --surface-ink:  #0A2647;   /* navy profundo — secciones oscuras */
  /* Lavados sutiles reutilizables para romper monotonía en secciones planas */
  --wash-sand: radial-gradient(120% 90% at 50% 0%, var(--surface-alt) 0%, transparent 70%);
  --wash-blue: radial-gradient(100% 80% at 50% 0%, rgba(46, 111, 224, 0.045) 0%, transparent 70%);

  --bg-color: var(--surface-base);
  --bg-warm: var(--surface-alt);
  --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;

  /* REGLA DE NUMERALES — no romper.
     `--font-serif` (Newsreader cursiva) es el acento editorial para PALABRAS:
     citas, epígrafes, la palabra clave de un título, un nombre propio. NUNCA
     para cifras. La cursiva serif convierte un 13 en algo escrito a mano y
     desalinea las columnas de números (el 1 y el 7 de Newsreader tienen anchos
     distintos), así que toda cifra visible —conteos, medidas, índices 01/02/03,
     pasos, estadísticas— va en `--font-heading` con `tabular-nums`.
     Equivalencia óptica al migrar: serif italic 400/500 → sans 700/800, y
     bajar ~8% el font-size (el sans pesa más al mismo cuerpo).
     Acá pesa doble: el catálogo es medidas (0.45 × 0.45 × 1.75), y una cifra
     en cursiva serif dentro de una tabla de specs se lee como decoración. */
  --num-font: var(--font-heading);

  /* 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-blue: 0 14px 28px -10px rgba(0, 82, 204, 0.4);
  --shadow-clay: 0 18px 40px -16px rgba(154, 117, 74, 0.28);
  --shadow-steel: 0 14px 28px -10px rgba(94, 113, 137, 0.34);
  --shadow-navy: 0 24px 60px -20px rgba(10, 38, 71, 0.45);

  /* === ESTADO (sin rojo: inválido/error = ámbar ocre) === */
  --state-warn: #B5791B;
  --state-warn-soft: rgba(181, 121, 27, 0.22);

  /* === 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);
  /* Aliases usados en transiciones del catálogo/perfil (estaban sin definir → rompían el easing) */
  --mr-ease-glide: cubic-bezier(0.16, 1, 0.3, 1);
  --mr-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --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(0, 82, 204, 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%;
  /* Sin esto, iOS Safari infla el texto automáticamente al rotar a landscape
     y rompe el ritmo tipográfico del layout. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ============= 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(0, 82, 204, 0.55);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:active {
  background: rgba(0, 82, 204, 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;
}

/* Sin filter en los keyframes: animar blur sobre los snapshots de
   ::view-transition (dos capas a viewport completo) hacía trabajar de más a
   Safari justo durante la navegación. opacity+transform son composited. */
@keyframes pageSlideOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-6px) scale(0.996);
  }
}

@keyframes pageSlideIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(1.004);
  }
  to {
    opacity: 1;
    transform: translateY(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);
  /* Subido de clamp(1.9rem,3.8vw,2.9rem): quedaba chico frente a la palabra
     acentuada en azul — muy por debajo en jerarquía. */
  font-size: clamp(2.3rem, 4.6vw, 3.5rem);
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: var(--space-5);
  letter-spacing: -0.03em;
  line-height: 1.04;
}

.text-hero em {
  display: block;
  font-family: var(--font-heading);
  font-style: normal;
  /* Mismo tamaño que el resto del título: hereda, no se fija. */
  font-size: 1.1em;
  font-weight: 700;
  color: var(--primary-blue);
  letter-spacing: -0.03em;
  line-height: 1.04;
  margin-top: 0;
}

/* Reusable accent italic — only for VERY important words */
.accent-italic {
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 800;
  color: var(--primary-blue);
  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-heading);
  font-style: normal;
  font-weight: 800;
  color: var(--primary-blue);
  letter-spacing: -0.04em;
}

/* 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-blue);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary-blue);
  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: var(--accent-steel);
  box-shadow: 0 0 0 3px rgba(176, 136, 58, 0.28);
}

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.22s var(--ease-out), box-shadow 0.22s var(--ease-out),
              background 0.22s var(--ease-out), filter 0.22s var(--ease-out);
  border: none;
  font-family: var(--font-main);
  letter-spacing: 0.01em;
  /* `position` y `overflow` quedan de cuando había un destello recortado acá
     adentro. Se conservan porque otras reglas apoyan cosas sobre este contexto
     de apilado; ya no hay nada que recortar. */
  position: relative;
  overflow: hidden;
}

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

/* Acá había un ::after con un degradado blanco en diagonal que cruzaba el botón
   en 0,7s al pasar el mouse. Se fue: el destello llama la atención sobre EL
   EFECTO en vez de sobre el botón, y a 700ms todavía estaba cruzando cuando el
   usuario ya había hecho clic.
   Lo reemplaza un hover material: sube 2px, se aclara un punto y la sombra se
   CIÑE en vez de abrirse. Crece de 14 a 18px de desplazamiento (levantó) pero
   con más spread negativo, así que el halo azul se cierra en vez de expandirse
   — es la diferencia entre una pieza que se levanta y una que se enciende. Y
   las tres propiedades las mueve el compositor. */
.btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow: 0 18px 30px -12px rgba(0, 82, 204, 0.42);
}

/* El clic no tenía respuesta ninguna. Ahora el botón se apoya: vuelve al piso,
   se oscurece y la sombra casi desaparece. Más rápido que el hover a propósito
   — la pulsación tiene que sentirse inmediata. */
.btn-primary:active {
  transform: translateY(0);
  filter: brightness(0.96);
  box-shadow: 0 4px 10px -6px rgba(0, 82, 204, 0.4);
  transition-duration: 90ms;
}

/* Quien pidió menos movimiento conserva la respuesta, no el desplazamiento: se
   queda el cambio de brillo y de sombra, que ya bastan para saber que el botón
   está bajo el puntero, y se va la elevación. */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .mr-btn-primary,
  .mr-btn-whats {
    transition-duration: 0.01ms;
  }

  .btn-primary:hover,
  .btn-primary:active,
  .mr-btn-primary:hover,
  .mr-btn-primary:active,
  .mr-btn-whats:hover,
  .mr-btn-whats:active {
    transform: none;
  }
}

.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-blue);
  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-blue);
}

.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-blue);
  color: #FFF;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(0, 82, 204, 0.25);
  overflow: hidden;
}

.brand-mark img {
  display: block;
  /* logo-mark.svg ya viene centrado en un viewBox cuadrado con su propio aire,
     así que solo lo dejamos llenar el círculo y object-fit:contain lo centra. */
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.4s var(--ease-out);
}

.brand-mark:hover img {
  transform: 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-blue);
}

.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-blue), #003db3);
  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(0, 82, 204, 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%;
  transform: translateX(-50%);
  width: min(calc(100% - 48px), 1240px);
  min-height: 66px;
  padding: 10px 14px 10px 18px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
  gap: 18px;
  /* FROST A: blur EN EL ELEMENTO (difumina la página de verdad; una capa hija
     no capta el hero compositado por GSAP). El flash de esquina cuadrada
     (backdrop-filter+border-radius, 1 frame al cargar) se OCULTA revelando el
     navbar con una animación de OPACIDAD: en el micro-delay está en opacity:0
     (ese frame cuadrado es invisible) y luego sube ya redondeado. La opacidad
     anima confiable (el backdrop-filter no). CSS puro. Velo 0.4 + bisel. */
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(20px) saturate(185%) brightness(1.05);
  -webkit-backdrop-filter: blur(20px) saturate(185%) brightness(1.05);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 100px;
  /* clip-path: recorta la capa de blur SIEMPRE redonda (sin él, Chromium/Brave
     pinta las esquinas del backdrop-filter CUADRADAS sobre fondos de color —
     bug de compositing). OJO: clip-path también recorta el box-shadow propio →
     la sombra flotante (outset) vive en el hermano .nav-shadow; aquí solo
     quedan las sombras inset (sobreviven al clip). */
  clip-path: inset(0 round 100px);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 1),           /* catch-light borde superior */
    inset 0 -12px 22px -12px rgba(15, 18, 23, 0.28),  /* sombra interna = grosor */
    inset 0 0 0 1px rgba(255, 255, 255, 0.4),         /* anillo de vidrio brillante */
    inset 0 0 28px rgba(255, 255, 255, 0.18);         /* glow interno suave */
  animation: navReveal 0.32s ease 0.05s both;
}
/* Sombra flotante del navbar: en un HERMANO detrás (el clip-path del navbar
   recortaría una sombra propia). Clona la geometría del navbar en cada
   breakpoint — si cambiás top/width/min-height del navbar, cambialo AQUÍ. */
.nav-shadow {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 48px), 1240px);
  min-height: 66px;
  border-radius: 100px;
  box-shadow:
    0 26px 54px -18px rgba(15, 18, 23, 0.34),
    0 8px 18px -8px rgba(15, 18, 23, 0.12);
  z-index: 99;
  pointer-events: none;
  animation: navReveal 0.32s ease 0.05s both;
}
@keyframes navReveal { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .navbar-home, .nav-shadow { animation: none; } }

.navbar-home .nav-glass { display: none; }

/* Brillo superior (top-light) + redondeo del padre. El blur vive en .nav-glass. */
.navbar-home::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.06) 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-blue);
  color: #FFF;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: 0 10px 24px rgba(0, 82, 204, 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-blue);
}

.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-blue), #003db3);
  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(0, 82, 204, 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.08em;
  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, #091a32 0%, #0d2850 45%, #0052cc 100%);
  isolation: isolate;
}

/* Las capas son degradados radiales ESTÁTICOS (la animación se retiró hace
   tiempo). Difuminar un degradado suave con blur(60px) no cambia nada que
   el ojo vea — medido: diferencia media de 0.5/255 y máxima de 13, con el
   0.04% de los canales por encima de 8. Lo que sí costaba era el precio:
   cada capa mide 2016x1260 (2.5 millones de px), son tres, y el
   `will-change` + `translate3d` las dejaba promovidas a capa propia de GPU
   para siempre (~30 MB de textura). macOS difumina por hardware casi
   gratis; Windows lo hace en varias pasadas sobre D3D y ahí se cae el
   scroll. Sin filtro y sin promoción se pinta una sola vez y se acabó. */
.silk-layer {
  position: absolute;
  inset: -20%;
  mix-blend-mode: screen;
}

.silk-layer-1 {
  background:
    radial-gradient(circle at 30% 40%, rgba(0, 82, 204, 0.85) 0%, rgba(0, 82, 204, 0) 45%),
    radial-gradient(circle at 70% 60%, rgba(0, 162, 255, 0.55) 0%, rgba(0, 162, 255, 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(0, 210, 255, 0.32) 0%, rgba(0, 210, 255, 0) 40%),
    radial-gradient(circle at 20% 75%, rgba(0, 138, 255, 0.28) 0%, rgba(0, 138, 255, 0) 45%);
}

.silk-layer-3 {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 30%, rgba(5, 10, 30, 0.55) 100%),
    radial-gradient(circle at 10% 20%, rgba(0, 64, 180, 0.6) 0%, rgba(0, 64, 180, 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);
  -webkit-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;
}

/* Ocho tarjetas de 276x385 con `backdrop-filter` eran 851.000 px de
   difuminado recalculados en CADA cuadro de scroll, y lo que tenían detrás
   es el degradado liso de .silk-bg-container: difuminar algo liso devuelve
   lo mismo liso. Lo único que aportaba de verdad era el saturate(180%),
   que teñía de azul el 22% de fondo que deja pasar la tarjeta — eso se
   hornea en el propio color (blanco con una pizca de frío). Medido
   contra el original: diferencia media de 0.9/255, máxima de 24. */
.best-sellers .product-card {
  background: rgba(246, 249, 255, 0.79);
  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-blue);
  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-blue);
  color: #fff;
  transform: scale(1.1);
  box-shadow:
    0 18px 36px -8px rgba(0, 82, 204, 0.45),
    0 4px 12px rgba(0, 82, 204, 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-blue);
}

.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 {
}

/* ---- Reveal para lo que YA está en el primer viewport ----
   Usá [data-reveal-instant] en vez de [data-reveal] cuando el elemento se ve
   sin hacer scroll. Motivo medido (Lighthouse móvil, 2026-08-03): main.js
   anima [data-reveal] con gsap.fromTo({opacity:0}), que apaga el elemento
   recién cuando el script corre — detrás de gsap + ScrollTrigger, con defer.
   En 4G eso son ~5s: el catálogo se veía a 3.8s, se apagaba y volvía a los
   7.3s. El LCP quedaba en 7.3s (Render Delay = 89%) y se veía un parpadeo.
   Esta versión en CSS arranca en el primer pintado y se ve igual: mismos
   40px, misma duración de 0.9s y el expo.out de GSAP traducido a
   cubic-bezier(.16,1,.3,1). Para todo lo que está BAJO el doblez seguí
   usando [data-reveal] — ahí GSAP no cuesta nada porque el usuario todavía
   no llegó. */
@keyframes revealInstant {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: none; }
}

[data-reveal-instant] {
  animation: revealInstant 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal-instant] { animation: none; }
}

.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;
  }
  .nav-shadow {
    width: min(calc(100% - 40px), 1180px);
    min-height: 60px;
  }

  .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);
  }
  .nav-shadow {
    width: min(calc(100% - 32px), 1080px);
  }

  .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;
  }
  .nav-shadow {
    top: 12px;
  }
  /* 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);
  }
  .nav-shadow {
    min-height: 58px;
    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;
  }
  /* "Exhibiciones Roca" no cabe junto a los tres íconos en un teléfono de
     375px: el <strong> desbordaba su caja (el flex la encoge, el texto no) y
     se pintaba ENCIMA de la lupa. Se deja que el bloque de marca se encoja de
     verdad y el nombre se parte en dos líneas dentro del alto que ya tiene la
     barra, en vez de invadir los íconos. NO se toca top/width/min-height del
     navbar, así que .nav-shadow no necesita cambio. */
  .navbar-inner .nav-brand,
  .navbar-home .nav-brand {
    min-width: 0;
  }
  .navbar-inner .brand-copy,
  .navbar-home .brand-copy {
    min-width: 0;
  }
  .navbar-inner .brand-copy strong,
  .navbar-home .brand-copy strong {
    display: block;
    min-width: 0;
    line-height: 1.05;
    letter-spacing: -0.02em;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .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-heading);
  font-style: normal;
  font-weight: 700;
  color: var(--primary-blue);
  letter-spacing: -0.04em;
}

/* ---- top hairline edge / luminous border ---- */
.mr-edge {
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 82, 204, 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(0, 82, 204, 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-blue);
}

/* =================== 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-blue);
  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(0, 82, 204, 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-blue), #003db3);
  border-color: var(--primary-blue);
  color: #FFF;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 14px 26px -10px rgba(0, 82, 204, 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-blue);
  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-blue); }

.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(0, 82, 204, 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-blue);
}
.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-blue);
  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-blue), #003db3);
  color: #FFF;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 10px 22px -8px rgba(0, 82, 204, 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(0, 82, 204, 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(0, 82, 204, 0.08);
  display: grid;
  place-items: center;
  color: var(--primary-blue);
  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(0, 82, 204, 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-blue);
  color: #FFF;
  border-color: var(--primary-blue);
  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-blue), #003db3);
  color: #FFF;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  box-shadow: 0 14px 28px -10px rgba(0, 82, 204, 0.55);
}
/* Sans, no Newsreader: era el ÚNICO uso de la serif en la hoja compartida, y
   por él las 5 páginas que no la usan para nada bajaban una fuente de 143 KB.
   Ahora la serif solo la piden nosotros.html y soluciones.html, que sí la usan
   para texto editorial. Ver [[feedback_roca_numerales_en_sans]] en el vault. */
.mr-profile-head h3 {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-main);
  margin-top: 10px;
  letter-spacing: -0.03em;
  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-blue);
  box-shadow: 0 0 0 4px rgba(0, 82, 204, 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-blue); }
.mr-text-link {
  color: var(--primary-blue);
  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-blue), #003db3);
  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(0, 82, 204, 0.55);
  /* `all` prometía transicionar todo y de hecho no animaba el degradado (un
     background-image cambia de golpe, no interpola). Se nombran las que sí. */
  transition: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out),
              filter 0.22s var(--ease-out);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
/* Mismo destello que en .btn-primary, y encima animando `left`, que es una
   propiedad de LAYOUT: cada fotograma del barrido rehacía la maqueta del botón.
   Fuera. */
.mr-btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow: 0 18px 30px -12px rgba(0, 82, 204, 0.5);
}
.mr-btn-primary:active {
  transform: translateY(0);
  filter: brightness(0.96);
  box-shadow: 0 4px 10px -6px rgba(0, 82, 204, 0.5);
  transition-duration: 90ms;
}
.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-blue);
  color: #FFF;
  border-color: var(--primary-blue);
}

.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-blue), #003db3);
  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(0, 82, 204, 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-blue); 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(0, 82, 204, 0.18);
  transform: translateX(2px);
}
.mr-account-menu li > *:hover em { transform: translateX(4px); color: var(--primary-blue); }

/* =================== 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-heading);
  font-style: normal;
  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(0, 82, 204, 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(0, 82, 204, 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-blue);
}
.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-blue); color: #FFF; }
/* `> span` y no `span`: la cifra ahora vive dentro de un .num-roll y este
   selector alcanzaría también a la copia interna que se anima. */
.mr-qty > span {
  min-width: 26px;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.84rem;
  line-height: 1.5;
  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-blue); 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-blue);
}
.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: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out),
              filter 0.22s var(--ease-out);
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
}
/* El verde de WhatsApp no se toca: es color funcional, no decoración. Lo que
   cambia es la geometría de la sombra y el alfa, igual que en el primario. */
.mr-btn-whats:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow: 0 18px 30px -12px rgba(37, 211, 102, 0.5);
}
.mr-btn-whats:active {
  transform: translateY(0);
  filter: brightness(0.96);
  box-shadow: 0 4px 10px -6px rgba(37, 211, 102, 0.5);
  transition-duration: 90ms;
}

/* =================== Badge on nav cart icon =================== */
.mr-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--primary-blue);
  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(0, 82, 204, 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-blue);
  color: #FFF;
  border-color: var(--primary-blue);
  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);
  -webkit-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-blue);
  color: #FFF;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(0, 82, 204, 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-blue);
  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: 72px 40px 64px;
  position: relative;
  /* Lavado arena cálido: rompe la monotonía gris sin bloque duro (fade a transparente) */
  background: var(--wash-sand);
  border-radius: var(--radius-xl);
}

.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.08em;
  text-transform: uppercase;
  color: var(--primary-blue);
}

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

.why-roca-header h2 em {
  font-family: var(--font-heading);
  font-style: normal;
  color: var(--primary-blue);
      font-size: 1.1em;
      line-height: 1.04;
    }

.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(0, 82, 204, 0.12), rgba(94, 113, 137, 0.1));
  margin-bottom: 20px;
}

.why-roca-icon svg {
  width: 26px;
  height: 26px;
  stroke: var(--primary-blue);
  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);
}

/* Cifra: sans + tabular (ver REGLA DE NUMERALES arriba). */
.why-roca-stat {
  font-family: var(--num-font);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--primary-blue);
  margin-bottom: 8px;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

@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(0, 82, 204, 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(0, 82, 204, 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.08em;
  text-transform: uppercase;
  color: var(--primary-blue);
  margin-bottom: 14px;
}

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

.b2b-content h2 em {
  font-family: var(--font-heading);
  font-style: normal;
  color: var(--primary-blue);
  -webkit-text-fill-color: currentColor;
      font-size: 1.1em;
      line-height: 1.04;
    }

.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(0, 82, 204, 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-blue-soft);
  flex-shrink: 0;
  transition: background 0.4s var(--ease-out);
}

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

.b2b-segment-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--primary-blue);
  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-blue), #003db3);
  color: #fff;
  font-weight: 600;
  font-size: 0.96rem;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: var(--shadow-blue);
  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(0, 82, 204, 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;
  /* Sin backdrop-filter: detrás no hay más que el gris liso de la página,
     y difuminar un color plano devuelve el mismo color plano. Medido:
     diferencia media de 0.03/255 (o sea, ninguna). */
  background: rgba(255, 255, 255, 0.78);
  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-blue-soft);
  color: var(--primary-blue);
  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: 64px 40px 56px;
  position: relative;
  /* Lavado azul sutil: cambia el aire respecto a la sección arena previa */
  background: var(--wash-blue);
  border-radius: var(--radius-xl);
}

.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.08em;
  text-transform: uppercase;
  color: var(--primary-blue);
}

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

.branches-header h2 em {
  font-family: var(--font-heading);
  font-style: normal;
  color: var(--primary-blue);
      font-size: 1.1em;
      line-height: 1.04;
    }

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

/* Las dos tarjetas de sucursal suman 745.000 px de superficie. Iban con
   backdrop-filter sobre el fondo liso de la página: el difuminado no
   producía nada (medido: diferencia media de 0.08/255, máxima de 3) y en
   Windows costaba dos pasadas de GPU por cuadro. */
.branch-card {
  background: rgba(255, 255, 255, 0.75);
  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-blue);
}

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

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

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

/* 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-blue);
}

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

.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-blue), #003db3);
  color: #fff;
  box-shadow: var(--shadow-blue);
}

.branch-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 40px -10px rgba(0, 82, 204, 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;
  /* 120+140+160 = 420px de aire antes del contenido. Es el cierre, no un
     hero: 72/88 alcanza para que respire sin costar media pantalla. */
  margin: 80px 0 0;
  padding: 100px 40px 108px;
  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);
  /* Esta sección es lo último antes del footer, y el footer es una losa con
     las esquinas de arriba redondeadas. Pegadas una a la otra, esas esquinas
     dejaban dos picos claros que parecían un defecto. Con aire de por medio y
     el mismo radio espejado abajo, se leen como dos paneles sobre la página. */
  margin-bottom: clamp(28px, 3.5vw, 56px);
  border-radius: 0 0 clamp(18px, 3.2vw, 40px) clamp(18px, 3.2vw, 40px);
  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(92, 158, 255, 0.40) 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(92, 158, 255, 0.18) 0%,
      rgba(46, 111, 224, 0.14) 22%,
      rgba(92, 158, 255, 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.
   2026-08-04: también se retiró el `filter: blur(60px)`. Estas dos manchas
   ya son degradados radiales suaves; difuminarlas es pagar dos superficies
   de render del tamaño de medio viewport para un resultado idéntico
   (medido: la diferencia queda DENTRO del ruido de la propia sección). */
.follow-bg::before {
  content: "";
  position: absolute;
  width: 70%;
  height: 70%;
  top: -10%;
  left: -10%;
  background: radial-gradient(circle at 30% 30%, rgba(92, 158, 255, 0.22), transparent 60%);
}
.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%);
}

/* Orbs adicionales flotantes que dan más vida al fondo.
   El blur(50px) que llevaban se sustituyó por el mismo difuminado horneado
   en el propio degradado (una parada intermedia y caída más larga): mismo
   resultado a la vista, cero superficies de render y cero capas de GPU
   promovidas por `will-change`. */
.follow-orb {
  position: absolute;
  border-radius: 50%;
  opacity: 0.45;
  pointer-events: none;
  mix-blend-mode: screen;
}
/* 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(92, 158, 255, 0.50) 0%, rgba(92, 158, 255, 0.19) 45%, transparent 78%);
}
.follow-orb-2 {
  width: 240px;
  height: 240px;
  top: 55%;
  right: 6%;
  background: radial-gradient(circle, rgba(46, 111, 224, 0.50) 0%, rgba(46, 111, 224, 0.19) 45%, transparent 78%);
}
.follow-orb-3 {
  width: 200px;
  height: 200px;
  bottom: 12%;
  left: 22%;
  background: radial-gradient(circle, rgba(176, 136, 58, 0.45) 0%, rgba(176, 136, 58, 0.17) 45%, transparent 78%);
}

.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(46, 111, 224, 0.42) 1px, transparent 1.5px),
    radial-gradient(circle at 28% 78%, rgba(92, 158, 255, 0.38) 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(92, 158, 255, 0.38) 1px, transparent 1.5px),
    radial-gradient(circle at 8% 60%, rgba(140, 190, 255, 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 {
  /* Mismo patrón que el resto de la home (punto + texto), solo adaptado a
     fondo oscuro. Antes era una pastilla con borde y blur: la única del
     sitio, y la que más lo hacía ver genérico. */
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 18px;
}
.follow-us .eyebrow::before {
  background: var(--primary-blue);
}

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

.follow-us h2 em {
  /* Una sola tipografía en el cierre: era lo único de la sección que no
     era Plus Jakarta Sans. El énfasis lo sostienen el peso y el tamaño.
     Antes llevaba texto con degradado azul→dorado: decoración sin significado,
     peor contraste y el dorado que Bryan no quiere junto al azul. */
  font-family: inherit;
  font-style: normal;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--blue-300);
  display: block;
      font-size: 1.1em;
      line-height: 1.04;
    }

.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: 560px;
  margin: 0 auto 28px;
  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: var(--blue-400);
  box-shadow: 0 0 12px rgba(92, 158, 255, 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;
  /* leve: azul claro -> azul Facebook -> azul profundo, mismo tono */
  --brand-gradient: linear-gradient(135deg, #4596F7 0%, #1877F2 50%, #0B57CF 100%);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  .social-fb {
    --brand-gradient: linear-gradient(135deg in oklch,
      oklch(0.70 0.16 248) 0%,
      oklch(0.60 0.20 258) 50%,
      oklch(0.48 0.18 266) 100%);
  }
}

.social-tt {
  --brand-color: #25F4EE;
  /* cyan -> indigo -> pink: bridge color keeps the blend off the muddy gray midpoint */
  --brand-gradient: linear-gradient(135deg, #25F4EE 0%, #5773EE 52%, #FE2C55 100%);
}

/* Modern browsers: interpolate in OKLCH so every step stays luminous, never gray */
@supports (background: linear-gradient(in oklch, red, blue)) {
  .social-tt {
    --brand-gradient: linear-gradient(135deg in oklch,
      oklch(0.86 0.15 195) 0%,
      oklch(0.62 0.21 285) 50%,
      oklch(0.66 0.23 18) 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);
}

/* En escritorio el degradado se enciende al pasar el mouse (hover).
   En táctil (cel/tablet) no hay hover, así que ahí lo mostramos siempre
   para que el color SÍ se vea — sin afectar el hover de escritorio. */
@media (hover: none) {
  .social-card::before { opacity: 1; }
  .social-card-handle { color: rgba(255, 255, 255, 0.85); }
}

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

@media (max-width: 768px) {
  /* OJO: el atajo `margin` pisaría el margin-bottom (el aire contra el footer)
     y los margin-left/right negativos del full-bleed. Solo el de arriba. */
  .follow-us { padding: 68px 22px 76px; margin-top: 64px; }
  .social-main { grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 480px; }
  .social-card { padding: 20px 16px; min-height: 158px; gap: 12px; }
  .social-card-label { font-size: 1.06rem; }
  .social-card-handle { font-size: 0.78rem; }
  .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; }
}

/* 420→340: a 420 las tarjetas se aplanaban a una fila en CUALQUIER
   teléfono (un iPhone mide 390), que es justo donde peor se ven. A 340
   entran dos columnas verticales de 152px hasta en un Android de 360, y
   la fila queda solo para pantallas muy viejas. */
@media (max-width: 340px) {
  .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(0, 82, 204, 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-blue);
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0, 82, 204, 0.22);
}

.mobile-menu-brand-mark img {
  width: 100%;
  height: 100%;
  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-blue);
  color: #FFF;
  border-color: var(--primary-blue);
}

.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-blue);
}

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

.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(0, 82, 204, 0.08), rgba(0, 82, 204, 0.02));
  color: var(--primary-blue);
}

.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-blue);
  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(0, 82, 204, 0.55);
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.mobile-menu-cta:hover {
  background: var(--primary-blue-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-blue);
}

.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.). */
/* line-height 1.04, no 0.94.
   Con 0.94 la caja de línea es MÁS CHICA que la letra, así que en cuanto un
   título envuelve a dos líneas los descendentes (p, q, g) chocan con las
   mayúsculas de la línea siguiente. Medido en el h1 de soluciones
   ("Equipamos tu local para que / venda más"): 12,3 px de solape.
   1.04 despeja el descendente y mantiene el aire apretado que busca el diseño;
   en títulos de UNA línea no cambia nada visible. */
h1.display-title,
h2.display-title {
  font-weight: 600;
  font-size: clamp(1.95rem, 4vw, 2.95rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
h1.display-title em,
h2.display-title em {
  display: block;
  font-family: var(--font-heading);
  font-style: normal;
  font-size: 1.1em;
  font-weight: 700;
  color: var(--primary-blue);
  line-height: 1.04;
  margin-top: 0;
  letter-spacing: -0.03em;
}

/* ============= 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; }

/* ============================================================
   SITE FOOTER  ·  minimal, losa negra
   Componente compartido por TODAS las páginas.
   Solo marca + copyright a la izquierda y cuatro columnas de
   enlaces a la derecha. Sin CTA, sin franja de confianza, sin
   barra inferior: el WhatsApp vive en el botón flotante y en el
   navbar, así que aquí no hace falta repetirlo.
   ============================================================ */
.site-footer{
  --sf-bg:       #0A0A0C;   /* negro (una pizca de frío para acompañar al azul) */
  --sf-fg:       #EEF1F6;   /* blanco frío: encabezados de columna y marca */
  --sf-muted:    #868C99;   /* gris de los enlaces en reposo */
  --sf-red:      #5C9EFF;   /* azul de marca aclarado para fondo negro */
  --sf-wa:       #25D366;

  /* Losa con el borde superior redondeado: el footer "sube" sobre la página
     clara en vez de ser una franja pegada. El degradado radial es la luz
     cenital: nace en el canto de arriba y muere antes de las columnas.
     La referencia lleva además un filete claro de 1px sobre ese canto; aquí
     NO va, porque recortado contra una página CLARA no contrastaría con nada. */
  position: relative;
  border-radius: clamp(18px, 3.2vw, 40px) clamp(18px, 3.2vw, 40px) 0 0;
  background:
    radial-gradient(52% 220px at 50% 0%, rgba(228, 238, 255, .10), rgba(228, 238, 255, 0) 100%),
    var(--sf-bg);
  color: var(--sf-fg);
  font-family: var(--font-main, 'Plus Jakarta Sans', system-ui, sans-serif);
  margin-top: 0;
  -webkit-font-smoothing: antialiased;
}
.site-footer *{ box-sizing: border-box; }
.sf-inner{
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(46px, 6vw, 84px) clamp(20px, 5vw, 48px) clamp(40px, 5vw, 68px);
}

/* ---------- Rejilla: marca + 4 columnas ---------- */
.sf-grid{
  display: grid;
  grid-template-columns: 1.5fr .82fr .82fr .82fr .95fr;
  gap: clamp(26px, 2.6vw, 40px);
}
.sf-logo{ width: 200px; height: auto; margin-bottom: 18px; display: block; }
.sf-brand p{
  margin: 0; color: var(--sf-muted);
  font-size: .84rem; line-height: 1.6;
}

/* Encabezado brillante + lista apagada: ese contraste es toda la jerarquía. */
.sf-col h4{
  margin: 0 0 16px; font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 600; color: var(--sf-fg);
}
.sf-col ul{ list-style: none; margin: 0; padding: 0; }
.sf-col li{ margin-bottom: 9px; }
.sf-col li:last-child{ margin-bottom: 0; }
.sf-col a{
  display: inline-block;
  color: var(--sf-muted); font-size: .88rem; text-decoration: none;
  transition: color .2s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.sf-col a:hover{ color: var(--sf-fg); transform: translateX(3px); }

/* Redes: fila de texto con el ícono al frente, igual que el resto de enlaces. */
.sf-social a{ display: inline-flex; align-items: center; gap: 9px; }
.sf-social a svg{
  width: 15px; height: 15px; flex: none; opacity: .55;
  transition: opacity .2s ease, color .2s ease;
}
.sf-social a:hover svg{ opacity: 1; color: var(--sf-red); }
.sf-social a.sf-wa-ico:hover svg{ color: var(--sf-wa); }

/* ---------- Reveal al entrar a vista ----------
   La clase .sf-anim la pone el <script> inline del footer; si no hay JS o el
   usuario pidió menos movimiento nunca se agrega y todo se ve de una. El
   escalonado sale del --sf-delay que el mismo script asigna por índice. */
.site-footer.sf-anim [data-sf-rise]{
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity .75s cubic-bezier(.16,1,.3,1) var(--sf-delay, 0ms),
    transform .75s cubic-bezier(.16,1,.3,1) var(--sf-delay, 0ms);
}
.site-footer.sf-anim [data-sf-rise].sf-in{ opacity: 1; transform: none; }

/* El desenfoque de entrada solo en escritorio con puntero fino: animar
   `filter` obliga a repintar cada frame y en Safari móvil traba el scroll. */
@media (min-width: 1024px) and (pointer: fine){
  html:not(.perf-lite) .site-footer.sf-anim [data-sf-rise]{
    filter: blur(5px);
    transition:
      opacity .75s cubic-bezier(.16,1,.3,1) var(--sf-delay, 0ms),
      transform .75s cubic-bezier(.16,1,.3,1) var(--sf-delay, 0ms),
      filter .75s cubic-bezier(.16,1,.3,1) var(--sf-delay, 0ms);
  }
  html:not(.perf-lite) .site-footer.sf-anim [data-sf-rise].sf-in{ filter: blur(0); }
}

/* ---------- Lockup de marca Exhibiciones en el footer ---------- */
.sf-brandmark{ display:inline-flex; align-items:center; gap:11px; margin-bottom:13px; text-decoration:none; }
.sf-brandmark img{ width:40px; height:40px; flex:none; }
.sf-brandmark span{ font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-weight:800; font-size:1.06rem; letter-spacing:-0.01em; color: var(--sf-fg); }
/* ---------- Responsive ---------- */
/* La marca pasa arriba a todo lo ancho y las cuatro columnas quedan en una
   sola fila: con 3 columnas, "Contacto" caía solo con un hueco al lado. */
@media (max-width: 1040px){
  .sf-grid{ grid-template-columns: repeat(4, 1fr); gap: 30px 26px; }
  .sf-brand{ grid-column: 1 / -1; margin-bottom: 10px; }
}
/* En móvil hay elementos fijos abajo (barra "Cotizar" del inicio, botón
   flotante de WhatsApp en el resto) que taparían la última fila de enlaces.
   Se les deja su alto de aire, más el área segura del iPhone. */
@media (max-width: 900px){
  .sf-inner{ padding-bottom: calc(clamp(40px, 5vw, 68px) + 78px + env(safe-area-inset-bottom)); }
}
@media (max-width: 700px){
  .sf-grid{ grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .sf-logo{ width: 170px; }
}

/* ===================================================================
   Anti-descarga casual de imágenes — solo fricción, NO protección real.
   El navegador siempre baja la imagen para mostrarla; esto solo evita
   que el usuario casual la guarde arrastrándola o con long-press (móvil).
   El bloqueo de clic derecho vive en js/main.js. admin-local.html no
   carga main.js ni esta regla pesa ahí, así que el admin trabaja libre.
   =================================================================== */
img {
  -webkit-user-drag: none;     /* Chrome/Safari: no arrastrar la imagen fuera */
  -webkit-touch-callout: none; /* iOS: sin menú "Guardar imagen" en long-press */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* ============= PERF-LITE: hardware débil (clase puesta en <html> por el
   script síncrono del <head> de cada página + la sonda de FPS de main.js,
   que mide durante el scroll — es la red de seguridad para las máquinas
   que igual sufren después de haber abaratado los efectos).
   Apaga los efectos más caros del sitio manteniendo la legibilidad:
   los fondos glass pasan a sólidos, los blurs decorativos desaparecen,
   las animaciones CSS decorativas colapsan a su estado final.
   Las TRANSICIONES (hover, menú, reveals) se conservan: son one-shot
   y baratas; lo que mata máquinas débiles es el costo por-frame de
   backdrop-filter/blur y los loops infinitos. ============= */

/* Todo backdrop-filter fuera — es el efecto más caro del catálogo
   (se recomputa en cada frame de scroll sobre lo que tenga detrás). */
html.perf-lite *,
html.perf-lite *::before,
html.perf-lite *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Animaciones CSS decorativas: saltar directo al estado final. Truco
   estándar (mismo que usan los polyfills de reduced-motion): duración
   casi cero + 1 iteración. Las transiciones NO se tocan. */
html.perf-lite *,
html.perf-lite *::before,
html.perf-lite *::after {
  animation-duration: 0.01s !important;
  animation-iteration-count: 1 !important;
}

/* Blurs gigantes decorativos: quedan como manchas suaves sin filtro. */
html.perf-lite .silk-layer,
html.perf-lite .follow-orb,
html.perf-lite .follow-spotlight {
  filter: none !important;
}

/* Hero blur del home (imagen con blur de página completa): fuera.
   El fondo del body queda limpio detrás del hero. */
html.perf-lite body.home-page::before {
  display: none;
}

/* Fondos glass → sólidos legibles (mismos valores que ya usa móvil). */
html.perf-lite .navbar-home {
  background: rgba(255, 255, 255, 0.94) !important;
}
html.perf-lite .benefits-bar {
  background: rgba(255, 255, 255, 0.95) !important;
}
html.perf-lite .category-content {
  background: rgba(255, 255, 255, 0.96) !important;
}


/* ═══ Cierre de la home ═══
   Antes eran dos secciones seguidas pidiendo lo mismo: "¿Listo para
   transformar tu espacio?" (con canvas y video) y "Conectemos en redes"
   (con las 4 tarjetas). Ahora es una sola, en dos actos separados por un
   filo: primero la acción, después los canales. Las tarjetas de red
   conservan su tamaño original — comprimirlas ahorraba espacio pero le
   quitaba presencia a lo único con color de la sección. */
.close-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.close-actions .btn-primary { min-height: 54px; padding: 0 30px; font-size: 0.98rem; }
.close-ghost {
  min-height: 54px;
  padding: 0 26px;
  font-size: 0.98rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.close-ghost:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.38);
  transform: translateY(-2px);
}

/* Una línea, no tres viñetas apiladas: los separadores hairline le dan
   ritmo horizontal y ocupan una fracción del alto. */
.close-points {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 0;
  width: fit-content;
  max-width: 760px;
}
.close-points li {
  position: relative;
  padding: 0 18px;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}
.close-points li + li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 1px; height: 13px;
  margin-top: -6.5px;
  background: rgba(255, 255, 255, 0.18);
}

/* Filo que separa los dos actos */
.close-divider {
  width: min(100%, 620px);
  height: 1px;
  margin: 46px auto 40px;
  background: linear-gradient(90deg,
    transparent, rgba(255, 255, 255, 0.22) 18%,
    rgba(255, 255, 255, 0.22) 82%, transparent);
}

.close-social-label {
  display: block;
  margin-bottom: 22px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}
.social-cards-wrap { flex-direction: column; align-items: center; }

@media (max-width: 600px) {
  .close-actions { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 26px; }
  .close-actions .btn { width: 100%; }
  /* En columna: alinear el bloque, no cada línea, y cambiar el filo
     vertical por uno horizontal entre filas. */
  .close-points {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    width: fit-content;
  }
  .close-points li { padding: 0 0 0 16px; font-size: 0.85rem; }
  .close-points li + li::before {
    left: 0; top: 50%; width: 6px; height: 6px;
    margin-top: -3px; border-radius: 50%;
    background: var(--primary-blue);
  }
  .close-points li:first-child::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 6px; height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: var(--primary-blue);
  }
  .close-divider { margin: 34px auto 30px; }
  .close-social-label { margin-bottom: 18px; }
}



/* Los folios editoriales (arriba y abajo del cierre) funcionan en desktop
   como una línea fina a cada lado. En móvil, con 0.22em de tracking, cada
   uno wrapea a dos o tres renglones y el bloque se ve desordenado: es
   decoración, así que en teléfono se va. */
@media (max-width: 700px) {
  .follow-folio,
  .follow-footer { display: none; }
}




/* Títulos de tarjeta: reparte las líneas en vez de dejar una palabra suelta
   ("Escritorio de 1 Gaveta 91 / cm"). Progresivo: los navegadores que no lo
   soportan simplemente cortan como siempre. */
.catalog-card-info h3,
.product-info h3,
.hero-cat-name,
.product-title {
  text-wrap: balance;
}

/* ============================================================
   CONTADOR CON ROLL — selectores de cantidad (ficha y tarjeta)
   ============================================================
   Al tocar + o −, el número saliente se va en la dirección del cambio y el
   entrante llega desde el lado opuesto: sumar levanta la cifra, restar la baja.
   Sin esto el cambio es instantáneo y a 42px de distancia del pulgar no se ve
   que pasó algo.

   Reglas del componente:
   · El movimiento es SOLO transform + opacity. Nada de animar alto/ancho: la
     caja mide igual con 1 que con 10 gracias a min-width + tabular-nums, así
     que la fila de controles nunca salta.
   · Las dos copias se apilan en la MISMA celda de grid (1 / 1). Position
     absolute obligaría a fijar alto a mano; el grid lo deriva del texto.
   · `overflow: hidden` recorta las copias en viaje. Necesita `line-height`
     explícito, si no el recorte cae encima de la cifra.
   · La animación la dispara JS con WAAPI (`.animate`), no una clase CSS: clicks
     rápidos se pisarían entre sí con toggles de clase. Ver `rollNumero()` en
     js/overlays.js, que la publica en window.ExhibicionesRocaUI. */
.num-roll {
  display: inline-grid;
  overflow: hidden;
  place-items: center;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.num-roll-v {
  grid-area: 1 / 1;
  display: block;
}

/* El botón acompaña el cambio con un press corto — el mismo gesto que ya usan
   los +/− del carrito (.mr-qty button:active). */
.qty-control button:active,
.cc-qty-btn:active {
  transform: scale(0.9);
  transition: transform 120ms var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .qty-control button:active,
  .cc-qty-btn:active { transform: none; }
}