/* ==========================================================================
   PRACSYS — assets/css/pages.css
   Refinamientos finales que aplican sobre elementos ya existentes:
   accesibilidad (focus visible), fallback sin JavaScript, ajustes de impresión.
   Se carga al final, después de global.css y components.css.
   ========================================================================== */

/* ============== ACCESIBILIDAD: FOCUS VISIBLE ============== */
a:focus-visible,
button:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost:focus-visible,
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{
  outline:2px solid var(--blue-600);
  outline-offset:2px;
  border-radius:8px;
}
/* Evita doble anillo en inputs que ya tienen box-shadow de foco */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{outline-offset:0}

/* Salto al contenido principal con teclado (el <main id="main-content">) */
#main-content{scroll-margin-top:96px}

/* ============== FALLBACK SIN JAVASCRIPT ============== */
/* Si el usuario no tiene JS, las animaciones .reveal nunca recibirían la
   clase .in, dejando el contenido invisible. Lo forzamos visible. */
.no-js .reveal{opacity:1!important;transform:none!important;filter:none!important}
/* Sin JS no se inicializan los contadores: mostramos el valor objetivo. */
.no-js [data-count]{font-size:inherit}

/* ============== ESTADO DE CARGA DE IMÁGENES ============== */
.galeria-card-visual--img img,
.sol-hero-img-wrap img{background:var(--bg-3)}

/* ============== UTILIDAD: OCULTAR VISUALMENTE (accesible) ============== */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ============== IMPRESIÓN ============== */
@media print{
  .site-header,.wa-fab,.contact-cta-strip,.mobile-nav,
  .pracsys-chat-launcher,.pracsys-chat-window{display:none!important}
  body{background:#fff;color:#000}
  .hero-bg,.page-hero::before,.page-hero::after,
  .features::before,.sol-modulos::before{display:none!important}
  a{color:#000;text-decoration:underline}
  .reveal{opacity:1!important;transform:none!important;filter:none!important}
  .galeria-card,.modulo-card,.relacionado-card,.contact-form-wrap{
    box-shadow:none!important;border:1px solid #ccc!important;break-inside:avoid;
  }
} /* ============== MÓDULOS POR INDUSTRIA (SS3) ==============
   Pegar este bloque al FINAL de assets/css/global.css.
   Reutiliza tokens existentes — no cambia nada previo.
   ========================================================== */
.mod-industria{padding:clamp(3rem,6vw,5rem) 0;background:var(--bg)}
.mod-intro{max-width:680px;margin:0 auto 40px;text-align:center;color:var(--muted);font-size:clamp(1rem,1vw + .5rem,1.0625rem);text-wrap:pretty}

.mod-group{margin-bottom:36px}
.mod-group:last-of-type{margin-bottom:0}
.mod-group-label{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-family:var(--display);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--blue-700)}
.mod-group-label::after{content:"";flex:1;height:1px;background:linear-gradient(to right,var(--line),transparent)}

.mod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.mod-card{display:flex;align-items:flex-start;gap:14px;padding:18px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);transition:transform .3s var(--ease-out-quint),box-shadow .3s ease,border-color .3s ease}
.mod-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line-2)}
.mod-card .mod-ic{flex-shrink:0;width:40px;height:40px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:var(--blue-50);color:var(--blue-600);transition:transform .35s var(--ease-spring)}
.mod-card:hover .mod-ic{transform:scale(1.08)}
.mod-card .mod-ic i{width:20px;height:20px}
.mod-card.ac-orange .mod-ic{background:var(--orange-50);color:var(--orange)}
.mod-tx{min-width:0}
.mod-tx h4{margin:0 0 4px;font-size:15px;font-weight:600;color:var(--blue-900);line-height:1.25}
.mod-tx p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.45}

/* Beneficios operativos rápidos */
.mod-beneficios{margin-top:44px;padding:28px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.ben-item{display:flex;align-items:center;gap:12px;font-size:14.5px;font-weight:500;color:var(--ink-2)}
.ben-item .ben-check{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:#e8faf2;color:#0e7a4a;display:inline-flex;align-items:center;justify-content:center}
.ben-item .ben-check svg{width:15px;height:15px}

@media(max-width:575px){
  .mod-grid{grid-template-columns:1fr}
  .mod-beneficios{padding:20px;grid-template-columns:1fr}
}