/* IEFAM — ajustes responsivos sobre el export estático de WordPress/Elementor.
   Se carga al final de cada página para tener prioridad sobre los estilos del tema. */

/* ---------- Global ---------- */
html, body { overflow-x: clip; }
img, video, iframe { max-width: 100%; }
img { height: auto; }

/* Submenús de 2º nivel en "Nuestros Servicios" se salían de la pantalla en laptops:
   se abren hacia la izquierda. */
.uicore-menu > li .sub-menu .sub-menu { left: auto !important; right: 100% !important; }
.uicore-menu .sub-menu .sub-menu a { white-space: normal; }

/* Títulos con line-height en px menor al tamaño de letra se encimaban al partirse en 2 líneas */
.elementor-heading-title { line-height: 1.2 !important; }

/* ---------- Tablet y menor (≤1024px) ---------- */
@media (max-width: 1024px) {
  /* Barra superior: centrada y apilada */
  .uicore-top-bar .elementor-container { flex-direction: column; align-items: center; gap: 4px; text-align: center; }
  .uicore-top-bar .ui-tb-col-1, .uicore-top-bar .ui-tb-col-2 { width: 100%; text-align: center !important; justify-content: center; }
  .uicore-top-bar p { margin: 0; }
  .uicore-top-bar img.alignleft { float: none; display: inline-block; vertical-align: middle; margin: 0 4px 0 0; }

  /* Footer: logo arriba a todo lo ancho, dirección y contacto en dos columnas */
  .uicore-footer-wrapper .elementor-container.three { display: grid !important; grid-template-columns: 1fr 1fr; gap: 24px 32px; }
  .uicore-footer-wrapper .uicore-footer-column { width: auto !important; max-width: none !important; padding: 0 !important; }
  .uicore-footer-wrapper .uicore-footer-column:first-child { grid-column: 1 / -1; }
  .uicore-footer-wrapper .textwidget p { margin-bottom: 8px; }
  .uicore-footer-wrapper .textwidget a { word-break: break-word; }
  .uicore-footer-wrapper img.alignleft { float: none; display: inline-block; vertical-align: middle; margin: 0 8px 0 0; }

  /* Texto largo (correos, URLs) no rompe el layout */
  .elementor-widget-text-editor, .elementor-heading-title, .uicore-footer-wrapper { overflow-wrap: anywhere; }
}

/* ---------- Móvil (≤767px) ---------- */
@media (max-width: 767px) {
  /* Columnas con margen lateral asimétrico (diseño en zigzag de escritorio) quedaban descentradas */
  .elementor-section .elementor-column > .elementor-widget-wrap { margin-left: 0 !important; margin-right: 0 !important; }
  .elementor-section .elementor-container { margin-left: 0 !important; margin-right: 0 !important; }
  .elementor-section.elementor-section-boxed > .elementor-container { padding-left: 16px; padding-right: 16px; }

  /* Imágenes de contenido a todo el ancho de su columna */
  .elementor-widget-image .elementor-widget-container,
  .elementor-widget-image a { display: block; }
  .elementor-widget-image img[width]:not([width="1"]) { width: 100% !important; max-width: 520px; margin-left: auto; margin-right: auto; display: block; object-fit: cover; }
  /* …excepto logos e íconos pequeños */
  .elementor-widget-image img[width="20"], .elementor-widget-image img[width="30"], .elementor-widget-image img[width="40"],
  .elementor-widget-image img[width="50"], .elementor-widget-image img[width="60"], .elementor-widget-image img[width="80"],
  .elementor-widget-image img[width="100"], .elementor-widget-image img[width="150"] { width: auto !important; }

  /* Títulos: tamaño máximo razonable en pantallas angostas */
  h1, .elementor-widget-heading h1.elementor-heading-title { font-size: clamp(26px, 8vw, 36px) !important; }
  h2.elementor-heading-title { font-size: clamp(22px, 7vw, 30px) !important; }

  /* Footer en una sola columna */
  .uicore-footer-wrapper .elementor-container.three { grid-template-columns: 1fr; text-align: left; }

  /* Botón flotante de WhatsApp sin tapar contenido del footer */
  .ht-ctc, .ctc_s_8, #ht-ctc-chat { bottom: 16px !important; right: 16px !important; }

  /* Iframes (mapas, videos) responsivos */
  .elementor-widget-google_maps iframe { height: 300px !important; }
  .elementor-widget-video .elementor-wrapper { width: 100% !important; }

  /* Tablas del blog con scroll horizontal en lugar de desbordar */
  .entry-content table { display: block; overflow-x: auto; }
}

/* ---------- Slider principal (Slider Revolution) en móvil ----------
   Las capas de texto tenían ancho "auto" + nowrap en móvil y se salían de la pantalla. */
@media (max-width: 1024px) {
  rs-module#rev_slider_1_1 rs-layer-wrap,
  rs-module#rev_slider_1_1 rs-loop-wrap,
  rs-module#rev_slider_1_1 rs-mask-wrap { left: 0 !important; width: 100% !important; }
  rs-module#rev_slider_1_1 rs-layer[id^="slider-1-slide"]:not([id$="layer-15"]):not([id$="layer-4"]) {
    white-space: normal !important;
    width: 88vw !important;
    max-width: 88vw !important;
    margin: 0 auto !important;
    left: 0 !important;
    text-align: center !important;
    font-size: 24px !important;
    line-height: 1.25 !important;
    min-height: 0 !important;
    height: auto !important;
  }
}
@media (max-width: 1024px) {
  /* En móvil el texto se acomoda solo: los saltos de línea de escritorio se vuelven espacios */
  rs-module#rev_slider_1_1 rs-layer br { display: none; }
  rs-module#rev_slider_1_1 rs-layer#slider-1-slide-3-layer-1[id] { font-size: 16px !important; letter-spacing: 1px; }
  rs-module#rev_slider_1_1 rs-layer#slider-1-slide-3-layer-2[id] { font-size: 22px !important; }
  rs-module#rev_slider_1_1 rs-layer#slider-1-slide-3-layer-0[id] { font-size: 16px !important; }
  rs-module#rev_slider_1_1 rs-layer#slider-1-slide-3-layer-4[id] { margin: 0 auto !important; left: 0 !important; }
  rs-module#rev_slider_1_1 rs-layer#slider-1-slide-2-layer-1[id] { font-size: 20px !important; }
  rs-module#rev_slider_1_1 rs-layer#slider-1-slide-4-layer-1[id] { font-size: 21px !important; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  rs-module#rev_slider_1_1 rs-layer[id^="slider-1-slide"]:not([id$="layer-15"]):not([id$="layer-4"]) { font-size: 34px !important; width: 80vw !important; max-width: 80vw !important; }
  rs-module#rev_slider_1_1 rs-layer#slider-1-slide-3-layer-1[id] { font-size: 22px !important; }
  rs-module#rev_slider_1_1 rs-layer#slider-1-slide-3-layer-2[id] { font-size: 36px !important; }
  rs-module#rev_slider_1_1 rs-layer#slider-1-slide-3-layer-0[id] { font-size: 22px !important; }
  rs-module#rev_slider_1_1 rs-layer#slider-1-slide-2-layer-1[id],
  rs-module#rev_slider_1_1 rs-layer#slider-1-slide-4-layer-1[id] { font-size: 30px !important; }
}
@media (min-width: 900px) and (max-width: 1024px) {
  /* Slide 1: la foto de la familia va a la derecha; el texto se queda a la izquierda */
  rs-module#rev_slider_1_1 rs-layer#slider-1-slide-1-layer-1[id] { width: 52vw !important; max-width: 52vw !important; margin-left: 4vw !important; text-align: left !important; font-size: 30px !important; }
}

/* ---------- Secciones en zigzag (texto | imagen) ----------
   En móvil, la imagen siempre arriba de su texto. */
@media (max-width: 767px) {
  .elementor-top-section > .elementor-container:has(> .elementor-column:nth-child(2):last-child .elementor-widget-image):not(:has(> .elementor-column:first-child .elementor-widget-image)) {
    flex-direction: column-reverse;
  }
  .elementor-widget-button + .elementor-widget, .elementor-widget-button { margin-bottom: 12px; }
}