/* ==========================================================
   El Ranchito – Ajustes responsivos globales (7K Digital)
   Se carga al final de cada página para tener prioridad.
   ========================================================== */

/* --- Base: nada se sale de la pantalla --- */
/* "clip" (no "hidden") para no convertir el body en contenedor de scroll:
   con "hidden" las animaciones de Divi al hacer scroll dejan de dispararse */
html, body { max-width: 100%; overflow-x: clip; }
img, video, iframe, embed, object { max-width: 100%; }
img { height: auto; }
iframe { border: 0; }
* { -webkit-tap-highlight-color: transparent; }
body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Textos largos (direcciones, correos, URLs) parten línea en vez de desbordar */
.et_pb_text_inner, .et_pb_blurb_description, .et_pb_module_header,
h1, h2, h3, h4, h5, h6, p, li, a { overflow-wrap: break-word; word-wrap: break-word; }

/* --- Tablet (768–980px): las columnas ya van apiladas como en móvil,
       así que limitamos el ancho del contenido para que no se vea estirado --- */
@media only screen and (min-width: 768px) and (max-width: 980px) {
  #page-container .et_pb_row,
  #page-container .et_pb_row.et_pb_equal_columns {
    width: 80% !important;
    max-width: 560px !important;
  }
  /* Header y footer conservan su ancho natural */
  #main-header .container, .et-l--header .et_pb_row, .et-l--footer .et_pb_row {
    max-width: 90% !important;
  }
  /* Iframes (mapa, formularios) a todo el ancho de su columna */
  .et_pb_code_inner iframe { width: 100% !important; }
  /* Iconos de redes centrados */
  .et_pb_social_media_follow { display: flex !important; flex-wrap: wrap; justify-content: center; }
}

/* --- Móvil (≤767px) --- */
@media only screen and (max-width: 767px) {
  /* Mapas y formularios embebidos: altura cómoda y ancho completo */
  .et_pb_code_inner iframe { width: 100% !important; min-height: 320px; }

  /* Botones: área táctil mínima de 44px y sin desbordarse */
  .et_pb_button {
    max-width: 100%;
    white-space: normal;
    min-height: 44px;
    line-height: 1.3 !important;
  }

  /* Iconos de redes: que siempre quepan en la fila */
  .et_pb_social_media_follow {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100% !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .et_pb_social_media_follow li { margin-left: 4px; margin-right: 4px; }

  /* Tabla, pre y código no rompen el layout */
  table { display: block; max-width: 100%; overflow-x: auto; }
  pre { white-space: pre-wrap; }
}

/* --- Teléfonos chicos (≤400px, ej. iPhone SE / Galaxy mini) --- */
@media only screen and (max-width: 400px) {
  #page-container .et_pb_row { width: 88% !important; }
}

/* --- Teléfonos muy chicos (≤340px) --- */
@media only screen and (max-width: 340px) {
  #page-container .et_pb_row { width: 92% !important; }
  .et_pb_button { font-size: 15px !important; padding-left: 1em !important; padding-right: 1em !important; }
}

/* --- Pantallas horizontales bajas (celular acostado) --- */
@media only screen and (max-height: 500px) and (orientation: landscape) {
  .sliding-tab .tab-content { max-height: 100vh; overflow-y: auto; }
}