@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

  body {
    font-family: "Poppins", sans-serif;
  }

  /* .container-home {
      background-image: url(/static/img/home/banner_home.webp);
      background-size: cover;
      background-repeat: no-repeat;
    } */

  /* Styles.css o dentro de un bloque <style> */

  .borde-verde {
    /* 1. Define el grosor del "borde" (2px) */
    padding: 2px;

    /* 2. Aplica el degradado al fondo del contenedor externo */
    /* Nota: He mantenido el orden de tu último código: Menta (#0EE9B2) a Cian (#33CCFF) */
    background: linear-gradient(to right, #0ee9b2, #33ccff);

    /* ¡Ajustado! El radio de borde deseado de 20px */
    border-radius: 20px;
  }

  .borde-verde>div {
    /* 3. El div interno necesita un color de fondo sólido */
    background-color: #111b43;
    /* Azul oscuro */

    /* 4. ¡Ajustado! El radio interno debe ser 20px - 2px = 18px */
    border-radius: 18px;

    /* 5. Estilos de layout internos, como lo tenías */
    padding: 27px 15px;
  }

  .flatpickr-day {
    border-radius: 10px;
    font-weight: 500;
  }

  .flatpickr-day.selected.startRange,
  .flatpickr-day.startRange.startRange,
  .flatpickr-day.endRange.startRange {
    border-radius: 10px;
  }

  .flatpickr-day.selected.endRange,
  .flatpickr-day.startRange.endRange,
  .flatpickr-day.endRange.endRange {
    border-radius: 10px;
  }

  .flatpickr-day.selected,
  .flatpickr-day.startRange,
  .flatpickr-day.endRange,
  .flatpickr-day.selected.inRange,
  .flatpickr-day.startRange.inRange,
  .flatpickr-day.endRange.inRange,
  .flatpickr-day.selected:focus,
  .flatpickr-day.startRange:focus,
  .flatpickr-day.endRange:focus,
  .flatpickr-day.selected:hover,
  .flatpickr-day.startRange:hover,
  .flatpickr-day.endRange:hover,
  .flatpickr-day.selected.prevMonthDay,
  .flatpickr-day.startRange.prevMonthDay,
  .flatpickr-day.endRange.prevMonthDay,
  .flatpickr-day.selected.nextMonthDay,
  .flatpickr-day.startRange.nextMonthDay,
  .flatpickr-day.endRange.nextMonthDay {
    background: #6633cc;
  }

  .flatpickr-current-month span.cur-month {
    color: #111b43;
    font-weight: 500;
    font-size: 18px;
  }

  .flatpickr-current-month input.cur-year {
    color: #111b43;
    font-weight: 500;
    font-size: 18px;
  }

  /* 🔴 Quitar el fondo continuo del rango */
  .flatpickr-day.inRange {
    box-shadow: none !important;
    background: #e6ecf7 !important;
    /* gris claro */
    color: #111b43;
    border-radius: 12px;
  }

  /* 🔴 Día inicio */
  .flatpickr-day.startRange {
    background: #6633cc !important;
    color: white !important;
    border-radius: 12px;
  }

  /* 🔴 Día fin */
  .flatpickr-day.endRange {
    background: #6633cc !important;
    color: white !important;
    border-radius: 12px;
  }

  /* 🔴 Evita que Flatpickr una visualmente los días */
  .flatpickr-day.startRange+.flatpickr-day.inRange,
  .flatpickr-day.inRange+.flatpickr-day.endRange {
    box-shadow: none !important;
  }

  /* 🔴 Hover limpio */
  .flatpickr-day:hover {
    background: #6633cc;
    border-radius: 12px;
    color: white;
  }

  .flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n + 1)),
  .flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n + 1)),
  .flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n + 1)) {
    box-shadow: none;
  }

  .flatpickr-day.selected,
  .flatpickr-day.startRange,
  .flatpickr-day.endRange,
  .flatpickr-day.selected.inRange,
  .flatpickr-day.startRange.inRange,
  .flatpickr-day.endRange.inRange,
  .flatpickr-day.selected:focus,
  .flatpickr-day.startRange:focus,
  .flatpickr-day.endRange:focus,
  .flatpickr-day.selected:hover,
  .flatpickr-day.startRange:hover,
  .flatpickr-day.endRange:hover,
  .flatpickr-day.selected.prevMonthDay,
  .flatpickr-day.startRange.prevMonthDay,
  .flatpickr-day.endRange.prevMonthDay,
  .flatpickr-day.selected.nextMonthDay,
  .flatpickr-day.startRange.nextMonthDay,
  .flatpickr-day.endRange.nextMonthDay {
    border: none;
  }

  .flatpickr-day.inRange,
  .flatpickr-day.prevMonthDay.inRange,
  .flatpickr-day.nextMonthDay.inRange,
  .flatpickr-day.today.inRange,
  .flatpickr-day.prevMonthDay.today.inRange,
  .flatpickr-day.nextMonthDay.today.inRange,
  .flatpickr-day:hover,
  .flatpickr-day.prevMonthDay:hover,
  .flatpickr-day.nextMonthDay:hover,
  .flatpickr-day:focus,
  .flatpickr-day.prevMonthDay:focus,
  .flatpickr-day.nextMonthDay:focus {
    border: none;
  }

  .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n + 1) .flatpickr-day.inRange:nth-child(7n + 7) {
    margin: 2px 2px;
  }

  .rangeMode .flatpickr-day {
    margin: 2px 2px;
  }

  .flatpickr-months .flatpickr-month {
    background: #e6ecf7;
  }

  .flatpickr-months .flatpickr-month {
    padding: 21px 0;

    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  .flatpickr-current-month {
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;

    bottom: 0;
  }

  .flatpickr-months .flatpickr-prev-month,
  .flatpickr-months .flatpickr-next-month {
    margin-top: 3px;
    margin-left: 6px;
    margin-right: 6px;
  }

  .flatpickr-calendar {
    box-shadow: none;
    border-radius: 10px;
  }

  span.flatpickr-weekday {
    font-size: 12px;
    font-weight: 700;
    color: #8c96a9;
  }

  .flatpickr-weekdays .flatpickr-weekdaycontainer {
    background: #e6ecf7;
  }

  .flatpickr-weekdays .flatpickr-weekdaycontainer {
    background: #e6ecf7;
    padding-bottom: 13px;
    padding: 12px 8px;
  }

  .flatpickr-weekdays {
    height: unset;
  }

  .dayContainer {
    padding: 10px 3px;
  }

  .flatpickr-day.flatpickr-disabled,
  .flatpickr-day.flatpickr-disabled:hover {
    color: #8c96a9;
  }

  .flatpickr-day.today:hover,
  .flatpickr-day.today:focus {
    background: #6633cc;
  }

  .flatpickr-day.today {
    border-color: #6633cc;
  }

  .flatpickr-months {
    background: #e6ecf7;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  @media (min-width: 368px) and (max-width: 442px) {
    .title-banner {
      font-size: 23px;
    }
  }

  @media (min-width: 440px) and (max-width: 639px) {
    .banner-home {
      padding: 50px 20px;
    }

    .title-banner {
      font-size: 35px;
    }

    .text-banner,
    .text-banner {
      font-size: 18px;
    }

    .banner-texts {
      gap: 50px;
    }
  }

  @media (min-width: 569px) and (max-width: 767px) {

    .contenedor-cotizador-form {
      margin: 1rem;
      box-shadow: 0px 4px 15px 0px rgba(46, 17, 131, 0.25);
    }
  }

  @media (min-width: 640px) and (max-width: 767px) {
    .section-header-bg {
      padding-top: 20rem !important;
    }
  }

  /* Tooltip básico */
  .validation-tooltip {
    position: absolute;
    background: #ff4d4f;
    /* rojo alerta */
    color: white;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 9999;
    transform: translateY(6px);
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .validation-tooltip.visible {
    opacity: 1;
    pointer-events: auto;
  }

  /* Ocultar scrollbar del carrusel de seguros */
  #insurance-carousel {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  #insurance-carousel::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Desactivar scroll-snap durante el salto infinito para evitar saltos visibles */
  #insurance-carousel.insurance-carousel-no-snap {
    scroll-snap-type: none !important;
  }

  #insurance-carousel.insurance-carousel-no-snap .flex-shrink-0 {
    scroll-snap-align: none !important;
  }