/* Cabecera y menú hamburguesa, contacto con mapa, banda CTA, newsletter y pie. 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. */
@media (max-width: 991.98px) {
  /* Bloques compartidos en tableta y móvil (hasta 991.98px): cabecera y menú, contacto con mapa, banda CTA, newsletter y pie.
     Todo vive dentro de @media (max-width): nada llega a 992 px o más. */

  /* --- Cabecera: misma altura antes y después del primer scroll (antes pasaba de 100 a 110 px y el botón saltaba) --- */
  .header-area.background-header {
    height: 100px !important;
  }
  .header-area .main-nav .logo {
    left: 15px;
  }
  /* Botón hamburguesa con zona táctil de 48x48 px; las tres barras quedan donde estaban */
  .header-area .main-nav .menu-trigger,
  .header-area.background-header .main-nav .menu-trigger {
    top: 26px;
    right: 12px;
    width: 48px;
    height: 48px;
  }
  .header-area .main-nav .menu-trigger span {
    left: 9px;
    top: 23px;
  }

  /* --- Menú desplegable: panel a todo el ancho bajo la cabecera; si no cabe, se desplaza dentro del panel --- */
  header.header-area .main-nav ul.nav {
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    width: auto;
    margin: 0 !important;
    /* 100 px de cabecera + 64 px libres abajo para que el botón de cookies (esquina inferior izquierda) no tape el final del menú */
    max-height: calc(100vh - 164px);
    max-height: calc(100dvh - 164px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    box-shadow: 0 16px 24px rgba(0, 0, 0, 0.22);
  }
  header.header-area .main-nav ul.nav li:nth-child(n) {
    width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: #fff;
    border: 0;
    border-bottom: 1px solid #e3ecf3;
  }
  header.header-area .main-nav ul.nav > li:first-child {
    border-top: 0;
  }
  header.header-area .main-nav ul.nav > li:last-child {
    border-bottom: 0;
  }
  header.header-area .main-nav ul.nav li a {
    height: 56px;
    line-height: 56px;
    padding: 0 20px !important;
    border: 0;
    color: #191a20 !important;
  }
  header.header-area .main-nav ul.nav li a:hover,
  header.header-area .main-nav ul.nav li a:focus-visible {
    background: #eaf3fa !important;
    color: #202f56 !important;
  }
  /* Indicador de que SOLUCIONES, PRODUCTOS y SOBRE NOSOTROS se despliegan (flecha dibujada con bordes, sin tipografía) */
  header.header-area .main-nav ul.nav > li.has-sub > a::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 12px;
    position: relative;
    top: -3px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s;
  }
  header.header-area .main-nav ul.nav > li.has-sub.is-open-sub > a::after {
    top: 1px;
    transform: rotate(-135deg);
  }
  /* Submenús plegados al abrir el menú (en tableta salían todos desplegados) */
  header.header-area .main-nav ul.nav li.has-sub ul.sub-menu {
    display: none;
    position: static;
    width: 100%;
    height: auto;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    background: #f4f9fd;
  }
  header.header-area .main-nav ul.nav li.has-sub ul.sub-menu li:nth-child(n) {
    background: transparent;
    border: 0;
    border-top: 1px solid #e3ecf3;
  }
  header.header-area .main-nav ul.nav li.has-sub ul.sub-menu li a {
    height: 48px;
    line-height: 48px;
    background: transparent;
    color: #1278bd !important;
  }
  header.header-area .main-nav ul.nav li.has-sub ul.sub-menu li a:hover,
  header.header-area .main-nav ul.nav li.has-sub ul.sub-menu li a:focus-visible {
    background: #e4f0fa !important;
    color: #202f56 !important;
  }
  /* Botón CONTACTO: azul con texto blanco (antes: texto oscuro sobre azul) y toda su superficie pulsable */
  header.header-area .main-nav ul.nav > li > .button-30 {
    display: flex;
    width: calc(100% - 32px);
    max-height: none !important;
    height: 52px;
    margin: 14px 16px;
    padding: 0;
    background: #1278bd;
    border-radius: 4px;
  }
  header.header-area .main-nav ul.nav > li > .button-30:hover {
    background: #202f56;
  }
  header.header-area .main-nav ul.nav > li > .button-30 a,
  header.header-area .main-nav ul.nav > li > .button-30 a:hover,
  header.header-area .main-nav ul.nav > li > .button-30 a:focus-visible {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 !important;
    background: transparent !important;
    color: #fff !important;
    line-height: 1;
  }
  /* En algunas páginas el <a> de CONTACTO queda sin cerrar y el navegador deja un enlace vacío junto a EN: sin contenido, no ocupa sitio */
  header.header-area .main-nav ul.nav li > a:empty {
    height: 0;
    line-height: 0;
    padding: 0 !important;
    border: 0;
  }

  /* --- Filas de Bootstrap dentro de contenedores sin padding ---
     .row lleva margen de -12 px para compensar el padding del contenedor y su columna lleva 12 px. En .container1 y en el
     .container-fluid de la tira de logos no hay padding: la fila se salía 12 px por cada lado. Se quitan las dos compensaciones
     (el contenido queda exactamente en el mismo sitio: de borde a borde). */
  .container1 > .row,
  .projects .container-fluid > .row {
    margin-left: 0;
    margin-right: 0;
  }
  .container1 > .row > *,
  .projects .container-fluid > .row > * {
    padding-left: 0;
    padding-right: 0;
  }

  /* --- Contacto: formulario a todo el ancho útil, mapa dentro de su columna --- */
  /* La sección subía 200 px (margin-top:-200px, regla original hasta 992 px) y su tarjeta blanca tapaba lo que había encima:
     en la home 50 px de las fotos del equipo y, en las páginas de servicio, las últimas líneas del bloque azul en tableta
     (el hueco de 200 px que lo compensaba solo existe hasta 767 px). Se ajusta según la sección que la precede. */
  .team-container + .contact-us {
    margin-top: -120px;
  }
  .margin-solutions + .contact-us {
    margin-top: 0;
  }
  .contact-us > .container .contact-us-content {
    padding: 12px;
  }
  .contact-us .contact-us-content #contact-form {
    padding: 0;
  }
  .contact-us .section-heading-contact {
    margin: 40px 0 24px;
  }
  /* La fila interior del botón "Enviar" restaba 24 px de ancho al botón respecto a los campos */
  .contact-us .contact-us-content #contact-form .row.justify-content-end {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  /* Campo trampa antispam: sigue invisible, pero ya no se coloca a 9999 px fuera de la pantalla (las auditorías lo cuentan como elemento fuera de pantalla) */
  input[name="_hpot"] {
    left: 0 !important;
    top: 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0;
    pointer-events: none;
  }
  /* Casilla de consentimiento y su texto en la misma línea */
  .contact-us .contact-us-content #contact-form input[type="checkbox"],
  .newsletter #contact-form input[type="checkbox"] {
    display: inline-block;
    vertical-align: top;
    width: 24px;
    height: 24px;
    margin: 0 12px 15px 0;
    padding: 0;
  }
  .contact-us .contact-us-content #contact-form label.form-check-label,
  .newsletter #contact-form .form-check-label {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 50px);
    margin: 0 0 15px;
    padding: 0;
    line-height: 24px;
  }
  /* Mapa: del ancho de su columna (antes 120 % o 200 % y se salía de la pantalla) */
  .contact-us .col-lg-5.nopadding {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .contact-us #map {
    width: 100%;
    margin: 32px 0 0;
  }
  .contact-us iframe.map {
    display: block;
    width: 100%;
    max-width: 100%;
    height: clamp(260px, 70vw, 440px);
  }

  /* --- Banda CTA: el botón estaba recortado (contenedor de 30 px con overflow oculto) --- */
  .cta {
    padding: 56px 0;
    margin-top: 80px;
  }
  .cta .main-button {
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    font-size: 14px;
    overflow: visible;
  }
  .cta .main-button a {
    width: auto;
    height: auto;
    margin-top: 8px;
    padding: 14px 36px !important;
    font-size: 14px;
    line-height: 1.2;
  }

  /* --- Newsletter --- */
  .newsletter {
    margin-top: 64px;
    font-size: 16px;
    line-height: 1.5;
  }
  .newsletter h4 {
    padding-left: 0;
    padding-right: 0;
    font-size: clamp(30px, 8.6vw, 44px);
    line-height: 1.15;
    margin-bottom: 20px;
  }
  .newsletter fieldset {
    line-height: 1.5;
  }

  /* --- Pie: las columnas que el tema ocultaba (descripción, Servicios, Enlaces útiles) vuelven a mostrarse --- */
  footer .contact-responsive {
    display: block;
  }
  /* Separadores entre columnas: mismo ancho que la raya de la franja legal */
  footer .row > hr.w-100 {
    width: calc(100% - 24px) !important;
    margin: 16px 12px 0;
  }
  /* Algún <p> vacío dejaba un hueco extra de 10 px en la lista */
  footer p:empty {
    padding: 0;
  }
  /* Enlaces del pie con zona táctil de 40 px de alto (el texto en línea medía 17 px); el hueco se toma del padding del párrafo */
  footer p > a {
    display: inline-block;
    padding: 5px 12px;
    margin: -5px 0;
    line-height: 30px;
  }
  footer .p-3 > a {
    display: inline-block;
    padding: 8px 4px;
    margin: -8px 0;
  }
  /* LinkedIn con zona táctil de 45 px */
  footer .col-md-5 a {
    display: inline-block;
    padding: 10px;
  }
}

@media (max-width: 767.98px) {
  /* Móvil (hasta 767.98px) */

  /* En móvil el bloque azul de servicios conserva su margen inferior de 200 px (regla original) y compensa el -200 px */
  .margin-solutions + .contact-us {
    margin-top: -200px;
  }

  /* Los campos de 14 px hacen que iPhone amplíe la página al pulsarlos: a 16 px no lo hace */
  .contact-us .contact-us-content #contact-form input,
  .contact-us .contact-us-content #contact-form textarea,
  .newsletter #contact-form input,
  .newsletter #contact-form textarea {
    font-size: 16px;
  }
  .contact-us .contact-us-content #contact-form textarea {
    height: 180px;
  }
  .cta h4 {
    font-size: clamp(24px, 7vw, 30px);
    line-height: 1.35;
  }
  .newsletter button {
    width: 100% !important;
  }
}

@media (min-width: 992px) and (max-width: 1100px) {
  /* Cabecera y menú hamburguesa entre 992 y 1100 px (iPad apaisado, ventanas pequeñas de portátil).
     La plantilla cambia al menú hamburguesa en max-width:1100px, pero el parche de tableta solo llega a 991.98px: aquí el menú abierto era
     una pila de cajas blancas con todos los submenús desplegados (1075 px de alto en 1024x768) y CONTACTO y EN quedaban fuera de la pantalla.
     Son las reglas de cabecera y menú del parche de tableta, sin ninguna del resto de bloques: el contenido de la página
     conserva aquí su maquetación de escritorio. Por encima de 1100 px (menú de escritorio) no cambia nada.
     Nota: assets/js/custom.js solo cierra el panel al pulsar CONTACTO o EQUIPO si el ancho es menor de 991 px (if(width < 991)); en este
     tramo el panel sigue abierto tras pulsarlos. Es lógica de JavaScript y no se puede resolver con CSS. */

  /* --- Cabecera: misma altura antes y después del primer scroll (antes pasaba de 100 a 110 px y el botón saltaba).
         El logotipo no se mueve: sigue donde lo deja la plantilla (a 30 px del borde) --- */
  .header-area.background-header {
    height: 100px !important;
  }
  /* Botón hamburguesa con zona táctil de 48x48 px; las tres barras quedan donde estaban */
  .header-area .main-nav .menu-trigger,
  .header-area.background-header .main-nav .menu-trigger {
    top: 26px;
    right: 12px;
    width: 48px;
    height: 48px;
  }
  .header-area .main-nav .menu-trigger span {
    left: 9px;
    top: 23px;
  }

  /* --- Menú desplegable: panel a todo el ancho bajo la cabecera; si no cabe, se desplaza dentro del panel --- */
  header.header-area .main-nav ul.nav {
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    width: auto;
    margin: 0 !important;
    /* 100 px de cabecera + 64 px libres abajo para que el botón de cookies (esquina inferior izquierda) no tape el final del menú */
    max-height: calc(100vh - 164px);
    max-height: calc(100dvh - 164px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    box-shadow: 0 16px 24px rgba(0, 0, 0, 0.22);
  }
  header.header-area .main-nav ul.nav li:nth-child(n) {
    width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: #fff;
    border: 0;
    border-bottom: 1px solid #e3ecf3;
  }
  header.header-area .main-nav ul.nav > li:first-child {
    border-top: 0;
  }
  header.header-area .main-nav ul.nav > li:last-child {
    border-bottom: 0;
  }
  header.header-area .main-nav ul.nav li a {
    height: 56px;
    line-height: 56px;
    padding: 0 20px !important;
    border: 0;
    color: #191a20 !important;
  }
  header.header-area .main-nav ul.nav li a:hover,
  header.header-area .main-nav ul.nav li a:focus-visible {
    background: #eaf3fa !important;
    color: #202f56 !important;
  }
  /* Indicador de que SOLUCIONES, PRODUCTOS y SOBRE NOSOTROS se despliegan (flecha dibujada con bordes, sin tipografía) */
  header.header-area .main-nav ul.nav > li.has-sub > a::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 12px;
    position: relative;
    top: -3px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s;
  }
  header.header-area .main-nav ul.nav > li.has-sub.is-open-sub > a::after {
    top: 1px;
    transform: rotate(-135deg);
  }
  /* Submenús plegados al abrir el menú (aquí salían todos desplegados) */
  header.header-area .main-nav ul.nav li.has-sub ul.sub-menu {
    display: none;
    position: static;
    width: 100%;
    height: auto;
    border-radius: 0;
    box-shadow: none;
    background: #f4f9fd;
  }
  header.header-area .main-nav ul.nav li.has-sub ul.sub-menu li:nth-child(n) {
    background: transparent;
    border: 0;
    border-top: 1px solid #e3ecf3;
  }
  header.header-area .main-nav ul.nav li.has-sub ul.sub-menu li a {
    height: 48px;
    line-height: 48px;
    background: transparent;
    color: #1278bd !important;
  }
  header.header-area .main-nav ul.nav li.has-sub ul.sub-menu li a:hover,
  header.header-area .main-nav ul.nav li.has-sub ul.sub-menu li a:focus-visible {
    background: #e4f0fa !important;
    color: #202f56 !important;
  }
  /* Botón CONTACTO: azul con texto blanco (antes: texto oscuro sobre azul) y toda su superficie pulsable */
  header.header-area .main-nav ul.nav > li > .button-30 {
    display: flex;
    width: calc(100% - 32px);
    max-height: none !important;
    height: 52px;
    margin: 14px 16px;
    padding: 0;
    background: #1278bd;
    border-radius: 4px;
  }
  header.header-area .main-nav ul.nav > li > .button-30:hover {
    background: #202f56;
  }
  header.header-area .main-nav ul.nav > li > .button-30 a,
  header.header-area .main-nav ul.nav > li > .button-30 a:hover,
  header.header-area .main-nav ul.nav > li > .button-30 a:focus-visible {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 !important;
    background: transparent !important;
    color: #fff !important;
    line-height: 1;
  }
  /* En algunas páginas el <a> de CONTACTO queda sin cerrar y el navegador deja un enlace vacío junto a EN: sin contenido, no ocupa sitio */
  header.header-area .main-nav ul.nav li > a:empty {
    height: 0;
    line-height: 0;
    padding: 0 !important;
    border: 0;
  }
}