html, body {
      margin: 0;
      padding: 0;
      overflow-x: hidden;
      width: 100vw;
      height: auto;
      min-height: 100vh;
      font-family: montrealRegular;
      font-weight: 300;
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none;  /* IE y Edge */
}
body{
    padding-bottom: 70vh;
}
/* === Utilities (generated) === */
.u-flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.u-flex-between-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.u-flex-between-start {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.u-flex-between-end {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.u-flex-start-center {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.u-flex-end-center {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.u-flex-between {
  display: flex;
  justify-content: space-between;
}
.u-flex {
  display: flex;
}
/* === Typography Utilities (generated) === */
.u-fs-13px { font-size: 13px; }
.u-fs-15px { font-size: 15px; }
.u-fs-2vw { font-size: 2vw; }
.u-fs-3vw { font-size: 3vw; }
.u-lh-5vw { line-height: 5vw; }
.u-fw-300 { font-weight: 300; }
.u-tt-uppercase { text-transform: uppercase; }
.u-ff-applelight { font-family: applelight; }
.u-ff-applelightitalic { font-family: applelightitalic; }
.u-ff-montrealregular { font-family: montrealregular; }
.u-ta-center { text-align: center; }
.u-ta-right { text-align: right; }

.contact-page{
  padding-bottom: 0!important;
}
body::-webkit-scrollbar {
      display: none; /* Chrome, Safari */
}
.content{
  background-color:#F5F5F5;
    position: relative;
  z-index: 2; /* ✅ contenido por encima del footer => reveal */
}

.opacity-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #F5F5F5; /* o blanco, o el color que desees */
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
}
.animacion-inicio {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 20;
  pointer-events: none;
}
.black{
  width: 100%;
  height: 100%;
  background: #0e0e0e;
  position: absolute;
  left: 0;
}
.white{
  width: 100%;
  height: 100%;
  background: #F5F5F5;
  position: absolute;
  left: 0;
}
.black-top{
  top: 0
}
.animacion-inicio img{
  position: absolute;
  width: 10vw;
}
    @font-face {
      font-family: montrealRegular;
      src: url(NeueMontreal/NeueMontreal-Regular.otf);
    }
    @font-face {
      font-family: montrealBold;
      src: url(NeueMontreal/NeueMontreal-Bold.otf);
    }
    @font-face {
      font-family: montrealItalic;
      src: url(NeueMontreal/NeueMontreal-RegularItalic.otf);
    }
     @font-face {
      font-family: appleLight;
      src: url(apple_garamond/AppleGaramond-Light.ttf);
    }
     @font-face {
      font-family: appleItalic;
      src: url(apple_garamond/AppleGaramond-Italic.ttf);
    }
     @font-face {
      font-family: appleLightItalic;
      src: url(apple_garamond/AppleGaramond-LightItalic.ttf);
    }
canvas {
      position: absolute;
      top: 0;
      left: 0;
      pointer-events: none;
      background-color: transparent !important;

    }
    #threeCanvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: -1;
      pointer-events: none;
      clip-path: inset(0% 0% 0% 0%); /* sin recorte al inicio */
   }
    #gasCanvas { 
        z-index: 0;
        height: 100vh;
        width: 100vw;
        position: fixed;
        top: 0;
        left: 0;
        clip-path: inset(0% 0% 0% 0%); /* sin recorte al inicio */
    }
    #happyCanvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 0; /* por debajo de overlays o UI, por encima del fondo */
      pointer-events: none;
      background-color: transparent !important;
      opacity: .4;
      clip-path: inset(0% 0% 0% 0%); /* sin recorte al inicio */
    }
    #happyLink{
      position: fixed;
      top: 1vh;
      left: 51%;
      transform: translate(-50%);
      width: 45px;
      height: 45px;
      background-color: red;
      opacity: 0;
      pointer-events: all;
      border-radius: 50%;
      z-index: 20;
    }
    nav{
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 96vw;
      position: fixed;
      top: 0;
      left: 0;
      font-family: montrealRegular;
      font-size: 15px;
      z-index: 10;
      padding: 1vw 2vw;
      background: transparent;
    }
    .a-effect-line-container a{
      text-decoration: none;
      color: black;
      /* mix-blend-mode: difference; */
    }
    .a-effect-line-container a{
      position: relative;
      display: inline-block;
    }

    .a-effect-line-container .link::after {
      content: "";
      position: absolute;
      bottom: -2px;
      left: 0;
      height: 1px;
      width: 100%;
      background-color: currentColor; /* dinámico con el texto */
      transform: scaleX(0);
      transform-origin: left;
      animation: underlineOut 0.4s forwards;
   }
    .a-effect-line-container .link:hover::after {
     animation: underlineIn 0.4s forwards;
}
    nav div{
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 30vw;
    }
    .index-contacto-c{
      width: auto!important;
    }
    nav img{
      width: 100px;
    }

    @keyframes underlineIn {
  from {
    transform: scaleX(0);
    transform-origin: left;
  }
  to {
    transform: scaleX(1);
    transform-origin: left;
  }
}
@keyframes underlineOut {
  from {
    transform: scaleX(1);
    transform-origin: right;
  }
  to {
    transform: scaleX(0);
    transform-origin: right;
  }
}
.nav-logo{
  width: 120px;
}
.this-page{
  font-family: montrealItalic;
}
/* Siempre subrayado para el link de la página actual */
.this-page::after {
      content: "";
      position: absolute;
      bottom: -2px;
      left: 0;
      height: 1px;
      width: 100%;
      background-color: currentColor; /* dinámico con el texto */
   }
header{
      width: 100vw;
      height: 110vh;
      position: relative;
      z-index: 4;
    }
.header-arrow {
  width: 30vw;
  height: 3.7vw;
  border: 2px solid black;
  border-radius: 300px;
  position: relative;
}
.header-arrow img{
      width: 80%;
    }
.info-header-container {
  width: 96vw;
  height: 80vh;
  z-index: 5;
  position: relative;
  padding: 2vw;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}
.info-header {
  width: 100%;
  color: black;
}
    .info-top{ align-items: flex-start; }
    .info-middle{ align-items: flex-end; }
    .info-header h2{
      font-size: 5.5vw;
      line-height: 5vw;
      font-weight: 200;
      margin: 0;
    }
    .info-header p{
      text-transform: uppercase;
    }
    .title-header-1 h2{ text-align: left; }
    .title-header-2 h2{ text-align: right; }

    .info-bottom-logo { width: 20vw; }
    .info-bottom p{ width: 55vw; margin: 0;}
    .info-bottom{
      z-index: 5;
      position: absolute;
      bottom: 13vh;
      padding: 2vw;
      width: 96vw;
      align-items: flex-end;
    }
    .header-description{
      font-family: appleLight!important; 
      font-size: 25px!important
    }
    .overflow-hidden{
      overflow: hidden;
      position: relative;
    }
    .overflow-hidden span{
      position: relative;
    }
    .h2-hidden span{
      top: 7vw;
    }
    .p-hidden span{
      top: 30px;
    }
    .title-left-1{
      position: relative;
      left: 20vw;
    }
    .title-left{
      position: relative
    }
    .title-right{
      position: relative;
    }
    .title-right-1{
      position: relative;
      right: 30vw;
    }
    .verdades-word{
      right: 13vw;
    }
    .publicidad-word{
      left: 8vw;
    }.marquee {
  position: fixed;
  bottom: 0;
  left: 0;
  color: black;
  padding: 0;
  overflow: hidden;
  z-index: -1;
  width: 100vw;
  height: 25px;
  overflow: hidden;
  background: #ff88fc;
  z-index: 10;
}.marquee__inner {
  width: fit-content;
  flex: auto;
  flex-direction: row;
  position: relative;
}.marquee__part {
  align-items: center;
  flex-shrink: 0;
  padding: 0 4px;
}
    .hour-button{
      width: 8vw;
      height: auto;
      background-color: black;
      border-radius: 50px;
      padding: 5px 10px;
      color: white;
      margin-bottom: 30px;
    }
    .hour-button p{
      text-align: center;
      font-size: 1.7vw;
      margin: 0;
    }
.fade-overlay-1{
    z-index: 10;
    height: 100%;
}
.fade-overlay-2{
    z-index: -1;
    height: 100%;
}
    .fade-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    120deg,
    #0e0e0e 0%,
    #0e0e0e 25%,
    #0e0e0e 50%,
    #0e0e0e 75%,
    #0e0e0e 100%
  );
  background-size: 400% 400%;
  animation: gradientScroll 10s ease infinite;
  mix-blend-mode: normal;
  transition: opacity 0.4s ease-out;
}

@keyframes gradientScroll {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
    .first-section{
      width: 96%;
      flex-direction: column;
      background-color: rgba(0,0,0,0);
      padding: 0 2vw;
    }
    .secciones p{
      color: black;
    }
    .first-section h2{
      color: black;
      font-family: montrealRegular;
      text-transform: uppercase;
      width: 100%;
      font-size: 4vw;
      line-height: 3.5vw;
      font-weight: 300;
      text-align: center;
    }
    .animated-text span {
      display: inline-block;
      opacity: 0;
      filter: blur(5px);
      transition: opacity 0.3s, filter 0.3s;
    }
    .first-section-description {
      width: 43vw;
      font-size: 20px!important;
      z-index: 1;
    }
/******************************** CAMPAÑAS HOME ***********************************************/
.tag-line-second-section{
  position: absolute;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 96%;
  padding: 1% 2%;
}
.tag-top{
  top: 0;
}
.first-line{
  position: absolute;
  top: 0;
  left: 2%;
  width: 96%;
  height: 1px;
  background: black;
  opacity: .5;
}
.tag-line-second-section p{
  margin: 0;
}
.nuestras-campañas {
  position: relative;
  padding: 8vw 2% 3vw 2%;
  width: 96%;
  margin-top: 8vw;
}.titles-container {
  cursor: pointer;
  position: relative;
}
.city-container,
.name-container,
.year-container {
  position: relative;
  overflow: hidden;
}
.city-container {
  width: 15%;
  height: 1.2em;
}
.name-container {
  width: 70%;
  height: 4.3vw;
}
.year-container {
  width: 15%;
  height: 1.2em;
}

.city-container p,
.name-container p,
.year-container p {
  position: absolute;
  top: 0%;
  left: 0;
  width: 100%;
  margin: 0;
  font-family: montrealRegular, sans-serif;
  font-weight: 300;
  line-height: 1;
  transition: color 0.25s;
  text-align: center;
  text-transform: uppercase;
}
.name-container p {
  font-size: 5.7vw;
  line-height: 4.3vw;
}
.city-container p,
.year-container p {
  font-size: 16px;
  text-align: left;
}
.year-container p {
  text-align: right;
}
.preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  height: 300px;
  z-index: 2;
  pointer-events: none;
}
.preview-img {
  position: absolute;
  width: 100%;
  height: 100%;
}
.preview-img-2 {
  transform: scale(.85);
}
.preview-img-3 {
  transform: scale(.75);
}
.preview-img-4 {
  transform: scale(.65);
}
.preview-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.titles-container.hovered .original {
  color: #bbb;
}
.titles-container.active .duplicate {
  color: #000;
}
.tag-bottom{
  position: absolute;
  bottom: 0;
  left: 2%;
  width: 96%;
  height: 1px;
  background: black;
  opacity: .5;
}
.nuestro-metodo{
  width: 96%;
  padding: 20vh 2% 2% 2%;
  position: relative;
}
.nuestro-metodo h2{
  font-size: 6vw;
  line-height: 5vw;
  font-weight: 300;
  margin: 0;
  overflow: hidden!important;
  position: relative;
}.metodo-consta {
  width: 75vw;
  margin-left: 10vw;
}.de-4 {
  position: relative;
  left: 9vw;
}
.nuestro-metodo p{
  text-transform: uppercase;
  width: 25vw;
  overflow: hidden!important;
  position: relative;
  margin: 0;
}.img-p {
  width: 100%;
  position: relative;
  margin-top: 30px;
}
.img-p img{
  height: 100%;
}.img-p-p {
  flex-direction: column;
  height: 400px;
}
.n-m-text {
  display: inline-block;
  transform: translateY(100%);
}
.valla-picos{
  margin-left: 10px;
}.img-container {
  position: relative;
  overflow: hidden;
}
.img-container img{
  transform: translateY(-15%);
}
.img-height-container img{
  /* height: 115%; */
  height: 125%;
}
.img-c-1{
  height: 400px;
  width: 15vw;
  margin-right: 20px;
}
.img-c-2{
  height: 400px;
  width: 35vw;
}
.ver-todos-button-container{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 13vh 0 17vh 0;
}
.ver-todos-button{
  text-align: center;
}

/************************************************* LAST SECTION ********************************************************/




/************************************************* FOOTER ********************************************************/
footer {
  position: fixed;
  bottom: -100vh; /* Start hidden */
  left: 0;
  width: 100%;
  height: 70vh;
  background: #ebeaea;
  color: black;
  will-change: bottom;
  overflow: visible;

  /* ✅ clave para MANTENER el reveal */
  z-index: 1; /* footer debajo del contenido */
}

.work-footer{
  bottom: -200vh;
}.footer-info {
  align-items: space-between;
  flex-direction: column;
  height: 86%;
  padding: 10vh 2% 0 2%;
  width: 100%;
}.footer-info-top {
  width: 96%;
  position: relative;
}
.line-footer{
  position: absolute;
  bottom: -20px;
  left: -2%;
  width: 104%;
  height: 1px;
  background: black;
  opacity: .5;
}
.footer-info-top img{
  width: 25vw;
}
.contacto-izq h5{
  font-family: appleLightItalic;
  font-size: 2.5vw;
  line-height: 1.5vw;
  font-weight: 300;
  margin: 0;
  text-align: right;
}
.contacto-izq h5 span{
  font-size: 15px;
}.footer-info-middle {
  width: 96%;
  position: relative;
}.left {
  width: 30vw;
}
footer p, footer a{
  font-size: 13px;
  margin: 0;
  text-transform: uppercase;
}
footer a{
  line-height: 12px;
  cursor: pointer;
}
.footer-a-margin{
  position: relative;
  top: 3px;
}
.footer-a-margin-2{
  position: relative;
  top: 6px;
}
.right p{
  text-align: right;
  width: 20vw;
}.marquee-footer {
  color: black;
  padding: 0;
  overflow: hidden;
  width: 100vw;
  overflow: hidden;
  position: relative;
  left: -2%;
}.marquee_footer_inner {
  width: fit-content;
  flex: auto;
  flex-direction: row;
  position: relative;
}.marquee_footer_part {
  align-items: center;
  flex-shrink: 0;
  padding: 0 4px;
}
/************************************************* WORK ********************************************************/
.cross{
  width: 20px;
  height: 20px;
  position: absolute;
}
.c-u-l{
  left: 50px;
  top: 60px;
}
.c-u-r{
  right: 50px;
  top: 60px;
}
.c-d-l{
  left: 50px;
  bottom: 50px;
}
.c-d-r{
  right: 50px;
  bottom: 50px;
}
.h{
  width: 100%;
  height: 2px;
  background: black;
  position: absolute;
  top: 49%;
}
.v{
  height: 100%;
  width: 2px;
  background: black;
  position: absolute;
  left: 49%;
}
.work-header{
  height: 100vh;
  position: relative;
}
.work-header-info{
  width: 96%;
  height: 85%;
  padding: 0 2% 15vh 2%;
  position: absolute;
  top: 0;
  /* left: vw 2%; */
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.work-header-info h2{
  font-size: 9vw;
  line-height: 8vw;
  font-weight: 300;
  margin: 0;
}
.work-header-info h3{
  font-size: 6vw;
  line-height: 5vw;
  font-weight: 300;
  margin: 0;
  text-align: right;
}
.work-header-info h4{
  font-family: appleLight;
  font-weight: 300;
  font-size: 3vw;
  line-height: 2vw;
  margin: 0;
}.work-header-right {
  flex-direction: column;
  height: 60vh;
  width: 30vw;
}
.work-header-info h5{
  font-weight: 300;
  font-size: 2vw;
  margin: 0;
}.work-header-footer {
  position: absolute;
  bottom: 0;
}
.work-header ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
/* ✅ clave: que el <a> mida lo que el texto (inline-block) */
.work-header a{
  position: relative;
  width: auto;
  display: inline-block;    /* <-- añadido */
  text-decoration: none;    /* opcional: evita subrayado nativo */
  color: black;
}
.work-header a::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 1px;
  width: 100%;               /* ahora es el ancho del texto porque el <a> es inline-block */
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  animation: underlineOutWork 0.4s forwards;
}
.work-header a:hover::after {
  animation: underlineInWork 0.4s forwards;
}
@keyframes underlineInWork {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}
@keyframes underlineOutWork {
  from { transform: scaleX(1); transform-origin: right; }
  to   { transform: scaleX(0); transform-origin: right; }
}
.campañas-section{
  width: 96%;
  padding: 2% 2% 20vh 2%;
  position: relative;
}
.campaña-container{
  width: 24vw;
  height: auto;
  position: relative;
}
.campañas-img-container{
  width: 100%;
  height: 50vh;
  overflow: hidden;
  position: relative;
}
.cc-1{
  height: 65vh;
}
.cc-2{
  height: 50vh;
}
.cc-3{
  height: 50vh;
}
.cc-4{
  height: 50vh;
}
.cc-5{
  height: 50vh;
}.info-campañas {
  border-top: 1px solid black;
  width: 100%;
  margin-top: 10px;
}
.info-campañas p{
  margin: 5px;
  font-size: 12px;
}
.campaña-container h3{
  font-size: 2vw;
  line-height: 2vw;
  text-align: right;
  font-weight: 300;
  margin: 10px 0 0 0;
}.cr1 {
  width: 100%;
  /* border-top: 1px solid black;
  */
  padding-top: 2%;
}.cr2 {
  justify-content: flex-start;
  padding-top: 2%;
}
/* .cc-margin-left{
  margin-left: 1.4vw;
} */
/************************************************* CONTACTO ********************************************************/
.contact-header{
  width: 100vw;
  height: 100vh;
  position: relative;
  display: flex;
  align-items: flex-end;
}.contact-header-info {
  width: 96%;
  padding: 0 2% 0% 2%;
  position: relative;
  flex-direction: column;
}.contact-info {
  width: 100%;
  margin-bottom: 1%;
}
.arrow-h3-container img{
  width: 2.5vw;
  margin-right: 15px;
}
.contact-header-info h3{
  font-family: appleLightItalic;
  font-weight: 300;
  font-size: 3vw;
  line-height: 3vw;
  margin: 0;
}
.contact-header-info h2{
  font-size: 8.5vw;
  line-height: 7vw;
  font-weight: 300;
  margin: 0;
  width: 101%;
}
.contact-header-info .hour-button{
  margin: 0;
  position: relative;
  bottom: 10px;
}.work-header-description {
  width: 60vw;
  margin-top: 2%;
}
.email-link a{
  text-decoration: none;
  color: black;
}
.contact-info h5{
  font-family: appleLightItalic;
  font-size: 2.5vw;
  line-height: 1.5vw;
  font-weight: 300;
  margin: 0;
}
.contact-info h5 span{
  font-size: 15px;
}
.work-header-title{
  width: 50%;
  text-transform: uppercase;
}
.contact-info-top{
  margin-bottom: 5%;
  align-items: flex-end;
}
/************************************************* CAMPAÑA PAGES CSS ********************************************************/
.campaña-header{
  height: 85vh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 5vh;
}
.campaña-header h5{
  font-size: 3vw;
  font-weight: 300;
  margin: 10vh 0 0 0;
}
.campaña-header h2{
  font-size: 8vw;
  font-weight: 300;
  margin: 2vh 0 5vh 0;
}
.campaña-header p{
  width: 50vw;
  text-transform: uppercase;
  text-align: center;
}
.img-header-campañas{
  width: 100vw;
  height: 100vh;
}
.campañas-page-img-container img{
  width: 100%;
}
.campaña-page-info {
  position: relative;
  width: 80vw;
  padding: 0 10% 0 10%;
  margin-top: 20vh;
  padding-bottom: 20vh;
}
.campaña-p-container{
  width: 50%;
}
.campaña-p-container p{
  text-transform: uppercase;
  width: 100%;
}.campañas-back-button {
  position: absolute;
  bottom: -2%;
  cursor: pointer;
  color: black;
  text-decoration: none;
}
.campañas-back-button::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  height: 1px;
  width: 100%;
  background-color: currentColor; /* dinámico con el texto */
  transform: scaleX(0);
  transform-origin: left;
  animation: underlineOut 0.4s forwards;
}
.campañas-back-button:hover::after {
  animation: underlineIn 0.4s forwards;
}.campaña-page-info-fotos {
  flex-direction: column;
  position: relative;
}.info-top-if {
  width: 96%;
  padding: 0 2%;
  position: absolute;
  top: 0;
}.campaña-page-img-container {
  flex-direction: column;
  padding-bottom: 15vh;
}
.campaña-margin-top{
  margin-top: 30px;
}
.cp-formato-1{
  width: 70vw;
  height: 80vh;
}
.cp-formato-2{
  width: 50vw;
  height: 60vh;
}
.cp-formato-3{
  width: 30vw;
  height: 80vh;
}
.cp-formato-4{
  width: 50vw;
  height: 50vw;
}
.next-button{
  position: relative;
}
.campaña-footer{
  height: 50vh;
  margin-bottom: 15vh;
}.next-campaña {
  width: 96%;
  padding: 0 2%;
  height: 100%;
}
.next-campaña h4{
  font-family: montrealRegular;
  font-weight: 300;
  font-size: 3vw;
}

/**************************************** NUEVAS CLASES ELIMINAR ELEMENTOS DESKTOP ************************************************/

.header-description-mobile, .h2-header-home-mobile, .mobile-nav, .nuestras-campañas-mobile, .line-mobile-footer, .footer-info-middle-mobile, .contacto-info-mobile{
  display: none;
}
/* .h2-header-home-mobile{
  display: none;
}
.mobile-nav{
  display: none;
}
.nuestras-campañas-mobile{
  display: none;
}
.line-mobile-footer{
  display: none;
}
.footer-info-middle-mobile{
  display: none;
}
.contacto-info-mobile{
  display: none;
} */
/**************************************** RESPONSIVE MOBILE ************************************************/


@media (max-width: 767px) {

/****************** HEADER HOME ***********************/
.animacion-inicio img{
  position: absolute;
  width: 60vw;
}
.info-top p {
    display: none;
}
.info-middle p {
    display: none;
}
.header-description {
    font-size: 6vw !important;
    line-height: 5.5vw;
    width: 96vw !important;
    margin-bottom: 2vh!important;
}
.header-description-mobile{
  display: block;
}
.header-description-desktop{
  display: none;
}
.info-bottom-logo{
  display: none;
}
.hour-button {
    width: 20vw;
}
.hour-button p {
    font-size: 4.7vw;
}
.h2-header-home-desktop{
  display: none;
}
.h2-header-home-mobile{
  display: block;
}
.title-header-2 h2 {
    text-align: left;
    font-size: 10vw;
    line-height: 9vw;
}
.info-header-container {
    height: 65vh;
    justify-content: flex-end;
}
.desktop-nav{
  display: none;
}


 /* ===============================
     NAV CONTENEDOR
  =============================== */

  .mobile-nav{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 6;
    padding: 2vh 2% 0 2%;
    box-sizing: border-box;
    display: block;
  }

  .mobile-nav > img{
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 1.5vh;
  }

  .mobile-menu{
    width: 100%;
  }

  /* ===============================
     PANEL GRIS (EL QUE ANIMA GSAP)
  =============================== */

  .mobile-menu__panel{
    width: 100%;
    background: rgba(172, 172, 172, 0.3);
    border-radius: 8px;
    overflow: hidden;         /* 🔥 CLAVE para que nada salga */
    position: relative;
    height: 0;                /* GSAP controla esto */
    backdrop-filter: blur(10px);
  }

  /* ===============================
     CONTENIDO INTERNO
  =============================== */

  .mobile-menu__inner{
    padding: 14px 14px 16px 14px;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* 🔥 estado cerrado → menos padding vertical */
  .mobile-menu__panel.is-collapsed .mobile-menu__inner{
    padding: 10px 14px 10px 14px;
  }

  /* ===============================
     CABECERA (MENU / CERRAR)
  =============================== */

  .mobile-menu__head{
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .mobile-menu__toggle{
    background: transparent;
    border: 0;
    padding: 0;
    font-family: montrealRegular;
    font-size: 13px;
    text-transform: uppercase;
    color: #000;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* ===============================
     BODY DEL MENÚ (OCUPA EL RESTO)
  =============================== */

  .mobile-menu__body{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around;  /* links arriba + email abajo */
    padding-top: 12px;
  }

  /* ===============================
     LINKS
  =============================== */

  .mobile-menu__links{
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    position: relative;
    top: 0;
  }

  /* máscara para reveal */
  .mm-item{
    overflow: hidden;
    line-height: 4vw;
  }

  .mm-item a{
    display: inline-block;
    text-decoration: none;
    color: #000;
    font-family: montrealRegular;
    font-weight: 300;
    text-transform: uppercase;

    font-size: 10vw;
    line-height: 9vw;

    will-change: transform;  /* GSAP */
  }

  /* ===============================
     EMAIL
  =============================== */

  .mm-email{
    line-height: 12px;
  }

  .mobile-menu__email{
    font-size: 12px!important;
    line-height: 12px;
    letter-spacing: 0.05em;
    text-decoration: none;
    color: #000;
    opacity: 0.9;
  }


  /* Tu happy canvas como lo tenías */
  #happyCanvas{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    transform: translate(-50%, -50%) scale(0.8);
    transform-origin: center center;
    z-index: 0;
  }

  /********************************** FIRST SECTION *********************/

  .first-section{
    align-items: flex-start;
  }
  .first-section p, .first-section h2{
    text-align: left;
  }
  .tag-title{
    font-size: 13px;
  }
  .first-section-description {
    width: 94vw;
    font-size: 6vw !important;
    line-height: 5.5vw;
    z-index: 1;
}
.first-section h2 {
    width: 100%;
    font-size: 10vw;
    line-height: 9vw;
}

.nuestras-campañas-desktop{
  display: none;
}
.nuestras-campañas-mobile{
  display: block;
  width: 96%;
  padding: 2%;
  margin-top: 80px;
}
.mobile-project-container{
  width: 100%;
  padding: 2%;
  color: black;
  text-decoration: none;
}
.img-mobile-project-container{
  width: 100%;
  height: 400px;
  overflow: hidden;
}
.mobile-project-container img{
  height: 125%;
  transform: translateY(-20%);
}
.line-mobile-projects{
  width: 100%;
  height: 1px;
  background-color: black;
  margin-top: 10px;
}
.project-mobile-info{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.project-mobile-info p{
  margin-top: 10px;
  margin-bottom: 0;
}
.evidencias-mobile-link{
  text-align: center;
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
  font-size: 15px;
}
.footer-info {
  align-items: space-between;
  flex-direction: column;
  height: 94%;
  padding: 10% 2% 0 2%;
  width: 100%;
}
.footer-info-top {
  width: 96%;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.line-footer{
  display: none;
}
.line-mobile-footer{
  width: 96%;
  height: 1px;
  background-color: black;
  display: block;
  margin: 30px;
}
.footer-info-top img{
  width: 100%;
}
footer{
  height: 100vh;
}
body{
  padding-bottom: 100vh;
}
.contacto-izq h5{
  font-size: 7.5vw;
  line-height: 5.5vw;
  text-align: center;
}
.u-flex-between-end {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.right p {
    text-align: center;
    width: 95vw;
    font-size: 15px;
    line-height: 17px;
}
.u-flex-between-start {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 35px;
}
.u-flex-between-start a {
    line-height: 13px;
    font-size: 15px;
}
.line-mobile-footer-2{
  width: 100%;
  margin: 10px;
}
.footer-info-middle-desktop{
  display: none;
}
.footer-info-middle-mobile{
  display: flex;
}
.u-fs-2vw {
    font-size: 22px;
}

/********************************* WORK PAGE ***********************************/

.work-header-info {
    width: 96%;
    height: 94%;
    padding: 0 2% 0vh 2%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    position: initial;
}
.work-header ul {
    display: none;
}
.work-page-description{
  width: 90%;
  text-align: left;
}
.work-header-right {
    height: auto;
    width: 100vw;
    justify-content: flex-end!important;
    margin-top: 0!important;
    align-items: flex-start;
}
.work-header-right h5{
  display: none;
}
.work-header-info h2 {
    font-size: 22vw;
    line-height: 20vw;
    margin: 0;
}
.work-header-info h3 {
    font-size: 10vw;
    line-height: 6vw;
}
.work-header-info h4 {
    font-size: 7.5vw;
    line-height: 2.2vw;
    margin: 0;
    text-align: left;
}
.selected-work-10{
  margin-bottom: 30px;
  margin-top: 20px;
}

/********************************* CONTACTO PAGE ***********************************/

.contact-header-info h3 {
    font-size: 6vw;
    line-height: 9vw;
}
.contacto-work-header-description{
  display: none;
}
.arrow-h3-container img {
    width: 5.5vw;
    margin-right: 11px;
    position: relative;
    bottom: 3px;
}
.contacto-info-mobile{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 80px;
}
.contacto-info-mobile h5{
  text-align: left;
}
.contacto-info-desktop{
  display: none;
}
.contacto-header-title{
  width: 90%;
}
.contacto-header-title p{
  width: 100%;
}
.contacto-hour-button{
  display: none;
}
.contacto-email-link{
  margin-bottom: 20px!important;
}
.contact-info .hour-button{
  margin-bottom: 20px;
}
.contact-info .contacto-izq{
  margin-bottom: 5px;
}

/********************************* CAMPAÑAS PAGE ***********************************/

.campaña-header {
    height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
}
.campaña-header p {
    width: 90vw;
}
.campaña-header h2 {
    font-size: 13vw;
    line-height: 10vw;
    text-align: center;
    margin: 2vh 0 5vh 0;
}
.campaña-header h5 {
    font-size: 8vw;
    margin: 10vh 0 7vh 0;
}
.campañas-back-button {
    bottom: 7%;
}
.img-header-campañas{
  width: 100vw;
  height: 70vh;
}
.campañas-page-img-container img {
    height: 150%!important;
    width: auto;
}
.campañas-info-none-mobile{
  display: none;
}
.campaña-page-info {
    width: 96vw;
    padding: 0 2% 0 2%;
        text-align: left;
    margin-top: 35px;
    align-items: flex-start;
}
.campaña-p-container {
    width: 96%;
}
.campaña-p-container p {
    width: 95%;
}
.campaña-page-img-container {
    width: 100vw;
    margin-top: 40px;
    padding-bottom: 2vh;
}
.cp-formato-1,
  .cp-formato-2,
  .cp-formato-3,
  .cp-formato-4 {
    width: 96vw !important;
    height: 70vh;
  }

  .cp-formato-1 img,
  .cp-formato-2 img,
  .cp-formato-3 img,
  .cp-formato-4 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .campaña-margin-top{
    margin-top: 10px;
  }
  .siguiente-campaña-mobile{
    height: 50vh!important;
    margin-bottom: 40px;
  }
  .siguiente-campaña-mobile h5{
    margin: 0vh 0 7vh 0;
  }
  .next-campaña{
    display: none;
  }
  .siguiente-campaña-mobile a{
    position: static!important;
  }
}