.landing-container {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #333333;
    line-height: 1.6;
}

/* 1. SECCIÓN HERO */
.hero-section {
    background-image: linear-gradient(rgba(10, 25, 47, 0.75), rgba(10, 25, 47, 0.75)), url('https://images.unsplash.com/photo-1558002038-1055907df827?auto=format&fit=crop&w=1200&q=80');
    background-size: cover;
    background-position: center;
    padding: 80px 20px;
    text-align: center;
    color: #ffffff;
    border-radius: 8px;
    margin-bottom: 40px;
}
.hero-section h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #ffffff !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.hero-section p {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto 30px auto;
    color: #f0f4f8;
}
.btn-whatsapp {
    display: inline-block;
    background-color: #25D366;
    color: white !important;
    padding: 15px 30px;
    font-size: 1.1rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    transition: transform 0.2s, background-color 0.2s;
}
.btn-whatsapp:hover {
    background-color: #1ebd58;
    transform: translateY(-2px);
}

/* 2. SECCIÓN COLUMNAS */
.section-title {
    text-align: center;
    font-size: 2rem;
    color: #0a192f;
    margin-bottom: 40px;
    font-weight: 700;
}
.columns-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 50px;
}
.column-card {
    flex: 1;
    min-width: 280px;
    background: #f8fafc;
    padding: 25px;
    border-radius: 8px;
    border-top: 4px solid #0056b3;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    text-align: center;
}
.column-card .icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
    display: inline-block;
}
.column-card h3 {
    font-size: 1.3rem;
    color: #0a192f;
    margin-bottom: 15px;
}

/* 3. SECCIÓN BENEFICIOS */
.benefits-section {
    background: #ffffff;
    padding: 30px 20px;
    margin-bottom: 50px;
}
.benefit-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    background: #edf2f7;
    padding: 15px 20px;
    border-radius: 6px;
}
.benefit-icon {
    color: #25D366;
    font-size: 1.5rem;
    font-weight: bold;
    margin-right: 15px;
    line-height: 1;
}
.benefit-text h4 {
    margin: 0 0 5px 0;
    color: #0a192f;
    font-size: 1.1rem;
}
.benefit-text p {
    margin: 0;
    color: #4a5568;
}

/* 4. SECCIÓN FAQ */
.faq-section {
    margin-bottom: 40px;
}
.faq-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    margin-bottom: 10px;
    padding: 15px 20px;
}
.faq-question {
    font-weight: bold;
    color: #0056b3;
    margin-bottom: 8px;
    font-size: 1.1rem;
}
.faq-answer {
    color: #4a5568;
    margin: 0;
}

@media (max-width: 768px) {
    .hero-section h1 { font-size: 1.8rem; }
    .hero-section p { font-size: 1rem; }
    .section-title { font-size: 1.6rem; }
    .columns-container { flex-direction: column; }
}

/* --- CONFIGURACIÓN BASE --- */
.premium-home { font-family: 'Segoe UI', Roboto, sans-serif; color: #2d3748; line-height: 1.6; box-sizing: border-box; }
.premium-home * { box-sizing: border-box; }

/* --- HERO SECTION --- */
.premium-hero { background: linear-gradient(135deg, #0a192f 0%, #112240 100%); padding: 60px 24px; text-align: center; color: #ffffff; border-radius: 12px; margin-bottom: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.premium-hero h1 { font-size: 2.6rem; font-weight: 800; margin-bottom: 20px; color: #ffffff !important; letter-spacing: -0.5px; line-height: 1.2; }
.premium-hero h1 span { color: #25D366; display: inline-block; }
.premium-hero p { font-size: 1.25rem; max-width: 850px; margin: 0 auto 35px auto; color: #e2e8f0; font-weight: 400; line-height: 1.5; }

/* --- BOTONES --- */
.hero-buttons { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
.btn-premium-wa { display: inline-block; background-color: #25D366; color: white !important; padding: 16px 35px; font-size: 1.1rem; font-weight: bold; text-decoration: none; border-radius: 50px; box-shadow: 0 4px 20px rgba(37,211,102,0.4); transition: 0.3s ease; }
.btn-premium-wa:hover { transform: translateY(-3px); background-color: #1ebd58; }
.btn-premium-call { display: inline-block; background-color: #0056b3; color: white !important; padding: 16px 35px; font-size: 1.1rem; font-weight: bold; text-decoration: none; border-radius: 50px; box-shadow: 0 4px 20px rgba(0,86,179,0.3); transition: 0.3s ease; }
.btn-premium-call:hover { transform: translateY(-3px); background-color: #004085; }

/* --- VIDEO Y MULTIMEDIA --- */
.media-container { display: flex; gap: 30px; margin-bottom: 50px; background: #ffffff; padding: 30px; border-radius: 12px; box-shadow: 0 5px 25px rgba(0,0,0,0.05); flex-wrap: wrap; align-items: center; }
.video-wrapper { flex: 1.2; min-width: 320px; position: relative; padding-bottom: 45%; height: 0; overflow: hidden; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.15); }
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.media-text { flex: 1; min-width: 280px; }
.media-text h3 { font-size: 1.7rem; color: #0a192f; margin-bottom: 15px; font-weight: 700; }
.media-text p { color: #4a5568; font-size: 1.05rem; margin-bottom: 15px; }
.btn-youtube-sub { display: inline-block; color: #ff0000 !important; font-weight: bold; text-decoration: underline; font-size: 1.1rem; margin-top: 10px; }

/* --- REJILLA DE TARJETAS (SOLUCIONES) --- */
.grid-section-title { text-align: center; font-size: 2.2rem; color: #0a192f; margin: 40px 0 30px 0; font-weight: 800; }
.solutions-grid { display: flex; flex-wrap: wrap; gap: 25px; margin-bottom: 50px; }
.solution-premium-card { flex: 1; min-width: 280px; background: #ffffff; padding: 35px 25px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.03); text-align: center; transition: 0.3s ease; position: relative; overflow: hidden; border: 1px solid #edf2f7; }
.solution-premium-card:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.1); border-color: #cbd5e1; }
.solution-premium-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: #0056b3; }
.card-comunitarias::before { background: #25D366; }
.card-camaras::before { background: #dc3545; }

/* CORRECCIÓN CELULAR: Reduce espacio abajo del ícono */
.solution-premium-card .card-icon { font-size: 3rem; margin-bottom: 5px; display: inline-block; line-height: 1; }
.solution-premium-card h3 { font-size: 1.4rem; color: #0a192f; margin-top: 10px; margin-bottom: 12px; font-weight: 700; }
.solution-premium-card p { color: #4a5568; font-size: 1rem; margin-bottom: 25px; min-height: 70px; }
.btn-premium-card { display: inline-block; background: #f8fafc; color: #4a5568 !important; font-weight: 700; text-decoration: none; border: 2px solid #e2e8f0; padding: 10px 25px; border-radius: 8px; transition: 0.2s; width: 80%; }
.solution-premium-card:hover .btn-premium-card { background: #0056b3; color: white !important; border-color: #0056b3; }
.card-comunitarias:hover .btn-premium-card { background: #25D366; color: white !important; border-color: #25D366; }
.card-camaras:hover .btn-premium-card { background: #dc3545; color: white !important; border-color: #dc3545; }

/* --- SECCIÓN SECCIÓN CONTACTO (TOTALMENTE ALINEADA) --- */
.contact-premium-section { display: flex; gap: 30px; margin-bottom: 50px; background: #f8fafc; padding: 35px; border-radius: 12px; border: 1px solid #e2e8f0; flex-wrap: wrap; align-items: stretch; width: 100%; }

/* Centrado automático del formulario sin importar la plantilla */
.contact-col-form { flex: 1.2; min-width: 300px; display: flex; flex-direction: column; justify-content: center; margin: 0 !important; padding: 0 !important; }
.contact-col-form .wpcf7 { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; }
.contact-col-form form { width: 100% !important; margin: 0 !important; }

/* Centrado y alineación de la tarjeta azul */
.contact-col-info { flex: 1; min-width: 280px; display: flex; flex-direction: column; justify-content: center; background: #0a192f; color: white; padding: 35px; border-radius: 8px; margin: 0 !important; }
.contact-col-info h3 { color: white !important; font-size: 1.6rem; margin-bottom: 15px; font-weight: 700; margin-top: 0 !important; }
.contact-col-info p { color: #cbd5e1; margin-bottom: 20px; font-size: 1rem; }
.info-badge { background: rgba(37, 211, 102, 0.2); color: #25D366; padding: 6px 14px; border-radius: 4px; font-weight: bold; display: inline-block; margin-bottom: 15px; align-self: flex-start; letter-spacing: 0.5px; }

/* --- MAPA Y EXTRA --- */
.map-headline { text-align: center; font-size: 1.8rem; color: #0a192f; margin: 40px 0 15px 0; font-weight: 700; }
.map-sub { text-align: center; color: #4a5568; margin-bottom: 25px; font-size: 1.1rem; }

/* --- DISPOSITIVOS MÓVILES (OPTIMIZACIÓN CELULAR) --- */
@media (max-width: 992px) { 
    .media-container, .contact-premium-section { flex-direction: column; padding: 20px; gap: 25px; } 
    .video-wrapper { padding-bottom: 56.25%; } 
    .contact-col-form, .contact-col-info { width: 100% !important; }
}
@media (max-width: 768px) { 
    .solutions-grid { flex-direction: column; gap: 15px; } 
    /* Junta de forma óptima el icono con el título en smartphones */
    .solution-premium-card { padding: 25px 20px; }
    .solution-premium-card .card-icon { font-size: 2.5rem; margin-bottom: 0px !important; }
    .solution-premium-card h3 { margin-top: 5px !important; margin-bottom: 8px !important; font-size: 1.3rem; }
    .solution-premium-card p { margin-bottom: 15px !important; min-height: auto; font-size: 0.95rem; }
    .premium-hero h1 { font-size: 1.9rem; } 
}

/* Ocultar el botón de añadir al carrito en las listas de productos y páginas individuales */
.single_add_to_cart_button, 
.add_to_cart_button, 
.ajax_add_to_cart { 
    display: none !important; 
}

/* Ocultar los selectores de cantidad al lado del botón */
.quantity { 
    display: none !important; 
}