/**
 * G-CERTI QUANTUM PRO — Accessibility & Enhancement Layer
 * Version: 2026.7.1
 * 
 * Este archivo contiene:
 * - Focus states visibles (WCAG 2.1 AA)
 * - Mejoras de contraste
 * - Soporte prefers-reduced-motion
 * - Sistema de colores por norma ISO
 * - Breakpoints adicionales (tablet)
 * - Mejoras de rendimiento
 */

/* ═══════════════════════════════════════════════════════════════════════════
   SISTEMA DE COLORES POR NORMA ISO
   Cada norma tiene su color distintivo mientras el rojo permanece como primario
   ═══════════════════════════════════════════════════════════════════════════ */

/* ISO 9001 - Calidad (Azul Profundo) */
.q-page-certification[data-iso="9001"],
body[data-iso="9001"] {
    --q-cert: #3B82F6;
    --q-cert-dark: #1D4ED8;
    --q-cert-rgb: 59, 130, 246;
    --q-cert-tint-1: rgba(59, 130, 246, 0.16);
    --q-cert-tint-2: rgba(59, 130, 246, 0.07);
    --q-cert-border: rgba(59, 130, 246, 0.32);
    --q-cert-glow: rgba(59, 130, 246, 0.30);
}

/* ISO 14001 - Ambiente (Verde) */
.q-page-certification[data-iso="14001"],
body[data-iso="14001"] {
    --q-cert: #10B981;
    --q-cert-dark: #059669;
    --q-cert-rgb: 16, 185, 129;
    --q-cert-tint-1: rgba(16, 185, 129, 0.16);
    --q-cert-tint-2: rgba(16, 185, 129, 0.07);
    --q-cert-border: rgba(16, 185, 129, 0.32);
    --q-cert-glow: rgba(16, 185, 129, 0.30);
}

/* ISO 45001 - Seguridad (Ámbar/Naranja) */
.q-page-certification[data-iso="45001"],
body[data-iso="45001"] {
    --q-cert: #F59E0B;
    --q-cert-dark: #D97706;
    --q-cert-rgb: 245, 158, 11;
    --q-cert-tint-1: rgba(245, 158, 11, 0.16);
    --q-cert-tint-2: rgba(245, 158, 11, 0.07);
    --q-cert-border: rgba(245, 158, 11, 0.32);
    --q-cert-glow: rgba(245, 158, 11, 0.30);
}

/* ISO 27001 - InfoSec (Azul Ciberseguridad) */
.q-page-certification[data-iso="27001"],
body[data-iso="27001"] {
    --q-cert: #6366F1;
    --q-cert-dark: #4F46E5;
    --q-cert-rgb: 99, 102, 241;
    --q-cert-tint-1: rgba(99, 102, 241, 0.16);
    --q-cert-tint-2: rgba(99, 102, 241, 0.07);
    --q-cert-border: rgba(99, 102, 241, 0.32);
    --q-cert-glow: rgba(99, 102, 241, 0.30);
}

/* ISO 22000 - Alimentos (Verde Oliva) */
.q-page-certification[data-iso="22000"],
body[data-iso="22000"] {
    --q-cert: #84CC16;
    --q-cert-dark: #65A30D;
    --q-cert-rgb: 132, 204, 22;
    --q-cert-tint-1: rgba(132, 204, 22, 0.16);
    --q-cert-tint-2: rgba(132, 204, 22, 0.07);
    --q-cert-border: rgba(132, 204, 22, 0.32);
    --q-cert-glow: rgba(132, 204, 22, 0.30);
}

/* ISO 50001 - Energía (Azul Eléctrico) */
.q-page-certification[data-iso="50001"],
body[data-iso="50001"] {
    --q-cert: #0EA5E9;
    --q-cert-dark: #0284C7;
    --q-cert-rgb: 14, 165, 233;
    --q-cert-tint-1: rgba(14, 165, 233, 0.16);
    --q-cert-tint-2: rgba(14, 165, 233, 0.07);
    --q-cert-border: rgba(14, 165, 233, 0.32);
    --q-cert-glow: rgba(14, 165, 233, 0.30);
}

/* ISO 13485 - Dispositivos Médicos (Teal) */
.q-page-certification[data-iso="13485"],
body[data-iso="13485"] {
    --q-cert: #14B8A6;
    --q-cert-dark: #0D9488;
    --q-cert-rgb: 20, 184, 166;
    --q-cert-tint-1: rgba(20, 184, 166, 0.16);
    --q-cert-tint-2: rgba(20, 184, 166, 0.07);
    --q-cert-border: rgba(20, 184, 166, 0.32);
    --q-cert-glow: rgba(20, 184, 166, 0.30);
}

/* ISO 22301 - Continuidad (Púrpura) */
.q-page-certification[data-iso="22301"],
body[data-iso="22301"] {
    --q-cert: #8B5CF6;
    --q-cert-dark: #7C3AED;
    --q-cert-rgb: 139, 92, 246;
    --q-cert-tint-1: rgba(139, 92, 246, 0.16);
    --q-cert-tint-2: rgba(139, 92, 246, 0.07);
    --q-cert-border: rgba(139, 92, 246, 0.32);
    --q-cert-glow: rgba(139, 92, 246, 0.30);
}

/* ISO 37001 - Antisoborno (Rojo Marca - Por defecto) */
.q-page-certification[data-iso="37001"],
body[data-iso="37001"] {
    --q-cert: #E63935;
    --q-cert-dark: #B71C1C;
    --q-cert-rgb: 230, 57, 53;
    --q-cert-tint-1: rgba(230, 57, 53, 0.16);
    --q-cert-tint-2: rgba(230, 57, 53, 0.07);
    --q-cert-border: rgba(230, 57, 53, 0.32);
    --q-cert-glow: rgba(230, 57, 53, 0.30);
}

/* ISO 17025 - Laboratorios (Gris Azulado) */
.q-page-certification[data-iso="17025"],
body[data-iso="17025"] {
    --q-cert: #64748B;
    --q-cert-dark: #475569;
    --q-cert-rgb: 100, 116, 139;
    --q-cert-tint-1: rgba(100, 116, 139, 0.16);
    --q-cert-tint-2: rgba(100, 116, 139, 0.07);
    --q-cert-border: rgba(100, 116, 139, 0.32);
    --q-cert-glow: rgba(100, 116, 139, 0.30);
}

/* IATF 16949 - Automotriz (Azul Oscuro) */
.q-page-certification[data-iso="IATF"],
body[data-iso="IATF"] {
    --q-cert: #1E40AF;
    --q-cert-dark: #1E3A8A;
    --q-cert-rgb: 30, 64, 175;
    --q-cert-tint-1: rgba(30, 64, 175, 0.16);
    --q-cert-tint-2: rgba(30, 64, 175, 0.07);
    --q-cert-border: rgba(30, 64, 175, 0.32);
    --q-cert-glow: rgba(30, 64, 175, 0.30);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOCUS STATES — WCAG 2.1 AA Compliant
   Visible para navegación por teclado
   ═══════════════════════════════════════════════════════════════════════════ */

/* Focus global para todos los elementos interactivos */
:focus {
    outline: none;
}

:focus-visible {
    outline: 3px solid var(--gc-primary, #E63935);
    outline-offset: 3px;
    border-radius: var(--radius-sm, 4px);
}

/* Botones */
.q-btn:focus-visible,
.btn:focus-visible,
button:focus-visible {
    outline: 3px solid var(--gc-primary, #E63935);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(230, 57, 53, 0.25);
}

/* Links */
a:focus-visible {
    outline: 2px solid var(--gc-primary, #E63935);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Inputs y formularios */
.q-input:focus-visible,
.q-select:focus-visible,
.q-textarea:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    border-color: var(--gc-primary, #E63935);
    box-shadow: 0 0 0 4px rgba(230, 57, 53, 0.2);
}

/* Cards clickeables */
.q-card:focus-visible,
.q-iso-card:focus-visible {
    outline: 3px solid var(--gc-primary, #E63935);
    outline-offset: 4px;
    transform: translateY(-4px);
}

/* FAQ accordions */
.q-faq-question:focus-visible {
    outline: 2px solid var(--gc-primary, #E63935);
    outline-offset: 2px;
    background: var(--gc-primary-10, rgba(230, 57, 53, 0.1));
}

/* Skip link para navegación por teclado */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gc-primary, #E63935);
    color: var(--gc-white, #FFFFFF);
    padding: var(--space-3, 12px) var(--space-6, 24px);
    border-radius: var(--radius-md, 8px);
    font-weight: var(--font-semibold, 600);
    z-index: 10000;
    transition: top 0.3s;
}

.skip-link:focus {
    top: var(--space-4, 16px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MEJORAS DE CONTRASTE
   Textos muted con mejor legibilidad (WCAG AA 4.5:1)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Override para textos muted - mejor contraste */
.q-text-muted,
.text-muted {
    color: var(--gc-gray-400, #9E9E9E) !important;
    /* Más claro para dark mode */
}

/* En secciones claras, texto más oscuro */
.q-dark-text .q-text-muted,
.q-dark-text .section-subtitle,
.q-section-alt .q-text-muted,
.q-section-light .q-text-muted {
    color: var(--gc-gray-600, #3A3A3A) !important;
}

/* Badges con mejor contraste */
.q-badge {
    font-weight: 600;
}

/* Stat labels más legibles */
.q-cert-stat-label,
.q-stat-label {
    color: var(--gc-gray-300, #BDBDBD);
    font-weight: 500;
}

/* Descripciones en hero con mejor contraste */
.q-cert-description {
    color: var(--gc-gray-300, #BDBDBD);
}

/* FAQs - respuestas más legibles */
.q-faq-answer p {
    color: var(--gc-gray-700, #2A2A2A);
    line-height: 1.75;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION
   Respeta las preferencias de usuarios con sensibilidad al movimiento
   ═══════════════════════════════════════════════════════════════════════════ */

@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;
    }

    /* Deshabilitar orbs animados */
    .q-hero-orb,
    .hero-orb,
    .orb-primary,
    .orb-secondary,
    .orb-tertiary {
        animation: none !important;
    }

    /* Botones sin transform en hover */
    .q-btn:hover,
    .q-card:hover,
    .q-iso-card:hover {
        transform: none !important;
    }

    /* Fade-up sin animación */
    .animate-fade-up,
    .reveal {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Smooth scroll deshabilitado */
    html {
        scroll-behavior: auto !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BREAKPOINTS ADICIONALES
   Tablet landscape (992px) y pantallas grandes (1400px)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tablet Landscape: 769px - 992px */
@media (min-width: 769px) and (max-width: 992px) {
    :root {
        --section-py: 60px;
        --container-px: 32px;
    }

    /* Hero grid más balanceado en tablet */
    .q-cert-hero-content {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .q-cert-hero-text {
        text-align: center;
    }

    .q-cert-hero-stats {
        justify-content: center;
    }

    .q-cert-hero-cta {
        justify-content: center;
    }

    .q-cert-hero-visual {
        display: none;
    }

    /* Grids en 2 columnas en tablet */
    .q-benefits-grid-v2,
    .q-sectors-grid-v2,
    .q-hazards-grid,
    .q-aspects-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .q-clauses-grid-v2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .q-pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .q-pricing-card:last-child {
        grid-column: span 2;
        max-width: 400px;
        margin: 0 auto;
    }

    /* Intro grid stack */
    .q-intro-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .q-intro-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Related grid */
    .q-related-grid {
        grid-template-columns: 1fr;
    }

    /* FAQ más ancho */
    .q-faq-list {
        max-width: 100%;
    }
}

/* Pantallas grandes: 1400px+ */
@media (min-width: 1400px) {
    :root {
        --container-max: 1320px;
    }

    /* Tipografía más grande */
    .q-h1 {
        font-size: 56px;
    }

    .q-h2 {
        font-size: 42px;
    }

    /* Más espacio en secciones */
    .q-section {
        padding: 100px 0;
    }

    /* Grids más amplios */
    .q-benefits-grid-v2 {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-8);
    }

    .q-sectors-grid-v2 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MEJORAS MOBILE (576px y menos)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 576px) {

    /* Tipografía más pequeña pero legible */
    .q-h1 {
        font-size: clamp(28px, 7vw, 36px);
    }

    .q-h2 {
        font-size: clamp(24px, 5vw, 28px);
    }

    /* Hero stats en columna */
    .q-cert-hero-stats {
        flex-direction: column;
        gap: var(--space-4);
    }

    .q-cert-stat {
        text-align: center;
        padding: var(--space-3) 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .q-cert-stat:last-child {
        border-bottom: none;
    }

    /* Badges más pequeños */
    .q-cert-badge {
        width: 64px;
        height: 64px;
    }

    .q-cert-code {
        font-size: var(--text-2xl);
    }

    /* CTAs stack */
    .q-cert-hero-cta {
        flex-direction: column;
        gap: var(--space-3);
    }

    .q-cert-hero-cta .q-btn {
        width: 100%;
        justify-content: center;
    }

    /* Pricing cards full width */
    .q-pricing-grid {
        grid-template-columns: 1fr;
    }

    /* FAQs más compactas */
    .q-faq-question {
        padding: var(--space-4);
        font-size: var(--text-sm);
    }

    /* Process timeline vertical */
    .q-process-step {
        flex-direction: column;
        text-align: center;
    }

    .q-process-number {
        margin-bottom: var(--space-3);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HIGH CONTRAST MODE
   Para usuarios que necesitan mayor contraste
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-contrast: more) {
    :root {
        --gc-text-secondary: var(--gc-gray-300);
        --gc-text-muted: var(--gc-gray-200);
        --glass-border: rgba(255, 255, 255, 0.3);
    }

    .q-btn-secondary {
        border-width: 3px;
    }

    .q-card,
    .q-iso-card {
        border-width: 2px;
    }

    .q-badge {
        border-width: 2px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRINT STYLES
   Optimización para impresión
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {

    /* Ocultar elementos no imprimibles */
    .q-cert-hero-visual,
    .q-hero-bg,
    .hero-bg-layer,
    .q-btn-whatsapp,
    .q-proof-bar,
    .q-cta-box,
    nav,
    footer {
        display: none !important;
    }

    /* Fondo blanco para impresión */
    body,
    .q-cert-hero,
    .q-section {
        background: white !important;
        color: black !important;
    }

    /* Textos en negro */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .q-h1,
    .q-h2,
    .q-h3,
    .q-h4,
    p,
    li,
    span {
        color: black !important;
    }

    /* Links con URL visible */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    /* Page breaks */
    .q-section {
        page-break-inside: avoid;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PERFORMANCE OPTIMIZATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* GPU acceleration para elementos animados */
.q-hero-orb,
.q-btn,
.q-card,
.q-iso-card {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Contain para mejor rendering */
.q-section {
    contain: layout style;
}

.q-card,
.q-iso-card {
    contain: layout;
}

/* Font display está configurado en la carga de Google Fonts (&display=swap) */