@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');


body {
    font-family: "Open Sans", sans-serif;
}


:root {
    --iom-blue: #003366;
    --iom-gold: #fabc2c;
    --iom-light-blue: #0055aa;
    --iom-dark: #001f3f;
}

.bg-iom-blue {
    background-color: var(--iom-blue);
}

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

.text-iom-gold {
    color: var(--iom-gold);
}

.bg-iom-gold {
    background-color: var(--iom-gold);
}

.border-iom-gold {
    border-color: var(--iom-gold);
}

.nav-link {
    position: relative;
    transition: color 0.3s;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: var(--iom-gold);
    transition: width 0.3s;
}

.nav-link:hover::after {
    width: 100%;
}

.hero-overlay {
    background: linear-gradient(to right, rgba(0, 51, 102, 0.95) 0%, rgba(0, 51, 102, 0.6) 100%);
}

.btn-gold {
    background-color: var(--iom-gold);
    color: var(--iom-blue);
    transition: all 0.3s;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.btn-gold:hover {
    background-color: #ffd100;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Submenu Styling */
.dropdown:hover .dropdown-menu {
    display: block;
}

/* Efecto de línea para enlaces */
.nav-link {
    position: relative;
    transition: color 0.3s;
    display: inline-block;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: var(--iom-gold);
    transition: width 0.3s;
}

.nav-link:hover::after {
    width: 100%;
}

/* Mobile Menu Animation */
#mobile-menu {
    transition: transform 0.3s ease-in-out;
}

.mobile-menu-open {
    transform: translateX(0) !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--iom-blue);
}

.btn-gold {
    background-color: var(--iom-gold);
    color: var(--iom-blue);
    transition: all 0.3s;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.btn-gold:hover {
    background-color: #ffd100;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.dropdown:hover .dropdown-menu {
    display: block;
}

#mobile-menu {
    transition: transform 0.3s ease-in-out;
}

.mobile-menu-open {
    transform: translateX(0) !important;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--iom-blue);
}

/* Estilos para el Scroll Animado del Header */
.header-scrolled {
    height: 70px !important;
}

.header-scrolled img {
    width: 130px !important;
}

.header-scrolled .nav-item {
    font-size: 10px !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}

.header-transition {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--iom-blue);
}



/* Estilos página 15 medidas */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
}

.delay-1 {
    animation-delay: 0.1s;
}

.delay-2 {
    animation-delay: 0.2s;
}

.delay-3 {
    animation-delay: 0.3s;
}

html {
    scroll-behavior: smooth;
}

.gold-bullet::before {
    content: "•";
    color: var(--iom-gold);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}


.hero-gradient {
    background: linear-gradient(135deg, var(--iom-blue) 0%, #004a8d 100%);
}

.report-card:hover .cover-overlay {
    opacity: 1;
}

.report-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

[x-cloak] {
    display: none !important;
}


/* Estilos para el cuerpo del artículo */
.article-body p {
    margin-bottom: 1.8rem;
    line-height: 1.9;
    color: #334155;
    font-size: 1.125rem;
}

.article-body p::first-letter {
    float: left;
    font-size: 4.5rem;
    line-height: 1;
    font-weight: 900;
    padding-right: 12px;
    color: var(--iom-blue);
    font-family: 'Playfair Display', serif;
}

/* Quitamos el capitular de los párrafos que no sean el primero */
.article-body p~p::first-letter {
    float: none;
    font-size: 1.125rem;
    line-height: inherit;
    font-weight: inherit;
    padding-right: 0;
    color: inherit;
    font-family: inherit;
}

.floating-social {
    position: sticky;
    top: 120px;
}

.reading-progress-bar {
    height: 4px;
    background: var(--iom-gold);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    transition: width 0.1s ease;
}

/* Animación suave para la entrada de la imagen */
.hero-image-container {
    clip-path: inset(0 0 0 0);
    transition: clip-path 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}


.participation-card:hover .card-overlay {
    opacity: 1;
}

.gradient-blue {
    background: linear-gradient(135deg, #003366 0%, #0055aa 100%);
}