/* Estilos personalizados y variables de color de iad */
:root {
    --iad-blue: #00aae3;
    --iad-orange: #ea584a;
    --iad-dark-gray: #636363;
    --iad-light-gray: #b2b2b2;
}

/* Configuración base de la fuente - Montserrat */
body {
    font-family: 'Montserrat', sans-serif;
    scroll-behavior: smooth;
}

/* Clases de utilidad para colores de iad */
.bg-iad-blue {
    background-color: var(--iad-blue);
}

.text-iad-blue {
    color: var(--iad-blue);
}

.bg-iad-orange {
    background-color: var(--iad-orange);
}

.text-iad-orange {
    color: var(--iad-orange);
}

.border-iad-orange {
    border-color: var(--iad-orange);
}

.hover\:bg-iad-orange-dark:hover {
    background-color: #d94a3d;
}

/* Estilo para el logo 'iad' (simulando Helvetica Rounded) */
.font-helvetica-rounded {
    font-family: 'Helvetica Rounded', 'Arial Rounded MT Bold', 'Montserrat', sans-serif;
    font-weight: bold;
}

/* Estilo para la imagen de fondo de la sección Hero */
.hero-bg {
    background: linear-gradient(rgba(0, 170, 227, 0.85), rgba(0, 170, 227, 0.85)), url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?q=80&w=1973&auto=format&fit=crop') no-repeat center center;
    background-size: cover;
}

/* Estilos para los títulos y subtítulos de sección */
.section-title {
    @apply text-3xl md:text-4xl font-bold text-iad-blue mb-4 text-center;
}

.section-subtitle {
    @apply text-lg md:text-xl text-center text-iad-orange max-w-3xl mx-auto mb-12 font-semibold;
}

/* Estilo para las tarjetas de la sección "Por qué iad" */
.card {
    @apply bg-white p-8 rounded-lg shadow-lg text-center transform hover:-translate-y-2 transition-transform duration-300;
}

.card-icon {
    @apply text-iad-orange text-5xl mb-4;
}

.card-title {
    @apply text-2xl font-bold text-iad-blue mb-3;
}

/* Estilo para las tarjetas de la sección "Beneficios" */
.benefit-card {
    @apply bg-white/10 p-6 rounded-lg text-center backdrop-blur-sm transition-all duration-300 hover:bg-white/20 hover:scale-105;
}

.benefit-icon {
    @apply text-5xl mb-4 text-iad-orange;
}

.benefit-title {
    @apply text-xl font-bold mb-2;
}


/* Estilos para el formulario de contacto */
.form-label {
    @apply block text-iad-dark-gray font-semibold mb-2;
}

.form-input {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-iad-orange transition-shadow;
}

/* Estilo para los iconos de redes sociales en el footer */
.social-icon {
    @apply text-white hover:text-iad-orange text-2xl transition-all duration-300 transform hover:scale-125;
}