/* styles.css - Estilos específicos para la landing page (index.html) */

/* Importa variables y estilos base si no están ya en base.css */
/* @import url('./base.css'); */

/* -------------------------------------------------------------------
 * Estilos Generales de la Landing Page
 * ------------------------------------------------------------------- */
body {
    font-family: var(--font-sans); /* Usa la variable de fuente definida en base.css */
    line-height: 1.6;
    color: var(--color-gray-800); /* Color de texto principal */
    background-color: var(--color-white); /* Fondo blanco */
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Evita scroll horizontal */
}

.container {
    width: 90%; /* Ancho del contenedor principal */
    max-width: 1200px; /* Ancho máximo */
    margin: 0 auto; /* Centra el contenedor */
}

section {
    padding: var(--space-8) 0; /* Espacio vertical para secciones */
}

.text-center {
    text-align: center;
}

.mb-8 { margin-bottom: var(--space-8); }
.mb-6 { margin-bottom: var(--space-6); }
.mt-6 { margin-top: var(--space-6); }

/* Reutiliza estilos de botones de base.css */
/* .btn { ... } */
/* .btn-primary { ... } */
/* .btn-outline { ... } */
/* .btn-lg { ... } */


/* -------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------- */
.site-header {
    background-color: var(--color-white);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4) 0; /* Espacio vertical */
    position: sticky; /* Header pegajoso al hacer scroll */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Asegura que esté encima de otros elementos */
}

.site-header__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4); /* Espacio entre logo, nav y acciones */
}

.site-logo img {
    height: 40px; /* Altura del logo */
    width: auto;
}

.site-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: var(--space-4); /* Espacio entre elementos de navegación */
}

.site-nav a {
    text-decoration: none;
    color: var(--color-gray-700);
    font-weight: 500;
    transition: color 0.2s ease-in-out;
}

.site-nav a:hover {
    color: var(--color-primary);
}

.header-actions {
    display: flex;
    gap: var(--space-3); /* Espacio entre botones de acción */
}

/* -------------------------------------------------------------------
 * Hero Section (Estilo Minimalista con Fondo Blanco)
 * ------------------------------------------------------------------- */
.hero-section--minimal {
    /* Fondo blanco (ya es el fondo del body, pero lo aseguramos) */
    background-color: var(--color-white);
    padding: var(--space-10) 0; /* Mayor espacio vertical */
    text-align: left; /* Alineación de texto por defecto */
}

.hero-section--minimal .hero-content {
    display: flex;
    align-items: center;
    gap: var(--space-8); /* Espacio entre texto e imagen */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en móvil */
}

.hero-section--minimal .hero-text {
    flex: 1; /* Permite que el texto ocupe espacio */
    min-width: 300px; /* Ancho mínimo para el texto */
}

.hero-section--minimal .hero-text h1 {
    font-size: 2.5rem; /* Tamaño del título principal */
    margin-top: 0;
    margin-bottom: var(--space-4);
    color: var(--color-black); /* Color oscuro para el título en fondo blanco */
    line-height: 1.2;
}

.hero-section--minimal .hero-text p {
    font-size: 1.2rem; /* Tamaño del subtítulo */
    color: var(--color-gray-700);
    margin-bottom: var(--space-6);
}

.hero-section--minimal .hero-actions {
    display: flex;
    gap: var(--space-3); /* Espacio entre botones */
    flex-wrap: wrap; /* Permite que los botones se envuelvan */
}

.hero-section--minimal .hero-image {
    flex: 1; /* Permite que la imagen ocupe espacio */
    text-align: center; /* Centra la imagen si es más pequeña que su contenedor */
    min-width: 300px; /* Ancho mínimo para la imagen */
}

.hero-section--minimal .hero-image img {
    max-width: 100%; /* Asegura que la imagen no se salga del contenedor */
    height: auto;
    border-radius: 1rem; /* Bordes redondeados para la imagen */
    box-shadow: var(--shadow-lg); /* Sombra para la imagen */
}


/* -------------------------------------------------------------------
 * Features Section
 * ------------------------------------------------------------------- */
.features-section {
    background-color: var(--color-gray-100); /* Fondo gris claro */
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Columnas flexibles */
    gap: var(--space-6); /* Espacio entre items */
}

.feature-item {
    /* Reutiliza estilos de card de base.css o dashboard.css */
    padding: var(--space-4);
    background-color: var(--color-white); /* Fondo blanco para cada feature */
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    text-align: center; /* Centra contenido */
    position: relative; /* Para los puntos */
}

.feature-item .card-header {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: flex;
  gap: var(--space-1);
}
.feature-item .card-header .dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  display: inline-block;
}
.feature-item .card-header .red    { background: #FF5B5B; } /* Rojo */
.feature-item .card-header .yellow { background: #F5A623; } /* Amarillo */
.feature-item .card-header .green  { background: #37D67A; } /* Verde */


.feature-icon {
    font-size: 3rem; /* Tamaño del icono */
    margin-bottom: var(--space-3);
}

.feature-item h3 {
    font-size: 1.3rem;
    margin-top: 0;
    margin-bottom: var(--space-2);
    color: var(--color-black);
}

.feature-item p {
    font-size: var(--font-size-base);
    color: var(--color-gray-700);
}


/* -------------------------------------------------------------------
 * Comparison Section (Usando estructura proporcionada)
 * ------------------------------------------------------------------- */
.compare-section {
     background-color: var(--color-white); /* Fondo blanco */
}

.compare-cards-container {
    display: flex; /* Usar flexbox para las tarjetas */
    gap: var(--space-6); /* Espacio entre las tarjetas */
    flex-wrap: wrap; /* Permite que las tarjetas se envuelvan */
    justify-content: center; /* Centra las tarjetas si se envuelven */
}

.compare-card {
    flex: 1; /* Permite que las tarjetas ocupen espacio */
    min-width: 300px; /* Ancho mínimo */
    max-width: 450px; /* Ancho máximo */
    background-color: var(--color-gray-100); /* Fondo gris claro para las tarjetas de comparación */
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    position: relative; /* Para el header */
}

.compare-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-gray-200);
    margin-bottom: var(--space-4);
}

.compare-card__title {
    font-size: 1.4rem;
    margin: 0;
    color: var(--color-black);
}

.compare-card__status {
    font-size: 1.5rem;
}

.compare-card--traditional .compare-card__status {
    color: var(--color-secondary); /* Rojo para negativo */
}

.compare-card--whatstime .compare-card__status {
    color: var(--color-primary); /* Verde o color primario para positivo */
}

.compare-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1; /* Permite que la lista ocupe el espacio restante */
}

.compare-list li {
    display: flex;
    align-items: flex-start; /* Alinea items al inicio */
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.compare-list .list-icon {
    font-size: 1.2rem;
    flex-shrink: 0; /* Evita que el icono se encoja */
}

.compare-card--traditional .list-icon {
    color: var(--color-secondary); /* Rojo */
}

.compare-card--whatstime .list-icon {
    color: var(--color-primary); /* Verde o color primario */
}


.compare-list .list-text {
    flex-grow: 1; /* Permite que el texto ocupe espacio */
}

.compare-list .list-text p {
    margin: 0;
    font-size: var(--font-size-base);
    color: var(--color-gray-700);
}

.compare-list .list-text p:first-child {
    font-weight: 500; /* Primer párrafo en negritas */
    color: var(--color-black);
    margin-bottom: var(--space-0-5);
}


/* -------------------------------------------------------------------
 * Contact Section
 * ------------------------------------------------------------------- */
.contact-section {
    background-color: var(--color-gray-100); /* Fondo gris claro */
}

.contact-section h2 {
    color: var(--color-black);
}

.contact-section p {
    font-size: 1.1rem;
    color: var(--color-gray-700);
}

.contact-section .btn {
    /* Reutiliza estilos de botones */
}


/* -------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------- */
.site-footer {
    background-color: var(--color-gray-800); /* Fondo oscuro */
    color: var(--color-gray-300); /* Color de texto claro */
    padding: var(--space-4) 0; /* Espacio vertical */
    font-size: var(--font-size-sm);
    text-align: center;
}

.site-footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Permite envolver en móvil */
    gap: var(--space-3); /* Espacio entre elementos */
}

.site-footer p {
    margin: 0;
}

.site-footer .footer-links a {
    color: var(--color-gray-300);
    text-decoration: none;
    margin-left: var(--space-3); /* Espacio entre enlaces */
    transition: color 0.2s ease-in-out;
}

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


/* -------------------------------------------------------------------
 * Ajustes Responsive
 * ------------------------------------------------------------------- */
@media (max-width: 768px) {
    .container {
        width: 95%; /* Aumenta ancho en móvil */
    }

    section {
        padding: var(--space-6) 0; /* Reduce espacio vertical en móvil */
    }

    .mb-8 { margin-bottom: var(--space-6); }
    .mb-6 { margin-bottom: var(--space-4); }
    .mt-6 { margin-top: var(--space-4); }

    /* Header Responsive */
    .site-header__content {
        flex-direction: column; /* Apila elementos en móvil */
        gap: var(--space-3);
    }
     .site-logo {
         margin-bottom: var(--space-2);
     }
    .site-nav ul {
        gap: var(--space-3); /* Reduce espacio entre nav items */
        justify-content: center; /* Centra nav items */
    }
     .site-nav a {
         font-size: var(--font-size-sm); /* Reduce tamaño de fuente */
     }
    .header-actions {
        gap: var(--space-2); /* Reduce espacio entre botones */
        justify-content: center; /* Centra botones */
        width: 100%; /* Ocupa todo el ancho */
    }
     .header-actions .btn {
         flex: 1; /* Permite que los botones se estiren */
         text-align: center;
     }


    /* Hero Section Responsive */
    .hero-section--minimal {
        padding: var(--space-8) 0; /* Ajusta padding */
    }
    .hero-section--minimal .hero-content {
        flex-direction: column; /* Apila texto e imagen */
        gap: var(--space-6);
    }
    .hero-section--minimal .hero-text {
        min-width: auto; /* Elimina ancho mínimo */
        text-align: center; /* Centra texto en móvil */
    }
    .hero-section--minimal .hero-text h1 {
        font-size: 2rem; /* Reduce tamaño del título */
        margin-bottom: var(--space-3);
    }
    .hero-section--minimal .hero-text p {
        font-size: 1rem; /* Reduce tamaño del subtítulo */
        margin-bottom: var(--space-4);
    }
    .hero-section--minimal .hero-actions {
        justify-content: center; /* Centra botones */
        width: 100%;
    }
     .hero-section--minimal .hero-actions .btn {
         flex: 1; /* Estira botones */
         text-align: center;
     }
    .hero-section--minimal .hero-image {
        min-width: auto; /* Elimina ancho mínimo */
    }


    /* Features Section Responsive */
    .features-grid {
        gap: var(--space-4); /* Reduce espacio */
    }
    .feature-item {
        padding: var(--space-3); /* Reduce padding */
        gap: var(--space-2); /* Reduce espacio */
    }
    .feature-item .card-header {
        top: var(--space-2);
        right: var(--space-2);
        gap: var(--space-0-5);
    }
    .feature-item .card-header .dot {
        width: 0.4rem;
        height: 0.4rem;
    }
    .feature-icon {
        font-size: 2.5rem; /* Reduce tamaño icono */
        margin-bottom: var(--space-2);
    }
    .feature-item h3 {
        font-size: 1.1rem; /* Reduce tamaño título */
        margin-bottom: var(--space-1);
    }
    .feature-item p {
        font-size: var(--font-size-sm); /* Reduce tamaño texto */
    }


    /* Comparison Section Responsive */
    .compare-cards-container {
        gap: var(--space-4); /* Reduce espacio */
        flex-direction: column; /* Apila tarjetas */
        align-items: center; /* Centra tarjetas apiladas */
    }
    .compare-card {
        min-width: auto; /* Elimina ancho mínimo */
        width: 95%; /* Ocupa casi todo el ancho */
        max-width: none; /* Elimina ancho máximo */
        padding: var(--space-3); /* Reduce padding */
    }
    .compare-card__header {
        padding-bottom: var(--space-2);
        margin-bottom: var(--space-3);
    }
    .compare-card__title {
        font-size: 1.2rem; /* Reduce tamaño título */
    }
    .compare-card__status {
        font-size: 1.3rem; /* Reduce tamaño icono */
    }
    .compare-list li {
        gap: var(--space-2); /* Reduce espacio */
        margin-bottom: var(--space-3);
    }
    .compare-list .list-icon {
        font-size: 1rem; /* Reduce tamaño icono */
    }
    .compare-list .list-text p {
        font-size: var(--font-size-sm); /* Reduce tamaño texto */
    }
     .compare-list .list-text p:first-child {
         margin-bottom: var(--space-0-5);
     }


    /* Contact Section Responsive */
    .contact-section p {
        font-size: 1rem; /* Reduce tamaño texto */
    }
     .contact-section .btn {
         font-size: var(--font-size-base); /* Ajusta tamaño botón */
     }


    /* Footer Responsive */
    .site-footer .container {
        flex-direction: column; /* Apila elementos */
        gap: var(--space-2);
    }
    .site-footer p {
        font-size: var(--font-size-xs); /* Reduce tamaño texto */
    }
    .site-footer .footer-links a {
        margin: 0 var(--space-2); /* Ajusta margen */
        font-size: var(--font-size-xs);
    }
}