/* ============================================================================
   MEJORAS TIPOGRÁFICAS Y ACCESIBILIDAD — MAXICAL C.A.
   ============================================================================
   Se carga DESPUÉS de maxical.css.
   No redefine variables --mc-*. Solo añade lo que falta.
   -------------------------------------------------------------------------- */

/* ── 1. SUAVIZADO DE FUENTE ───────────────────────────────────────────── */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ── 2. ESCALA TIPOGRÁFICA RESPONSIVE (usa clamp para fluidez) ─────────── */
/* maxical.css ya fija tamaños con !important en px estáticos.
   Usamos clamp() solo donde maxical.css no tiene breakpoints. */

h1 { font-size: clamp(1.9rem, 4vw, 2.8rem) !important; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem) !important; }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.45rem) !important; }

/* ── 3. SECCIONES OSCURAS — texto blanco garantizado ──────────────────── */
/* (Complementa lo ya en maxical.css para los titulos del hero de inicio) */
.catalogo-hero-index h2,
.cta-productos h2,
.stats-strip .stat-number,
#banner header h2 {
    color: #ffffff !important;
}

/* El catálogo hero index de inicio es OSCURO — corregir el conflicto */
/* maxical-custom.css lo pone oscuro, maxical.css también — OK */
/* Solo nos aseguramos que el texto sea legible */
.catalogo-hero-index p {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 1.05rem !important;
}

/* ── 4. TAMAÑOS MÍNIMOS PARA LEGIBILIDAD ──────────────────────────────── */
/* maxical.css pone varios textos en .84rem — demasiado pequeño */

.card p, .card .card-text { font-size: 0.97rem !important; line-height: 1.72 !important; }
.logistica-card p  { font-size: 0.93rem !important; }
.valor-card p      { font-size: 0.95rem !important; }
.aplic-box li,
.aplic-box [class*="col-"] { font-size: 0.88rem !important; }
.hito-item .text-muted,
.hito-item .small   { font-size: 0.86rem !important; }
.contact-sub        { font-size: 0.84rem !important; }
.cliente-nombre     { font-size: 0.85rem !important; }
.timeline-content p { font-size: 0.97rem !important; line-height: 1.7 !important; }
.feat-list li       { font-size: 0.95rem !important; }
.stats-strip .stat-label { font-size: 0.87rem !important; }

/* Párrafos de secciones generales */
section.py-5 > .container > p,
section.py-4 > .container > p { font-size: 1rem !important; }

/* Nav links — tamaño legible */
.topbar-nav > li > a { font-size: 0.9rem !important; }
.topbar-dropdown li a { font-size: 0.9rem !important; }

/* ── 5. INPUTS — tamaño mínimo de toque ──────────────────────────────── */
input, select, textarea {
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

/* ── 6. ACCESIBILIDAD — FOCUS VISIBLE ────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid #37c0fb !important;
    outline-offset: 3px !important;
    border-radius: 4px !important;
}

/* ── 7. SKIP TO CONTENT (NAVEGACIÓN POR TECLADO) ─────────────────────── */
.skip-to-content {
    position: absolute;
    top: -48px;
    left: 1rem;
    background: #37c0fb;
    color: #ffffff;
    padding: 0.75rem 1.25rem;
    border-radius: 0 0 0.5rem 0.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    z-index: 9999;
    transition: top 0.2s ease;
}
.skip-to-content:focus { top: 0; }

/* ── 8. MODO OSCURO — ajustes de formularios ─────────────────────────── */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: #252d42 !important;
    color: #f0f2f8 !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #5a6478 !important;
}

/* ── 9. MOTION SAFE ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}