/* ============================================================
   SILAB 3D · Mejoras compartidas de apariencia
   Se carga en todas las páginas DESPUÉS del <style> inline.
   No reemplaza los estilos por página: solo añade y afina.
   Cubre: 19 (consistencia/foco), 20 (carga catálogo),
          21 (footer responsive), 22 (móviles estrechos).
   ============================================================ */

/* --- 19 · Foco visible para navegación por teclado --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--primary, #BC556D);
  outline-offset: 2px;
}

/* --- 20 · Carga del catálogo: fundido + skeleton --- */
@keyframes silabFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.silab-fade-in { animation: silabFadeIn 0.45s ease both; }

@keyframes silabShimmer {
  0%   { background-position: -480px 0; }
  100% { background-position: 480px 0; }
}
.silab-skeleton {
  border-radius: var(--radius, 18px);
  background: #f0e9eb;
  background-image: linear-gradient(90deg, #f0e9eb 0, #f8f2f4 60px, #f0e9eb 120px);
  background-size: 480px 100%;
  animation: silabShimmer 1.2s infinite linear;
  min-height: 220px;
}

/* --- 21 · Footer: legibilidad en móvil --- */
@media (max-width: 480px) {
  .footer p { font-size: 0.82rem; line-height: 1.7; }
  .footer .sep { margin: 0 6px; }
}

/* --- 22 · Tipografía y espaciado en móviles muy estrechos (≤380px) --- */
@media (max-width: 380px) {
  .container { padding-left: 18px; padding-right: 18px; }
  .hero-main-title { font-size: clamp(2rem, 8.5vw, 2.4rem); }
  .hero-main-text  { font-size: 0.98rem; }
  .section-title   { font-size: clamp(1.6rem, 7.5vw, 2rem); }
  .section-desc    { font-size: 0.95rem; }
  .btn-primary,
  .cta-button,
  .calc-cta-btn { width: 100%; justify-content: center; }
}

/* --- Accesibilidad: respetar "reducir movimiento" --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}