/* -------------------------------------------------- */
/* Estilos Globales y Variables             */
/* -------------------------------------------------- */

/* --- Variables de Color y Diseño --- */
:root {
    --primary-color: #9C27B0;      /* Morado principal */
    --primary-color-dark: #7B1FA2; /* Morado oscuro para hovers */
    --accent-color: #E1BEE7;       /* Morado claro (acento) */
    --background-color: #121212;   /* Fondo oscuro principal */
    --surface-color: #1E1E1E;      /* Superficie ligeramente más clara (header, footer, etc.) */
    --card-color: #2D2D2D;         /* Color de fondo para tarjetas y elementos destacados */
    --text-primary-color: #FFFFFF; /* Texto principal (blanco) */
    --text-secondary-color: #B0B0B0;/* Texto secundario (gris claro) */
    --text-tertiary-color: #757575; /* Texto terciario (gris más oscuro para detalles) */
    --border-color: #424242;       /* Color de bordes sutiles */
    --success-color: #4CAF50;      /* Verde para mensajes de éxito */
    --warning-color: #FFC107;      /* Amarillo para advertencias */
    --error-color: #F44336;        /* Rojo para errores o acciones destructivas */
    --info-color: #2196F3;         /* Azul para información */
}

/* --- Reseteo Básico y Estilos Base --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Modelo de caja consistente */
}

html {
    scroll-behavior: smooth; /* Desplazamiento suave al hacer clic en anclas */
}

body {
    font-family: 'Poppins', sans-serif; /* Fuente principal */
    background-color: var(--background-color);
    color: var(--text-primary-color);
    line-height: 1.6; /* Espaciado de línea legible */
    padding-top: 80px; /* Espacio reservado para el header fijo */
    /* Evitar que el padding superior afecte a páginas sin header fijo (si las hubiera) */
    /* Se puede ajustar por página si es necesario */
}

/* --- Contenedor Principal --- */
.container {
    width: 90%; /* Ancho relativo */
    max-width: 1200px; /* Ancho máximo general */
    margin: 0 auto; /* Centrado horizontal */
    padding: 0 1rem; /* Espaciado lateral pequeño */
}

/* --- Títulos --- */
h1 {
    font-size: 2.8rem;
    margin-bottom: 1rem;
    color: var(--text-primary-color);
    font-weight: 700;
    text-align: center; /* Centrar H1 por defecto en páginas internas */
    padding-top: 2rem; /* Espacio superior */
}

h2 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary-color);
    padding-top: 4rem; /* Espacio superior generoso para separar secciones */
    text-align: center;
    font-weight: 600;
    border-bottom: 2px solid var(--primary-color); /* Línea decorativa */
    display: inline-block; /* Ajustar borde al texto */
    padding-bottom: 0.5rem;
    /* Centrar el bloque h2 */
    margin-left: auto;
    margin-right: auto;
    display: block; /* Ocupar ancho para centrar */
}

h3 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    color: var(--text-primary-color);
    padding-top: 1rem;
    font-weight: 600;
}

h4 { /* Usado en tarjetas (blog, tests) */
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
    color: var(--text-primary-color);
    font-weight: 600;
    transition: color 0.3s ease; /* Efecto hover en títulos de tarjeta */
}

/* --- Párrafos y Texto General --- */
p {
    margin-bottom: 1.5rem;
    color: var(--text-secondary-color);
    font-size: 1rem;
}

a { /* Estilo base para enlaces */
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--primary-color-dark);
    text-decoration: none; /* Evitar subrayado por defecto en hover */
}

/* --- Botones --- */
.btn {
    display: inline-block;
    background-color: var(--primary-color);
    color: white;
    padding: 0.9rem 1.8rem; /* Tamaño generoso */
    border-radius: 25px; /* Bordes redondeados */
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: none;
    cursor: pointer;
    text-transform: uppercase; /* Texto en mayúsculas */
    letter-spacing: 0.5px; /* Ligero espaciado */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra sutil */
    text-align: center;
}

.btn:hover {
    background-color: var(--primary-color-dark);
    transform: translateY(-2px); /* Efecto levantar al pasar el ratón */
}

.btn-outline {
    background-color: transparent;
    border: 2px solid var(--primary-color); /* Borde más grueso */
    color: var(--primary-color);
    box-shadow: none; /* Sin sombra */
}

.btn-outline:hover {
    background-color: var(--primary-color);
    color: white;
    transform: translateY(-2px);
}

/* Modificador para botones de error/peligro */
.btn.error, .btn-outline.error {
    background-color: var(--error-color);
    border-color: var(--error-color);
    color: white;
}
.btn.error:hover {
     background-color: #D32F2F; /* Rojo más oscuro */
     border-color: #D32F2F;
}
.btn-outline.error {
    background-color: transparent;
    color: var(--error-color);
}
.btn-outline.error:hover {
    background-color: var(--error-color);
    color: white;
}


/* --- Secciones Generales --- */
section {
    padding: 5rem 0; /* Espaciado vertical por defecto para secciones principales */
}

/* Ajuste para páginas internas (blog, faq, etc.) */
body:not(.home) section { /* Asumiendo que añades class="home" al body de index.html */
     padding: 3rem 0;
}
/* O una clase específica para secciones internas */
.internal-section {
    padding: 3rem 0;
}


.section-intro { /* Párrafo introductorio centrado */
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem auto; /* Centrado y con margen inferior */
    color: var(--text-secondary-color);
}

/* -------------------------------------------------- */
/* Cabecera (Header)                  */
/* -------------------------------------------------- */

header {
    background-color: var(--surface-color);
    padding: 1rem 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* Sombra inferior */
    position: fixed; /* Fijo en la parte superior */
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000; /* Asegurar que esté por encima de otros elementos */
}

nav {
    display: flex;
    justify-content: space-between; /* Logo a la izquierda, links a la derecha */
    align-items: center; /* Alineación vertical */
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
}

.nav-links {
    display: flex;
    list-style: none;
}

.nav-links li {
    margin-left: 1.5rem; /* Espacio entre elementos del menú */
}

.nav-links a {
    color: var(--text-secondary-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
    padding: 0.5rem 0; /* Área de clic vertical */
}

.nav-links a:hover,
.nav-links a.active { /* Estilo para el enlace activo */
    color: var(--primary-color);
}

/* --- Menú Hamburguesa (Móvil) --- */
.menu-toggle {
    display: none; /* Oculto en escritorio */
    flex-direction: column;
    cursor: pointer;
    padding: 0.5rem; /* Área de clic */
}

.menu-toggle span {
    height: 3px;
    width: 25px;
    background-color: var(--text-primary-color);
    margin-bottom: 4px;
    border-radius: 2px;
    transition: all 0.3s ease;
}
.menu-toggle span:last-child {
    margin-bottom: 0;
}

/* Animación de la hamburguesa a 'X' (opcional) */
.menu-toggle.is-active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
}
.menu-toggle.is-active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}


/* -------------------------------------------------- */
/* Pie de Página (Footer)            */
/* -------------------------------------------------- */

footer {
    background-color: var(--surface-color);
    color: var(--text-secondary-color);
    padding: 3rem 0 2rem 0; /* Espaciado interno */
    text-align: center;
    margin-top: 4rem; /* Separación de la última sección */
    border-top: 1px solid var(--border-color); /* Línea superior sutil */
}

.footer-logo {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    display: block;
    margin-bottom: 1.5rem;
}

.footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Para que los enlaces se ajusten en pantallas pequeñas */
    gap: 1rem 2rem; /* Espacio vertical y horizontal entre enlaces */
    margin-bottom: 1.5rem;
    list-style: none;
    padding: 0;
}

.footer-links a {
    color: var(--text-secondary-color);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--primary-color);
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem; /* Espacio entre iconos sociales */
    margin-bottom: 1.5rem;
}

.social-links a {
    color: var(--text-secondary-color);
    font-size: 1.5rem; /* Tamaño de los iconos */
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-links a:hover {
    color: var(--primary-color);
    transform: scale(1.1); /* Efecto de zoom ligero */
}

.copyright {
    font-size: 0.85rem;
    color: var(--text-tertiary-color);
    margin-top: 1.5rem;
}

/* -------------------------------------------------- */
/* Estilos Específicos por Sección          */
/* -------------------------------------------------- */

/* --- Sección Hero (Página Principal) --- */
.hero {
    min-height: 100vh; /* Ocupar al menos toda la altura de la pantalla */
    display: flex;
    align-items: center; /* Centrar contenido verticalmente */
    /* Imagen de fondo con gradiente oscuro superpuesto */
    background: linear-gradient(to bottom, rgba(18, 18, 18, 0.8), rgba(18, 18, 18, 1)), url('https://placehold.co/1200x800/333333/555555?text=Conexiones+Discretas') center/cover no-repeat;
    padding-top: 80px; /* Compensar header fijo (ya está en body, pero se puede ajustar aquí si es necesario) */
}

.hero-content {
    width: 60%; /* Ancho del contenido en escritorio */
    animation: fadeIn 1s ease-in-out; /* Animación sutil de entrada */
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.logo-container {
    display: flex;
    justify-content: flex-start; /* Alineado a la izquierda en escritorio */
    margin-bottom: 1.5rem;
}

.app-logo {
    width: 100px;
    height: auto;
    background-color: transparent; /* Asegurar transparencia */
    border: none;
    display: block;
    border-radius: 8px; /* Opcional: redondear esquinas si es cuadrado */
}

.hero h1 { /* Estilo específico para H1 en Hero */
    text-align: left; /* Alinear a la izquierda en escritorio */
    padding-top: 0; /* Quitar padding superior extra */
}

.hero p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

/* --- Sección Características (Features) --- */
.features {
    background-color: var(--surface-color); /* Fondo ligeramente diferente */
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Columnas responsivas */
    gap: 2rem;
}

.feature-card {
    background-color: var(--card-color);
    padding: 2.5rem 2rem;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

.feature-card:hover {
    transform: translateY(-5px); /* Levantar tarjeta al pasar el ratón */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); /* Sombra más pronunciada */
}

.feature-card i { /* Estilo para iconos FontAwesome */
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    display: block;
}

.feature-card h3 {
    color: var(--text-primary-color);
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

/* --- Sección Legal --- */
.legal-section {
    background-color: var(--background-color); /* Fondo principal */
}

.legal-content {
    background-color: var(--card-color);
    padding: 3rem;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    margin-top: 2rem;
}

.legal-content h3 {
    text-align: center;
}

.legal-content ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap; /* Ajuste en pantallas pequeñas */
    justify-content: center; /* Centrar botones */
    gap: 1rem; /* Espacio entre botones */
    margin-top: 1.5rem;
}

.legal-content li {
    margin-bottom: 0;
}

/* --- Formularios (Contacto y Eliminación de Datos) --- */
.contact-form, .delete-form {
    display: grid;
    gap: 1.5rem; /* Espacio entre campos */
    max-width: 600px;
    margin: 3rem auto 0 auto; /* Centrar formulario */
    background-color: var(--card-color);
    padding: 2.5rem;
    border-radius: 16px;
    border: 1px solid var(--border-color);
}

.form-group {
    display: flex;
    flex-direction: column; /* Label encima del input */
}

label {
    margin-bottom: 0.5rem;
    color: var(--text-secondary-color);
    font-weight: 500;
    font-size: 0.9rem;
}

input[type="text"],
input[type="email"],
textarea,
select {
    padding: 0.9rem 1.2rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--surface-color); /* Fondo diferente para inputs */
    color: var(--text-primary-color);
    font-family: 'Poppins', sans-serif; /* Heredar fuente */
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
    outline: none; /* Quitar borde por defecto del navegador */
    border-color: var(--primary-color); /* Resaltar borde al enfocar */
}

textarea {
    resize: vertical; /* Permitir redimensionar solo verticalmente */
    min-height: 100px; /* Altura mínima */
}

select {
    appearance: none; /* Quitar estilo por defecto del navegador */
    /* Flecha personalizada */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23B0B0B0' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
    padding-right: 2.5rem; /* Espacio para la flecha */
}

/* Botón dentro de un formulario */
form button.btn {
    justify-self: center; /* Centrar botón horizontalmente en el grid */
    width: fit-content; /* Ajustar ancho al texto */
    margin-top: 1rem; /* Espacio superior */
}

/* Mensajes de confirmación de formulario */
#contact-confirmation, #delete-confirmation {
    display: none; /* Ocultos por defecto */
    text-align: center;
    margin-top: 1.5rem;
    padding: 1rem;
    border-radius: 8px;
}
#contact-confirmation {
    color: var(--success-color);
    background-color: rgba(76, 175, 80, 0.1); /* Fondo verde sutil */
    border: 1px solid var(--success-color);
}
#delete-confirmation {
    color: var(--info-color);
    background-color: rgba(33, 150, 243, 0.1); /* Fondo azul sutil */
    border: 1px solid var(--info-color);
}


/* --- Sección Blog Listing (blog.html) --- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Columnas responsivas */
    gap: 2.5rem; /* Espacio entre tarjetas */
    margin-top: 3rem;
}

.blog-card {
    background-color: var(--card-color);
    border-radius: 16px;
    overflow: hidden; /* Para que la imagen no se salga */
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column; /* Imagen arriba, contenido abajo */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.blog-card:hover h4 {
    color: var(--primary-color); /* Resaltar título al pasar el ratón */
}

.blog-card-image img {
    width: 100%;
    height: 200px; /* Altura fija para la imagen */
    object-fit: cover; /* Escalar imagen para cubrir el espacio */
    display: block; /* Quitar espacio extra debajo de la imagen */
    border-bottom: 1px solid var(--border-color); /* Línea sutil opcional */
}

.blog-card-content {
    padding: 1.5rem;
    flex-grow: 1; /* Ocupar espacio vertical restante */
    display: flex;
    flex-direction: column; /* Alinear elementos internos verticalmente */
}

.blog-card-content p {
    font-size: 0.95rem;
    color: var(--text-secondary-color);
    margin-bottom: 1rem;
    flex-grow: 1; /* Empujar el footer hacia abajo */
}

.blog-card-footer {
    margin-top: auto; /* Asegurar que el footer esté al final */
    padding-top: 1rem;
    border-top: 1px solid var(--border-color); /* Línea separadora */
    display: flex;
    justify-content: space-between; /* Fecha a la izquierda, enlace a la derecha */
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-tertiary-color);
}

.blog-card-footer .read-more {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}
.blog-card-footer .read-more:hover {
    color: var(--primary-color-dark);
}
.blog-card-footer .read-more i { /* Icono flecha */
    margin-left: 0.3rem;
    font-size: 0.8em;
}

.blog-card-footer .post-date {
    display: flex;
    align-items: center;
    gap: 0.3rem; /* Espacio entre icono y fecha */
}
.blog-card-footer .post-date i { /* Icono calendario */
     font-size: 0.9em;
}

/* --- Sección Tests Virales (tests.html) --- */
.tests-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.test-card {
    background-color: var(--card-color);
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid var(--border-color);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Alinear botón abajo */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.test-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.test-card i { /* Icono del test */
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.test-card h4 {
    margin-bottom: 1rem;
}

.test-card p {
    font-size: 0.95rem;
    color: var(--text-secondary-color);
    margin-bottom: 1.5rem;
    flex-grow: 1; /* Ocupar espacio */
}

.test-card .btn {
    margin-top: auto; /* Empujar botón abajo */
}

/* --- Sección FAQ (faq.html) --- */
.faq-section .container {
     max-width: 1000px; /* Contenedor más ancho para FAQ */
}

.faq-section h2 { /* Títulos de categoría FAQ */
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: var(--primary-color);
    padding-top: 3rem;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
    text-align: left; /* Alinear a la izquierda */
    border-bottom-style: dashed; /* Estilo de línea diferente */
    display: block; /* Asegurar que ocupe el ancho */
}

.faq-item {
    background-color: var(--card-color);
    margin-bottom: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    overflow: hidden; /* Necesario para la animación de altura */
}

.faq-question {
    padding: 1.2rem 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between; /* Título a la izquierda, icono a la derecha */
    align-items: center;
    transition: background-color 0.3s ease;
}
.faq-question:hover {
    background-color: rgba(255, 255, 255, 0.05); /* Sutil hover */
}

.faq-question h3 { /* Ajustes para el título de la pregunta */
    margin-bottom: 0;
    padding-top: 0; /* Quitar padding extra */
    font-size: 1.2rem;
    font-weight: 500;
    flex-grow: 1; /* Ocupar espacio disponible */
}

.faq-toggle-icon { /* Icono +/- */
    font-size: 1.5rem;
    color: var(--primary-color);
    transition: transform 0.3s ease;
    flex-shrink: 0; /* Evitar que se encoja */
    margin-left: 1rem; /* Espacio respecto al texto */
    font-weight: bold;
    line-height: 1; /* Ajustar línea para centrar */
}

.faq-item.active .faq-toggle-icon {
    transform: rotate(45deg); /* Gira a 'x' */
}

.faq-answer {
    max-height: 0; /* Oculto por defecto */
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out; /* Transición suave */
    background-color: var(--surface-color); /* Fondo ligeramente distinto para la respuesta */
    padding: 0 1.5rem; /* Padding horizontal inicial */
}

.faq-answer p {
    padding: 1.5rem 0; /* Padding vertical cuando está abierto */
    margin-bottom: 0;
    font-size: 0.95rem;
    color: var(--text-secondary-color);
    border-top: 1px solid var(--border-color); /* Línea separadora */
}
.faq-answer p:first-child {
    padding-top: 1.5rem; /* Asegurar padding superior */
}
.faq-answer p:last-child {
     padding-bottom: 1.5rem; /* Asegurar padding inferior */
}


.faq-item.active .faq-answer {
    max-height: 500px; /* Altura máxima estimada (ajustar si hay respuestas muy largas) */
    padding: 0 1.5rem; /* Asegurar padding horizontal */
}

/* --- Sección Comparativas (comparisons.html) --- */
.comparison-section .container {
    max-width: 1100px; /* Contenedor más ancho para la tabla */
}

.comparison-table-wrapper {
    overflow-x: auto; /* Permitir scroll horizontal en pantallas pequeñas */
    margin-top: 2rem;
    background-color: var(--card-color);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.comparison-table {
    width: 100%;
    border-collapse: collapse; /* Bordes unidos */
    min-width: 700px; /* Ancho mínimo para evitar compresión excesiva */
}

.comparison-table th,
.comparison-table td {
    padding: 1rem 1.2rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color); /* Líneas horizontales */
    vertical-align: middle; /* Alinear contenido en el medio verticalmente */
}

.comparison-table th {
    background-color: var(--surface-color);
    color: var(--text-primary-color);
    font-weight: 600;
    font-size: 1.1rem;
    white-space: nowrap; /* Evitar que los títulos se rompan */
}

.comparison-table td {
    color: var(--text-secondary-color);
    font-size: 0.95rem;
}

/* Columna de Características (primera columna) */
.comparison-table td:first-child,
.comparison-table th:first-child {
    font-weight: 500;
    color: var(--text-primary-color);
    white-space: nowrap; /* Evitar que se rompa el texto de la característica */
    width: 25%; /* Ancho fijo para la primera columna */
}

/* Columna destacada (Serena Blake - segunda columna) */
.comparison-table th:nth-child(2),
.comparison-table td:nth-child(2) {
    background-color: rgba(156, 39, 176, 0.08); /* Fondo morado muy sutil */
    border-left: 3px solid var(--primary-color); /* Borde izquierdo resaltado */
    border-right: 1px solid var(--border-color); /* Borde derecho normal */
}
.comparison-table th:nth-child(2) {
    color: var(--primary-color); /* Resaltar título de la columna */
}

/* Resaltar texto clave dentro de celdas */
.comparison-table td .highlight {
    color: var(--primary-color);
    font-weight: 600;
}
.comparison-table td .lowlight { /* Texto menos importante */
    color: var(--text-tertiary-color);
}

/* Iconos de check/cross/minus */
.comparison-table i {
    font-size: 1.2em; /* Iconos un poco más grandes */
    margin-right: 0.3rem; /* Espacio a la derecha del icono */
}
.comparison-table i.fa-check-circle { color: var(--success-color); }
.comparison-table i.fa-times-circle { color: var(--error-color); }
.comparison-table i.fa-minus-circle { color: var(--warning-color); }

/* Conclusión de la comparativa */
.conclusion {
    margin-top: 3rem;
    background-color: var(--card-color);
    padding: 2.5rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}
.conclusion h3 {
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--primary-color); /* Título de conclusión resaltado */
}
.conclusion p {
    text-align: center;
    margin-bottom: 2rem;
    max-width: 800px; /* Limitar ancho del texto */
    margin-left: auto;
    margin-right: auto;
}
.conclusion .btn {
    display: block; /* Hacer que el botón ocupe su línea */
    width: fit-content; /* Ajustar ancho */
    margin: 0 auto; /* Centrar botón */
}


/* -------------------------------------------------- */
/* Diseño Responsivo                 */
/* -------------------------------------------------- */

/* --- Tablets y pantallas medianas --- */
@media (max-width: 992px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    .hero-content { width: 80%; } /* Más ancho en tablets */
}

/* --- Móviles grandes y tablets pequeñas --- */
@media (max-width: 768px) {
    body { padding-top: 60px; } /* Ajustar padding si el header cambia de altura */

    .nav-links {
        display: none; /* Ocultar menú normal */
        position: absolute;
        top: 60px; /* Debajo del header (ajustar si la altura del header cambia) */
        left: 0;
        width: 100%;
        background-color: var(--surface-color);
        flex-direction: column; /* Menú vertical */
        align-items: center;
        padding: 1rem 0;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para el menú desplegado */
        border-top: 1px solid var(--border-color);
    }

    .nav-links.active { /* Mostrar menú al hacer clic en hamburguesa */
        display: flex;
    }

    .nav-links li {
        margin: 1rem 0; /* Espacio vertical entre elementos */
        margin-left: 0;
    }

    .menu-toggle {
        display: flex; /* Mostrar botón hamburguesa */
    }

    .hero {
        padding-top: 100px; /* Más padding superior en móvil */
        text-align: center; /* Centrar texto del hero */
    }

    .hero-content {
        width: 100%; /* Ocupar todo el ancho */
    }
    .hero h1 {
        text-align: center; /* Centrar H1 en móvil */
    }

    .logo-container {
        justify-content: center; /* Centrar logo en móvil */
    }

    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }

    section, .internal-section { padding: 2rem 0; } /* Menos padding vertical en móvil */

    .features-grid { grid-template-columns: 1fr; } /* Una columna */
    .blog-grid { grid-template-columns: 1fr; gap: 2rem; }
    .tests-grid { grid-template-columns: 1fr; gap: 2rem; }

    .contact-form, .delete-form { padding: 2rem; }
    .legal-content { padding: 2rem; }
    .conclusion { padding: 2rem; }

    /* FAQ en móvil */
    .faq-section .container { max-width: 90%; } /* Ajustar ancho */
    .faq-question { padding: 1rem 1.2rem; }
    .faq-question h3 { font-size: 1.1rem; }
    .faq-answer p { font-size: 0.9rem; }

    /* Tabla comparativa en móvil */
    .comparison-table th, .comparison-table td { padding: 0.8rem; font-size: 0.9rem; }
    .comparison-table th { font-size: 1rem; }
    .comparison-table td:first-child, .comparison-table th:first-child { width: auto; } /* Ancho automático en móvil */


    footer { padding: 2rem 0 1.5rem 0; }
    .footer-links { gap: 0.8rem 1.5rem; }
}

/* --- Móviles pequeños --- */
@media (max-width: 480px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.6rem; }
    h3 { font-size: 1.2rem; }
    h4 { font-size: 1.1rem; }

    .btn { padding: 0.8rem 1.5rem; font-size: 0.9rem; }

    .contact-form, .delete-form { padding: 1.5rem; }
    .legal-content { padding: 1.5rem; }
    .conclusion { padding: 1.5rem; }

    input, select, textarea { padding: 0.8rem 1rem; font-size: 0.9rem; }

    .blog-card-content { padding: 1.2rem; }
    .blog-card-footer { font-size: 0.8rem; }

    .test-card { padding: 1.5rem; }

    .faq-question h3 { font-size: 1rem; }

    .comparison-table th, .comparison-table td { padding: 0.6rem; font-size: 0.85rem; }
    .comparison-table th { font-size: 0.9rem; }
}