/* =========================================================
   DEPORTES JIMMY — SUCURSALES  (v7.28)
   "Encuentra tu tienda más cercana"
   Depende de: deportes-jimmy-design-system.css
   ========================================================= */

.dj-suc {
  --suc-radio: 18px;
  --suc-bn: 1;                     /* 1 = blanco y negro, 0 = a color */
  --suc-bn-dur: 1.1s;              /* lo que tarda en pasar a color */
  --suc-fit: cover;                /* cover = recorta y llena; contain = foto entera */
  --suc-media-ratio: 4 / 3;        /* proporción de la foto en móvil/tablet */
  position: relative;
  padding: var(--dj-space-xl, 64px) 0;
  background: var(--dj-white, #fff);
  overflow: hidden;
}

/* Trama diagonal muy suave, como en el resto de la web */
.dj-suc::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(0, 0, 0, .022) 0 1px,
    transparent 1px 14px
  );
  pointer-events: none;
}

.dj-suc > .dj-container { position: relative; z-index: 1; }


/* ---------------------------------------------------------
   TÍTULO
   --------------------------------------------------------- */
.dj-suc__head {
  text-align: center;
  margin-bottom: var(--dj-space-lg, 40px);
}

.dj-suc__title {
  font-family: var(--dj-font-display, 'Anton', sans-serif);
  font-size: clamp(1.9rem, 5.2vw, 3.4rem);
  font-style: italic;
  letter-spacing: .5px;
  line-height: 1;
  margin: 0 0 12px;
  color: var(--dj-black, #000);
}

/*
  v7.30 — POR QUÉ "MÁS CERCANA" SALÍA FLACO.

  El sistema de diseño tiene esta regla global:

      p, li, span, a { font-family: var(--dj-font-body); }

  El <h2> hereda Anton, pero la herencia PIERDE contra cualquier
  regla escrita, por floja que sea. Ese `span` de una sola palabra
  le ganaba a la herencia del padre y "MÁS CERCANA" se pintaba en
  Poppins: misma cursiva, otra letra, mucho más fina.

  Aquí se le devuelve la del padre a la fuerza. Lo ÚNICO que
  cambia entre las dos mitades del título es el color.
*/
.dj-suc__title span {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  letter-spacing: inherit;
  color: var(--dj-red, #FF0000);
}

.dj-suc__sub {
  font-family: var(--dj-font-body, 'Poppins', sans-serif);
  font-size: clamp(.9rem, 1.6vw, 1.05rem);
  color: var(--dj-gray-dark, #4A4A4A);
  max-width: 640px;
  margin: 0 auto;
}


/* ---------------------------------------------------------
   PESTAÑAS
   El indicador rojo es UN solo bloque que se desliza: se mueve
   con transform, así que va a 60fps y no repinta nada.

   v7.30 — SE ACABÓ EL SCROLL LATERAL.

   Antes, en celular, las pestañas se arrastraban con el dedo. El
   problema es que lo que no se ve, no existe: la tercera tienda
   quedaba fuera de pantalla y nadie la buscaba. Ahora es una
   rejilla que se reparte el ancho que haya. Con tres tiendas y
   pantalla ancha van en fila; en celular se parten en dos
   columnas; y cuando abran la cuarta y la quinta, se acomodan
   solas en más filas sin tocar una línea de código.
   --------------------------------------------------------- */
.dj-suc__tabsbox {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
}

.dj-suc__tabs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  padding: 6px;
  max-width: 100%;
  background: var(--dj-gray-light, #F4F4F5);
  border-radius: var(--suc-radio) var(--suc-radio) 0 0;
}

.dj-suc__tabs-ind {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 14px;
  background: var(--dj-red, #FF0000);
  box-shadow: var(--dj-shadow-red, 0 8px 20px rgba(255, 0, 0, .25));
  transform: translate(0, 0);
  transition:
    transform .46s cubic-bezier(.16, .84, .28, 1),
    width     .46s cubic-bezier(.16, .84, .28, 1),
    height    .46s cubic-bezier(.16, .84, .28, 1);
  pointer-events: none;
  opacity: 0;
}
.dj-suc__tabs.is-ready .dj-suc__tabs-ind { opacity: 1; }

.dj-suc__tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 26px;
  border: 0;
  background: transparent;
  border-radius: 14px;
  cursor: pointer;
  text-align: center;
  font-family: var(--dj-font-body, 'Poppins', sans-serif);
  font-size: .82rem;
  font-weight: var(--dj-weight-bold, 700);
  letter-spacing: .8px;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--dj-black-soft, #111);
  transition: color .25s ease, background .25s ease;
}

.dj-suc__tab-ico {
  display: inline-flex;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: var(--dj-red, #FF0000);
  transition: color .25s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.dj-suc__tab-ico svg { width: 100%; height: 100%; }

.dj-suc__tab-txt { min-width: 0; }

/* Distancia real, cuando el cliente ha dado su ubicación */
.dj-suc__tab-dist {
  font-size: .68rem;
  font-weight: var(--dj-weight-semibold, 600);
  letter-spacing: .2px;
  opacity: .72;
  text-transform: none;
  white-space: nowrap;
}
.dj-suc__tab-dist:empty { display: none; }

/*
  v7.29 — EL HOVER YA NO PINTA EL TEXTO DE ROJO.

  Antes decía `color: red` sin más, y como esta regla iba después
  de `.is-active` (misma especificidad, gana la última) el rojo se
  comía al blanco: al pasar el mouse por la pestaña activa quedaba
  texto rojo sobre la pastilla roja, ilegible. Y al pasar por la
  pestaña de al lado mientras el indicador iba llegando, lo mismo.

  Ahora el hover solo toca a las pestañas que NO están activas, y
  en vez de cambiar de color pone un fondo suave: se nota que es
  pulsable sin pelearse con nada.
*/
.dj-suc__tab:not(.is-active):hover {
  background: rgba(0, 0, 0, .06);
  color: var(--dj-black, #000);
}
.dj-suc__tab:not(.is-active):hover .dj-suc__tab-ico { transform: translateY(-2px); }

.dj-suc__tab.is-active,
.dj-suc__tab.is-active .dj-suc__tab-ico { color: #fff; }
.dj-suc__tab.is-active .dj-suc__tab-ico { transform: none; }

.dj-suc__tab:focus-visible {
  outline: 2px solid var(--dj-red, #FF0000);
  outline-offset: 3px;
}

/* Sin JavaScript el indicador no sabe dónde ponerse: la pestaña
   activa se pinta ella misma de rojo y no se rompe nada. */
.no-js .dj-suc__tab.is-active { background: var(--dj-red, #FF0000); }


/* ---------------------------------------------------------
   PANELES
   Se apilan en la MISMA celda de un grid: así el contenedor
   mide siempre lo que mide el panel más alto y el cruce de
   uno a otro no da ningún salto de altura.
   --------------------------------------------------------- */
/*
  v7.31 — LA TARJETA MIDE LO QUE MIDE LA TIENDA QUE SE ESTÁ VIENDO.

  Antes los tres paneles se apilaban en una rejilla y el contenedor
  tomaba el alto del MÁS ALTO. Market Plaza tiene tres líneas de
  horario y las otras dos tienen dos: esos ~30px de más se los
  comían las otras dos tiendas como banda blanca al pie de la
  tarjeta, siempre, aunque nadie estuviera mirando Market Plaza.

  Ahora los paneles van superpuestos y el alto lo pone el
  JavaScript midiendo el que está activo, con transición: la
  tarjeta crece o encoge al cambiar de tienda en vez de reservar
  hueco para el peor caso.
*/
.dj-suc__panels {
  position: relative;
  height: auto;
  background: var(--dj-white, #fff);
  border: 1px solid rgba(0, 0, 0, .07);
  border-radius: var(--suc-radio);
  box-shadow: var(--dj-shadow-md, 0 8px 24px rgba(0, 0, 0, .14));
  overflow: hidden;
  transition: height .5s cubic-bezier(.16, .84, .28, 1);
}

.dj-suc__panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: stretch;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(16px) scale(.988);
  transition:
    opacity    .38s ease,
    transform  .55s cubic-bezier(.16, .84, .28, 1),
    visibility 0s linear .45s;
}

.dj-suc__panel.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition:
    opacity    .45s ease .08s,
    transform  .6s cubic-bezier(.16, .84, .28, 1) .08s,
    visibility 0s;
}

/* El navegador no anima elementos con [hidden]; el JS lo quita
   justo antes de encender el panel. */
.dj-suc__panel[hidden] { display: none; }

/* Sin JavaScript nadie mide nada: el primer panel vuelve al flujo
   normal y le da el alto a la tarjeta él solo. */
.no-js .dj-suc__panel.is-active { position: relative; }


/* ---------------------------------------------------------
   FOTO — blanco y negro que pasa a color si está ABIERTA
   --------------------------------------------------------- */
.dj-suc__media {
  position: relative;
  margin: 0;
  min-height: 380px;
  background: var(--dj-black, #000);
  overflow: hidden;
}

.dj-suc__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--suc-fit, cover);
  object-position: var(--suc-pos, center center);
  display: block;
  filter: grayscale(calc(var(--suc-bn) * 100%)) contrast(1.06) brightness(.94);
  transform: scale(1.06);
  transition:
    filter    var(--suc-bn-dur) ease,
    transform 1.6s cubic-bezier(.16, .84, .28, 1);
}

.dj-suc__panel.is-active .dj-suc__img { transform: scale(1); }

/* Lo enciende el JS cuando termina la cuenta atrás y la tienda
   está abierta. Si está cerrada, esta clase nunca llega. */
.dj-suc__panel.is-color .dj-suc__img {
  filter: grayscale(0) contrast(1.02) brightness(1);
}

/* Tienda cerrada: se queda en gris y además se apaga un poco.
   No hace falta leer nada para entenderlo. */
.dj-suc__panel.is-cerrada .dj-suc__img {
  filter: grayscale(100%) contrast(.92) brightness(.62);
}

.dj-suc__img--vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dj-gradient-deluxe-reverse, linear-gradient(315deg, #FF0000 0%, #000 100%));
}
.dj-suc__img--vacia img { width: 55%; max-width: 200px; height: auto; opacity: .8; }

.dj-suc__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .25) 42%, transparent 70%);
  pointer-events: none;
}

.dj-suc__media-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 28px;
  z-index: 2;
}

.dj-suc__place {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  font-family: var(--dj-font-display, 'Anton', sans-serif);
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
}

.dj-suc__place-ico {
  display: inline-flex;
  width: clamp(24px, 3vw, 34px);
  height: clamp(24px, 3vw, 34px);
  color: var(--dj-red, #FF0000);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
}
.dj-suc__place-ico svg { width: 100%; height: 100%; }


/* ---------------------------------------------------------
   CHAPA DE ESTADO — Abierto / Cierra pronto / Cerrado
   --------------------------------------------------------- */
.dj-suc__estado {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 8px 13px;
  border-radius: var(--dj-radius-pill, 999px);
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .14);
  font-family: var(--dj-font-body, 'Poppins', sans-serif);
  font-size: .68rem;
  font-weight: var(--dj-weight-bold, 700);
  letter-spacing: .9px;
  text-transform: uppercase;
  color: #fff;
  transition: background .35s ease, border-color .35s ease;
}

.dj-suc__estado-dot {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dj-gray, #AEAEAF);
  flex: 0 0 auto;
}

/* El halo que late solo existe cuando la tienda está abierta:
   un punto parpadeando junto a "Cerrado" sería una burla. */
.dj-suc__estado--abierto .dj-suc__estado-dot { background: #16C264; }
.dj-suc__estado--abierto .dj-suc__estado-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid #16C264;
  animation: dj-suc-latido 1.9s ease-out infinite;
}

.dj-suc__estado--pronto .dj-suc__estado-dot { background: #FFB020; }
.dj-suc__estado--pronto { background: rgba(70, 45, 0, .78); border-color: rgba(255, 176, 32, .35); }

.dj-suc__estado--cerrado .dj-suc__estado-dot { background: var(--dj-red, #FF0000); }
.dj-suc__estado--cerrado { background: rgba(60, 0, 0, .78); border-color: rgba(255, 0, 0, .32); }

@keyframes dj-suc-latido {
  0%   { transform: scale(.7); opacity: .9; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* Cambio de texto sin parpadeo feo */
.dj-suc__estado-txt {
  transition: opacity .25s ease;
}
.dj-suc__estado.is-swap .dj-suc__estado-txt { opacity: 0; }


/* ---------------------------------------------------------
   COLUMNA DE DATOS
   --------------------------------------------------------- */
.dj-suc__data {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: clamp(24px, 3vw, 40px);
}

.dj-suc__row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.dj-suc__row:last-of-type { border-bottom: 0; }

.dj-suc__row-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--dj-gray-light, #F4F4F5);
  color: var(--dj-red, #FF0000);
  transition: background .3s ease, transform .3s ease;
}
.dj-suc__row-ico svg { width: 21px; height: 21px; }

.dj-suc__row:hover .dj-suc__row-ico {
  background: rgba(255, 0, 0, .1);
  transform: translateY(-2px);
}

.dj-suc__row-body { min-width: 0; }

.dj-suc__row-title {
  font-family: var(--dj-font-display, 'Anton', sans-serif);
  font-size: 1.02rem;
  letter-spacing: .6px;
  text-transform: uppercase;
  margin: 0 0 5px;
  color: var(--dj-black, #000);
}

.dj-suc__row-txt {
  font-family: var(--dj-font-body, 'Poppins', sans-serif);
  font-size: .92rem;
  line-height: 1.5;
  color: var(--dj-gray-dark, #4A4A4A);
  margin: 0;
}

.dj-suc__tel {
  font-weight: var(--dj-weight-semibold, 600);
  color: var(--dj-black-soft, #111);
  text-decoration: none;
}
.dj-suc__tel:hover { color: var(--dj-red, #FF0000); }

.dj-suc__horario {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dj-suc__horario li {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--dj-font-body, 'Poppins', sans-serif);
  font-size: .9rem;
  line-height: 1.55;
  color: var(--dj-gray-dark, #4A4A4A);
}
.dj-suc__horario li span {
  font-weight: var(--dj-weight-semibold, 600);
  color: var(--dj-black-soft, #111);
}

/* Línea que escribe el JS: "Hoy domingo: cerrado" */
.dj-suc__hoy {
  margin: 8px 0 0;
  font-family: var(--dj-font-body, 'Poppins', sans-serif);
  font-size: .78rem;
  font-weight: var(--dj-weight-semibold, 600);
  letter-spacing: .3px;
  color: var(--dj-red, #FF0000);
  min-height: 1em;
}
.dj-suc__hoy:empty { display: none; }


/* ---------------------------------------------------------
   BOTONES
   --------------------------------------------------------- */
.dj-suc__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 22px;
}

.dj-suc__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 150px;
  padding: 15px 20px;
  border-radius: 12px;
  border: 2px solid transparent;
  font-family: var(--dj-font-body, 'Poppins', sans-serif);
  font-size: .78rem;
  font-weight: var(--dj-weight-bold, 700);
  letter-spacing: .9px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s ease, background .25s ease, color .25s ease,
              border-color .25s ease, box-shadow .25s ease;
}
.dj-suc__btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.dj-suc__btn:hover { transform: translateY(-2px); }

.dj-suc__btn--rojo {
  background: var(--dj-red, #FF0000);
  color: #fff;
}
.dj-suc__btn--rojo:hover {
  background: var(--dj-red-dark, #C40000);
  color: #fff;
  box-shadow: var(--dj-shadow-red, 0 8px 20px rgba(255, 0, 0, .25));
}

.dj-suc__btn--linea {
  background: transparent;
  border-color: var(--dj-red, #FF0000);
  color: var(--dj-red, #FF0000);
}
.dj-suc__btn--linea:hover {
  background: var(--dj-red, #FF0000);
  color: #fff;
}

.dj-suc__btn--wa {
  background: #25D366;
  color: #fff;
}
.dj-suc__btn--wa:hover {
  background: #1DA851;
  color: #fff;
  box-shadow: 0 8px 20px rgba(37, 211, 102, .3);
}


/* ---------------------------------------------------------
   "ESCRÍBENOS" — formulario simple debajo de cada tienda
   --------------------------------------------------------- */
.dj-suc__contacto {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(0, 0, 0, .07);
}

.dj-suc__contacto-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.dj-suc__contacto-title svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  color: var(--dj-red, #FF0000);
}

.dj-suc__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Trampa para spam: existe en el HTML, pero ningún cliente la ve
   ni puede llegar a ella con el teclado. */
.dj-suc__form-trampa {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.dj-suc__form-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.dj-suc__form-fila .dj-suc__form-campo { flex: 1 1 180px; }

.dj-suc__form-campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--dj-font-body, 'Poppins', sans-serif);
}
.dj-suc__form-campo > span {
  font-size: .76rem;
  font-weight: var(--dj-weight-semibold, 600);
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--dj-gray-dark, #4A4A4A);
}

.dj-suc__form-campo input,
.dj-suc__form-campo textarea {
  font-family: var(--dj-font-body, 'Poppins', sans-serif);
  font-size: .92rem;
  color: var(--dj-black-soft, #111);
  background: var(--dj-gray-light, #F4F4F5);
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 12px 14px;
  resize: vertical;
  transition: border-color .25s ease, background .25s ease;
}
.dj-suc__form-campo input:focus,
.dj-suc__form-campo textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--dj-red, #FF0000);
}

.dj-suc__form-msg {
  margin: 0;
  min-height: 1.2em;
  font-family: var(--dj-font-body, 'Poppins', sans-serif);
  font-size: .84rem;
  font-weight: var(--dj-weight-semibold, 600);
}
.dj-suc__form-msg:empty { display: none; }
.dj-suc__form-msg.es-error { color: var(--dj-red-dark, #C40000); }
.dj-suc__form-msg.es-ok    { color: #1DA851; }

.dj-suc__form-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 4px;
}
.dj-suc__form-btns .dj-suc__btn { min-width: 170px; }
.dj-suc__form-btns .dj-suc__btn:disabled {
  opacity: .6;
  cursor: default;
  transform: none;
}


/* ---------------------------------------------------------
   BUSCA TU SUCURSAL MÁS CERCANA  (v7.29)
   Mismo tipo que el titular de la sección: Anton en cursiva,
   todo del mismo grosor, y solo "más cercana" en rojo.
   --------------------------------------------------------- */
.dj-suc__geo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: var(--dj-space-lg, 40px);
  padding-top: var(--dj-space-lg, 40px);
  border-top: 1px solid rgba(0, 0, 0, .09);
  text-align: center;
}

.dj-suc__geo-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 40px;
  border: 2px solid var(--dj-black, #000);
  border-radius: 14px;
  background: var(--dj-white, #fff);
  color: var(--dj-black, #000);
  cursor: pointer;
  overflow: hidden;
  transition: color .3s ease, border-color .3s ease, transform .25s ease, box-shadow .3s ease;
}

/* El relleno negro entra deslizándose, no aparece de golpe */
.dj-suc__geo-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--dj-black, #000);
  transform: translateX(-101%);
  transition: transform .42s cubic-bezier(.16, .84, .28, 1);
  z-index: 0;
}
.dj-suc__geo-btn:hover::before { transform: translateX(0); }

.dj-suc__geo-btn:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--dj-shadow-md, 0 8px 24px rgba(0, 0, 0, .14));
}
.dj-suc__geo-btn:focus-visible { outline: 3px solid var(--dj-red, #FF0000); outline-offset: 3px; }

.dj-suc__geo-ico,
.dj-suc__geo-txt { position: relative; z-index: 1; }

.dj-suc__geo-ico {
  display: inline-flex;
  width: 26px;
  height: 26px;
  color: var(--dj-red, #FF0000);
  flex: 0 0 auto;
}
.dj-suc__geo-ico svg { width: 100%; height: 100%; }

.dj-suc__geo-txt {
  font-family: var(--dj-font-display, 'Anton', sans-serif);
  font-style: italic;
  font-weight: 400;          /* Anton solo tiene un peso: todo va igual de grueso */
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  line-height: 1;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.dj-suc__geo-txt em {
  font-family: inherit;      /* mismo motivo que el título: si no, cae en Poppins */
  font-size: inherit;
  font-weight: inherit;      /* mismo grosor: lo único que cambia es el color */
  font-style: inherit;
  letter-spacing: inherit;
  color: var(--dj-red, #FF0000);
}

/* Mientras el navegador pregunta por la ubicación */
.dj-suc__geo-spin {
  position: relative;
  z-index: 1;
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: dj-suc-gira .7s linear infinite;
}
.dj-suc__geo-btn.is-cargando { pointer-events: none; }
.dj-suc__geo-btn.is-cargando .dj-suc__geo-spin { display: inline-block; }

@keyframes dj-suc-gira { to { transform: rotate(360deg); } }

/* El resultado: "Tu tienda más cercana es Market Plaza, a 2,4 km" */
.dj-suc__geo-msg {
  margin: 0;
  max-width: 560px;
  font-family: var(--dj-font-body, 'Poppins', sans-serif);
  font-size: .92rem;
  line-height: 1.5;
  color: var(--dj-gray-dark, #4A4A4A);
}
.dj-suc__geo-msg:empty { display: none; }
.dj-suc__geo-msg strong { color: var(--dj-black, #000); font-weight: var(--dj-weight-bold, 700); }
.dj-suc__geo-msg.es-error { color: var(--dj-red-dark, #C40000); }

.dj-suc__geo-ruta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 12px;
  background: var(--dj-red, #FF0000);
  color: #fff;
  font-family: var(--dj-font-body, 'Poppins', sans-serif);
  font-size: .78rem;
  font-weight: var(--dj-weight-bold, 700);
  letter-spacing: .9px;
  text-transform: uppercase;
  text-decoration: none;
  transition: var(--dj-transition, all .25s ease);
  animation: dj-suc-entra .4s cubic-bezier(.16, .84, .28, 1);
}
.dj-suc__geo-ruta svg { width: 18px; height: 18px; }
.dj-suc__geo-ruta:hover {
  background: var(--dj-red-dark, #C40000);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--dj-shadow-red, 0 8px 20px rgba(255, 0, 0, .25));
}
.dj-suc__geo-ruta[hidden] { display: none; }

@keyframes dj-suc-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Enlace de rescate: si no dan permiso, al menos que vean el mapa */
.dj-suc__geo-todas {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--dj-font-body, 'Poppins', sans-serif);
  font-size: .74rem;
  font-weight: var(--dj-weight-semibold, 600);
  letter-spacing: .6px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dj-gray-dark, #4A4A4A);
  transition: color .2s ease;
}
.dj-suc__geo-todas svg { width: 17px; height: 17px; color: var(--dj-red, #FF0000); }
.dj-suc__geo-todas:hover { color: var(--dj-red, #FF0000); }


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  .dj-suc__panel { grid-template-columns: 1fr; }
  .dj-suc__data  { justify-content: flex-start; }

  /* En una sola columna la foto ya no tiene una columna de datos
     al lado que le marque el alto, así que se le da la proporción
     de la foto original: se ve entera, sin recortes raros. */
  .dj-suc__media {
    min-height: 0;
    aspect-ratio: var(--suc-media-ratio, 4 / 3);
  }

  /* A partir de aquí las pestañas dejan de ir en fila y se
     reparten el ancho a partes iguales. `auto-fit` con un mínimo
     de 150px decide solo cuántas caben por fila: tres tiendas dan
     una fila o dos según la pantalla, y seis darán las que hagan
     falta. Nunca hay que deslizar. */
  .dj-suc__tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    width: 100%;
    border-radius: var(--suc-radio);
  }
  .dj-suc__tabsbox { width: 100%; }
  .dj-suc__tab { padding: 14px 12px; }
}

@media (max-width: 768px) {
  .dj-suc { padding: var(--dj-space-lg, 40px) 0; }

  .dj-suc__tabs { margin-bottom: 10px; }
  .dj-suc__tab {
    font-size: .74rem;
    letter-spacing: .4px;
    gap: 7px;
  }

  .dj-suc__panels { border-radius: var(--suc-radio); }
  .dj-suc__media-info { padding: 20px; }

  .dj-suc__btn { flex: 1 1 100%; }

  .dj-suc__geo { padding-top: var(--dj-space-md, 24px); }
  .dj-suc__geo-btn  { width: 100%; justify-content: center; padding: 17px 22px; }
  .dj-suc__geo-ruta { width: 100%; justify-content: center; }
}

@media (max-width: 560px) {
  /* Dos por fila. El nombre largo ("Costa del Este") parte en dos
     líneas en vez de salirse: la rejilla iguala el alto de toda la
     fila, así que no queda ninguna pastilla descuadrada. */
  .dj-suc__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dj-suc__tab {
    flex-direction: column;
    gap: 5px;
    padding: 12px 8px;
    font-size: .7rem;
  }
  .dj-suc__tab-ico { width: 15px; height: 15px; }

  .dj-suc__row { gap: 13px; padding: 15px 0; }
  .dj-suc__row-ico { width: 40px; height: 40px; }
  .dj-suc__row-ico svg { width: 18px; height: 18px; }
}


/* ---------------------------------------------------------
   ACCESIBILIDAD — quien pidió menos movimiento, menos movimiento
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dj-suc__tabs-ind,
  .dj-suc__panel,
  .dj-suc__img,
  .dj-suc__btn,
  .dj-suc__row-ico,
  .dj-suc__geo-btn,
  .dj-suc__geo-btn::before { transition: none !important; }

  .dj-suc__geo-ruta { animation: none; }

  .dj-suc__estado--abierto .dj-suc__estado-dot::after { animation: none; }
  .dj-suc__panel.is-active .dj-suc__img { transform: none; }
}