@font-face {
    font-family: 'Montserrat-Semibold';
    /* Atención: GitHub Pages es case-sensitive. El archivo real es Montserrat-SemiBold.ttf */
    src: url('../src/Montserrat-SemiBold.ttf') format('truetype');
}
html{
    font-family: 'Montserrat-Semibold', sans-serif;
    overflow-x: hidden;
}
body{
    color: white;
    overflow-x: hidden;
}
@keyframes fadeInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-in-right {
    opacity: 0;
    transform: translateX(100px);
}

.fade-in-right.is-visible {
    animation: fadeInRight 0.9s ease-out forwards;
}

@keyframes fadeInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-in-up {
    opacity: 0;
    transform: translateY(80px);
}

.fade-in-up.is-visible {
    animation: fadeInUp 0.9s ease-out forwards;
}

.fade-in-up .band-member-card {
    opacity: 0;
    transform: translateY(80px);
}

.fade-in-up.is-visible .band-member-card {
    animation: fadeInUp 0.9s ease-out forwards;
}

.fade-in-up.is-visible .band-member-card:nth-child(1) {
    animation-delay: 0s;
}

.fade-in-up.is-visible .band-member-card:nth-child(2) {
    animation-delay: 0.5s;
}

.fade-in-up.is-visible .band-member-card:nth-child(3) {
    animation-delay: 1s;
}

.fade-in-up.is-visible .band-member-card:nth-child(4) {
    animation-delay: 1.5s;
}

.fade-in-left-scroll {
    opacity: 0;
    transform: translateX(-100px);
}

.fade-in-left-scroll.is-visible {
    animation: fadeInLeft 0.9s ease-out forwards;
}

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

@keyframes heroFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fade-in-right,
    .fade-in-right.is-visible,
    .fade-in-up,
    .fade-in-up.is-visible,
    .fade-in-up .band-member-card,
    .fade-in-left-scroll,
    .fade-in-left-scroll.is-visible {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .media-hero .media-hero-label {
        animation: none;
        opacity: 1;
    }
}
/* Sticky footer layout */
html, body { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }
header{
    width: 100%;
    background-color: #141414;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1040; /* por encima de contenido/hero */
}
.nav-text{
    color: white;
}
/* Contact page */
.contact-panel {
    background: rgba(255,255,255,0.9);
    border-radius: 0.5rem;
    padding: 1.5rem;
    color: #141414;
}
.contact-panel h1,
.contact-panel p,
.contact-panel label { color: #141414; }
.logoNav {
    width: 100%;
    max-width: 100%;
    max-height: 85px;
    height: auto;
    display: block;
    margin: 0 auto;
    padding: 0;
    object-fit: contain;
    object-position: center;
}

/* Formularios - colores legibles en fondo claro */
.form-label { color: #212529; } /* Anula el color blanco heredado del body */
.asterisk { color: #dc3545; }

/* Navbar - el link activo un 15% más grande en todas las páginas */
/* Todas las opciones +25% y sin salto de línea */
.navbar .nav-link { font-size: 1.25em; white-space: nowrap; }
/* Activa además en negrita */
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"],
.navbar .nav-item.active > .nav-link { font-weight: 600; }

/* Distribución equitativa y separación del 10% entre opciones en pantallas md+ */
@media (min-width: 768px) {
    .navbar .navbar-nav {
        display: flex;
        gap: 3%; /* ahorrar más ancho para evitar saltos */
        flex: 1 1 auto; /* el menú ocupa el espacio disponible */
        align-items: center; /* alinear verticalmente las opciones */
    }
    .navbar .navbar-nav .nav-item { flex: 1 1 0; display: flex; align-items: center; }
    .navbar .navbar-nav .nav-link { text-align: center; display: inline-flex; align-items: center; }
}

/* Bloque derecho en header: RRSS + Dossier */
header .navbar-extra { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; margin-left: auto; flex: 0 0 auto; padding-left: 1rem; }

/* Grid de cabecera: logo izquierda, menú centrado, RRSS derecha con márgenes simétricos */
@media (min-width: 768px) {
    header .header-grid { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; }
    header .header-left { justify-self: start; }
    header .header-center { justify-self: center; }
    header .header-right { justify-self: end; }
    /* Asegurar centrado del menú y separación cómoda */
    header .header-center .navbar { justify-content: center; }
    header .header-center .navbar-nav { gap: 1.75rem; }
    /* La columna derecha ya no necesita desplazar con margin-left:auto */
    header .navbar-extra { margin-left: 0; }
}

/* Iconos en header blancos; en hover, más suave */
header .social-icons a,
header .social-icons a:visited { color: #ffffff !important; }
header .social-icons a:hover { color: #cccccc !important; }
/* Alinear verticalmente los iconos con el texto del menú */
header .social-icons { align-items: center; }
header .social-icons a { display: inline-flex; align-items: center; line-height: 1; }
header .social-icons svg { display: block; }
/* Asegurar contornos sin relleno en header, incl. botón Dossier */
header .social-icons a { width: 28px; height: 28px; }
header .social-icons svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
header .navbar-extra .btn-outline-light svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Espaciado del icono PDF dentro del botón */
header .navbar-extra .btn-outline-light svg { margin-right: 0.35rem; }

/* Contacto: adelantar el formulario hacia arriba (sobreponiéndose parcialmente al hero) */
.contact-first-section { margin-top: -20px; padding-bottom: 0; }
@media (min-width: 992px) { .contact-first-section { margin-top: -48px; padding-bottom: 0; } }

/* Video page: fondo negro en el bloque del reproductor y textos claros */
.active-video-section { background-color: #141414; }
.active-video-section h1, .active-video-section .h2, .active-video-section p { color: #fff; }

/* Video list: tarjetas sin fondo, títulos en #141414 y margen exterior del 10% */
.video-list-section .card {
    background: transparent !important;
    border: none !important;
    margin: 2% 10%; /* vertical reducido, horizontal 10% */
    border-radius: 0; /* sin redondeo en el contenedor */
    overflow: visible; /* no recorta, solo la miniatura tendrá esquinas */
    box-shadow: none !important; /* sin borde visible alrededor del contenedor */
}
.video-list-section .card-img-top {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.75rem; /* redondeo solo en la miniatura */
}

/* Media hero between navbar and main panel */
/* Imagen móvil del hero: oculta por defecto (desktop) */
.media-hero__mobile-img { display: none; }

.media-hero-container { display: flex; justify-content: center; margin: 0; padding: 0; }
.media-hero {
    width: 100%;
    height: 24vh; /* -10% adicional respecto a 27vh */
    max-height: 294px; /* -10% adicional respecto a 326px */
    background-image: url('../src/santiago.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 205%; /* bajar 15% adicional */
    background-attachment: fixed; /* la foto permanece fija; el resto de la página se desplaza */
    position: relative;
    overflow: hidden;
}

/* Variante aniversario para la home (blanco y negro) */
.media-hero--aniversario {
    /* Imagen base para esta variante */
    --hero-image: url('../src/aniversario2.jpg');
    background-image: none;
    /* mismo alto que el hero de Contacto */
    height: 540px;
    max-height: none;
}

/* Fondo difuminado en B/N para aniversario */
.media-hero--aniversario::before {
    content: "";
    position: absolute;
    /* expandimos para evitar bordes tras el blur */
    inset: -12px;
    background-image: var(--hero-image);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    filter: grayscale(100%) blur(6px);
    opacity: 0.75;
    z-index: 0;
}

/* Capa central controlada por JS para simular fixed (ocupa 3/5, se recorta dentro del hero) */
.media-hero--aniversario .media-hero__center {
    position: absolute;
    top: 0;
    left: 50%;
    width: 60%;
    height: 100%;
    transform: translate(-50%, 0);
    background-image: var(--hero-image);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 100%;
    filter: grayscale(100%);
    z-index: 1;
    pointer-events: none;
    will-change: background-position;
}

/* Títulos con subrayado bajo el texto */
.section-heading { position: relative; padding-bottom: 0.5rem; }
.section-heading h2 { margin: 0; }
.section-heading::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 2px; border-radius: 1px; background: rgba(20,20,20,0.25);
}
.section-heading--right { text-align: right; }
.section-heading--center { text-align: center; }

/* Hero label (NOSOTROS, VIDEO, CONTACTO) */
.media-hero .media-hero-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    opacity: 0;
    font-family: 'Montserrat-Semibold', sans-serif;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.12em;
    font-size: clamp(1.5rem, 7.2vw, 5.4rem);
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

html.page-loaded .media-hero .media-hero-label,
body.page-loaded .media-hero .media-hero-label {
    animation: heroFadeIn 0.8s ease-out 0.9s forwards;
}
.video-list-section .card-body { background: transparent !important; }
.video-list-section .card-title { color: #141414 !important; }

/* Uniform crop for La banda portraits */
.band-member-img {
    width: 70%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 50%;
    display: block;
    margin: 0 auto;
}

.band-member-card--compact .band-member-img {
    width: 55%;
}

/* Reducir la altura general de la barra (anula utilidades bootstrap py-3) */
header .row.align-items-center.py-3 { padding-top: 0.85rem !important; padding-bottom: 0.85rem !important; }

/* Móvil: logo centrado y reducido, menú debajo */
@media (max-width: 767.98px) {
    /* Reestructurar header como columna */
    header .header-grid {
        display: flex !important;
        flex-direction: column;
        align-items: center;
    }
    header .header-left {
        width: auto;
        flex: none;
        text-align: center;
    }
    header .header-center {
        width: 100%;
        flex: none;
    }
    /* Logo 46% más pequeño que desktop */
    .logoNav {
        max-height: 45.9px; /* 51px × 0.90 */
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .navbar .navbar-nav {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 4%;
    }
    .navbar .navbar-nav .nav-item { flex: 1 1 0; }
    .navbar .navbar-nav .nav-link {
        text-align: center;
        padding: 0.15rem 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 1.1em;
    }
    header .row.py-3.header-grid {
        padding-top: 0.25rem !important;
        padding-bottom: 0.1rem !important;
    }

    /* Hero index: imagen directa en escala de grises, ancho completo sin recorte */
    .media-hero--aniversario {
        /* Aspect ratio de la imagen (~2.8:1 panorámica) para que el alto se ajuste al ancho */
        height: 0;
        padding-bottom: 35.7%; /* 1/2.8 ≈ 35.7% */
        background-image: var(--hero-image);
        background-size: 100% auto;
        background-position: center center;
        background-attachment: scroll;
        filter: grayscale(100%);
    }
    .media-hero--aniversario::before {
        display: none;
    }
    .media-hero--aniversario .media-hero__center {
        display: none;
    }
    /* El label no debe heredar el grayscale del padre */
    .media-hero--aniversario .media-hero-label {
        filter: grayscale(0);
    }

    /* Hero media: santiago-movil recortada por abajo, mismo alto que index */
    .media-hero:not(.media-hero--aniversario):not(.media-hero--nosotros) {
        height: 0;
        padding-bottom: 35.7%; /* misma proporción que el hero del index */
        max-height: none;
        padding-top: 0;
        background: none;
        background-attachment: scroll;
        overflow: hidden;
    }
    .media-hero__mobile-img {
        display: block;
        width: 100%;
        height: auto;
    }

    /* Hero contacto: mismo alto que index y media, imagen a ancho completo */
    .media-hero.media-hero--nosotros {
        height: 0;
        padding-bottom: 35.7%; /* misma proporción que los otros heroes */
        max-height: none;
        background: none;
        overflow: hidden;
    }
    .media-hero__mobile-img--nosotros {
        display: block;
        width: 100%;
        height: auto;
        /* Subir la imagen para centrar en las caras, recortando arriba y abajo */
        margin-top: -10%;
    }

    /* Bloques de contenido: márgenes laterales 10%, fuente 15% menor, orden título→foto→texto */
    .content-block {
        flex-direction: column;
        padding-left: 10%;
        padding-right: 10%;
    }
    /* Desenvuelve el wrapper info para poder reordenar título y texto por separado */
    .content-block__info {
        display: contents;
    }
    .content-block__title { order: 1; width: 100%; }
    .content-block__img   { order: 2; width: 100%; margin-top: 0.75rem; padding-left: 0; padding-right: 0; }
    .content-block__text  { order: 3; width: 100%; margin-top: 0.75rem; }
    .content-block__text,
    .content-block .content-block__text.lead {
        font-size: 0.85em; /* 15% menor */
    }

    /* Reducir espacio entre secciones de contenido */
    main > section.py-5 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    /* Fotos del equipo 15% más grandes */
    .band-member-card--compact .band-member-img {
        width: 63.25%; /* 55% × 1.15 */
    }

    /* Pirámide: 1 arriba centrado, 2 abajo */
    .band-pyramid {
        flex-wrap: wrap;
        justify-content: center;
    }
    /* Mismo tamaño de foto para los 3 */
    .band-pyramid .band-member-img {
        width: 100%;
    }

    /* Título del vídeo principal: mismo tamaño que los card-title (h5) */
    .active-video-section #activeVideoTitle {
        font-size: 1.25rem;
    }
}

/* ===== TABLET vertical + horizontal (768px – 1199.98px) ===== */
@media (min-width: 768px) and (max-width: 1199.98px) {
    /* Header: logo centrado arriba, nav + RRSS + Dossier en la fila de abajo */
    header .header-grid {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        grid-template-columns: none !important;
    }
    header .header-left {
        width: 100%;
        display: flex !important;
        justify-content: center;
        justify-self: unset;
    }
    /* Center y right comparten la segunda fila, en línea */
    header .header-center {
        flex: 0 1 auto;
        justify-self: unset;
        width: auto;
        max-width: none;
    }
    header .header-right {
        flex: 0 0 auto;
        justify-self: unset;
        display: flex !important;
        align-items: center;
    }
    header .navbar-extra {
        margin-left: 0;
        padding-left: 1rem;
    }
    header .navbar-extra .ml-3 {
        margin-left: 0.75rem !important;
    }
    header .header-center .navbar-nav {
        gap: 1.25rem;
    }

    /* Hero index: imagen directa en escala de grises, ancho completo */
    .media-hero--aniversario {
        height: 0;
        padding-bottom: 35.7%;
        background-image: var(--hero-image);
        background-size: 100% auto;
        background-position: center center;
        background-attachment: scroll;
        filter: grayscale(100%);
    }
    .media-hero--aniversario::before {
        display: none;
    }
    .media-hero--aniversario .media-hero__center {
        display: none;
    }
    .media-hero--aniversario .media-hero-label {
        filter: grayscale(0);
    }

    /* Hero media: santiago-movil a ancho completo */
    .media-hero:not(.media-hero--aniversario):not(.media-hero--nosotros) {
        height: 0;
        padding-bottom: 35.7%;
        max-height: none;
        padding-top: 0;
        background: none;
        background-attachment: scroll;
        overflow: hidden;
    }
    .media-hero__mobile-img {
        display: block;
        width: 100%;
        height: auto;
    }

    /* Hero contacto: mismo alto que los otros héroes, imagen centrada en las caras */
    .media-hero.media-hero--nosotros {
        height: 0;
        padding-bottom: 35.7%;
        max-height: none;
        background: none;
        overflow: hidden;
    }
    .media-hero__mobile-img--nosotros {
        display: block;
        width: 100%;
        height: auto;
        margin-top: -10%;
    }
}

    /* Hero de Contacto (desktop) */
@media (min-width: 1200px) {
    .media-hero.media-hero--nosotros {
        height: 540px;
        max-height: none;
        background-image: url('../src/nosotros.jpg');
        background-position: 50% 40%;
    }
}

/* Footer */
footer.site-footer {
    background-color: #141414;
    color: #ffffff;
    margin-top: 0;
}
footer.site-footer a { color: #ffffff; text-decoration: none; }
footer.site-footer a:hover { color: #cccccc; text-decoration: none; }
.social-icons { display: flex; gap: 1rem; align-items: center; justify-content: center; }
.social-icons a { display: inline-flex; width: 1.1rem; height: 1.1rem; }
.social-icons svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }