/* Portada. Adaptación a tableta y móvil: todo está dentro de @media (max-width), así que a partir de 992 px (1101 px en la cabecera) la web no cambia. */
/* ==========================================================================
   PORTADA (index.html y en/index.html): vídeo, bloques azules, servicios, clientes, casos de éxito y equipo.
   Todo vive dentro de @media (max-width): nada llega a 992 px o más.
   Los selectores cuelgan de elementos que solo existen en la portada (.video-section, .projects, .equipo,
   .team-container) porque comparte clases con otras páginas (service-item, #myCarousel, .profile-card-4...).
   Se aplica después de mobile_shell.css (cabecera, contacto, pie).
   ========================================================================== */

/* ---------- Tableta y móvil (hasta 991.98px) ---------- */
@media (max-width: 991.98px) {

  /* --- Portada: el vídeo arranca bajo la cabecera de 100 px y los dos bloques azules van debajo, ya no encima (subían 250 px y tapaban el vídeo) --- */
  .video-section {
    margin-top: 100px;
  }
  /* El vídeo es 16:9: se reserva su caja antes de cargar y desaparece el hueco de 7 px que dejaba el elemento en línea */
  .video-section video {
    display: block;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .video-section + .main-banner {
    margin-top: 0;
    padding: 0;
  }
  .video-section + .main-banner .caption,
  .video-section + .main-banner .caption2 {
    margin-top: 0 !important;
    padding: 36px 24px 40px !important;
    text-align: left;
  }
  /* Título y descripción con el tamaño de escritorio (el título medía 12 px y la descripción estaba oculta en móvil) */
  .video-section + .main-banner .caption h1,
  .video-section + .main-banner .caption2 h6 {
    margin: 0;
    font-size: 20px;
    line-height: 24px;
    overflow-wrap: break-word;
  }
  .video-section + .main-banner .caption h8,
  .video-section + .main-banner .caption2 h8 {
    display: block;
    margin: -6px 0 0;
    font-size: 16px;
    line-height: 1.5;
  }
  /* El <span> vacío del final dejaba 24 px de aire (arriba del botón en un bloque, abajo en el otro) */
  .video-section + .main-banner .caption > span,
  .video-section + .main-banner .caption2 > span {
    display: block;
    height: 0;
    margin: 0;
  }
  /* Botones de la portada: 48 px de alto y 14 px de texto (medían 29 px y 10 px) */
  .video-section + .main-banner .main-button,
  .video-section + .main-banner .main-button2 {
    display: block;
    width: auto;
    height: auto;
    margin: 24px 0 0;
    overflow: visible;
    font-size: 14px;
  }
  .video-section + .main-banner .main-button a,
  .video-section + .main-banner .main-button2 a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    min-width: 180px;
    min-height: 48px;
    padding: 0 32px !important;
    font-size: 14px;
    line-height: 1.2;
  }

  /* --- Servicios --- */
  .video-section + .main-banner + .services .service-item {
    display: flex;
    flex-direction: column;
    padding: 24px;
    margin-bottom: 20px;
  }
  /* Toda la tarjeta es el enlace; "Saber más" queda abajo aunque el texto tenga distinto número de líneas (el <br> que lo separa del texto sigue dejando su hueco mínimo) */
  .video-section + .main-banner + .services .service-item > a {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
  }
  .video-section + .main-banner + .services .service-item > a > p:last-child {
    margin-top: auto;
  }
  /* Los iconos (100x100) se cargan en diferido y sin tamaño en el HTML: se reserva su altura para que la página no crezca ~390 px mientras se recorre
     (sin esto, "Contáctanos" del banner dejaba la pantalla casi 400 px antes del formulario) */
  .video-section + .main-banner + .services .service-item img {
    aspect-ratio: auto 1 / 1;
  }
  /* Bloque azul final: misma anchura que las tarjetas (tenía padding:0 y se salía 12 px a cada lado) */
  .video-section + .main-banner + .services .responsive-item1 {
    padding: 0 12px !important;
  }
  .video-section + .main-banner + .services .service-item1 .main-button1 a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 32px;
  }

  /* --- Clientes: la sección subía 100 px y tapaba el bloque azul anterior (título "Nuestros clientes" incluido) --- */
  .projects {
    margin-top: 0;
  }

  /* --- Casos de éxito (carrusel de la portada) --- */
  /* La primera fila .nopadding anulaba su margen negativo (.nopadding lleva margin:0 !important): título y texto quedaban 12 px más metidos que en el resto de secciones */
  .projects + .services > .container > .row.no-gutters.nopadding {
    margin-left: -12px !important;
    margin-right: -12px !important;
  }
  /* Las tarjetas empiezan donde las de servicios (el .container-xl conserva su relleno de 12 px) */
  .projects + .services .container-xl .col-md-12 {
    padding-left: 0;
    padding-right: 0;
  }
  .projects + .services .carousel {
    display: flex;
    flex-direction: column;
    margin: 24px 0 8px;
    padding: 0;
  }
  /* Puntos del carrusel: zona táctil de 44 px (el punto visible sigue midiendo 12 px) */
  .projects + .services .carousel-indicators {
    position: static;
    order: 2;
    margin: 8px 0 0;
    padding: 0;
  }
  .projects + .services .carousel-indicators li[data-bs-target] {
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 16px;
    background-clip: content-box;
  }
  /* Filas de Bootstrap del carrusel (también las anidadas dentro de cada tarjeta): sin margen negativo ni relleno, el contenido queda en el mismo sitio */
  .projects + .services .carousel-item .row {
    margin: 0;
  }
  .projects + .services .carousel-item .row > * {
    padding-left: 0;
    padding-right: 0;
  }
  .projects + .services .carousel-item h4.text-center {
    padding: 0;
    margin: 0 0 8px;
  }
  .projects + .services .profile-card-4 {
    margin: 0 auto 24px;
  }
  /* Fotos de los casos (1000x558) en diferido: se reserva su altura (la 2.ª diapositiva las carga al mostrarse) */
  .projects + .services .profile-card-4 img {
    aspect-ratio: auto 1000 / 558;
  }
  .projects + .services .profile-card-4 .profile-name {
    padding: 10px 20px 0;
    overflow-wrap: break-word;
  }
  .projects + .services .profile-card-4 .profile-description {
    padding: 8px 20px 12px;
    overflow-wrap: break-word;
  }

  /* --- Equipo: nombre y cargo siempre visibles (en pantalla táctil no hay hover) y las fotos a caballo entre la banda azul y el fondo blanco, como en escritorio --- */
  /* div.equipo (y no .equipo): equipo.css se carga después de esta hoja y su .equipo { padding-bottom: 400px } ganaría el empate */
  div.equipo {
    padding-bottom: 150px;
  }
  .team-container {
    margin-top: -110px;
    padding: 0 7px 100px;
  }
  .team-container > .row {
    margin-left: 0;
    margin-right: 0;
  }
  .team-container > .row > .nopadding {
    display: flex;
    padding: 5px !important;
  }
  .team-container .card {
    flex: 1 1 auto;
    min-width: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  }
  /* line-height: 0 anula la altura de los tres <br> que separaban el texto del borde superior; h4 y h5 conservan la suya */
  .team-container .card .card-content {
    position: static;
    bottom: auto;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    padding: 4px 4px 12px;
    justify-content: flex-start;
    opacity: 1;
    background: #1278bd;
    backdrop-filter: none;
    box-shadow: none;
    border-top: 0;
    line-height: 0;
  }
  .team-container .card .card-content h4,
  .team-container .card:hover .card-content h4 {
    padding: 8px 0 0;
    margin: 0 0 6px;
    line-height: 1.3;
    opacity: 1;
    transform: none;
    overflow-wrap: break-word;
  }
  .team-container .card .card-content h5,
  .team-container .card:hover .card-content h5 {
    padding: 0;
    margin: 0;
    line-height: 1.35;
    opacity: 1;
    transform: none;
    overflow-wrap: break-word;
  }
}

/* ---------- Tableta (768px a 991.98px): bloques azules de la portada lado a lado, como en escritorio ---------- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .video-section + .main-banner .row {
    flex-wrap: nowrap;
  }
  .video-section + .main-banner .row > .col-lg-5 {
    display: flex;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .video-section + .main-banner .caption,
  .video-section + .main-banner .caption2 {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 40px 32px 48px !important;
  }
  /* Título en dos líneas reservadas y pegado al texto: aunque uno ocupe una línea y el otro dos, los textos y los botones de los dos bloques empiezan a la misma altura */
  .video-section + .main-banner .caption h1,
  .video-section + .main-banner .caption2 h6 {
    display: flex;
    align-items: flex-end;
    min-height: 2.4em;
  }
  .video-section + .main-banner .caption .main-button2,
  .video-section + .main-banner .caption2 .main-button {
    margin-top: auto;
    padding-top: 24px;
  }
  /* Tres tarjetas de casos por fila, repartiéndose el ancho del contenedor con 16 px entre ellas */
  .projects + .services .carousel-item > .row.carousel-margin {
    gap: 16px;
  }
  .projects + .services .carousel-item > .row.carousel-margin > .col-md-4 {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  /* La cuadrícula del equipo no pasa de la columna de 720 px del resto de bloques (706 px = 696 px de tarjetas + los 5 px de relleno de cada lado) */
  .team-container > .row {
    max-width: 706px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------- Tableta y móvil grande (600px a 991.98px): servicios en dos columnas y equipo en cuatro ---------- */
@media (min-width: 600px) and (max-width: 991.98px) {
  .video-section + .main-banner + .services .row > .col-sm-12:not(.responsive-item1) {
    display: flex;
    flex-direction: column;
    width: 50%;
  }
  .video-section + .main-banner + .services .service-item {
    flex: 1 1 auto;
  }
  .team-container > .row > .nopadding {
    width: 25%;
  }
  /* Con cuatro columnas el nombre (3 px de separación entre letras) crece con la tarjeta, hasta el tamaño de escritorio */
  .team-container .card .card-content h4 {
    font-size: clamp(14px, 2.3vw, 17.6px);
  }
  .team-container .card .card-content h5 {
    font-size: clamp(11px, 1.8vw, 12.8px);
  }
}

/* ---------- Móvil (hasta 767.98px) ---------- */
@media (max-width: 767.98px) {
  /* Clientes: logos de 150 px (200 px ocupaban más de la mitad de la pantalla) y centrados en vertical */
  .projects .owl-features .item {
    display: flex;
    align-items: center;
    width: 150px !important;
    height: 150px !important;
  }
  /* Casos de éxito: los puntos van encima de las tarjetas para llegar a ellos sin recorrer 3 tarjetas apiladas */
  .projects + .services .carousel-indicators {
    order: -1;
    margin: 0 0 8px;
  }
}

/* ---------- Móvil (hasta 599.98px): equipo en dos columnas; los tamaños de escritorio se reducen solo lo que hace falta para que quepan las palabras largas ---------- */
@media (max-width: 599.98px) {
  .team-container .card .card-content h4 {
    font-size: clamp(15px, 4.6vw, 17.6px);
  }
  .team-container .card .card-content h5 {
    font-size: clamp(11.5px, 3.4vw, 12.8px);
  }
}