/* Level UP · Mobile-first QA V19
   Objetivo: lectura B2B clara, recortes fotográficos intencionales y controles cómodos
   en 360 / 390 / 430 / 768 px sin cambiar la dirección visual de escritorio. */

html,body{max-width:100%;overflow-x:clip}
img,video,svg,canvas{max-width:100%}
button,a,input,select,textarea{touch-action:manipulation}
.nav-links,.hero-grid,.org-hero-grid,.exp-hero-grid,.about-grid,.story-grid,.case-index-grid-v15,
.contexts-grid-v15,.military-proof-grid-v15,.method-contexts-grid-v15,.edu-proof-grid-v14,
.results-shell-v14,.gallery-grid-v14,.measure-grid,.format-grid,.evidence-live-grid{min-width:0}

/* La acción comercial sigue disponible aun cuando el CTA del header se oculta. */
.mobile-nav-hablemos{display:none!important}

@media (max-width:980px){
  :root{--mobile-gutter:22px}
  html{scroll-padding-top:78px}
  .wrap{width:min(calc(100% - (var(--mobile-gutter) * 2)),var(--max))!important}
  .nav{padding-top:env(safe-area-inset-top);min-height:72px!important}
  .nav-inner{min-height:72px!important;gap:16px!important}
  .nav-links{max-height:calc(100dvh - 72px - env(safe-area-inset-top));overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:max(18px,env(safe-area-inset-bottom))!important}
  .mobile-nav-hablemos{display:flex!important;background:var(--green,#82C341);color:#102000!important;border-radius:999px;margin-top:10px;padding:13px 16px!important;justify-content:center;font-weight:850!important;opacity:1!important}
  body.nav-lock{overflow:hidden;touch-action:none}

  .display{font-size:clamp(48px,8.6vw,72px)!important;line-height:.94!important;letter-spacing:-.055em!important}
  .h2{font-size:clamp(38px,6.6vw,54px)!important;line-height:1!important;letter-spacing:-.045em!important}
  .h3{font-size:clamp(28px,4.7vw,38px)!important;line-height:1.04!important}
  .lead{font-size:clamp(18px,2.7vw,21px)!important;line-height:1.48!important}
  .source{white-space:normal!important;overflow-wrap:anywhere;max-width:100%}
  .btn{min-height:46px;padding:13px 18px}

  /* Hero images: tablet uses a stable ratio instead of viewport-height crops. */
  .hero-media,.org-hero-media,.exp-hero-media,.about-media{height:auto!important;min-height:0!important;aspect-ratio:16/10}
  .hero-media img,.org-hero-media img,.exp-hero-media img,.about-media img{position:absolute!important;inset:0;width:100%;height:100%!important;object-fit:cover}
  .case-hero-img,.pm15-hero-img{height:auto!important;min-height:0!important;aspect-ratio:16/9}
  .case-hero-img img,.pm15-hero-img img{width:100%;height:100%!important;object-fit:cover}

  /* Sticky desktop rails dejan de ser sticky en tablet. */
  .caps-intro,.reading-rail .rail-sticky,.story-side,.split-v15 .side{position:static!important;top:auto!important}

  /* Evitar tarjetas demasiado altas cuando ya están apiladas. */
  .method-card,.org-method-step,.measurement-grid article,.case-mini-v15,.context-v15,.method-context-v15,
  .person-card,.mstep,.science-card,.translation-card,.status-card,.own-proof-card{min-height:0!important}

  /* Barras y tablas de datos: permitir wrap y evitar columnas rígidas. */
  .data-row,.archive-volume-row,.edu-bar-row,.edu-proof-bar-v14,.bar-v13,.survey-row-v15{min-width:0}
  .data-row>* ,.archive-volume-row>* ,.edu-bar-row>* ,.edu-proof-bar-v14>* ,.bar-v13>* ,.survey-row-v15>*{min-width:0}

  .photo-ribbon-v9 figure,.photo-ribbon figure{min-height:0!important;aspect-ratio:4/3}
  .photo-ribbon-v9 img,.photo-ribbon img{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover}

  /* Imágenes de cards: ratio estable para no cortar cabezas según ancho. */
  .case-mini-v15.visual img,.military-proof-card-v15 img,.year-lite img,.year-card img{height:auto!important;aspect-ratio:4/3;object-fit:cover}
}

@media (max-width:640px){
  :root{--mobile-gutter:16px}
  body{font-size:16px}
  .nav{min-height:66px!important}
  .nav-inner{min-height:66px!important}
  .brand{font-size:21px!important}
  .hamb{min-width:48px;min-height:44px;padding:10px 4px!important}
  .nav-links a{min-height:46px;display:flex;align-items:center}

  .display{font-size:clamp(44px,13vw,54px)!important;line-height:.95!important}
  .h2{font-size:clamp(35px,10.5vw,44px)!important}
  .h3{font-size:clamp(27px,8vw,34px)!important}
  .lead{font-size:18px!important}
  .eyebrow{font-size:10.5px!important;line-height:1.4;letter-spacing:.13em!important}

  /* Ritmo móvil: conservar peso sin 80–100 px entre cada bloque. */
  .context,.capabilities,.method,.evidence,.history,.archive,.org-caps,.different,.org-method,.measure,
  .evidence-live,.measurement-b2b,.moments,.people,.experience,.living,.method-intro,.science,.translation,
  .evaluation,.case,.case-index-v15,.own-proof,.archive-status,.beliefs,.history-about,.facilitators,.groupup,
  .story,.case-section,.case-method-v14,.voices-v14,.contexts-v15,.military-proof-v15,.method-contexts-v15,
  .edu-proof-v14{padding-top:68px!important;padding-bottom:68px!important}
  .principle,.education,.formats,.cta,.org-cta,.visual-pause{padding-top:72px!important;padding-bottom:72px!important}

  .hero,.org-hero,.about-hero,.exp-hero{padding-top:28px!important;padding-bottom:54px!important}
  .talk-hero{padding-top:48px!important;padding-bottom:38px!important}
  .case-hero{padding-top:34px!important}
  .case-top{padding-bottom:38px!important}

  /* Heroes móviles: más imagen, menos recorte extremo. */
  .hero-media,.org-hero-media,.exp-hero-media,.about-media{aspect-ratio:4/5;border-radius:20px!important}
  .hero-visual{min-height:0!important;height:auto!important;aspect-ratio:4/5;padding:24px!important;border-radius:22px!important}
  .case-hero-img,.pm15-hero-img{aspect-ratio:4/3!important}
  .case-title{font-size:clamp(46px,14vw,58px)!important;line-height:.93!important;letter-spacing:-.06em!important;margin-top:14px!important}
  .case-deck{font-size:20px!important;line-height:1.25!important}
  .case-org{font-size:12px!important;line-height:1.55!important}

  /* CTA: no botones microscópicos ni pares comprimidos. */
  .hero-actions,.cta-actions,.form-actions{gap:10px!important}
  .hero-actions .btn,.cta-actions .btn{width:100%;justify-content:center;text-align:center}
  .form-actions .btn{min-height:48px}

  /* Métricas / datos */
  .stat .num{font-size:82px!important}
  .signal-number{font-size:108px!important}
  .proof-num,.leadership-number{font-size:92px!important}
  .one-four{font-size:76px!important}
  .case-stats,.feature-stats,.edu-proof-kpis-v14,.edu-kpis{grid-template-columns:1fr 1fr!important}
  .case-stats>*:last-child:nth-child(odd),.feature-stats>*:last-child:nth-child(odd){grid-column:1/-1}
  .insight-grid,.own-proof-grid,.archive-status .status-cards,.case-proof-meter{grid-template-columns:1fr!important}

  .data-row{grid-template-columns:minmax(78px,1fr) minmax(90px,1.5fr) 36px!important;gap:9px!important}
  .archive-volume-row{grid-template-columns:minmax(96px,1fr) minmax(88px,1.45fr) 30px!important;gap:8px!important}
  .edu-bar-row,.edu-proof-bar-v14,.bar-v13{grid-template-columns:minmax(92px,1fr) minmax(92px,1.25fr) 38px!important;gap:8px!important}
  .survey-row-v15{grid-template-columns:minmax(0,1fr) 42px!important;gap:8px!important}
  .survey-row-v15 span{grid-column:1/-1}

  /* Tarjetas y procesos */
  .cap{grid-template-columns:34px minmax(0,1fr)!important;gap:12px!important}
  .cap h3{font-size:26px!important}
  .situation-item{font-size:24px!important;line-height:1.1}
  .different-item,.format-item,.measure-item,.org-method-step,.measurement-grid article,.behavior-cell,.insight-card,
  .case-mini-v15,.context-v15,.method-context-v15,.status-card,.own-proof-card{padding:20px!important}
  .process-map{display:block!important;border-radius:18px!important}
  .process-node{min-height:0!important;padding:20px!important}
  .process-node+.process-node{border-left:0!important;border-top:1px solid var(--line,#dfdfd9)!important}

  /* Photo ribbons mobile: una historia por imagen, con ratio consistente. */
  .photo-ribbon-v9,.photo-ribbon-grid,.photo-ribbon-grid-v9{grid-template-columns:1fr!important;min-height:0!important;padding:7px!important;gap:7px!important}
  .photo-ribbon-v9 figure,.photo-ribbon figure{aspect-ratio:4/3!important;border-radius:14px!important}
  .photo-pair{grid-template-columns:1fr!important;gap:8px!important}
  .photo-pair figure{min-height:0!important;aspect-ratio:4/3}

  /* Caso Michin y casos editoriales: secuencia más corta en pantalla. */
  .gallery-grid-v14 figure,.seq-grid img,.seq-grid figure:nth-child(3) img,.pm15-gallery-v15 figure{height:auto!important;min-height:0!important;aspect-ratio:4/3!important}
  .gallery-grid-v14 figure img,.seq-grid figure img,.pm15-gallery-v15 figure img{width:100%;height:100%!important;object-fit:cover}
  .facts{grid-template-columns:1fr 1fr!important}
  .e-row{grid-template-columns:1fr!important;gap:6px!important}
  .letter-art{min-height:330px!important}

  /* Formularios iOS: 16px evita zoom automático. */
  input,select,textarea{font-size:16px!important;min-height:48px}
  textarea{min-height:150px}
  .form-shell,.side-card{padding:20px!important}
  .opt{min-height:54px!important;padding:14px!important;text-align:left}
  label.small{align-items:flex-start!important;line-height:1.45}
  label.small input[type="checkbox"]{min-width:22px;width:22px;min-height:22px;height:22px;margin-top:1px}

  /* Timeline conserva scroll horizontal, pero con pista táctil y sin scrollbar invasivo. */
  .timeline,.timeline-lite{scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}
  .timeline::-webkit-scrollbar,.timeline-lite::-webkit-scrollbar{display:none}

  /* Footer y safe-area */
  footer{padding-bottom:max(28px,env(safe-area-inset-bottom))!important}
  .foot-col a{min-height:40px;display:flex!important;align-items:center}

  /* Focos fotográficos por activo: proteger acción, cabezas y contexto. */
  img[src$="org_training.webp"]{object-position:54% 42%!important}
  img[src$="org_workshop.webp"]{object-position:50% 40%!important}
  img[src$="lego_room_v9.webp"]{object-position:52% 42%!important}
  img[src$="lego_people_v9.webp"]{object-position:50% 44%!important}
  img[src$="lego_action_v9.webp"]{object-position:48% 44%!important}
  img[src$="acoach_v9.webp"],img[src$="acoach_group.webp"]{object-position:50% 42%!important}
  img[src$="colegio_wide.webp"]{object-position:50% 42%!important}
  img[src$="colegio_vertical.webp"],img[src$="colegio_archive.webp"]{object-position:50% 38%!important}
  img[src$="icbf_hero.webp"]{object-position:50% 52%!important}
  img[src$="icbf_activity_safe.webp"],img[src$="icbf_detail_safe.webp"]{object-position:center!important}
  img[src$="pm15_group.webp"]{object-position:50% 40%!important}
  img[src$="pm15_activity.webp"]{object-position:50% 42%!important}
  img[src$="resolucion_img_7754.webp"],img[src$="resolucion_img_7664.webp"]{object-position:50% 40%!important}
  img[src$="resolucion_img_7624.webp"],img[src$="resolucion_img_7671.webp"]{object-position:50% 42%!important}
  img[src$="resolucion_img_7633.webp"]{object-position:center!important}
}

@media (max-width:380px){
  :root{--mobile-gutter:14px}
  .display{font-size:44px!important}
  .h2{font-size:35px!important}
  .h3{font-size:27px!important}
  .case-title{font-size:46px!important}
  .stat .num{font-size:76px!important}
  .signal-number{font-size:96px!important}
  .proof-num,.leadership-number{font-size:84px!important}
  .case-stats,.feature-stats,.edu-proof-kpis-v14,.edu-kpis{grid-template-columns:1fr!important}
  .case-stats>*:last-child,.feature-stats>*:last-child{grid-column:auto!important}
  .measure-chips{grid-template-columns:1fr!important}
  .micro-route{gap:6px!important}.micro-route span{font-size:10px;padding:7px 8px!important}
}

@media (prefers-reduced-motion:reduce){
  .photo-ribbon-v9 img{transform:none!important}
}