/* ===== Reset mínimo ===== */
  * { box-sizing: border-box; }
  .bannersdy, .bannersdy * { margin: 0; padding: 0; }

  /* ===== Variables ===== */
  :root { --BannerAlto: 400px; }

  /* ===== Contenedor / slider ===== */
  .bannersdy { font-family: 'Nunito', sans-serif; }

  .my-slider {
    color: #fff;
    background-color: rgb(18, 46, 67);
    touch-action: pan-y;
    position: relative;
    overflow: hidden;
  }

  /* pista de slides */
  .my-slider__track {
    display: flex;
    height: var(--BannerAlto);
    transition: transform 0.5s ease;
    will-change: transform;
  }

  /* cada slide (banner1..banner4) */
  .my-slider > .my-slider__track > div {
    flex: 0 0 100%;
    width: 100%;
    height: var(--BannerAlto);
    background-size: cover;
    background-position: center center;
  }

  .my-slider > .my-slider__track > div > div {
    position: relative;
    height: var(--BannerAlto);
  }

  /* overlay degradado para legibilidad */
  .my-slider > .my-slider__track > div > div::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(90deg, rgb(0, 0, 0) 0px, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0) 100%);
  }

  /* contenedor de contenido centrado */
  .my-slider > .my-slider__track > div > div > div {
    position: absolute;
    inset: 0;
    display: flex;
    width: calc(100% - 100px);
    max-width: 1280px;
    margin: 0 auto;
    flex-direction: column;
    justify-content: center;
    padding: 50px 20px;
    z-index: 1;
  }

  .my-slider h2, .my-slider p { pointer-events: none; }
  .my-slider p { font-weight: 400; margin-block: 0 0.2em; font-size: 23px; }
  .my-slider h2 { font-weight: 700; margin-block: 0 0.1em; font-size: 40px; line-height: 43px; }

  .banner_contenido { max-width: 720px; display: flex; gap: 30px; }

  .ico_tipo_seguro { max-width: 160px; min-width: 120px !important; height: auto; }

  /* ===== CTAs ===== */
  .ctas { display: flex; gap: 20px; }

  .cta_primario {
    pointer-events: all;
    width: fit-content;
    font-weight: 700;
    color: #fff;
    text-align: center;
    font-size: 18px;
    border-radius: 8px;
    border: 1px solid rgb(236, 74, 4);
    background: rgb(253, 131, 0);
    box-shadow: rgb(255, 162, 78) 0px -2px 0px 0px inset;
    text-decoration: none;
    padding: 16px 30px 16px 26px;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 20px;
    position: relative;
    transition: 0.4s;
  }
  .cta_primario:hover {
    border: 1px solid rgb(236, 74, 4);
    background: rgb(236, 74, 4);
    box-shadow: rgb(255, 162, 78) 0px -2px 0px 0px inset;
  }

  .cta_secundario {
    pointer-events: all;
    width: fit-content;
    font-weight: 700;
    color: rgb(18, 46, 67);
    text-align: center;
    font-size: 18px;
    border-radius: 8px;
    border: 1px solid rgb(179, 202, 224);
    background: linear-gradient(rgb(246, 249, 252) 0px, rgb(227, 237, 247) 100%);
    box-shadow: rgb(255, 255, 255) 0px -2px 0px 0px inset;
    text-decoration: none;
    padding: 16px 45px 16px 26px;
    display: block;
    margin-top: 20px;
    position: relative;
  }

  /* ===== Badge "NUEVO SEGURO" ===== */
  .banner_nuevo::before {
    content: ".";
    position: absolute;
    top: 36px;
    right: -44px;
    background: rgb(255, 123, 0);
    width: 260px;
    text-align: center;
    font-size: 23px;
    font-weight: 400;
    color: transparent;
    z-index: 2;
    border-radius: 100px 0 0 100px;
  }
  .banner_nuevo::after {
    content: "NUEVO SEGURO";
    position: absolute;
    top: 36px;
    right: -44px;
    color: #fff;
    width: 300px;
    text-align: center;
    font-size: 23px;
    font-weight: 900;
    z-index: 3;
  }

  /* ===== Controles (flechas) ===== */
  .tns-controls {
    left: 0; right: 0;
    margin-left: auto; margin-right: auto;
    position: absolute;
    width: 100%;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    max-width: 1400px;
    pointer-events: none;
  }
  .tns-controls button {
    border: none;
    background: rgba(0, 0, 0, 0.227);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    border-radius: 30px;
    padding: 10px 20px;
    cursor: pointer;
    pointer-events: all;
  }

  /* ===== Nav (dots) ===== */
  .tns-nav {
    position: absolute;
    z-index: 9;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
  }
  .tns-nav button {
    border: none;
    background-color: rgba(255, 255, 255, 0.3);
    width: 10px;
    height: 12px;
    border-radius: 10px;
    padding: 0;
    cursor: pointer;
  }
  .tns-nav button.tns-nav-active { background-color: #fff; }

  /* ===== Fondos por slide (desktop) ===== */
  .banner1, .banner2, .banner3, .banner4 { overflow: hidden; }
  .banner1 { background-image: url("https://staticresourcesfiles.blob.core.windows.net/content/seg/static/8589091928008996-banner-auto-desk-1.webp"); }
  .banner2 { background-image: url("https://staticresourcesfiles.blob.core.windows.net/content/seg/static/9594169415803635-banner-ambulatorio-desk-1.webp"); }
  .banner3 { background-image: url("https://staticresourcesfiles.blob.core.windows.net/content/seg/static/1277024944269438-banner-vida-desk-2.webp"); }
  .banner4 { background-image: url("https://staticresourcesfiles.blob.core.windows.net/content/seg/static/7022505569695057-banner-viaje-desk-2.webp"); }

  /* ===== Responsive (mobile <= 768px) ===== */
  @media only screen and (max-width: 768px) {
    :root { --BannerAlto: 450px; }
    .tns-controls button { display: none; }
    .my-slider > .my-slider__track > div > div::before {
      background: linear-gradient(0deg, rgb(0, 0, 0) 0px, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0) 100%);
    }
    .my-slider > .my-slider__track > div > div > div { justify-content: flex-end; width: auto; }
    .my-slider p { font-size: 18px; }
    .my-slider h2 { font-size: 30px; line-height: 33px; }
    .cta_primario { font-size: 16px; width: 100%; padding: 10px 40px 10px 16px; justify-content: center; }
    .cta_secundario { font-size: 16px; width: 100%; padding: 10px 40px 10px 16px; }
    .ctas { flex-direction: column; gap: 0; }
    .banner_contenido { flex-direction: column; }
    .ico_tipo_seguro { max-width: 100px !important; }

    .banner1 { background-image: url("https://staticresourcesfiles.blob.core.windows.net/content/seg/static/11168778430943527-banner-auto-mob-1.webp"); }
    .banner2 { background-image: url("https://staticresourcesfiles.blob.core.windows.net/content/seg/static/47942569825224557-banner-ambulatorio-mob-1.webp"); }
    .banner3 { background-image: url("https://staticresourcesfiles.blob.core.windows.net/content/seg/static/6527012598404178-banner-vida-mob-2.webp"); }
    .banner4 { background-image: url("https://staticresourcesfiles.blob.core.windows.net/content/seg/static/7422043703309595-banner-viaje-mob-2.webp"); }
    .banner1, .banner2, .banner3, .banner4 { background-position-y: top; }
    .hideonmob { display: none; }
    .hide_mobile { opacity: 0; }
  }