/* =============================================
   LTG Global Styles
   Aplica en todo el sitio
   ============================================= */

/* ── Design Tokens (paleta única de verdad) ── */
:root {
    /* Brand */
    --ltg-dark:         #11242b;
    --ltg-dark-alt:     #1a3a45;
    --ltg-teal:         #00ddc2;
    --ltg-teal-hover:   #00a898;
    --ltg-bg:           #f4f7f8;
    --ltg-border:       #e8f0f2;
    --ltg-text-muted:   #aac4c8;

    /* Surfaces */
    --ltg-white:        #fff;
    --ltg-surface:      #f9fbfc;
    --ltg-border-light: #f0f4f5;

    /* Text */
    --ltg-text:         #11242b;
    --ltg-text-sec:     #555;
    --ltg-text-dim:     #999;
    --ltg-text-faint:   #bbb;

    /* Shadows */
    --ltg-shadow-sm:    0 4px 16px rgba(17,36,43,0.07);
    --ltg-shadow-md:    0 6px 20px rgba(0,221,194,0.18);
    --ltg-shadow-lg:    0 10px 28px rgba(17,36,43,0.09);

    /* Radius */
    --ltg-radius:       14px;
    --ltg-radius-sm:    8px;
    --ltg-radius-pill:  20px;

    /* Font */
    --ltg-font:         'Montserrat', sans-serif;

    /* Focus ring */
    --ltg-focus-ring:   0 0 0 3px rgba(0,221,194,0.4);
}

/* ── Botón flotante WhatsApp ── */
.ltg-whatsapp-btn {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 56px;
    height: 56px;
    background: #25d366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(37,211,102,0.4);
    z-index: 9999;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ltg-whatsapp-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(37,211,102,0.55);
}

/* ── Focus visible — anillo teal consistente para navegación por teclado ── */
:focus-visible {
    outline: 2px solid var(--ltg-teal);
    outline-offset: 2px;
}
/* Elementos que ya definen su propio focus (selects, inputs) — reforzar */
.ho-select:focus-visible,
.ho-input-busqueda:focus-visible { box-shadow: var(--ltg-focus-ring); }
/* Tarjetas y botones interactivos */
.ho-card__link:focus-visible { outline-offset: -2px; }
.ho-btn:focus-visible,
.ho-orden-btn:focus-visible,
.ltg-programa-card:focus-visible,
.so-cta-btn:focus-visible,
.so-back-btn:focus-visible { box-shadow: var(--ltg-focus-ring); outline: none; }

/* ── Reduced motion — respeta la preferencia del usuario ── */
@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;
    }
}