/* =========================================================================
   HOPE & MISSION — CORRECCIONES RESPONSIVE
   -------------------------------------------------------------------------
   Solo lo que los controles responsive de Elementor no pueden resolver.
   Todo lo demas (altura del hero en tablet, ancho del contenido del hero en
   movil, separacion de las pestanas de pais y colapso del menu) esta hecho
   con los controles nativos del widget correspondiente.

   Reglas de este fichero:
   - Ningun selector global. Todos parten de una clase .hm-* del componente.
   - Nada de escritorio: todo vive dentro de una media query.
   - Ningun :hover. No se toca el mapa SVG ni sus paths.
   ========================================================================= */


/* -------------------------------------------------------------------------
   P3. CABECERA EN UNA SOLA FILA EN MOVIL

   Hasta ahora .hm-header era una columna de tres bloques a ancho completo,
   asi que en movil se apilaba en tres filas de 191px en total: el logo
   pegado al borde izquierdo, debajo el idioma y el boton pegados al borde
   derecho, y debajo la banda menta con la hamburguesa centrada.

   La maqueta resuelve la cabecera movil en una sola fila: marca a la
   izquierda; idioma, boton y hamburguesa a la derecha. Aqui se consigue lo
   mismo recomponiendo con flex, sin mover ni un solo widget de sitio y sin
   tocar la cabecera de escritorio.

   La banda menta pierde su fondo porque en movil deja de ser una banda: se
   queda solo con la hamburguesa, igual que en la maqueta.
   ------------------------------------------------------------------------- */
@media (max-width:1024px){

  /* Fila unica, como la maqueta: marca a la izquierda; idioma, boton y
     hamburguesa a la derecha. No se mueve ni un widget: solo se recompone
     con flex.

     Elementor compone sus contenedores leyendo variables (.e-con usa
     --flex-direction) y su regla empata en especificidad con .hm-header,
     ganando por orden de carga. Por eso se escriben las variables y se
     duplica la clase, en vez de recurrir a !important. */
  .hm-header.hm-header{
    --flex-direction:row;
    --flex-wrap:nowrap;
    --align-items:center;
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:center;
    column-gap:10px;
    padding-left:20px;
    padding-right:20px;
    position:relative;
    z-index:100;
  }

  /* El enlace de salto no tiene altura: no debe ocupar sitio en la fila,
     pero se conserva en el documento por accesibilidad. */
  .hm-header > .elementor-widget-html{
    flex:0 0 auto;
    width:0;
    min-width:0;
  }

  /* Bloque de marca y acciones */
  .hm-header > .e-con:not(.hm-nav-band){
    flex:1 1 auto;
    width:auto;
    min-width:0;
    padding-left:0;
    padding-right:0;
  }
  .hm-header > .e-con:not(.hm-nav-band) > .e-con-inner{
    --flex-wrap:nowrap;
    --justify-content:space-between;
    --align-items:center;
    flex-wrap:nowrap;
    justify-content:space-between;
    align-items:center;
    column-gap:10px;
    width:100%;
  }

  /* Este contenedor ocupaba el 100% del ancho y era lo que partia la fila. */
  .hm-header > .e-con:not(.hm-nav-band) > .e-con-inner > .e-con{
    --width:auto;
    width:auto;
    flex:0 0 auto;
    column-gap:12px;
  }

  /* La banda deja de ser banda: solo queda la hamburguesa, sin fondo. */
  /* El fondo menta lo pinta el CSS generado de la plantilla
     (.elementor-138 .elementor-element-ec39b57, especificidad 0,4,0), de ahi
     el !important: es la unica forma de ganarle sin depender del orden de
     carga de un fichero que genera Elementor. Queda encerrado en la media
     query, asi que el escritorio no se ve afectado en ningun caso. */
  .hm-header > .hm-nav-band.hm-nav-band{
    flex:0 0 auto;
    width:auto;
    min-width:0;
    min-height:0;
    padding:0;
    background-color:transparent !important;
    background-image:none !important;
    box-shadow:none;
  }
  .hm-header .hm-nav-band .elementor-widget-nav-menu{
    width:auto;
  }

  /* El desplegable se posiciona respecto a la cabecera completa, no respecto
     al hueco estrecho de la hamburguesa, para que abra a todo lo ancho y no
     tape el contenido de forma incorrecta. */
  /* Para que el desplegable abra a todo el ancho de la cabecera, el ancestro
     posicionado mas cercano debe ser .hm-header. Elementor deja tanto el
     contenedor como el widget en position:relative, asi que se neutralizan
     los dos dentro de la media query. */
  .hm-header > .hm-nav-band.hm-nav-band,
  .hm-header .hm-nav-band .elementor-widget-nav-menu,
  .hm-header .hm-nav-band .elementor-widget-nav-menu > .elementor-widget-container{
    position:static;
  }
  .hm-header .hm-nav-band .elementor-nav-menu--dropdown{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    width:auto;
    /* Al quitar el position:relative de la banda se perdio su contexto de
       apilado y el panel quedaba por detras del hero. */
    z-index:999;
  }

}

@media (max-width:430px){
  /* Margen extra para que la fila no quede al limite en pantallas estrechas */
  .hm-header .hm-brand img{
    max-width:118px;
  }
}

@media (min-width:431px) and (max-width:767px){
  .hm-header .hm-brand img{
    max-width:126px;
  }
}

/* -------------------------------------------------------------------------
   P8. MAPA: SIN SALTO DE ANCHO AL CRUZAR EL CORTE DE TABLET

   Al pasar el panel a una sola columna el SVG se quedaba sin limite y
   saltaba de 542px a 868px de golpe. Se le pone un techo para que la
   transicion sea continua.

   Solo cambia el ancho del contenedor visual: no se toca el SVG, ni sus
   paths, ni su interaccion, ni la animacion del pais activo.
   ------------------------------------------------------------------------- */
@media (max-width:1024px){
  .hm-map svg{
    display:block;
    max-width:560px;
    margin-left:auto;
    margin-right:auto;
  }
}


/* -------------------------------------------------------------------------
   P4 bis. INDICADORES DEL HERO EN TABLET

   Con el hero ya a 560px en tablet, los puntos quedaban rozando el borde
   inferior del boton: 4px de solape medidos a 768px. Se bajan lo justo
   para que quede aire entre ambos. Se repite el selector largo de
   hope-mission.css porque esa regla tiene especificidad alta; esta hoja
   se carga despues, de modo que gana sin necesidad de !important.
   ------------------------------------------------------------------------- */
@media (min-width:768px) and (max-width:1024px){
  .hm-hero.elementor-widget .elementor-swiper .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal{
    bottom:70px;
  }
}


/* -------------------------------------------------------------------------
   PESTANAS DE PAIS EN MOVIL

   La maqueta no aplica ningun espaciado entre letras a estos botones; el
   sitio hereda 2,72px, y con las etiquetas en mayusculas eso ensancha cada
   una lo suficiente como para pasar de dos filas a cuatro. Bajar el tamano
   de fuente no lo resolvia: de 1rem a 0,78rem solo baja de 174px a 161px y
   sigue habiendo cuatro filas.

   Ademas los titulos quedaban desalineados verticalmente entre si, porque
   la cabecera de pestanas no centra sus elementos.

   Afecta a Home, Impacto y Proyecto Familia, en los dos idiomas.
   ------------------------------------------------------------------------- */
@media (max-width:767px){
  .hm-country-tabs .e-n-tabs-heading{
    align-items:center;
    row-gap:10px;
  }
  /* Elementor traduce la separacion en margenes asimetricos: el primer
     titulo recibe margin-bottom y los demas margin-top. Eso desnivelaba el
     primero respecto a su propia fila y ademas duplicaba el espaciado al
     sumarse al gap. Se anulan y manda solo el gap. */
  .hm-country-tabs .e-n-tab-title{
    letter-spacing:normal;
    /* !important porque el margen lo escribe el CSS que genera Elementor por
       pagina (.elementor-94 .elementor-element-9142c6a .e-n-tab-title), con
       mas especificidad que cualquier selector de componente. Queda dentro
       de la media query, asi que el escritorio no se toca. */
    margin:0 !important;
  }
}


/* -------------------------------------------------------------------------
   PIE: DESBORDAMIENTO DEL BOTON DEL NEWSLETTER (1025-1199px)

   El grupo del campo de envio mide 132px, pero el boton lleva
   min-width:162px (hope-mission.css, linea 617) y se salia 16px por la
   derecha, provocando scroll horizontal en todas las paginas y en los dos
   idiomas. Medido: 15px a 1025, 4px a 1100, 0 desde 1200.

   El boton pasa a ocupar exactamente el ancho de su grupo. La franja esta
   acotada al rango afectado: por debajo de 1025 y a partir de 1200 no se
   toca absolutamente nada.
   ------------------------------------------------------------------------- */
@media (min-width:1025px) and (max-width:1199px){
  .hm-newsletter .elementor-field-type-submit .elementor-button{
    min-width:0;
    width:100%;
  }
}

/* -------------------------------------------------------------------------
   PANEL DEL MENU MOVIL

   Elementor lo servia como un desplegable neutro: fondo blanco, los tres
   padres con su flecha y los submenus plegados en display:none.

   La referencia lo plantea como un indice completo y siempre visible:
   cada seccion es una banda menta en mayusculas y debajo cuelgan sus
   paginas sobre menta clara, separadas por filetes finos. No hay flechas
   ni nada que plegar.

   Todo queda dentro de la media query responsive: el submenu de escritorio
   (la caja blanca flotante de hope-mission.css) no se toca, porque alli el
   selector es ul.elementor-nav-menu--dropdown dentro de .elementor-nav-menu--main
   y aqui se parte siempre de nav.elementor-nav-menu--dropdown.
   ------------------------------------------------------------------------- */
@media (max-width:1024px){

  .hm-header .hm-nav-band nav.elementor-nav-menu--dropdown{
    background-color:#fff;
    box-shadow:0 12px 30px rgba(2,78,70,.12);
    /* Elementor separa el desplegable de la cabecera con margin-top:10px,
       y por ese hueco se colaba una franja del hero. El panel tiene que
       arrancar pegado al borde inferior de la cabecera. */
    margin-top:0;
  }

  /* Secciones: banda menta, mayusculas y letra espaciada */
  .hm-header .hm-nav-band nav.elementor-nav-menu--dropdown > ul.elementor-nav-menu > li > a.elementor-item{
    background-color:var(--hm-mint);
    color:var(--hm-green-800);
    text-transform:uppercase;
    letter-spacing:.16em;
    font-size:.86rem;
    font-weight:500;
    padding:17px 24px;
  }

  /* Sin flechas: no hay nada que plegar */
  .hm-header .hm-nav-band nav.elementor-nav-menu--dropdown .sub-arrow{
    display:none;
  }

  /* Submenus siempre abiertos. El !important es necesario porque
     SmartMenus escribe display en linea al plegar y desplegar. */
  .hm-header .hm-nav-band nav.elementor-nav-menu--dropdown ul.sub-menu{
    display:block !important;
    position:static;
    width:100%;
    min-width:0;
    margin:0;
    padding:0;
    background-color:var(--hm-mint-soft);
    box-shadow:none;
    border-radius:0;
    transform:none;
  }

  /* Paginas de cada seccion, con filete de separacion */
  .hm-header .hm-nav-band nav.elementor-nav-menu--dropdown ul.sub-menu > li > a{
    display:block;
    color:var(--hm-green-800);
    text-transform:none;
    letter-spacing:normal;
    font-size:1rem;
    font-weight:400;
    padding:16px 24px 16px 36px;
    border-top:1px solid rgba(45,79,72,.10);
  }
  .hm-header .hm-nav-band nav.elementor-nav-menu--dropdown ul.sub-menu > li:first-child > a{
    border-top:0;
  }

}

/* -------------------------------------------------------------------------
   CABECERA RESPONSIVE: ALINEACION Y BOTON DE MENU

   Dos correcciones respecto a la maqueta:

   1. El icono venia dentro de un recuadro gris. No es del tema: lo pinta
      Elementor en widget-nav-menu.min.css con
      .elementor-menu-toggle{background-color:rgba(0,0,0,.05); border-radius:3px}.
      En la maqueta las tres barras van sueltas sobre el blanco.

   2. Las barras se dibujan con currentColor, asi que se fija el verde de
      marca de forma explicita en lugar de depender de lo que herede.

   Todo dentro de la media query responsive: el menu de escritorio no usa
   este boton, de modo que alli no cambia nada.
   ------------------------------------------------------------------------- */
@media (max-width:1024px){

  .hm-header .elementor-menu-toggle{
    background-color:transparent;
    border-radius:0;
    padding:0;
    width:30px;
    height:30px;
    color:var(--hm-green-800);
  }

  /* Los dos SVG de Elementor ya estan ocultos; se recalca aqui para que el
     gris de su fill no pueda asomar por debajo de las barras propias. */
  .hm-header .elementor-menu-toggle svg{
    display:none;
  }

  /* Margenes laterales algo mas ajustados para que la fila respire igual
     que en la maqueta con el logo ya a su tamano correcto. */
  .hm-header.hm-header{
    padding-left:16px;
    padding-right:16px;
  }

}

/* -------------------------------------------------------------------------
   CABECERA RESPONSIVE: CENTRADO VERTICAL DE LA FILA

   El contenedor interior del bloque de marca traia un relleno vertical
   asimetrico (padding:9px 0 17px). Al ser 8px mayor por abajo, subia su
   contenido 4px respecto al centro de la cabecera: logo, selector de idioma
   y boton centraban en 32,7 mientras la hamburguesa lo hacia en 36,7.

   Se anula ese relleno y se traslada a la cabecera de forma simetrica, con
   el mismo total, de modo que la altura no cambia (47+26=73 en movil,
   63+26=89 en tablet) y todo comparte el mismo eje.
   ------------------------------------------------------------------------- */
@media (max-width:1024px){

  .hm-header > .e-con:not(.hm-nav-band) > .e-con-inner{
    padding-top:0;
    padding-bottom:0;
  }

  .hm-header.hm-header{
    padding-top:13px;
    padding-bottom:13px;
  }

}

/* -------------------------------------------------------------------------
   FORMULARIOS: ALINEACION DEL DESPLEGABLE

   Elementor envuelve los select en .elementor-select-wrapper y le pone el
   mismo relleno lateral que ya lleva el propio select, de modo que los 20px
   se sumaban dos veces: el desplegable quedaba 20px hacia dentro respecto a
   los campos de texto, que no llevan ese envoltorio.

   Se anula el relleno del envoltorio para que el select ocupe todo el ancho
   del grupo y su texto arranque en la misma vertical que Nombre, Apellido,
   Correo y Telefono.
   ------------------------------------------------------------------------- */
@media (max-width:1024px){
  /* El !important es necesario porque el envoltorio tambien encaja en la
     regla generica .hm-form .elementor-field-group .elementor-field:not(...)
     de hope-mission.css, cuya cadena de :not([type=...]) suma mas
     especificidad que cualquier selector razonable de componente. */
  .hm-form .elementor-field-type-select .elementor-select-wrapper{
    padding-left:0 !important;
    padding-right:0 !important;
  }
}

/* -------------------------------------------------------------------------
   FORMULARIOS: BOTON DE ENVIO A TODO EL ANCHO EN MOVIL

   En la maqueta el boton ocupa el ancho de la columna. Aqui salia estrecho
   y alineado a la derecha, lo que dejaba un hueco a su izquierda y hacia
   que el bloque de meta pareciera no llenar el espacio.
   ------------------------------------------------------------------------- */
@media (max-width:767px){
  .hm-form .elementor-field-type-submit{
    width:100%;
    justify-content:stretch;
  }
  .hm-form .elementor-field-type-submit .elementor-button{
    width:100%;
  }
}


/* -------------------------------------------------------------------------
   VOLUNTARIADO Y PAGINAS DE FORMULARIO: LA IMAGEN VA PRIMERO EN MOVIL

   El contenedor de la imagen (.hm-form-media) es el segundo hijo, de modo
   que en escritorio queda a un lado del formulario, pero al apilarse en
   movil caia al final de toda la pagina: habia que recorrer el formulario
   entero para verla.

   Se reordena solo visualmente con order, sin mover ningun widget ni tocar
   el marcado. En escritorio el orden no cambia.
   ------------------------------------------------------------------------- */
@media (max-width:767px){
  .hm-form-page > .hm-form-media{
    order:-1;
  }
  .hm-form-page > .hm-form-body{
    order:0;
  }
}

/* -------------------------------------------------------------------------
   BARRA DE META: RELLENO A TODO EL ALTO EN RESPONSIVE

   En escritorio la barra es vertical y el shortcode [hm_goal] escribe el
   porcentaje como altura en linea (height:62%). Ahi es correcto.

   Por debajo de 1024 la barra pasa a horizontal y el porcentaje debe
   leerse en la anchura. hope-mission.css ya lo intenta con height:auto,
   pero un estilo en linea gana siempre a una hoja, de modo que el relleno
   conservaba el 62% de alto y dejaba ver el carril claro por arriba y por
   abajo. Forzarlo es la unica forma de ganarle al atributo style.
   El porcentaje sigue expresandose en el ancho. Escritorio sin cambios.
   ------------------------------------------------------------------------- */
@media (max-width:1024px){
  .hm-goal .hm-goal__fill{
    height:100% !important;
  }
}