/* ============================================================
   Vericat Instituto de Formación — estilos compartidos
   Se carga después del <style> de cada página, por lo que sus
   reglas ganan a las embebidas con la misma especificidad.
   Contiene: botón flotante de WhatsApp + correcciones responsive
   comunes a todo el sitio (ES + EN).
   ============================================================ */

:root{
  --v-black:#111111;
  --v-ease:cubic-bezier(.16,1,.3,1);
}

/* ---- Botón flotante de WhatsApp ---- */
a.wa{
  position:fixed;
  right:22px;
  bottom:calc(22px + env(safe-area-inset-bottom,0px));
  z-index:80;
  width:58px;
  height:58px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--v-black);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 18px 40px -14px rgba(0,0,0,.55);
  font-size:0;
  transition:background .5s var(--v-ease),color .5s var(--v-ease),transform .5s var(--v-ease),border-color .5s var(--v-ease),bottom .5s var(--v-ease);
}
/* Cuando la barra fija "Inscríbete" está visible, los flotantes suben para no taparla */
body:has(.applybar.show) a.wa{bottom:calc(102px + env(safe-area-inset-bottom,0px))}
body:has(.applybar.show) .vc-fab{bottom:calc(102px + env(safe-area-inset-bottom,0px));transition:bottom .5s var(--v-ease)}
a.wa svg{width:26px;height:26px;display:block;flex:none}
a.wa:hover{background:#fff;color:var(--v-black);border-color:var(--v-black);transform:scale(1.06)}
a.wa:focus-visible{outline:2px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px rgba(17,17,17,.35)}
/* etiqueta que aparece a la izquierda al pasar el ratón (solo dispositivos con puntero) */
a.wa::after{
  content:attr(data-label);
  position:absolute;
  right:calc(100% + 14px);
  top:50%;
  transform:translate(8px,-50%);
  background:var(--v-black);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  white-space:nowrap;
  padding:10px 16px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .45s var(--v-ease),transform .45s var(--v-ease),visibility 0s .45s;
}
@media(hover:hover) and (pointer:fine){
  a.wa:hover::after,a.wa:focus-visible::after{
    opacity:1;visibility:visible;transform:translate(0,-50%);transition:opacity .45s var(--v-ease),transform .45s var(--v-ease);
  }
}
/* entrada discreta al cargar */
@keyframes wa-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
a.wa{animation:wa-in .8s var(--v-ease) .5s backwards}
@media(prefers-reduced-motion:reduce){
  a.wa{animation:none}
  a.wa:hover{transform:none}
}

/* ---- Correcciones responsive comunes ---- */
@media(max-width:1024px){
  /* El pie de 4 columnas desbordaba en las páginas interiores */
  .foot-grid{grid-template-columns:1fr 1fr;gap:44px}
}
@media(max-width:600px){
  .foot-grid{grid-template-columns:1fr;gap:38px}
  .foot-meta{gap:12px}
  .foot-bottom{flex-direction:column;gap:12px}
  /* Las tarjetas de testimonios (400px) no cabían en pantallas de 375px */
  .testi-track .tcard{flex-basis:min(400px,calc(100vw - 60px))}
  /* Botón flotante algo más contenido en móvil */
  a.wa{width:54px;height:54px;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px))}
  a.wa svg{width:24px;height:24px}
  /* Barra fija "Inscríbete": en móvil solo el CTA, a todo el ancho
     (algunas páginas no ocultaban el texto y la barra crecía demasiado) */
  .applybar .ab-text{display:none}
  .applybar .ab-actions{flex:1}
  .applybar .ab-actions .btn{flex:1;justify-content:center}
}