@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;800&display=swap');

body { font-family: 'Poppins', sans-serif; background: #fdfdfd; margin:0; overflow-x: hidden; }

/* =========================================
   HERO PREMIUM
========================================= */
.hero-premium {
    position: relative; height: 35vh; min-height: 280px; display: flex; align-items: center; justify-content: center;
    overflow: hidden; text-align: center; color: white;
}
.hero-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    background-size: cover !important;
    filter: blur(8px) brightness(0.4); transform: scale(1.1); z-index: 1;
}
.hero-content { position: relative; z-index: 2; padding: 20px; }
.hero-content h1 { 
    font-size: clamp(2.5rem, 8vw, 4rem); /* Ligeramente más pequeño */
    font-weight: 700; /* Menos grueso, más elegante */
    margin: 0; 
    /* ELIMINADO: text-transform: uppercase; */
    letter-spacing: -1px; /* Letras ligeramente más juntas (estilo Apple/SaaS) */
    text-shadow: 0 4px 15px rgba(0,0,0,0.4); /* Sombra para que despegue del fondo difuminado */
}

.container { 
    max-width: 1100px; 
    margin: 0 auto; 
    padding: 10 40px !important; 
}

/* =========================================
   GRILLA DE CARACTERÍSTICAS (SaaS 2024)
========================================= */
.feature-section { 
    padding-top: 40px; 
    padding-bottom: 40px;  
    background-color: #edf0f3; /* fondo */
}

.feature-grid { 
    display: grid; 
    /* Usamos auto-fit para que se adapte perfecto sin importar si son 6 o 9 items */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 30px; 
    /* Iniciamos el contador automático */
    counter-reset: feature-num; 
}

.feature-item { 
    background: #ffffff; 
    padding: 40px 35px; 
    border-radius: 16px; 
    border: 1px solid #f1f5f9; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.02); 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    /* Incrementamos el contador por cada tarjeta */
    counter-increment: feature-num;
    z-index: 1;
}

/* MARCA DE AGUA TECNOLÓGICA (El número gigante de fondo) */
.feature-item::after {
    content: "0" counter(feature-num);
    position: absolute;
    bottom: -15px;
    right: -10px;
    font-size: 8rem;
    font-weight: 900;
    color: #f8fafc; /* Gris hiper claro, casi invisible */
    z-index: -1;
    line-height: 1;
    transition: 0.5s ease;
}

/* BARRA LATERAL DINÁMICA */
.feature-item::before {
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 4px; 
    height: 0%; /* Empieza en 0 */
    background: linear-gradient(to bottom, #E3000F, #ff4d4d); 
    transition: 0.4s ease;
}

/* HOVER MODERNO */
.feature-item:hover { 
    transform: translateY(-8px); 
    box-shadow: 0 20px 40px rgba(227, 0, 15, 0.05); /* Resplandor rojo muy sutil */
    border-color: #fef2f2;
}
.feature-item:hover::before { height: 100%; } /* La línea roja crece hasta abajo */
.feature-item:hover::after { 
    color: #fef2f2; /* El número se tiñe sutilmente del rojo de la marca */
    transform: scale(1.05) translate(-10px, -10px);
}

/* TIPOGRAFÍA AJUSTADA AL NUEVO ESTILO */
.feature-item h4 { 
    margin: 0 0 15px 0; color: #0f172a; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.5px;
}
.feature-item p { margin: 0; color: #64748b; font-size: 0.95rem; line-height: 1.7; }

/* =========================================
   BANNER DE PRECIO (Restaurado)
========================================= */
/* BANNER DE PRECIO RESTAURADO (BLANCO CORPORATIVO) */
.price-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff; /* Blanco puro */
    border: 1px solid #e2e8f0; /* Borde gris sutil */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); /* Sombra muy suave */
    padding: 40px 50px; /* Más aire interno */
    margin-top: 60px; 
}
.price-text h3 { margin: 0; font-size: 1.5rem; color: #111; font-weight: 800; }
.price-text p { margin: 5px 0 0 0; color: #666; font-size: 1rem; }
.price-value { text-align: right; }

/* =========================================
   FOOTER: 2 CARDS DE CONTACTO (Restaurado)
========================================= */
.contact-footer { 
    background: #f1f5f9;
    padding-top: 50px; 
    padding-bottom: 80px; 
    margin-top: 40px; 
}

.cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    width: 100%;
}

.cta-card {
    background: white; padding: 40px 30px; border-radius: 20px; text-align: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
    display: flex; flex-direction: column; justify-content: space-between;
}

.btn-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-top: auto; padding-top: 25px; }

.btn-cta { 
    padding: 14px 25px; border-radius: 50px; font-weight: 700; text-decoration: none; 
    transition: 0.3s; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px;
    display: inline-flex; align-items: center; justify-content: center;
}
.btn-demo { background: #007bff; color: white; }
.btn-pdf  { background: #dc3545; color: white; }
.btn-wa   { background: #25D366; color: white; }
.btn-web  { background: #53cae7; color: white; }
.btn-gray { background: #8e7791; color: white; }

.btn-cta:hover { transform: translateY(-3px); box-shadow: 0 8px 15px rgba(0,0,0,0.1); }

/* =========================================
   RESPONSIVE TOTAL
========================================= */
@media (max-width: 1100px) { 
    .feature-grid { grid-template-columns: repeat(2, 1fr); } 
}
@media (max-width: 768px) {
    .feature-grid { grid-template-columns: 1fr; }
    .feature-section { 
        padding-top: 60px; /* Asegura espacio entre el Hero y el título */
        padding-bottom: 40px; 
    }
    .feature-section > div[style*="text-align: center"] {
        margin-bottom: 40px !important; /* Separa el título de las cajas de características */
    }
    .hero-premium { height: 40vh; }
    .container {
        padding-left: 20px !important; /* Forza el margen lateral seguro en celulares */
        padding-right: 20px !important;
    }    
    .price-banner { 
        flex-direction: column !important; 
        text-align: center !important; 
        gap: 20px !important; 
        padding: 30px 20px !important; 
    }
    .price-text, .price-value { text-align: center !important; width: 100%; }
    .cta-grid { grid-template-columns: 1fr; }
    .btn-cta { width: 100%; }
}