/* =========================================================
   INTERNAS (Experiencia + Organización)
   FIX MÓVIL: mismo eje editorial que Home
   ========================================================= */

@media (max-width: 768px){

  /* 1) Contenedores de texto: centrados y con el mismo padding */
  .experience-hero__inner,
  .experience-hero-inner,
  .experience-text-inner,
  .organizacion-hero-inner,
  .principios__inner,
  .organizacion_manifesto,
  .organizacion_epilogue{
    width: 100% !important;
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* 2) Contenedores de grids (imágenes): mismo eje editorial */
  .experience-grid,
  .organizacion-grid{
    width: 100% !important;
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;

    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* 3) Evitar que algún padding del “hero” empuje el layout */
  .experience-hero,
  .organizacion-hero{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 4) Imágenes: bloque, centradas y sin empujar */
  .experience-item,
  .world-item{
    margin: 0 !important;
  }

  .experience-item img,
  .organizacion-grid img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 18px !important;
  }

  /* 5) Proporciones editoriales (como Home) */
  .experience-item--hero img,
  .org-hero img{
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
  }

  .experience-item img,
  .organizacion-grid img{
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
  }
}
<link rel="stylesheet" href="internals-mobile-fix.css?v=1">
/* =========================================================
   INTERNALS MOBILE FIX (Experiencia + Organización)
   - Centrado y márgenes iguales a Home
   - Elimina “bloques sobrantes” bajo imágenes
   - No toca escritorio
========================================================= */

@media (max-width: 768px){

  /* 1) Header: mismo “aire” que Home (sin desplazar) */
  .topbar-inner{
    padding: 14px 16px !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
  }

  /* 2) Contenedor editorial maestro (mismo eje que Home) */
  .experience-hero__inner,
  .experience-text-inner,
  .experience-cta__inner,
  .experience-grid,
  .organizacion-hero-inner,
  .principios__inner,
  .organizacion-grid,
  .organizacion_manifesto,
  .organizacion_epilogue,
  .organizacion-cta{
    width: 100% !important;
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* 3) Asegura que “las secciones” no añaden padding extra raro */
  .experience-hero,
  .experience-text,
  .experience-cta,
  .organizacion-hero,
  .principios{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* =====================================================
     FIX BLOQUE SOBRANTE (la “zona gris” bajo imágenes)
     ===================================================== */

  /* Las figuras no pueden mantener alturas antiguas en móvil */
  .experience-item,
  .experience-item--hero,
  .organizacion-grid .world-item{
    height: auto !important;
    min-height: 0 !important;
    background: transparent !important;
  }

  /* La imagen debe “definir” la tarjeta (sin huecos) */
  .experience-item img,
  .organizacion-grid .world-item img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 18px !important;
  }

  /* Proporciones editoriales consistentes (como tu Home) */
  .experience-item--hero img,
  .organizacion-grid .org-hero img{
    aspect-ratio: 16 / 9 !important;
  }

  .experience-item img{
    aspect-ratio: 4 / 3 !important;
  }

  /* 4) CTA links: nunca azul/púrpura en móvil */
  .experience-cta a,
  .experience-cta a:visited,
  .organizacion-cta a,
  .organizacion-cta a:visited{
    color: rgba(0,0,0,.72) !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(0,0,0,.25) !important;
    padding-bottom: 2px !important;
  }

  .experience-cta a:hover,
  .organizacion-cta a:hover{
    color: rgba(0,0,0,.88) !important;
    border-bottom-color: rgba(0,0,0,.45) !important;
  }
}
/* =========================================================
   INTERNALS MOBILE FIX — Perfectos Prometidos
   Objetivo:
   - Mismo eje editorial que la Home (centrado + márgenes)
   - Eliminar “huecos grises” bajo imágenes (figures)
   - CTA sin azul navegador
   SOLO móvil
   ========================================================= */

@media (max-width: 820px){

  /* 1) EJE EDITORIAL (igual que Home): columna centrada */
  .experience-hero__inner,
  .experience-hero-inner,
  .experience-text-inner,
  .experience-cta__inner,
  .organizacion-hero-inner,
  .principios__inner,
  .organizacion_manifesto,
  .organizacion_epilogue,
  .organizacion-grid,
  .organizacion-cta{
    width: min(560px, calc(100% - 32px));
    margin-left: auto;
    margin-right: auto;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }

  /* El “aire” lateral lo damos al SECTION, no a los inner */
  .experience-hero,
  .experience-text,
  .experience-cta,
  .organizacion-hero,
  .principios,
  .organizacion-grid{
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
  }

  /* 2) EXPERIENCIA — eliminar huecos grises bajo imágenes */
  .experience-grid{
    width: min(560px, calc(100% - 32px));
    margin-left: auto;
    margin-right: auto;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* El figure no debe reservar alto fijo en móvil */
  .experience-item,
  .experience-item--hero{
    height: auto !important;
    min-height: 0 !important;
    background: transparent !important; /* quita el gris */
    border-radius: 18px;
    overflow: hidden;
    margin: 0;
  }

  /* La imagen rellena el figure (sin huecos) */
  .experience-item img{
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
  }

  /* Proporciones editoriales coherentes */
  .experience-item{ aspect-ratio: 4 / 3; }
  .experience-item--hero{ aspect-ratio: 16 / 9; }

  /* 3) CTA — evitar azul navegador (Experiencia + otras internas) */
  .experience-cta a,
  .experience-cta a:visited,
  .experience-cta a.cta,
  .experience-cta a.cta:visited{
    color: rgba(0,0,0,.72) !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(0,0,0,.25) !important;
    padding-bottom: 2px;
  }

  .experience-cta a:hover{
    color: rgba(0,0,0,.88) !important;
    border-bottom-color: rgba(0,0,0,.45) !important;
  }

}
/* =========================================================
   ORGANIZACION (MOVIL) — eliminar bloques blancos bajo imagen
   ========================================================= */
@media (max-width: 768px){

  /* La tarjeta no debe tener “papel” blanco debajo */
  .organizacion-grid .world-item{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    line-height: 0 !important; /* evita hueco inferior */
  }

  /* La imagen debe comportarse como bloque y recortar a cover */
  .organizacion-grid .world-item img{
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 18px !important;
  }

  /* Proporciones editoriales */
  .organizacion-grid .org-hero{ aspect-ratio: 16 / 9 !important; }
  .organizacion-grid .org-a,
  .organizacion-grid .org-b,
  .organizacion-grid .org-c,
  .organizacion-grid .org-d,
  .organizacion-grid .org-e,
  .organizacion-grid .org-f{ aspect-ratio: 4 / 3 !important; }
}