/* ===== Fuente personalizada ===== */
@font-face {
    font-family: 'HeadlinerNo45';
    src: url('fonts/headlinerno.45.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* -------------------------- RESET BASE -------------------------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #111;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* -------------------------- MAIN SECTION -------------------------- */
.main-section {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url('assets/fondo-madera.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 0;
}

/* -------------------------- CONTAINER GENERAL -------------------------- */
.container {
    width: 1300px;
    max-width: 100%;
    display: flex;
    align-items: center;
    color: white;
    padding: 40px;
}

@media (min-width:1500px) {
    .container {
        width: 1500px;
    }
}

/* -------------------------- NAVBAR -------------------------- */
.container.navbar {
    justify-content: space-between;
    align-items: center;
    background: transparent;
    padding: 0 40px;
    position: relative;
}

.logo-container img {
    height: 140px;
    width: auto;
    opacity: 0;
    transform: translateY(-40px);
    animation: fadeDown 4500ms cubic-bezier(.2, .9, .2, 1) forwards;
    will-change: transform, opacity;
    display: block;
}

@keyframes fadeDown {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

nav {
    display: flex;
}

.nav-menu {
    display: flex;
    gap: 42px;
    list-style: none;
    align-items: center;
}

.nav-menu li a {
    font-family: 'HeadlinerNo45', sans-serif;
    color: #ffffffe0;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 40px;
    letter-spacing: 1.1px;
    transition: opacity .25s ease, color .25s ease;
}

.nav-menu li a:hover {
    opacity: .85;
    color: #e3a85a;
}

@media (max-width:1024px) {
    .nav-menu {
        display: none;
    }
    .logo-container img {
        height: 150px;
    }
}

/* -------------------------- ABOUT -------------------------- */
.container#about {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 40px;
    flex-wrap: wrap;
    padding-top: 20px;
}

.about-left {
    flex: 0 0 33%;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    gap: 4px;
}

.about-left h2 {
    width: 100%;
    align-self: flex-start;
    font-family: 'HeadlinerNo45', sans-serif;
    font-size: 60px;
    color: #ffc680;
    margin-bottom: 6px;
    letter-spacing: 2px;
}

.about-left p {
    width: 100%;
    text-align: left;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

.about-right {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 15px;
    align-items: center;
    width: 100%;
}

.about-right .col1,
.about-right .col2,
.about-right .col3 {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: transparent;
}

.about-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
    transition: transform .32s ease, box-shadow .32s ease;
    background-color: transparent;
    position: relative;
    z-index: 1;
}

.about-right img:hover {
    transform: scale(1.04);
    z-index: 5;
}

.about-right .col1 img,
.about-right .col3 img {
    max-width: 100%;
    aspect-ratio: 3 / 4;
}

.about-right .col2 img {
    max-width: 100%;
    height: auto;
}

.about-right .col2 .event-card {
    max-width: 100%;
}

/* ---------- EFECTO FLIP CARD ---------- */
.flip-container {
    perspective: 1000px;
    width: 100%;
    aspect-ratio: 3 / 4;
    cursor: pointer;
}

.flipper {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.flip-container.flipped .flipper {
    transform: rotateY(180deg);
}

.front,
.back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    overflow: hidden;
}

.front {
    z-index: 2;
}

.back {
    transform: rotateY(180deg);
}

.flip-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

/* Mantener el hover solo para imágenes que NO están dentro del flip-container */
.about-right .col1 > img:hover,
.about-right .col2 img:hover,
.about-right .col3 > img:hover {
    transform: scale(1.04);
    z-index: 5;
}

/* Deshabilitar hover en las imágenes dentro del flip-container */
.flip-container img:hover {
    transform: none;
}

/* ---------- Redes Sociales ---------- */
.social-section {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    background-image: url('assets/grupo-7.webp');
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 20px;
}

.social-section h3 {
    font-family: 'HeadlinerNo45', sans-serif;
    font-size: 44px;
    color: #f3e0bc;
    margin-bottom: 8px;
    letter-spacing: 2px;
    text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.281);
}

.social-icons {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.social-icons img {
    width: 37px;
    height: 37px;
    transition: transform 0.3s ease, filter 0.3s ease;
    cursor: pointer;
}

.social-icons img:hover {
    transform: scale(1.1);
    filter: brightness(1.2);
}


/* ---------- TARJETA DE EVENTOS ---------- */
/* El afiche no trae marco, asi que se monta dentro del marco de madera
   recortado del banner anterior. La proporcion de la tarjeta esta calculada
   para que la abertura del marco quede exactamente en 9:16, que es la del
   afiche: asi entra completo, sin recortes. */
.event-card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 578 / 1000;
    line-height: 0;
    transition: transform .32s ease;
}

/* El afiche ocupa la abertura y se mete 0.4% bajo la madera por cada lado,
   para que no quede una linea de fondo entre el borde y el marco. */
.about-right .col2 .event-art {
    position: absolute;
    top: 2.70%;
    left: 3.34%;
    width: 92.86%;
    height: 95.37%;
    max-width: none;
    object-fit: cover;
    border-radius: 4% / 2.3%;
    z-index: 1;
    transition: none;
}

/* El marco va encima y no intercepta clics. */
.about-right .col2 .card-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: fill;
    border-radius: 0;
    background: transparent;
    pointer-events: none;
    transition: none;
    z-index: 3;
}

/* El hover agranda la tarjeta completa, no sus piezas por separado. */
.about-right .col2 .event-card:hover {
    transform: scale(1.04);
    z-index: 5;
}

.about-right .col2 .event-art:hover,
.about-right .col2 .card-frame:hover {
    transform: none;
}

/* -------------------------- FOOTER -------------------------- */
.container.footer {
    justify-content: center;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.77);
    text-align: center;
    padding-top: 10px;
    padding-bottom: 50px;
}

/* -------------------------- RESPONSIVE -------------------------- */

/* TABLETS (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 768px) {
    .container#about {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .about-left {
        width: 100%;
        flex: none;
        padding: 18px 20px;
    }

    .about-left h2 {
        align-self: center;
        text-align: left;
    }

    .about-left p {
        text-align: left;
    }

    .about-right {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto auto auto;
        gap: 20px;
        width: 100%;
        max-width: 700px;
        align-items: start;
    }

    /* Col1 ocupa primera posición */
    .about-right .col1 {
        grid-column: 1;
        grid-row: 1 / 2;
    }

    /* Col3 ocupa segunda posición (misma fila) */
    .about-right .col3 {
        grid-column: 2;
        grid-row: 1 / 2;
    }

    /* Col2 (Eventos) ocupa toda la segunda fila y está centrado */
    .about-right .col2 {
        grid-column: 1 / 3;
        grid-row: 2;
        justify-self: center;
        max-width: 500px;
        width: 100%;
    }

    .flip-container,
    .about-right .col1 img,
    .about-right .col3 img,
    .social-section {
        max-width: 100%;
        width: 100%;
    }

    .about-right .col2 img {
        width: 100%;
        height: auto;
    }

    .about-right .col2 .event-card {
        width: 100%;
    }
}

/* MÓVILES (menos de 768px) */

@media (max-width: 767px) {
    
    .container {
        padding-left: 17px;
        padding-right: 17px;
        padding-top: 900px;
    }
    
    .container#about {
        flex-direction: column-reverse;
        align-items: center;
        text-align: center;
    }

    .about-left {
        width: 100%;
        flex: none;
        padding: 18px 10px;
    }

    .about-left h2 {
        align-self: center;
        text-align: left;
    }

    .about-left p {
        text-align: left;
    }

    .about-right {
        display: flex;
        flex-direction: column;
        gap: 18px;
        width: 100%;
        align-items: center;
        padding-top: 20px;
    }

    .about-right .col1 img,
    .about-right .col3 img {
        max-width: 320px;
        aspect-ratio: 3/4;
    }

    .social-section {
        max-width: 340px;
    }

    .flip-container {
        max-width: 320px;
    }
}

@media (max-width: 480px) {
    .logo-container img {
        height: 120px;
    }

    .about-left h2 {
        font-size: 45px;
    }

    .about-left p {
        font-size: 18px;
    }

    .social-icons img {
        width: 50px;
        height: 50px;
    }
}



/* ---------- mobile layout (solo hasta 768px) ---------- */


@media (max-width: 768px) {
  /* contenedor general -> una columna vertical */
  .about-right {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    width: 100%;
    align-items: start;
  }

  /* col1 -> dos "bloques" en la misma fila */
  /* usamos grid para que los dos elementos (flip-container y el link) se ubiquen lado a lado */
  .about-right .col1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    align-items: center;
  }

  /* Asegurar que el flip-container ocupe el 100% de su celda */
  .about-right .col1 .flip-container,
  .about-right .col1 a {
    width: 100%;
  }



  /* col3 -> playlist + redes en la misma fila */
  .about-right .col3 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    align-items: center;
  }

  /* Dentro de social-section, esconder el h3 en el espacio reducido (opcional)
     o mantenerlo, depende diseño; lo dejo visible pero con tamaño más pequeño */
  .about-right .col3 .social-section h3 {
    margin: 0 0 8px 0;
    font-size: 35px;
  }

  /* Asegurar que los íconos dentro de social-icons queden centrados y con buen tamaño */
  .about-right .col3 .social-icons {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
  }

  .about-right .col3 .social-icons a img.img-fit {
    aspect-ratio: 1 / 1;
    width: 36px;   /* tamaño de icono en mobile */
    height: 36px;
    object-fit: contain;
  }

  /* pequeña mejora: evitar overflow si el flip usa transform */
  .about-right .col1 .flip-container,
  .about-right .col1 .flipper,
  .about-right .col1 .front,
  .about-right .col1 .back {
    width: 100%;
    height: 100%;
  }
}

/* ============================================================
   Vídeo del evento dentro de la tarjeta con marco de madera.
   Ocupa exactamente el mismo hueco que .event-art y queda
   entre el cartel (z-index 1) y el marco (z-index 3).
   ============================================================ */
.about-right .col2 .event-video {
    position: absolute;
    top: 2.70%;
    left: 3.34%;
    width: 92.86%;
    height: 95.37%;
    border-radius: 4% / 2.3%;
    overflow: hidden;
    background: #000;
    /* Por encima del marco (z-index 3) para que la barra de
       controles no quede tapada por el listón de madera.
       El vídeo va encajado dentro de la abertura, así que el
       marco se sigue viendo alrededor. */
    z-index: 4;
    opacity: 0;
    pointer-events: none;
    transition: opacity .9s ease;
}

.about-right .col2 .event-video.is-on {
    opacity: 1;
    pointer-events: auto;
}

/* El Short es 9:16; la tarjeta 578:1000. Se sobredimensiona
   ligeramente y se recorta para que no queden franjas negras. */
.about-right .col2 .event-video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    border: 0;
    display: block;
    transition: none;
}

/* El hover general de la columna no debe escalar el vídeo */
.about-right .col2 .event-video video:hover {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .about-right .col2 .event-video { transition: none; }
}

/* ============================================================
   CORRECCIÓN (móvil): tras tocar el cartel, el estado :hover se
   queda fijado en pantallas táctiles. Las reglas originales
   suben la imagen a z-index 5, por encima del vídeo (4), así
   que el vídeo se oía pero quedaba tapado por el cartel.

   Tres medidas complementarias:
   1. El vídeo pasa por encima de cualquier :hover.
   2. Con el vídeo activo, el cartel no puede realzarse.
   3. En dispositivos sin ratón se anulan los efectos de realce.
   ============================================================ */
.about-right .col2 .event-video {
    z-index: 6;
}

.about-right .col2 .event-card.video-activo .event-art,
.about-right .col2 .event-card.video-activo .event-art:hover,
.about-right .col2 .event-card.video-activo img:hover {
    z-index: 1;
    transform: none;
}

@media (hover: none) {
    .about-right .col2 .event-card:hover,
    .about-right .col2 .event-art:hover,
    .about-right .col2 img:hover,
    .about-right img:hover {
        transform: none;
        z-index: auto;
    }
}