/* assets/css/style.css */
/* Este archivo utiliza clases de Tailwind CSS, el cual debe estar cargado en el index.html */

/* Variables de color personalizadas, para un mejor manejo de la paleta */
/* Los colores han sido ajustados para un aspecto más vibrante y profesional */
:root {
    --primary-color: #002e5f; /* Azul vibrante */
    --secondary-color: #019c87; /* Verde para acciones */
    --accent-color: #1a78c2; /* Azul oscuro para contrastes */
}

/* Base Body & Typography */
body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: #4b5563; /* Gris oscuro */
    background-color: #f3f4f6; /* Fondo gris claro */
}

/* Contenedor principal para centrar el contenido */
.container {
    max-width: 1280px;
}
.bg-primary{
    background-color:var(--primary-color, 1);
}

/* Animaciones */
.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
}
.animate-fade-in-up.delay-200 { animation-delay: 0.2s; }
.animate-fade-in-up.delay-400 { animation-delay: 0.4s; }

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

/* Estilos de Botones */

.button-secondarys {
    background-color: #002e5f;
    color: antiquewhite;
    padding: 12px 24px;
    border: 1px solid #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(1, 156, 135, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    display: inline-block;
}

/* Hover con animación tipo levitar y cambio de color */
.button-secondarys:hover {
    background-color: #019c87;
    color: #F5F5F5;
    box-shadow: 0 8px 20px rgba(1, 156, 135, 0.6);
    transform: translateY(-3px) scale(1.03);
}

/* Animación cuando se hace clic (efecto presión) */
.button-secondarys:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}



.button-primary {
    display: inline-block;
    padding: 1rem 2rem; /* px-8 py-4 */
    background-image: linear-gradient(to right, #3b82f6, #1d4ed8); /* from-blue-500 to-blue-700 */
    color: #fff;
    font-weight: 700;
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* transition-transform duration-300 */
}
.button-primary:hover {
    transform: scale(1.05); /* hover:scale-105 */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05); /* hover:shadow-xl */
}

.button-secondary {
    display: inline-block;
    padding: 0.75rem 1.5rem; /* px-6 py-3 */
    background-image: linear-gradient(to right, #019c87, #16a34a); /* from-green-500 to-green-600 */
    color: #fff;
    font-weight: 600;
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* transition-transform duration-300 */
}
.button-secondary:hover {
    transform: scale(1.05); /* hover:scale-105 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* hover:shadow-lg */
}

.button-contact {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* space-x-2 */
    padding: 0.5rem 1rem; /* px-4 py-2 */
    background-color: #019c87; /* bg-green-500 */
    color: #fff;
    font-weight: 600;
    border-radius: 9999px; /* rounded-full */
    transition: background-color 0.3s ease; /* transition-colors duration-300 */
}
.button-contact:hover {
    background-color: #16a34a; /* hover:bg-green-600 */
}

.button-contact-lg {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* space-x-3 */
    padding: 1rem 2rem; /* px-8 py-4 */
    background-color: #019c87; /* bg-green-500 */
    color: #fff;
    font-weight: 700;
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    transition: transform 0.3s ease, background-color 0.3s ease; /* transition-transform duration-300 */
}
.button-contact-lg:hover {
    transform: scale(1.05); /* hover:scale-105 */
    background-color: #16a34a; /* hover:bg-green-600 */
}

/* Estilos de Tarjetas de Planes y Características */
.plan-card, .feature-card {
    border-radius: 0.75rem; /* rounded-xl */
    transition: box-shadow 0.3s ease, transform 0.3s ease; /* transition-shadow duration-300 */
}
.plan-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05); /* shadow-2xl */
    transform: scale(1.05); /* hover:scale-105 */
    outline: 4px solid var(--primary-color);
    outline-offset: -4px; /* ring-4 ring-primary ring-opacity-50 */
}

.feature-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05); /* hover:shadow-2xl */
    transform: scale(1.05); /* hover:scale-105 */
}

.feature-card .bg-accent {
    background-color: var(--accent-color);
}

.service-card {
    border-left: 4px solid var(--primary-color); /* border-l-4 border-blue-500 */
}

/* Estilos de Modal */
.modal-content {
    background-color: #fff;
    padding: 2rem; /* p-8 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
}

.close-button {
    color: #6b7280; /* text-gray-500 */
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700;
}
.close-button:hover {
    color: #1f2937; /* hover:text-gray-800 */
}