/* =========================================================
   SegmentaAds — Hero Slider (estilo Apple Services)
   ========================================================= */

.sgslider {
  /* Control inferior estilo Apple Vision Pro: píldora de cristal oscuro,
     dots y triángulo en blanco. Funciona sobre fondo claro u oscuro.
     (todo editable desde Elementor > Estilo > Colores) */
  --sgslider-accent: rgba(255,255,255,0.95);   /* relleno de progreso del dot activo */
  --sgslider-dot: rgba(255,255,255,0.45);       /* dots inactivos */
  --sgslider-dot-track: rgba(255,255,255,0.28); /* base del dot activo sin rellenar */
  --sgslider-pill: rgba(28,28,32,0.45);         /* cristal oscuro de la píldora y el play */
  --sgslider-nav: #FFFFFF;                       /* triángulo / barras pausa-play */
  --sgslider-arrow: #FFFFFF;                     /* flechas */

  position: relative;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.sgslider *,
.sgslider *::before,
.sgslider *::after { box-sizing: border-box; }

/* ---------- Ancho completo (full-bleed 100vw) ---------- */
/* Rompe el contenedor encajonado de Elementor y llega de borde a borde,
   independientemente del ancho de contenido o del padding del contenedor. */
.sgslider.sgslider-fullbleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* En modo ancho completo no hace falta separar la barra de los bordes:
   la barra de dots+play va centrada por sí misma. */

/* ---------- Viewport y pista ---------- */
.sgslider-viewport {
  overflow: hidden;
  width: 100%;
}

.sgslider-track {
  display: flex;
  align-items: stretch;
  gap: 22px;
  will-change: transform;
  transform: translate3d(0,0,0);
}
.sgslider-track.sgslider-animating {
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
}
.sgslider-track.sgslider-dragging { cursor: grabbing; }

/* Cursor de "agarre" para indicar que se puede arrastrar con el ratón */
.sgslider.sgslider-grab .sgslider-viewport { cursor: grab; }
.sgslider.sgslider-grab .sgslider-track.sgslider-dragging { cursor: grabbing; }
.sgslider.sgslider-grab .sgslider-card__btn,
.sgslider.sgslider-grab .sgslider-arrow,
.sgslider.sgslider-grab .sgslider-playpause { cursor: pointer; }

/* ---------- Slide / tarjeta ---------- */
.sgslider-slide {
  flex: 0 0 auto;
  width: 42vw;            /* lo controla Elementor de forma responsiva */
  user-select: none;
}

.sgslider-card {
  position: relative;
  height: 320px;          /* lo controla Elementor de forma responsiva */
  width: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(135deg, #1156B8 0%, #0A1B3D 100%);
  box-shadow: 0 18px 40px -18px rgba(10,27,61,.45);
  transform: scale(.965);
  opacity: .82;
  transition: transform .55s cubic-bezier(.22,.61,.36,1), opacity .55s ease;
}

/* La tarjeta activa se ve nítida y un punto más grande (foco Apple) */
.sgslider-slide.sgslider-active .sgslider-card {
  transform: scale(1);
  opacity: 1;
}

.sgslider-card__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.02);
}

/* Oscurecido inferior + superior para legibilidad de texto */
.sgslider-card__scrim {
  --sgslider-scrim: 45%;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(0,0,0,calc(var(--sgslider-scrim) / 100)) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(to bottom, rgba(0,0,0,.20) 0%, rgba(0,0,0,0) 30%);
}

/* ---------- Badge (categoría) ---------- */
.sgslider-card__badge {
  position: absolute;
  top: 28px;
  left: 28px;
  right: 28px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* ESCRITORIO: arriba a la derecha (como Apple) */
  gap: 8px;
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -.01em;
  text-shadow: 0 1px 6px rgba(0,0,0,.25);
}
.sgslider-card__badge-logo { height: 20px; width: auto; display: block; }

/* ---------- Footer (título + botón) ---------- */
.sgslider-card__footer {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  padding: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;  /* ESCRITORIO: título izq. / botón der. */
  gap: 18px;
}

.sgslider-card__title {
  margin: 0;
  color: #fff;
  font-weight: 700;
  font-size: clamp(20px, 1.9vw, 30px);
  line-height: 1.12;
  letter-spacing: -.02em;
  text-shadow: 0 2px 14px rgba(0,0,0,.30);
  max-width: 70%;
}

.sgslider-card__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #0A1B3D;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  padding: 13px 22px;
  border-radius: 999px;
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.35);
}
.sgslider-card__btn:hover { transform: translateY(-1px); filter: brightness(.97); }
.sgslider-card__btn:active { transform: translateY(0); }

/* ---------- Barra de control (píldora con dots + play) ---------- */
.sgslider-controls {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 26px;
  min-height: 40px;
}

/* Grupo centrado: la píldora de dots y el botón play juntos */
.sgslider-navbar {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* Píldora de cristal oscuro que envuelve los dots (estilo Vision Pro) */
.sgslider-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  background: var(--sgslider-pill);
  padding: 16px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.45);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
}

.sgslider-dot {
  position: relative;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--sgslider-dot);
  cursor: pointer;
  overflow: hidden;
  transition: width .45s cubic-bezier(.22,.61,.36,1), background-color .3s ease;
  flex: 0 0 auto;
}

/* Dot activo: cápsula alargada; su base es la "pista" y encima va el relleno */
.sgslider-dot.sgslider-active {
  width: 46px;
  background: var(--sgslider-dot-track);
}

/* Relleno de progreso dentro de la cápsula activa (barra que avanza) */
.sgslider-dot__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--sgslider-accent);
  border-radius: 999px;
  pointer-events: none;
}

/* === BLINDAJE GENERAL frente a estilos de <button> del tema ===
   Evita que el tema rompa tamaños, bordes o ponga colores (rojo) en los botones. */
.sgslider button {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  margin: 0;
  min-width: 0;
  min-height: 0;
  line-height: normal;
  text-transform: none;
  letter-spacing: normal;
}
/* Dots blindados: mismo tamaño y color pase lo que pase */
.sgslider .sgslider-dot,
.sgslider .sgslider-dot:hover,
.sgslider .sgslider-dot:focus,
.sgslider .sgslider-dot:active {
  background: var(--sgslider-dot) !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: 8px !important;
}
.sgslider .sgslider-dot.sgslider-active,
.sgslider .sgslider-dot.sgslider-active:hover,
.sgslider .sgslider-dot.sgslider-active:focus {
  background: var(--sgslider-dot-track) !important;
}

/* Botón pausa/play — círculo de cristal oscuro con ANILLO de progreso alrededor */
.sgslider-playpause {
  position: relative;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--sgslider-pill);
  color: var(--sgslider-nav);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.45);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  transition: transform .25s cubic-bezier(.22,.61,.36,1), background-color .25s ease;
}
.sgslider-playpause:hover { transform: scale(1.06); }
.sgslider-playpause:active { transform: scale(.95); }
.sgslider-playpause:focus-visible { outline: 2px solid var(--sgslider-nav); outline-offset: 3px; }

/* Blindaje frente a estilos de botón del tema (que ponían el hover en rojo).
   Mantiene SIEMPRE los colores del widget. */
.sgslider .sgslider-playpause,
.sgslider .sgslider-playpause:hover,
.sgslider .sgslider-playpause:focus,
.sgslider .sgslider-playpause:active {
  background: var(--sgslider-pill) !important;
  color: var(--sgslider-nav) !important;
  border: 0 !important;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.45) !important;
}

/* Hover = solo se oscurece un poco (mismo color, sin tinte nuevo) */
.sgslider-playpause::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: transparent;
  transition: background-color .2s ease;
  pointer-events: none;
  z-index: 1;
}
.sgslider-playpause:hover::before { background: rgba(0,0,0,0.20); }
.sgslider-playpause:active::before { background: rgba(0,0,0,0.30); }
.sgslider-pp-ring,
.sgslider-pp-icon { z-index: 2; }

/* Anillo SVG: pista fija + progreso que gira con el autoplay */
.sgslider-pp-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);   /* empieza arriba */
  overflow: visible;
}
.sgslider-pp-ring circle { fill: none; stroke-width: 2.5; }
.sgslider-pp-track { stroke: rgba(255,255,255,0.22); }
.sgslider-pp-prog  { stroke: var(--sgslider-accent); stroke-linecap: round; }

/* Icono central */
.sgslider-pp-icon { position: relative; display: inline-flex; line-height: 0; }
.sgslider-pp-icon svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.sgslider-ic-play { margin-left: 2px; } /* centrado óptico del triángulo */
.sgslider-playpause .sgslider-ic-play { display: none; }
.sgslider.sgslider-paused .sgslider-playpause .sgslider-ic-pause { display: none; }
.sgslider.sgslider-paused .sgslider-playpause .sgslider-ic-play  { display: block; }

/* ---------- Flechas laterales (sutiles, no invasivas) ---------- */
.sgslider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  /* Disco muy tenue, solo para dar legibilidad sobre la imagen */
  background: rgba(0,0,0,0.22);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: var(--sgslider-arrow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;                 /* oculto hasta pasar el ratón por el carrusel */
  transition: opacity .3s ease, transform .25s cubic-bezier(.22,.61,.36,1),
              background-color .25s ease;
}
.sgslider-arrow svg { width: 22px; height: 22px; display: block; opacity: .85; }
.sgslider-prev { left: clamp(12px, 2.5vw, 36px); }
.sgslider-next { right: clamp(12px, 2.5vw, 36px); }

/* Al pasar el ratón por el carrusel: aparecen pero semitransparentes */
.sgslider:hover .sgslider-arrow { opacity: .55; }

/* Al pasar el ratón por la propia flecha: se vuelve más blanca y nítida */
.sgslider-arrow:hover {
  opacity: 1;
  background: rgba(0,0,0,0.38);
}
.sgslider-arrow:hover svg { opacity: 1; }

/* Blindaje frente a estilos de botón del tema (mismo disco oscuro, sin rojo) */
.sgslider .sgslider-arrow,
.sgslider .sgslider-arrow:focus {
  background: rgba(0,0,0,0.22) !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--sgslider-arrow) !important;
}
.sgslider .sgslider-arrow:hover {
  background: rgba(0,0,0,0.40) !important;
}
.sgslider-prev:hover { transform: translateY(-50%) scale(1.06) translateX(-1px); }
.sgslider-next:hover { transform: translateY(-50%) scale(1.06) translateX(1px); }
.sgslider-arrow:active { transform: translateY(-50%) scale(.95); }
.sgslider-arrow:focus-visible { opacity: 1; outline: 2px solid var(--sgslider-accent); outline-offset: 3px; }

/* En dispositivos TÁCTILES (sin hover) las flechas se muestran siempre,
   de forma sutil, ya que no existe el "pasar el ratón por encima".
   Solo se ocultan si el usuario desactiva el toggle de móvil. */
@media (hover: none), (pointer: coarse) {
  .sgslider-arrow { opacity: .6; }
  .sgslider:not(.sgslider-arrows-mobile) .sgslider-arrow { display: none; }
}

/* =========================================================
   MÓVIL / TABLET — layout vertical centrado (Imagen 2)
   ========================================================= */
@media (max-width: 1024px) {
  .sgslider-slide { width: 64vw; }
  .sgslider-card { height: 400px; }

  /* Badge arriba al centro */
  .sgslider-card__badge {
    justify-content: center;
    font-size: 18px;
  }

  /* Título y botón centrados y apilados */
  .sgslider-card__footer {
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    gap: 16px;
  }
  .sgslider-card__title {
    max-width: 100%;
    font-size: clamp(20px, 4.2vw, 28px);
  }
  .sgslider-card__btn { width: auto; }
}

@media (max-width: 600px) {
  .sgslider-slide { width: 80vw; }
  .sgslider-card { height: 460px; }
  .sgslider-track { gap: 14px; }
  .sgslider-card__footer { padding: 24px; }
  .sgslider-card__badge { top: 24px; }
  .sgslider-card__title { font-size: clamp(21px, 6vw, 26px); }
  .sgslider-playpause { width: 42px; height: 42px; }
  .sgslider-pp-icon svg { width: 14px; height: 14px; }
  .sgslider-arrow { width: 40px; height: 40px; }
  .sgslider-arrow svg { width: 18px; height: 18px; }
}

/* =========================================================
   Accesibilidad — respeta "reducir movimiento"
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .sgslider-track.sgslider-animating { transition-duration: .01ms; }
  .sgslider-card { transition-duration: .01ms; }
}

/* (Sin dependencia de color-mix en la barra de control) */