/* Agroapoyo - correcciones responsive (2026-11-05, rev. menu 2026-11-06, rev. movil 2026-11-06 b)
   Se carga despues de Elementor desde el mu-plugin agroapoyo-responsive.php.
   Los IDs data-id son iguales en ES y EN (las paginas EN son copia de las ES). */

/* 1. Nunca scroll horizontal (el texto con efecto de movimiento en X se salia en 1280-1536px) */
html, body { overflow-x: clip; }

/* Elementor define el layout de los contenedores con variables CSS (--width, --flex-direction,
   --flex-wrap) en selectores de mayor especificidad; por eso aqui van con !important. */

/* 2. Encabezado escritorio: los anchos sumaban 120% (25+75+14+6) y apretaban el menu */
@media (min-width: 1025px) {
  .elementor-element-37cc3d8, .elementor-element-e622a6d { --width: auto !important; flex: 0 0 auto !important; }
  .elementor-element-2327bd1, .elementor-element-96f41d4 { --width: auto !important; flex: 1 1 auto !important; min-width: 0; margin-right: 20px; }
  .elementor-element-e505a5e, .elementor-element-74c6960,
  .elementor-element-843b286, .elementor-element-a83f6ef { --width: auto !important; flex: 0 0 auto !important; }
  .elementor-element-37cc3d8 img, .elementor-element-e622a6d img { max-width: clamp(150px, 12vw, 220px) !important; }
  .elementor-element-19c26f7 .elementor-nav-menu--main > .elementor-nav-menu,
  .elementor-element-e673994 .elementor-nav-menu--main > .elementor-nav-menu { flex-wrap: nowrap; }
  .elementor-element-19c26f7 .elementor-nav-menu--main .elementor-item,
  .elementor-element-e673994 .elementor-nav-menu--main .elementor-item {
    /* El encabezado tiene ancho maximo fijo (~1140px): letra y espaciado con tope para que el menu
       no se meta debajo de los iconos sociales en monitores grandes */
    font-size: clamp(12px, 0.2vw + 10px, 14px) !important;
    padding-left: clamp(5px, 0.5vw, 9px) !important; padding-right: clamp(5px, 0.5vw, 9px) !important;
    white-space: nowrap;
  }
}

/* Contadores en escritorio: el efecto escalonado hacia que los textos pisaran la linea divisoria */
@media (min-width: 1025px) {
  .elementor-element-71f3570 { --padding-bottom: 70px !important; }
}

/* 3. Efectos de movimiento al hacer scroll: en tablet y movil, al apilarse las columnas,
      los iconos subian y tapaban los textos de los contadores. Se desactivan ahi. */
@media (max-width: 1024px) {
  .elementor-motion-effects-element { transform: none !important; }
}

/* 4. Inicio: video + texto. En tablet se apilan en vez de quedar apretados */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-element-b1611ce { --flex-direction: column !important; --min-height: 0px !important; }
  .elementor-element-e7f0c83, .elementor-element-faf39d5 { --width: 100% !important; --padding-top: 4vw !important; --padding-bottom: 2vw !important; --padding-left: 10vw !important; --padding-right: 10vw !important; }
  .elementor-element-5639bd4 > .elementor-widget-container { padding: 0 !important; }
}

/* 5. Inicio: contadores. Movil 2 por fila (antes 1 enorme por fila), iconos mas pequenos */
@media (max-width: 767px) {
  .elementor-element-71f3570 { --flex-direction: row !important; --flex-wrap: wrap !important; --justify-content: center !important; --row-gap: 32px !important; }
  .elementor-element-71f3570 > .e-con, .elementor-element-71f3570 > .e-con-inner > .e-con { --width: 50% !important; }
  .elementor-element-71f3570 .elementor-widget-image img { max-width: 110px !important; height: auto; }
  .elementor-element-71f3570 .elementor-counter-number-wrapper { font-size: 34px !important; }
  .elementor-element-71f3570 .elementor-counter-title { font-size: 15px !important; }
}

/* 6. Inicio: certificaciones (8 logos en una fila, a 56px en tablet se recortaban) */
@media (max-width: 1024px) {
  .elementor-element-1bedd37 { --flex-direction: row !important; --flex-wrap: wrap !important; --justify-content: center !important; --row-gap: 16px !important; --column-gap: 0px !important; }
  .elementor-element-1bedd37 > .e-con, .elementor-element-1bedd37 > .e-con-inner > .e-con { --width: 25% !important; --min-height: 0px !important; }
}
@media (max-width: 767px) {
  .elementor-element-1bedd37 > .e-con, .elementor-element-1bedd37 > .e-con-inner > .e-con { --width: 50% !important; }
}

/* 7. Inicio: contacto. En tablet el titulo chocaba con el formulario; se apila */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-element-15d184b { --flex-direction: column !important; }
  .elementor-element-3a24085, .elementor-element-2eff340 { --width: 100% !important; --padding-left: 10vw !important; --padding-right: 10vw !important; }
}

/* 8. Texto justificado en movil deja huecos grandes entre palabras: alineado a la izquierda */
@media (max-width: 767px) {
  .elementor-element-5639bd4, .elementor-element-fb9cae7, .elementor-element-f1e42ee,
  .elementor-element-76a99a8, .elementor-element-554a141, .elementor-element-3367449,
  .elementor-element-0c7d8b3, .elementor-element-e16280a, .elementor-element-0b94cd8,
  .elementor-element-1431237, .elementor-element-12727b5,
  .elementor-element-6c65b6d, .elementor-element-c76e46a, .elementor-element-fc5f4d3,
  .elementor-element-d7c0a02, .elementor-element-ff07e43, .elementor-element-67802b9,
  .elementor-element-9632a04, .elementor-element-929eb7a, .elementor-element-b643667,
  .elementor-element-b6945e9, .elementor-element-01c526f, .elementor-element-1bd90bc {
    text-align: left !important;
  }
  .elementor-element-5639bd4 *, .elementor-element-fb9cae7 *, .elementor-element-f1e42ee *,
  .elementor-element-76a99a8 *, .elementor-element-554a141 *, .elementor-element-3367449 *,
  .elementor-element-0c7d8b3 *, .elementor-element-e16280a *, .elementor-element-0b94cd8 *,
  .elementor-element-1431237 *, .elementor-element-12727b5 * { text-align: left !important; }
}


/* ===================== MOVIL (rev. 2026-11-06 b) ===================== */

/* 9. Encabezado en movil: los iconos sociales chocaban con el logo y el encabezado transparente
      quedaba encima del texto de los banners. En movil pasa a ser una franja solida, sin iconos
      sociales (siguen en el pie), y el primer bloque de cada pagina empieza debajo de ella. */
@media (max-width: 767px) {
  .elementor-location-header > .e-con { background-color: #00503c !important; --min-height: 0px !important; --padding-top: 8px !important; --padding-bottom: 8px !important; }
  .elementor-element-e505a5e, .elementor-element-74c6960 { display: none !important; }
  .elementor-element-37cc3d8, .elementor-element-e622a6d { --width: auto !important; --justify-content: flex-start !important; --align-items: flex-start !important; flex: 1 1 auto !important; }
  .elementor-element-37cc3d8 .elementor-widget, .elementor-element-e622a6d .elementor-widget { text-align: left !important; }
  .elementor-element-37cc3d8 img, .elementor-element-e622a6d img { max-height: 44px !important; width: auto !important; }
  .elementor-element-843b286, .elementor-element-a83f6ef,
  .elementor-element-2327bd1, .elementor-element-96f41d4 { --width: auto !important; flex: 0 0 auto !important; }
  .elementor-location-header + .elementor > .e-con:first-child { --margin-top: 0px !important; margin-top: 0 !important; }
}

/* 10. Textos de cuerpo a 12px eran muy pequenos para leer en el telefono: suben a 14px */
@media (max-width: 767px) {
  :is(.elementor-element-5639bd4, .elementor-element-9acd087, .elementor-element-5889d18,
      .elementor-element-fb9cae7, .elementor-element-f1e42ee, .elementor-element-76a99a8,
      .elementor-element-554a141, .elementor-element-3367449, .elementor-element-c7bc2ee,
      .elementor-element-10e1e28, .elementor-element-6c65b6d, .elementor-element-c76e46a,
      .elementor-element-962e84b, .elementor-element-fc5f4d3, .elementor-element-d7c0a02,
      .elementor-element-ff07e43, .elementor-element-67802b9, .elementor-element-83bb8a3,
      .elementor-element-7210971, .elementor-element-9632a04, .elementor-element-929eb7a,
      .elementor-element-b643667, .elementor-element-b6945e9, .elementor-element-01c526f,
      .elementor-element-1bd90bc, .elementor-element-f33babd),
  :is(.elementor-element-5639bd4, .elementor-element-9acd087, .elementor-element-5889d18,
      .elementor-element-fb9cae7, .elementor-element-f1e42ee, .elementor-element-76a99a8,
      .elementor-element-554a141, .elementor-element-3367449, .elementor-element-c7bc2ee,
      .elementor-element-10e1e28, .elementor-element-6c65b6d, .elementor-element-c76e46a,
      .elementor-element-962e84b, .elementor-element-fc5f4d3, .elementor-element-d7c0a02,
      .elementor-element-ff07e43, .elementor-element-67802b9, .elementor-element-83bb8a3,
      .elementor-element-7210971, .elementor-element-9632a04, .elementor-element-929eb7a,
      .elementor-element-b643667, .elementor-element-b6945e9, .elementor-element-01c526f,
      .elementor-element-1bd90bc, .elementor-element-f33babd) :is(p, li) {
    font-size: 14px !important; line-height: 1.55 !important; letter-spacing: 0 !important;
  }
  /* Textos que quedaban a 0-10px del borde de la pantalla */
  :is(.elementor-element-9acd087, .elementor-element-1273232,
      .elementor-element-c7bc2ee, .elementor-element-10e1e28, .elementor-element-c76e46a,
      .elementor-element-962e84b, .elementor-element-fc5f4d3, .elementor-element-d7c0a02,
      .elementor-element-ff07e43, .elementor-element-67802b9, .elementor-element-83bb8a3,
      .elementor-element-7210971) > .elementor-widget-container { padding-left: 12px !important; padding-right: 12px !important; }
  /* Politica integrada: el parrafo de entrada iba en una columna angosta descentrada */
  .elementor-element-6c65b6d > .elementor-widget-container { padding-left: 22px !important; padding-right: 22px !important; margin-left: 0 !important; margin-right: 0 !important; }
}

/* 11. Titulos demasiado grandes para el ancho del telefono */
@media (max-width: 767px) {
  .elementor-element-cc1decd, .elementor-element-d517bea, .elementor-element-7c8debe,
  .elementor-element-cc1decd *, .elementor-element-d517bea *, .elementor-element-7c8debe * { font-size: 34px !important; line-height: 1.15 !important; }
  /* Titulo manuscrito del banner: "Responsibility" (EN) se cortaba por la derecha */
  .elementor-element-61856e7, .elementor-element-61856e7 * { font-size: 22vw !important; }
  .elementor-element-d8ce0ef, .elementor-element-ba23a0f, .elementor-element-6de5f94, .elementor-element-eb96f27,
  .elementor-element-d8ce0ef *, .elementor-element-ba23a0f *, .elementor-element-6de5f94 *, .elementor-element-eb96f27 * { font-size: 28px !important; line-height: 1.15 !important; }
}

/* 12. Inicio: video centrado (tenia mas margen a la izquierda que a la derecha) y
       contadores con el titulo centrado bajo la cifra */
@media (max-width: 767px) {
  .elementor-element-e7f0c83 { --padding-left: 7vw !important; --padding-right: 7vw !important; }
  .elementor-element-71f3570 .elementor-counter-title { text-align: center !important; justify-content: center !important; }
  /* Contacto: titulo, saludo y formulario con el mismo margen lateral */
  .elementor-element-3a24085, .elementor-element-2eff340 { --padding-left: 20px !important; --padding-right: 20px !important; }
  /* Certificaciones: las hojas del bloque siguiente montaban sobre la ultima fila de logos */
  .elementor-element-1bedd37 { --padding-bottom: 40px !important; }
}

/* 13. Pie de pagina (ES 230 / EN 795): logo y boton "Quejas y Reclamos" centrados como el resto */
@media (max-width: 767px) {
  .elementor-location-footer .elementor-widget-image { text-align: center !important; }
  .elementor-location-footer .elementor-widget-image img { margin: 0 auto; }
  .elementor-location-footer .elementor-widget-button .elementor-button-wrapper { text-align: center !important; justify-content: center !important; display: flex; }
}

/* 14b. Contacto: sin el margen negativo del banner, "contacto" quedaba pegado a la curva blanca
        del bloque siguiente; ese bloque baja un poco en movil */
@media (max-width: 767px) {
  .elementor-element-4b8cd9b { --margin-top: 16px !important; margin-top: 16px !important; }
  /* En la pagina en espanol (525) el titulo va mas abajo que en ingles: se sube */
  .elementor-525 .elementor-element-7af7f7f { position: relative; top: -45px; }
}

/* 14. Nosotros: titulo "Mision" alineado a la izquierda como su texto; las flechas del carrusel
       de certificaciones tapaban el titulo (en el telefono se desliza con el dedo) */
@media (max-width: 767px) {
  .elementor-element-36d2e98, .elementor-element-36d2e98 * { text-align: left !important; }
  .elementor-element-174f317 .elementor-swiper-button { display: none !important; }
}

/* 15. Politica integrada: cada etiqueta usa una imagen (icono + pildora blanca) escalada al ancho
       del texto; en movil el icono tapaba las primeras letras. Aqui la pildora se dibuja con CSS
       y el icono se recorta de la misma imagen a un tamano fijo. */
@media (max-width: 767px) {
  :is(.elementor-element-91e892f, .elementor-element-b7441ad, .elementor-element-38fec99,
      .elementor-element-81983ea, .elementor-element-67da72e) { --align-self: flex-start !important; font-size: 13px !important; line-height: 1.25 !important; margin-top: 8px !important; }
  :is(.elementor-element-91e892f, .elementor-element-b7441ad, .elementor-element-38fec99,
      .elementor-element-81983ea, .elementor-element-67da72e) > .elementor-widget-container {
    background: #fff !important; border-radius: 18px; padding: 8px 16px !important; margin-left: 52px !important; position: relative; min-height: 34px;
  }
  :is(.elementor-element-91e892f, .elementor-element-b7441ad, .elementor-element-38fec99,
      .elementor-element-81983ea, .elementor-element-67da72e) > .elementor-widget-container::before {
    content: ""; position: absolute; left: -54px; bottom: -2px; width: 50px; height: 54px; background-repeat: no-repeat; background-position: left bottom; background-size: auto 54px;
  }
  .elementor-element-91e892f > .elementor-widget-container::before { background-image: url("/wp-content/uploads/2025/06/IMG-09.png"); }
  .elementor-element-b7441ad > .elementor-widget-container::before { background-image: url("/wp-content/uploads/2025/06/IMG-08.png"); }
  .elementor-element-38fec99 > .elementor-widget-container::before { background-image: url("/wp-content/uploads/2025/06/IMG-07.png"); }
  .elementor-element-81983ea > .elementor-widget-container::before { background-image: url("/wp-content/uploads/2025/06/IMG-06.png"); }
  .elementor-element-67da72e > .elementor-widget-container::before { background-image: url("/wp-content/uploads/2025/06/IMG-05-1.png"); }
  :is(.elementor-element-91e892f, .elementor-element-b7441ad, .elementor-element-38fec99,
      .elementor-element-81983ea, .elementor-element-67da72e) p { margin: 0 !important; }
  /* Hoja decorativa que caia encima del parrafo "Enfoque basado en riesgos" */
  .elementor-element-fd4f921 { display: none !important; }
}

/* 16. Nosotros: Mision y Vision van sobre fotos claras (platanos); en movil el texto se leia mal.
       Se agrega un velo oscuro detras del texto. */
@media (max-width: 767px) {
  .elementor-element-9fec4d0, .elementor-element-571fbe3 { background-color: rgba(0, 0, 0, .45) !important; border-radius: 14px; }
}