/**
 * ════════════════════════════════════════════════════════════════
 *  ACCESSIBILITY FIXES - WCAG AA COMPLIANT
 *  Correcciones de accesibilidad para Lighthouse 100%
 * ════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════
 *  VARIABLES DE COLORES ACCESIBLES
 *  Colores con ratio de contraste mínimo 4.5:1 (WCAG AA)
 * ═══════════════════════════════════════════════════════════════ */
:root {
    /* Dorado oscuro accesible sobre fondo blanco (contraste 4.5:1+) */
    --gold-accessible: #8B7200;
    
    /* Textos oscuros con buen contraste */
    --text-dark-accessible: #1a1a1a;
    --text-gray-accessible: #525252;
    
    /* Colores de estado accesibles */
    --warning-accessible: #735c00;
    --tip-text-accessible: #664d03;
}

/* ═══════════════════════════════════════════════════════════════
 *  CARD TITLE - NOMBRE DE MODELOS
 *  Problema: #d4af37 sobre blanco no tiene suficiente contraste
 *  Solución: Usar color oscuro con suficiente contraste
 * ═══════════════════════════════════════════════════════════════ */
.card-title {
    color: var(--text-dark-accessible, #1a1a1a) !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  CARD BODY - CONTENIDO DE LAS TARJETAS
 *  Asegurar texto legible en descripciones
 * ═══════════════════════════════════════════════════════════════ */
.card-body {
    color: var(--text-dark-accessible, #1a1a1a);
}

.card-body .card-description,
.card-body p {
    color: var(--text-gray-accessible, #525252);
}

.card-nationality {
    color: var(--text-gray-accessible, #525252) !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  SERVICE BOX - SECCIÓN DE SERVICIOS
 *  Problema: strong con color dorado sin contraste
 *  Solución: Color oscuro accesible
 * ═══════════════════════════════════════════════════════════════ */
.service-box {
    color: var(--text-dark-accessible, #1a1a1a);
}

.service-box h3 {
    color: var(--text-dark-accessible, #1a1a1a) !important;
}

.service-box strong,
.service-content strong {
    color: var(--text-dark-accessible, #1a1a1a) !important;
    font-weight: 700;
}

.service-content,
.service-content p,
.service-content li {
    color: var(--text-gray-accessible, #525252) !important;
}

.service-content ol,
.service-content ul {
    color: var(--text-gray-accessible, #525252) !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  TIP BOX - CAJA DE CONSEJOS
 *  Problema: #856404 sobre #fff3cd tiene poco contraste
 *  Solución: Texto más oscuro
 * ═══════════════════════════════════════════════════════════════ */
.tip-box {
    background: #fff3cd;
    color: var(--tip-text-accessible, #664d03) !important;
}

.tip-box strong {
    color: #3d2e02 !important;
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
 *  BOOKING PROCESS - PROCESO DE RESERVA
 *  Asegurar contraste en listas ordenadas
 * ═══════════════════════════════════════════════════════════════ */
.booking-process ol,
.booking-process ol li {
    color: var(--text-gray-accessible, #525252) !important;
}

.booking-process ol li strong {
    color: var(--text-dark-accessible, #1a1a1a) !important;
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
 *  SEO SERVICES - SECCIÓN SEO
 *  Mejorar contraste en textos
 * ═══════════════════════════════════════════════════════════════ */
.seo-services strong,
.locations-grid strong,
.benefits-section strong {
    color: var(--text-dark-accessible, #1a1a1a) !important;
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
 *  POPULAR SEARCHES - BÚSQUEDAS POPULARES
 *  El fondo oscuro con texto dorado necesita mejor contraste
 * ═══════════════════════════════════════════════════════════════ */
.popular-searches li {
    color: #ffd966 !important; /* Dorado más brillante para mejor contraste sobre negro */
}

.popular-searches li strong {
    color: #ffe599 !important; /* Dorado aún más claro para strong */
}

/* ═══════════════════════════════════════════════════════════════
 *  FOOTER LINKS - ENLACES DEL PIE DE PÁGINA
 *  Accesibilidad para navegación
 * ═══════════════════════════════════════════════════════════════ */
.footer-links,
.footer-info {
    color: var(--text-dark-accessible, #1a1a1a);
}

.footer-links ul li a,
.footer-info p {
    color: var(--text-gray-accessible, #525252);
}

.footer-links ul li a:hover,
.footer-links ul li a:focus {
    color: var(--text-dark-accessible, #1a1a1a);
}

/* Footer headings - styled as h4 but semantically h2 for proper hierarchy */
.footer-heading {
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
    color: var(--text-dark-accessible, #1a1a1a) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ═══════════════════════════════════════════════════════════════
 *  FAQ SECTION - PREGUNTAS FRECUENTES
 *  Mejorar contraste en respuestas
 * ═══════════════════════════════════════════════════════════════ */
.faq-answer {
    color: var(--text-gray-accessible, #525252) !important;
}

.faq-answer strong {
    color: var(--text-dark-accessible, #1a1a1a) !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  FOCUS STATES - ESTADOS DE ENFOQUE
 *  Accesibilidad para navegación con teclado
 * ═══════════════════════════════════════════════════════════════ */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
.btn:focus,
.filter-tab:focus,
.nav-link:focus {
    outline: 2px solid var(--gold, #d4af37) !important;
    outline-offset: 2px !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  SKIP LINK - ENLACE SALTAR AL CONTENIDO
 *  Accesibilidad para lectores de pantalla
 * ═══════════════════════════════════════════════════════════════ */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--gold, #d4af37);
    color: #1a1a1a;
    padding: 8px 16px;
    text-decoration: none;
    font-weight: 600;
    z-index: 10000;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 0;
}

/* ═══════════════════════════════════════════════════════════════
 *  REDUCED MOTION - MOVIMIENTO REDUCIDO
 *  Respetar preferencias 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;
    }
}

/* ═══════════════════════════════════════════════════════════════
 *  HIGH CONTRAST MODE - MODO DE ALTO CONTRASTE
 *  Soporte para usuarios con preferencias de alto contraste
 * ═══════════════════════════════════════════════════════════════ */
@media (prefers-contrast: high) {
    .card-title {
        color: #000000 !important;
    }
    
    .card-body,
    .service-box,
    .tip-box {
        border: 2px solid #000000;
    }
    
    a {
        text-decoration: underline;
    }
}

/* ═══════════════════════════════════════════════════════════════
 *  VISUALLY HIDDEN - OCULTO VISUALMENTE
 *  Clase para contenido solo para lectores de pantalla
 * ═══════════════════════════════════════════════════════════════ */
.visually-hidden,
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}