/* =================================================================
   1. VARIABLES Y ESTILOS BASE
   ================================================================= */

/* -- Definimos la paleta de colores y fuentes en un solo lugar -- */
:root {
    --color-primario: #00796b; /* Un verde azulado elegante */
    --color-primario-oscuro: #004d40;
    --color-secundario: #4db6ac; /* Un verde más claro para acentos */
    --color-fondo: #f4f7f6;
    --color-superficie: #ffffff; /* Para las tarjetas */
    --color-texto-principal: #212121;
    --color-texto-secundario: #5f5f5f;
    --color-blanco: #ffffff;
    --color-borde: #e0e0e0;
    
    --color-ventaja: #2e7d32; /* Verde para éxito */
    --color-desventaja: #c62828; /* Rojo para desventaja */
    --color-advertencia: #ff8f00; /* Naranja para advertencia */
    --color-whatsapp: #25D366;

    --fuente-principal: 'Roboto', sans-serif;
    --fuente-titulos: 'Poppins', sans-serif;

    --sombra-suave: 0 4px 15px rgba(0, 0, 0, 0.08);
    --radio-borde: 8px;
}

/* -- Reset y estilos globales -- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--fuente-principal);
    background-color: var(--color-fondo);
    color: var(--color-texto-principal);
    line-height: 1.6;
}

.contenedor {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

.seccion-titulo {
    font-family: var(--fuente-titulos);
    font-size: 2.5rem;
    color: var(--color-primario-oscuro);
    text-align: center;
    margin-bottom: 2rem;
}


/* =================================================================
   2. COMPONENTES REUTILIZABLES (Botones)
   ================================================================= */

.btn {
    display: inline-block;
    padding: 12px 28px;
    font-family: var(--fuente-titulos);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    border-radius: var(--radio-borde);
    border: 2px solid transparent;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
}

.btn-primario {
    background-color: var(--color-primario);
    color: var(--color-blanco);
}
.btn-primario:hover {
    background-color: var(--color-primario-oscuro);
    transform: translateY(-3px);
    box-shadow: var(--sombra-suave);
}

.btn-secundario {
    background-color: transparent;
    color: var(--color-primario);
    border-color: var(--color-primario);
}
.btn-secundario:hover {
    background-color: var(--color-primario);
    color: var(--color-blanco);
    transform: translateY(-3px);
}

.btn-whatsapp {
    background-color: var(--color-whatsapp);
    color: var(--color-blanco);
}
.btn-whatsapp:hover {
    background-color: #128C7E; /* Tono más oscuro de WhatsApp */
    transform: translateY(-3px);
    box-shadow: var(--sombra-suave);
}


/* =================================================================
   3. ESTILOS DE SECCIONES
   ================================================================= */

/* -- Hero (Cabecera principal) -- */
.hero {
    background-color: var(--color-primario-oscuro);
    color: var(--color-blanco);
    padding: 80px 0;
    text-align: center;
}
.hero-subtitulo {
    font-family: var(--fuente-titulos);
    font-size: 1.2rem;
    color: var(--color-secundario);
    margin-bottom: 0.5rem;
}
.hero-titulo {
    font-family: var(--fuente-titulos);
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.hero-descripcion {
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto;
    opacity: 0.9;
}

/* -- Sección de Productos -- */
.productos-seccion {
    padding: 60px 0;
}

.grid-dos-columnas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.producto-card {
    background-color: var(--color-superficie);
    border-radius: var(--radio-borde);
    box-shadow: var(--sombra-suave);
    padding: 30px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.producto-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.producto-header {
    margin-bottom: 20px;
    border-bottom: 1px solid var(--color-borde);
    padding-bottom: 20px;
}

.producto-titulo {
    font-family: var(--fuente-titulos);
    font-size: 1.5rem;
    color: var(--color-primario-oscuro);
    margin-bottom: 0.5rem;
}

.producto-precio {
    font-size: 1.1rem;
    color: var(--color-texto-secundario);
}
.producto-precio span {
    font-family: var(--fuente-titulos);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primario);
}

.producto-beneficios {
    list-style: none;
    margin-bottom: 30px;
    flex-grow: 1; /* Empuja el botón hacia abajo */
}
.producto-beneficios li {
    margin-bottom: 12px;
    padding-left: 25px;
    position: relative;
}
.producto-beneficios li::before {
    content: '✓';
    color: var(--color-primario);
    font-weight: bold;
    position: absolute;
    left: 0;
}

.producto-cta {
    text-align: center;
}
.producto-cta .btn {
    width: 100%;
}


/* -- Sección de Comparativa -- */
.comparativa-seccion {
    padding: 60px 0;
    background-color: var(--color-superficie);
}

.tabla-responsive-contenedor {
    overflow-x: auto; /* Permite scroll horizontal en escritorio si es necesario */
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

thead {
    background-color: var(--color-primario-oscuro);
    color: var(--color-blanco);
    font-family: var(--fuente-titulos);
    text-align: left;
}

th, td {
    padding: 15px;
    border-bottom: 1px solid var(--color-borde);
}

th:first-child, td:first-child {
    font-weight: bold;
    color: var(--color-primario-oscuro);
}

tbody tr:nth-child(odd) {
    background-color: #fafafa;
}

tbody tr:hover {
    background-color: #f0f0f0;
}

td span {
    vertical-align: middle;
}

.icono {
    font-size: 1.2rem;
    margin-right: 10px;
    vertical-align: middle;
}
.icono-ventaja { color: var(--color-ventaja); }
.icono-desventaja { color: var(--color-desventaja); }
.icono-advertencia { color: var(--color-advertencia); }


/* -- Sección CTA Final -- */
.cta-final-seccion {
    padding: 60px 0;
    text-align: center;
}
.cta-final-seccion p {
    margin-bottom: 2rem;
    font-size: 1.1rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}


/* -- Footer -- */
.footer {
    background-color: #263238; /* Gris oscuro */
    color: var(--color-blanco);
    padding: 40px 0;
    text-align: center;
    font-size: 0.9rem;
}
.footer p {
    opacity: 0.8;
    margin-bottom: 0.5rem;
}


/* =================================================================
   4. MEDIA QUERIES (DISEÑO RESPONSIVO)
   ================================================================= */

@media (max-width: 992px) {
    .grid-dos-columnas {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .hero-titulo {
        font-size: 2.2rem;
    }
    .seccion-titulo {
        font-size: 2rem;
    }

    /* --- Magia para la tabla responsiva --- */
    .comparativa-seccion table {
        border: 0;
    }
    
    .comparativa-seccion thead {
        /* Ocultamos la cabecera tradicional */
        display: none;
    }

    .comparativa-seccion tr {
        display: block;
        margin-bottom: 25px;
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-borde);
        box-shadow: var(--sombra-suave);
    }
    
    .comparativa-seccion td {
        display: block;
        padding: 12px 15px;
        padding-left: 50%; /* Espacio para la etiqueta */
        text-align: right;
        position: relative;
        border-bottom: 1px solid var(--color-borde);
    }

    .comparativa-seccion td:last-child {
        border-bottom: 0;
    }

    /* Creamos las etiquetas usando el atributo data-label del HTML */
    .comparativa-seccion td::before {
        content: attr(data-label);
        position: absolute;
        left: 15px;
        width: calc(50% - 30px);
        text-align: left;
        font-weight: bold;
        color: var(--color-primario-oscuro);
    }

    /* El primer TD (el criterio) se convierte en la cabecera de la "tarjeta" */
    .comparativa-seccion td:first-child {
        background-color: #f1f1f1;
        text-align: center;
        padding-left: 15px;
    }
    .comparativa-seccion td:first-child::before {
        content: ""; /* No necesita etiqueta */
    }
}