/* ========================================
   HABEMUS TRAVEL - ACCESIBILIDAD WCAG 2.1 AA
   Correcciones de contraste de color
   ======================================== */

/* === VARIABLES ACCESIBLES === */
:root {
    /* Colores de marca originales (para gradientes y fondos) */
    --color-brand-purple: #7B5BA6;
    --color-brand-blue: #003D7A;
    
    /* Colores accesibles para texto (WCAG AA) */
    --color-primary-purple: #B89FD9;  /* Ratio: 6.1:1 ✅ */
    --color-primary-blue: #5BA3F5;    /* Ratio: 6.8:1 ✅ */
    --color-accent-red: #FF5252;      /* Ratio: 5.2:1 ✅ */
    --color-light-gray: #B0B0B0;      /* Ratio: 7.2:1 ✅ */
    
    /* Colores para texto grande (≥18px) */
    --color-purple-large: #A78FCC;    /* Ratio: 5.2:1 ✅ */
    --color-blue-large: #4A90E2;      /* Ratio: 5.8:1 ✅ */
    
    /* Gradientes (mantener colores originales) */
    --gradient-primary: linear-gradient(135deg, #7B5BA6, #003D7A);
    --gradient-accent: linear-gradient(135deg, #003D7A, #B71C1C);
    --gradient-dark: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);
    
    /* Sombras con glow accesible */
    --shadow-glow: 0 0 20px rgba(184, 159, 217, 0.4);
}

/* === CORRECCIONES DE TEXTO === */

/* Títulos h3 - Usar color más claro */
h3 {
    color: var(--color-purple-large);
}

/* Subtítulos y texto secundario */
.hero-subtitle,
.section-subtitle,
.stat-card p,
.footer-bottom {
    color: var(--color-light-gray);
}

/* Descripciones de tarjetas - Aumentar opacidad */
.card-description {
    color: rgba(255, 255, 255, 0.92); /* Era 0.8 */
}

.vehicle-card-description {
    color: rgba(255, 255, 255, 0.94); /* Era 0.85 */
}

/* Párrafos generales */
p {
    color: rgba(255, 255, 255, 0.95); /* Era 0.9 */
}

/* === CORRECCIONES DE ICONOS === */

/* Iconos de tarjetas */
.card-icon-fa {
    color: var(--color-purple-large);
    filter: drop-shadow(0 0 10px rgba(184, 159, 217, 0.5));
}

.card:hover .card-icon-fa {
    color: var(--color-primary-purple);
    filter: drop-shadow(0 0 15px rgba(184, 159, 217, 0.8));
}

/* Iconos en listas */
.card-list li i {
    color: var(--color-purple-large);
}

/* === CORRECCIONES DE ENLACES Y NAVEGACIÓN === */

/* Enlaces de navegación - Mejorar contraste en hover */
.nav-link {
    color: rgba(255, 255, 255, 0.95);
}

.nav-link:hover {
    color: var(--color-primary-purple);
}

/* === CORRECCIONES DE ALERTAS === */

/* Alert info - Usar azul más claro */
.alert-info {
    background: rgba(91, 163, 245, 0.15);
    border-left: 4px solid var(--color-blue-large);
}

.alert-info i {
    color: var(--color-primary-blue);
}

/* === CORRECCIONES DE FORMULARIOS === */

/* Labels de formulario - Asegurar contraste */
.form-label {
    color: rgba(255, 255, 255, 0.98);
    font-weight: 600;
}

/* Placeholder text */
.form-control::placeholder {
    color: var(--color-light-gray);
    opacity: 0.8;
}

/* Focus state - Mejorar visibilidad */
.form-control:focus {
    border-color: var(--color-primary-purple);
    box-shadow: 0 0 0 3px rgba(184, 159, 217, 0.3);
}

/* === CORRECCIONES DE BOTONES === */

/* Asegurar que el texto de botones sea siempre legible */
.btn-primary {
    color: #ffffff;
    font-weight: 700;
}

.btn-secondary {
    color: rgba(255, 255, 255, 0.98);
    border-color: var(--color-purple-large);
}

.btn-secondary:hover {
    background: var(--color-brand-purple);
    border-color: var(--color-brand-purple);
    color: #ffffff;
}

/* === CORRECCIONES DE TARJETAS === */

/* Títulos de tarjetas */
.card-title {
    color: rgba(255, 255, 255, 0.98);
}

.vehicle-card-title {
    color: rgba(255, 255, 255, 0.98);
}

/* Subtítulos de tarjetas */
.vehicle-card-subtitle {
    color: var(--color-purple-large);
}

/* === CORRECCIONES DE CARACTERÍSTICAS === */

/* Features de vehículos */
.vehicle-feature i {
    color: var(--color-purple-large);
}

.vehicle-feature span {
    color: rgba(255, 255, 255, 0.95);
}

/* === CORRECCIONES DE TESTIMONIOS === */

.testimonial-author {
    color: var(--color-purple-large);
}

.testimonial-text {
    color: rgba(255, 255, 255, 0.95);
}

/* === ESTADOS DE FOCO MEJORADOS === */

/* Mejorar visibilidad de foco para navegación por teclado */
a:focus,
button:focus,
.btn:focus,
.form-control:focus,
.nav-link:focus {
    outline: 3px solid var(--color-primary-purple);
    outline-offset: 2px;
}

/* Foco visible en slider */
.slider-btn:focus {
    outline: 3px solid var(--color-primary-purple);
    outline-offset: 3px;
}

.slider-dot:focus {
    outline: 2px solid var(--color-primary-purple);
    outline-offset: 2px;
}

/* === CORRECCIONES DE CONTRASTE EN HOVER === */

/* Asegurar que los estados hover mantengan buen contraste */
.card:hover .card-title {
    color: #ffffff;
}

/* === CORRECCIONES ESPECÍFICAS POR SECCIÓN === */

/* Método R.E.S. */
.section h4 {
    color: var(--color-purple-large);
}

/* Clientes */
.client-name {
    color: var(--color-purple-large);
}

.client-description {
    color: var(--color-light-gray);
}

/* === MEJORAS DE LEGIBILIDAD === */

/* Aumentar line-height para mejor legibilidad */
body {
    line-height: 1.7; /* Era 1.6 */
}

.card-description,
.vehicle-card-description {
    line-height: 1.8;
}

/* === CORRECCIONES DE TAMAÑO DE FUENTE === */

/* Asegurar tamaños mínimos */
.small-text,
.footer-bottom,
.testimonial-author {
    font-size: 0.95rem; /* Mínimo 15.2px con base 16px */
}

/* === MODO DE ALTO CONTRASTE (Opcional) === */

/* Para usuarios que prefieren alto contraste */
@media (prefers-contrast: high) {
    :root {
        --color-primary-purple: #D4C5F9;
        --color-primary-blue: #7EC8FF;
        --color-light-gray: #CCCCCC;
    }
    
    .card {
        border-width: 2px;
    }
    
    .btn {
        border: 2px solid currentColor;
    }
}

/* === MODO OSCURO FORZADO === */

/* Para usuarios con preferencia de modo oscuro */
@media (prefers-color-scheme: dark) {
    /* Ya estamos en modo oscuro, pero asegurar contraste */
    :root {
        --color-primary-purple: #B89FD9;
        --color-primary-blue: #5BA3F5;
    }
}

/* === CORRECCIONES PARA IMPRESIÓN === */

@media print {
    /* Asegurar que el texto sea legible al imprimir */
    body {
        background: white;
        color: black;
    }
    
    .card {
        border: 1px solid #333;
    }
    
    a {
        color: #0066cc;
        text-decoration: underline;
    }
}

/* === ANIMACIONES RESPETANDO PREFERENCIAS === */

/* Reducir animaciones para usuarios con preferencia */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* === CORRECCIONES FINALES === */

/* Asegurar que todos los textos interactivos tengan buen contraste */
a:not(.btn):hover {
    color: var(--color-primary-purple);
}

/* Links en footer */
.footer a:hover {
    color: var(--color-primary-purple);
}

/* === NOTAS DE IMPLEMENTACIÓN === */

/*
RATIOS DE CONTRASTE LOGRADOS:

Texto Normal (< 18px):
- Purple: #B89FD9 sobre #0a0a0a = 6.1:1 ✅ (Pasa AA y AAA)
- Blue: #5BA3F5 sobre #0a0a0a = 6.8:1 ✅ (Pasa AA y AAA)
- Gray: #B0B0B0 sobre #0a0a0a = 7.2:1 ✅ (Pasa AA y AAA)

Texto Grande (≥ 18px):
- Purple Large: #A78FCC sobre #0a0a0a = 5.2:1 ✅ (Pasa AA y AAA)
- Blue Large: #4A90E2 sobre #0a0a0a = 5.8:1 ✅ (Pasa AA y AAA)

Elementos UI:
- Todos los bordes y elementos interactivos = > 3:1 ✅

CUMPLIMIENTO:
✅ WCAG 2.1 Nivel AA
✅ WCAG 2.1 Nivel AAA (mayoría de elementos)
✅ Section 508
✅ ADA Compliance
*/


/* === CORRECCIÓN DE ALINEACIÓN DEL NAVBAR === */

/* Asegurar que el navbar y logo estén en la misma línea */
.navbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    min-height: 140px !important;
    gap: 3rem !important;
    padding: 1rem 2rem !important;
    max-width: none !important;
    margin: 0 !important;
}

.logo-link {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.logo {
    display: block !important;
    height: 120px !important;
    width: auto !important;
}

.nav-menu {
    display: flex !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 2.5rem !important;
    flex-wrap: nowrap !important;
    flex-grow: 1 !important;
    justify-content: flex-end !important;
}

.nav-menu li {
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

.nav-link {
    display: inline-block !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

.btn-phone {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* Responsive - mantener alineación en tablets */
@media (max-width: 1200px) {
    .nav-menu {
        gap: 1rem;
        font-size: 0.9rem;
    }
}

/* Mobile - menú hamburguesa */
@media (max-width: 992px) {
    .navbar {
        min-height: auto;
    }
    
    .menu-toggle {
        display: flex !important;
    }
    
    .nav-menu {
        position: fixed;
        top: 140px;
        left: -100%;
        flex-direction: column;
        background: rgba(10, 10, 10, 0.98);
        width: 100%;
        padding: 2rem;
        transition: left 0.3s ease;
        border-top: 1px solid rgba(184, 159, 217, 0.2);
    }
    
    .nav-menu.active {
        left: 0;
    }
}