/* ==========================================================
   ISADE - Corrección definitiva hero slider mobile 50/50
   22/07
   Objetivo en móviles:
   - El slider entra completo en el alto visible disponible del navegador.
   - 50% superior: textos + botones, fondo blanco.
   - 50% inferior: imagen al corte, ancho completo.
   - Botones siempre en línea, nunca sobre la imagen.
   - Se ocultan los antiguos botones duplicados sobre imagen.
   ========================================================== */

@media (max-width: 767.98px) {
  .isade-hero-slider-section {
    height: var(--isade-mobile-hero-height, calc(100svh - 150px)) !important;
    min-height: var(--isade-mobile-hero-height, calc(100svh - 150px)) !important;
    max-height: var(--isade-mobile-hero-height, calc(100svh - 150px)) !important;
    overflow: hidden !important;
    background: #fff !important;
    position: relative !important;
  }

  .isade-hero-slider,
  .isade-hero-slide,
  .isade-hero-slide.is-active,
  .isade-hero {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .isade-hero-slide {
    display: none !important;
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  .isade-hero-slide.is-active {
    display: block !important;
  }

  .isade-hero {
    display: block !important;
    background: #fff !important;
    padding: 0 !important;
  }

  .isade-hero::before,
  .isade-hero::after {
    display: none !important;
  }

  .isade-hero > .container {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .isade-hero-row {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }

  .isade-hero-copy {
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 35% !important;
    height: 35% !important;
    min-height: 0 !important;
    padding: 16px 18px 12px !important;
    margin: 0 !important;
    background: #fff !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    z-index: 3 !important;
  }

  .isade-hero-slider .isade-eyebrow {
    margin: 0 0 8px !important;
    font-size: clamp(10px, 3vw, 13px) !important;
    line-height: 1.15 !important;
    letter-spacing: -.02em !important;
  }

  .isade-hero h1 {
    max-width: 100% !important;
    margin: 0 auto !important;
    font-size: clamp(29px, 8.8vw, 40px) !important;
    line-height: .94 !important;
    letter-spacing: -.065em !important;
  }

  .isade-hero h1 span {
    display: block !important;
  }

  .isade-title-line {
    width: 78px !important;
    height: 4px !important;
    margin: 10px auto 11px !important;
  }

  .isade-hero-text {
    max-width: 345px !important;
    margin: 0 auto 12px !important;
    font-size: clamp(12.5px, 3.45vw, 15px) !important;
    line-height: 1.35 !important;
  }

  .isade-copy-actions {
    width: 100% !important;
    max-width: 430px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .isade-copy-actions .isade-btn {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    font-size: clamp(7.7px, 2.25vw, 9.7px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.025em !important;
    white-space: nowrap !important;
    text-align: center !important;
    box-shadow: 0 7px 16px rgba(248, 196, 0, .20) !important;
  }

  .isade-copy-actions .isade-btn-outline {
    background: #fff !important;
    border: 2px solid #d9d9d9 !important;
    box-shadow: none !important;
  }

  .isade-copy-actions .isade-btn img {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 auto !important;
  }

  .isade-copy-actions .isade-btn span[aria-hidden="true"] {
    flex: 0 0 auto !important;
  }

  /* Esta regla evita definitivamente que aparezcan botones sobre la imagen. */
  .isade-mobile-actions {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .isade-hero-media {
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 65% !important;
    height: 65% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    overflow: hidden !important;
    z-index: 1 !important;
  }

  .isade-hero-image {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: block !important;
    overflow: hidden !important;
  }

  .isade-hero-image::after {
    display: none !important;
  }

  .isade-hero-image picture,
  .isade-hero-image picture > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  .isade-hero-image picture > img {
    object-fit: cover !important;
    object-position: center center !important;
  }

  .isade-hero-slider-arrows {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 10 !important;
  }

  .isade-hero-arrow {
    top: var(--isade-mobile-arrow-top, 75%) !important;
    width: 42px !important;
    height: 42px !important;
    transform: translateY(-50%) !important;
    pointer-events: auto !important;
  }

  .isade-hero-arrow:hover {
    transform: translateY(-50%) scale(1.06) !important;
  }

  .isade-hero-arrow-prev {
    left: 10px !important;
  }

  .isade-hero-arrow-next {
    right: 10px !important;
  }

  .isade-hero-slider-dots {
    bottom: 10px !important;
    z-index: 11 !important;
  }
}

@supports not (height: 100svh) {
  @media (max-width: 767.98px) {
    .isade-hero-slider-section {
      height: var(--isade-mobile-hero-height, calc(100vh - 150px)) !important;
      min-height: var(--isade-mobile-hero-height, calc(100vh - 150px)) !important;
      max-height: var(--isade-mobile-hero-height, calc(100vh - 150px)) !important;
    }
  }
}

@media (max-width: 380px) and (max-height: 720px) {
  .isade-hero-copy {
    padding: 12px 14px 10px !important;
  }

  .isade-hero-slider .isade-eyebrow {
    margin-bottom: 7px !important;
    font-size: 10px !important;
  }

  .isade-hero h1 {
    font-size: clamp(26px, 8vw, 33px) !important;
  }

  .isade-title-line {
    width: 62px !important;
    margin: 8px auto 9px !important;
  }

  .isade-hero-text {
    font-size: 12px !important;
    line-height: 1.28 !important;
    margin-bottom: 9px !important;
  }

  .isade-copy-actions {
    gap: 6px !important;
  }

  .isade-copy-actions .isade-btn {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 5px !important;
    font-size: 7.25px !important;
  }

  .isade-copy-actions .isade-btn img {
    width: 12px !important;
    height: 12px !important;
  }
}