/* ============================================================
   Ser y Sentir — arreglo responsive (aditivo, no modifica el tema)

   El grid del tema gox usa 12 columnas FIJAS de 69px (= 960px) y solo
   apila/fluye por debajo de 767.95px. Por eso, entre 768px y ~1023px
   (tablet y móvil en horizontal) el bloque de 960px desbordaba en
   horizontal. Aquí, SOLO en esa franja, hacemos las 12 columnas
   elásticas y el contenedor al 100%: se mantiene el layout de 2
   columnas pero escalado para caber, sin scroll horizontal.

   PC (>=1024px) y móvil en vertical (<=767px) quedan intactos.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1099.98px) {
  .section-content-with-grid-grid-wrapper {
    grid-template-columns: repeat(12, [col-start] minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    /* algunas secciones (p. ej. "sobre mí") llevan un margen negativo de
       diseño que sobresalía ~8px a 1024px; al ir a ancho fluido lo anulamos */
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ============================================================
   Anti-overflow horizontal en MÓVIL (sobre todo iOS / Safari / WebKit)
   ------------------------------------------------------------
   En WebKit, los contenedores flex/grid con min-width:auto NO encogen por
   debajo del ancho de su contenido (imágenes con ancho intrínseco), así que
   texto e imágenes se salían de pantalla en iPhone aunque en Chrome cupieran.
   Cura: permitir que encojan (min-width:0), mantener los medios dentro del
   ancho, y una red de seguridad (overflow-x:clip).
   ============================================================ */
@media (max-width: 767.98px) {
  html, body { overflow-x: clip; max-width: 100%; }

  /* que TODOS los contenedores de layout del tema puedan encoger */
  .section-root, .section-content, .section-inner-width,
  .grid-row-root, .grid-column-root, .module-container-root,
  .grid-module-container-root, .section-content-with-grid-grid-wrapper,
  [class*="grid-module"], [class*="text-container"], [class*="image-wrapper"] {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* la cuadrícula apila en 1 columna que SÍ puede encoger (minmax 0) */
  .section-content-with-grid-grid-wrapper {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }

  /* medios siempre dentro del viewport */
  img, picture, video, canvas, svg, iframe, table {
    max-width: 100% !important;
  }

  /* texto largo (emails, URLs) que rompa en vez de desbordar */
  p, li, span, a, h1, h2, h3, h4, h5, h6, blockquote {
    overflow-wrap: break-word;
  }
}

/* ============================================================
   MÓVIL — títulos a escala + gutter lateral uniforme (iPhone)
   ------------------------------------------------------------
   El tema gox fija los tamaños de cabecera en px (h1:52, h2:36,
   h3:24) y NO los reduce en móvil. En un iPhone (375px) el h1 a
   52px no cabe: las palabras se parten a media palabra y el hero
   queda roto. Aquí escalamos las cabeceras con clamp (fluido de
   320 a 767px) para que respiren y quepan.

   Además, el padding lateral de cada sección lo aporta
   .section-content-with-grid-custom; en unas vale 20px, en otras
   32px y en varias 0px -> el texto queda pegado al borde de la
   pantalla (caso "sobre mí"). Lo unificamos a 20px para que NINGÚN
   bloque toque el borde y la distribución sea consistente.

   SOLO afecta a <=767.98px. PC y tablet (>=768px) quedan intactos.
   ============================================================ */
@media (max-width: 767.98px) {
  .section-root h1 { font-size: clamp(26px, 7.5vw, 36px) !important; line-height: 1.2  !important; }
  .section-root h2 { font-size: clamp(21px, 6vw,   28px) !important; line-height: 1.22 !important; }
  .section-root h3 { font-size: clamp(18px, 4.8vw, 21px) !important; line-height: 1.25 !important; }
  .section-root h4 { font-size: clamp(16px, 4.2vw, 19px) !important; line-height: 1.3  !important; }

  /* nada de guiones partiendo palabras en los títulos (queda fatal);
     si una palabra larguísima no cabe, que rompa sin guion */
  .section-root h1, .section-root h2,
  .section-root h3, .section-root h4 {
    hyphens: none !important;
    -webkit-hyphens: none !important;
    overflow-wrap: break-word !important;
  }

  /* gutter lateral uniforme: el texto nunca pega al borde */
  .section-content-with-grid-custom {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* subtítulo del hero de la home: su columna va sin padding y el texto
     pegaba a ambos bordes. Es el único bloque de texto a sangre del sitio
     (el resto ya tiene gutter), así que lo arreglamos puntualmente por su
     id de módulo en vez de con una regla amplia que sobre-indentaría
     footer y listas. */
  .text-6309b920-49cb-4b97-929f-c4febab4931e {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

}