/* smash.css
   Base styles (mobile-first).
   - Shared styles that were duplicated across media queries have been moved here.
   - responsive.css now only contains breakpoint-specific tweaks.
*/
@font-face {
  font-family: "BankGothic Medium";
  src: url("./assets/fonts/bankGothic/bank%20gothic%20medium%20bt.ttf")
    format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root{
  --accent:#fec83a;
  --bg:#000;
  --overlay:rgba(0,0,0,.68);
  --overlay-strong:rgba(0,0,0,.807);
  --ff-base:"BankGothic Medium", system-ui, sans-serif;
  --ff-display:"BankGothic Medium", system-ui, sans-serif;
  --banner-height:clamp(320px, 45vw, 600px);
  --header-height:clamp(56px, 7vw, 82px);
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  text-decoration:none;
  list-style:none;
}


body{
  font-family:var(--ff-base);
  color:#fff;
  background-image: url(./assets/img/body-back.webp);
}

html{
  scroll-padding-top:80px;
}

/* =========================
   Header / Menu
   ========================= */
.header{
  background-image: url(./assets/img/bg_menu.webp);
  font-family:"BankGothic Medium", var(--ff-display);
  font-weight:600;
  display:flex;
  align-items:center;
  text-align:center;
  width:100%;
  position:fixed;
  border-bottom:solid calc(0.24vw + 3px) var(--accent);
  z-index:10;
  height:var(--header-height);
}

.logo{
  /* Mobile-first: hidden by default (was only visible from >=768px in responsive.css) */
  display:none;
}

.menu-logo{
  object-fit:contain;
  max-width:100%;
  transform:scale(0.87);
  transform-origin:left center;
  margin-left: 100px;
}

.menu_opts{
  font-family:"BankGothic Medium", var(--ff-display);
  font-weight:500;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  margin:0;
  font-size:13px;
  letter-spacing:0.5px;
  padding:0 6px;
  gap:14px;
}

.menu_opts .sep{ color:var(--accent); }

.menu_opts .menu{ width:auto; }

.menu_opts .menu a{
  font-family:"BankGothic Medium", var(--ff-display);
  font-weight:500;
  background-color:transparent;
  color:#fff;
  text-align:center;
  font-size:0.6em;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 6px;
  transition:transform 0.3s ease, color 0.3s ease;
  transform:scale(1);
  transform-origin:center;
}

.menu_opts .menu a:hover{
  color:var(--accent);
  transform:scale(1.1);
}

.menu_opts .menu a.marked{
  color:var(--accent);
}

/* =========================
   Sections / Common layout
   ========================= */
section{
  display:flex;
  width:100%;
}

/* Banner + icons overlay */
.inicio{
  position:relative;
}

.icons{
  position:absolute;
  right:3%;
  bottom:3%;
  display:flex;
  align-items:center;
  gap:12px;
  z-index:2;
}

.icon-item{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.icon-item::after{
  content:attr(data-label);
  position:absolute;
  top:100%;
  margin-top:8px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(0,0,0,.7);
  color:var(--accent);
  font-size:clamp(12px, 1.4vw, 16px);
  letter-spacing:1px;
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
  white-space:nowrap;
}

.icon-item:hover::after{
  opacity:1;
  transform:translateY(0);
}

.icons img{
  height:clamp(54px, 8vw, 95px);
  width:clamp(54px, 8vw, 95px);
  padding:clamp(9px, 1.4vw, 16px);
  border-radius:0;
  background-color:var(--accent);
  object-fit:contain;
  display:block;
  transition:transform .25s ease;
  clip-path:polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
}

.icon-item:hover img{
  transform:translateY(-6px);
}

/* Banner */
.banner{
  display:flex;
  width:100vw;
  height:var(--banner-height);
  overflow:hidden;
  margin-left:calc(-50vw + 50%);
  margin-top:10%;
  border-bottom:solid var(--accent) 2px;
  position:relative;
}

.banner-img{
  object-fit:cover;
  width:117.647%;
  height:117.647%;
  object-position:center 20%;
  position:absolute;
  inset:-8.8235%;
  transition:opacity 1s ease;
  opacity:0;
  transform:scale(0.80);
  transform-origin:center;

}

/* Smash Room */
.srimg{ display:none; }

.mobile{
  display: flex;
  align-items: center;
  justify-content: center;
  margin:15px auto;
  background:url("assets/img/wally.webp") center / cover no-repeat;
  z-index:0;
  padding:3%;
  max-width:75%;
}

.mobile .title{
  font-size:50px;
}

.mobile .intro{
  font-size:20px;
}

.srtext{
  display:block;
  background-color:var(--overlay);
  margin:1%;
  padding:1%;
}

.title{
  margin:1%;
  padding:1%;
  font-family:var(--ff-display);
  font-size:30px;
  letter-spacing:2px;
}

.intro{
  word-wrap:break-word;
  text-align:justify;
  font-size:13px;
  margin:1%;
  padding:1%;
}



.titlefaq{
  margin:1%;
  padding:1%;
  font-family:var(--ff-display);
  font-size:30px;
  letter-spacing:2px;
}

.faq{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  padding: 10px 20px;
}

.faq .titlefaq{
  align-self:flex-start;
  margin:0 0 10px 20px;
  padding:20px;
}

.retos-container-1,
.retos-container-2{
  width:100%;
  max-width:100%;
  padding:20px;
  box-sizing:border-box;
  max-height:50vh;
  display:flex;
  align-items:stretch;
  gap:40px;
}

.retos{
  display:flex;
  flex-direction:column;
  width:65%;
  margin:0 auto;
  margin-top:5em;
  margin-bottom:10em;
}

.retos .collage{
  width:40%;
  margin:0 auto;
  margin-bottom:9em;
}

.retos-container{
  display:flex;
  flex-direction:column;
  height:100%;
  gap:9em;
  margin:0 auto;
}

.retos-container img{
  width:44%;
}

.retos-container-1{
  width:100%;
  display:flex;
  gap:2em;
}

.retos-container-1 div{
  position:relative;
  width:100%;
}

.retos-container-1 div img{
  width:70%;
  position:absolute;
  top:-60px;
}

.retos-container-1 div h3{
  color:#fff;
  font-size:28px;
  top:-20px;
  position:relative;
  margin-left:20%;
}

.retos-container-1 div .engranaje{
  margin-left:3.5em;
}

.retos-container-1 div p{
  color:#fff;
  font-size:20px;
  width:100%;
  max-width:100%;
  position:relative;
  right:auto;
  line-height:1.5;
  margin:0 auto;
  font-family:var(--ff-base);
  font-weight:400;
  text-align:justify;
}
.resaltado{
  color: var(--accent);
  font-weight: 700;
}

.retos-container-2{
  width:100%;
  display:flex;
  gap:2em;
}

.retos-container-2 div{
  position:relative;
  width:100%;
}

.retos-container-2 div img{
  width:70%;
  position:absolute;
  top:-60px;
  right:20px;
}

.retos-container-2 div h3{
  color:#fff;
  font-size:28px;
  top:-20px;
  position:relative;
  margin-left:7em;
}

@media all and (max-width: 1499px) {
  .retos-container-2 div h3{
    margin-left:1em;
    margin-right:15%;
  }
}
.retos-container-2 div .qu-participar{
  margin-left:3em;
}
.retos-container-2 div .qu-jugar{
  margin-left:3em;
}
.retos-container-2 div .laberinto{
  margin-left:23%;
}

.retos-container-2 div p{
  color:#fff;
  font-size:20px;
  width:100%;
  max-width:100%;
  position:relative;
  right:auto;
  line-height:1.5;
  margin:0 auto;
  font-family:var(--ff-base);
  font-weight:400;
  text-align:justify;
}

.retos-container-1 > img{
  flex:0 0 44%;
  min-width:0;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  width:100%;
  max-width:100%;
  padding:0 5%;
}

.retos-container-1 .info-faq{
  flex:0 0 56%;
  min-width:0;
  max-width:70%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
  
}


.retos-container-1 .info-faq .qu,
.retos-container-1 .info-faq .txt{
  
  padding:10px;
}

@media all and (min-width: 991px) {
  .retos-container-1 .info-faq .txt{
    margin-right:50px;
    padding-right:50px;
  }
}

.retos-container-1 .info-faq > img{
  display:block;
  width:80%;
  max-width:80%;
}

.retos-container-2 .info-faq > img{
  display:block;
  width:80%;
  max-width:80%;
  
}


.retos-container-2 .info-faq{
  flex:0 0 56%;
  min-width:0;
  max-width:70%;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:0;
}

.retos-container-2 > img{
  flex:0 0 44%;
  min-width:0;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  width:100%;
  max-width:100%;
  padding:0 5%;
}

.qu,
.txt{
  word-wrap:break-word;
  margin:1%;
  padding:1%;
}

.qu{
  letter-spacing:2px;
  font-weight:bold;
  color:var(--accent);
  margin-top:10px;
}

.qu-romper{
  margin-left:3em;
}

.qu-participar{
  margin-right:0px;
}

.people{
  margin:2%;
  padding:1%;
}

.ppl{
  padding:4%;
  list-style-type:square;
  list-style-position:inside;
}

/* Booking */
.booking{
  background:url("imagenes/punch.webp") center / cover no-repeat;
  z-index:0;
  padding:2%;
  margin:15px;
  width:100%;
}

.respon{
  display:block;
  background-color:var(--overlay-strong);
  margin:1%;
  padding:1%;
}

.respon .title{
  margin:1%;
  padding:1%;
  font-size:30px;
  letter-spacing:2px;
}

/* =========================
   Footer
   ========================= */
.footer{
  background-color:transparent;
  font-family:var(--ff-display);
  font-size:0.9em;
  display:flex;
  align-items:center;
  text-align:center;
  width:100%;
  margin-top:2%;
  padding:4% 0;
}

.footer .last{
  display:flex;
  justify-content:space-between;
  align-items:stretch;
  text-align:center;
  width:min(92%, 900px);
  flex-wrap:wrap;
  margin:0 auto;
  padding:16px 18px;
  gap:12px;
  background:var(--overlay-strong);
  border:2px solid var(--accent);
  border-radius:16px;
}

.footer .last .fu{
  flex:1 1 0;
  min-width:300px;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin:0;
}

.footer .last > *{
  flex:1 1 260px;
}
.footer .last .fu .title{
  font-size:25px;
  letter-spacing:2px;
  margin:1%;
  padding:2%;
  color:var(--accent);
}

.footer .last .infocont{
  margin:1%;
  padding:1%;
  padding-right:4%;
  font-size:1.2em;
  width:max-content;
  word-wrap:normal;
}

.cha{
  font-size:0.85em;
}

.footer .last .map{
  display:flex;
  padding:0;
  justify-content:center;
  align-items:center;
  width:100%;
  object-fit:contain;
  overflow:hidden;
  margin:0;
}

.footer .last .map .googlemaps{
  width:100%;
  max-width:400px;
  height:auto;
  aspect-ratio:16/9;
  object-fit:contain;
  margin:0 auto;
  margin-bottom:0;
  border:0;
  padding:0;
  display:block;
}


/* =========================
   Unified responsive rules (moved from responsive.optimized.css)
   ========================= */


/* =========================
   <= 587px (small phones)
   ========================= */
@media all and (max-width: 587px) {
  .footer .last .map{
    padding:0;
  }

  .footer .last .map .googlemaps{
    width:100%;
    margin:0 auto;
    display:block;
    padding: 5%;
    
  }
}

@media all and (max-width: 550px) {
  .footer{
    font-size:0.8em;
  }

  .footer .last{
    width:min(92%, 720px);
    padding:12px 14px;
    gap:10px;
  }

  .footer .last .fu .title{
    font-size:20px;
  }

  .footer .last .infocont{
    font-size:1.6em;
  }

  .footer .last .map .googlemaps{
    max-width:320px;
  }
}

/* =========================
   <= 767px (mobile)
   ========================= */
@media all and (max-width: 767px) {
  /* Keep header height comfortable on small screens */
  .header{
    padding:0;
  }

  .menu_opts{
    font-size:15px;
    letter-spacing:0.6px;
    gap:12px;
  }

  .menu_opts .menu a{
    font-size:0.8em;
  }
}

@media all and (max-width: 850px) {
  .retos-container-1,
  .retos-container-2{
    
    margin-bottom:8px;
  }

  .intro-extra{
    display:none;
  }
}

@media all and (max-width: 700px) {
  .retos-container-1 .info-faq .txt{
    margin-left:5px;
  }
  .retos-container-2 .info-faq .txt{
    margin-right:5px;
  }
}

@media all and (max-width: 750px) {
  .retos-container-1 div h3,
  .retos-container-2 div h3{
    font-size:20px;
  }

  .retos-container-1 div p,
  .retos-container-2 div p{
    font-size:14px;
  }
}

@media all and (max-width: 500px) {
  .retos-container-1 .info-faq .txt,
  .retos-container-2 .info-faq .txt{
    width:90%;
  }

  .retos-container-1 div h3,
  .retos-container-2 div h3{
    font-size:16px;
  }

  .retos-container-1 div p,
  .retos-container-2 div p{
    font-size:12px;
  }
}

@media all and (max-width: 990px) {
  .retos-container-1 div h3,
  .retos-container-2 div h3{
    font-size:clamp(18px, 3vw, 26px);
    margin-left:clamp(1rem, 4vw, 6rem);
  }

  .retos-container-1 div p,
  .retos-container-2 div p{
    font-size:clamp(13px, 2.4vw, 18px);
    right:clamp(20px, 6vw, 160px);
  }

  .retos-container-2 .info-faq .txt{
    margin-left:25px;
  }

  .retos-container-1 > img,
  .retos-container-2 > img,
  .retos-container-1 div img,
  .retos-container-2 div img{
    width:clamp(40%, 44vw, 60%);
  }

  .retos-container-1,
  .retos-container-2{
    gap:clamp(12px, 3vw, 32px);
    padding:clamp(12px, 3vw, 24px);
  }
}


/* =========================
   >= 768px (tablet)
   ========================= */
@media all and (min-width: 768px) {

  /* Header / Menu */
  .logo{
    display:flex;
    width:10%;
    margin:0 0 0 2%;
  }

  .menu_opts{
    font-size:23px;
    margin:0;
    letter-spacing:1px;
    justify-content:center;
    flex-wrap:nowrap;
    gap:24px;
    padding:0;
  }

  /* Tablets: keep hover neutral like original */
  .menu_opts .menu a:hover{
    color:#fff;
    transform:scale(1.06);
  }

  /* Banner */
  .banner{
    margin-top:8%;
    border-bottom:solid var(--accent) 3px;
  }

  /* Smash Room */
  .mobile{ margin:20px auto; }

  .title{ font-size:40px; letter-spacing:2px; }
  .intro{ font-size:16px; }

  /* FAQ */
  .titlefaq{ font-size:40px; }
  .qu{ font-weight:bold; }

  /* Booking */
  .booking{ margin:20px; }
  .respon .title{ font-size:40px; }

  /* Footer */
  .footer .last{ 
    width:min(92%, 900px);
    margin:0 auto;
    padding:16px 18px;
    flex-wrap:nowrap;
  }

  .footer .last .fu{
    width:auto;
    flex:1 1 0;
    max-width:50%;
  }

  .footer .last .fu .title{
    font-size:30px;
    margin:2%;
    padding:2%;
  }

  .footer .last .infocont{
    margin:2%;
    padding:2%;
    font-size:14px;

  }

  .footer .last .map{
    padding:0;
    margin:0;
    overflow:hidden;
    flex:1 1 0;
    max-width:50%;
  }

}

/* =========================
   768px - 1023px (tablet only)
   ========================= */
@media all and (min-width: 768px) and (max-width: 1023px) {
  .footer .last .map{
    margin-left:auto;
    margin-right:auto;
    padding:0;
    justify-content:center;
  }

}

/* =========================
   1024px - 1076px (small desktop / landscape tablets)
   ========================= */
@media all and (min-width: 1024px) and (max-width: 1076px) {

  .logo{ width:11%; }

  .menu_opts{
    font-size:23px;
    margin:2%;
    letter-spacing:1px;
    justify-content:center;
    gap:24px;
  }

  .menu_opts .menu a:hover{
    color:var(--accent);
    transform:scale(1.06);
  }

  .banner{
    margin-top:8%;
    border-bottom:solid var(--accent) 3px;
  }

  .banner-img{ object-position:center 70%; }

  .title{ font-size:50px; letter-spacing:2px; }
  .intro{ font-size:15px; }

  .titlefaq{ font-size:50px; letter-spacing:2px; }

  .booking .respon .title{
    font-size:40px;
    letter-spacing:2px;
  }

  /* Footer: two columns aligned, each half with border */
  .footer .last{
    display:flex;
    align-items:stretch;
    justify-content:space-between;
    gap:20px;
    width:min(90%, 1100px);
    margin:0 auto;
    padding:20px 22px;
    flex-wrap:nowrap;
  }

  .footer .last .fu .title{
    font-size:30px;
    letter-spacing:2px;
  }

  .footer .last .infocont{ font-size:16px; }

  .footer .last .map{
    margin:0;
    padding:2%;
    overflow:hidden;
    width:50%;
    box-sizing:border-box;
  }

  .footer .last .fu{
    width:50%;
    box-sizing:border-box;
    padding:2%;
  }
}

/* =========================
   1077px - 2000px (desktop)
   ========================= */
@media all and (min-width: 1077px) {

  .logo{ width:10%; }

  .menu_opts{
    font-size:30px;
    margin:2%;
    letter-spacing:1.5px;
    justify-content:center;
    gap:28px;
  }

  .menu_opts .menu a:hover{
    color:var(--accent);
    transform:scale(1.06);
  }

  .banner{
    margin-top:7%;
    border-bottom:solid var(--accent) 4px;
  }

  /* Layout spacing */
  .mobile{ margin:30px auto; }
  .booking{ margin:30px; }

  .title{
    font-size:66px;
    letter-spacing:5px;
  }

  .intro{ font-size:33px; }

  .titlefaq{ font-size:66px; letter-spacing:5px; }
  .qu{ letter-spacing:4px; }

  .booking .respon .title{ font-size:66px; }

  /* Footer desktop layout */
  .footer .last{
    display:flex;
    justify-content:space-between;
    align-items:center;
    text-align:center;
    width:min(80%, 1100px);
    margin:0 auto;
    padding:24px 26px;
    flex-wrap:wrap;
    gap:20px;
  }

  .footer .last .fu .title{
    font-size:40px;
    letter-spacing:5px;
    margin:3%;
    padding:3%;
  }
  .footer .last .infocont{
    margin:3%;
    padding:3%;
    padding-right:4%;
    font-size:20px;
  }
  
  .footer .last .map{
    width:100%;
    object-fit:contain;
    margin:0;
    overflow:hidden;
  }

  .footer .last .map .googlemaps{
    max-width: 500px;
  }
}

@media all and (min-width: 1350px) {
  .retos-container-2 div h3{
    margin-left:1em;
  }
  .retos-container-2 div .qu-participar{
    margin-left:1em;
  }
}

/* =========================
   >= 2001px (very large screens)
   Only overrides what differs from the desktop block above.
   ========================= */
@media all and (min-width: 2001px) {

  .logo{
    width:15%;
  }

  .menu_opts{
    font-size:30px;
    letter-spacing:10px;
  }

  .banner{
    height:var(--banner-height); 
  }

  .footer .last .fu {
    display: flex;
    justify-content: center;
  }
  
}