/* ==========================================================================
   29-sep-2026 · AUDITORÍA UX · CELULAR PRIMERO
   La mayoría entra por celular y las páginas pasaban de 20 pantallas de dedo.
   Lo que en computador es una rejilla, en celular pasa a ser una FILA que se
   desliza con el dedo (la siguiente tarjeta se asoma para que se note que hay
   más) con puntitos debajo (public/js/caribe-movil.js). En computador nada cambia.
   ========================================================================== */

/* ── Sin video: número de color en vez de la caja vacía «Video en preparación» ── */
.cb-clip__num{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;color:var(--cb-tinta,#003B5C);margin-bottom:4px}

/* ── Marketing de la portada sin video: el texto y los planes a lo ancho ── */
.cb-mkt--solo .cb-in{grid-template-columns:minmax(0,760px)!important;justify-content:center}

/* ── Carruseles en celular ── */
@media (max-width:760px){
  .cb-herr .cb-rejilla4,
  .cb-testi__rej,
  .cb-planesp,
  .cb-red__pasos,
  .cb-dolores__rej,
  .cb-rejilla3--gal,
  .cb-psec .cb-rejilla3:not(.cb-rejilla3--gal),
  .cb-subv .cb-rejilla3:not(.cb-rejilla3--gal){
    display:flex!important;grid-template-columns:none!important;max-width:none!important;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    gap:14px!important;margin-left:calc(-1 * var(--cb-lado,16px))!important;margin-right:calc(-1 * var(--cb-lado,16px))!important;
    padding:6px var(--cb-lado,16px) 14px!important;scroll-padding:0 var(--cb-lado,16px)
  }
  .cb-herr .cb-rejilla4::-webkit-scrollbar,.cb-testi__rej::-webkit-scrollbar,.cb-planesp::-webkit-scrollbar,.cb-red__pasos::-webkit-scrollbar,
  .cb-dolores__rej::-webkit-scrollbar,.cb-rejilla3--gal::-webkit-scrollbar,.cb-psec .cb-rejilla3::-webkit-scrollbar,.cb-subv .cb-rejilla3::-webkit-scrollbar{display:none}
  .cb-herr .cb-rejilla4>*,.cb-testi__rej>*,.cb-planesp>*,.cb-red__pasos>*,.cb-dolores__rej>*,.cb-rejilla3--gal>*,
  .cb-psec .cb-rejilla3>*,.cb-subv .cb-rejilla3>*{flex:0 0 84%;min-width:0;scroll-snap-align:center}
  .cb-red__pasos>*,.cb-dolores__rej>*{flex-basis:78%}

  /* puntitos (los pone caribe-movil.js) */
  .cb-puntos{display:flex;justify-content:center;align-items:center;gap:7px;margin:4px 0 0}
  .cb-puntos button{appearance:none;border:0;padding:0;width:8px;height:8px;border-radius:999px;background:rgba(0,59,92,.22);cursor:pointer;transition:width .25s,background .25s}
  .cb-puntos button[aria-current="true"]{width:22px;background:#0077B6}
  .cb-red .cb-puntos button{background:rgba(255,255,255,.35)}
  .cb-red .cb-puntos button[aria-current="true"]{background:#fff}
  .cb-desliza{display:block;text-align:center;font-size:12.5px;font-weight:600;color:var(--cb-gris,#5B7385);margin-top:6px}
  .cb-red .cb-desliza{color:rgba(255,255,255,.75)}

  /* la cinta de arriba se lee completa (dos renglones cortos si hace falta) */
  .vida-cinta{height:auto;min-height:38px;padding-top:6px;padding-bottom:6px}
  .vida-msg{white-space:normal;line-height:1.3}

  /* el dibujo de siluetas de «Cómo trabajamos» ocupa media pantalla y no informa */
  .cb-como__foto{display:none}

  /* el globo de Ami más pequeño: no tapa lo que la gente lee */
  #gumBubble{max-width:170px;font-size:12px!important;line-height:1.3;padding:7px 10px!important}
}
@media (prefers-reduced-motion:reduce){.cb-puntos button{transition:none}}

/* ==========================================================================
   2-oct-2026 · REVISIÓN INTEGRAL · dos arreglos de celular
   ========================================================================== */
@media (max-width:760px){
  /* 1 · «Tu equipo humano de apoyo» (ficha HSEQ) se salía 21 px a la derecha y cortaba el texto:
        la columna `1fr` crece con su contenido; `minmax(0,1fr)` la obliga a caber. */
  .cb-apoyo__caja{grid-template-columns:minmax(0,1fr)}
  .cb-apoyo__datos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cb-apoyo__datos strong,.cb-apoyo__res strong{font-size:18px;line-height:1.2}
  .cb-apoyo__datos > div,.cb-apoyo__res > div{padding:16px 13px}
  /* 2 · Ami flotante tapaba la flecha del botón principal en la primera pantalla: un poco más pequeña. */
  #gum{transform:scale(.8);transform-origin:100% 100%}
  /* …y su globo se compensa para que la letra siga en 12 px (15 × .8) */
  #gum #gumBubble{font-size:15px!important;padding:9px 12px!important;max-width:212px}
}
@media (max-width:379px){
  .cb-apoyo__datos{grid-template-columns:minmax(0,1fr)}
}

/* 4-oct-2026 · AUDITORÍA: en celular Ami y su saludo tapaban el botón principal de la primera
   pantalla (portada, fichas y planes). Arriba del todo se guarda; aparece en cuanto la persona
   empieza a bajar. La clase la pone caribe-movil.js: sin JavaScript, Ami se ve como siempre. */
@media (max-width:760px){
  #gum{transition:opacity .25s ease,visibility .25s}
  html.cb-arriba #gum{opacity:0;visibility:hidden;pointer-events:none}
}

/* 10-oct-2026 (p112) · revisión total en celular: letra mínima 12 px donde medía 9-11,5 px, y los puntos de los
   carruseles con zona de toque más grande (el ::after invisible) SIN cambiar cómo se ven. */
@media (max-width:720px){
  .vida-txt small,.cb-pant__aviso,.cb-cumple__tit,.cb-tcli__prod,.cb-planp__sello,.cb-vit__sello,.cb-periodos small,.cb-emp-tabla th{font-size:12px!important}
  .cb-puntos{gap:12px}
  .cb-puntos button,.cb-vit__puntos button{position:relative}
  .cb-puntos button::after,.cb-vit__puntos button::after{content:"";position:absolute;left:-6px;right:-6px;top:-10px;bottom:-10px}
}