:root {
    --bs-body-bg: #0f395f;
    --darkreader-background-ffffff: #0f395f !important;
    --bs-body-color: #ffffff;
    --bs-bg: #0f395f;
    --bs-border-color: #ffffff;
    --nav-pad: clamp(12px, 4vw, 30px);
    --nav-gap: 12px;
    --footer-max-h: 90px;
    --footer-min-h: 36px;
    --footer-RPT-h: clamp(var(--footer-min-h), 12vw, var(--footer-max-h));
    --footer-logo-pad: clamp(12px, 4vw, 30px);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

[data-bs-theme="dark"] {
    --bs-body-bg: #0f395f;
    --bs-body-color: #ffffff;
    --bs-bg: #0f395f;
    --bs-border-color: #ffffff;
    --bs-navbar-bg: #0f395f;
    --bs-dropdown-bg: #0f395f;
    --bs-card-bg: #0f395f;
}

* { box-sizing: border-box; }
html, body { height: 100%; position: relative; overflow-x: hidden; font-family: 'Bellota', sans-serif;}
body {
    margin: 0;
    min-height: 100dvh;
    background-color: var(--bs-bg)!important;
    color: var(--bs-body-color);
    font-family: 'Bellota', sans-serif;
    overflow-x: hidden;
}

section, header { overflow-x: clip; }
.container-fluid, .row { overflow: visible; }
.header-banner, #participar { overflow-x: visible; }

.header-banner {
    min-height: 90px;
    position: relative;
    overflow: hidden;
    background: var(--bs-bg);
    z-index: 10;
}
@media (min-width: 768px) { .header-banner { min-height: 180px; } }
.header-banner .row { height: 100%; align-items: center; }
.logo-header { height: 90px; width: auto; z-index: 20; }
@media (min-width: 768px) { .logo-header { height: 120px; } }
@media (max-width: 575px) { .logo-header { height: 70px; } }

.nav-icons {
    position: fixed;
    top: var(--safe-top);
    right: var(--safe-right);
    margin: 0;
    padding: 6px;
    display: flex;
    gap: var(--nav-gap);
    align-items: center;
    z-index: 9999;
    background: transparent !important;
    box-shadow: none !important;
}

@media (min-width: 769px) {
    .nav-icons { padding: var(--nav-pad); }
}

.nav-icon {
    width: 90px;
    height: 90px;
    background-image: url('../imas/pms_navicons.svg');
    background-size: 270px 270px;
    background-repeat: no-repeat;
    display: block;
    transition: transform .18s ease, opacity .15s ease;
    position: relative;
    flex: 0 0 auto;
}

/* Tooltips */
.nav-icon::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    top: 110%;
    transform: translate(-50%, 0);
    background: var(--bs-bg);
    color: #fff;
    padding: 6px 16px 8px;
    border-radius: 16px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .75s;
    z-index: 120;
}
.nav-icon:hover::after { opacity: 1; }
.nav-icon[data-icon="1"] { background-position: 0 0; }
.nav-icon[data-icon="2"] { background-position: -90px 0; }
.nav-icon[data-icon="3"] { background-position: -180px 0; }
.nav-icon.active[data-icon="1"] { background-position: 0 -90px; }
.nav-icon.active[data-icon="2"] { background-position: -90px -90px; }
.nav-icon.active[data-icon="3"] { background-position: -180px -90px; }
.nav-icons .nav-icon:not(.active):hover[data-icon="1"] { background-position: 0 -90px !important; }
.nav-icons .nav-icon:not(.active):hover[data-icon="2"] { background-position: -90px -90px !important; }
.nav-icons .nav-icon:not(.active):hover[data-icon="3"] { background-position: -180px -90px !important; }

@media (max-width: 575px) {
    .nav-icons { padding: clamp(8px, 3vw, 20px); gap: 10px; }
    .nav-icon { width: 60px; height: 60px; background-size: 180px 180px; }
    .nav-icon[data-icon="1"] { background-position: 0 0; }
    .nav-icon[data-icon="2"] { background-position: -60px 0; }
    .nav-icon[data-icon="3"] { background-position: -120px 0; }
    .nav-icon.active[data-icon="1"] { background-position: 0 -60px; }
    .nav-icon.active[data-icon="2"] { background-position: -60px -60px; }
    .nav-icon.active[data-icon="3"] { background-position: -120px -60px; }
    .nav-icons .nav-icon:not(.active):hover[data-icon="1"] { background-position: 0 -120px !important; }
    .nav-icons .nav-icon:not(.active):hover[data-icon="2"] { background-position: -60px -120px !important; }
    .nav-icons .nav-icon:not(.active):hover[data-icon="3"] { background-position: -120px -120px !important; }
}

/* Galería Horizontal (Recorrido) */
.gallery-wrapper { width: 100%; overflow: hidden; position: relative; background: transparent; padding: 0; }
.gallery-track {
    display: flex; gap: 4px; overflow-x: auto; scroll-behavior: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding: 4px;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-card {
    position: relative; flex: 0 0 auto; border-radius: 12px; overflow: hidden;
    width: 18vw; height: 24vw; text-decoration: none; background: var(--bs-bg);
}
@media (max-width: 992px) { .gallery-card { width: 30vw; height: 40vw; } }
@media (max-width: 576px) { .gallery-card { width: 45vw; height: 60vw; } }
.gallery-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-label {
    position: absolute; bottom: 0; left: 0; width: 100%;
    background: linear-gradient(0deg, #0f395fef 0%, #0a293f00 100%);
    color: white; padding: 160px 0 10px; text-align: center; font-size: 1rem;
}

/* Galería Vertical (Información) */
#galeria img { border-radius: var(--gallery-radius, 12px); overflow: hidden; }
.galeria-columnas { column-count: 7; column-gap: 4px; padding: 0; }
.galeria-columnas img { width: 100%; margin-bottom: 4px; display: block; break-inside: avoid; }
@media (max-width: 1200px) { .galeria-columnas { column-count: 5; } }
@media (max-width: 768px) { .galeria-columnas { column-count: 4; } }
@media (max-width: 480px) { .galeria-columnas { column-count: 3; } }

/* Footer & Iconos Estáticos */
footer { background: linear-gradient(0deg, rgba(10, 41, 63, 1) 0%, rgba(10, 41, 63, 0) 100%); }
.footer-logos { display: flex; align-items: center; justify-content: space-between; width: 100%; box-sizing: border-box; }
.footer-logo-box { padding: var(--footer-logo-pad); display: flex; align-items: center; }
.footer-logo-RPT, .footer-logos-inst {
    height: var(--footer-RPT-h); max-height: var(--footer-max-h);
    width: auto; max-width: 100%; display: block; object-fit: contain;
}

.i1, .i2, .i3 {
    display: inline-block; width: 90px; height: 90px;
    background-image: url("../imas/pms_navicons.svg");
    background-size: 270px 270px; background-repeat: no-repeat;
}
.i1 { background-position: 0 -90px; }
.i2 { background-position: -90px -90px; }
.i3 { background-position: -180px -90px; }
@media (max-width: 575px) {
    .i1, .i2, .i3 { width: 60px; height: 60px; background-size: 180px 180px; }
    .i1 { background-position: 0 -60px; }
    .i2 { background-position: -60px -60px; }
    .i3 { background-position: -120px -60px; }
}

p { margin-top: 0; margin-bottom: .9rem; }
.banner-participar {
    width: 100vw; margin: 0; padding: 0; height: 540px; margin: -270px 0 -90px;
    background-image: url("../imas/pms_participar01.jpg");
    background-repeat: repeat-x; background-size: auto 540px; background-position: top center;
    z-index: -10; position: relative; left: 50%; right: 50%;
    margin-left: -50vw; margin-right: -50vw; overflow-x: clip;
}


/* ==========================
   Fuentes: clases y @font-face
   ========================== */

.f_s { font-family: Arial, sans-serif; }
.f_n { font-family: 'Bellota', Arial, sans-serif; font-weight: 400; font-style: normal; }
.f_i { font-family: 'Bellota', Arial, sans-serif; font-weight: 400; font-style: italic; }
.f_b { font-family: 'Bellota', Arial, sans-serif; font-weight: 700; font-style: normal; }
.f_bi { font-family: 'Bellota', Arial, sans-serif; font-weight: 700; font-style: italic; }

/* Bellota: Regular */
@font-face {
    font-family: 'Bellota';
    src: url('../fonts/Bellota-Regular.woff2') format('woff2'),
         url('../fonts/Bellota-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Bellota: Italic */
@font-face {
    font-family: 'Bellota';
    src: url('../fonts/Bellota-Italic.woff2') format('woff2'),
         url('../fonts/Bellota-Italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Bellota: Bold */
@font-face {
    font-family: 'Bellota';
    src: url('../fonts/Bellota-Bold.woff2') format('woff2'),
         url('../fonts/Bellota-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Bellota: Bold Italic */
@font-face {
    font-family: 'Bellota';
    src: url('../fonts/Bellota-BoldItalic.woff2') format('woff2'),
         url('../fonts/Bellota-BoldItalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* ==========================
   Tipografía global del sitio
   ========================== */

html, body {
    font-family: 'Bellota', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

/* Texto normal */
p, span, li, a, label, figcaption, small {
    font-weight: 400;
}

/* Negritas */
b, strong {
    font-weight: 700;
}

/* Itálicas */
i, em {
    font-style: italic;
}

/* Negrita + itálica */
b i,
b em,
strong i,
strong em {
    font-weight: 700;
    font-style: italic;
}