@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

@font-face {
  font-family: 'Tw Cen MT Condensed';
  src: url('TwCenMT-Condensed.woff2') format('woff2'),
      url('TwCenMT-Condensed.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-primario: #FF4600;
  --color-secundario: #000000;
  --color-texto: #ffffff;
  --fuente-titulo: 'Tw Cen MT Condensed', sans-serif;
  --fuente-texto: 'Tw Cen MT Condensed', sans-serif;
}

body {
  background-image: url('../img/trama-negra.png');
  background-size: auto;
  background-attachment: fixed;
  background-color: #000000;
  color: var(--color-texto);
  font-family: var(--fuente-texto);
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--fuente-titulo);
  text-shadow: var(--sombra-texto);
}

.float-wa {
  position: fixed;
  width: 50px;
  height: 50px;
  bottom: 20px;
  right: 20px;
  background-color: #25D366;
  color: #FFF !important;
  border-radius: 50px;
  text-align: center;
  font-size: 25px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center; }

.float-wa:hover {
  color: white; }

.my-float {
  margin-top: 3px; }

.my-float:hover {
  color: white; }

.background-image-container {
  position: relative;
  width: 100%;
  height: 900px;
  height: 80vh;
  text-align: left;
  padding: 0;
  animation: zoomFade 1.2s ease-in-out;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../img/hero-gym.jpg');
  background-size: cover;
  opacity: 0.5;
  z-index: -100;
}

.hero-content{
  display: flex;
  align-items: flex-start;
  padding-left: 100px;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  max-width: 580px;
}

@keyframes zoomFade {
  0% { transform: scale(1.1); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.highlight {
  color: var(--color-primario);
  font-weight: bold;
}

.hero-content h1{
  color: #FFF;
font-family: "Tw Cen MT Condensed";
font-size: 77px;
font-style: normal;
font-weight: 700;
line-height: normal;
}

.gap{
  padding: 50px;
}

.gap h2{
  color: #FF4600;

font-family: "Tw Cen MT Condensed";
font-size: 75px;
font-style: normal;
font-weight: 400;
line-height: 80px;
}

.gap h2 span{
  color: #FFF;
font-family: "Tw Cen MT Condensed";
font-size: 70px;
font-style: normal;
font-weight: bold;
line-height: 80px;
}

.seccion-entrena {
  background-color: #000;
  overflow: hidden;
  position: relative;
}

.overlay-images {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  z-index: 1;
}

.img-left, .img-right {
  width: 50%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0.3; /* o 0.4 si querés más visible */
}

.img-left {
  background-image: url('../img/entrena1.jpg');
}

.img-right {
  background-image: url('../img/entrena2.jpg');
}

.seccion-entrena .container {
  z-index: 2;
  position: relative;
}

.anchoEntrena{
  width: 350px;
}


#entrena h2{
  color: #FF4600;

font-family: "Tw Cen MT Condensed";
font-size: 75px;
font-style: normal;
font-weight: 400;
line-height: 80px;
}

#entrena h2 span{
  color: #FFF;
font-family: "Tw Cen MT Condensed";
font-size: 70px;
font-style: normal;
font-weight: bold;
line-height: 80px;
}

#entrena p{
  color: #FFF;
font-feature-settings: 'liga' off, 'clig' off;
font-family: Outfit;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 30px; /* 150% */
}

#entrena li{
  list-style-type: none;
  color: #FFF;
font-feature-settings: 'liga' off, 'clig' off;
font-family: Outfit;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 30px; /* 150% */
margin: 20px 0px;
}

#historia{
  min-height: 517px;
}

#historia h2{
  color: #FF4600;

font-family: "Tw Cen MT Condensed";
font-size: 75px;
font-style: normal;
font-weight: 400;
line-height: 80px;
}

#historia h2 span{
  color: #FFF;
font-family: "Tw Cen MT Condensed";
font-size: 70px;
font-style: normal;
font-weight: bold;
line-height: 80px;
}

#historia p{
  color: #FFF;
font-feature-settings: 'liga' off, 'clig' off;
font-family: Outfit;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 30px; /* 150% */
}

#historia li{
  list-style-type: none;
  color: #FFF;
font-feature-settings: 'liga' off, 'clig' off;
font-family: Outfit;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 30px; /* 150% */
margin: 20px 0px;
}

.historia-bg {
  background-image: url('../img/historia1.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  padding: 2rem;
  position: relative;
  z-index: 1;
}

.historia-box {
  border: 2px solid white;
  padding: 60px 40px;
  position: relative;
  z-index: 2;
}

.historia-box::before,
.historia-box::after {
  content: "";
  position: absolute;
  border: 2px solid #FF4600;
  width: 80%;
  height: 80%;
}

.historia-box::before {
  top: -20px;
  left: -20px;
}

.historia-box::after {
  bottom: -20px;
  right: -20px;
}


.entrena{
  height: 500px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.entrena h2, .historia h2{
  font-size: 36px;
}

.entrena p{
  display: block;
  margin: auto;
  width: 400px;
  font-size: 18px;
}

.historia p{
  font-size: 18px;
}

.hero-content p{
  color: #FFF;
font-family: Outfit;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

.trama-navbar{
  background-image: url("../img/trama-navbar.png");
  background-repeat: repeat-x;
}

nav a{
  text-decoration: none;
  font-size: 26px;
  letter-spacing: 0.2px;
}

.abono-card {
  border-radius: 16px;
border: 2px solid #FF4600;
background: rgba(49, 49, 49, 0.80);
  padding: 2rem;
  border-radius: 10px;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  height: 479px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.abono-card h2{
  font-size: 48px;
}

#abonos{
    background-image: url("../img/abonos.png");
  background-size: cover;
}

#abonos h2{
  font-size: 70px;
  font-weight: bold;
}

#abonos h4{
  text-align: center;
font-family: 'Outfit';
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 140%; /* 33.6px */
letter-spacing: 0.2px;
}

.abono-card p{
  font-size: 24px;
}

.abono-card.destacado {
  border-color: var(--color-primario);
  background-color: var(--color-primario);
  color: #fff;
  font-weight: bold;
}

.btn-buffalo{
  background-color: var(--color-primario);
  font-size: 21px;
}

.btn-white{
  background-color: white;
  color: var(--color-primario);
  font-size: 21px;
}

#mediospago p{
  text-align: center;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
font-family: Outfit;
font-size: 24px;
font-style: normal;
line-height: 150%; /* 36px */
text-transform: uppercase;
}

#mediospago span{
  color: #FF4600;
text-align: center;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
font-family: Outfit;
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 36px */
}

#app h2{
  color: #FF4600;

font-family: "Tw Cen MT Condensed";
font-size: 75px;
font-style: normal;
font-weight: 400;
line-height: 80px;
}

#app h2 span{
  color: #FFF;
font-family: "Tw Cen MT Condensed";
font-size: 70px;
font-style: normal;
font-weight: bold;
line-height: 80px;
}

#app p{
  color: #FFF;
font-feature-settings: 'liga' off, 'clig' off;
font-family: Outfit;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 30px; /* 150% */
}

#app li{
  list-style-type: none;
  color: #FFF;
font-feature-settings: 'liga' off, 'clig' off;
font-family: Outfit;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 30px; /* 150% */
margin: 20px 0px;
}



.appinfo img{
  margin-right: 10px;
}

#app ul{
  padding: 0;
  margin: 0;
}

#staff h2{
  color: #FF4600;

font-family: "Tw Cen MT Condensed";
font-size: 75px;
font-style: normal;
font-weight: 400;
line-height: 80px;
}

#staff h2 span{
  color: #FFF;
font-family: "Tw Cen MT Condensed";
font-size: 70px;
font-style: normal;
font-weight: bold;
line-height: 80px;
}

#staff p{
  color: #FFF;
font-feature-settings: 'liga' off, 'clig' off;
font-family: Outfit;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 30px; /* 150% */
}

#staff li{
  list-style-type: none;
  color: #FFF;
font-feature-settings: 'liga' off, 'clig' off;
font-family: Outfit;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 30px; /* 150% */
margin: 20px 0px;
}

#staff ul{
  padding: 0;
  margin: 0;
}

.coach-card {
  background-color: #111;
  border-radius: 16px;
  padding-bottom: 16px;
  box-shadow: 0 4px 10px rgba(255, 87, 34, 0.3);
  overflow: hidden;
  border-bottom: 4px solid #FF4500; /* naranja tipo Buffalo */
  transition: transform 0.3s ease;
}

.coach-card:hover {
  transform: translateY(-5px);
}

.coach-card img {
  border-radius: 0;
  width: 100%;
  object-fit: cover;
}

.coach-name {
  font-family: "Tw Cen MT Condensed", sans-serif;
  font-size: 26px;
  margin-top: 10px;
  color: white;
}

#horarios h2{
  color: #FF4600;

font-family: "Tw Cen MT Condensed";
font-size: 75px;
font-style: normal;
font-weight: 400;
line-height: 80px;
}

#horarios h2 span{
  color: #FFF;
font-family: "Tw Cen MT Condensed";
font-size: 70px;
font-style: normal;
font-weight: bold;
line-height: 80px;
}

#horarios p{
  color: #FFF;
font-feature-settings: 'liga' off, 'clig' off;
font-family: Outfit;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 30px; /* 150% */
}

#horarios li{
  list-style-type: none;
  color: #FFF;
font-feature-settings: 'liga' off, 'clig' off;
font-family: Outfit;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 30px; /* 150% */
margin: 20px 0px;
}

#horarios ul{
  padding: 0;
  margin: 0;
}

#ubicacion h2{
  color: #FF4600;

font-family: "Tw Cen MT Condensed";
font-size: 75px;
font-style: normal;
font-weight: 400;
line-height: 80px;
}

#ubicacion h2 span{
  color: #FFF;
font-family: "Tw Cen MT Condensed";
font-size: 70px;
font-style: normal;
font-weight: bold;
line-height: 80px;
}

#ubicacion p{
  color: #FFF;
font-feature-settings: 'liga' off, 'clig' off;
font-family: Outfit;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 30px; /* 150% */
}

#ubicacion li{
  list-style-type: none;
  color: #FFF;
font-feature-settings: 'liga' off, 'clig' off;
font-family: Outfit;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 30px; /* 150% */
margin: 20px 0px;
}

#ubicacion ul{
  padding: 0;
  margin: 0;
}

#contacto{
    background-image: url("../img/fondo-contacto.png");
  background-size: cover;
}

#contacto h2{
color: #FFF;
font-family: "Tw Cen MT Condensed";
font-size: 64px;
font-style: normal;
font-weight: bold;
line-height: 120%; /* 76.8px */
}

#contacto h2 span{
  color: #FFF;
font-family: "Tw Cen MT Condensed";
font-size: 70px;
font-style: normal;
font-weight: bold;
line-height: 80px;
}

#contacto label{
  color: #FFF;
font-family: Outfit;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 24px */
}

#contacto p{
  color: #FFF;
font-feature-settings: 'Outfit' off, 'clig' off;
font-family: Outfit;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 30px; /* 150% */
}

#contacto li{
  list-style-type: none;
  color: #FFF;
font-feature-settings: 'liga' off, 'clig' off;
font-family: Outfit;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 30px; /* 150% */
margin: 20px 0px;
}

#contacto ul{
  padding: 0;
  margin: 0;
}

.text-warning{
  color: #FF4600 !important;
}

.btn-orange {
  display: flex;
padding: 12px 24px;
justify-content: center;
align-items: center;
gap: 4px;
  background-color: #FF4500;
  color: #FFF;

text-align: center;
font-family: Outfit;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 24px */
}

.btn-orange:hover {
  background-color: #e13d00;
}

.form-control:focus {
  box-shadow: none;
  border-color: #FF4500;
}


.cuadro {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: middle;
}

.bg-crossfit {
  background-color: #FF4500 !important;
}

.bg-mix {
  background: linear-gradient(90deg, #FF4500 0%, #5faa32 100%) !important;
}

.bg-oly {
  background-color: #5faa32 !important;
}

.bg-vacio {
  background-color: #555 !important;
}

.table.horarios td, .table.horarios th {
  vertical-align: middle;
  height: 50px;
}

.table.horarios {
  table-layout: fixed;
}

.table.horarios th,
.table.horarios td {
  width: 14.28%; /* 100% ÷ 7 columnas */
  text-align: center;
}

.table.horarios th:first-child,
.table.horarios td:first-child {
  width: 16%;
  font-weight: bold;
}


.oSize{
  width: 120px;
}

#market{
    background-image: url('../img/trama-market.png');
  background-size: auto;
  background-attachment: fixed;
  height: 800px;
}

#market h2{
  color: #FF4600;
text-align: center;
font-family: "Tw Cen MT Condensed";
font-size: 75px;
font-style: normal;
font-weight: 400;
line-height: 80px; /* 106.667% */
}

#market h2 span{
  color: #141414;
font-family: "Tw Cen MT Condensed";
font-size: 70px;
font-style: normal;
font-weight: bold;
line-height: 80px;
}

.subMarket{
  color: #141414;
text-align: center;
font-family: 'Outfit';
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 140%; /* 28px */
letter-spacing: 0.2px;
}

.comboImg{
  position: relative;
  display: flex;
  flex-direction: column;
  height: 300px;
}

.swiper{
  margin-top: 80px !important;
}

.swiper-slide {
  padding: 10px;
}

.swiper-slide img {
  max-height: 180px;
  object-fit: contain;
}

.titleMarket{
  z-index: -10;
  position: absolute;
  width: 100%;
  height: 80px;
  bottom: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;

}

.titleMarket p{
color: #FFF;
font-family: "Tw Cen MT Condensed";
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin: 0;
}

.swiper-slide div {
  font-family: 'Anton', sans-serif;
  font-size: 1.25rem;
  letter-spacing: 1px;
}


form input,
form textarea {
  background-color: #222;
  border: 1px solid #444;
  color: #fff;
}

form input::placeholder,
form textarea::placeholder {
  color: #aaa;
}

form .btn {
  background-color: var(--color-primario);
  border: none;
  font-weight: bold;
  transition: 0.3s ease;
  box-shadow: 0 0 10px var(--color-primario);
}

form .btn:hover {
  background-color: #cc2f00;
  box-shadow: 0 0 15px var(--color-primario);
}

.mapa iframe {
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.social-icons a {
  margin-right: 1rem;
  color: var(--color-texto);
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

.social-icons a:hover {
  color: var(--color-primario);
}

.social-icons img {
  height: 32px;
  vertical-align: middle;
  transition: transform 0.3s ease;
}

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

section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

section:nth-child(even) {
  background: #0a0a0a;
}

/* Fade-in para todas las secciones */
section {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease-out;
}

section.mostrar {
  opacity: 1;
  transform: translateY(0);
}

footer{
  height: 250px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
}

@media screen and (max-width: 550px) {
  
.hero-content{
  padding-left: 10px;
}

#mobileMenu a{
  text-decoration: none;
}

.appinfo{
  margin-bottom: 40px; 
}
}

/* Scroll animation JS sugerencia (agregar en HTML): 
<script>
  const sections = document.querySelectorAll('section');
  const mostrarSeccion = () => {
    sections.forEach(s => {
      const top = s.getBoundingClientRect().top;
      if (top < window.innerHeight * 0.85) {
        s.classList.add('mostrar');
      }
    });
  }
  window.addEventListener('scroll', mostrarSeccion);
  window.addEventListener('load', mostrarSeccion);
</script> 
*/