/* ============================================================================
   MEGASUR — Rediseño del slider del header (home)
   Tema: Shopkeeper + Swiper.js  |  Solo CSS  |  Cargar vía mu-plugin
   ----------------------------------------------------------------------------
   Reglas de convivencia con Swiper:
   - NO se tocan transform / transition / display flex de .swiper-wrapper
     ni de .swiper-slide (los controla Swiper).
   - Solo se estiliza el FONDO del slide y el CONTENIDO (.slider-content*).
   - Decoración de fondo con gradientes + pseudo-elementos (sin imágenes).
   - Especificidad reforzada con .home / .shortcode_getbowtied_slider y,
     donde el tema pisa con estilos inline, con !important.

   Paleta de marca:
     --ms-red-900: #7d1817  (rojo profundo, sombra/base)
     --ms-red-700: #991e1d  (rojo primario Megasur / header)
     --ms-red-500: #b72626  (rojo del slide original)
     --ms-red-400: #cf3030  (acento claro para el glow)
   ============================================================================ */

.home .shortcode_getbowtied_slider.swiper-container {
  --ms-red-900: #7d1817;
  --ms-red-700: #991e1d;
  --ms-red-500: #b72626;
  --ms-red-400: #cf3030;
  --ms-white:   #ffffff;
  --ms-ink:     rgba(255, 255, 255, 0.86); /* texto secundario legible */
}

/* ---------------------------------------------------------------------------
   1) Contenedor / alto
   Un poco más alto que 450px para dar aire a la nueva jerarquía.
   overflow:hidden ya lo maneja Swiper; solo aseguramos el recorte de la
   decoración de fondo.
--------------------------------------------------------------------------- */
.home .shortcode_getbowtied_slider.swiper-container {
  height: 520px !important;
  overflow: hidden;
  /* El slider ya trae su propio gradiente: no dejamos margen inferior para
     que quede al ras con el contenido de abajo (elimina espacio extra). */
  margin-bottom: 0 !important;
}

/* ---------------------------------------------------------------------------
   1.b) FRANJA ROJA del contenedor padre (WPBakery)
   La fila (.vc_row) y la columna interna (.vc_column-inner) que envuelven al
   slider tienen background-color #991e1d + padding-top, y son más altas que el
   slider (595px vs 520px): por eso asomaba rojo arriba y abajo.
   Como el slider ya tiene su gradiente, hacemos transparentes esos ancestros
   y eliminamos el padding/espacio extra. Se targetean con :has().
--------------------------------------------------------------------------- */
.home .vc_row:has(> .wpb_column > .vc_column-inner > .wpb_wrapper > .shortcode_getbowtied_slider),
.home .vc_row:has(.shortcode_getbowtied_slider),
.home .wpb_column:has(.shortcode_getbowtied_slider),
.home .vc_column-inner:has(.shortcode_getbowtied_slider),
.home .wpb_wrapper:has(> .shortcode_getbowtied_slider) {
  background-color: transparent !important;
  background-image: none !important;
}

/* Quitamos el padding-top de la columna interna (35px) que empujaba el slider
   y dejaba banda roja arriba. */
.home .vc_column-inner:has(.shortcode_getbowtied_slider) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ---------------------------------------------------------------------------
   2) Fondo del slide: gradiente con profundidad (reemplaza el rojo plano)
   Diagonal oscuro→claro + un halo radial cálido arriba a la izquierda.
   Se usa !important porque el tema aplica el color de fondo inline.
--------------------------------------------------------------------------- */
.home .shortcode_getbowtied_slider .swiper-slide {
  background-color: var(--ms-red-700) !important; /* fallback sólido */
  background-image:
    radial-gradient(120% 140% at 15% 0%,
      rgba(207, 48, 48, 0.55) 0%,
      rgba(207, 48, 48, 0) 55%),
    linear-gradient(135deg,
      var(--ms-red-500) 0%,
      var(--ms-red-700) 55%,
      var(--ms-red-900) 100%) !important;
  background-repeat: no-repeat !important;
  position: relative;
  overflow: hidden;
}

/* Formas geométricas sutiles detrás del contenido (pseudo-elementos).
   Franjas diagonales muy tenues + un círculo de luz. No captan clics. */
.home .shortcode_getbowtied_slider .swiper-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(115deg,
      rgba(255, 255, 255, 0.05) 0px,
      rgba(255, 255, 255, 0.05) 2px,
      transparent 2px,
      transparent 26px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
  opacity: 0.7;
}

.home .shortcode_getbowtied_slider .swiper-slide::after {
  content: "";
  position: absolute;
  right: -8%;
  bottom: -35%;
  width: 46vw;
  max-width: 620px;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.04) 40%,
      rgba(255, 255, 255, 0) 68%);
}

/* Contenido por encima de la decoración */
.home .shortcode_getbowtied_slider .swiper-slide .slider-content {
  position: relative;
  z-index: 2;
  /* --------------------------------------------------------------------
     DESPEJE DEL HEADER TRANSPARENTE
     El tema tiene header transparente que FLOTA sobre el hero: el navbar
     se superpone a la parte superior del slide (~70-110px). .slider-content
     es display:table-cell con vertical-align:middle, así que un padding-top
     empuja el centrado hacia abajo y deja el contenido centrado en el ÁREA
     VISIBLE (por debajo del navbar), sin quedar tapado.
     Nota: se calibra sin la barra de admin de WP (el visitante no la tiene).
  -------------------------------------------------------------------- */
  padding-top: 78px !important;
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   HEADER: que el gradiente del hero se vea DETRÁS del navbar transparente
   El slide ya arranca en el tope del hero (su gradiente sube detrás del nav),
   pero .site-header pinta un fondo rojo plano (#991e1d) que corta el gradiente
   en la franja del navbar. En la HOME lo hacemos transparente para que el
   header flote sobre el rojo degradado (sin franja plana).
   Guardas :not(...) para no afectar un eventual header sticky/fijo al
   scrollear (que debe conservar su fondo sólido sobre el contenido blanco).
   SOLO DESKTOP (min-width:1025px): en tablet/mobile el header va apilado
   sobre el hero (no flota), así que debe conservar su fondo rojo; si lo
   hiciéramos transparente ahí quedaría una banda blanca con el logo invisible.
--------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .home .site-header.default:not(.sticky):not(.stuck):not(.fixed):not(.is-stuck):not(.is-sticky):not(.sticky-active):not(.scrolled) {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-bottom: 0 !important;
  }
}

/* ---------------------------------------------------------------------------
   3) Caja de contenido: espaciado y ancho de lectura
--------------------------------------------------------------------------- */
.home .shortcode_getbowtied_slider .slider-content-wrapper {
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

/* ---------------------------------------------------------------------------
   4) Tipografía / jerarquía
   Título grande y con peso; descripción legible y más liviana.
--------------------------------------------------------------------------- */
.home .shortcode_getbowtied_slider .slider-content-wrapper h1,
.home .shortcode_getbowtied_slider .slider-content-wrapper h2,
.home .shortcode_getbowtied_slider .slider-content-wrapper h3,
.home .shortcode_getbowtied_slider .slider-content-wrapper .slider-title {
  color: var(--ms-white) !important;
  font-weight: 800 !important;
  /* Título protagonista: escala de nuevo hacia arriba en desktop. */
  font-size: clamp(28px, 2.9vw, 40px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.01em;
  margin: 0 !important;
  /* Colapsa los saltos de línea forzados (\n) del contenido para que el texto
     envuelva natural por ancho (slides 2 y 3 en ~2 líneas en desktop). */
  white-space: normal !important;
  /* El título es flex-item con align-items:center → se encogía al contenido y
     envolvía angosto. width:100% lo hace usar todo el ancho del wrapper (1160),
     así el texto entra en ~2 líneas en desktop. */
  width: 100% !important;
  text-wrap: normal !important; /* llena el ancho (2 líneas), no balancea corto */
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
}
/* El contenido trae <br /> forzados (venían de saltos de línea del título).
   Los ocultamos para que el texto envuelva natural y quepa en ~2 líneas. */
.home .shortcode_getbowtied_slider .slider-content-wrapper br {
  display: none !important;
}

.home .shortcode_getbowtied_slider .slider-content-wrapper p,
.home .shortcode_getbowtied_slider .slider-content-wrapper .slider-description {
  color: var(--ms-ink) !important;
  font-size: clamp(15px, 1.5vw, 19px) !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  margin: 0 !important;
  max-width: 620px;
}

/* ---------------------------------------------------------------------------
   5) CTA (botón del slide)
   Se apunta a las dos clases posibles del tema (.button / .slider-button).
   Estilo: pastilla blanca sólida con texto rojo de marca; alto contraste,
   sombra suave y micro-interacción (elevación) en hover.
--------------------------------------------------------------------------- */
.home .shortcode_getbowtied_slider .slider-content-wrapper .button,
.home .shortcode_getbowtied_slider .slider-content-wrapper .slider-button,
.home .shortcode_getbowtied_slider .slider-content-wrapper a.button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center !important; /* texto + flecha centrados dentro del boton */
  gap: 10px;
  margin-top: 4px;
  /* CTA proporcionado (no dominante frente al título) */
  padding: 13px 28px !important;
  /* No estirarse al ancho del contenedor (sobre todo en mobile): hugear el texto */
  width: auto !important;
  max-width: 100%;
  align-self: center !important;
  flex: 0 0 auto !important;
  box-sizing: border-box;
  background: var(--ms-white) !important;
  color: var(--ms-red-700) !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none !important;
  line-height: 1 !important;
  font-size: 14px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease;
  cursor: pointer;
}

/* Flecha creada por CSS (no requiere tocar el HTML) */
.home .shortcode_getbowtied_slider .slider-content-wrapper .button::after,
.home .shortcode_getbowtied_slider .slider-content-wrapper .slider-button::after,
.home .shortcode_getbowtied_slider .slider-content-wrapper a.button::after {
  content: "→";
  font-size: 17px;
  line-height: 1;
  transform: translateX(0);
  transition: transform 180ms ease;
}

.home .shortcode_getbowtied_slider .slider-content-wrapper .button:hover,
.home .shortcode_getbowtied_slider .slider-content-wrapper .slider-button:hover,
.home .shortcode_getbowtied_slider .slider-content-wrapper a.button:hover {
  background: #fff4f4 !important;
  color: var(--ms-red-900) !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.28);
}

.home .shortcode_getbowtied_slider .slider-content-wrapper .button:hover::after,
.home .shortcode_getbowtied_slider .slider-content-wrapper .slider-button:hover::after,
.home .shortcode_getbowtied_slider .slider-content-wrapper a.button:hover::after {
  transform: translateX(4px);
}

/* Foco accesible visible (teclado) */
.home .shortcode_getbowtied_slider .slider-content-wrapper .button:focus-visible,
.home .shortcode_getbowtied_slider .slider-content-wrapper .slider-button:focus-visible,
.home .shortcode_getbowtied_slider .slider-content-wrapper a.button:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.9);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   6) Navegación: flechas prev/next
   Círculos con borde translúcido que se rellenan al pasar el mouse.
--------------------------------------------------------------------------- */
.home .shortcode_getbowtied_slider .swiper-button-prev,
.home .shortcode_getbowtied_slider .swiper-button-next {
  width: 46px !important;
  height: 46px !important;
  margin-top: -23px !important;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(2px);
  /* Centrar el ícono <i> del tema dentro del círculo */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
  z-index: 3;
}

.home .shortcode_getbowtied_slider .swiper-button-prev:hover,
.home .shortcode_getbowtied_slider .swiper-button-next:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: #fff;
  transform: scale(1.06);
}

/* El tema oculta el glifo por defecto de Swiper (::after): lo dejamos vacío */
.home .shortcode_getbowtied_slider .swiper-button-prev::after,
.home .shortcode_getbowtied_slider .swiper-button-next::after {
  content: "" !important;
  display: none !important;
}

/* Ícono real del tema (icon-font .spk-icon) centrado, blanco; rojo al hover */
.home .shortcode_getbowtied_slider .swiper-button-prev .spk-icon,
.home .shortcode_getbowtied_slider .swiper-button-next .spk-icon {
  position: static !important;
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  color: #fff !important;
  transition: color 180ms ease;
}
.home .shortcode_getbowtied_slider .swiper-button-prev:hover .spk-icon,
.home .shortcode_getbowtied_slider .swiper-button-next:hover .spk-icon {
  color: var(--ms-red-700) !important;
}

/* ---------------------------------------------------------------------------
   7) Bullets de paginación
   El tema los oculta; aquí quedan estilizados y visibles (barritas).
   Si preferís mantenerlos ocultos, borrá este bloque.
--------------------------------------------------------------------------- */
.home .shortcode_getbowtied_slider .swiper-pagination {
  bottom: 22px !important;
}
.home .shortcode_getbowtied_slider .swiper-pagination-bullet {
  width: 26px;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.45);
  opacity: 1;
  transition: background-color 180ms ease, width 180ms ease;
}
.home .shortcode_getbowtied_slider .swiper-pagination-bullet-active {
  background: #ffffff;
  width: 40px;
}

/* ---------------------------------------------------------------------------
   8) Responsive
--------------------------------------------------------------------------- */
/* Tablet y menores: el header va apilado (no flota sobre el hero), así que
   casi no hace falta despeje. Reducimos el padding-top para que el contenido
   quede centrado en el slide. */
@media (max-width: 1024px) {
  .home .shortcode_getbowtied_slider.swiper-container { height: 460px !important; }
  .home .shortcode_getbowtied_slider .swiper-slide .slider-content {
    padding-top: 12px !important;
  }
}

/* Mobile (≈375px) */
@media (max-width: 640px) {
  .home .shortcode_getbowtied_slider.swiper-container { height: 420px !important; }

  .home .shortcode_getbowtied_slider .slider-content-wrapper {
    gap: 16px;
    padding: 0 24px;
  }
  .home .shortcode_getbowtied_slider .slider-content-wrapper h1,
  .home .shortcode_getbowtied_slider .slider-content-wrapper h2,
  .home .shortcode_getbowtied_slider .slider-content-wrapper h3,
  .home .shortcode_getbowtied_slider .slider-content-wrapper .slider-title {
    font-size: clamp(24px, 6.4vw, 32px) !important;
    line-height: 1.18 !important;
  }
  .home .shortcode_getbowtied_slider .slider-content-wrapper .button,
  .home .shortcode_getbowtied_slider .slider-content-wrapper .slider-button,
  .home .shortcode_getbowtied_slider .slider-content-wrapper a.button {
    /* CTA compacto (hug del texto), nunca a todo el ancho */
    padding: 12px 24px !important;
    font-size: 13px !important;
    width: auto !important;
    align-self: center !important;
  }
  /* En mobile OCULTAMOS las flechas: se superponían al texto y lo tapaban.
     La navegación se hace deslizando (swipe) + la rotación automática muestra
     todos los slides. Así el texto queda a ancho completo y legible. */
  .home .shortcode_getbowtied_slider .swiper-button-prev,
  .home .shortcode_getbowtied_slider .swiper-button-next {
    display: none !important;
  }
  .home .shortcode_getbowtied_slider .swiper-slide::after { bottom: -45%; width: 80vw; }
}

/* Respeta preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .home .shortcode_getbowtied_slider .slider-content-wrapper .button,
  .home .shortcode_getbowtied_slider .slider-content-wrapper .slider-button,
  .home .shortcode_getbowtied_slider .swiper-button-prev,
  .home .shortcode_getbowtied_slider .swiper-button-next {
    transition: none !important;
  }
}