/* ========================================
   SPORT GYM — Stylesheet
   Basado en Manual de Marca oficial
   Colores: #E21723 (rojo), #1B1E3A (azul), #000, #FFF
   Tipografías: Montserrat + Bebas Neue
======================================== */

:root{
  --red: #E21723;
  --red-dark: #B3111B;
  --red-glow: rgba(226, 23, 35, 0.35);
  --blue: #1B1E3A;
  --black: #000000;
  --black-soft: #0a0a0a;
  --black-card: #141414;
  --black-elev: #1a1a1a;
  --white: #FFFFFF;
  --gray-100: #f5f5f5;
  --gray-300: #d1d1d1;
  --gray-500: #888;
  --gray-700: #3a3a3a;
  --gray-800: #222;
  --gray-900: #111;
  --wa-green: #25D366;

  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body: 'Montserrat', system-ui, -apple-system, sans-serif;

  --container: 1240px;
  --radius: 6px;
  --radius-lg: 14px;

  --shadow-card: 0 20px 40px -20px rgba(0,0,0,0.6);
  --shadow-red: 0 20px 50px -10px var(--red-glow);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ========================================
   RESET & BASE
======================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  background:var(--black);
  color:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none}
input,select,textarea{font-family:inherit;font-size:inherit}

.container{max-width:var(--container);margin:0 auto;padding:0 24px}

/* Selection */
::selection{background:var(--red);color:var(--white)}

/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--black)}
::-webkit-scrollbar-thumb{background:var(--red);border-radius:4px}

/* ========================================
   UTILITIES & SECTIONS
======================================== */
section{position:relative;padding:110px 0}
@media (max-width: 768px){ section{padding:70px 0} }

.accent{color:var(--red)}

.section__head{
  max-width:760px;
  margin-bottom:60px;
}
.section__head--center{margin-left:auto;margin-right:auto;text-align:center}

.section__kicker{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:16px;
  position:relative;
  padding-left:40px;
}
.section__kicker::before{
  content:"";
  position:absolute;
  left:0;top:50%;
  width:30px;height:2px;
  background:var(--red);
  transform:translateY(-50%);
}
.section__kicker--light{color:var(--red)}

.section__title{
  font-family:var(--font-display);
  font-size:clamp(36px, 5vw, 64px);
  line-height:1;
  font-weight:400;
  letter-spacing:0.5px;
  color:var(--white);
  text-transform:uppercase;
  margin-bottom:18px;
}
.section__title--light{color:var(--white)}

.section__subtitle{
  font-size:17px;
  color:var(--gray-300);
  max-width:580px;
  line-height:1.6;
}
.section__subtitle--light{color:var(--gray-300);margin-left:auto;margin-right:auto}

/* ========================================
   BUTTONS
======================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 30px;
  font-weight:700;
  font-size:14px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  border-radius:var(--radius);
  cursor:pointer;
  transition:all 0.3s var(--ease);
  position:relative;
  overflow:hidden;
  white-space:nowrap;
}
.btn svg{width:18px;height:18px;flex-shrink:0}

.btn--primary{
  background:var(--red);
  color:var(--white);
  box-shadow:0 10px 30px -10px var(--red-glow);
}
.btn--primary:hover{
  background:var(--red-dark);
  transform:translateY(-2px);
  box-shadow:0 15px 40px -10px var(--red-glow);
}

.btn--ghost{
  background:transparent;
  color:var(--white);
  border:2px solid rgba(255,255,255,0.25);
}
.btn--ghost:hover{
  border-color:var(--white);
  background:rgba(255,255,255,0.05);
}

.btn--outline{
  background:transparent;
  color:var(--white);
  border:2px solid var(--red);
}
.btn--outline:hover{
  background:var(--red);
}

.btn--wa{
  background:var(--wa-green);
  color:var(--white);
}
.btn--wa:hover{
  background:#1fb957;
  transform:translateY(-2px);
}

.btn--lg{padding:20px 40px;font-size:15px}
.btn--block{width:100%}

/* ========================================
   NAV
======================================== */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  background:rgba(0,0,0,0.85);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,0.06);
  transition:all 0.3s var(--ease);
}
.nav.scrolled{
  background:rgba(0,0,0,0.95);
  border-bottom-color:rgba(226,23,35,0.3);
}
.nav__inner{
  max-width:var(--container);
  margin:0 auto;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}
.nav__logo{
  display:inline-block;
  line-height:0;
}
.nav__logo::after{display:none!important}
.nav__logo img{
  height:42px;
  width:auto;
  transition:transform 0.3s var(--ease);
  display:block;
}
.nav__logo:hover img{transform:scale(1.05)}

.nav__menu{
  display:flex;
  align-items:center;
  gap:8px;
}
.nav__link{
  padding:10px 16px;
  font-size:13px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--gray-300);
  border-radius:var(--radius);
  transition:all 0.25s var(--ease);
  position:relative;
}
.nav__link:hover{color:var(--white)}
.nav__link::after{
  content:"";
  position:absolute;
  bottom:4px;left:50%;
  width:0;height:2px;
  background:var(--red);
  transform:translateX(-50%);
  transition:width 0.3s var(--ease);
}
.nav__link:hover::after{width:20px}

.nav__link--cta{
  background:var(--red);
  color:var(--white);
  padding:10px 22px;
}
.nav__link--cta::after{display:none}
.nav__link--cta:hover{
  background:var(--red-dark);
  transform:translateY(-1px);
}

.nav__toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  padding:10px;
  cursor:pointer;
}
.nav__toggle span{
  width:26px;height:2px;
  background:var(--white);
  transition:all 0.3s var(--ease);
}
.nav__toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle.active span:nth-child(2){opacity:0}
.nav__toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width: 900px){
  .nav__menu{
    position:fixed;
    top:74px;left:0;right:0;
    background:var(--black);
    flex-direction:column;
    padding:0 24px;
    gap:0;
    border-bottom:0 solid var(--red);
    max-height:0;
    overflow:hidden;
    visibility:hidden;
    opacity:0;
    transition:max-height 0.4s var(--ease), padding 0.4s var(--ease), border-bottom-width 0.4s var(--ease), opacity 0.25s var(--ease), visibility 0s linear 0.4s;
  }
  .nav__menu.active{
    max-height:500px;
    padding:30px 24px;
    border-bottom-width:2px;
    visibility:visible;
    opacity:1;
    transition:max-height 0.4s var(--ease), padding 0.4s var(--ease), border-bottom-width 0.4s var(--ease), opacity 0.25s var(--ease), visibility 0s linear 0s;
  }
  .nav__link{
    width:100%;
    padding:16px 0;
    border-bottom:1px solid rgba(255,255,255,0.06);
    text-align:center;
  }
  .nav__link--cta{margin-top:12px;border-radius:var(--radius)}
  .nav__toggle{display:flex}
}

/* ========================================
   HERO
======================================== */
.hero{
  min-height:100vh;
  padding:140px 0 80px;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{
  position:absolute;
  inset:0;
  z-index:-1;
}
.hero__bg img{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:grayscale(0.3) contrast(1.1);
  animation:slowZoom 20s infinite alternate;
}
@keyframes slowZoom{
  from{transform:scale(1)}
  to{transform:scale(1.08)}
}
.hero__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.85) 100%);
}
.hero__dots{
  position:absolute;
  top:10%;right:5%;
  width:300px;height:300px;
  background-image:radial-gradient(var(--red) 1.5px, transparent 1.5px);
  background-size:12px 12px;
  opacity:0.25;
  mask-image:radial-gradient(circle, black 40%, transparent 70%);
  -webkit-mask-image:radial-gradient(circle, black 40%, transparent 70%);
}
.hero__stripes{
  position:absolute;
  bottom:0;right:0;
  width:40%;height:100%;
  background:repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 20px,
    rgba(255,255,255,0.02) 20px,
    rgba(255,255,255,0.02) 22px
  );
  pointer-events:none;
}

.hero__content{
  position:relative;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
  width:100%;
}

.hero__kicker{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:4px;
  color:var(--red);
  padding:8px 16px;
  border:1px solid var(--red);
  border-radius:30px;
  margin-bottom:28px;
  animation:fadeInUp 0.8s var(--ease) both;
}

.hero__title{
  font-family:var(--font-display);
  font-size:clamp(48px, 9vw, 120px);
  line-height:0.95;
  font-weight:400;
  color:var(--white);
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:24px;
  animation:fadeInUp 0.8s var(--ease) 0.15s both;
}
.hero__title--accent{
  color:var(--red);
  display:inline-block;
  position:relative;
}
.hero__title--accent::after{
  content:"";
  position:absolute;
  bottom:-8px;left:0;
  width:80px;height:4px;
  background:var(--white);
}

.hero__subtitle{
  font-size:clamp(16px, 1.4vw, 19px);
  color:var(--gray-300);
  max-width:560px;
  line-height:1.6;
  margin-bottom:40px;
  animation:fadeInUp 0.8s var(--ease) 0.3s both;
}
.hero__subtitle strong{color:var(--white);font-weight:700}

.hero__cta{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:60px;
  animation:fadeInUp 0.8s var(--ease) 0.45s both;
}

.hero__stats{
  display:flex;
  gap:50px;
  padding-top:40px;
  border-top:1px solid rgba(255,255,255,0.1);
  max-width:560px;
  animation:fadeInUp 0.8s var(--ease) 0.6s both;
}
.stat{display:flex;flex-direction:column;gap:4px}
.stat__num{
  font-family:var(--font-display);
  font-size:42px;
  color:var(--red);
  line-height:1;
}
.stat__label{
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--gray-500);
}

.hero__scroll{
  position:absolute;
  bottom:30px;right:40px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  writing-mode:vertical-rl;
}
.hero__scroll span{
  font-size:10px;
  letter-spacing:3px;
  color:var(--gray-500);
  text-transform:uppercase;
}
.hero__scroll-line{
  width:1px;height:50px;
  background:linear-gradient(to bottom, var(--red), transparent);
  animation:scrollLine 2s infinite;
}
@keyframes scrollLine{
  0%{transform:translateY(-100%);opacity:0}
  50%{opacity:1}
  100%{transform:translateY(100%);opacity:0}
}

@keyframes fadeInUp{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}

@media (max-width:768px){
  .hero__stats{gap:24px}
  .hero__scroll{display:none}
  .hero__stat-num{font-size:32px}
}

/* ========================================
   ABOUT
======================================== */
.about{background:var(--black-soft)}
.about__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}
.about__media{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  aspect-ratio:4/5;
}
.about__media img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 0.8s var(--ease);
}
.about__media:hover img{transform:scale(1.05)}
.about__media::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, transparent 60%, rgba(226,23,35,0.3));
  z-index:1;
}
.about__media-badge{
  position:absolute;
  bottom:30px;left:30px;
  z-index:2;
  background:var(--red);
  color:var(--white);
  padding:20px 26px;
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  gap:16px;
  box-shadow:var(--shadow-red);
}
.about__media-badge-num{
  font-family:var(--font-display);
  font-size:56px;
  line-height:1;
}
.about__media-badge-label{
  font-size:12px;
  line-height:1.3;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
}

.about__content{}
.about__text{
  font-size:16px;
  color:var(--gray-300);
  margin-bottom:20px;
  line-height:1.75;
}
.about__text strong{color:var(--white);font-weight:700}

.about__values{
  margin-top:32px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.about__values li{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:15px;
  font-weight:500;
}
.dot{
  width:8px;height:8px;
  background:var(--red);
  display:inline-block;
  transform:rotate(45deg);
  flex-shrink:0;
}

@media (max-width:900px){
  .about__grid{grid-template-columns:1fr;gap:50px}
  .about__media{aspect-ratio:16/11;max-height:500px}
}

/* ========================================
   ÁREAS
======================================== */
.areas{
  background:var(--black);
  position:relative;
}
.areas::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--red), transparent);
}

.areas__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:20px;
}

.area-card{
  background:var(--black-card);
  padding:36px 30px;
  border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,0.05);
  transition:all 0.4s var(--ease);
  position:relative;
  overflow:hidden;
}
.area-card::before{
  content:"";
  position:absolute;
  top:0;left:0;
  width:100%;height:3px;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.4s var(--ease);
}
.area-card:hover::before{transform:scaleX(1)}
.area-card:hover{
  transform:translateY(-6px);
  border-color:rgba(226,23,35,0.3);
  box-shadow:var(--shadow-card);
}

.area-card__icon{
  width:54px;height:54px;
  border-radius:12px;
  background:linear-gradient(135deg, var(--red), var(--red-dark));
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:20px;
  color:var(--white);
}
.area-card__icon svg{width:26px;height:26px}

.area-card h3{
  font-family:var(--font-display);
  font-size:26px;
  letter-spacing:1px;
  margin-bottom:10px;
  color:var(--white);
}
.area-card p{
  color:var(--gray-500);
  font-size:14px;
  line-height:1.6;
}

.area-card--featured{
  background:linear-gradient(135deg, rgba(226,23,35,0.1), var(--black-card));
  border-color:rgba(226,23,35,0.3);
}
.area-card__tag{
  display:inline-block;
  margin-top:14px;
  font-size:10px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--red);
  font-weight:700;
  padding:4px 10px;
  border:1px solid var(--red);
  border-radius:20px;
}

/* ========================================
   PLANS — Estilo arte promocional
======================================== */
.plans{
  background:
    radial-gradient(ellipse at top, rgba(226,23,35,0.08), transparent 60%),
    var(--black);
  padding-top:120px;
  padding-bottom:120px;
  position:relative;
  overflow:hidden;
}
.plans__bg{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(135deg, transparent 48%, rgba(226,23,35,0.04) 50%, transparent 52%),
    linear-gradient(135deg, transparent 48%, rgba(226,23,35,0.04) 50%, transparent 52%);
  background-size:60px 60px, 120px 120px;
  pointer-events:none;
}
.plans::before,.plans::after{
  content:"";
  position:absolute;
  width:500px;height:500px;
  border-radius:50%;
  background:radial-gradient(circle, var(--red) 0%, transparent 70%);
  opacity:0.08;
  pointer-events:none;
}
.plans::before{top:-200px;left:-200px}
.plans::after{bottom:-200px;right:-200px}

.plans__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  align-items:stretch;
  position:relative;
  z-index:2;
}

.plan{
  background:var(--black-card);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius-lg);
  padding:40px 32px;
  display:flex;
  flex-direction:column;
  position:relative;
  transition:all 0.4s var(--ease);
}
.plan:hover{
  transform:translateY(-8px);
  border-color:rgba(226,23,35,0.4);
}

.plan__head{margin-bottom:24px}
.plan__name{
  font-family:var(--font-display);
  font-size:40px;
  line-height:1;
  letter-spacing:1.5px;
  color:var(--white);
  text-transform:uppercase;
}

.plan__features{
  flex:1;
  margin-bottom:30px;
}
.plan__features li{
  padding:10px 0;
  font-size:14px;
  color:var(--gray-300);
  border-bottom:1px solid rgba(255,255,255,0.05);
  position:relative;
  padding-left:22px;
  line-height:1.5;
}
.plan__features li::before{
  content:"";
  position:absolute;
  left:0;top:16px;
  width:8px;height:8px;
  background:var(--red);
  transform:rotate(45deg);
}
.plan__features li:last-child{border-bottom:none}

.plan__price{
  display:flex;
  align-items:baseline;
  gap:4px;
  margin-bottom:26px;
  padding-top:20px;
  border-top:2px solid rgba(226,23,35,0.2);
  flex-wrap:wrap;
}
.plan__price-currency{
  font-family:var(--font-display);
  font-size:28px;
  color:var(--red);
  line-height:1;
}
.plan__price-amount{
  font-family:var(--font-display);
  font-size:72px;
  color:var(--white);
  line-height:1;
  letter-spacing:-1px;
}
.plan__price-period{
  font-size:11px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--gray-500);
  margin-left:8px;
}

.plan__cta{width:100%}

/* Plan destacado: Black Ultra */
.plan--featured{
  background:linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
  border:2px solid var(--red);
  transform:scale(1.04);
  box-shadow:var(--shadow-red);
}
.plan--featured:hover{transform:scale(1.04) translateY(-8px)}
.plan--featured .plan__name{color:var(--white)}
.plan--featured .plan__price-amount{color:var(--red)}

.plan__badge{
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  background:var(--red);
  color:var(--white);
  font-size:11px;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
  padding:8px 20px;
  border-radius:30px;
  white-space:nowrap;
  box-shadow:var(--shadow-red);
}

.plans__note{
  text-align:center;
  margin-top:40px;
  font-size:13px;
  color:var(--gray-500);
  font-style:italic;
}

@media (max-width:900px){
  .plans__grid{grid-template-columns:1fr;max-width:440px;margin:0 auto}
  .plan--featured{transform:scale(1);order:-1}
  .plan--featured:hover{transform:translateY(-8px)}
}

/* ========================================
   GALLERY
======================================== */
.gallery{background:var(--black-soft)}
.gallery__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:220px;
  gap:16px;
}
.gallery__item{
  border-radius:var(--radius-lg);
  overflow:hidden;
  position:relative;
  cursor:pointer;
}
.gallery__item img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 0.8s var(--ease), filter 0.4s var(--ease);
  filter:grayscale(0.3);
}
.gallery__item:hover img{
  transform:scale(1.08);
  filter:grayscale(0);
}
.gallery__item::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(226,23,35,0.4), transparent);
  opacity:0;
  transition:opacity 0.4s var(--ease);
}
.gallery__item:hover::after{opacity:1}

.gallery__item--tall{grid-row:span 2}
.gallery__item--wide{grid-column:span 2}

@media (max-width:768px){
  .gallery__grid{
    grid-template-columns:1fr 1fr;
    grid-auto-rows:180px;
  }
  .gallery__item--tall{grid-row:span 1}
  .gallery__item--wide{grid-column:span 2}
}

/* ========================================
   LOCATIONS
======================================== */
.locations{background:var(--black)}
.locations__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:20px;
}

.location{
  background:var(--black-card);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:var(--radius-lg);
  padding:32px 28px;
  position:relative;
  transition:all 0.4s var(--ease);
  overflow:hidden;
}
.location::before{
  content:"";
  position:absolute;
  top:0;right:0;
  width:0;height:0;
  border-style:solid;
  border-width:0 40px 40px 0;
  border-color:transparent var(--red) transparent transparent;
  transition:border-width 0.3s var(--ease);
}
.location:hover{
  transform:translateY(-4px);
  border-color:rgba(226,23,35,0.3);
  box-shadow:var(--shadow-card);
}
.location:hover::before{
  border-width:0 55px 55px 0;
}

.location__num{
  font-family:var(--font-display);
  font-size:52px;
  color:var(--red);
  line-height:1;
  margin-bottom:16px;
  opacity:0.9;
}

.location h3{
  font-family:var(--font-display);
  font-size:24px;
  letter-spacing:1px;
  margin-bottom:6px;
  color:var(--white);
}
.location p{
  color:var(--gray-500);
  font-size:14px;
  margin-bottom:22px;
}

.location__link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--white);
  padding:10px 0;
  border-bottom:2px solid var(--red);
  transition:all 0.3s var(--ease);
}
.location__link svg{width:16px;height:16px;transition:transform 0.3s var(--ease)}
.location__link:hover{color:var(--red)}
.location__link:hover svg{transform:translate(3px, -3px)}

/* ========================================
   CTA BANNER
======================================== */
.cta-banner{
  padding:80px 0;
  background:
    linear-gradient(135deg, rgba(226,23,35,0.15), transparent 60%),
    var(--black-soft);
  border-top:1px solid rgba(255,255,255,0.05);
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.cta-banner__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}
.cta-banner .section__kicker{margin-bottom:12px}
.cta-banner .section__title{margin-bottom:0;font-size:clamp(28px,4vw,52px)}

@media (max-width:768px){
  .cta-banner__inner{flex-direction:column;text-align:left;align-items:flex-start}
}

/* ========================================
   CONTACT
======================================== */
.contact{
  background:var(--black);
  padding-bottom:140px;
}
.contact__grid{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:70px;
  align-items:start;
}

.contact__info{}
.contact__text{
  font-size:16px;
  color:var(--gray-300);
  margin-bottom:36px;
  line-height:1.7;
  max-width:460px;
}

.contact__whatsapp{
  display:flex;
  align-items:center;
  gap:20px;
  padding:20px 26px;
  background:linear-gradient(135deg, var(--wa-green), #1fb957);
  border-radius:var(--radius-lg);
  margin-bottom:36px;
  transition:all 0.3s var(--ease);
  box-shadow:0 15px 40px -15px rgba(37, 211, 102, 0.5);
}
.contact__whatsapp:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 50px -15px rgba(37, 211, 102, 0.7);
}
.contact__whatsapp-icon{
  width:48px;height:48px;
  background:rgba(255,255,255,0.2);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.contact__whatsapp-icon svg{width:26px;height:26px;color:var(--white)}
.contact__whatsapp-label{
  display:block;
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.9);
  margin-bottom:2px;
}
.contact__whatsapp-number{
  display:block;
  font-family:var(--font-display);
  font-size:28px;
  color:var(--white);
  letter-spacing:1px;
}

.contact__list{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:10px;
  margin-bottom:36px;
  padding:28px;
  background:var(--black-card);
  border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,0.06);
}
.contact__list li{
  display:flex;
  align-items:center;
  gap:16px;
  font-size:15px;
  color:var(--gray-300);
  font-weight:500;
}
.contact__list svg{
  width:22px;height:22px;
  color:var(--red);
  flex-shrink:0;
}

.contact__social{
  display:flex;
  gap:12px;
}
.contact__social a{
  width:42px;height:42px;
  border:1px solid rgba(255,255,255,0.15);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gray-300);
  transition:all 0.3s var(--ease);
}
.contact__social svg{width:18px;height:18px}
.contact__social a:hover{
  background:var(--red);
  border-color:var(--red);
  color:var(--white);
  transform:translateY(-2px);
}

/* FORM */
.contact__form-wrap{
  background:var(--black-card);
  padding:44px;
  border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,0.06);
  position:relative;
  overflow:hidden;
}
.contact__form-wrap::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  background:linear-gradient(90deg, var(--red), transparent);
}

.contact__form-title{
  font-family:var(--font-display);
  font-size:30px;
  letter-spacing:1px;
  margin-bottom:8px;
}
.contact__form-sub{
  font-size:14px;
  color:var(--gray-500);
  margin-bottom:28px;
}

.field{margin-bottom:18px}
.field label{
  display:block;
  font-size:12px;
  font-weight:600;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--gray-300);
  margin-bottom:8px;
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:14px 16px;
  background:var(--black-soft);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius);
  color:var(--white);
  font-size:14px;
  transition:all 0.3s var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--red);
  background:var(--black);
  box-shadow:0 0 0 4px rgba(226,23,35,0.12);
}
.field textarea{resize:vertical;min-height:80px}
.field select{cursor:pointer}

.contact__form-note{
  font-size:12px;
  color:var(--gray-500);
  margin-top:14px;
  text-align:center;
}

@media (max-width:900px){
  .contact__grid{grid-template-columns:1fr;gap:50px}
  .contact__form-wrap{padding:30px 24px}
}

/* ========================================
   FOOTER
======================================== */
.footer{
  background:var(--black-soft);
  padding-top:80px;
  border-top:1px solid rgba(255,255,255,0.05);
}
.footer__grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:50px;
  padding-bottom:60px;
}
.footer__brand p{
  font-size:14px;
  color:var(--gray-500);
  line-height:1.7;
  max-width:340px;
  margin-top:20px;
}
.footer__logo{height:50px;width:auto}

.footer__col h4{
  font-family:var(--font-display);
  font-size:20px;
  letter-spacing:1.5px;
  color:var(--white);
  margin-bottom:20px;
  position:relative;
  padding-bottom:10px;
}
.footer__col h4::after{
  content:"";
  position:absolute;
  bottom:0;left:0;
  width:30px;height:2px;
  background:var(--red);
}
.footer__col ul{display:flex;flex-direction:column;gap:10px}
.footer__col a{
  font-size:14px;
  color:var(--gray-500);
  transition:color 0.3s var(--ease);
}
.footer__col a:hover{color:var(--red)}

.footer__social{display:flex;gap:10px}
.footer__social a{
  width:38px;height:38px;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gray-500);
  transition:all 0.3s var(--ease);
}
.footer__social svg{width:16px;height:16px}
.footer__social a:hover{
  background:var(--red);
  border-color:var(--red);
  color:var(--white);
}

.footer__bottom{
  padding:24px 0;
  border-top:1px solid rgba(255,255,255,0.05);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  max-width:var(--container);
  margin:0 auto;
  padding-left:24px;
  padding-right:24px;
}
.footer__bottom p{font-size:12px;color:var(--gray-500);letter-spacing:0.5px}
.footer__tag{
  font-family:var(--font-display);
  font-size:14px!important;
  letter-spacing:2px!important;
  color:var(--red)!important;
  text-transform:uppercase;
}

@media (max-width:768px){
  .footer__grid{grid-template-columns:1fr 1fr;gap:40px}
  .footer__brand{grid-column:span 2}
  .footer__bottom{flex-direction:column;text-align:center}
}

/* ========================================
   FLOATING WHATSAPP
======================================== */
.wa-float{
  position:fixed;
  bottom:24px;right:24px;
  width:60px;height:60px;
  background:var(--wa-green);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--white);
  box-shadow:0 10px 30px -5px rgba(37,211,102,0.6);
  z-index:50;
  transition:transform 0.3s var(--ease);
}
.wa-float:hover{transform:scale(1.1)}
.wa-float svg{width:30px;height:30px}
.wa-float__pulse{
  position:absolute;
  inset:-4px;
  border:2px solid var(--wa-green);
  border-radius:50%;
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{transform:scale(1);opacity:0.8}
  100%{transform:scale(1.4);opacity:0}
}

/* ========================================
   SCROLL REVEAL
======================================== */
.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:all 0.8s var(--ease);
}
.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

/* ========================================
   PRINT / ACCESSIBILITY
======================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
  }
  .hero__bg img{animation:none}
}