/* ===== ESTILOS ESPECÍFICOS DE LA PÁGINA INDEX ===== */

/* ===== ALTURAS Y ESTRUCTURA DEL HEADER ===== */
html,
body,
header,
.jarallax {
  height: 11vh;
}

@media (max-width: 740px) {
  html,
  body,
  header,
  .jarallax {
    height: 11vh;
  }
}

@media (min-width: 800px) and (max-width: 850px) {
  html,
  body,
  header,
  .jarallax {
    height: 11vh;
  }
}

/* ===== NAVBAR ESPECÍFICA DEL INDEX ===== */
.top-nav-collapse {
  background-color: #FFFFFF !important;
}

.navbar:not(.top-nav-collapse) {
  background: transparent !important;
}

@media (max-width: 768px) {
  .navbar:not(.top-nav-collapse) {
    background: #ffffff !important;
  }
}

@media (min-width: 800px) and (max-width: 850px) {
  .navbar:not(.top-nav-collapse) {
    background: #ffffff !important;
  }
}

/* ===== GRADIENTES Y EFECTOS ESPECIALES ===== */
.rgba-gradient {
  background: -moz-linear-gradient(45deg, rgba(42, 27, 161, 0.6), rgba(50, 189, 229, 0.6) 100%);
  background: -webkit-linear-gradient(45deg, rgba(42, 27, 161, 0.6), rgba(50, 189, 229, 0.6) 100%);
  background: -o-linear-gradient(45deg, rgba(42, 27, 161, 0.6), rgba(50, 189, 229, 0.6) 100%);
  background: -ms-linear-gradient(left, rgba(42, 27, 161, 0.6), rgba(50, 189, 229, 0.6) 100%);
}

/* ===== AJUSTES DE MÁRGENES DEL HEADER EN BREAKPOINTS ESPECÍFICOS ===== */
@media (min-width: 560px) and (max-width: 650px) {
  header .jarallax h1 {
    margin-bottom: .5rem !important;
  }

  header .jarallax h5 {
    margin-bottom: .5rem !important;
  }
}

@media (min-width: 660px) and (max-width: 700px) {
  header .jarallax h1 {
    margin-bottom: 1.5rem !important;
  }

  header .jarallax h5 {
    margin-bottom: 1.5rem !important;
  }
}

@media (max-width: 450px) {
  .margins {
    margin-right: 1rem;
    margin-left: 1rem;
  }
}

/* ===== OPTIMIZACIÓN FEATURES SECTION - MÓVIL GRANDE (≤767px) ===== */
@media (max-width: 767px) {
  main > section:first-of-type {
    padding: 1rem 0 !important;
  }

  main > section:first-of-type .text-center.my-5 {
    margin: 0.5rem 0 !important;
    padding: 0.5rem 0 !important;
  }

  main > section:first-of-type img {
    max-height: 5rem !important;
    margin-bottom: 0.3rem !important;
  }

  main > section:first-of-type h1 {
    font-size: 1.4rem !important;
    margin: 0.3rem 0 !important;
    line-height: 1.2 !important;
  }

  main > section:first-of-type p.lead {
    font-size: 0.85rem !important;
    margin-bottom: 0.8rem !important;
    line-height: 1.3 !important;
  }

  main > section:first-of-type .col-md-6 {
    margin-bottom: 1rem !important;
  }

  main > section:first-of-type .fa-3x {
    font-size: 1.8rem !important;
  }

  main > section:first-of-type h4 {
    font-size: 1rem !important;
    margin-bottom: 0.3rem !important;
  }

  main > section:first-of-type p.grey-text {
    font-size: 0.80rem !important;
    margin-bottom: 0.5rem !important;
  }

  main > section:first-of-type .btn {
    padding: 0.35rem 0.7rem !important;
    font-size: 0.75rem !important;
  }
}

/* ===== OPTIMIZACIÓN CAROUSEL - MÓVIL GRANDE (≤767px) ===== */
@media (max-width: 767px) {
  .carousel {
    height: auto !important;
    margin-bottom: 20px;
  }

  .carousel-item {
    height: auto !important;
  }

  .carousel-item .view {
    aspect-ratio: 16 / 9 !important;
    max-height: 200px !important;
    display: flex !important;
    align-items: center !important;
  }

  .carousel-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .carousel-caption {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    padding: 10px 12px !important;
    background: transparent !important;
    margin: 0 !important;
    bottom: auto !important;
  }

  .carousel-caption h2 {
    font-size: 13px !important;
    margin: 0 0 3px 0 !important;
    font-weight: bold !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important;
  }

  .carousel-caption h6 {
    font-size: 10px !important;
    margin: 3px 0 0 0 !important;
    line-height: 1.1 !important;
    display: none !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
  }

  .carousel-caption hr {
    margin: 3px 0 !important;
    padding: 0 !important;
    height: 2px !important;
    width: 40px !important;
    background-color: #fff !important;
    border: none !important;
    opacity: 0.9 !important;
  }

  .carousel-caption br {
    display: none !important;
  }

  .carousel-indicators {
    bottom: 5px !important;
  }

  .carousel-indicators li {
    width: 8px !important;
    height: 8px !important;
  }
}

/* ===== OPTIMIZACIÓN FEATURES SECTION - MÓVIL MEDIANO (≤480px) ===== */
@media (max-width: 480px) {
  /* Features section mobile optimization */
  main > section:first-of-type img {
    max-height: 4rem !important;
    margin-bottom: 0.2rem !important;
  }

  main > section:first-of-type h1 {
    font-size: 1.2rem !important;
    margin: 0.2rem 0 !important;
  }

  main > section:first-of-type p.lead {
    font-size: 0.8rem !important;
    margin-bottom: 0.5rem !important;
  }

  main > section:first-of-type .fa-3x {
    font-size: 1.5rem !important;
  }

  main > section:first-of-type h4 {
    font-size: 0.95rem !important;
    margin-bottom: 0.2rem !important;
  }

  main > section:first-of-type p.grey-text {
    font-size: 0.75rem !important;
    margin-bottom: 0.3rem !important;
  }

  .carousel {
    margin-bottom: 15px;
  }

  .carousel-item .view {
    aspect-ratio: 16 / 9 !important;
    max-height: 150px !important;
  }

  .carousel-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .carousel-caption {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    padding: 8px 10px !important;
    bottom: auto !important;
    background: transparent !important;
  }

  .carousel-caption h2 {
    font-size: 12px !important;
    margin-bottom: 2px !important;
    font-weight: bold !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
  }

  .carousel-caption h6 {
    font-size: 9px !important;
    display: none !important;
  }

  .carousel-caption hr {
    margin: 2px 0 !important;
    width: 30px !important;
    height: 2px !important;
    background-color: #fff !important;
    opacity: 0.9 !important;
  }

  .carousel-caption br {
    display: none !important;
  }

  .carousel-control-prev,
  .carousel-control-next {
    opacity: 0.5;
  }
}

/* ===== OPTIMIZACIÓN FEATURES SECTION - MÓVIL PEQUEÑO (≤359px) ===== */
@media (max-width: 359px) {
  /* Features section extra small mobile */
  main > section:first-of-type img {
    max-height: 3.5rem !important;
    margin-bottom: 0.1rem !important;
  }

  main > section:first-of-type h1 {
    font-size: 1.1rem !important;
    margin: 0.1rem 0 !important;
  }

  main > section:first-of-type p.lead {
    font-size: 0.75rem !important;
    margin-bottom: 0.4rem !important;
  }

  main > section:first-of-type .fa-3x {
    font-size: 1.3rem !important;
  }

  main > section:first-of-type h4 {
    font-size: 0.9rem !important;
    margin-bottom: 0.2rem !important;
  }

  main > section:first-of-type p.grey-text {
    font-size: 0.7rem !important;
    margin-bottom: 0.2rem !important;
  }

  main > section:first-of-type .btn {
    padding: 0.3rem 0.6rem !important;
    font-size: 0.7rem !important;
  }

  .carousel {
    margin-bottom: 10px;
  }

  .carousel-item .view {
    aspect-ratio: 16 / 9 !important;
    max-height: 120px !important;
  }

  .carousel-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .carousel-caption {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    padding: 6px 8px !important;
    bottom: auto !important;
    background: transparent !important;
  }

  .carousel-caption h2 {
    font-size: 11px !important;
    margin-bottom: 1px !important;
    font-weight: bold !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
  }

  .carousel-caption h6 {
    font-size: 8px !important;
    display: none !important;
  }

  .carousel-caption hr {
    margin: 1px 0 !important;
    width: 25px !important;
    height: 2px !important;
    background-color: #fff !important;
    opacity: 0.9 !important;
  }

  .carousel-caption br {
    display: none !important;
  }

  .carousel-indicators {
    bottom: 3px !important;
  }

  .carousel-indicators li {
    width: 6px !important;
    height: 6px !important;
  }

  .carousel-control-prev,
  .carousel-control-next {
    opacity: 0.4;
    width: 8% !important;
  }
}