/* Estilos responsive para pantallas grandes */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .i4m-top-banner h1 {
    font-size: 50px;
  }
  .section-title {
    font-size: 45px;
  }
  .it-i4m-left {
    padding: 40px;
    right: -30px;
  }
}

/* Estilos responsive para pantallas medianas-grandes */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .i4m-top-banner h1 {
    font-size: 50px;
  }
  .i4m-top-banner > img {
    width: 100%;
    height: 550px;
    object-fit: cover;
  }
  .footer-logo {
    max-width: none;
  }
  .footer-logo img {
    max-width: 85%;
  }
  .f-nav ul li a {
    padding: 0 8px;
  }
  .f-nav ul li {
    padding: 0;
  }
  .section-title {
    font-size: 45px;
  }
  .it-i4m-left {
    padding: 35px;
    position: relative;
    bottom: auto;
    max-width: none;
    right: auto;
  }
}

/* Estilos responsive para tablets */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .i4m-top-banner h1 {
    font-size: 45px;
  }
  .i4m-top-banner > img {
    width: 100%;
    height: 470px;
    object-fit: cover;
  }
  ul.navbar-nav li a {
    padding: 30px 12px;
    font-size: 16px;
  }
  .logo {
    max-width: 190px;
  }
  ul.navbar-nav li.contact-btn a {
    padding: 12px 18px;
    margin: 18px 0 0 20px;
  }
  .contact-form h2 {
    font-size: 40px;
  }
  .map {
    height: 375px;
  }
  .footer-nav ul {
    margin-left: 0;
  }
  .footer-logo {
    max-width: none;
  }
  .footer-logo img {
    max-width: 85%;
  }
  .blank-nav-height {
    height: 88px;
  }
  .section-title {
    font-size: 42px;
  }
  .maintance-picture {
    padding: 15px;
    margin-top: 25px;
  }
  .maintance-picture > img {
    width: 100%;
    height: auto;
  }
  .i4m-it-partner-pic {
    max-width: 475px;
    margin: 0 auto 30px;
  }
  .it-i4m-left {
    padding: 35px;
    position: relative;
    bottom: auto;
    max-width: none;
    right: auto;
  }
}

/* Estilos responsive para móviles */
@media only screen and (max-width: 767px) {
  .blank-nav-height {
    height: 90px;
  }
  .navbar {
    padding-top: 0;
    padding-bottom: 0;
  }
  .navbar-toggler {
    background-color: #015CEC;
    padding: 35px 25px;
    border-radius: 0;
    border: 0;
    line-height: inherit;
    margin: 0 -12px 0 0;
    box-shadow: none !important;
  }
  
  /* Menú animado */
  .animated-icon1, 
  .animated-icon2, 
  .animated-icon3 {
    width: 30px;
    height: 20px;
    position: relative;
    margin: 0;
    transform: rotate(0deg);
    transition: .5s ease-in-out;
    cursor: pointer;
  }
  
  .animated-icon1 span, 
  .animated-icon2 span, 
  .animated-icon3 span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
  }
  
  .animated-icon1 span {
    background: #fff;
  }
  
  .animated-icon2 span {
    background: #fff;
  }
  
  .animated-icon3 span {
    background: #f3e5f5;
  }
  
  .animated-icon1 span:nth-child(1) {
    top: 0px;
  }
  
  .animated-icon1 span:nth-child(2) {
    top: 10px;
  }
  
  .animated-icon1 span:nth-child(3) {
    top: 20px;
  }
  
  .animated-icon1.open span:nth-child(1) {
    top: 11px;
    transform: rotate(135deg);
  }
  
  .animated-icon1.open span:nth-child(2) {
    opacity: 0;
    left: -60px;
  }
  
  .animated-icon1.open span:nth-child(3) {
    top: 11px;
    transform: rotate(-135deg);
  }
  
  /* Navegación móvil */
  ul.navbar-nav li a {
    color: #fff;
    display: block;
    padding: 10px 15px;
    border-bottom: solid 1px #fff;
    width: 100%;
  }
  
  ul.navbar-nav li .accordion-btn-wrap {
    background: #fff !important;
    padding: 12px !important;
    width: 80px !important;
  }
  
  ul.navbar-nav li .accordion-btn {
    line-height: 25px !important;
  }
  
  ul.navbar-nav li .sub-menu li a {
    padding-left: 35px;
  }
  
  #navbarSupportedContent {
    border-top: solid 1px #fff;
    background-color: #025DEC;
    margin: 0 -12px;
  }
  
  /* Otros elementos responsive */
  .copyright-text {
    text-align: center;
  }
  
  .i4m-top-banner h1 {
    font-size: 35px;
  }
  
  .i4m-top-banner > img {
    height: 430px;
    object-fit: cover;
    object-position: center;
  }
  
  .logo {
    max-width: 190px;
  }
  
  .map {
    height: 350px;
  }
  
  .footer-logo {
    max-width: none;
    border-right: 0;
    display: block;
  }
  
  .footer-logo img {
    max-width: 250px;
    margin: 0 auto;
    display: block;
  }
  
  .footer-widget {
    margin-bottom: 35px;
  }
  
  .footer-nav ul {
    margin-left: 0;
  }
  
  .social-icons ul li {
    text-align: center;
    display: inline-block;
    margin: 0 12px 0 0;
  }
  
  .social-icons {
    text-align: left;
  }
  
  .footer-top {
    background: #fff;
    padding: 50px 0 10px;
  }
  
  .f-nav ul li {
    padding: 0;
  }
  
  .f-nav ul li a {
    color: #fff;
    padding: 0 5px;
  }
  
  .contact-form {
    padding: 75px 0;
  }
  
  .contact-form h2 {
    font-size: 35px;
  }
  
  .section-title {
    font-size: 35px;
  }
  
  .i4m-it-partner-pic {
    box-shadow: 10px -2px 0px 5px #005bec;
    max-width: 80%;
    margin: 0 auto 35px;
  }
  
  .it-i4m-left {
    padding: 35px;
    position: relative;
    bottom: auto;
    max-width: none;
    right: auto;
  }
  
  .i4m-bottom-effect {
    margin-bottom: -2px;
  }
  
  .maintance-picture {
    padding: 15px;
    margin-top: 25px;
  }
  
  .why-choosing {
    padding-top: 15px;
  }
}

/* Estilos responsive para móviles pequeños */
@media only screen and (max-width: 575px) {
  .header-bottom .container {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ===== FIX I4M – MÓVIL ===== */
@media (max-width: 991.98px){

  /* Botón hamburguesa/X (SVG embebido) */
  .navbar-toggler{
    border: 0; padding: 10px 12px; margin: 0;
    background-color: #015CEC; border-radius: 8px; line-height: 1;
    background-repeat: no-repeat; background-position: center; background-size: 24px 24px;
    /* 3 rayas blancas */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
    float: none !important;
  }
  .navbar-toggler[aria-expanded="true"]{
    /* X blanca */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' d='M6 6l18 18M24 6L6 24'/%3E%3C/svg%3E") !important;
  }
  .navbar-toggler .navbar-toggler-icon{ background: none !important; }
  .i4m-nav-toggle, .navbar-toggler{ margin-left: auto !important; }

  /* Estructura del header */
  .header-top{
    padding-top: calc(12px + env(safe-area-inset-top));
    padding-bottom: 10px;
  }
  .header-top .container,
  .navbar{
    display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap;
    width: 100%;
  }
  .logo{ margin-right: 0; padding-left: 4px; flex: 0 1 auto; }

  /* Mostrar/ocultar el colapso (fallback) */
  .navbar-collapse.collapse{ display: none !important; }
  .navbar-collapse.collapse.show{ display: block !important; }

  /* Apariencia del panel (si no la tienes ya en responsive) */
  #navbarSupportedContent{ background:#025DEC; margin:0 -12px; border-top:1px solid #fff; }
  .navbar-nav .nav-link{
    color:#fff !important; display:block; padding:10px 15px; border-bottom:1px solid #fff; width:100%;
  }

  /* Submenús con “+” que inyecta el JS */
  .navbar-nav li.menu-item-has-children{ position: relative; overflow: hidden; }
  .navbar-nav li.menu-item-has-children > a{ position: relative; display:block; padding-right:56px; z-index:1; }
  .navbar-nav li.menu-item-has-children > ul{ display:none; }
  .navbar-nav li.menu-item-has-children.open > ul{ display:block; }

  .navbar-nav .submenu-toggle{
    position:absolute; right:12px; top:50%; width:28px; height:28px; margin-top:-14px;
    border:0; background:transparent; cursor:pointer; z-index:2; -webkit-tap-highlight-color:rgba(0,0,0,0);
  }
  .navbar-nav .submenu-toggle::after{
    content:"+"; display:block; text-align:center; line-height:28px; font-size:22px; color:#fff;
  }
  .navbar-nav .submenu-toggle[aria-expanded="true"]::after{ content:"–"; }

  /* Desactivar el sistema legacy */
  .navbar-nav li .accordion-btn-wrap,
  .navbar-nav li .accordion-btn{ display:none !important; width:0 !important; height:0 !important; padding:0 !important; margin:0 !important; }
}

/* Desktop: ocultar cualquier botón móvil inyectado */
@media (min-width: 992px){
  .navbar-nav .submenu-toggle{ display: none !important; }
}

/* ==== I4M — forzar botón a la derecha en móvil (container → .flex-row → .navbar) ==== */
@media (max-width: 991.98px){
  /* La fila que envuelve la navbar debe comportarse como fila flexible a ancho completo */
  .header-top .container .flex-row{
    display: flex !important;
    width: 100% !important;
    align-items: center;
  }

  /* La navbar debe estirarse a todo el ancho y repartir extremos */
  .header-top .container .flex-row > nav.navbar{
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }

  /* El logo no empuja más de la cuenta */
  .header-top .container .flex-row > nav.navbar .logo{
    margin-right: 0 !important;
    flex: 0 1 auto !important;
  }

  /* El botón siempre a la derecha */
  .header-top .container .flex-row > nav.navbar .i4m-nav-toggle,
  .header-top .container .flex-row > nav.navbar .navbar-toggler{
    margin-left: auto !important;
    float: none !important;
  }
}

/* ===== I4M — MENÚ MÓVIL CORREGIDO: panel a ancho completo y bien alineado ===== */
@media (max-width: 991.98px){

  /* El header y la navbar sirven de anclaje */
  .header-top{ position: relative; }
  .header-top .container .flex-row > nav.navbar{
    position: relative;
    width: 100% !important;
  }

  /* El panel colapsable cae debajo del header y ocupa todo el ancho de pantalla */
  #navbarSupportedContent{
    position: absolute !important;
    top: 100%;
    left: 0;
    right: 0;
    width: 100vw !important;          /* panel a pantalla completa */
    margin: 0 !important;              /* quita sangrías */
    border-top: 1px solid #fff;
    background: #025DEC;               /* tu azul */
    z-index: 2000;
  }

  /* Elimina empuje a la derecha del <ul> en móvil */
  .navbar-nav.ms-auto{ margin-left: 0 !important; }
  .navbar-nav{ width: 100%; }

  /* Enlaces blancos ocupando todo el ancho */
  .navbar-nav .nav-link{
    color: #fff !important;
    display: block;
    padding: 12px 16px;
    border-bottom: 1px solid #fff;
  }

  /* Botón hamburguesa: sin “pastilla” azul para que no tape nada */
  .navbar-toggler{
    background-color: transparent !important;
    padding: 10px 12px;
    margin: 0;
    border-radius: 8px;
    line-height: 1;
    box-shadow: none !important;
  }
  .navbar-toggler .navbar-toggler-icon{
    width: 24px; height: 24px;
    background-repeat: no-repeat; background-position: center; background-size: 24px 24px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  }
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' d='M6 6l18 18M24 6L6 24'/%3E%3C/svg%3E");
  }

  /* Submenús (+) siguen funcionando; dejamos tu estilo tal cual */
  .navbar-nav li.menu-item-has-children{ position: relative; overflow: hidden; }
  .navbar-nav li.menu-item-has-children > a{ padding-right: 56px; }
  .navbar-nav .submenu-toggle{
    position: absolute; right: 12px; top: 50%;
    width: 28px; height: 28px; margin-top: -14px;
    border: 0; background: transparent; cursor: pointer; z-index: 2;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  .navbar-nav .submenu-toggle::after{
    content: "+"; display: block; text-align: center; line-height: 28px;
    font-size: 22px; color: #fff;
  }
  .navbar-nav .submenu-toggle[aria-expanded="true"]::after{ content: "–"; }
}

/* ==== I4M — Fix final: botón visible + menú alineado a pantalla ==== */
@media (max-width: 991.98px){
  /* 1) El header no añade padding lateral; así el panel no queda desplazado */
  .header-top .container{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Un poco de aire interno para logo/botón */
  .header-top .container .flex-row{
    padding: 0 12px;
  }

  /* 2) Botón visible sobre fondo blanco */
  .navbar-toggler{
    background-color: #015CEC !important;   /* pastilla azul */
    border-radius: 10px;
    padding: 10px 12px;
    margin: 0;
    line-height: 1;
    box-shadow: none !important;
  }
  .navbar-toggler .navbar-toggler-icon{
    width: 24px; height: 24px;
    background-repeat: no-repeat; background-position: center; background-size: 24px 24px;
    /* 3 rayas blancas */
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  }
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon{
    /* X blanca al abrir */
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' d='M6 6l18 18M24 6L6 24'/%3E%3C/svg%3E");
  }

  /* 3) Panel alineado con el viewport (sin corrimiento) */
  #navbarSupportedContent{
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;      /* <- NO 100vw para evitar desbordes */
  }
}

/* ===== I4M — Look & feel del menú móvil ===== */
@media (max-width: 991.98px){

  /* Bloquear scroll cuando el menú está abierto */
  body.i4m-menu-open { overflow: hidden; }

  /* Backdrop (capa oscura clicable) */
  .i4m-backdrop{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1500;
    opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
  }
  .i4m-backdrop.on{ opacity: 1; pointer-events: auto; }

  /* Panel: ancho de pantalla, con margen, sombra y animación */
  #navbarSupportedContent{
    position: absolute !important;
    top: 100%; left: 0; right: 0;
    width: 100% !important;
    margin: 8px 12px 0 !important;     /* separa del borde del viewport */
    background: #025DEC;
    border-radius: 12px;
    box-shadow: 0 14px 28px rgba(0,0,0,.18);
    z-index: 2002;                      /* por encima del backdrop */
    transform: translateY(-8px);
    opacity: 0;
    transition: transform .22s ease, opacity .22s ease;
    overflow: hidden;
  }
  #navbarSupportedContent.show{
    transform: translateY(0);
    opacity: 1;
  }

  /* Enlaces: mejor legibilidad y divisores suaves */
  .navbar-nav{ width: 100%; }
  .navbar-nav .nav-link{
    color: #fff !important;
    display: block;
    padding: 14px 18px;
    font-weight: 600;
    letter-spacing: .2px;
  }
  .navbar-nav li + li .nav-link{
    border-top: 1px solid rgba(255,255,255,.28);
  }

  /* Botón “+” de submenú más limpio */
  .navbar-nav li.menu-item-has-children > a{ padding-right: 56px; }
  .navbar-nav .submenu-toggle{
    position: absolute; right: 14px; top: 50%;
    width: 28px; height: 28px; margin-top: -14px;
    border: 0; border-radius: 6px;
    background: rgba(255,255,255,.16);
    cursor: pointer; z-index: 2;
  }
  .navbar-nav .submenu-toggle::after{
    content: "+"; color: #fff; line-height: 28px; font-size: 20px; display: block; text-align: center;
  }
  .navbar-nav .submenu-toggle[aria-expanded="true"]::after{ content: "–"; }

  /* Subniveles ligeramente más oscuros y con divisores internos */
  .navbar-nav li.open > a{ background: rgba(0,0,0,.07); }
  .navbar-nav li.open > ul{ background: rgba(0,0,0,.06); }
  .navbar-nav li .sub-menu a{ padding: 12px 18px 12px 26px; font-weight: 500; }
  .navbar-nav li .sub-menu li + li a{ border-top: 1px solid rgba(255,255,255,.22); }
}

/* ==== I4M — Fijar orden de apilado en móvil: el panel por encima del backdrop ==== */
@media (max-width: 991.98px){
  /* El header y su colapso por encima de la capa oscura */
  header, .header-top, .navbar{
    position: relative;
    z-index: 3000 !important;
  }
  /* El contenedor colapsable (panel) todavía un poco más arriba */
  #navbarSupportedContent,
  #mainNav,
  .navbar .navbar-collapse{
    position: absolute !important;
    z-index: 3001 !important;
  }
  /* El botón hamburguesa siempre accesible */
  .navbar-toggler{
    position: relative;
    z-index: 3002 !important;
  }
  /* El backdrop queda por debajo del panel/toolbar */
  .i4m-backdrop{
    z-index: 2000 !important;   /* menor que 3000/3001, mayor que el resto de la página */
  }
}

/* === I4M — Legibilidad del menú móvil (tipografía, ritmos, submenús) === */
@media (max-width: 991.98px){

  /* Contenedor del panel */
  #navbarSupportedContent{
    border-radius: 12px;
    box-shadow: 0 14px 28px rgba(0,0,0,.18);
    background: #025DEC;
  }

  /* Ítems de PRIMER NIVEL */
  #navbarSupportedContent .navbar-nav > li > .nav-link{
    font-size: 15px;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: .2px;
    padding: 12px 18px;               /* ~46–48px de alto total */
    min-height: 44px;                 /* tap target mínimo */
    color: #fff !important;
  }
  #navbarSupportedContent .navbar-nav > li + li > .nav-link{
    border-top: 1px solid rgba(255,255,255,.28);
  }

  /* Estado de grupo abierto */
  #navbarSupportedContent .navbar-nav li.open > a{
    background: rgba(0,0,0,.06);
  }
  #navbarSupportedContent .navbar-nav li.open > ul{
    background: rgba(0,0,0,.05);
  }

  /* SUBMENÚS */
  #navbarSupportedContent .navbar-nav li .sub-menu a{
    font-size: 13.5px;                /* un paso por debajo del padre */
    line-height: 1.35;
    font-weight: 400;
    letter-spacing: .15px;
    padding: 11px 18px 11px 26px;     /* sangría a la izquierda */
    min-height: 44px;
    color: #f3f8ff !important;        /* blanco algo más suave */
  }
  #navbarSupportedContent .navbar-nav li .sub-menu li + li a{
    border-top: 1px solid rgba(255,255,255,.18);
  }

  /* Botón “+” */
  #navbarSupportedContent .navbar-nav .submenu-toggle{
    position: absolute; right: 14px; top: 50%;
    width: 26px; height: 26px; margin-top: -13px;
    border: 0; border-radius: 6px;
    background: rgba(255,255,255,.16);
    cursor: pointer; z-index: 2;
  }
  #navbarSupportedContent .navbar-nav .submenu-toggle::after{
    content: "+"; color: #fff; line-height: 26px; font-size: 18px; display: block; text-align: center;
  }
  #navbarSupportedContent .navbar-nav .submenu-toggle[aria-expanded="true"]::after{ content: "–"; }

  /* Feedback al toque / enfoque (a11y) */
  #navbarSupportedContent .navbar-nav a:active{
    background: rgba(255,255,255,.08);
  }
  #navbarSupportedContent .navbar-nav a:focus-visible,
  #navbarSupportedContent .navbar-nav .submenu-toggle:focus-visible{
    outline: 2px solid rgba(255,255,255,.9);
    outline-offset: 2px;
    border-radius: 8px;
  }
}

/* Micro-ajuste en móviles muy estrechos */
@media (max-width: 360px){
  #navbarSupportedContent .navbar-nav > li > .nav-link{ font-size: 15.5px; padding: 11px 16px; }
  #navbarSupportedContent .navbar-nav li .sub-menu a{ font-size: 14px; padding-left: 24px; }
}

/* ===== I4M — MKT-20260909-WEB-MENU-01: submenú accesible <= 991.98px ===== */
@media (max-width: 991.98px) {
  #navbarSupportedContent.show {
    height: auto !important;
    max-height: calc(100vh - 112px);
    max-height: calc(100dvh - 112px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  #navbarSupportedContent .navbar-nav li.menu-item-has-children {
    overflow: visible;
  }

  #navbarSupportedContent .navbar-nav li > ul.sub-menu {
    position: static;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    transform: none;
    border-left: 0;
  }

  #navbarSupportedContent .navbar-nav li.open > ul.sub-menu {
    display: block;
    visibility: visible;
    opacity: 1;
  }

  #navbarSupportedContent .navbar-nav > li.current_page_item > a,
  #navbarSupportedContent .navbar-nav > li.current_page_ancestor > a,
  #navbarSupportedContent .navbar-nav > li.current-menu-item > a,
  #navbarSupportedContent .navbar-nav > li.current-menu-ancestor > a {
    color: #fff !important;
    background: rgba(0, 0, 0, .18);
  }
}