/* =========================================
   Luptime - Estilos Globales y Hero Section
   ========================================= */

/* Paleta de colores y ajustes globales */
:root {
    --bs-primary: #0056b3; /* Azul profesional, ajuste según tu marca */
    --bs-primary-rgb: 0, 86, 179;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
    padding-top: 76px; /* Compensa el fixed-top del navbar */
}

/* Tipografía de alto impacto */
.fw-extrabold {
    font-weight: 800;
}

@media (min-width: 576px) {
    .w-sm-auto {
        width: auto !important;
    }
}

/* Hero Section */
.hero-section {
    background: radial-gradient(circle at 100% 50%, rgba(0, 86, 179, 0.05) 0%, rgba(255, 255, 255, 0) 50%);
    background-color: #fcfdfd; /* Fondo muy sutil y limpio */
    overflow-x: hidden;
}

/* Navbar */
.navbar {
    transition: all 0.3s ease;
}
.navbar.shadow-sm {
    box-shadow: 0 2px 15px rgba(0,0,0,0.05) !important;
}

/* Animaciones y posicionamiento del Mockup */
.mockup-placeholder {
    width: 100%;
    max-width: 400px;
    height: 600px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.floating-badge {
    bottom: 15%;
    left: -5%;
    animation: float 4s ease-in-out infinite;
    z-index: 2;
}

/* Animación de flotación suave (UX) */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* Ajustes para móviles */
@media (max-width: 991px) {
    .floating-badge {
        left: 5%;
        bottom: 5%;
    }
}

/* =========================================
   Social Proof & Problema vs. Solución
   ========================================= */

/* Espaciado de letras elegante para subtítulos pequeños */
.letter-spacing-1 {
    letter-spacing: 1.5px;
}

/* Limitar el ancho de los párrafos centrados para mejorar la lectura (UX) */
.max-w-700 {
    max-width: 700px;
}

/* Efecto hover suave para las tarjetas (Hover-lift) */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.1) !important;
}

/* Colores sutiles para el fondo de la tarjeta Luptime */
/* Utilizamos las variables nativas de Bootstrap 5 para el canal RGB */
.bg-primary-subtle {
    background-color: rgba(var(--bs-primary-rgb), 0.04) !important;
}

.border-primary {
    border-color: var(--bs-primary) !important;
}

/* =========================================
   Sección de Características (Features)
   ========================================= */

/* Aumentar padding vertical en pantallas grandes */
@media (min-width: 992px) {
    .py-lg-6 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }
}

/* Contenedor del ícono */
.icon-square {
    width: 4rem;
    height: 4rem;
    /* La variable bg-primary-subtle ya la definimos en el paso anterior */
}

/* Efecto hover suave para los bloques de features (UI Feedback) */
.transition-all {
    transition: all 0.3s ease;
}

.feature-block:hover {
    background-color: #f8f9fa; /* Fondo muy claro al pasar el mouse */
    transform: translateX(5px); /* Pequeño desplazamiento a la derecha */
}

/* =========================================
   Sección de Precios (Pricing Cards)
   ========================================= */

.pricing-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: visible; /* Necesario para que el badge salga del contenedor */
}

/* Efecto hover general */
.pricing-card:not(.card-popular):hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
}

/* Estilos especiales para el plan destacado (Pro) */
.card-popular {
    border: 2px solid var(--bs-primary);
    transform: scale(1.03); /* Ligeramente más grande para resaltar */
}

.card-popular:hover {
    transform: scale(1.05);
}

/* Badge de "Más Popular" centrado en el borde superior */
.popular-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--bs-primary);
    color: white;
    padding: 5px 20px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1px;
    z-index: 10;
}

/* Ajuste responsivo para tablets/móviles: quitamos la escala para no romper el grid */
@media (max-width: 1199px) {
    .card-popular {
        transform: scale(1);
        border-width: 1px;
    }
    .card-popular:hover {
        transform: translateY(-5px);
    }
}

/* =========================================
   Sección de FAQ (Accordion)
   ========================================= */

/* Suavizamos los colores del acordeón nativo de Bootstrap */
.accordion-button:not(.collapsed) {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
    box-shadow: none; /* Quitamos la sombra azul por defecto que puede verse tosca */
}

/* Modificamos el botón al hacer foco para mantener accesibilidad pero sin un borde agresivo */
.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
    border-color: rgba(var(--bs-primary-rgb), 0.5);
}

/* Redondeamos ligeramente los elementos individuales */
.accordion-item {
    transition: background-color 0.3s ease;
}

/* Transición suave para el icono de flecha */
.accordion-button::after {
    transition: transform 0.3s ease-in-out;
}

/* Utilidad para el Footer */
.hover-text-white:hover {
    color: #ffffff !important;
}