/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;
    padding: 0;

    background: #000;

    color: #fff;

    font-family: "Montserrat", sans-serif;

    overflow-x: hidden;

}


a {
    text-decoration: none;
}


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --negro: #000;

    --negro-suave: #080808;

    --gris: #151515;

    --blanco: #fff;

    --amarillo: #dbdb0b;

    --amarillo-brillo: #ffff32;

    --dorado: #c8b900;

    --sombra:
        rgba(219, 219, 11, 0.28);

}



/* =========================================================
   NAVBAR
========================================================= */

nav {

    position: fixed;

    top: 0;
    left: 0;

    z-index: 9999;

    width: 100%;
    height: 90px;

    background: rgba(0, 0, 0, 0.96);

    border-bottom:
        1px solid rgba(255,255,255,0.08);

}


.link {

    position: absolute;

    left: 0;

    top: -2%;

    padding:
        20px 50px;

}


.link img {

    display: block;

    width: 189px;

    height: auto;

}


nav ul {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 23px;

    height: 90px;

    margin: 0;

    padding:
        0 12% 0 0;

    list-style: none;

}


nav ul li {

    display: inline-flex;

}


nav ul li a {

    color: #fff;

    font-family:
        "Quicksand",
        sans-serif;

    font-size: 15px;

    text-transform: uppercase;

    padding:
        8px 10px;

    transition:
        0.3s ease;

}


nav ul li a:hover {

    transform:
        translateY(-2px);

}


.liyf {

    transition:
        0.3s ease;

}


.liyf img {

    display: block;

}


.liyf:hover {

    transform:
        scale(1.07);

}


#check {

    display: none;

}


.checkbtm {

    display: none;

}



/* =========================================================
   ESPACIO NAV
========================================================= */

.nav-space {

    height: 90px;

}



/* =========================================================
   HERO
========================================================= */

.hero-testimonios {

    width: 100%;

    position: relative;

    overflow: hidden;

}


.hero-testimonios::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 35%;

    background:
        linear-gradient(
            transparent,
            #000
        );

}


.hero-testimonios img {

    display: block;

    width: 100%;

    height: auto;

}



/* =========================================================
   TITULO
========================================================= */

.titulo-testimonios {

    position: relative;

    text-align: center;

    padding:
        45px 20px 25px;

    background: #000;

}


.titulo-testimonios h1 {

    position: relative;

    margin: 0;

    font-family:
        "Bebas Neue",
        sans-serif;

    font-size:
        clamp(55px, 7vw, 90px);

    letter-spacing:
        4px;

    color: #fff;

    text-shadow:
        0 0 8px rgba(219,219,11,0.5),
        0 0 25px rgba(219,219,11,0.25);

}


.titulo-testimonios h1::after {

    content: "";

    display: block;

    width: 90px;

    height: 3px;

    margin:
        14px auto 0;

    background:
        var(--amarillo);

    box-shadow:
        0 0 12px
        rgba(219,219,11,0.8);

}


.titulo-testimonios p {

    margin:
        18px 0 0;

    color:
        rgba(255,255,255,0.7);

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        15px;

    letter-spacing:
        2px;

}



/* =========================================================
   FONDO PRINCIPAL
========================================================= */

.parallax-videos {

    position: relative;

    width: 100%;

    min-height: 700px;

    padding:
        65px 0 100px;

    background-image:
        linear-gradient(
            rgba(0,0,0,0.76),
            rgba(0,0,0,0.86)
        ),
        url('../img/camp%20prov16-15.png');

    background-position:
        center;

    background-size:
        cover;

    background-attachment:
        fixed;

}


.parallax-videos::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at center,
            rgba(219,219,11,0.06),
            transparent 55%
        );

}



/* =========================================================
   CAMPAÑA
========================================================= */

.campania {

    position: relative;

    width: 100%;

    max-width:
        1500px;

    margin:
        0 auto 100px;

    padding:
        0 25px;

}



/* =========================================================
   CABECERA CAMPAÑA
========================================================= */

.campania-header {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 30px;

    margin-bottom:
        30px;

    text-align: center;

}


.campania-header > div {

    min-width:
        280px;

}


.campania-line {

    display: block;

    width:
        min(180px, 15vw);

    height: 1px;

    background:
        linear-gradient(
            to right,
            transparent,
            var(--amarillo)
        );

}


.campania-line:last-child {

    background:
        linear-gradient(
            to left,
            transparent,
            var(--amarillo)
        );

}


.campania-lugar {

    display: block;

    font-family:
        "Bebas Neue",
        sans-serif;

    color:
        var(--amarillo);

    font-size:
        clamp(32px, 4vw, 55px);

    letter-spacing:
        3px;

    line-height:
        1;

}


.campania-header h2 {

    margin:
        7px 0 0;

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        14px;

    font-weight:
        400;

    color:
        rgba(255,255,255,0.72);

    letter-spacing:
        5px;

}



/* =========================================================
   CARRUSEL
========================================================= */

.testimonios-carousel {

    position: relative;

    display: flex;

    align-items: center;

    width: 100%;

}



/* =========================================================
   VENTANA
========================================================= */

.carousel-window {

    width: 70%;

    overflow: hidden;

    padding:
        30px 0 40px;

}



/* =========================================================
   TRACK
========================================================= */

.carousel-track {

    display: flex;

    align-items: center;

    gap: 22px;

    width: max-content;

    padding: 0;

    transform: translateX(0);

    transition:
        transform 0.65s cubic-bezier(.22,.61,.36,1);

    will-change: transform;

}



/* =========================================================
   TARJETAS DE VIDEO
========================================================= */

.video-card {


    position: relative;

    flex:
        0 0 min(300px, 30vw);

    aspect-ratio:
        9 / 16;

    overflow: hidden;

    border-radius:
        18px;

    background:
        #050505;

    border:
        1px solid
        rgba(255,255,255,0.12);

    opacity: 0.55;

    transform: scale(0.88);

    filter:
        brightness(0.70)
        saturate(0.80);

    transition:
        transform 0.55s cubic-bezier(.2,.8,.2,1),
        opacity 0.55s ease,
        filter 0.55s ease,
        border-color 0.55s ease,
        box-shadow 0.55s ease;

}


.video-card::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    border-radius:
        inherit;

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,0.05);

}


.video-card video {
   cursor: pointer;
    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;

    background:
        #000;

}



/* =========================================================
   VIDEO ACTIVO
========================================================= */

.video-card.active {

    opacity:
        1;

    transform:
        scale(1);

    filter:
        brightness(1)
        saturate(1)
        blur(0);

    border-color:
        rgba(219,219,11,0.75);

    box-shadow:

        0 0 0 1px
        rgba(219,219,11,0.15),

        0 15px 50px
        rgba(0,0,0,0.8),

        0 0 45px
        rgba(219,219,11,0.15);

    z-index:
        5;

}


.video-card.active::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    border-radius:
        inherit;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.08),
            transparent 35%,
            transparent 70%,
            rgba(219,219,11,0.06)
        );

}



/* =========================================================
   VIDEO ANTERIOR / SIGUIENTE
========================================================= */

.video-card.previous,
.video-card.next-card {

   opacity: 0.70;

    transform: scale(0.93);

    filter:
        brightness(0.78)
        saturate(0.85);


}


.video-card.previous:hover,
.video-card.next-card:hover {

    opacity:
        0.75;

    transform:
        scale(0.88);

}



/* =========================================================
   FLECHAS
========================================================= */

.carousel-arrow {

    position: absolute;

    top: 50%;

    z-index: 20;

    transform:
        translateY(-50%);

    display: flex;

    align-items: center;

    justify-content: center;

    width:
        58px;

    height:
        58px;

    border:
        1px solid
        rgba(219,219,11,0.6);

    border-radius:
        50%;

    background:
        rgba(0,0,0,0.72);

    color:
        #fff;

    font-size:
        27px;

    line-height:
        1;

    cursor:
        pointer;

    backdrop-filter:
        blur(8px);

    box-shadow:
        0 8px 25px
        rgba(0,0,0,0.6);

    transition:
        all 0.3s ease;

}


.carousel-prev {

    left:
        10px;

}


.carousel-next {

    right:
        10px;

}


.carousel-arrow:hover:not(:disabled) {

    color:
        #000;

    background:
        var(--amarillo);

    border-color:
        var(--amarillo);

    transform:
        translateY(-50%)
        scale(1.1);

    box-shadow:
        0 0 25px
        rgba(219,219,11,0.45);

}


.carousel-arrow:disabled {

    opacity:
        0.2;

    cursor:
        default;

}



/* =========================================================
   INFO CARRUSEL
========================================================= */

.carousel-info {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 15px;

    margin-top:
        -5px;

}


.carousel-counter {

    min-width:
        70px;

    padding:
        7px 14px;

    border:
        1px solid
        rgba(219,219,11,0.35);

    border-radius:
        30px;

    background:
        rgba(0,0,0,0.55);

    color:
        rgba(255,255,255,0.85);

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        12px;

    letter-spacing:
        2px;

    text-align:
        center;

}



/* =========================================================
   DOTS
========================================================= */

.carousel-dots {

    display: flex;

    align-items: center;

    justify-content: center;

    gap:
        7px;

    max-width:
        90%;

    overflow:
        hidden;

}


.carousel-dot {

    flex:
        0 0 auto;

    width:
        7px;

    height:
        7px;

    padding:
        0;

    border:
        0;

    border-radius:
        50%;

    background:
        rgba(255,255,255,0.25);

    cursor:
        pointer;

    transition:
        all 0.3s ease;

}


.carousel-dot.active {

    width:
        24px;

    border-radius:
        10px;

    background:
        var(--amarillo);

    box-shadow:
        0 0 10px
        rgba(219,219,11,0.7);

}



/* =========================================================
   TEXTO MAR DEL PLATA
========================================================= */

.campania-text {

    max-width:
        1050px;

    margin:
        35px auto 0;

    padding:
        30px 35px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-left:
        3px solid
        var(--amarillo);

    border-radius:
        5px 15px 15px 5px;

    background:
        rgba(0,0,0,0.42);

    backdrop-filter:
        blur(8px);

}


.campania-text p {

    margin:
        0;

    color:
        rgba(255,255,255,0.84);

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        16px;

    line-height:
        1.8;

    text-align:
        center;

}



/* =========================================================
   YOUTUBE
========================================================= */

.youtube-section {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    margin:
        30px auto 20px;

}


.youtube-section p {

    margin:
        0 0 25px;

    color:
        rgba(255,255,255,0.7);

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        14px;

    letter-spacing:
        3px;

    text-transform:
        uppercase;

}



/* =========================================================
   BOTON YOUTUBE
========================================================= */

.btn-yt-testimonios {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width:
        250px;

    height:
        125px;

    overflow:
        hidden;

    border-radius:
        25px;

    background:
        linear-gradient(
            135deg,
            #ff0000,
            #a80000
        );

    box-shadow:
        0 15px 45px
        rgba(255,0,0,0.35);

    transition:
        all 0.4s ease;

}


.btn-yt-testimonios:hover {

    width:
        285px;

    background:
        linear-gradient(
            135deg,
            #ff0000,
            #000
        );

    box-shadow:
        0 15px 50px
        rgba(255,0,0,0.65);

}


.icono {

    display: flex;

    align-items: center;

    justify-content: center;

    transition:
        all 0.4s ease;

}


.play {

    width:
        0;

    height:
        0;

    margin-left:
        8px;

    border-left:
        40px solid #fff;

    border-top:
        25px solid transparent;

    border-bottom:
        25px solid transparent;

}


.btn-yt-testimonios .texto {

    position: absolute;

    color:
        #fff;

    font-family:
        "Bebas Neue",
        sans-serif;

    font-size:
        34px;

    letter-spacing:
        2px;

    opacity:
        0;

    transform:
        translateY(20px);

    transition:
        all 0.4s ease;

}


.btn-yt-testimonios:hover .icono {

    opacity:
        0;

    transform:
        scale(0.7);

}


.btn-yt-testimonios:hover .texto {

    opacity:
        1;

    transform:
        translateY(0);

}



/* =========================
   FOOTER GENERAL
========================= */
.footer {
  background: radial-gradient(circle at top, #111 0%, #000 70%);
  padding: 80px 30px 70px;
  color: white;
  font-family: "Bebas Neue", sans-serif;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* =========================
   GRID LAYOUT (AREAS)
========================= */
.footer-container {
  max-width: 1100px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "logo logo logo"
    "menu young social";
  gap: 60px;
  align-items: start;
  text-align: center;
}

/* =========================
   GRID AREAS
========================= */
.footer-logo {
  grid-area: logo;
}

.footer-menu {
  grid-area: menu;
}

.footer-youngfest {
  grid-area: young;
}

.footer-social {
  grid-area: social;
}

/* =========================
   ANIMACIÓN DE ENTRADA
========================= */
.footer-container > div {
  opacity: 0;
  transform: translateY(35px);
  animation: fadeUp 0.9s ease forwards;
}

.footer-logo { animation-delay: 0.15s; }
.footer-menu { animation-delay: 0.30s; padding-bottom: 10%; }
.footer-youngfest { animation-delay: 0.45s; }
.footer-social { animation-delay: 0.60s; }

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

/* =========================
   LOGO PRINCIPAL
========================= */
.footer-logo img {
  width: 200px;
  margin-bottom: 40px;
  border-radius: 17px;
  filter: drop-shadow(0 0 12px rgba(255,255,255,0.25));
}

/* =========================
   MENÚ
========================= */
.footer-menu h2,
.footer-social h2 {
  margin-bottom: 16px;
  font-size: 20px;
  letter-spacing: 2px;
  text-decoration: underline;
}

.footer-menu a {
  display: block;
  color: #eaeaea;
  font-size: 15px;
  margin-bottom: 10px;
  transition: all 0.3s ease;
}

.footer-menu a:hover {
  color: white;
  transform: translateX(6px);
}

/* =========================
   YOUNGFEST
========================= */
.footer-youngfest img {
  width: 170px;
  margin-bottom: 12px;
}

.instagram {
  display: flex;
  justify-content: center;
  align-items: center;
}

.instagram a {
  color: #eaeaea;
  font-size: 15px;
  transition: 0.3s;
}

.instagram a:hover {
  color: white;
}

/* =========================
   REDES SOCIALES
========================= */
.icons {
  display: flex;
  justify-content: center;
  gap: 22px;
}

.icons img {
  width: 34px;
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: all 0.3s ease;
}
.icons img:hover {
  opacity: 1;
  transform: scale(1.2);
}
.contw{
    position: fixed;
    z-index: 999;
    border-radius: 40%;
    bottom: 1.25em;
    right: 0.525em;
    padding: 0.525em;
    margin-top: 55%;
    margin-left: 12%;
    transition: ease 0.3s;
}

.contw:hover{
    transform: scale(1.1);
    transition: 0.3s;
}

.botonw{
    width: 8.7em;
    transition: ease 1s;
}
.mdp-container {
    position: relative;
    width: 100%;
}


.mdp-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        rgba(0, 0, 0, 0.6),
        rgba(0, 0, 0, 0.2)
    );
    backdrop-filter: blur(4px);
    z-index: 1;
}


.text-mdp {
    position: relative;
    z-index: 2;
    padding: 40px 20px;
    text-align: center;
}

.text-mdp p {
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    font-size: 22px;
    line-height: 1.7;
    opacity: 0.95;
    text-shadow: 0 3px 6px rgba(230, 210, 31, 0.8);
    max-width: 100%;
    margin: auto;
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .link {

        padding-left:
            30px;

    }


    .video-card {

        flex-basis:
            42vw;

    }


}



/* =========================================================
   MOBILE MENU
========================================================= */

@media (max-width: 800px) {


    nav {

        height:
            82px;

    }


    .nav-space {

        height:
            82px;

    }


    .checkbtm {

        position:
            absolute;

        top:
            20px;

        left:
            20px;

        z-index:
            10000;

        display:
            block;

        cursor:
            pointer;

    }


    .checkbtm img {

        width:
            43px;

        height:
            43px;

        object-fit:
            cover;

    }


    .link {

        left:
            50%;

        padding:
            13px 0;

        transform:
            translateX(-50%);

    }


    .link img {

        width:
            165px;

    }


    nav ul {

        position:
            fixed;

        top:
            82px;

        left:
            -100%;

        width:
            100%;

        height:
            calc(100vh - 82px);

        display:
            flex;

        flex-direction:
            column;

        justify-content:
            flex-start;

        gap:
            25px;

        padding:
            70px 20px;

        margin:
            0;

        background:
            rgba(0,0,0,0.98);

        transition:
            left 0.35s ease;

    }


    #check:checked ~ ul {

        left:
            0;

    }


    nav ul li {

        display:
            block;

        margin:
            0;

    }


    nav ul li a {

        display:
            block;

        font-size:
            18px;

        padding:
            10px;

    }


    .liyf {

        margin-top:
            10px;

    }


    .parallax-videos {

        background-attachment:
            scroll;

    }


    .campania {

        padding:
            0 12px;

    }


    .campania-header {

        gap:
            12px;

    }


    .campania-header > div {

        min-width:
            auto;

    }


    .campania-line {

        width:
            50px;

    }


    .video-card {

        flex-basis:
            37vw;

        transform:
            scale(0.78);

    }


    .video-card.previous,
    .video-card.next-card {

        transform:
            scale(0.84);

    }

    .carousel-arrow {

        width:
            48px;

        height:
            48px;

        font-size:
            21px;

    }


    .carousel-prev {

        left:
            5px;

    }


    .carousel-next {

        right:
            2px;

    }

.campania-text {
        width:
            95%;
        padding:
            25px 20px;

    }
    .footer-container {

        grid-template-columns:
            1fr;

        grid-template-areas:

            "logo"

            "menu"

            "young"

            "social";

        gap:
            40px;

    }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {


    .hero-testimonios img {

        min-height:
            220px;

        object-fit:
            cover;

    }


    .titulo-testimonios {

        padding:
            35px 15px 20px;

    }


    .titulo-testimonios h1 {

        font-size:
            55px;

    }


    .titulo-testimonios p {

        font-size:
            12px;

        letter-spacing:
            1px;

    }


    .parallax-videos {

        padding:
            45px 0 70px;

    }


    .campania {

        margin-bottom:
            70px;

        padding:
            0 5px;

    }


    .campania-header {

        margin-bottom:
            10px;

    }


    .campania-lugar {

        font-size:
            34px;

        letter-spacing:
            2px;

    }


    .campania-header h2 {

        font-size:
            11px;

        letter-spacing:
            3px;

    }


    .campania-line {

        width:
            35px;

    }


    .carousel-window {

        padding:
            25px 0 30px;

    }


    .video-card {

        flex-basis:
            38vw;

        border-radius:
            13px;

        transform:
            scale(0.80);

    }


    .video-card.previous,
    .video-card.next-card {

        transform:
            scale(0.84);

    }




    .carousel-arrow {

        width:
            39px;

        height:
            39px;

        font-size:
            18px;

    }


    .carousel-prev {

        left:
            4px;

    }


    .carousel-next {

        right:
            1px;

    }


    .carousel-dot {

        width:
            6px;

        height:
            6px;

    }


    .carousel-dot.active {

        width:
            18px;

    }


    .campania-text {

        margin:
            20px 7px 0;

        padding:
            19px 12px;

    }


    .campania-text p {

        font-size:
            12px;

        line-height:
            1.7;

    }


    .youtube-section {

        margin-top:
            0;

    }


    .btn-yt-testimonios {

        width:
            210px;

        height:
            105px;

    }


    .btn-yt-testimonios:hover {

        width:
            235px;

    }


    .btn-yt-testimonios .texto {

        font-size:
            28px;

    }


    .play {

        border-left-width:
            32px;

        border-top-width:
            20px;

        border-bottom-width:
            20px;

    }


    .footer {

        padding:
            60px 20px;

    }


    .footer-logo img {

        width:
            170px;

    }


    .botonw {

        width:
            55px;

    }


}



/* =========================================================
   MOBILE MUY PEQUEÑO
========================================================= */

@media (max-width: 400px) {


    .link img {

        width:
            145px;

    }


    .checkbtm {

        left:
            15px;

    }


    .titulo-testimonios h1 {

        font-size:
            48px;

    }


    .campania-lugar {

        font-size:
            30px;

    }


    .campania-header h2 {

        font-size:
            10px;

    }


    .video-card {

        flex-basis:
            42vw;

    }


    .carousel-arrow {

        width:
            38px;

        height:
            38px;

    }


    .campania-text p {

        font-size:
            9px;

    }

}



/* =========================================================
   ACCESIBILIDAD
========================================================= */

@media (prefers-reduced-motion: reduce) {


    html {

        scroll-behavior:
            auto;

    }


    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

    }

}