/* =========================================
   VARIABLES Y RESET
   ========================================= */
:root {
    --primario: #003366;
    --acento: #40E0D0;
    --texto: #333;
    --texto-light: #666;
    --fondo-soft: #f4fdfd;
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body { 
    font-family: 'Lato', sans-serif; 
    color: var(--texto); 
    line-height: 1.6; 
    background: #fff; 
}

.container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 25px; 
}

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

/* =========================================
   HEADER Y NAVEGACIÓN (Espacioso y en una línea)
   ========================================= */
.header {
    background: #fff;
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 15px rgba(0,0,0,0.05);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    width: 100%;
}

.logo-img { 
    height: 60px; 
    width: auto; 
    object-fit: contain; 
}

.main-nav { 
    display: flex; 
    align-items: center; 
    gap: 40px; 
    flex-wrap: nowrap; 
}

.nav-menu { 
    display: flex; 
    list-style: none; 
    gap: 35px; 
    margin: 0;
    padding: 0;
}

.nav-menu a { 
    text-decoration: none; 
    color: var(--primario); 
    font-weight: 700; 
    font-size: 1rem; 
    transition: color 0.3s ease;
}

.nav-menu a:hover {
    color: var(--acento); 
}

.btn-nav-cta {
    background: var(--acento);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    white-space: nowrap; 
    transition: transform 0.3s, box-shadow 0.3s;
}

.btn-nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(64, 224, 208, 0.4); 
}

/* =========================================
   SISTEMA DE PÁGINAS Y ANIMACIONES
   ========================================= */
.page-section { 
    display: none; 
    padding: 100px 0; 
    min-height: 75vh; 
    animation: fadeIn 0.5s ease; 
}

.page-section.active { 
    display: block; 
}

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

/* =========================================
   HERO (Diseño de Ventas)
   ========================================= */
.hero-sales { 
    padding: 120px 0; 
    background: linear-gradient(135deg, var(--fondo-soft) 0%, #ffffff 100%); 
    text-align: center; 
}

.badge { 
    background: rgba(64, 224, 208, 0.2); 
    color: var(--primario); 
    padding: 5px 15px; 
    border-radius: 20px; 
    font-weight: bold; 
    font-size: 0.8rem; 
}

.hero-sales h1 { 
    font-family: 'Poppins', sans-serif; 
    font-size: 3.5rem; 
    color: var(--primario); 
    margin: 25px 0; 
    line-height: 1.2; 
}

.hero-sales h1 span { 
    color: var(--acento); 
}

.hero-sales p { 
    font-size: 1.2rem; 
    color: var(--texto-light); 
    max-width: 700px; 
    margin: 0 auto 40px; 
}

.btn-main {
    background: var(--acento);
    color: white;
    border: none;
    padding: 20px 45px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(64, 224, 208, 0.3);
    transition: transform 0.3s;
}

.btn-main:hover {
    transform: scale(1.05);
}

.btn-sub { 
    margin-left: 20px; 
    color: var(--primario); 
    font-weight: bold; 
    text-decoration: none; 
}

/* =========================================
   SECCIÓN PRODUCTOS (Tarjetas Alineadas)
   ========================================= */
.section-title { 
    font-family: 'Poppins', sans-serif; 
    font-size: 2.5rem; 
    color: var(--primario); 
    margin-bottom: 40px; 
}

.productos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.producto-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 15px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.producto-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.producto-card.highlight { 
    border: 2px solid var(--acento); 
}

.producto-card.highlight-dark { 
    border: 2px solid var(--primario); 
    background-color: var(--fondo-soft); 
}

.producto-card h3 { 
    color: var(--primario); 
    font-size: 1.3rem; 
    margin-bottom: 15px; 
}

.producto-card p { 
    color: var(--texto-light); 
    font-size: 0.95rem; 
    margin-bottom: 25px; 
    flex-grow: 1; 
}

.btn-card {
    background: transparent;
    color: var(--acento);
    border: 2px solid var(--acento);
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.3s;
    width: 100%;
}

.btn-card:hover {
    background: var(--acento);
    color: white;
}

.highlight-dark .btn-card { 
    border-color: var(--primario); 
    color: var(--primario); 
}

.highlight-dark .btn-card:hover { 
    background: var(--primario); 
    color: white; 
}

/* =========================================
   SECCIÓN SOCIOS (Control de Escala)
   ========================================= */
.section-desc { 
    margin-bottom: 40px; 
    color: var(--texto-light); 
    font-size: 1.1rem; 
}

.partners-grid-clean {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
}

.partner-card-link {
    display: block;
    background: #fff;
    padding: 30px 20px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid #f0f0f0;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.partner-card-link:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(64, 224, 208, 0.2);
    border-color: var(--acento);
}

.partner-card-link img {
    max-width: 160px;
    height: 60px;
    object-fit: contain;
    margin-bottom: 15px;
}

.partner-card-link h4 { 
    color: var(--primario); 
    margin-bottom: 8px; 
    font-size: 1.1rem; 
}

.partner-card-link p { 
    color: var(--texto-light); 
    font-size: 0.9rem; 
}

/* =========================================
   FOOTER
   ========================================= */
.footer-sales { 
    background: var(--primario); 
    color: white; 
    padding: 60px 0; 
    text-align: center; 
    margin-top: 40px; 
}

.footer-content p { 
    margin-bottom: 10px; 
}

.legal { 
    font-size: 0.85rem; 
    opacity: 0.7; 
    margin-top: 20px; 
}

/* =========================================
   ESTILOS DETALLADOS HOSTPROTECT
   ========================================= */
.hp-price-big { font-size: 1.2rem; color: var(--texto-light); margin-top: 15px; }
.hp-price-big strong { font-size: 3.5rem; color: var(--acento); display: block; line-height: 1.1; margin-top: 10px; }

.hp-list { list-style: none; text-align: left; margin-top: 15px; }
.hp-list li { margin-bottom: 10px; padding-left: 25px; position: relative; font-size: 0.95rem; color: var(--texto-light); }
.hp-list li::before { content: '✓'; position: absolute; left: 0; color: var(--acento); font-weight: bold; font-size: 1.1rem; }

.hp-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: 60px; text-align: center; border-top: 1px solid #eee; padding-top: 50px; }
.hp-feature h4 { color: var(--primario); margin-bottom: 10px; font-size: 1.1rem; }
.hp-feature p { color: var(--texto-light); font-size: 0.95rem; }

/* =========================================
   DISEÑO MÓVIL (SMARTPHONES Y TABLETS)
   ========================================= */
@media (max-width: 768px) {
    /* 1. Ajuste del Menú (Para que no ocupe toda la pantalla) */
    .nav-container {
        flex-wrap: wrap;
        padding: 10px 15px;
    }
    
    .logo-img { 
        height: 45px; /* Logo más pequeño en celular */
    }
    
    .main-nav {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 10px;
    }
    
    .nav-menu {
        width: 100%;
        justify-content: center;
        gap: 15px;
        border-top: 1px solid #eee;
        padding-top: 10px;
        font-size: 0.9rem;
    }
    
    .btn-nav-cta {
        width: 100%; /* Botón ancho para pulsar fácil con el dedo */
        text-align: center;
    }

    /* 2. Ajuste de Textos (Para que no se salgan de la pantalla) */
    .hero-sales {
        padding: 60px 15px;
    }
    
    .hero-sales h1 {
        font-size: 2.2rem; /* Título más compacto */
        margin: 15px 0;
    }
    
    .hero-sales p {
        font-size: 1rem;
        margin-bottom: 25px;
    }

    .section-title {
        font-size: 2rem;
        margin-bottom: 30px;
        padding: 0 15px;
    }

    /* 3. Botones de Acción adaptados al pulgar */
    .cta-group {
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }
    
    .btn-main {
        width: 100%;
        padding: 15px 20px;
        font-size: 1.1rem;
    }
    
    .btn-sub {
        margin-left: 0;
    }

    /* 4. Cuadrículas: Todo en 1 sola columna vertical */
    .productos-grid, .partners-grid-clean, .hp-features-grid {
        grid-template-columns: 1fr; /* Fuerza a que sea 1 sola tarjeta por fila */
        gap: 20px;
        padding: 0 15px;
    }
    
    .producto-card, .partner-card-link {
        padding: 25px 20px;
    }

    /* 5. Espaciado general de la página */
    .page-section {
        padding: 50px 0;
        min-height: auto;
    }

    /* HostProtect en Móvil */
    .hp-price-big strong {
        font-size: 2.8rem; /* Precio un poco más pequeño */
    }
}