/**
 * Why Module Styles - Front Page
 * 
 * @package EvisioFront
 * @version 1.0
 */

/* CSS Variables */
:root {
    /* Colores */
    --color-teal: var(--green-front);
    --color-orange: var(--orange-front);
    --color-text: #4A4A4A;
    --color-text-light: #666666;
    --color-background: #F8F9FA;
    --color-white: #FFFFFF;
    --color-green: var(--green-front);
    --color-red: #FF6B6B;
    --color-border: #E9ECEF;

    /* Variables para el efecto glass */
    --glass-bg: rgba(255, 255, 255, 0.55);
    --glass-shadow: 0 10px 30px rgba(21, 31, 56, 0.08), 0 2px 6px rgba(21, 31, 56, 0.04);
    --glass-radius-outer: 28px;

    /* Tipografía */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    --font-size-5xl: 3rem;

    /* Espaciado */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;

    /* Bordes */
    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;

    /* Sombras */
    --shadow-sm: 0px 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0px 8px 25px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0px 15px 35px rgba(0, 0, 0, 0.15);
}

/* Why Module Container */
.why-module {
    width: 100%;
    position: relative;
}

.section-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.why-module-container {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Section Background Image */
.why-module[style*="background-image"] {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.why-module[style*="background-image"] .section-container {
    position: relative;
    z-index: 2;
}

/* Header Section */
.why-module-header {
    margin-bottom: var(--spacing-2xl);
    animation: fadeInUp 0.8s ease-out;
}

.why-module-title {
    font-size: var(--font-size-5xl);
    font-weight: 600;
    margin-bottom: var(--spacing-lg);
    line-height: 1.2;
}

.title-why {
    color: var(--color-teal);
}

.title-evisio {
    color: var(--color-orange);
}

.why-module-description {
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Card Principal con efecto glass */
.comparison-card {
    position: relative;
    border-radius: var(--glass-radius-outer);
    background: var(--glass-bg);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    box-shadow: var(--glass-shadow);
    overflow: hidden;
    max-width: 90%;
    margin: 0 auto;
    padding: 3rem 2rem;
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

/* Borde degradado (halo) alrededor del contenedor */
.comparison-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, #ffffffaa, #ffffff40 30%, #bfe7ff55 60%, #ffd6f855 100%);
    padding: 1px;
    /* grosor del borde */
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Fallback para navegadores sin soporte de mask-composite */
@supports not (mask-composite: exclude) {
    .comparison-card::before {
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.4);
        padding: 0;
    }
}

/* Contenedor interno para bordes redondeados */
.comparison-inner {
    background: transparent;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

@media (min-width: 1440px) {
    .comparison-card {
        /* max-width removido - ahora se maneja desde section-container */
    }
}

/* Headers de la tabla */
.comparison-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: rgba(32, 178, 170, 0.05);
    border-bottom: 1px solid var(--color-border);
}

.header-cell {
    padding: var(--spacing-sm);
    font-weight: 700;
    font-size: var(--font-size-lg);
    color: var(--color-text);
    text-align: left;
}

.header-cell:first-child {
    border-right: 1px solid var(--color-border);
}

/* Filas de comparación */
.comparison-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--color-border);
    transition: background-color 0.3s ease;
}

.comparison-row:nth-child(even) {
    background-color: var(--color-background);
}

/* Fondo fijo para las filas 2, 4 y 6 (segundo, cuarto y sexto div) */
.comparison-row:nth-child(2),
.comparison-row:nth-child(4),
.comparison-row:nth-child(6) {
    background-color: rgba(32, 178, 170, 0.05) !important;
}

.comparison-row:hover {
    background-color: rgba(32, 178, 170, 0.05);
}

.comparison-row:last-child {
    border-bottom: none;
}

.comparison-cell {
    padding: var(--spacing-sm);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    font-size: var(--font-size-base);
    line-height: 1.6;
    text-align: left;
}

.comparison-cell:first-child {
    border-right: 1px solid var(--color-border);
}

/* Iconos */
.icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

.icon-check {
    color: var(--color-green);
}

.icon-x {
    color: var(--color-red);
}

/* Screen Reader Only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus States */
.comparison-row:focus-within {
    outline: 2px solid var(--color-teal);
    outline-offset: -2px;
}

/* Animaciones */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .comparison-card {
        padding: 2rem 1.5rem;
    }
}

@media (max-width: 768px) {
    .section-container {
        padding: 0 var(--spacing-sm);
    }

    .why-module-title {
        font-size: 2rem;
    }

    .why-module-description {
        font-size: 1.1125rem;
    }

    /* Mantener dos columnas pero ajustar espaciado y tamaños */
    .comparison-card {
        padding: 1.5rem 1rem;
        max-width: 95%;
    }

    .comparison-header,
    .comparison-row {
        grid-template-columns: 1fr 1fr;
        /* Mantener dos columnas */
    }

    .header-cell,
    .comparison-cell {
        padding: var(--spacing-sm);
    }

    /* Ajustar el tamaño de los iconos para móvil */
    .icon {
        width: 16px;
        height: 16px;
        margin-top: 1px;
    }
}

@media (max-width: 575px) {

    .why-module {
        padding: 0 !important;
    }

    .why-module-container {
        min-height: auto;
    }

    .comparison-card {
        padding: 1rem 0.5rem;
        max-width: 98%;
    }

    .comparison-header,
    .comparison-row {
        grid-template-columns: 1fr 1fr;
        /* Mantener dos columnas */
    }

    .header-cell,
    .comparison-cell {
        padding: 0.5rem;
        line-height: 1.4;
    }

    /* Iconos más pequeños para pantallas muy pequeñas */
    .icon {
        width: 14px;
        height: 14px;
        margin-top: 1px;
    }

    /* Ajustar el gap entre icono y texto */
    .comparison-cell {
        gap: 0.25rem;
    }
}

/* Ajustes adicionales para pantallas muy pequeñas */
@media (max-width: 360px) {
    .comparison-card {
        padding: 0.75rem 0.25rem;
    }

    .header-cell,
    .comparison-cell {
        padding: 0.25rem;
    }

    .icon {
        width: 12px;
        height: 12px;
    }
}

/* High Contrast Support */
@media (prefers-contrast: high) {
    :root {
        --color-text: #000000;
        --color-background: #FFFFFF;
        --color-border: #000000;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}