/************ GLOBALS ***************/
body:has(.page__membership) .header__wrap:before {display:none;}
.hidden { display: none!important;}
.skip-link  {display:none;}

.outer-span span {
  display: inline-block;
  transform: translateY(100%) rotate(10deg);
  opacity: 0;
  transition-property: transform, opacity;
  transition-duration: 1.6s;
  transition-timing-function: var(--expo-out);
  transition-delay: calc(var(--i) * 0.125s);
  color: gray;
}

/* Estado activo: letras entran suavemente */
.outer-span.active span {
  transform: translateY(0%) rotate(0deg);
  opacity: 1;
  color: var(--first-color-second);
}

.span-lines.animate .span-line {
   position: relative;
   display: inline-flex;
   overflow: hidden;
}

.span-lines.animate .span-line .span-line-inner {
   position: relative;
   display: block;
}

.header__animate {
    display:grid;
}

.header__title {
    font-size: calc(var(--big-font-size) * 1);
    font-family: var(--title-font);
    color: #6a6a6a;
    line-height: 1.25;
}

.ignite {
    display: inline; 
    font-style: italic;
}

.ignite .word {
  transition: color 0.25s cubic-bezier(.665,.235,.265,.8);
}

.ignite .word.visible {
  color: var(--title-color);
}

@media screen and (min-width: 767px) {
    .header__animate {
        display:grid;
        grid-template-columns: 8fr 2fr;
    } 
    
    .header__animate.right {
        display:grid;
        grid-template-columns: 2fr 8fr;
    }
    
    .header__animate .animate__title {
        margin-right:auto;
    }
    
    .header__animate.right .animate__title {
        margin-left:auto;
        margin-right:0;
        text-align:right;
    }
}

.img-id-292{object-position:bottom; }
.img-id-175 {object-position:bottom;}
.img-id-542 { object-position: 18% 50%; }


/************************************* BILLBOARD ****************************************/
.section.hero__academy {
    padding-top:0;
}

.billboard {
    position: relative;
    height: 100svh;
}

.billboard__wrap {
    height:100%;
    position:relative;
    z-index: 0;
    display:grid;
    align-content:end;
}

.billboard__wrap:after {
    content:"";
    background:linear-gradient( 77deg, rgba(16, 23, 30, 0.6), transparent 85% );
    bottom: 0;
    left: 0;
    opacity: 1;
    position: absolute;
    right: 26.09%;
    top: 0;
    transition: opacity .5s;
    display:none; 
}

.billboard__media {
    position: absolute;
    inset:0;
}

.billboard__media:after { 
    content:"";
    background-color: transparent;
    background:linear-gradient(
                  to bottom,
                  hsla(210deg, 28.77%, 9%, 0) 0%,
                  hsla(210deg, 28.77%, 9%, 0.15) 20%,
                  hsla(210deg, 28.77%, 9%, 0.35) 40%,
                  hsla(210deg, 28.77%, 9%, 0.55) 65%,
                  hsl(210deg, 28.77%, 9%) 94%
                );
    background-position: 0 top;
    background-repeat: repeat-x;
    background-size: 100% 100%; 
    bottom: -1px;
    height: 62.25vh;
    opacity: 1;
    top: auto;
    width: 100%;
    position:absolute;
}

.billboard__media img,
.billboard__media video {
    position: absolute;
    inset:0;
    background-position: 50%;
    background-size: cover;
    transition: opacity .8s cubic-bezier(.665, .235, .265, .8) 0s;
    width: 100%;
    height:100%;
    object-fit:cover;
    cursor:auto;
}

.billboard__media video {
    opacity:0;
}

.show-video .billboard__media video {
    opacity:1;
}

.billboard__media img {object-position:68% bottom;}
.billboard__media video {object-position:50% top;}

.billboard__media--actions {
    right: 1.5rem;
    z-index:1;
    margin-right:.75rem;
    bottom: 50%;
    position: absolute;
}

.videoButton {
    padding: 8.6px;
    border-width: 2px;
    background-color:transparent;
    color: #fff;
    cursor: pointer;
    -webkit-box-align: center;
    align-items: center;
    appearance: none;
    cursor: pointer;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    position: relative;
    user-select: none;
    will-change: background-color, color;
    word-break: break-word;
    white-space: nowrap;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.7);  
    opacity:.35;
    transition: opacity .3s cubic-bezier(.665, .235, .265, .8);
    width:fit-content;
    display:grid;
    place-content:center;
}

.videoButton:hover {
    opacity:1;
}

.replayButton {
    position:absolute;
    top:0;
    opacity:0;
    pointer-events:none;
}

.replay .replayButton {
    opacity:.35;
    pointer-events:auto;
    transition: opacity .8s cubic-bezier(.665, .235, .265, .8) 0s;
}

.replay #billboardSound {
    opacity:0;
        transition: opacity .8s cubic-bezier(.665, .235, .265, .8) 0s;
}

.billboard__info {
    display: grid;
    justify-content: flex-end;
    gap:1.5rem;
    margin: 0 1.5rem;
    top: 0;
    z-index: 10;
    text-align:center;
    padding-bottom:3rem;
}

.billboard__brand {
    margin-bottom: .75rem;
}

.billboard__brand svg {
    fill: var(--color-button);
    filter: drop-shadow(0 0 12px hsl(30deg 60.8% 49.02% / 50%));
    width:200px;
}

.billboard__info h1 {
    font-size:calc(var(--big-font-size) * 1);
    margin:0;
    line-height:1.25;
    max-width:480px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .25);
    text-wrap-style: balance;
    letter-spacing:-2px;
}

.billboard__info p {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .45);
    font-weight: bold;
    text-wrap-style: balance;
    margin-bottom:0;
}

.billboard__info .__cta {
    display:flex;
    gap:1rem;
}

.billboard__info .__cta .animated-link:before {
    border-radius:1.5rem;
}


.billboard__info .__cta .animated-link.cardPlay {
    color:var(--title-color);
}

.billboard__info .__cta .animated-link.cardPlay:before {
    background-color:var(--color-button);
    box-shadow: 0 0 12px hsl(30deg 60.8% 49.02% / 50%);
}

.billboard__info .__cta .animated-link {
    padding: .625rem 1.75rem;
    flex:50%;
}

/**** Marquee ******/
.billboard__reviews {
    width:100%;
    z-index:1;
    width:100%;
    overflow:hidden;
    padding: 2.5rem 0 0 0;
    display:none;
}

.container__marquee {
    overflow:hidden;
    mask-image: 
    linear-gradient(
      to right,
      hsla(210, 30%, 8%, 0) 0%,
      hsl(210, 30%, 8%) 15%,
      hsl(210, 30%, 8%) 85%,
      hsla(210, 30%, 8%, 0) 100%
    ); 
}

.billboard__reviews .marquee {
    display:flex;
	width: max-content;
	position:relative;
}

.billboard__reviews .marquee ul {
    display: flex;
    padding: 0;
	margin: 0;
	list-style-type: none;
	height: 100%;
}

.billboard__reviews .marquee ul li {
    width:calc(100vw - 3rem);
    margin:0 1.5rem;
    position:absolute;
    transition: opacity 1s ease;
    opacity:0;
}

.marquee ul li.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
  position:relative;
}

.billboard__reviews .marquee ul li:nth-child(1) {--width:330px;}
.billboard__reviews .marquee ul li:nth-child(2) {--width:360px;} 
.billboard__reviews .marquee ul li:nth-child(3) {--width:320px;}
.billboard__reviews .marquee ul li:nth-child(4) {--width:372px;} 
.billboard__reviews .marquee ul li:nth-child(5) {--width:350px;}

.marquee__item {
    display:grid;
    grid-template-columns:44px 1fr;
    gap:.5rem;
    font-size:var(--small-font-size);
    user-select:none;
}

.marquee__image {
    border-radius: 50%;
    width:44px;
    aspect-ratio:1;
    overflow:hidden;
}

.marquee__image .image-sprite {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display:block;
    background-image: var(--image-bg);
    background-size: auto 44px;
    background-repeat: no-repeat;
    background-position: calc((var(--image-order) - 1) * -44px) 0;
}

.marquee__item .data {
    display:grid;
    gap:2px;
}

.marquee__item .info {
    display:flex;
    gap:5px;
    align-items:center;
}

.marquee__item .name {
    color:#fff;
    font-weight:bold;
    display:flex;
    gap:3px;
    align-items:center;
    text-wrap-mode: nowrap;
}

.marquee__item .user {
    color:#9ba1a5;
}

.marquee__item .data .content {
    color: #fff;
    font-size:var(--smaller-font-size);
}

@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50%)); }
}

@media screen and (min-width: 500px) {
    .billboard__wrap:after { display:block; }
    .billboard__media--actions { bottom: 25%; }
}

@media screen and (min-width: 767px) {
    .billboard__info {
        width: 36%;
        margin-left:7.5vw;
        text-align:initial;
    }
    
    .billboard__media--actions { 
        bottom: 35%; 
        right:3.5rem;
    }
    
    .billboard {  height: 95vh; }
    .billboard__info { padding-bottom:0rem; }
    .billboard__info .__cta .animated-link { flex:initial; }
    .billboard__brand svg { width:250px; }
    .billboard__reviews { display:block; }
    .billboard__info p { font-size: var(--h3-font-size); }
    .billboard__reviews { padding:calc(2.5rem + 5rem) 0 1.25rem 0; }
    .billboard__reviews .marquee { animation: scroll 40s linear infinite; }
    .billboard__reviews .marquee ul li {
        margin-right:9rem;
        width:var(--width);
        position:relative;
        opacity:1;
    }
}

@media screen and (min-width: 1280px) {
    .billboard__media--actions { bottom: 35%;}
}



/************************************ CATALOGS ***************************************/ 
.section__catalog {
    position:relative;
    padding-top:2.25rem;  
    width:100%;
    display:grid;
    gap:2.5rem;
    overflow-x:clip;
}

.catalogs__header {
    padding-bottom:2rem;
}

#catalog .header__title {
    max-width: 26rem;
}

.container-stream {
    padding: 0 1.5rem;
    overflow:hidden; 
    display:grid;
    gap:1rem;
}

.container-stream h2 {
    text-transform:uppercase;
    font-size:var(--h2-font-size);
}

.container-stream .embla {
    overflow:initial;
}

.carousel__netflix .embla__viewport {
    margin:0;
    overflow:visible;
    max-width:initial;  
}

.carousel__netflix ul.embla__container {
    margin:0;
}

.netflix .embla__slide {
    display:block;
    aspect-ratio:4/5;
    object-fit:cover;
    border-radius:.3vw;
    object-position:bottom;
}

.netflix .slide__content {
    height: 100%;
    position:relative;
}

.cover__lesson {
    overflow: hidden;
    position: relative;
    border-radius: clamp(.25rem, .4vw, .5rem);
    cursor:pointer;
    height:100%;
    user-select:none;
}

.cover__image {
    height: 100%;
}

.netflix .embla__slide picture,
.netflix .embla__slide img {
    height:100%;
    object-fit:cover;
    display:block;
    user-select:none;
}

.container-stream img {
    aspect-ratio:16/9;
}

.cover__lesson .cover__title {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgb(16, 23, 30), transparent 50%);
    display: grid;
    align-items: end;
    align-content: end;
    padding: 1rem;
    width:100%;
}

.cover__lesson .cover__title h3 {
    text-wrap-style: balance;
    font-size: var(--small-font-size);
    text-shadow: 0px 0px 1px rgb(0 0 0 / 75%);
    letter-spacing: .35px;
    line-height: 1.125;
}

.cover__lesson .cover__tag {
    border-radius: 2px;
    font-size: calc(var(--smaller-font-size) * 0.7);
    padding: 0 .4rem;
    border: 1px solid rgba(255, 255, 255, .2);
    display: grid;
    width: fit-content;
    margin-bottom: .2rem;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(2px);
    text-align:center;
}

/*Ranked*/
#ranked .netflix .embla__slide {
    aspect-ratio:1/1;
}

.netflix .slide__rank { 
    height: 100%;
}

.netflix .slide__rank svg {
    fill:var(--color-bg);
    height:66%;
    margin-top:auto;
}

.cover__lesson .slide__rank  {
    display:grid;
    grid-template-columns:1fr 2fr;
}

.wrap__rank {
    position:relative;
}

.netflix .embla__slide .slide__rank .cover__lesson {
    border-radius: 0 .3vw .3vw 0;
}

.netflix .embla__slide .slide__rank .cover__lesson .cover__title h3 {
    width:100%;
}

.netflix .embla__slide .slide__rank picture {
    box-shadow: -3px 0px 5px var(--body-color);
}

#guests .cover__lesson .cover__tag {
    display:none;
}

.carousel__netflix .embla__button {
    width: 3.5rem;
    height:100%;
    background-color:hsla(0, 0%, 8%, .5);
    pointer-events:auto;
    display:none;
}

.carousel__netflix .embla__button.btn__next {
    right: calc(-3.5rem - .4vw);
    justify-content: center;
    border-radius:.3vw 0 0 .3vw;
}

.carousel__netflix .embla__button.btn__prev {
    left: calc(-3.5rem - .4vw + 1px);
    justify-content: center;
    border-radius:0 .3vw .3vw 0;
} 

.carousel__netflix .embla__button.btn__prev:has([disabled]) { 
    background-color:hsla(0, 0%, 8%, 0);
}

/****** Embla Config ******/ 
.carousel__netflix.embla__config {
    --count:2.25;
    --gap:clamp(.5rem, .4vw, 1rem);
}

.carousel__netflix.embla__config #ranked {
    --count: 1.5;
    --gap: 1.5rem;
} 

@media screen and (min-width: 499px) {
    .carousel__netflix.embla__config #ranked,
    .carousel__netflix.embla__config {
        --count:2;
    }
    .netflix .slide__rank { grid-template-columns:2fr 3fr; }
    .netflix .slide__rank svg { height:100%; }
    #ranked .netflix .embla__slide { aspect-ratio:16/9; }
    .cover__lesson .cover__title h3 { width: 70%; }
    .netflix .embla__slide { display:block; aspect-ratio:16/9; }
}

@media screen and (min-width: 799px) {
    .carousel__netflix.embla__config #ranked,
    .carousel__netflix.embla__config {
        --count:3;
    }
}

@media screen and (min-width: 1099px) {
    .carousel__netflix.embla__config #ranked, 
    .carousel__netflix.embla__config {
        --count:4;
    }
}

@media screen and (min-width: 1399px) {
    .carousel__netflix.embla__config #ranked, 
    .carousel__netflix.embla__config {
        --count:5;
    }
}

@media screen and (min-width: 767px) {
    .container-stream { padding: 0 3.75rem; }
    .container-stream:has(#guests) h2 { text-align:right; }
    .section__catalog { gap:5rem; }
    .section__catalog .catalogs { gap:3rem; }
    .carousel__netflix .embla__button { display:block; }
}

/*********************************** BENEFITS ***********************************/
.section__benefits {
    margin-bottom: 3rem;
}

.section__benefits ul{
     display:flex;
     flex-wrap:wrap;
     gap: 1.5rem 3.5rem;
     text-align:center;
     justify-content: center;
}

.section__benefits ul li strong {
    font-weight: bolder;
    color: var(--color-button);
    font-size: var(--h3-font-size);
    font-family: var(--brand-font);
    margin-bottom: .25rem;
    display: block;
    text-transform: uppercase;
}

.section__benefits ul li p {
    opacity:.7;
}

@media screen and (min-width: 767px) {
    .section__benefits { margin-bottom: 4rem; }
}


/******************************** MODAL + HOVER BOX ***********************************/
#modalVideoComponent {
    position:absolute;
    aspect-ratio: 16 / 9;
    width:100%;
    opacity:0;
    transition:.8s ease;
}

#modalImage,
#modalVideo {
    transition:opacity 1s ease;
}

#modalImage {
    position:relative;
    z-index:1;
    aspect-ratio: 16 / 9;
}

.modal #modalImage,
.modal #modalVideoComponent {
    aspect-ratio: 3/2;
}

#modalVideoComponent video {
    position:absolute;
    width:100%;
    inset:0;
}

#modalVideoComponent .videoButton {
    position:absolute;
    padding:7px;
    margin-bottom: 1rem;
    bottom: 0%;
    right: 1rem;
    z-index: 2;
}

#hover-box #modalVideoComponent .videoButton { 
    bottom: 5%;
    right: 1.5rem;
    margin-bottom: 0;
} 

.audioOn {display:none;}
.muted .audioOff {display:none;}
.muted .audioOn {display:block;}



.play #modalVideoComponent {
    opacity:1;
}

.play #modalImage,
.play .thumbnail {
    opacity:0;
}

.button__action {
    position:relative;
}

.button__action .btn__tooltip {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(230, 230, 230);
    box-shadow:rgba(0,0,0,0.75) 0px 3px .75rem;
    padding: 6px 14px;
    border-radius: 3px;
    opacity: 0;
    display: block;
    pointer-events: none;
    visibility: hidden;
    transition: opacity .2s;
    user-select: none;
    width: max-content;
    text-align: center;
    bottom: calc(100% + 0.5rem);
    color: var(--body-color);
    font-size: var(--smaller-font-size);
    font-weight: bold;
    z-index:1;
}

.button__action .btn__tooltip:before {
    content: "";
    display: block;
    border: 11px solid transparent;
    border-top: 8px solid rgba(230, 230, 230);
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
}

.button__action:has(button+.btn__tooltip):hover .btn__tooltip {
    opacity: 1;
    visibility: visible;
}

.button__action:has(.share__link) .share__link:hover .btn__tooltip {
    opacity: 1;
    visibility: visible;
}

[data-like] .like__filled {opacity:1;}
[data-like] .like__border {opacity:0;}
.like__filled {opacity:0;} 

.modal__media__ui--left .button__action:first-child button {
    border-radius:1.5rem;
    padding:7.16px 21.59px 7.16px 17.99px;
}

.modal__media__ui--left .button__action:first-child button div {
    width:initial;
    display:flex;
    align-items: center;
    gap:9px;
    font-weight:bolder;
    color:#000;
}

.modal__media__ui--left .button__action:first-child button div svg {
    width:21.59px;
    height:21.59px;
    aspect-ratio:1;
}

.modal__media__ui {
    position:absolute;
    bottom:-2px;
    background: linear-gradient(0deg, rgb(16, 23, 30), transparent 50%);
    width:100%;
    aspect-ratio:16/9;
    z-index:1;
}

.modal__media__ui--title {
    font-size: var(--h1-font-size);
    line-height: 1.125;
    margin: 0;
    color: #fff;
    text-shadow: 0px 0px 4px rgba(255, 255, 255);
    letter-spacing: 2px;
    font-family: var(--brand-font);
    font-weight: bold;
    text-wrap-style: balance;
    text-transform: uppercase;
    letter-spacing: -2px;
} 

.modal__media__ui--left .button__action button div svg {
    width:16.19px;
    height:16.19px;
}

.modal__media__ui--right {
    bottom: 0%;
    right: 1rem;
    position:absolute;
    display:grid;
    gap:.75rem;
}

.modal__media__ui--left {
    bottom: 0;
    left: 1rem;
    position: absolute;
    width: 60%;
    display:grid;
    gap:.75rem;
}

.thumbnail__image {
  display: block;
  contain: layout;
  width: 100%;
  height: 100%;
}

.thumbnail__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.thumbnail,
.thumbnail__inner,
.thumbnail picture,
.thumbnail img {
    aspect-ratio:16/9;
    display:block;
    object-fit:cover; 
    width:100%;
    height:100%;
    border-radius:6px 6px 0 0;
    overflow:hidden;
    transition:.8s ease;
    opacity:1;
    position:relative;
}

@media screen and (min-width: 499px) {
    .modal #modalImage,
    .modal #modalVideoComponent {
        aspect-ratio: 16/9;
    }
    
    #modalVideoComponent .videoButton { 
        bottom: 10%;
        right: 3rem;
    }
}








.buttons__share {
    position:absolute;
    top:50%;
    left:50%;
    transform: translateX(-50%) translateY(-50%) scale(0.95) translateZ(0px);
    opacity:0;
    transition:opacity 0.1s linear, transform 0.3s cubic-bezier(0.5, 0, 0.1, 1), 0.2s linear;
    pointer-events:none;
    z-index:0;
    color:#fff;
}


.modal__shares {
    background-color: rgb(35,35,35);
    border-radius:3rem;
    box-shadow: rgba(0,0,0,0.6) 0px 0px 2px 0px, rgba(0,0,0,0.5) 0px 8px 16px 0px;
    display:flex;
    padding: .625rem 1rem;
    justify-content: space-between;
    align-items: center;
    gap: .125rem; 
}
 
.share__link {
    position: relative;
    border-color: hsla(0, 0%, 100%, .5);
    border-width: 2px;
    padding: .5rem;
    display: grid;
    border-radius: 50%;
    display:grid;
    cursor:pointer;
}

.share__link:nth-child(2) {
    padding:0.5rem 0.25rem;
    transition: 0.2s linear;
}


.share__link:hover {
    color:#fff;
    background-color: rgba(128,128,128,0.2);
}

.share__link svg {
    width:16px;
    height:16px;
}


.modalShare .button {
    margin: .25rem;
    padding: 9px;
    border-width: 2px;
    border-color: rgba(255, 255, 255, .5);
    background-color: rgba(42, 42, 42, 0.6);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
}

.modalShare .button>div {
    width: 18px;
    height: 18px;
    aspect-ratio: 1;
    display: grid;
    place-content: center;
}

.modalShare .button>div svg {
    width: 18px;
    height: 18px;
}


.modalShare .button:hover .buttons__share {
    opacity:1;
    transform: translateX(-50%) translateY(-50%) scale(1) translateZ(0px);
    pointer-events:auto;
    z-index:1;
} 


.modalShare .button:hover .share__link:nth-child(2) {
    padding:0.5rem 0.5rem;
}









/************************************ MODAL ***************************************/
/* VIEW TRANSITIONS */
::view-transition-new(root), 
::view-transition-old(root) {
  animation-duration: 0.5s;
}
::view-transition-old(modal) { animation-duration: 0s; }
::view-transition-new(modal) { animation-delay: 0.3s; animation-duration: 0.2s; }

body:has(.modal[aria-hidden="false"]) .modal__back { opacity:1; }
body:has(.modal[aria-hidden="false"]) .hover-box  {  opacity:0; }

.modal__back {
    display:block;
    position:fixed;
    inset:0;
    width:100%;
    height:100dvh;
    background: rgba(16, 23, 30, .75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); /* iOS / Safari */
    opacity:0;
    z-index: 999;
    pointer-events:none;
  /* Evita glitch en iOS (flicker) */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    display: grid;
    place-items: center;
    z-index: 999;
    height: 100dvh;
    overflow: auto;
    padding:0 .75rem;
}

.modal::-webkit-scrollbar {
    width:0; 
}

.modal__inner {
    max-width: 850px;
    width: 100%;
    background: var(--body-color);
    box-shadow: rgba(16, 23, 30, 0.75) 0px 3px 10px;
    box-shadow: 0px 3px 17px 0px hsl(0deg 0% 0% / 30%);
    border-radius: 6px;
    margin: 2rem 0;
}

.modal__media {
    overflow: hidden;
    border-radius: 6px 6px 0 0;
    position:relative;
    aspect-ratio: 3 / 2;
}

.modal__inner video {
    aspect-ratio: 3/2;
    position: absolute;
    top: 0;
    left:0;
}

.modal__media video,
.modal__media img {
  width: 100%;
  height: auto;
  flex: 1;
  object-fit: cover;
}

.modal__extra {
  padding: 0 1rem 1.5rem 1rem;
  display:grid; 
    gap: .75rem 2rem;
}

.modal__extra--right,
.modal__extra--left {
    display:grid;
    font-size:var(--small-font-size);
    font-weight:bold;
    align-content: end;
}

.modal__extra--left {
    display:grid;
    gap:.75rem;
}

.data__1 {
    display:grid;
    gap:2px;
}

.videoMetadata--container {
    align-items: center;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.videoMetadata--line {
    align-items: center;
    color: #bcbcbc;
    display: flex;
    flex-wrap: wrap;
    gap:.5rem;
}

.player-feature-badge {
    border: 1px solid hsla(0, 0%, 100%, .4);
    border-radius: 3px;
    color: hsla(0, 0%, 100%, .9);
    font-size: .7em;
    padding: 0 .5em;
    white-space: nowrap;
}

.maturity-rating .maturity-number {
    border: 1px solid hsla(0, 0%, 100%, .4);
    overflow: hidden;
    padding: 0 .4em;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size:12px;
}

#modalRating {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

#modalRating svg {
    width: 24px;
    height: 24px;
}

#modalRating h3 {
    font-size:var(--normal-font-size); 
    font-weight:bolder;
    font-family:var(--brand-font);
    text-transform:uppercase; 
}

.modal #modalRating {
    display:none;
}

.modal.has__rating #modalRating {
    display:flex;
} 

.modal__extra--left p {
    margin-bottom:0;
    text-wrap-style: balance;
}

.modal__extra--right {
    gap:.125rem;
}

.previewModal--tags .previewModal--tags-label {
    color: #777;
}

.previewModal--tags .tag-item, 
.previewModal--tags .tag-more {
    color: #ddd;
    margin: 0;
    outline-color: #fff;
}

.modal__close {
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 2;
    margin: .5rem;
    display:grid;
    color:var(--title-color);
    opacity:.75;
    transition: opacity .3s cubic-bezier(.665, .235, .265, .8);
}

.modal__close:hover {
    opacity:1;
}

.modal__close svg {
    background-color: var(--body-color);
    height: 36px;
    width: 36px;
    border-radius: 50%;
    padding: 10px;
}

@media screen and (min-width: 499px) {
    .modal__media__ui--title {
        font-size: calc(var(--big-font-size) * (0.1 * 8.5));
        margin-bottom: .75rem;
    }
}

@media screen and (min-width: 767px) {
    .modal__close { margin: 1rem; }
    .modal { padding:0 0; }
    
    .modal__media__ui--left {
        bottom: 0;
        left: 3rem;
        padding-bottom: 1.75rem;
        bottom: 5%;
        gap:1.5rem;
        width:40%;
    }
    
    .modal__media__ui--right {
        bottom: 10%;
        right: 3rem;
        margin-bottom: 1rem;
    }

    .modal__media { aspect-ratio: 16 / 9; }
    .modal__inner video { aspect-ratio: 16 / 9; }
    
    .modal__extra {
      padding: 0 3rem 1.5rem 3rem;
    }

    .modal__extra {
        -moz-column-gap: 2em;
        column-gap: 2em;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); 
    }
    
    .modal__extra--left { gap:14px; }
    .modal__extra--right { gap:.5rem; }
}


/********************************** HOVER BOX *************************************/
.cap__title {
    font-size:var(--small-font-size);
    font-weight: bold;
}


#hover-box .cover__tag {
    border-radius: 2px;
    font-size: calc(var(--smaller-font-size) * 0.7);
    padding: 0 .4rem;
    border: 1px solid rgba(255, 255, 255, .2);
    display: grid;
    width: fit-content;
    margin-bottom: .2rem;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(2px);
    text-align:center;
}

#hover-box .cover__tag {
    border-radius: calc(2px * 1.25);
    font-size: calc(var(--smaller-font-size) * 0.7 * 1.25);
    padding: 0 calc(.4rem * 1.25);
    margin-bottom: calc(.2rem * 1.25);
}



.content__pop .cover__title {
    position: absolute;
    inset: 0;
    display: grid;
    align-items: end;
    align-content: end;
    padding: calc(1rem * 1.25);
    width:100%;
    user-select:none;
}

.content__pop .cover__title h3 {
    text-wrap-style: balance;
    font-size: calc(var(--normal-font-size) * 1.25);
    text-shadow: 0px 0px 1px rgb(0 0 0 / 75%);
    letter-spacing: .35px;
    line-height: 1.25; 
}

@media screen and (min-width: 499px) {
    
    .content__pop .cover__title h3 {
        width: 60%;
    }
}

.content__pop {
    position: absolute;
    top: 0;
    left: 0; /* no fuera de pantalla */
    width: 0;
    transform-origin: top center;
    transition: transform .3s cubic-bezier(.665,.235,.265,.8), opacity .3s cubic-bezier(.665,.235,.265,.8);
    opacity: 0;
    transform: scale(0.8);
    z-index: 9999;
    pointer-events: none;
    display:none;
    user-select:none;
}

.content__pop.visible {
    opacity: 1;
    transform: scale(1) translateY(-25%);
    pointer-events: auto;
}

@media screen and (min-width: 499px) {
    .content__pop {
        display:block;
    }
}

.content__pop.is_first {
    transform-origin: top left;
}

.content__pop.is_last {
    transform-origin: top right;
}

.content__pop video {
    position: absolute; 
    width: 100%;
    aspect-ratio: 16 / 9; 
    top: 0;
    object-fit: cover;
    border-radius: 6px 6px 0 0;
    transition:.3s ease;
    pointer-events:none;
}

.content__pop video::-webkit-media-controls {
  display:none !important;
}

.content__pop--wrap {
    background-color: hsl(210 29% 10% / 1);
    border-radius: 6px;
    box-shadow: rgba(16,23,30,0.75) 0px 3px 10px;
}

.cap__actions {
    display:flex;
    align-items:center;
    margin-bottom:.125rem;
}

@media screen and (min-width: 499px) {
    .cap__actions {
        margin-bottom:.5rem;
    }
}

.button__action button {
    margin:.25rem;
    padding:9px;
    border-width:2px;
    border-color:rgba(255,255,255,.5);
    background-color: rgba(42, 42, 42, 0.6);
    color:#fff;
    border-radius:50%;
    cursor:pointer;
    overflow:hidden;
}

.button__action button:hover {
    border-color:rgba(255,255,255);
}

.button__action:first-child button {
    background-color:#fff;
    color:var(--body-color);
}

.button__action button div {
    width:18px;
    height:18px;
    aspect-ratio:1;
    display: grid;
    place-content: center;
}

.button__action button div svg {
    width:100%;
}

.content__pop .cap__actions .button__action:last-child {
    margin-left:auto;
}

.cap__tags {
    display:flex;
    font-weight:bold;
    font-size:var(--small-font-size);
    flex-wrap:wrap;
}

.cap__tags span {
    display:flex; 
    color:#fff;
}

.cap__tags span:not(:last-child):after {
    content:"";
    width:4px;
    height:4px;
    border-radius:50%;
    display:flex;
    margin:auto .25rem;
    background-color:#646464;
}

/********/
.cap__content {
    padding:.75rem;  
}

.cap__data {
    display: flex;
    gap: .5rem;
    font-size: var(--small-font-size);
    margin: .75rem 0;
    color: #bcbcbc;
    align-items: center;
    font-weight: bold;
}

.cap__data span {
    border: 1px solid rgba(255, 255, 255, .4);
    padding: 0 .5rem;
    display: grid;
    place-content: center;; 
} 

.cap__data span:last-child {
    border-radius: 3px;
    font-size: 9px;
    padding: 0 .4rem;
}

.cap__data span:nth-child(2) {
    border:none;
}

.cap__data .data_level {
    font-size: 11px;
}

.cap__media {
    position:relative;
}

.cap__media button {
    position:absolute;
    bottom:1rem;
    right:1rem;
}

.cover__rating {
    position: absolute;
    top: 0;
    right: 0;
    width: 1.5rem;
}

.content__pop .cover__rating {
    width:2.25rem; 
}

.cover__rating {
    display:none;
}

[data-rating] .cover__rating,
.ranked .cover__rating { 
    display:block;
}

.cover__rating svg>polygon,
#modalRating svg>rect{
    fill:var(--color-button); 
}




/****************************************** REVIEWS *********************************************/
.section__reviews {
    margin-top:2rem;
    padding-bottom:4rem;
}

.section__reviews .wrap__section { 
    gap:3.5rem;
}

.section__reviews .header__title {
    font-size: calc(var(--big-font-size) * 1.25);
    max-width:32.5rem;
}

.cover-img-modal {
    position:absolute;
    top:0;
    aspect-ratio:4/5;
}
@media screen and (min-width: 767px) {
    .section__reviews { padding-bottom:4rem; }
}

 
/****************************************** INCLUDES *********************************************/
.section__includes {
    padding-top:6rem;
    margin-top:5rem;
}

.include__media {
    position:relative;
    margin-bottom:1rem;
    display:grid;
    align-items:end;
}

.includes {
    display:grid;
}

.include__item {
    display:grid;
    column-gap:1.5rem;
}

.include__item:not(:last-child) {
    border-bottom: 1px solid hsl(210 31% 15% / 1);
}

.include__header {
    padding: 1.5rem 1.5rem 1.5rem .75rem;
    display: flex;
    justify-content:space-between;
    align-items: center;
}

.include__header svg {
    width:.75rem;
    height:.75rem;
    display:grid;
    place-content:center;
    transition: transform .6s cubic-bezier(0.625, 0.05, 0, 1);
}

.active .include__header svg {
    transform: rotate(315deg);
}

.include__body {
    display:grid;
    overflow: hidden;
    grid-template-rows: 0fr;
    transition: grid-template-rows .6s cubic-bezier(0.625, 0.05, 0, 1);
}

.include__body--wrap {
    flex-flow: column;
    height: 10000%;
    display: flex;
    position: relative;
    overflow: hidden;
}

.active .include__body {
    grid-template-rows: 1fr;
}

.include__item h2 {
    font-size: var(--h1-font-size);
    font-family: var(--title-font);
    font-weight: 100;
    letter-spacing: -1px;
}

.include__item ul {
    padding: .5rem;
    flex-wrap: wrap;
    gap: .35rem .35rem;
    bottom: 0;
    width: 100%;
}

.include__item:has(picture) ul {
    position: absolute;
}

.include__item ul li {
    border-radius: 2px;
    font-size: calc(var(--smaller-font-size) * 0.75);
    padding: 2px 10px;
    border: 1px solid rgb(255 255 255 / 17%);
    display: grid;
    width: fit-content;
    text-align: center;
    color: var(--title-color);
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(22px);
    font-weight: bold;
}

.include__body p {
    opacity: .6;
    padding:0 .75rem;
}

.include__item picture {
    display: grid;
    border-radius: .5rem;
    overflow: hidden;
}

@media screen and (min-width: 767px) {
    .section__includes { margin-top:6rem; }
    
    .section__includes .header__section {
        display:grid;
        grid-template-columns:6fr 6fr;
        margin-bottom:4rem;
    }
    
    .section__includes .header__title {
        font-size:var(--h1-font-size);
        text-align:right;
    }
    
    .section__includes .header__side1 {
        grid-column-start: 1;
        grid-row-start: 1; 
    }
    
    .includes {
        gap:.75rem;
    }
    
    .include__item h2 {
        letter-spacing: -2px;
    }
    
    .include__item {
        padding: .75rem;
        border-radius: .5rem;
        border: 1px solid hsl(210 31% 15% / 1);
        grid-template-columns: 1fr 20rem;
    }
    
    .include__body,
    .include__body--wrap { 
        display:contents; 
    }
    
    .include__header {
        width: 65%; 
        padding: 2.5rem 0 0 1.5rem;
    }
    
    .include__media {
        position: relative;
        grid-column: 2 / 3;
        grid-row: 1 / 3;
        margin-bottom:0;
    }
    
    .include__body p {
        text-wrap-style: balance;
        max-width: 500px;
        font-size: var(--small-font-size);
        text-wrap-style: balance;
        margin-bottom:.75rem; 
        padding: 0 0 0 1.5rem;
    }
    
    .include__item picture {
        border-radius: .25rem;
    }
    
    .include__header svg {
        display:none;
    }
}

 

/****************************************** PROCESS *********************************************/
.section__process .header__section {
    margin-top:2rem;
    margin-bottom:2.5rem;
    row-gap: 2.5rem;
}

.section__process .header__title {
    font-size:var(--big-font-size);
    max-width:23ch;
    text-wrap-style: balance;
}

.section__process .header__side1 {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: end;
}

.section__process .header__side1 h3 {
    width: min-content;
    text-align:right;
    font-family:var(--brand-font);
}

.fixed__element {
    --fixed-width:clamp(10rem, 15vw, 15rem);
    --fixed-ratio: 16/9;
}

.fixed__element,
.fixed__element video,
.fixed__card,
.fixed__content,
.fixed__content ul li {
    width:var(--fixed-width);
    aspect-ratio: var(--fixed-ratio);
}

.fixed__card {
    position:relative;
    z-index:1;
    pointer-events:none;
}

.fixed .fixed__card {
    position:fixed;
    top: var(--fixed-top);
    left: var(--fixed-left);
}

.fixed__content {
    overflow:hidden;
    transition: all .3s ease;
    border-radius: clamp(.25rem, .4vw, .5rem);
    z-index:1;
    transform-origin:50% 35%;
}

.fixed__content img,
.fixed__content picture,
.fixed__content video {
    display:block;
    height:100%;
    object-fit:cover;
    width:100%;
}

.hide .fixed__content {
    transform:scale(0);
    opacity:0;
}

.indicator {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:1.5rem;
    height:1.5rem;
    display:grid;
    place-content:center;
}

.relative__video {
    position:absolute;
    width:var(--fixed-width);
    aspect-ratio: var(--fixed-ratio);
}

video#workVideo {
    object-fit: cover;
    border-radius: clamp(.25rem, .4vw, .5rem);
}

.list__hover { 
    --item-space-y:1.25rem;
}

.list__hover__item {
    padding: var(--item-space-y) 0;
    display:grid;
    align-items:center;
    column-gap:1.5rem;
    position:relative;
    transition:.8s cubic-bezier(0.38, 0.49,0,1);
}

.list__hover__item:first-child {
    padding-top:0;
}

.list__hover__item:last-child {
    padding-bottom:0; 
}

.list__hover__item:not(:last-child):after {
    content: "";
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, #efeeec00, #efeeec 25% 75%, #efeeec00);
    opacity: .05;
    position:absolute;
    bottom:0;
}

.list__hover__item:not(:last-child):after { opacity:0; }
.hide .list__hover__item:not(:last-child):after { opacity:.05; }
 
.list__hover__item>span {
    font-family: var(--brand-font);
    font-size: var(--big-font-size);
    align-self: start;
    font-weight: bold;
    transition:all .3s cubic-bezier(.7, 0, .3, 1);
}

.list__hover__item h3 {
    font-size:var(--h1-font-size);
    transition:all .3s cubic-bezier(.7, 0, .3, 1);
    font-family:var(--title-font);
    color:var(--title-color);
}

.list__hover__item p {
    margin-bottom:0;
    transition:all .3s cubic-bezier(.7, 0, .3, 1);
    opacity:.3;
    grid-column-start:2;
    text-wrap-style: balance;
}

.list__hover__item p strong {
    font-weight:bolder;
    text-shadow:0 0 12px rgba(255,255,255, 0.5);
    font-style:italic;
}

/****** focused ******/
.list__hover__item.focus h3,  
.list__hover__item.focus p {
    opacity:1;
}

.list__hover .list__hover__item h3 {
    opacity:.2;
    transform:translateX(calc(6vw * 0.1));
}

.list__hover .list__hover__item>span {
    opacity:.2;
    transform:translateX(calc(6vw * 0.1));
    color:var(--title-color);
}
 
.list__hover .list__hover__item.focus h3 {
    opacity:1;
    color:var(--color-button);
    text-shadow: 0 0 12px hsl(30deg 61% 49% / 60%);
}

.list__hover .list__hover__item.focus>span {
    color:var(--color-button);
    opacity:1;
}

@media screen and (min-width: 767px) {
    .section__process .header__section {
        margin-top:8rem;
        margin-bottom:clamp(5.5rem, 12.5vw, 15rem);
        grid-template-columns: 6fr 4fr;
    }
    
    .section__process .header__title {
        text-align:right;
        max-width:initial;
        text-wrap-style: initial;
        font-size:var(--h1-font-size);
    }
    
    .section__process .header__side1 {
        grid-column-start: 1;
        grid-row-start: 1;
        flex-direction: row;
        margin-right:2.5rem;
    }
    
    .section__process .header__side1 h3 {
        text-align:initial;
    }
    
    .fixed__element {
        --fixed-ratio: 1;
    }
    
    .list__hover {
        --item-space-y:2rem;
    }
    
    .list__hover__item {
        grid-template-columns: 1fr 5fr 4fr;
        padding: var(--item-space-y) 0;
    }
    
    .list__hover__item:not(:last-child):after {
        opacity:0;
    }
    
    .hide .list__hover__item:not(:last-child):after {
        opacity:.1;
    }
    
    .list__hover__item h3 {
        max-width:10ch;
    } 

    .list__hover__item p {
        grid-column-start:initial;
        text-wrap-style: initial;
    }
}



/****************************************** PLANS *********************************************/
.section__plans {
    margin-top:3rem;
}

.section__plans .section__wrap {
    gap:3.5rem;
}

.section__plans .section__header {
    text-align:center;
}

.section__plans .section__header p {
    text-align:center;
    max-width:25rem;
    text-wrap-style: balance;
    margin:auto;
}

.section__plans .section__title {
    font-size:var(--big-font-size);
    text-align:center;
    text-transform:uppercase;
}

.plans__selector {
    display: flex;
    gap: .5rem;
    justify-content: center;
    margin: 1.5rem 0;
    padding: .5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    flex-wrap:wrap;
}

.plan__indicator {
    padding: .65rem 1rem;
    font-weight: bold;
    cursor:pointer;
}

.plan__indicator.selected {
    border-bottom: 1px solid;
}

#plans {
    position:relative;
    padding-top:0;
}

.wrap__plans {
    display:grid;
    gap: 1.5rem;
    padding-top:3.5rem;
}
    
#plans .plan__card {
    position:absolute;
    opacity:0;
    transition:opacity .6s cubic-bezier(0.625, 0.05, 0, 1);
    visibility:hidden;
    border:1px solid rgba(255,255,255, .2);
    border-radius:1rem;
    padding:3rem 2rem;
    align-content: start;
    transition:.3s ease;
}

#plans .plan__card.selected {
    position:relative;
    opacity:1;
    visibility:visible;
}

.plan__card.best {
    border:1px solid var(--color-button);
}


small.badget {
    border: 1px solid hsl(30deg 60.8% 49.02%);
    width: fit-content;
    padding: 0.25rem 0.65rem;
    border-radius: 1rem;
    font-size: .625rem;
    color: var(--color-button);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--body-color);
    font-weight: bold;
}

.plan__target {
    font-size:var(--small-font-size);
    opacity:.5;
    font-weight:bold;
}

.plan__name {
    text-transform: uppercase;
    color: currentColor;
    font-size: var(--h2-font-size);
}

.plan__price {
    font-size: var(--big-font-size);
    font-family: var(--brand-font);
}

.price__old {
    text-decoration: line-through;
    color:var(--text-color);
}

.best .plan__price--wrap { color:var(--color-button); }
.best .plan__name { color:var(--color-button); }

.price__mode {
    color:var(--title-color);
    opacity:.5;
    font-size:var(--smaller-font-size);
}

.plan__button a {
    width:100%;
    margin:auto;
    text-align:center;
}

.plan__card a.animated-link {
    color:var(--title-color);
    padding:0.65rem 1.5rem;
}

.plan__card a:before {
    background-color: rgba(255, 255, 255, .15);
    backdrop-filter: blur(4px);
}
    
.plan__card.best a:before {
    background-color: var(--color-button);
    box-shadow: 0 0 12px hsl(30deg 60.8% 49.02% / 50%);
}

.plan__card ul {
    list-style: none;
    margin: 0;
    display: grid;
    gap: .5rem;
    font-size: var(--small-font-size);
    margin: 2.5rem 0 0rem 0;
    font-weight:bold;
}

.plan__card ul li {
    display: grid;
    grid-template-columns: .75rem 1fr .75rem;
    gap: .5rem;
}

.tooltip__info {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 15%);
    background-color: var(--body-color);
    box-shadow: rgba(255, 255, 255, 0.05) 0px 3px 8px;
    padding: 6px 14px;
    border-radius: 3px;
    opacity: 0;
    display: block;
    transition: opacity .2s;
    user-select: none;
    width: max-content;
    text-align: center;
    bottom: calc(100% + 0.5rem);
    font-size: var(--smaller-font-size);
    pointer-events:none;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all .6s cubic-bezier(0.625, 0.05, 0, 1);
}

.attr__info.show .tooltip__info,
.attr__info:hover .tooltip__info {
    opacity:1;
    visibility:visible;
    transform: translate(-50%, 0%);
}

.attr__info {
    margin-left: .35rem;
    margin-top: 1px;
    display: inline-flex;
    width: .85rem;
    transition: .3s ease;
    cursor:pointer;
    transform: translateY(3px);
    position:relative;
}

.attr__info:hover {
    opacity:1;
}

.animated-link.glow-animation:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 200%;
    background: linear-gradient(-20deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 70%);
    transform: translate(-100%, -100%);
    animation: 5s linear infinite glow; 
}

@keyframes glow {
    0% { transform: translate(-100%, -100%); }
    60% { transform: translate(-100%, -100%); }
    90% { transform: translate(100%, 100%); }
    100% { transform: translate(100%, 100%); }
}

@media screen and (min-width: 767px) {
    .section__plans { margin-top:8rem; }
    
    .wrap__plans {
        display:grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }
    
    .plans__selector { display:none; }
    
    #plans { padding-top:5rem; }
    
    #plans .plan__card {
        position:initial;
        opacity:1;
        border:none;
        visibility:visible;
    }
    
    #plans .plan__card.best {
        box-shadow:0 0 12px 0px hsl(210 31% 20% / .25);
    }
    
    .plan__name { font-size: var(--h2-font-size); }
    
    .plan__target {
        font-size:var(--smaller-font-size);
        opacity:.5;
    }
    
    .plan__price { font-size: var(--big-font-size); }
}


/******************************************* FAQS **********************************************/
.section__faqs {
    margin-top: 3rem;
}

.section__faqs--wrap h2 {
    font-size: var(--big-font-size);
    text-transform: uppercase;
}
 
@media screen and (min-width: 767px) {
    .section__faqs.section {
        margin-top: 5rem;
    }
}


/****************************************** ABOUT *********************************************/
.section__about {
    margin-top:4rem;
}

.section__about .section__header {
    display:grid;
    gap:2.5rem
} 

.about__images {
    display:grid;
    grid-template-columns:50% 50%;
}

.about__images picture {
    aspect-ratio: 480/700;
}

.about__images picture img {
    height:100%;
    object-fit:cover;
    display:block;
}

.about__title {
    display: grid;
    align-items: end;
}

.about__title h2 {
    font-size: calc(var(--big-font-size) * 1);
    line-height:1;
    font-family:var(--title-font);
}

.about__title h2 i {
    font-style: italic;
    font-family:var(--brand-font);
}

.about__title h2 .font-base {
    font-family:var(--title-font);
}

@media screen and (min-width: 767px) {
    .section__about.section {
        margin-top: 4rem;
        padding-bottom: 7.5rem;
    }
    
    .section__about .section__wrap {
        display:grid;
        grid-template-columns:50% 50%;
    }

    .about__content {
        display: grid;
        gap: 1.5rem;
        align-items: end;
        align-content: end;
    }
    
    .about__description { 
        max-width:27.5rem;
    }
}



/************************************** CALL TO ACTION *****************************************/
.section__cta {
    text-align:center;
    margin-top:6.25rem;
}

.section__cta .cta__wrap  {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    row-gap:5rem;
}

.cta__images {
    display:contents;
}

.cta__image--wrap {
    display: grid;
}

.cta__image--wrap:nth-child(n+4) {
    justify-items: end;
}

.cta__image--wrap:nth-child(6){
    justify-items: center;
}

.cta__image--wrap picture {
    display:block;
}


.cta__image--wrap:nth-child(1) picture { transform:translateY(10%); scale: .68;}
.cta__image--wrap:nth-child(2) picture { transform:translateY(-100%); scale: 1;}
.cta__image--wrap:nth-child(3) picture { transform:translateY(-40%); scale: 1;}

.cta__image--wrap:nth-child(4) picture { transform:translateY(-25%); scale:.94;}
.cta__image--wrap:nth-child(5) picture { transform:translateY(30%); scale:0.82;}
.cta__image--wrap:nth-child(6) picture { transform:translateY(-40%);} 

@media screen and (min-width: 767px) {
    .cta__image--wrap:nth-child(1) picture { transform:translateY(110%); scale: .68;}
    .cta__image--wrap:nth-child(4) picture { scale:.94;}
    .cta__image--wrap:nth-child(5) picture { transform:translateY(72%); scale:0.82;}
}

.cta__image {
    width:100%;
    display: block;
}

.cta__image img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: .75rem;
}

.cta__content {
  grid-column: 1 / -1; /* Ocupa todas las columnas */
  grid-row: 2;         /* Empieza en la segunda fila */
  display:grid;
  gap:2.5rem;
  z-index:1;
  position:relative;
}

.section__cta h2 {
    font-size:calc(var(--big-font-size) * 1.25);
    font-family:var(--title-font);
}

.cta__action {
    display:grid;
    gap:.5rem;
    color:var(--title-color);
}

.section__cta .cardPlay {
    display: flex;
    justify-content: center;
    color: var(--title-color);
    margin: 0 auto;
    width: 100%;
    padding: .75rem;
    font-size: var(--small-font-size);
    max-width:18rem; 
}

.section__cta .cardPlay:hover {
    color:var(--title-color);
}

.section__cta .cardPlay:before {
    border-radius:1.5rem;
    background-color:var(--color-button);
    box-shadow: 0 0 12px hsl(30deg 60.8% 49.02% / 50%);
}

@media screen and (min-width: 767px) {
    .section__cta { margin-top:5rem;}
    .section__cta .cta__wrap {row-gap:1.5rem;}
    .cta__image {width: 50%;}
}


/****************************************** FOOTER *********************************************/
.footer__menu nav {
    display:grid;
    gap:2.5rem;
}

.footer__menu nav ul {
    display:grid;
    gap:.625rem
}

.footer__menu h4 {
    margin-bottom:.75rem;
    color:var(--title-color);
}

.footer__menu li a,
.footer__menu li a:visited {
    color:var(--title-color);
}

.footer__menu li {
    opacity:.4;
    width:fit-content;
    transition: .3s ease;
}

.footer__menu li:has(a):hover {
    opacity:1;
}

.footer__legals {
    display:flex;
    gap:1.5rem;
    flex-direction:column;
}

.footer__legals li {
    text-align:center;
}

.site-info {
    display: grid;
    justify-content: space-between;
    gap:2.5rem;
}

.footer__mila li {
    list-style:none;
    opacity:.4;
    transition:.3s ease-in-out;
}

.footer__mila li:has(a):hover {
    opacity:1;
}

.footer__mila li a {
    color:var(--title-color);
    cursor:pointer;
    display:block;
    transition:.3s ease-in-out;
}

.footer__legals li:last-child {
    margin-top:2.5rem;
}

@media screen and (min-width: 767px) {
    .site-info {
        display: flex;
        justify-content: space-between;
    }
    
    .footer__mila li {
        font-size:var(--smaller-font-size);
    }
    
    .footer__menu nav {
        display:flex;
        gap:10vw;
        font-size:var(--small-font-size);
    }
    
    .footer__legals {
        flex-direction:row;
        flex-wrap:wrap;
    }
    
    .footer__legals li:last-child {
        margin-left:auto;
        margin-top:0;
    }
}

.footer__mila {
    display:grid;
    padding-bottom:1.5rem;
}

.footer__mila .container {
    max-width:960px;
    gap:7.5rem;
}

.footer__rrss {
    display:flex;
    gap:1rem;
}

.footer__rrss a {
    line-height:0;
}

.footer__mila .footer__brand svg {
    width: 200px;
    display:block;
} 

.footer__brand svg {
    color:#ffffff;
}

.footer__brand small {
    font-size:var(--smaller-font-size);
}
 

@media screen and (min-width: 767px) {
    .footer__mila {
        display:grid;
        padding-bottom:2rem;
    }
}