/*
 * ═══════════════════════════════════════════════════════════════════
 * ecommerce.css — Layout primitives para hero carousel + category strip
 * ═══════════════════════════════════════════════════════════════════
 *
 * Reset deliberado de algunos heritages futuristas. Aqui priorizamos
 * legibilidad retail, no efectos especiales.
 */

/* ───────────────────────────────────────────────────────────────
   HERO CAROUSEL
   ─────────────────────────────────────────────────────────── */

.hero-carousel-root {
  /* Container relative para arrows + dots posicionados */
  background: var(--c-mist, #fafafa);
}

.hero-track {
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  /* Cursor grab feedback en desktop */
  cursor: grab;
}
.hero-track:active { cursor: grabbing; }
.hero-track::-webkit-scrollbar { display: none; }

.hero-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  /* Responsive aspect ratio — vertical en mobile, panoramico en desktop */
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-mega-cream, #fcf2eb);
}

@media (min-width: 640px) {
  .hero-slide { aspect-ratio: 16 / 9; }
}
@media (min-width: 1024px) {
  .hero-slide { aspect-ratio: 16 / 6; min-height: 360px; max-height: 560px; }
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Slide "styled" (CSS-only banner editorial) */
.hero-slide-styled {
  display: flex;
  align-items: center;
  padding: 3rem 1.5rem;
  color: white;
  position: relative;
  overflow: hidden;
}

@media (min-width: 640px) {
  .hero-slide-styled { padding: 4rem 3.5rem; }
}
@media (min-width: 1024px) {
  .hero-slide-styled { padding: 4.5rem 6rem; }
}
@media (min-width: 1440px) {
  .hero-slide-styled { padding: 5rem 8rem; }
}

.hero-slide-styled::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 60%;
  height: 180%;
  background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 60%);
  pointer-events: none;
}

/* Halo borgoña sutil para el slide del video (fondo crema) — agrega
   un toque de color del brand sin saturar. */
.hero-slide-styled-video::after {
  content: "";
  position: absolute;
  top: 10%;
  left: -10%;
  width: 50%;
  height: 80%;
  background: radial-gradient(circle, rgba(147, 0, 11, 0.06) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.hero-slide-content {
  position: relative;
  max-width: 640px;
  z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────
   SLIDE STYLED + VIDEO TIPO CELULAR (texto izq · phone der en desktop;
   phone arriba · texto abajo en mobile)
   ────────────────────────────────────────────────────────────── */
.hero-slide-styled-video {
  /* Override del flex base: usamos grid 2-cols en desktop, 1-col en mobile. */
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
  justify-items: center;
}

/* Mobile: el celular va ARRIBA del contenido. */
.hero-slide-styled-video .hero-slide-content { order: 2; text-align: center; }
.hero-slide-styled-video .hero-phone-frame { order: 1; }

@media (min-width: 768px) {
  /* Desktop: texto + celular como un PAR centrado (no pegado a la derecha).
     Columnas auto + justify-content:center → el conjunto queda balanceado
     en el medio del slide. */
  .hero-slide-styled-video {
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    gap: 3.5rem;
  }
  .hero-slide-styled-video .hero-slide-content {
    order: 0;
    text-align: left;
    max-width: 460px;
  }
  .hero-slide-styled-video .hero-phone-frame {
    order: 0;
  }
}

/* ─── FRAME TIPO CELULAR (minimalista) ───────────────────────── */
/* Simula un iPhone Pro pero con sombras suaves — pieza de mockup
   editorial, no agresivo. Aspect 9:19.5, bezel sutil, notch dinamico. */
.hero-phone-frame {
  position: relative;
  z-index: 1;
  width: clamp(200px, 40vw, 260px);
  aspect-ratio: 9 / 19.5;
  background: linear-gradient(160deg, #18181b 0%, #0a0a0a 100%);
  border-radius: 38px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.3) inset,
    0 30px 70px -10px rgba(15, 12, 8, 0.35),
    0 15px 30px -5px rgba(15, 12, 8, 0.18);
  overflow: hidden;
  transition: transform 0.6s var(--ease-out-expo, ease);
}
.hero-slide:hover .hero-phone-frame {
  transform: translateY(-4px);
}

@media (min-width: 768px) {
  .hero-phone-frame { width: 180px; }
}
@media (min-width: 1024px) {
  .hero-phone-frame { width: 195px; }
}
@media (min-width: 1280px) {
  .hero-phone-frame { width: 215px; }
}

/* ─── MÓVIL: el slide del video (celular) debe caber sin solaparse ───
   El 4:5 general es muy corto para "celular + texto" → se desbordaba, se
   cortaba y el navbar fijo tapaba la parte de arriba. En móvil dejamos que
   este slide CREZCA con su contenido y achicamos el celular. El desktop no
   se toca (allí el layout 2 columnas ya funciona bien). */
@media (max-width: 767px) {
  .hero-slide-styled-video {
    aspect-ratio: auto;            /* anula el 4:5: el alto se ajusta al contenido */
    padding: 2rem 1.25rem 2.5rem;  /* aire arriba/abajo, sin desbordar */
    gap: 1.25rem;
  }
  .hero-slide-styled-video .hero-phone-frame {
    width: clamp(150px, 42vw, 190px);  /* celular más chico → no domina la pantalla */
  }
  /* Texto centrado y contenido sin ancho excesivo en móvil. */
  .hero-slide-styled-video .hero-slide-content {
    max-width: 100%;
  }
  /* Botón "Ver ubicación" más arriba en móvil (ajuste fino). */
  .hero-slide-styled-video .hero-slide-cta {
    transform: translateY(-10px);
  }
}

/* Notch dinamico estilo iPhone 14 Pro — pill, no muesca clasica */
.hero-phone-notch {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 22px;
  background: #050505;
  border-radius: 999px;
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.4);
}

/* El video dentro del frame ocupa todo el espacio interno */
.hero-phone-frame .hero-slide-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 26px;
  cursor: pointer;  /* hint: click activa sonido */
  filter: saturate(1.05) contrast(1.03);
}

/* ─── BOTON DE SONIDO (overlay top-right del frame) ──────────── */
.hero-video-sound-toggle {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease;
}
.hero-video-sound-toggle:hover {
  background: rgba(0, 0, 0, 0.75);
  transform: scale(1.08);
}
.hero-video-sound-toggle svg {
  width: 18px;
  height: 18px;
}
/* Mostrar el icono correcto segun el estado */
.hero-video-sound-toggle .icon-sound { display: none; }
.hero-video-sound-toggle[data-sound-state="on"] .icon-muted { display: none; }
.hero-video-sound-toggle[data-sound-state="on"] .icon-sound { display: block; }
.hero-video-sound-toggle[data-sound-state="on"] {
  background: rgba(220, 38, 38, 0.85);  /* rojo cuando esta sonando */
  border-color: rgba(255, 255, 255, 0.25);
}

/* En slides con video, ocultamos el halo decorativo — el video y el
   marco del celular son piezas visuales por si solas; cualquier halo
   adicional ensucia la composicion. */
.hero-slide-styled-video::before {
  display: none;
}

/* ─────────────────────────────────────────────────────────────────
   DECORACION EDITORIAL — composicion tipografica a la derecha del
   hero principal (Mayoristas sin intermediarios)
   ─────────────────────────────────────────────────────────────── */
.hero-slide-styled-decorated {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  justify-items: start;
}

@media (min-width: 900px) {
  .hero-slide-styled-decorated {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 3.5rem;
  }
}

.hero-slide-decoration {
  position: relative;
  z-index: 1;
  /* Mobile: la decoracion queda oculta para no robar foco al CTA. */
  display: none;
}

@media (min-width: 900px) {
  .hero-slide-decoration {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    width: 100%;
    max-width: 380px;
    padding-left: 1rem;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }
}

/* Numero gigante editorial — el ancla visual */
.hero-deco-mega-num {
  font-family: 'Archivo', 'Geist', sans-serif;
  font-weight: 900;
  font-size: clamp(5rem, 9vw, 8rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.95);
  /* Sutil reflejo tipografico tipo print */
  background: linear-gradient(180deg, #ffffff 30%, rgba(255, 255, 255, 0.4) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-deco-mega-num sup {
  font-size: 0.45em;
  font-weight: 700;
  vertical-align: super;
  margin-left: -0.1em;
  opacity: 0.7;
}

.hero-deco-label {
  font-family: 'Geist', serif;
  font-weight: 200;
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

.hero-deco-divider {
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.25) 0%, transparent 100%);
  margin: 0.5rem 0;
}

.hero-deco-mini-grid {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.hero-deco-mini {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.hero-deco-mini-num {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 1.875rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}
.hero-deco-mini-num sub {
  font-size: 0.4em;
  font-weight: 500;
  vertical-align: baseline;
  margin-left: 0.15em;
  opacity: 0.65;
}

.hero-deco-mini-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.55);
}

.hero-slide-eyebrow {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.875rem;
  opacity: 0.85;
  padding: 0.25rem 0.75rem;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.hero-slide-title {
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.95;
  font-size: clamp(2rem, 6vw, 4.5rem);
  /* Drop-shadow sutil para garantizar legibilidad sobre cualquier bg.
     No se nota visualmente en fondos claros, pero sostiene el texto
     blanco sobre los gradients del hero. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.hero-slide-title em {
  font-style: italic;
  font-weight: 200;          /* contraste editorial: 900 + 200 italic */
  font-family: 'Geist', serif;
  opacity: 0.92;
}

/* Texto BLANCO en el slide oscuro (burgundy). El slide de video va sobre
   fondo crema y mantiene su texto oscuro (no lleva esta regla). Forzamos
   con !important para evitar que algún color heredado lo oscurezca. */
.hero-slide-styled:not(.hero-slide-styled-video) .hero-slide-title,
.hero-slide-styled:not(.hero-slide-styled-video) .hero-slide-title em,
.hero-slide-styled:not(.hero-slide-styled-video) .hero-slide-eyebrow,
.hero-slide-styled:not(.hero-slide-styled-video) .hero-slide-body {
  color: #ffffff !important;
}

/* Em del titulo sobre fondo crema: rojo del brand para destaque */
.hero-slide-styled-video .hero-slide-title em {
  color: var(--c-mega-red, #93000b);
  opacity: 1;
}

.hero-slide-body {
  margin-top: 1rem;
  font-size: clamp(0.875rem, 1.2vw, 1.05rem);
  opacity: 0.85;
  max-width: 38ch;
  line-height: 1.5;
}

.hero-slide-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  background: white;
  color: var(--c-mega-ink, #1f1b17);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
  padding: 0.85rem 1.65rem;
  border-radius: 999px;
  transition: transform 200ms var(--ease-out-expo, ease), box-shadow 200ms ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.hero-slide-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
}

/* En slides con fondo claro/crema (texto oscuro), el CTA blanco se
   pierde — invertimos a rojo del brand para mantener contraste. */
.hero-slide-styled-video .hero-slide-cta {
  background: var(--c-mega-red, #93000b);
  color: #fff;
  box-shadow: 0 6px 18px rgba(147, 0, 11, 0.25);
}
.hero-slide-styled-video .hero-slide-cta:hover {
  background: #6b0008;
  box-shadow: 0 10px 26px rgba(147, 0, 11, 0.35);
}

/* ─── HERO: grupo de CTAs (principal + secundario) ─── */
.hero-slide-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.hero-slide-ctas .hero-slide-cta { margin-top: 0; }
.hero-slide-styled-video .hero-slide-ctas { justify-content: center; }

/* CTA secundario "ghost": transparente con borde, sobre el fondo burgundy. */
.hero-slide-cta-ghost {
  background: transparent !important;
  color: #fff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  box-shadow: none !important;
}
.hero-slide-cta-ghost:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: #fff;
}
/* En el slide de fondo crema, el ghost usa el rojo del brand. */
.hero-slide-styled-video .hero-slide-cta-ghost {
  color: var(--c-mega-red, #93000b) !important;
  border-color: rgba(147, 0, 11, 0.4);
}
.hero-slide-styled-video .hero-slide-cta-ghost:hover {
  background: rgba(147, 0, 11, 0.08) !important;
  border-color: var(--c-mega-red, #93000b);
}

/* ─── HERO: badges de confianza ─── */
.hero-slide-badges {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}
.hero-slide-badges li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.01em;
}
.hero-slide-badges svg {
  width: 16px;
  height: 16px;
  color: #4ade80;                 /* check verde — señal de confianza */
  flex-shrink: 0;
}
.hero-slide-styled-video .hero-slide-badges li { color: #4a4a4a; }
.hero-slide-styled-video .hero-slide-badges svg { color: #22a559; }
@media (max-width: 640px) {
  .hero-slide-badges { gap: 0.4rem 0.9rem; }
  .hero-slide-badges li { font-size: 0.75rem; }
}

/* Eyebrow sobre fondo crema: borde y fondo sutil para mantener el chip */
.hero-slide-styled-video .hero-slide-eyebrow {
  border-color: rgba(147, 0, 11, 0.25);
  color: var(--c-mega-red, #93000b);
  background: rgba(147, 0, 11, 0.04);
}

/* Numero/contador grande en algunos slides */
.hero-slide-stat {
  font-size: clamp(4rem, 12vw, 9rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.9;
  opacity: 0.95;
}

/* ─── Arrows (desktop) ─── */

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--c-mega-ink, #1f1b17);
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  z-index: 5;
  transition: all 200ms ease;
}

.hero-arrow:hover {
  background: white;
  transform: translateY(-50%) scale(1.05);
}

.hero-arrow-left  { left: 1.25rem; }
.hero-arrow-right { right: 1.25rem; }

@media (min-width: 768px) {
  .hero-arrow { display: flex; }
}

/* ─── Dots indicator ─── */

.hero-dots {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 5;
  padding: 0.5rem 0.875rem;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
}

.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
  border: none;
  cursor: pointer;
  transition: all 250ms ease;
  padding: 0;
}

.hero-dot[aria-selected="true"] {
  width: 24px;
  background: white;
}
.hero-dot:hover {
  background: rgba(255, 255, 255, 0.7);
}

/* ───────────────────────────────────────────────────────────────
   CATEGORY STRIP
   ─────────────────────────────────────────────────────────── */

.cat-strip-scroller {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}
.cat-strip-scroller::-webkit-scrollbar {
  height: 6px;
}
.cat-strip-scroller::-webkit-scrollbar-track { background: transparent; }
.cat-strip-scroller::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 999px;
}

/* ───────────────────────────────────────────────────────────
   CARRUSEL DEL HISTORIAL DE BUSQUEDA (buscador inteligente)
   El historial se desliza en UNA fila en vez de crecer en varias
   filas. Scrollbar fino para no verse tosco como el global (10px).
   ─────────────────────────────────────────────────────────── */
.buscador-hist-carrusel {
  -webkit-overflow-scrolling: touch; /* inercia en iOS */
  /* La navegacion es por FLECHAS: ocultamos la barra de scroll. */
  scrollbar-width: none;            /* Firefox */
}
.buscador-hist-carrusel::-webkit-scrollbar { display: none; } /* Chrome/Safari */

/* Scrollbar fino para el menú del selector de código de país. */
.codigopais-menu { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.18) transparent; }
.codigopais-menu::-webkit-scrollbar { width: 7px; }
.codigopais-menu::-webkit-scrollbar-track { background: transparent; }
.codigopais-menu::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 999px; }

/* Flechas de navegacion del carrusel del historial. Aparecen solo cuando
   hay desbordamiento (el JS togglea .hidden). Circulares, sobre los bordes. */
.buscador-hist-flecha {
  position: absolute;
  /* -0.25rem compensa el pb-2 del carril: centra la flecha con los CHIPS,
     no con el contenedor (que incluye el espacio inferior del scroll). */
  top: calc(50% - 0.25rem);
  transform: translateY(-50%);
  z-index: 3;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 10px rgba(31, 27, 23, 0.16);
  color: #93000b;            /* rojo Mega */
  font-weight: 900;
  font-size: 1.35rem;
  line-height: 1;
  padding-bottom: 2px;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.buscador-hist-flecha:hover { background: #fff8f5; }       /* mega-soft2 */
.buscador-hist-flecha:active { transform: translateY(-50%) scale(0.92); }
/* Van en el margen reservado por el wrapper (.relative.px-9), NO encima de los
   chips, para que no se superpongan con el texto. */
.buscador-hist-flecha-izq { left: 0; }
.buscador-hist-flecha-der { right: 0; }

.cat-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  width: 76px;
  transition: transform 200ms ease;
  cursor: pointer;
}

.cat-item:hover {
  transform: translateY(-3px);
}

.cat-icon {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: var(--c-mist, #fafafa);
  border: 1px solid var(--c-line, #e2e8f0);
  display: grid;
  place-items: center;
  font-size: 1.75rem;
  transition: all 250ms ease;
}

.cat-item:hover .cat-icon {
  background: var(--c-mega-cream, #fcf2eb);
  border-color: var(--c-mega-red, #93000b);
  transform: scale(1.05);
}

.cat-item[aria-selected="true"] .cat-icon {
  background: var(--c-mega-red, #93000b);
  color: white;
  border-color: var(--c-mega-red, #93000b);
}

.cat-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--c-mega-ink, #1f1b17);
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ───────────────────────────────────────────────────────────────
   TOP STRIP
   ─────────────────────────────────────────────────────────── */

.top-strip {
  /* Sticky arriba del header — overflowing en mobile */
  z-index: 60;
}

/* ───────────────────────────────────────────────────────────────
   PRODUCT GRID — narrowed cards
   ─────────────────────────────────────────────────────────── */

/* Skeleton de la card (cuando no hay cache) */
.skeleton-img,
.skeleton-line,
.skeleton-button {
  background: linear-gradient(
    90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%
  );
  background-size: 200% 100%;
  animation: skeletonShine 1.4s ease-in-out infinite;
}

@keyframes skeletonShine {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* line-clamp helper (no esta en Tailwind 2.x via CDN sin plugin) */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   SECCIONES PREMIUM — header + grid (categorias y por-que-elegirnos)
   ═══════════════════════════════════════════════════════════════ */

/* Header reutilizable para ambas secciones — eyebrow + titulo + subtitle */
.categories-section,
.why-choose {
  padding: 5rem 1.25rem;
  background: #fff;
}
.why-choose {
  background: var(--c-mega-cream, #f8f6f1);
}

@media (min-width: 768px) {
  .categories-section,
  .why-choose { padding: 6rem 2.5rem; }
}

.section-header {
  max-width: 1400px;
  margin: 0 auto 3rem;
  text-align: center;
}

.section-eyebrow {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-mega-red, #93000b);
  background: rgba(147, 0, 11, 0.06);
  border: 1px solid rgba(147, 0, 11, 0.18);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  margin-bottom: 1.25rem;
}

.section-title {
  font-family: 'Archivo', 'Geist', sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--c-mega-ink, #1f1b17);
  font-size: clamp(1.875rem, 4.5vw, 2.75rem);
  margin: 0;
}

.section-title em {
  font-style: normal;
  font-weight: 200;
  color: var(--c-mega-red, #93000b);
  font-family: 'Geist', serif;
}

.section-subtitle {
  margin-top: 1rem;
  font-size: 1rem;
  color: #64748b;
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .section-subtitle { font-size: 1.0625rem; }
}

/* Barra de acento decorativa bajo cada encabezado de sección — da un remate
   más “diseñado” y guía la vista hacia el contenido. */
.section-header::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  margin: 1.5rem auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #93000b 0%, #d13341 100%);
}

/* ─── RITMO DEL HOME — fondos alternados para separar secciones ───
   destacadosHome (blanco) → nuevosHome (crema) → nosotros (oscuro) →
   contacto. Evita el “todo blanco” monótono sin tocar cada componente. */
#nuevosHome { background: var(--c-mega-cream, #f8f6f1); }
#destacadosHome { background: #fff; }

/* Menos aire entre la tira de categorías y "Productos destacados"
   (ambas son .categories-section con ~6rem arriba+abajo → sumaban demasiado). */
#categoryStrip { padding-bottom: 2rem; }
#destacadosHome { padding-top: 1.5rem; }
@media (min-width: 768px) {
  #categoryStrip { padding-bottom: 2.5rem; }
  #destacadosHome { padding-top: 2rem; }
}

/* ─── CATEGORIES GRID — tarjetas rectangulares con emoji ─── */
.categories-grid {
  max-width: 1400px;
  margin: 0 auto;
  /* Una sola fila deslizable horizontalmente (antes era grid multi-fila). */
  display: flex;
  flex-wrap: nowrap;
  gap: 0.875rem;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.categories-grid > .category-card {
  flex: 0 0 auto;
  width: 150px;
  scroll-snap-align: start;
}
.categories-grid::-webkit-scrollbar { height: 8px; }
.categories-grid::-webkit-scrollbar-thumb { background: #e2dcd3; border-radius: 999px; }

@media (min-width: 640px) {
  .categories-grid { gap: 1.25rem; }
  .categories-grid > .category-card { width: 168px; }
}

.category-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 1.75rem 1.25rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.28s var(--ease-out-expo, ease);
  text-decoration: none;
  color: var(--c-mega-ink, #1f1b17);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
}

.category-card:hover {
  border-color: var(--c-mega-red, #93000b);
  box-shadow: 0 12px 28px rgba(147, 0, 11, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
  transform: translateY(-4px);
}

.category-card[aria-selected="true"] {
  border-color: var(--c-mega-red, #93000b);
  background: linear-gradient(180deg, rgba(147, 0, 11, 0.04) 0%, transparent 100%);
  box-shadow: 0 6px 16px rgba(147, 0, 11, 0.1);
}

.category-card-icon {
  font-size: 2.5rem;
  line-height: 1;
  filter: grayscale(0);
  transition: transform 0.28s var(--ease-out-expo, ease);
}

.category-card:hover .category-card-icon { transform: scale(1.12); }

.category-card-title {
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  line-height: 1.3;
  margin: 0;
}

/* "Todas" — primer card destacado */
.category-card-featured {
  background: linear-gradient(135deg, var(--c-mega-red, #93000b) 0%, #6b0008 100%);
  border-color: var(--c-mega-red, #93000b);
  color: #fff;
}
.category-card-featured:hover {
  box-shadow: 0 14px 32px rgba(147, 0, 11, 0.3);
  background: linear-gradient(135deg, #a01020 0%, #7a0610 100%);
}

/* ─── WHY-CHOOSE — features grid ─── */
.features-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2.5rem 2rem;
}

.feature-item {
  text-align: center;
}

.feature-icon {
  width: 80px;
  height: 80px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 2.25rem;
  line-height: 1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: transform 0.28s var(--ease-out-expo, ease), box-shadow 0.28s ease;
}

.feature-item:hover .feature-icon {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 10px 24px rgba(147, 0, 11, 0.12);
}

.feature-item h3 {
  font-family: 'Archivo', 'Geist', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--c-mega-ink, #1f1b17);
  margin: 0 0 0.75rem 0;
  letter-spacing: -0.01em;
}

.feature-item p {
  font-size: 0.9375rem;
  color: #64748b;
  line-height: 1.6;
  max-width: 26ch;
  margin: 0 auto;
}

/* ───────────────────────────────────────────────────────────────
   PREFERS-REDUCED-MOTION
   ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .hero-track,
  .skeleton-img,
  .skeleton-line,
  .skeleton-button {
    animation: none !important;
    scroll-behavior: auto !important;
  }
  .cat-item:hover,
  .category-card:hover,
  .feature-item:hover .feature-icon { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   ═══════════════════════════════════════════════════════════════════
   REDISENO MINIMALISTA — COMPONENTES NUEVOS
   (top-strip, header, footer, floating-actions, stats, promo-row,
    por-que-elegirnos)
   ═══════════════════════════════════════════════════════════════════
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   TOP STRIP — barra slim dark editorial
   ──────────────────────────────────────────────────────────────── */
.top-strip {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--ds-ink-950);
  color: var(--ds-ink-300);
  font-size: var(--ds-text-xs);
  z-index: 60;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.top-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  gap: var(--ds-space-4);
}

.top-strip-left, .top-strip-right {
  display: flex;
  align-items: center;
  gap: var(--ds-space-4);
}

.top-strip-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  color: var(--ds-ink-300);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--ds-duration-fast) var(--ds-ease-out);
  white-space: nowrap;
}
.top-strip-link:hover { color: var(--ds-ink-0); }

.top-strip-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.top-strip-sucursal {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ds-ink-0);
  padding: 4px 10px;
  border-radius: var(--ds-radius-full);
  font-weight: 600;
  font-size: var(--ds-text-xs);
  cursor: pointer;
  transition: all var(--ds-duration-fast) var(--ds-ease-out);
}
.top-strip-sucursal:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
}
.top-strip-sucursal-name {
  font-weight: 700;
  letter-spacing: -0.005em;
}
.top-strip-chevron { width: 10px; height: 10px; opacity: 0.55; }

.top-strip-divider {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.1);
}
.top-strip-divider-md { display: none; }
.top-strip-link-md { display: none; }

@media (min-width: 768px) {
  .top-strip-divider-md, .top-strip-link-md { display: inline-flex; }
}

.top-strip-status {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  font-weight: 500;
}
.top-strip-status-text {
  display: none;
}
@media (min-width: 900px) {
  .top-strip-status-text { display: inline; }
}
.top-strip-status-text strong { font-weight: 700; color: var(--ds-ink-0); }
.top-strip-status-sep {
  margin: 0 6px;
  opacity: 0.35;
}
.top-strip-status-dot {
  display: none;            /* oculto por default (mobile) */
  width: 6px;
  height: 6px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.18);
  animation: ds-pulse-ring 2s infinite;
}
/* Visible solo en pantallas donde tambien se muestra el texto del
   horario — asi no queda un punto verde colgado en mobile sin contexto. */
@media (min-width: 900px) {
  .top-strip-status-dot { display: inline-block; }
}

/* ─── BOTON CONTACTANOS (extremo derecho) ─── */
.top-strip-contact {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  background: var(--ds-red-600);
  color: var(--ds-ink-0);
  padding: 5px 12px;
  border-radius: var(--ds-radius-full);
  font-weight: 600;
  font-size: var(--ds-text-xs);
  text-decoration: none;
  transition: all var(--ds-duration-fast) var(--ds-ease-out);
  white-space: nowrap;
}
.top-strip-contact:hover {
  background: var(--ds-red-700);
  transform: translateY(-1px);
}
.top-strip-contact-label {
  display: none;
}
@media (min-width: 768px) {
  .top-strip-contact-label { display: inline; }
}
.top-strip-contact-number {
  font-family: var(--ds-font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  padding-left: 6px;
  margin-left: 4px;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}
@media (max-width: 767px) {
  .top-strip-contact-number {
    border-left: none;
    padding-left: 0;
    margin-left: 0;
  }
}

/* ─────────────────────────────────────────────────────────────────
   HEADER — sticky con glass premium
   ──────────────────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 38px;  /* respeta altura del top-strip */
  left: 0; right: 0;
  background: rgba(253, 251, 246, 0.78);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(28, 25, 23, 0.06);
  z-index: 50;
  transition: transform var(--ds-duration-normal) var(--ds-ease-out),
              box-shadow var(--ds-duration-normal) var(--ds-ease-out),
              right 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-header.scrolled {
  box-shadow: 0 1px 0 rgba(28, 25, 23, 0.06), 0 8px 20px -8px rgba(28, 25, 23, 0.08);
}

/* Cuando el panel "Tu pedido" está abierto (body.cart-preview-push), el
   header y el top-strip (position:fixed) también se ajustan hacia la
   izquierda para no quedar tapados por el panel (solo desktop). */
.top-strip { transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
@media (min-width: 769px) {
  body.cart-preview-push .top-strip,
  body.cart-preview-push .site-header { right: 380px; }
}

/* Layout del header: 3 zonas con grid 3-columnas (auto · 1fr · auto).
   Container PROPIO del header (NO usa .ds-container) con max-width
   amplio y padding al margen pequeño — brand pega a la izquierda real
   y acciones pegan a la derecha real. */
.site-header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--ds-space-6);
  height: 76px;
  width: 100%;
  max-width: 1680px;            /* mas amplio que .ds-container */
  margin: 0 auto;
  padding: 0 clamp(1rem, 2.5vw, 2rem);  /* padding lateral menor */
}

/* Brand pegado a la izquierda */
.brand { justify-self: start; }

/* Nav centrado en su columna (no a la izquierda, no a la derecha) */
.site-nav { justify-self: center; }

/* Zona derecha: search + acciones juntas pero separadas con respiro */
.site-header-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--ds-space-5);  /* respiración entre search y acciones */
}

/* OVERRIDE: ya no necesitamos margin-left:auto en .site-actions
   porque ahora vive dentro de .site-header-right y el grid del header
   los empuja todos a la derecha. */
.site-header-right .site-actions { margin-left: 0; }

/* En mobile/tablet sin nav, el brand sigue a la izquierda y la zona
   derecha sigue a la derecha — la columna del nav (1fr) absorbe el
   espacio vacio entre ambos sin meter padding raro. */

/* Brand */
.brand {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity var(--ds-duration-fast) var(--ds-ease-out);
}
.brand:hover { opacity: 0.88; }

.brand-monogram {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--ds-ink-950);
  color: var(--ds-cream-50);
  font-family: var(--ds-font-display);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: -0.04em;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 6px rgba(28, 25, 23, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Logo MM como imagen (faviconMM.png) — SIN fondo ni sombra,
   solo la imagen tal cual. Si la imagen ya viene con fondo propio
   (el rojo del brand), se respeta. */
.brand-logo-img {
  width: 44px;
  height: 44px;
  object-fit: contain;          /* preserva el aspecto del logo */
  flex-shrink: 0;
}

.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
  font-family: var(--ds-font-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--ds-ink-900);
  letter-spacing: -0.02em;
}
.brand-tag {
  margin-top: 3px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ds-ink-500);
}
.brand-mayorista {
  font-size: 11px;
  color: var(--ds-ink-500);
  margin-top: 2px;
}

/* Nav central */
.site-nav { display: none; gap: var(--ds-space-1); }
@media (min-width: 1024px) {
  .site-nav { display: flex; }
}

.site-nav-link {
  position: relative;
  padding: 8px 14px;
  font-size: var(--ds-text-sm);
  font-weight: 500;
  color: var(--ds-ink-700);
  text-decoration: none;
  border-radius: var(--ds-radius-full);
  transition: color var(--ds-duration-fast) var(--ds-ease-out);
}
.site-nav-link::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--ds-red-600);
  border-radius: var(--ds-radius-full);
  transition: width var(--ds-duration-normal) var(--ds-ease-out);
}
.site-nav-link:hover { color: var(--ds-red-600); }
.site-nav-link:hover::after { width: 20px; }

/* ═══ BOTONES MOBILE (hamburguesa + lupa) ═══ */
.header-search-mobile-btn,
.header-hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;        /* área táctil mínima recomendada en móvil */
  height: 44px;
  background: transparent;
  border: 1px solid var(--ds-ink-200);
  border-radius: 50%;
  color: var(--ds-ink-900);
  cursor: pointer;
  transition: all var(--ds-duration-fast) var(--ds-ease-out);
  padding: 0;
}
.header-search-mobile-btn:hover,
.header-hamburger:hover {
  border-color: var(--ds-red-600);
  color: var(--ds-red-600);
}
.header-search-mobile-btn svg { width: 18px; height: 18px; }

/* Hamburguesa con 3 lineas animadas (las del medio desaparecen al abrir) */
.header-hamburger {
  flex-direction: column;
  gap: 4px;
}
.header-hamburger-line {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--ds-duration-fast) var(--ds-ease-out),
              opacity var(--ds-duration-fast) var(--ds-ease-out);
}
.header-hamburger.is-open .header-hamburger-line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.header-hamburger.is-open .header-hamburger-line:nth-child(2) {
  opacity: 0;
}
.header-hamburger.is-open .header-hamburger-line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* En desktop (≥1024px) ocultar ambos botones móviles */
@media (min-width: 1024px) {
  .header-search-mobile-btn,
  .header-hamburger { display: none; }
}

/* En mobile/tablet (<1024px): el header solo muestra
   Buscador(lupa) + Ingresar + Hamburguesa.
   Favoritos y Carrito viven en el menu desplegable de la hamburguesa
   — asi el header queda limpio y respetamos el viewport pequeño. */
@media (max-width: 1023px) {
  #btnHeaderFavoritos,
  .site-actions .cart-btn {
    display: none !important;
  }
  /* El boton Ingresar se reduce a icono circular limpio.
     justify-content:center asegura que el SVG quede al medio cuando
     el label esta oculto (sino el gap del flex lo descentraría). */
  .site-actions .action-btn .action-btn-label { display: none; }
  .site-actions .action-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    gap: 0;
  }
  .site-actions .action-btn .action-btn-icon {
    width: 17px;
    height: 17px;
  }
}

/* ─── HEADER EN MÓVIL CHICO: evitar amontonamiento/superposición ───
   En teléfonos la marca completa (logo + nombre + subtítulo) + lupa +
   login + hamburguesa no entran y se encimaban. Limpiamos: ocultamos el
   subtítulo, achicamos logo/nombre y reducimos los espacios. */
@media (max-width: 639px) {
  .site-header-inner {
    gap: 0.5rem;
    padding: 0 0.75rem;
    height: 64px;
  }
  .site-header-right { gap: 0.4rem; }
  .brand { gap: 0.5rem; }
  .brand-logo-img { width: 34px; height: 34px; }
  .brand-name { font-size: 15px; }
  .brand-tag,
  .brand-mayorista { display: none; }   /* subtítulo no cabe en móvil */
}

/* ─── PANEL MÓVIL DESPLEGABLE ─── */
.header-mobile-menu {
  display: none;
  background: var(--ds-ink-0);
  border-top: 1px solid var(--ds-ink-200);
  padding: var(--ds-space-4);
}
.header-mobile-menu.is-open {
  display: block;
  animation: ds-fade-up 220ms var(--ds-ease-out);
}
@media (min-width: 1024px) {
  .header-mobile-menu.is-open { display: none; }  /* en desktop nunca */
}

.header-mobile-search {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  height: 44px;
  padding: 0 16px;
  background: var(--ds-ink-50);
  border: 1px solid var(--ds-ink-200);
  border-radius: var(--ds-radius-full);
  margin-bottom: var(--ds-space-4);
  transition: all var(--ds-duration-fast) var(--ds-ease-out);
}
.header-mobile-search:focus-within {
  border-color: var(--ds-red-600);
  background: var(--ds-ink-0);
  box-shadow: 0 0 0 3px rgba(84, 18, 18, 0.08);
}
.header-mobile-search svg {
  width: 18px;
  height: 18px;
  color: var(--ds-ink-500);
  flex-shrink: 0;
}
.header-mobile-search:focus-within svg { color: var(--ds-red-600); }
.header-mobile-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-base);
  color: var(--ds-ink-900);
}
.header-mobile-search input::-webkit-search-cancel-button {
  appearance: none;
  -webkit-appearance: none;
}

.header-mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.header-mobile-nav a {
  display: block;
  padding: 12px 16px;
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-base);
  font-weight: 500;
  color: var(--ds-ink-900);
  text-decoration: none;
  border-radius: var(--ds-radius-md);
  transition: all var(--ds-duration-fast) var(--ds-ease-out);
}
.header-mobile-nav a {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
}
.header-mobile-nav a svg {
  width: 20px;
  height: 20px;
  color: var(--ds-ink-500);
  flex-shrink: 0;
}
.header-mobile-nav a:hover,
.header-mobile-nav a:active {
  background: var(--ds-ink-50);
  color: var(--ds-red-600);
}
.header-mobile-nav a:hover svg,
.header-mobile-nav a:active svg { color: var(--ds-red-600); }

/* Separador entre el nav principal y "Mi cuenta" */
.header-mobile-sep {
  height: 1px;
  background: var(--ds-ink-200);
  margin: var(--ds-space-3) var(--ds-space-4);
}

/* Nombre del usuario con sesión activa — cabecera del menú móvil (arriba
   de todo). Lleva un borde inferior que lo separa del buscador/nav. */
.header-mobile-user {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  padding: 4px 16px 14px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--ds-ink-200);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-base);
  font-weight: 700;
  color: var(--ds-ink-900);
}
.header-mobile-user svg {
  width: 20px;
  height: 20px;
  color: var(--ds-red-600);
  flex-shrink: 0;
}
.header-mobile-user span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Selects del perfil (Provincia/Ciudad): flecha propia SEPARADA del borde.
   El <select> nativo pega su flecha al borde derecho; con appearance:none +
   un chevron de fondo la controlamos (a 1rem del borde) y damos espacio a la
   derecha para que el texto no la tape. */
.perfil-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394a3b8'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.1rem;
  padding-right: 2.75rem !important; /* espacio para que el texto no tape la flecha */
}
.perfil-select::-ms-expand { display: none; } /* IE/Edge legacy */

/* Carrito en menu móvil: contador a la derecha estilo badge */
.header-mobile-nav-cart {
  position: relative;
}
.header-mobile-cart-count {
  margin-left: auto;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  background: var(--ds-red-600);
  color: var(--ds-ink-0);
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--ds-radius-full);
  display: inline-grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}

/* ─── BUSCADOR INLINE DEL HEADER ─── */
.header-search {
  display: none;
  align-items: center;
  gap: var(--ds-space-2);
  width: 240px;
  min-width: 0;
  height: 38px;
  padding: 0 14px;
  background: var(--ds-ink-50);
  border: 1px solid var(--ds-ink-200);
  border-radius: var(--ds-radius-full);
  transition: all var(--ds-duration-fast) var(--ds-ease-out);
}
.header-search:focus-within {
  width: 280px;
}
.header-search:focus-within {
  background: var(--ds-ink-0);
  border-color: var(--ds-red-600);
  box-shadow: 0 0 0 3px rgba(84, 18, 18, 0.08);
}
.header-search-icon {
  width: 16px;
  height: 16px;
  color: var(--ds-ink-500);
  flex-shrink: 0;
}
.header-search:focus-within .header-search-icon { color: var(--ds-red-600); }
.header-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-sm);
  color: var(--ds-ink-900);
}
.header-search-input::placeholder {
  color: var(--ds-ink-500);
  font-weight: 400;
}
.header-search-input::-webkit-search-cancel-button {
  appearance: none;
  -webkit-appearance: none;
}

/* Mostrar el buscador desde lg en adelante (junto al nav) */
@media (min-width: 1024px) {
  .header-search { display: flex; }
}

/* En tablet sin nav, el buscador toma el lugar y se ve mas grande */
@media (min-width: 768px) and (max-width: 1023px) {
  .header-search {
    display: flex;
    max-width: 320px;
  }
}

/* Acciones — gap mayor entre items para que no se vea apilado */
.site-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);  /* aumentado de space-2 a space-3 */
}

.sucursal-pill {
  display: none;
  align-items: center;
  gap: var(--ds-space-2);
  background: rgba(147, 0, 11, 0.06);
  border: 1px solid rgba(147, 0, 11, 0.15);
  color: var(--ds-red-600);
  padding: 6px 12px;
  border-radius: var(--ds-radius-full);
  font-size: var(--ds-text-xs);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--ds-duration-fast) var(--ds-ease-out);
}
.sucursal-pill:not(.hidden) { display: inline-flex; }
.sucursal-pill:hover {
  background: var(--ds-red-600);
  color: var(--ds-ink-0);
}
.sucursal-pill-dot {
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
  animation: ds-pulse-ring 2s infinite;
}
.sucursal-pill-icon { width: 12px; height: 12px; }
.sucursal-pill-name { letter-spacing: 0.04em; text-transform: uppercase; }

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid rgba(28, 25, 23, 0.12);
  border-radius: var(--ds-radius-full);
  color: var(--ds-ink-700);
  font-size: var(--ds-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all var(--ds-duration-fast) var(--ds-ease-out);
}
.action-btn:hover {
  border-color: var(--ds-ink-900);
  color: var(--ds-ink-900);
  background: rgba(28, 25, 23, 0.03);
}
.action-btn-icon { width: 14px; height: 14px; }
.action-btn-label { display: none; }
@media (min-width: 640px) { .action-btn-label { display: inline; } }
.action-btn-ghost { border-color: transparent; }
.action-btn-ghost:hover { background: rgba(28, 25, 23, 0.06); border-color: transparent; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(28, 25, 23, 0.12);
  background: transparent;
  border-radius: 50%;
  color: var(--ds-ink-700);
  cursor: pointer;
  transition: all var(--ds-duration-fast) var(--ds-ease-out);
}
.icon-btn:hover {
  border-color: var(--ds-red-600);
  color: var(--ds-red-600);
}
.icon-btn svg { width: 16px; height: 16px; }

.user-logged {
  display: none;
  align-items: center;
  gap: var(--ds-space-2);
}
/* display:contents → los hijos del userLoggedBox (nombre, perfil, mis pedidos,
   salir) se vuelven items directos de .site-actions y se pueden ORDENAR junto
   con Favoritos/Carrito. Orden pedido: Usuario → Mis pedidos → Favoritos →
   Carrito → Salir. La especificidad (2 clases) gana sobre .flex que agrega app.js. */
.user-logged:not(.hidden) { display: contents; }
#userLoggedName     { order: 1; }
#btnAbrirPerfil     { order: 2; }
#btnAbrirMisPedidos { order: 3; }
#btnHeaderFavoritos { order: 4; }
#btnAbrirCarrito    { order: 5; }
#btnLogoutMayorista { order: 6; }
.user-logged-name {
  font-size: var(--ds-text-xs);
  font-weight: 600;
  color: var(--ds-ink-700);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: none;
}
@media (min-width: 640px) { .user-logged-name { display: inline; } }

/* CART CTA */
.cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  background: var(--ds-ink-900);
  color: var(--ds-ink-0);
  border: none;
  border-radius: var(--ds-radius-full);
  font-size: var(--ds-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(28, 25, 23, 0.15);
  transition: all var(--ds-duration-fast) var(--ds-ease-out);
}
.cart-btn:hover {
  background: var(--ds-red-600);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(147, 0, 11, 0.25);
}
.cart-btn-icon { width: 15px; height: 15px; }
.cart-btn-label { display: none; }
@media (min-width: 640px) { .cart-btn-label { display: inline; } }
.cart-btn-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--ds-red-600);
  color: var(--ds-ink-0);
  font-size: 10px;
  font-weight: 800;
  border-radius: var(--ds-radius-full);
  display: grid;
  place-items: center;
  border: 1.5px solid var(--ds-ink-0);
  margin-left: 2px;
}
.cart-btn:hover .cart-btn-count {
  background: var(--ds-ink-0);
  color: var(--ds-red-600);
  border-color: var(--ds-red-600);
}

/* Offset del pt del mainContent (estaba en 72px del header solo, ahora
   sumamos 38px del top-strip) */
#mainContent { padding-top: 110px !important; }
/* Móvil/tablet: header (hasta 76px) + top-strip (38px). 116px evita que el
   header fijo se superponga con el inicio del contenido. */
@media (max-width: 767px) { #mainContent { padding-top: 116px !important; } }

/* ─────────────────────────────────────────────────────────────────
   STATS SECTION — banner dark editorial
   ──────────────────────────────────────────────────────────────── */
.stats-section {
  position: relative;
  background: var(--ds-ink-950);
  color: var(--ds-ink-0);
  overflow: hidden;
  isolation: isolate;
}

.stats-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}
.stats-glow-1 {
  top: -100px; left: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(147, 0, 11, 0.5) 0%, transparent 70%);
}
.stats-glow-2 {
  bottom: -150px; right: -50px;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.18) 0%, transparent 70%);
}

.stats-inner {
  position: relative;
  z-index: 1;
  padding: clamp(4rem, 8vw, 6.5rem) 0;
}

.stats-header { max-width: 720px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.stats-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--ds-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ds-track-eyebrow);
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 6px 14px;
  border-radius: var(--ds-radius-full);
  margin-bottom: var(--ds-space-5);
}
.stats-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--ds-red-500);
  border-radius: 50%;
}

.stats-title {
  font-family: var(--ds-font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  font-size: clamp(1.875rem, 4.5vw, 3.25rem);
  margin: 0;
  color: var(--ds-ink-0);
}
.stats-title em {
  font-family: var(--ds-font-serif);
  font-style: italic;
  font-weight: 200;
  color: var(--ds-cream-200);
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 640px) { .stats-grid { grid-template-columns: 1fr 1fr; gap: 3rem; } }
@media (min-width: 1024px) { .stats-grid { grid-template-columns: repeat(4, 1fr); gap: 3rem; } }

.stat-card {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: var(--ds-space-6);
}
.stat-label-top {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 var(--ds-space-3) 0;
}
.stat-number {
  font-family: var(--ds-font-display);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--ds-cream-100);
  font-size: clamp(3.25rem, 6.5vw, 4.75rem);
  margin: 0;
}
.stat-number sup, .stat-number sub {
  font-size: 0.45em;
  font-weight: 700;
  color: var(--ds-red-500);
  vertical-align: super;
  margin-left: -0.05em;
}
.stat-number sub { vertical-align: baseline; }
.stat-desc {
  margin-top: var(--ds-space-4);
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-normal);
  color: rgba(255, 255, 255, 0.65);
  max-width: 19ch;
}

/* ─────────────────────────────────────────────────────────────────
   FOOTER MINIMALISTA
   ──────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--ds-ink-950);
  color: var(--ds-ink-300);
  padding: clamp(4rem, 6vw, 5rem) 0 2rem;
  margin-top: clamp(4rem, 8vw, 6rem);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 2rem;
}
@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 3rem;
  }
}

.footer-brand-row { display: flex; align-items: center; gap: var(--ds-space-3); margin-bottom: var(--ds-space-4); }
.footer-monogram {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--ds-red-600);
  color: var(--ds-ink-0);
  font-family: var(--ds-font-display);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: -0.04em;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 6px rgba(147, 0, 11, 0.4);
}
.footer-brand-name {
  font-family: var(--ds-font-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--ds-ink-0);
  margin: 0;
  letter-spacing: -0.02em;
}
.footer-brand-tag {
  margin: 3px 0 0 0;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.4);
}
.footer-brand-pitch {
  font-size: var(--ds-text-sm);
  color: rgba(255, 255, 255, 0.6);
  line-height: var(--ds-leading-normal);
  max-width: 30rem;
  margin: 0 0 var(--ds-space-6) 0;
}

.footer-social {
  display: inline-flex;
  gap: var(--ds-space-2);
}
.footer-social-link {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: all var(--ds-duration-fast) var(--ds-ease-out);
}
.footer-social-link svg { width: 14px; height: 14px; }
.footer-social-link:hover {
  border-color: var(--ds-red-500);
  color: var(--ds-red-500);
  transform: translateY(-2px);
  background: rgba(147, 0, 11, 0.08);
}

.footer-col-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.4);
  margin: 0 0 var(--ds-space-4) 0;
}

.footer-col-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col-list a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: var(--ds-text-sm);
  transition: color var(--ds-duration-fast) var(--ds-ease-out);
}
.footer-col-list a:hover { color: var(--ds-ink-0); }

.footer-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
}
.footer-contact-list li, .footer-contact-list a {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-3);
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color var(--ds-duration-fast) var(--ds-ease-out);
}
.footer-contact-list a:hover { color: var(--ds-ink-0); }
.footer-contact-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.85);
}
.footer-contact-icon svg { width: 14px; height: 14px; }
.footer-contact-icon-green { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.footer-contact-list strong {
  display: block;
  color: var(--ds-ink-0);
  font-size: var(--ds-text-sm);
  font-weight: 600;
  margin-bottom: 1px;
}
.footer-contact-list em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
}
@media (min-width: 768px) {
  .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

.footer-schedule {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
}
.footer-schedule-item { display: inline-flex; align-items: center; gap: 6px; }
.footer-schedule strong { color: var(--ds-ink-0); font-weight: 700; }
.footer-schedule-dot {
  width: 6px; height: 6px;
  background: #22c55e;
  border-radius: 50%;
  animation: ds-pulse-ring 2.4s infinite;
}
.footer-schedule-sep {
  width: 3px; height: 3px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}
.footer-schedule-closed strong { color: rgba(255, 255, 255, 0.45); }

.footer-copy {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────────
   FLOATING ACTIONS — botones flotantes refinados
   ──────────────────────────────────────────────────────────────── */
.floating-root {
  position: fixed;
  left: 1rem;
  right: auto;
  top: auto;
  bottom: 1rem;                 /* esquina inferior izquierda */
  transform: none;
  z-index: 55;
  display: flex;
  flex-direction: column;          /* trigger abajo, acciones arriba */
  align-items: center;
  gap: var(--ds-space-3);
}
@media (min-width: 768px) { .floating-root { left: 1.5rem; right: auto; } }

.floating-actions {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  transition: opacity var(--ds-duration-normal) var(--ds-ease-out),
              transform var(--ds-duration-normal) var(--ds-ease-out);
  transform-origin: bottom center;  /* se despliega desde el "?" hacia arriba */
}

.floating-btn {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: var(--ds-shadow-md);
  transition: all var(--ds-duration-fast) var(--ds-ease-out);
}
.floating-btn:hover {
  transform: scale(1.08) translateX(-2px);
  box-shadow: var(--ds-shadow-lg);
}
.floating-btn svg { width: 24px; height: 24px; }

.floating-btn-wa    { background: #22c55e; }
.floating-btn-wa:hover { background: #16a34a; }
.floating-btn-cart  { background: var(--ds-ink-900); }
.floating-btn-cart:hover { background: var(--ds-red-600); }
.floating-btn-video { background: var(--ds-red-600); }
.floating-btn-video:hover { background: var(--ds-red-700); }
.floating-btn-help  { background: var(--ds-ink-700); }
.floating-btn-help:hover { background: var(--ds-ink-900); }

.floating-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  border-radius: var(--ds-radius-full);
  display: grid;
  place-items: center;
  border: 2px solid var(--ds-cream-50);
}

/* Trigger "?" del speed-dial (mismo tamaño que los demás FAB) */
.floating-toggle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ds-ink-800);
  color: #fff;
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--ds-shadow-md);
  transition: all var(--ds-duration-fast) var(--ds-ease-out);
}
.floating-toggle:hover { background: var(--ds-ink-900); transform: scale(1.08); }
.floating-toggle svg { width: 24px; height: 24px; transition: transform var(--ds-duration-normal) var(--ds-ease-out); }
/* Al abrir, el icono gira levemente como feedback. */
.floating-root:not(.is-collapsed) .floating-toggle svg { transform: rotate(180deg); }

/* Colapsado (por defecto): solo se ve el "?"; las acciones quedan ocultas
   justo detrás del trigger y sin capturar clicks. */
.floating-root.is-collapsed .floating-actions {
  opacity: 0;
  transform: scale(0.6) translateY(16px);
  pointer-events: none;
}

/* ───────────────────────────────────────────────────────────────
   BOTÓN "VOLVER ARRIBA" — aparece al bajar; centrado abajo.
   ─────────────────────────────────────────────────────────── */
.scroll-top-btn {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(16px);
  z-index: 70;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ds-red-600);
  color: #fff;
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(147, 0, 11, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ds-duration-normal) var(--ds-ease-out),
              transform var(--ds-duration-normal) var(--ds-ease-out),
              background var(--ds-duration-fast) var(--ds-ease-out);
}
.scroll-top-btn.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.scroll-top-btn:hover { background: var(--ds-red-700, #6b0008); transform: translateX(-50%) translateY(-2px); }
.scroll-top-btn svg { width: 22px; height: 22px; }

/* ─────────────────────────────────────────────────────────────────
   PROMO ROW (sucursal + WhatsApp)
   ──────────────────────────────────────────────────────────────── */
.promo-row { background: var(--ds-cream-50); }

.promo-row-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-5);
}
@media (min-width: 900px) {
  .promo-row-grid { grid-template-columns: 1.5fr 1fr; gap: var(--ds-space-6); }
}

.promo-card {
  border-radius: var(--ds-radius-xl);
  overflow: hidden;
  transition: transform var(--ds-duration-normal) var(--ds-ease-out);
}

/* Card mapa */
.promo-card-map {
  background: var(--ds-ink-0);
  border: 1px solid var(--ds-ink-200);
  box-shadow: var(--ds-shadow-sm);
  display: flex;
  flex-direction: column;
}
.promo-card-map-wrapper {
  position: relative;
  background: var(--ds-ink-100);
  aspect-ratio: 16 / 9;
}
@media (min-width: 768px) { .promo-card-map-wrapper { aspect-ratio: 2 / 1; } }
.promo-card-map-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ds-ink-400);
  font-size: var(--ds-text-sm);
}
.promo-card-map-body {
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--ds-space-4);
  flex-wrap: wrap;
}
.promo-card-eyebrow { margin-bottom: var(--ds-space-2); }
.promo-card-title {
  font-family: var(--ds-font-display);
  font-weight: 800;
  font-size: var(--ds-text-2xl);
  letter-spacing: -0.02em;
  color: var(--ds-ink-900);
  margin: 0 0 var(--ds-space-2);
}
.promo-card-text {
  font-size: var(--ds-text-sm);
  color: var(--ds-ink-500);
  line-height: var(--ds-leading-normal);
  margin: 0;
}

/* Card WhatsApp */
.promo-card-wa {
  position: relative;
  display: block;
  text-decoration: none;
  background: linear-gradient(140deg, #16a34a 0%, #15803d 60%, #14532d 100%);
  color: #fff;
  padding: clamp(2rem, 4vw, 2.75rem);
  overflow: hidden;
  isolation: isolate;
}
.promo-card-wa:hover { transform: translateY(-3px); }
.promo-card-wa-decor {
  position: absolute;
  top: -100px; right: -100px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
.promo-card-wa-content { position: relative; }
.promo-card-eyebrow-light {
  color: rgba(255, 255, 255, 0.92) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
.promo-card-eyebrow-light::before { background: rgba(255, 255, 255, 0.95) !important; }
.promo-card-wa-title {
  font-family: var(--ds-font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 0.95;
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin: var(--ds-space-3) 0 var(--ds-space-4);
  color: #fff;
}
.promo-card-wa-title em {
  font-family: var(--ds-font-serif);
  font-style: italic;
  font-weight: 200;
  color: rgba(255, 255, 255, 0.7);
}
.promo-card-wa-pitch {
  font-size: var(--ds-text-sm);
  color: rgba(255, 255, 255, 0.85);
  line-height: var(--ds-leading-normal);
  max-width: 26rem;
  margin: 0 0 var(--ds-space-6) 0;
}
.promo-card-wa-number {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-3);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: var(--ds-space-3) var(--ds-space-5);
  border-radius: var(--ds-radius-lg);
  font-family: var(--ds-font-mono);
  font-weight: 800;
  font-size: var(--ds-text-lg);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.promo-card-wa-number svg { width: 20px; height: 20px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════
   VISTA NOSOTROS (/{sucursal}/nosotros)
   ═══════════════════════════════════════════════════════════════════ */
.nosotros-view {
  background: var(--ds-cream-50);
  min-height: 100vh;
}
.nosotros-view[hidden] { display: none; }

/* ─── HERO EDITORIAL ─── */
.nosotros-hero {
  position: relative;
  background: linear-gradient(160deg, var(--ds-red-600) 0%, var(--ds-red-800) 50%, var(--ds-ink-900) 100%);
  color: var(--ds-ink-0);
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}
.nosotros-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 80% 30%, rgba(112, 112, 112, 0.18) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
}

.nosotros-hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-10);
  align-items: center;
}
@media (min-width: 900px) {
  .nosotros-hero-inner { grid-template-columns: 1.5fr 1fr; gap: var(--ds-space-16); }
}

.nosotros-hero-eyebrow {
  background: rgba(255, 255, 255, 0.1);
  color: var(--ds-cream-100);
  border-color: rgba(255, 255, 255, 0.18);
}
.nosotros-hero-eyebrow::before { background: var(--ds-cream-100); }

.nosotros-hero-title {
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ds-ink-0);
  margin: var(--ds-space-5) 0 var(--ds-space-6);
}
.nosotros-hero-title em {
  font-family: var(--ds-font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--ds-cream-200);
}

.nosotros-hero-lede {
  font-size: var(--ds-text-lg);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  max-width: 42rem;
  margin: 0;
}

.nosotros-hero-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-6);
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  padding-left: var(--ds-space-6);
}

.nosotros-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nosotros-hero-stat-num {
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.75rem, 5vw, 3.75rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ds-ink-0);
}
.nosotros-hero-stat-num sub,
.nosotros-hero-stat-num sup {
  font-size: 0.4em;
  font-weight: 500;
  color: var(--ds-cream-200);
  vertical-align: baseline;
  margin-left: 0.1em;
}
.nosotros-hero-stat-num sup { vertical-align: super; }
.nosotros-hero-stat-label {
  font-size: var(--ds-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.6);
}

/* ─── PILLARS (Misión / Visión / Valores) ─── */
.nosotros-pillars { background: var(--ds-cream-50); }
.nosotros-pillars-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-5);
}
@media (min-width: 768px) {
  .nosotros-pillars-grid { grid-template-columns: repeat(3, 1fr); gap: var(--ds-space-6); }
}

.nosotros-pillar {
  background: var(--ds-ink-0);
  border: 1px solid var(--ds-ink-200);
  border-radius: var(--ds-radius-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  transition: all var(--ds-duration-normal) var(--ds-ease-out);
}
.nosotros-pillar:hover {
  transform: translateY(-4px);
  border-color: var(--ds-red-300);
  box-shadow: var(--ds-shadow-md);
}

.nosotros-pillar-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--ds-red-50);
  color: var(--ds-red-600);
  border-radius: 14px;
  margin-bottom: var(--ds-space-5);
}
.nosotros-pillar-icon svg { width: 24px; height: 24px; }

.nosotros-pillar-tag {
  font-size: var(--ds-text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ds-red-600);
  margin: 0 0 var(--ds-space-2);
}

.nosotros-pillar-title {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ds-ink-900);
  margin: 0 0 var(--ds-space-3);
  line-height: 1.2;
}

.nosotros-pillar-text {
  font-size: var(--ds-text-sm);
  color: var(--ds-ink-500);
  line-height: 1.65;
  margin: 0;
}

/* ─── STORY (historia editorial) ─── */
.nosotros-story {
  background: var(--ds-ink-0);
  border-top: 1px solid var(--ds-ink-100);
}
.nosotros-story-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-10);
}
@media (min-width: 900px) {
  .nosotros-story-inner { grid-template-columns: 1.4fr 1fr; gap: var(--ds-space-16); }
}

.nosotros-story-title {
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.75rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ds-ink-900);
  margin: var(--ds-space-4) 0 var(--ds-space-6);
}
.nosotros-story-title em {
  font-family: var(--ds-font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--ds-red-600);
}

.nosotros-story-text p {
  font-size: var(--ds-text-base);
  color: var(--ds-ink-700);
  line-height: 1.75;
  margin: 0 0 var(--ds-space-4);
}
.nosotros-story-text p strong { color: var(--ds-ink-900); font-weight: 700; }

.nosotros-story-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-5);
  padding-left: var(--ds-space-6);
  border-left: 2px solid var(--ds-red-100);
}
.nosotros-timeline-item {
  position: relative;
}
.nosotros-timeline-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--ds-space-6) - 6px);
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ds-red-600);
  box-shadow: 0 0 0 4px var(--ds-cream-50);
}
.nosotros-timeline-year {
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: var(--ds-text-2xl);
  color: var(--ds-red-600);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.nosotros-timeline-item p {
  font-size: var(--ds-text-sm);
  color: var(--ds-ink-600);
  margin: 0;
  line-height: 1.55;
}

/* ─── CTA final ─── */
.nosotros-cta {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--ds-cream-50);
}

.nosotros-cta-card {
  position: relative;
  background: linear-gradient(135deg, var(--ds-red-600) 0%, var(--ds-red-800) 100%);
  color: var(--ds-ink-0);
  border-radius: var(--ds-radius-xl);
  padding: clamp(2.5rem, 5vw, 4.5rem);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.nosotros-cta-card::before {
  content: "";
  position: absolute;
  top: -50%; right: -10%;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

.nosotros-cta-eyebrow {
  background: rgba(255, 255, 255, 0.12);
  color: var(--ds-ink-0);
  border-color: rgba(255, 255, 255, 0.22);
}
.nosotros-cta-eyebrow::before { background: var(--ds-ink-0); }

.nosotros-cta-title {
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: var(--ds-space-4) auto var(--ds-space-4);
  color: var(--ds-ink-0);
}
.nosotros-cta-title em {
  font-family: var(--ds-font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--ds-cream-200);
}

.nosotros-cta-text {
  font-size: var(--ds-text-lg);
  color: rgba(255, 255, 255, 0.88);
  max-width: 38rem;
  margin: 0 auto var(--ds-space-8);
  line-height: 1.6;
}

.nosotros-cta-btn {
  background: var(--ds-ink-0);
  color: var(--ds-red-700);
}
.nosotros-cta-btn:hover {
  background: var(--ds-cream-50);
  color: var(--ds-red-800);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

/* ─── VISÍTANOS (CTA a sucursales) ─── */
.nosotros-locations {
  background: var(--ds-cream-100);
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-top: 1px solid var(--ds-cream-200);
  border-bottom: 1px solid var(--ds-cream-200);
}
.nosotros-locations-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-8);
  align-items: center;
}
@media (min-width: 900px) {
  .nosotros-locations-inner { grid-template-columns: 1.6fr 1fr; }
}

.nosotros-locations-title {
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ds-ink-900);
  margin: var(--ds-space-4) 0 var(--ds-space-4);
}
.nosotros-locations-title em {
  font-family: var(--ds-font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--ds-red-600);
}

.nosotros-locations-pitch {
  font-size: var(--ds-text-lg);
  line-height: 1.6;
  color: var(--ds-ink-600);
  max-width: 38rem;
  margin: 0 0 var(--ds-space-6);
}

.nosotros-locations-decor {
  display: none;
  justify-self: center;
  width: clamp(160px, 22vw, 220px);
  height: clamp(160px, 22vw, 220px);
  color: var(--ds-red-600);   /* burgundy del brand, no rosa palido */
  opacity: 0.55;              /* opacidad para que no domine la composicion */
}
@media (min-width: 900px) { .nosotros-locations-decor { display: block; } }
.nosotros-locations-decor svg { width: 100%; height: 100%; }

/* ═══════════════════════════════════════════════════════════════════
   VISTA SUCURSALES (/{slug}/sucursales)
   ═══════════════════════════════════════════════════════════════════ */
.sucursales-view {
  background: var(--ds-cream-50);
  min-height: 100vh;
}
.sucursales-view[hidden] { display: none; }

.sucursales-hero {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3.5rem);
  background: var(--ds-ink-0);
  border-bottom: 1px solid var(--ds-ink-100);
}
.sucursales-hero-title {
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 4rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ds-ink-900);
  margin: var(--ds-space-4) 0 var(--ds-space-4);
}
.sucursales-hero-title em {
  font-family: var(--ds-font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--ds-red-600);
}
.sucursales-hero-lede {
  font-size: var(--ds-text-lg);
  color: var(--ds-ink-500);
  max-width: 40rem;
  line-height: 1.6;
  margin: 0;
}

/* Grid de tarjetas — máximo 2 columnas, centrado en su contenedor.
   Como son 2 sucursales, no tiene sentido un grid de 3+; ocupar
   demasiado ancho diluye visualmente cada tarjeta. */
.sucursales-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-5);
  max-width: 920px;
  margin: 0 auto;
}
@media (min-width: 720px) {
  .sucursales-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ds-space-6);
  }
}

.sucursales-loading {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ds-ink-400);
  font-size: var(--ds-text-sm);
  padding: var(--ds-space-10) 0;
}

/* ─────────────────────────────────────────────────────────────────
   TARJETA DE SUCURSAL — foto arriba + body con info y botones
   ─────────────────────────────────────────────────────────────── */
.sucursal-card {
  position: relative;
  background: var(--ds-ink-0);
  border: 1px solid var(--ds-ink-200);
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
  transition: all var(--ds-duration-normal) var(--ds-ease-out);
  display: flex;
  flex-direction: column;
}
.sucursal-card:hover {
  transform: translateY(-4px);
  border-color: var(--ds-red-300);
  box-shadow: var(--ds-shadow-md);
}
.sucursal-card.is-active {
  border-color: var(--ds-red-600);
  box-shadow: 0 0 0 1px var(--ds-red-600), var(--ds-shadow-md);
}

.sucursal-card-badge {
  position: absolute;
  top: var(--ds-space-4);
  left: var(--ds-space-4);
  background: var(--ds-red-600);
  color: var(--ds-ink-0);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 5px 11px;
  border-radius: var(--ds-radius-full);
  z-index: 2;
  box-shadow: var(--ds-shadow-sm);
}

/* Header con foto */
.sucursal-card-photo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: linear-gradient(135deg, var(--ds-ink-100) 0%, var(--ds-ink-200) 100%);
  overflow: hidden;
}
.sucursal-card-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--ds-duration-slow) var(--ds-ease-out);
}
.sucursal-card:hover .sucursal-card-photo { transform: scale(1.04); }

/* Emblema (fallback sin foto) */
.sucursal-card-emblem-large {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--ds-red-600) 0%, var(--ds-red-800) 100%);
  color: var(--ds-ink-0);
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: clamp(4rem, 12vw, 7rem);
  letter-spacing: -0.05em;
}

/* Body */
.sucursal-card-body {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  flex: 1;
}

.sucursal-card-city {
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: var(--ds-text-2xl);
  letter-spacing: -0.02em;
  color: var(--ds-ink-900);
  margin: 0;
  line-height: 1;
}

.sucursal-card-row {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-3);
  margin: 0;
}
.sucursal-card-row > svg {
  width: 18px;
  height: 18px;
  color: var(--ds-red-600);
  flex-shrink: 0;
  margin-top: 2px;
}

.sucursal-card-address {
  font-size: var(--ds-text-sm);
  color: var(--ds-ink-600);
  line-height: 1.5;
}
.sucursal-card-address > span { flex: 1; }

.sucursal-card-horarios { font-size: var(--ds-text-sm); }
.sucursal-card-hor-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sucursal-card-hor-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--ds-space-3);
  color: var(--ds-ink-600);
}
.sucursal-card-hor-dias {
  font-weight: 600;
  color: var(--ds-ink-900);
}
.sucursal-card-hor-time {
  font-family: var(--ds-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--ds-text-xs);
  color: var(--ds-ink-500);
}

.sucursal-card-actions {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  margin-top: auto;
  padding-top: var(--ds-space-3);
}
@media (min-width: 480px) {
  .sucursal-card-actions { flex-direction: row; }
}
.sucursal-card-btn {
  flex: 1;
  justify-content: center;
  padding: 0.7rem 1rem;
  font-size: var(--ds-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════════════════════════════
   SUCURSALES — Perks (lo que vas a encontrar)
   ═══════════════════════════════════════════════════════════════════ */
.sucursales-perks {
  background: var(--ds-ink-0);
  padding: clamp(4rem, 8vw, 6rem) 0;
  border-top: 1px solid var(--ds-ink-100);
}
.sucursales-perks-header {
  text-align: center;
  margin: 0 auto var(--ds-space-12);
  max-width: 640px;
}
.sucursales-perks-header .ds-eyebrow { margin: 0 auto var(--ds-space-4); }
.sucursales-perks-title {
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ds-ink-900);
  margin: 0;
}
.sucursales-perks-title em {
  font-family: var(--ds-font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--ds-red-600);
}
.sucursales-perks-subtitle {
  margin: var(--ds-space-3) auto 0;
  font-size: var(--ds-text-lg);
  color: var(--ds-ink-500);
}

.sucursales-perks-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-6);
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 640px) { .sucursales-perks-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sucursales-perks-grid { grid-template-columns: repeat(3, 1fr); gap: var(--ds-space-8); } }

.sucursales-perk { text-align: center; }
.sucursales-perk-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--ds-radius-md);
  display: grid;
  place-items: center;
  background: var(--ds-red-50);
  color: var(--ds-red-600);
  margin: 0 auto var(--ds-space-4);
}
.sucursales-perk-icon svg { width: 24px; height: 24px; }
.sucursales-perk h3 {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: var(--ds-text-xl);
  letter-spacing: -0.015em;
  color: var(--ds-ink-900);
  margin: 0 0 var(--ds-space-2);
  line-height: 1.25;
}
.sucursales-perk p {
  font-size: var(--ds-text-base);
  color: var(--ds-ink-500);
  line-height: 1.6;
  margin: 0 auto;
  max-width: 26ch;     /* limita el ancho del texto para mejor lectura */
}

/* ═══════════════════════════════════════════════════════════════════
   SUCURSALES — 3 pasos para comprar
   ═══════════════════════════════════════════════════════════════════ */
.sucursales-pasos {
  background: var(--ds-cream-100);
  padding: clamp(4rem, 8vw, 6rem) 0;
  border-top: 1px solid var(--ds-cream-200);
}
.sucursales-pasos-header {
  text-align: center;
  margin: 0 auto var(--ds-space-12);
  max-width: 640px;
}
.sucursales-pasos-title {
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ds-ink-900);
  margin: var(--ds-space-3) 0 0;
}
.sucursales-pasos-title em {
  font-family: var(--ds-font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--ds-red-600);
}

.sucursales-pasos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-6);
  max-width: 1100px;
  margin: 0 auto;
  align-items: start;
}
@media (min-width: 900px) {
  .sucursales-pasos-grid {
    /* 3 pasos + 2 conectores → 5 columnas */
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: var(--ds-space-4);
  }
}

.sucursales-paso {
  background: var(--ds-ink-0);
  border: 1px solid var(--ds-ink-200);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-8);
  position: relative;
  transition: all var(--ds-duration-normal) var(--ds-ease-out);
}
.sucursales-paso:hover {
  border-color: var(--ds-red-300);
  transform: translateY(-3px);
  box-shadow: var(--ds-shadow-sm);
}

.sucursales-paso-num {
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(3rem, 5vw, 4rem);
  line-height: 1;
  color: var(--ds-red-600);
  letter-spacing: -0.03em;
  display: block;
  margin-bottom: var(--ds-space-4);
}
.sucursales-paso h3 {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: var(--ds-text-xl);
  letter-spacing: -0.015em;
  color: var(--ds-ink-900);
  margin: 0 0 var(--ds-space-2);
}
.sucursales-paso p {
  font-size: var(--ds-text-base);
  color: var(--ds-ink-500);
  line-height: 1.6;
  margin: 0;
}

/* Conector entre pasos (solo desktop) */
.sucursales-paso-connector {
  display: none;
  width: 32px;
  height: 2px;
  background: linear-gradient(to right, var(--ds-red-300), transparent);
  align-self: center;
}
.sucursales-paso-connector::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-left-color: var(--ds-red-300);
  margin-left: 30px;
  margin-top: -5px;
}
@media (min-width: 900px) {
  .sucursales-paso-connector { display: block; }
}

/* ═══════════════════════════════════════════════════════════════════
   SUCURSALES — CTA final
   ═══════════════════════════════════════════════════════════════════ */
.sucursales-cta {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 6rem);
  background: var(--ds-cream-50);
}

.sucursales-cta-card {
  position: relative;
  background: linear-gradient(135deg, var(--ds-ink-900) 0%, var(--ds-red-800) 60%, var(--ds-red-700) 100%);
  color: var(--ds-ink-0);
  border-radius: var(--ds-radius-xl);
  padding: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-8);
  align-items: center;
}
.sucursales-cta-card::before {
  content: "";
  position: absolute;
  top: -40%; right: -10%;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
@media (min-width: 900px) {
  .sucursales-cta-card {
    grid-template-columns: 1.5fr 1fr;
    gap: var(--ds-space-12);
  }
}

.sucursales-cta-eyebrow {
  background: rgba(255, 255, 255, 0.1);
  color: var(--ds-ink-0);
  border-color: rgba(255, 255, 255, 0.2);
}
.sucursales-cta-eyebrow::before { background: var(--ds-ink-0); }

.sucursales-cta-title {
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: var(--ds-space-4) 0 var(--ds-space-4);
  color: var(--ds-ink-0);
}
.sucursales-cta-title em {
  font-family: var(--ds-font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--ds-cream-200);
}

.sucursales-cta-pitch {
  font-size: var(--ds-text-lg);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  margin: 0;
  max-width: 38rem;
}

.sucursales-cta-actions {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
}
.sucursales-cta-actions .ds-btn {
  width: 100%;
  justify-content: center;
}
.sucursales-cta-btn-primary {
  background: #22c55e;             /* verde WhatsApp para destacar */
  color: var(--ds-ink-0);
}
.sucursales-cta-btn-primary:hover {
  background: #16a34a;
}
.sucursales-cta-btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ds-ink-0);
  border-color: rgba(255, 255, 255, 0.25);
}
.sucursales-cta-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
}

/* ════════════════════════════════════════════════════════════════
   BARRA FLOTANTE DEL CARRITO (PERMANENTE hasta completar la compra)
   Aparece abajo, centrada, cuando hay productos; se queda visible para que
   el comprador SIEMPRE encuentre el carrito (no como el menú del navbar).
   Click → abre el carrito. La controla app.js (actualizarBarraCarrito).
   ════════════════════════════════════════════════════════════════ */
.barra-carrito {
  position: fixed;
  bottom: 1.25rem;
  left: 0; right: 0;
  margin: 0 auto;                       /* centrada sin transform */
  width: max-content;
  max-width: calc(100% - 1.5rem);
  z-index: 75;                          /* sobre contenido; bajo drawer/modales */
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: var(--c-mega-red, #93000b);
  color: #fff;
  border: none;
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(147, 0, 11, 0.35);
  padding: 0.6rem 0.7rem 0.6rem 1.1rem;
  cursor: pointer;
  font-family: inherit;
  opacity: 0;
  transform: translateY(180%);         /* oculta: fuera de pantalla abajo */
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s;
}
.barra-carrito.visible { opacity: 1; transform: translateY(0); }
.barra-carrito.pop { animation: barra-carrito-pop .35s ease; }
@keyframes barra-carrito-pop {
  0%, 100% { transform: translateY(0) scale(1); }
  40%      { transform: translateY(-5px) scale(1.04); }
}
.barra-carrito-icono { position: relative; display: grid; place-items: center; flex-shrink: 0; }
.barra-carrito-icono svg { width: 22px; height: 22px; }
.barra-carrito-badge {
  position: absolute; top: -8px; right: -10px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: #fff; color: var(--c-mega-red, #93000b);
  font-size: 11px; font-weight: 900; line-height: 18px; text-align: center;
}
.barra-carrito-info { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.barra-carrito-info strong { font-size: 13px; font-weight: 800; }
.barra-carrito-info span { font-size: 11px; opacity: 0.85; }
.barra-carrito-cta {
  background: rgba(255, 255, 255, 0.18);
  font-size: 12px; font-weight: 800;
  padding: .45rem .9rem; border-radius: 999px; white-space: nowrap;
}
@media (max-width: 639px) {
  .barra-carrito { left: .75rem; right: .75rem; width: auto; justify-content: space-between; }
}