/* ============================= */
/* ====== ESTILOS GENERALES ===== */
/* ============================= */
body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto-Black', sans-serif; /* Asegúrate de que esta fuente esté disponible */
    background: radial-gradient(circle at top right, #877AFD 2%, #222546 19%, #212240 100%);        /* Fondo general */
    color: #e6e6e6;           /* Texto general */
}

/* Contenedor general para dar padding a los lados en móvil */
.container {
    padding: 0 20px;
    max-width: 1200px; /* Ancho máximo para el contenido */
    margin: auto;
}

/* ============================= */
/* ====== NAVBAR ===== */
/* ============================= */
.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px;
    background: transparent;
    backdrop-filter: blur(8px);
}
.logo-text {
    display: flex;
    align-items: center;
    gap: 10px;
}
.logo-img {
    width: auto;
    height: 40px;
    display: block;
}
.brand {
    font-weight: 800;
    font-size: 1.4rem;
    color: #00b4ff; /* Marca */
    margin: 4px 0;
    /* transition: none; - se eliminará en la media query si es necesario */
}
.menu {
    display: flex;
    gap: 18px;
}
.menu a {
    text-decoration: none;
    color: #e6e6e6;
    font-weight: 600;
    align-content: center;
    transition: color 0.2s ease;
}
.menu a:hover {
    color: #00b4ff;
}
/* Estilos del menú hamburguesa eliminados, se gestiona su ocultamiento en la media query */


/* ============================= */
/* ====== HERO  ===== */
/* ============================= */
.hero {
    /* Usar flexbox para el diseño de dos columnas en escritorio */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px; /* Espacio entre las dos columnas */

    /* Degradado mejorado para fondo */
    background: radial-gradient( circle at top right, #877AFD 2%, #222546 49%, #212240 100%);

    min-height: 90vh;
    padding: 20px;
    box-sizing: border-box; /* Asegura que el padding no cause desbordamiento */
}
.hero-content {
    max-width: 500px;
    color: #fff;
    text-align: left; /* Alineación a la izquierda por defecto */
}
.hero-content-2 {
    max-width: 500px;
    color: #fff;
}
.hero-img {
    width: 102%;           /* ocupa todo el ancho de su contenedor */
    height: auto;
    display: block;
}
.titulo-principal {
    font-size: 3rem;
    margin-bottom: 20px;
    font-weight: bold;
}
.subtitulo {
    font-size: 1.2rem;
    margin-bottom: 30px;
    line-height: 1.5;
}
.botones {
    display: flex;
    gap: 20px;
    justify-content: flex-start; /* Alineado a la izquierda */
    flex-wrap: wrap;
}

/* ============================= */
/* ====== BOTONES ===== */
/* ============================= */
.btn {
    display: inline-block;
    padding: 12px 25px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}
.btn-negro {
    background: #000;
    color: #fff;
    border: 2px solid #000;
}
.btn-negro:hover {
    background: #222;
}
.btn-blanco {
    background: #fff;
    color: #000;
    border: 2px solid #fff;
}
.btn-blanco:hover {
    background: transparent;
    color: #fff;
}

/* ============================= */
/* ====== SECCIONES BASE (Añadido .container para todas) ===== */
/* ============================= */

.section-info {
    /* Usar flexbox para el diseño de dos columnas en escritorio */
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 20px; /* Espacio entre las dos columnas */

    /* Degradado mejorado para fondo */
    background: #212242;

    min-height: 70vh;
    padding: 20px;
    box-sizing: border-box; /* Asegura que el padding no cause desbordamiento */
}
.info-content {
    max-width: 600px;
    color: #fff;
    text-align: left; /* Alineación a la izquierda por defecto */
}
.info-content-2 {
    max-width: 500px;
    color: #fff;
}
.info-img {
    width: 105%;           /* ocupa todo el ancho de su contenedor */
    height: auto;
    display: block;
}
.section-info h2{
    font-size: 2.3rem;
    margin: 10px 0 20px;
    text-align: center;
    color: #00b4ff;
}
.section-info p{
    font-size: 1.2rem;
    margin-bottom: 30px;
    text-align: justify;
    line-height: 1.5;
    padding: 0 0 0 20px;
}

.section-features {
    background: #212242;
    color: #ffffff;
    text-align: center;
}
.section-features h2{
    font-size: 2.3rem;
    margin: 10px 0 20px;
    text-align: center;
    color: #00b4ff;
}
/* ============================= */
/* ====== CARDS / GRID ===== */
/* ============================= */
.grid-3 {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Aumentado a 300px */
    max-width: 1200px;
    margin: 30px auto;
    align-items: stretch;
    padding: 0 20px;
}
.card {
    background: #212250;
    border: 1px solid #1f2937;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,.35);
    transition: transform 0.3s;
    height: 100%; /* Asegura que las cards del grid tengan el mismo alto */
    box-sizing: border-box;
    text-align: center;
}

.img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
    display: block;
    margin-bottom: 15px; /* Espacio debajo de la imagen */
}

.card:hover {
    transform: translateY(-5px);
    background: #c3d9f4;
    color: #000;
}
.card h3 {
    margin-bottom: 10px;
    font-size: 23px;
}
.section-testimonials .card {
    /* Asegura que los estilos de hover y fondo sigan funcionando */
    padding: 20px;
}


/* ============================= */
/* ====== PRICING ===== */
/* ============================= */
.section-pricing{
    background: #212242;
    color: #ffffff;
    text-align: center;
}
.section-pricing h2 {
    font-size: 2.3rem;
    margin: 10px 0 20px;
    text-align: center;
    color: #00b4ff;
}
.section-pricing p{
    margin: 13px auto;
    max-width: 900px;
    font-size: 18px;
}

.pricing-card-link{
    text-decoration: none;
}
.pricing-card {
    position: relative;
    padding: 30px 20px;
    text-align: center;
    border-radius: 14px;
    background: #c3d9f4;
    color: #1f2937;
    border: 2px solid transparent;
    transition: 0.3s;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.pricing-card:hover {
    border-color: #0074d9;
    transform: translateY(-6px);
    background: #161b22;
    color: #fff;
}
.pricing-card.destacado {
    border: 2px solid #0074d9;
    box-shadow: 0 12px 36px rgba(0, 116, 217, 0.28);
}
.pricing-card .price {
    font-size: 1.8rem;
    font-weight: bold;
    margin: 15px 0;
    color: #00b4ff;
}
.pricing-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    text-align: left;
    flex-grow: 1; /* Esto ayuda a que los ítems se empujen hacia arriba */
}
.pricing-card ul li {
    margin: 8px 0;
}
.badge-top {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #00b4ff;
    color: #00131d;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: bold;
    font-size: 0.8rem;
}

/* ============================= */
/* ====== FAQ ===== */
/* ============================= */
.section-faq{
    background: #212242;
    padding: 40px 20px;
    color: #fff;
}
.section-faq h2  {
    font-size: 2.3rem;
    margin: 10px 0 20px;
    text-align: center;
    color: #00b4ff;
}
.faq-container {
    max-width: 800px;
    margin: 30px auto;
}
.card-faq {
    background: #161b22;
    border: 1px solid #1f2937;
    border-radius: 14px;
    padding: 20px;
    margin: 15px 0; /* Ajustado el margen a 0 para mejor control del contenedor */
    box-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.section-faq summary {
    cursor: pointer;
    display: flex;
    justify-content: center;
    font-size: 23px;
    margin: 10px 0;
}
.section-faq p{
    margin: 15px 0;
    padding: 0 15px; /* Pequeño padding para el contenido de la respuesta */
    font-size: 18px;
}


/* ============================= */
/* ====== FOOTER ===== */
/* ============================= */
.footer {
    background: #353654;
    color: #fff;
    padding: 30px 20px;
    text-align: center;
    margin-top: 0; /* Quitado el margen auto que podría causar problemas */
    font-size: 0.9rem;
}
.footer p {
    margin: 5px 0;
}
.footer a {
    color: #00b4ff;
    margin: 0 8px;
    text-decoration: none;
}
.footer a:hover {
    text-decoration: underline;
}

/* ============================= */
/* ====== RESPONSIVE (Puntos de Quiebre) ===== */
/* ============================= */

/* 1. MÓVIL (Menor o igual a 768px) */
@media (max-width: 768px) {
    /* === NAVBAR === */
    .menu {
        display: none; /* Oculta los enlaces de navegación - YA NO HAY BOTÓN PARA MOSTRARLOS */
    }
    /* Estilos para .menu-hamburguesa eliminados */
    .brand {
        font-size: 1.2rem;
    }

    /* === HERO SECTION: APILAMIENTO VERTICAL === */
    .hero {
        flex-direction: column; /* Apila el contenido (texto/imagen) */
        min-height: auto;
        padding-top: 80px;
        padding-bottom: 50px;
        text-align: center; /* Centra el texto */
        gap: 40px;
    }

    /* === SECCIÓN INFO: APILAMIENTO VERTICAL (Aplicando los mismos principios) === */
    .section-info {
        flex-direction: column; /* CLAVE: Apila el contenido (texto/imagen) */
        min-height: auto;
        padding-top: 50px; /* Un poco de padding arriba */
        padding-bottom: 50px; /* Un poco de padding abajo */
        text-align: center; /* Centra el texto */
        gap: 40px;
    }

    /* Reordenar para que la imagen de la sección info también aparezca primero */
    .info-content-2 {
        order: -1; /* Mover la ilustración de la sección info al principio */
    }
    .info-content {
        order: 1;
        text-align: center; /* Asegura que el texto esté centrado */
    }
    /* Asegurar que el texto dentro de info-content no esté centrado si no se quiere */
    .section-info p {
        text-align: left; /* Mantener los párrafos con alineación a la izquierda */
        padding: 0; /* Quitar padding lateral extra si lo hay */
        max-width: 100%;
        margin: 10px auto;
    }
    .section-info h2 {
        text-align: center; /* Centrar el título de la sección info */
    }
    /* FIN SECCIÓN INFO */


    .hero-content, .hero-content-2 {
        max-width: 90%; /* Ancho máximo para el contenido en móvil */
        width: 100%;
        margin: 0 auto;
        padding: 0 5%;
    }

    /* Cambiar el orden: Ilustración primero, luego el texto y los botones */
    .hero-content-2 {
        order: -1; /* Mover la ilustración al principio */
    }
    .hero-content {
        order: 1;
        text-align: center; /* Asegura que el texto esté centrado */
    }

    .titulo-principal {
        font-size: 2.2rem; /* Reduce el tamaño del título */
    }

    .botones {
        flex-direction: column; /* Apila los botones verticalmente */
        justify-content: center;
        align-items: center;
        gap: 15px;
    }
    .botones .btn {
        width: 100%; /* Botones de ancho completo, más fáciles de tocar */
        max-width: 300px;
        box-sizing: border-box;
    }
    .subtitulo {
        text-align: center;
    }

    /* === SECCIONES DE CARDS (grid-3) === */
    /* La regla de auto-fit/minmax ya es buena, pero aseguramos el padding */
    .grid-3 {
        grid-template-columns: 1fr; /* Fuerza una sola columna */
        padding: 0 5%;
    }
    /* Ajuste para que se vea mejor el título de las cards */
    .card h3 {
        font-size: 1.5rem;
    }

    /* Estilos generales para h2 de sección en móvil */
    .section-info h2, .section-features h2, .section-integrantions h2, .section-pricing h2, .section-testimonials h2, .section-faq h2 {
        font-size: 1.8rem;
    }

    /* === FAQ y INFO === */
    .faq-container {
        padding: 0 5%;
    }
    .card-faq {
        padding: 15px;
    }
    .section-faq summary {
        font-size: 1.1rem;
    }

    /* === FOOTER === */
    .footer {
        padding: 20px 10px;
    }
}

/* 2. TABLETA (Menor o igual a 1024px - para optimizar tabletas horizontales) */
@media (max-width: 1024px) and (min-width: 769px) {
    /* Reducir el gap del hero */
    .hero {
        gap: 20px;
        padding: 20px 10px;
    }
    /* Reducir el tamaño de la fuente para que quepa mejor */
    .titulo-principal {
        font-size: 2.5rem;
    }
}