/*
Theme Name: Gimnasio Theme
Author: JBLK Fitness
Version: 1.0
*/

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@300;400;500;600;700&family=Bebas+Neue&display=swap');

:root {

    --card: #2a221b;
    --muted: #1f1a15;
    --muted-fg: #a89d8b;
    --border: rgba(255,255,255,0.10);
    --primary: #e08a3c;
    --primary-fg: #1a1410;
    --accent: #b6582a;
    --whatsapp: #25d366;
    --shadow-strong: 0 20px 60px -20px rgba(0,0,0,.6);
    --noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    --font-display: "Archivo Black", sans-serif;
    --font-cond: "Bebas Neue", sans-serif;
    --font-body: "Inter", system-ui, sans-serif;

}

*, *::before, *::after { 
    
    box-sizing: border-box; 

}

html { 
    
    scroll-behavior: smooth; 

}

body {

    margin: 0;
    background: #1a1612;
    color: #f6f1e7;
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;

}

img { 
    
    max-width: 100%; 
    display: block; 

}

a { 
    
    color: inherit; 
    text-decoration: none; 

}

button { 
    
    font: inherit; 
    cursor: pointer; 

}

h1, h2, h3 {

  font-family: var(--font-display);
  text-transform: none;
  letter-spacing: -0.02em;
  line-height: 0.95;
  margin: 0;

}

::selection { 
    
    background: var(--primary); 
    color: var(--primary-fg); 

}

.container { 
    
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 20px; 

}

@media (min-width: 640px) { 
    
    .container { 
      
      padding: 0 32px; 
    
    } 

}

.eyebrow {

  font-family: var(--font-cond);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.875rem;
  color: var(--primary);

}

.muted { 
    
    color: var(--muted-fg); 

}

.plan-subtitle {

  margin-top: 10px;

}

.text-sm {

  font-size: .9rem;

}

.text-primary { 
    
    color: var(--primary); 

}

.display-xl {

    font-family: var(--font-display);
    font-size: 5rem;
    line-height: 0.88;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    margin: 0;

}

.display-lg {

  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;

}

@media (max-width: 640px) {

  .display-xl {

    font-size: 3.2rem;
    line-height: 0.95;

  }

  .display-lg {

    font-size: 2.4rem;
    line-height: 1;

  }

}

/* Trainers section */

.trainers-section {

  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);

}

.trainers-grid {

  display: grid;
  gap: 32px;
  margin-top: 64px;

}

.trainer-card {

  display: grid;
  background: #241d17;
  border: 1px solid var(--border);
  overflow: hidden;

}

@media (min-width: 900px) {

  .trainer-card {

    grid-template-columns: 320px 1fr;

  }

}

.trainer-image {

  min-height: 320px;

}

.trainer-image img {

  width: 100%;
  height: 100%;
  object-fit: cover;

}

.trainer-content {

  padding: 32px;

}

.trainer-role {

  font-family: var(--font-cond);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 12px;

}

.trainer-content h3 {

  font-size: 2rem;
  margin-bottom: 16px;

}

.trainer-list {

  list-style: none;
  padding: 0;
  margin: 24px 0;
  display: grid;
  gap: 10px;

}

.trainer-list li {

  color: var(--muted-fg);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding-bottom: 10px;

}

.trainer-formation {

  font-size: .9rem;
  color: var(--muted-fg);
  margin-top: 24px;

}

.trainers-cta {

  margin-top: 64px;
  text-align: center;
  display: grid;
  gap: 20px;
  justify-content: center;

}

/* Buttons */

.btn {

    display: inline-flex; 
    align-items: center; 
    gap: .5rem;
    padding: 11px 18px;
    font-weight: 600; 
    text-transform: uppercase; 
    letter-spacing: .08em;
    font-size: .875rem;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: all .2s ease;

}

.btn-primary { 
    
    background: #d67c2f; 

}

.btn-primary:hover { 
    
    background: #d17e35; 

}

.btn-ghost { 
  
  border-color: var(--border); 

}

.btn-ghost:hover { 
  
  background: var(--card); 

}

/* Header */
.site-header {

    position: sticky; 
    top: 0; 
    z-index: 40;
    background: #1a1612;
    border-bottom: 1px solid rgba(255,255,255,.08);

}

.site-header .row {

    display: flex; 
    align-items: center; 
    justify-content: space-between;
    height: 64px;

}

.brand {

    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.6rem;
    display: inline-flex; 
    align-items: baseline; 
    gap: .5rem;

}

.brand .j { 

    color: var(--primary); 

}

.brand small { 
    
    font-family: var(--font-cond); 
    letter-spacing: .18em; 
    color: var(--muted-fg); 
    font-size: .75rem; 

}

.nav-desktop {

  display: none; 
  gap: 18px; 
  font-size: .95rem;

}

.nav-desktop a { 
    
    padding: 4px 0;

}

.nav-desktop a:hover, .nav-desktop a.active { 
    
    color: var(--fg); 

}

.menu-btn { 
    
    background: none; 
    border: 0; 
    color: var(--fg); 
    padding: 8px; 

}

@media (min-width: 1024px) {

  .nav-desktop { 
    
    display: flex; 
  
  }

  .menu-btn { 
    
    display: none; 
  
  }

}

.header-cta { 
    
    display: none; 

}

@media (min-width: 640px) { 
    
    .header-cta { 
      
      display: inline-flex; 
    
    } 

}

.nav-mobile {

    display: none;
    border-top: 1px solid var(--border);
    background: var(--bg);
    padding: 16px 20px;

}

.nav-mobile.open { 
    
    display: block; 

}

.nav-mobile a {

    display: block; 
    padding: 12px 0;
    font-family: var(--font-display); 
    text-transform: uppercase; 
    font-size: 1.1rem;

}

.nav-desktop, .nav-mobile {

    font-family: var(--font-body);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;

}

/* Hero */

.hero {

  position: relative;

}

.hero .bg {

  position: absolute; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;

}

.hero .bg img { 
  
  width: 100%; 
  height: 700px; 
  object-fit: cover; 
  opacity: 0.5; 

}

.hero .bg::after {

  content: ""; 
  position: absolute; 
  inset: 0;
  background: linear-gradient(180deg, rgba(26,22,18,.4) 0%, rgba(26,22,18,.85) 70%, rgba(26,22,18,1) 100%);

}

.hero .inner {

  position: relative;
  padding: 96px 0 112px;
  min-height: 88vh;
  display: flex; 
  flex-direction: column; 
  justify-content: flex-end;

}

.hero h1 { 
  
  max-width: 1100px; 
  margin-top: 1rem; 

}

.hero p.lead { 
  
  margin-top: 1.5rem; 
  max-width: 36rem; 
  font-size: 1.125rem; 
  color: var(--muted-fg); 

}

.hero .cta-row { 
  
  margin-top: 2rem; 
  display: flex; 
  flex-wrap: wrap; 
  gap: 12px; 

}

/* Community hero */

.community-hero {

  min-height: auto;

}

.community-hero-inner {

  padding: 96px 20px 80px;
  position: relative;

}

/* Marquee */

.marquee-wrap {

  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid var(--border); 
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  background: var(--bg);

}

.marquee {

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px; 
  font-family: var(--font-cond); 
  font-size: 1.5rem; 
  letter-spacing: .05em;
  color: var(--muted-fg);

}

.marquee .dot { 
  
  color: var(--primary); 
  padding: 0 8px; 

}

/* @keyframes marquee {

  from { 
    
    transform: translateX(0); 
  
  } to { 
    
    transform: translateX(-50%); 
  
  }

} */

/* Section */

section.block { 
  
  padding: 96px 0; 

}

.bordered-y { 
  
  border-top: 1px solid var(--border); 
  border-bottom: 1px solid var(--border); 

}

.bg-card { 
  
  background: var(--card); 

}

.grid-3-feat {

  margin-top: 56px;
  display: grid; 
  gap: 1px;
  background: var(--border);

}

.grid-3-feat > div {

  background: var(--bg); 
  padding: 32px;

}

@media (min-width: 768px) { 
  
  .grid-3-feat { 
    
    grid-template-columns: repeat(3, 1fr); 
  
  } 

}

.feat-icon { 
  
  width: 28px; 
  height: 28px; 
  color: var(--primary); 

}

.feat h3 { 
  
  font-size: 1.5rem; 
  margin-top: 1rem; 

}

.feat p { 
  
  margin-top: .75rem; 
  color: var(--muted-fg); 

}

/* Cards / steps */

.steps {

  margin-top: 56px;
  display: grid; 
  gap: 24px;
  list-style: none; 
  padding: 0;

}

@media (min-width: 768px) { 
  
  .steps { 
    
    grid-template-columns: repeat(3, 1fr); 
  
  } 

}

.steps li {

  border: 1px solid var(--border); padding: 28px;
  transition: border-color .2s;

}

.steps li:hover { 
  
  border-color: var(--primary); 

}

.step-num { 
  
  font-family: var(--font-cond); 
  font-size: 3rem; 
  color: var(--primary); 
  line-height: 1; 

}

.steps h3 { 
  
  font-size: 1.5rem; 
  margin-top: 1rem; 

}

.steps p { 
  
  color: var(--muted-fg); 
  margin: .75rem 0 0; 

}

.page-hero {

  border-bottom: 1px solid var(--border);

}

.page-hero-inner {

  padding: 80px 20px 64px;

}

.lead-text {

  font-size: 1.125rem;

}

.steps-no-margin {

  display: grid; 
  gap: 24px;
  list-style: none; 
  padding: 0;
  margin-top: 0;

}

.steps-no-margin li {

  border: 1px solid var(--border); 
  padding: 28px;
  transition: border-color .2s;

}

.steps-no-margin li:hover { 
  
  border-color: var(--primary); 

}

.steps-no-margin h3 { 
  
  font-size: 1.5rem; 
  margin-top: 1rem; 

}

.steps-no-margin p { 
  
  color: var(--muted-fg); 
  margin: .75rem 0 0; 

}

@media (min-width: 768px) { 
  
  .steps-no-margin { 
    
    grid-template-columns: repeat(3, 1fr); 
  
  } 

}

.container-sm {

  max-width: 900px;

}

/* Split */

.split {

  display: grid; 
  gap: 48px; 
  align-items: center;

}

@media (min-width: 1024px) { 

  .split { 

    grid-template-columns: 1fr 1fr; 

  } 

}

.split .img-wrap {

  position: relative; 
  height: 500px; 
  overflow: hidden;

}

.split .img-wrap img { 
  
  position: absolute; 
  inset: 0; 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 

}

.quote { 
  
  margin-top: 1rem; 

}

.quote-list { 
  
  margin-top: 2rem; 
  padding: 0; 
  list-style: none; 
  display: grid; 
  gap: 12px; 

}

.quote-list li { 
  
  display: flex; 
  gap: 12px;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);

}

.check { 
  
  color: var(--primary); 
  flex-shrink: 0; 
  margin-top: 4px; 

}

/* Join team */

.team-join-layout {

  align-items: start;

}

.team-list {

  padding: 0;
  margin: 24px 0 0;
  list-style: none;
  display: grid;
  gap: 12px;
  font-size: 1.05rem;
  color: var(--muted-fg);

}

.team-section-title {

  margin-top: 56px;

}

.team-form-card iframe {

  display: block;
  width: 100%;
  border: 0;

}

/* CTA section */

.cta {

  position: relative; 
  overflow: hidden;
  border-top: 1px solid var(--border);

}

.cta .bg { 
  
  position: absolute; 
  inset: 0; 
  z-index: -1; 

}

.cta .bg img { 
  
  width:100%; 
  height:100%; 
  object-fit:cover; 
  opacity:.25; 

}

.cta .bg::after {

  content:""; 
  position:absolute; 
  inset:0;
  background: linear-gradient(180deg, rgba(26,22,18,.85), rgba(26,22,18,.95));

}

.cta .inner {

  display: grid; 
  gap: 48px; 
  align-items: center;
  padding: 96px 0;

}

@media (min-width: 1024px) { 
  
  .cta .inner { 
    
    grid-template-columns: 1fr 1fr; 
  
  } 

}

/* Form */

.lead-form { 
  
  display: grid; 
  gap: 12px; 
  max-width: 28rem; 

}

.lead-form label { 
  
  font-family: var(--font-cond); 
  letter-spacing: .18em; 
  text-transform: uppercase; 
  font-size: .875rem; 
  color: var(--muted-fg); 
  margin-bottom: 4px; 
  display:block; 

}

.lead-form input {

  width: 100%;
  background: var(--card); 
  border: 1px solid var(--border);
  padding: 12px 16px; 
  color: var(--fg); 
  font: inherit; 
  outline: none;
  transition: border-color .15s;

}

.lead-form input:focus { 
  
  border-color: var(--primary); 

}

.lead-form .err { 
  
  color: #ff6e6e; 
  font-size: .875rem; 
  margin: 0; 

}

.lead-form .ok { 
  
  color: var(--whatsapp); 
  font-size: .875rem; 
  margin: 0; 

}

.lead-form .hint { 
  
  font-size: .75rem; 
  color: var(--muted-fg); 
  margin: 0; 

}

.form-card { 
  
  background: var(--card); 
  border: 1px solid var(--border); 
  padding: 28px; 

}

/* Plans */

.plans {

  display: grid; 
  gap: 24px; 
  margin-top: 64px;

}

@media (min-width: 768px) { 
  
  .plans { 
    
    grid-template-columns: repeat(3, 1fr); 
  
  } 

}

.plan {

  border: 1px solid var(--border); 
  padding: 32px;
  display: flex; 
  flex-direction: column; 
  position: relative;
  transition: border-color .2s;

}

.plan:hover { 
  
  border-color: var(--primary); 

}

.plan.highlight { 
  
  border-color: var(--primary); 
  background: var(--card); 

}

.plan .badge {

  position: absolute; 
  top: -12px; 
  left: 24px;
  background: var(--primary); 
  color: var(--primary-fg);
  font-size: .7rem; 
  letter-spacing: .15em; 
  text-transform: uppercase;
  padding: 4px 8px; 
  font-weight: 600;

}

.plan h3 { 
  
  font-size: 1.875rem; 

}

.plan ul { 
  
  list-style: none; 
  padding: 0; 
  margin: 24px 0; 
  flex: 1; 
  display: grid; 
  gap: 12px; 

}

.plan li { 
  
  display: flex; 
  gap: 8px; 
  align-items: flex-start; 

}

.plan .btn { 
  
  margin-top: auto; 
  justify-content: center; 

}

/* Activities */

.acts { 
  
  display: grid; 
  gap: 24px; 

}

@media (min-width: 640px) { 
  
  .acts { 
    
    grid-template-columns: repeat(2, 1fr); 
  
  } 

}

@media (min-width: 1024px) { 
  
  .acts { 
    
    grid-template-columns: repeat(3, 1fr); 
  
  } 

}

.act {

  position: relative; 
  height: 500px; 
  overflow: hidden;
  border: 1px solid var(--border);

}

.act img { 
  
  position: absolute; 
  inset: 0; 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  transition: transform .7s; 

}

.act:hover img { 
  
  transform: scale(1.05); 

}

.act::after {

  content: ""; 
  position: absolute; 
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(20,16,12,.95));

}

.act .body { 
  
  position: absolute; 
  inset: auto 0 0 0; 
  padding: 24px; 
  z-index: 1; 

}

.act h3 { 
  
  font-size: 1.875rem; 

}

.act p { 
  
  color: var(--muted-fg); 
  margin-top: .5rem; 

}

.act-list {

  margin-top: 16px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;

}

.act-list li {

  font-size: .95rem;
  color: #d8cec0;

}

/* Testimonials */

.tests { 
  
  display: grid; 
  gap: 24px; 

}

@media (min-width: 768px) { 
  
  .tests { 
    
    grid-template-columns: repeat(2, 1fr); 
  
  } 

}

.test {

  border: 1px solid var(--border); 
  padding: 32px; 
  position: relative;
  background: var(--card); 
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100%;

}

.test .mark {

  position: absolute; 
  top: 8px; 
  right: 24px;
  font-family: var(--font-display); 
  font-size: 5rem; 
  line-height: 1;
  color: rgba(224,138,60,.2);

}

.test blockquote { 
  
  margin: 0; 
  font-size: 1.25rem; 

}

.test figcaption { 
  
  margin-top: auto; 
  padding-top: 24px;
  font-family: var(--font-cond); 
  letter-spacing: .18em; 
  text-transform: uppercase; 
  color: var(--muted-fg); 
  font-size: .85rem; 

}

.stats { 
  
  display: grid; 
  gap: 32px; 
  text-align: center; 

}

@media (min-width: 768px) { 
  
  .stats { 
    
    grid-template-columns: repeat(3, 1fr); 
  
  } 

}

.stats .k { 
  
  font-family: var(--font-display); 
  font-size: 4.5rem; 
  color: var(--primary); 
  line-height: 1; 

}

.stats .v { 
  
  margin-top: 12px; 
  font-family: var(--font-cond); 
  letter-spacing: .18em; 
  text-transform: uppercase; 
  color: var(--muted-fg); 

}

/* Contact */

.contact-grid { 
  
  display: grid; 
  gap: 48px; 

}

@media (min-width: 1024px) { 
  
  .contact-grid { 
    
    grid-template-columns: 1fr 1fr; 
  
  } 

}

.contact-list { 
  
  display: grid; 
  gap: 16px; 

}

.contact-item {

  display: flex; 
  align-items: center; 
  gap: 16px;
  border: 1px solid var(--border); 
  padding: 24px;
  transition: border-color .2s;

}

.contact-item:hover { 
  
  border-color: var(--primary); 

}

.contact-item .ico { 
  
  color: var(--primary); 
  width: 22px; 
  height: 22px; 
  flex-shrink: 0; 

}

.contact-item .lab { 
  
  font-family: var(--font-cond); 
  letter-spacing: .18em; 
  text-transform: uppercase; 
  font-size: .8rem; 
  color: var(--muted-fg); 

}

.contact-item .val { 
  
  font-size: 1.15rem; 
  font-weight: 600; 

}

.contact-item-static {

  cursor: default;

}

.contact-item-static:hover {

  border-color: var(--border);

}

/* FAQs */

.faqs {

  margin-top: 40px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);

}

.faqs > div {

  padding: 24px 0; 
  border-top: 1px solid var(--border);
  display: grid; 
  gap: 16px;

}

.faqs > div:first-child { 
  
  border-top: 0; 

}

@media (min-width: 768px) { 
  
  .faqs > div { 
    
    grid-template-columns: 5fr 7fr; 
  
  } 

}

.faqs dt { 
  
  font-size: 1.25rem; 
  font-weight: 600; 

}

.faqs dd { 
  
  color: var(--muted-fg); 
  margin: 0; 

}

/* Footer */

.footer { 
  
  border-top: 1px solid var(--border); 
  margin-top: 96px; 

}

.footer .top {

  display: grid; 
  gap: 40px; 
  padding: 56px 0;

}

@media (min-width: 768px) { 
  
  .footer .top { 
    
    grid-template-columns: 2fr 1fr 1fr; 
  
  } 

}

.footer h4 { 
  
  font-family: var(--font-cond); 
  letter-spacing: .18em; 
  text-transform: uppercase; 
  color: var(--muted-fg); 
  font-size: .85rem; 
  margin: 0 0 12px; 

}

.footer ul { 
  
  list-style: none; 
  padding: 0; 
  margin: 0; 
  display: grid; 
  gap: 8px; 
  font-size: .9rem; 

}

.footer ul a:hover { 
  
  color: var(--primary); 

}

.footer .bottom {

  border-top: 1px solid var(--border);
  padding: 20px 0;
  display: flex; 
  justify-content: space-between; 
  font-size: .75rem; 
  color: var(--muted-fg);

}

.social-media {

  display: flex;
  align-items: center;
  margin-left: -10px;

}

.social-media > a {

  margin: 5px;

}

.social-media > a > img {
  
  height: 42px;
  width: 42px;

}

/* WhatsApp FAB */

.fab {

  position: fixed; 
  right: 20px; 
  bottom: 20px; 
  z-index: 50;
  background: var(--whatsapp); 
  color: white;
  display: inline-flex; 
  align-items: center; 
  gap: 8px;
  padding: 12px 18px 12px 14px;
  border-radius: 999px;
  box-shadow: var(--shadow-strong);
  font-weight: 600; font-size: .9rem;
  transition: transform .2s;

}

@media (max-width: 640px) {

  .fab {

    padding: 10px 14px;

  }

}

.fab:hover { 
  
  transform: scale(1.05); 

}

/* Section heading row used in home */

.heading-row {

  display: grid; 
  gap: 32px; 
  align-items: end;

}

@media (min-width: 1024px) { 
  
  .heading-row { 
    
    grid-template-columns: 7fr 5fr; 
  
  } 

}

.heading-row p { 
  
  font-size: 1.125rem; 
  color: var(--muted-fg); 
  margin: 0; 

}

/* Utilities */

.titulo-seccion { 
  
  margin-top: 1rem; 

}

.mt-4 {

  margin-top: 1rem;

}

.mt-6 { 
  
  margin-top: 1.5rem; 

}

.mt-10 { 
  
  margin-top: 2.5rem; 

}

.text-center { 
  
  text-align: center; 

}

.max-w-xl { 
  
  max-width: 36rem; 

}

.max-w-3xl { 
  
  max-width: 48rem; 

}