/* ============================================================
   Gimnasio Synergy — styles.css
   Índice:
   1. Reset & Variables
   2. Base & Tipografía
   3. Skip link (accesibilidad)
   4. Focus styles (accesibilidad teclado)
   5. Header / Nav
   6. Hero
   7. Secciones — comunes
   8. Ambiente: galería
   9. Ambiente: servicios
   10. Ambiente: equipamiento
   11. Planes
   12. Contacto
   13. WhatsApp flotante
   14. Footer
   15. Responsive
   ============================================================ */


/* ─── 1. RESET & VARIABLES ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --lime:       #BAEC0C;
  --dark:       #071313;
  --light:      #F7F8F7;
  --lime-glow:  rgba(186,236,12,0.25);
  --text-muted: rgba(247,248,247,0.65);
  --text-dim:   rgba(247,248,247,0.45);
}

html { scroll-behavior: smooth; }
body {
  background:   var(--dark);
  color:        var(--light);
  font-family:  'Inter', sans-serif;
  overflow-x:   hidden;
  line-height:  1.5;
}


/* ─── 2. BASE & TIPOGRAFÍA ─── */
img  { max-width: 100%; height: auto; display: block; }
ul   { list-style: none; }
address { font-style: normal; }

/* Clases de texto reutilizables */
.section-intro {
  max-width:   560px;
  font-size:   0.93rem;
  line-height: 1.75;
  color:       var(--text-muted);
  margin-bottom: 0.5rem;
}
.section-intro--muted {
  max-width: 500px;
  color:     var(--text-dim);
}
.subsection-title {
  font-family:    'Bebas Neue', sans-serif;
  font-size:      2rem;
  letter-spacing: 0.06em;
  color:          var(--light);
  margin-bottom:  1.6rem;
}


/* ─── 3. SKIP LINK ─── */
.skip-link {
  position:        absolute;
  top:             -100%;
  left:            1rem;
  z-index:         9999;
  padding:         0.6rem 1.2rem;
  background:      var(--lime);
  color:           var(--dark);
  font-family:     'Oswald', sans-serif;
  font-size:       0.8rem;
  font-weight:     700;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  text-decoration: none;
  border-radius:   0 0 4px 4px;
  transition:      top 0.2s;
}
.skip-link:focus { top: 0; }


/* ─── 4. FOCUS STYLES (teclado) ─── */
:focus-visible {
  outline:        2px solid var(--lime);
  outline-offset: 3px;
}
/* Suprime el outline de mouse sin afectar teclado */
:focus:not(:focus-visible) { outline: none; }


/* ─── 5. HEADER / NAV ─── */
header {
  position: fixed;
  top:   0;
  left:  0;
  right: 0;
  z-index: 100;
}

nav {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 5vw;
  height:          64px;
  background:      rgba(7,19,19,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom:   1px solid rgba(186,236,12,0.15);
}

.nav-logo {
  display:         flex;
  align-items:     center;
  text-decoration: none;
  flex-shrink:     0;
}
.nav-logo img { height: 52px; width: auto; }

/* Hamburguesa — visible solo en mobile */
.nav-toggle {
  display:        none;
  flex-direction: column;
  justify-content: center;
  gap:            5px;
  width:          36px;
  height:         36px;
  background:     none;
  border:         none;
  cursor:         pointer;
  padding:        4px;
  border-radius:  4px;
}
.nav-toggle span {
  display:    block;
  height:     2px;
  width:      100%;
  background: var(--light);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

nav ul {
  display:    flex;
  gap:        2.4rem;
}
nav ul a {
  font-family:     'Oswald', sans-serif;
  font-size:       0.82rem;
  font-weight:     500;
  letter-spacing:  0.18em;
  text-transform:  uppercase;
  color:           var(--light);
  text-decoration: none;
  opacity:         0.7;
  transition:      opacity 0.2s, color 0.2s;
  position:        relative;
}
nav ul a::after {
  content:    '';
  position:   absolute;
  bottom:     -4px;
  left:       0;
  right:      100%;
  height:     1px;
  background: var(--lime);
  transition: right 0.25s ease;
}
nav ul a:hover,
nav ul a.active {
  opacity: 1;
  color:   var(--lime);
}
nav ul a.active::after,
nav ul a:hover::after { right: 0; }


/* ─── 6. HERO ─── */
#inicio {
  position:   relative;
  height:     100vh;
  min-height: 600px;
  display:    flex;
  align-items:     center;
  justify-content: center;
  overflow:   hidden;
}

.hero-bg {
  position:            absolute;
  inset:               0;
  background-image:    url('../assets/img/hero/hero-bg.jpg');
  background-size:     cover;
  background-position: center 30%;
  filter:              brightness(0.38) contrast(1.1);
  transform:           scale(1.04);
}
.hero-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(160deg, rgba(7,19,19,0.6) 0%, rgba(186,236,12,0.04) 60%, rgba(7,19,19,0.9) 100%);
}
.hero-content {
  position:       relative;
  z-index:        2;
  text-align:     center;
  padding:        0 5vw;
  display:        flex;
  flex-direction: column;
  align-items:    center;
}

.hero-eyebrow {
  font-family:    'Oswald', sans-serif;
  font-size:      0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color:          var(--lime);
  margin-bottom:  1.2rem;
  opacity:        0.9;
}
.hero-title {
  font-family:    'Bebas Neue', sans-serif;
  font-size:      clamp(3.8rem, 10vw, 9rem);
  line-height:    0.9;
  color:          var(--light);
  text-shadow:    0 4px 40px rgba(0,0,0,0.6);
  letter-spacing: 0.04em;
}
.hero-brand {
  display: block;
  color:   var(--lime);
}
.hero-sub {
  font-family:    'Oswald', sans-serif;
  font-size:      clamp(1rem, 2.4vw, 1.5rem);
  font-weight:    400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          var(--light);
  margin-top:     0.8rem;
}

.hero-cta {
  margin-top: 2.8rem;
  display:    inline-flex;
  gap:        1rem;
}

/* Botones — sistema unificado */
.btn {
  font-family:     'Oswald', sans-serif;
  font-weight:     600;
  font-size:       0.85rem;
  letter-spacing:  0.2em;
  text-transform:  uppercase;
  padding:         0.9rem 2.4rem;
  text-decoration: none;
  clip-path:       polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  transition:      transform 0.15s, box-shadow 0.15s, border-color 0.2s, color 0.2s;
  display:         inline-block;
}
.btn--primary {
  background: var(--lime);
  color:      var(--dark);
}
.btn--primary:hover {
  transform:  translateY(-2px);
  box-shadow: 0 8px 28px var(--lime-glow);
}
.btn--outline {
  border: 1px solid rgba(247,248,247,0.35);
  color:  var(--light);
}
.btn--outline:hover {
  border-color: var(--lime);
  color:        var(--lime);
}

.hero-scroll {
  position:       absolute;
  bottom:         2.4rem;
  left:           50%;
  transform:      translateX(-50%);
  z-index:        2;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            6px;
  font-family:    'Oswald', sans-serif;
  font-size:      0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          rgba(247,248,247,0.4);
}
.scroll-bar {
  width:      1px;
  height:     40px;
  background: linear-gradient(to bottom, var(--lime), transparent);
  animation:  scrollPulse 2s ease-in-out infinite;
}


/* ─── 7. SECCIONES — COMUNES ─── */
section { padding: 7rem 5vw; }

.section-label {
  font-family:    'Oswald', sans-serif;
  font-size:      0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color:          var(--lime);
  opacity:        0.85;
  margin-bottom:  0.6rem;
  display:        flex;
  align-items:    center;
  gap:            0.7rem;
}
.section-label::after {
  content:    '';
  flex:       1;
  max-width:  48px;
  height:     1px;
  background: var(--lime);
  opacity:    0.5;
}
.section-label--spaced { margin-top: 1rem; }

.section-title {
  font-family:    'Bebas Neue', sans-serif;
  font-size:      clamp(2.4rem, 5vw, 4rem);
  letter-spacing: 0.06em;
  color:          var(--light);
  line-height:    1;
}

.divider {
  width:         48px;
  height:        3px;
  background:    var(--lime);
  margin:        1.4rem 0 2rem;
  border-radius: 2px;
}


/* ─── 8. AMBIENTE: GALERÍA ─── */
#ambiente { background: var(--dark); overflow: hidden; }

.gallery-rows {
  margin:         3rem -5vw 4rem;
  display:        flex;
  flex-direction: column;
  gap:            10px;
  overflow:       hidden;
  position:       relative;
}
.gallery-rows::before,
.gallery-rows::after {
  content:        '';
  position:       absolute;
  top: 0; bottom: 0;
  width:          220px;
  z-index:        2;
  pointer-events: none;
}
.gallery-rows::before { left: 0;  background: linear-gradient(to right, var(--dark) 30%, transparent); }
.gallery-rows::after  { right: 0; background: linear-gradient(to left,  var(--dark) 30%, transparent); }

.gallery-strip {
  display:             flex;
  width:               max-content;
  will-change:         transform;
  backface-visibility: hidden;
  filter:              brightness(0.72) contrast(1.08) saturate(0.85);
}
.gallery-strip--fwd { animation: strip-fwd 350s linear infinite; }
.gallery-strip--rev { animation: strip-rev 350s linear infinite; }

.gallery-img {
  height:         320px;
  width:          430px;
  object-fit:     cover;
  flex-shrink:    0;
  margin-right:   10px;
  pointer-events: none;
  user-select:    none;
}


/* ─── 9. AMBIENTE: SERVICIOS ─── */
.services-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   1.4rem;
  margin-top:            1rem;
}

.service-card {
  position:       relative;
  overflow:       hidden;
  border:         1px solid rgba(186,236,12,0.15);
  padding:        2.2rem 1.8rem;
  cursor:         default;
  min-height:     240px;
  display:        flex;
  flex-direction: column;
  justify-content: flex-end;
  transition:     border-color 0.4s, transform 0.4s, box-shadow 0.4s;
}

/* Overlay oscuro sobre imagen de fondo */
.service-card::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: rgba(10,12,10,0.78);
  transition: background 0.5s ease;
  z-index:    1;
}
/* Imagen de fondo (vía data-svc en CSS) */
.service-card::after {
  content:             '';
  position:            absolute;
  inset:               0;
  background-size:     cover;
  background-position: center;
  z-index:             0;
}

.service-card:hover {
  border-color: rgba(186,236,12,0.6);
  transform:    translateY(-4px);
  box-shadow:   0 0 0 1px rgba(186,236,12,0.5), 0 16px 40px rgba(0,0,0,0.5);
}
.service-card:hover::before { background: rgba(10,12,10,0.42); }

/* Imágenes por servicio */
.service-card[data-svc="funcional"]::after   { background-image: url('https://images.unsplash.com/photo-1599058917212-d750089bc07e?w=700&q=80'); }
.service-card[data-svc="senior-power"]::after { background-image: url('https://images.unsplash.com/photo-1658314755561-389d5660ee54?w=700&q=80'); }
.service-card[data-svc="dance"]::after        { background-image: url('https://images.unsplash.com/photo-1470468969717-61d5d54fd036?w=700&q=80'); }
.service-card[data-svc="senior-full"]::after  { background-image: url('https://images.unsplash.com/photo-1549576490-b0b4831ef60a?w=700&q=80'); }
.service-card[data-svc="libre"]::after        { background-image: url('https://images.unsplash.com/photo-1620188467120-5042ed1eb5da?w=700&q=80'); }
.service-card[data-svc="grupales"]::after     { background-image: url('https://images.unsplash.com/photo-1607962837359-5e7e89f86776?w=700&q=80'); }

.service-card-content {
  position: relative;
  z-index:  2;
}

.service-tag {
  display:        inline-block;
  font-family:    'Oswald', sans-serif;
  font-size:      0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background:     var(--lime);
  color:          var(--dark);
  padding:        0.2rem 0.55rem;
  margin-bottom:  0.9rem;
  opacity:        0;
  transform:      translateY(6px);
  transition:     opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}
.service-card:hover .service-tag {
  opacity:   1;
  transform: translateY(0);
}

.service-icon {
  font-size:     2rem;
  margin-bottom: 0.8rem;
  display:       block;
  transition:    transform 0.4s ease;
}
.service-card:hover .service-icon { transform: scale(1.2); }

.service-title {
  font-family:    'Oswald', sans-serif;
  font-weight:    600;
  font-size:      1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--lime);
  margin-bottom:  0.5rem;
}

.service-desc {
  font-size:  0.84rem;
  line-height: 1.6;
  color:      rgba(247,248,247,0.82);
  transition: color 0.4s;
}
.service-card:hover .service-desc { color: rgba(247,248,247,0.95); }


/* ─── 10. AMBIENTE: EQUIPAMIENTO ─── */
.machines-label {
  font-family:    'Oswald', sans-serif;
  font-size:      0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color:          var(--lime);
  margin:         3.5rem 0 1.4rem;
  display:        flex;
  align-items:    center;
  gap:            0.7rem;
}
.machines-label::after {
  content:    '';
  flex:       1;
  max-width:  48px;
  height:     1px;
  background: var(--lime);
  opacity:    0.5;
}

.machines-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:                   1rem;
}

.machine-card {
  position:        relative;
  overflow:        hidden;
  border:          1px solid rgba(247,248,247,0.08);
  padding:         1.8rem 1rem 1.5rem;
  text-align:      center;
  min-height:      140px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      border-color 0.4s, transform 0.4s, box-shadow 0.4s;
  cursor:          default;
}
.machine-card::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: rgba(10,12,10,0.80);
  transition: background 0.5s ease;
  z-index:    1;
}
.machine-card::after {
  content:             '';
  position:            absolute;
  inset:               0;
  background-size:     cover;
  background-position: center;
  z-index:             0;
}
.machine-card:hover {
  border-color: rgba(186,236,12,0.55);
  transform:    translateY(-3px);
  box-shadow:   0 0 0 1px rgba(186,236,12,0.4), 0 12px 32px rgba(0,0,0,0.45);
}
.machine-card:hover::before { background: rgba(10,12,10,0.42); }

/* Imágenes por equipo */
.machine-card[data-eq="rack"]::after        { background-image: url('https://images.unsplash.com/photo-1520334435999-d992362bb3ad?w=500&q=80'); }
.machine-card[data-eq="barras"]::after      { background-image: url('https://images.unsplash.com/photo-1517964603305-11c0f6f66012?w=500&q=80'); }
.machine-card[data-eq="mancuernas"]::after  { background-image: url('https://images.unsplash.com/photo-1620188540300-c156a625c6fc?w=500&q=80'); }
.machine-card[data-eq="prensa"]::after      { background-image: url('https://images.unsplash.com/photo-1434608519344-49d77a699e1d?w=500&q=80'); }
.machine-card[data-eq="poleas"]::after      { background-image: url('https://plus.unsplash.com/premium_photo-1663036277623-a9000786260f?w=500&q=80'); }
.machine-card[data-eq="trotadora"]::after   { background-image: url('https://images.unsplash.com/photo-1721394749382-223a18ce8bb9?w=500&q=80'); }
.machine-card[data-eq="bicicleta"]::after   { background-image: url('https://images.unsplash.com/photo-1520877880798-5ee004e3f11e?w=500&q=80'); }
.machine-card[data-eq="jumpbox"]::after     { background-image: url('https://plus.unsplash.com/premium_photo-1661491841553-8d41f1fc0187?w=500&q=80'); }
.machine-card[data-eq="trx"]::after         { background-image: url('https://images.unsplash.com/photo-1538246492765-497eab02ee29?w=500&q=80'); }
.machine-card[data-eq="pasto"]::after       { background-image: url('https://images.unsplash.com/photo-1773469333571-494f1c01e411?w=500&q=80'); }

.machine-card-content {
  position:       relative;
  z-index:        2;
  display:        flex;
  flex-direction: column;
  align-items:    center;
}
.machine-icon {
  font-size:     2rem;
  margin-bottom: 0.6rem;
  display:       block;
  opacity:       0.75;
  transition:    transform 0.4s ease, opacity 0.4s ease;
}
.machine-card:hover .machine-icon { transform: scale(1.25); opacity: 1; }
.machine-name {
  font-family:    'Oswald', sans-serif;
  font-size:      0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          rgba(247,248,247,0.75);
  transition:     color 0.4s;
}
.machine-card:hover .machine-name { color: var(--lime); }


/* ─── 11. PLANES ─── */
#planes { background: #050F0F; }

.plans-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:                   1.2rem;
  margin-top:            2.8rem;
}

.plan-card {
  border:     1px solid rgba(186,236,12,0.16);
  padding:    2.2rem 1.6rem 1.8rem;
  position:   relative;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  background: rgba(247,248,247,0.02);
  display:    flex;
  flex-direction: column;
}
.plan-card.featured {
  border-color: var(--lime);
  background:   rgba(186,236,12,0.07);
  transform:    translateY(-8px);
}
.plan-card:hover {
  transform:    translateY(-4px);
  border-color: rgba(186,236,12,0.5);
  box-shadow:   0 16px 48px rgba(186,236,12,0.08);
}
.plan-card.featured:hover { transform: translateY(-12px); }

.plan-badge {
  position:       absolute;
  top:            -1px;
  right:          1.4rem;
  background:     var(--lime);
  color:          var(--dark);
  font-family:    'Oswald', sans-serif;
  font-size:      0.65rem;
  font-weight:    700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding:        0.25rem 0.7rem;
}
.plan-name {
  font-family:    'Oswald', sans-serif;
  font-weight:    600;
  font-size:      0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          rgba(247,248,247,0.5);
  margin-bottom:  0.8rem;
}
.plan-price {
  font-family:    'Bebas Neue', sans-serif;
  font-size:      3rem;
  line-height:    1;
  color:          var(--light);
  letter-spacing: 0.02em;
}
.plan-currency {
  font-family:    'Oswald', sans-serif;
  font-size:      1.1rem;
  vertical-align: top;
  margin-top:     0.3rem;
  display:        inline-block;
  color:          var(--lime);
}
.plan-period {
  font-family: 'Inter', sans-serif;
  font-size:   0.75rem;
  color:       rgba(247,248,247,0.4);
  margin-top:  0.3rem;
}
.plan-divider {
  height:     1px;
  background: rgba(247,248,247,0.08);
  margin:     1.2rem 0;
}
.plan-features { flex: 1; }
.plan-features li {
  font-size:   0.8rem;
  color:       rgba(247,248,247,0.65);
  padding:     0.3rem 0;
  display:     flex;
  align-items: center;
  gap:         0.5rem;
}
.plan-features li::before {
  content:       '';
  width:         5px;
  height:        5px;
  background:    var(--lime);
  border-radius: 50%;
  flex-shrink:   0;
}
.plan-cta {
  margin-top:      1.6rem;
  display:         block;
  text-align:      center;
  background:      transparent;
  border:          1px solid rgba(186,236,12,0.3);
  color:           var(--lime);
  font-family:     'Oswald', sans-serif;
  font-size:       0.75rem;
  font-weight:     600;
  letter-spacing:  0.18em;
  text-transform:  uppercase;
  padding:         0.7rem;
  text-decoration: none;
  transition:      background 0.2s, color 0.2s, border-color 0.2s;
}
.plan-card.featured .plan-cta { background: var(--lime); color: var(--dark); border-color: var(--lime); }
.plan-cta:hover { background: var(--lime); color: var(--dark); border-color: var(--lime); }


/* ─── 12. CONTACTO ─── */
#contacto { background: var(--dark); }

.contact-grid {
  display:               grid;
  grid-template-columns: 1fr 1.3fr;
  gap:                   5rem;
  margin-top:            3rem;
  align-items:           center;
}
.contact-item {
  display:       flex;
  gap:           1.2rem;
  align-items:   flex-start;
  margin-bottom: 2rem;
}
.contact-item-icon {
  flex-shrink: 0;
  width:       18px;
  margin-top:  3px;
  opacity:     0.55;
}
.contact-item-icon svg {
  display:          block;
  width:            18px;
  height:           18px;
  stroke:           var(--lime);
  fill:             none;
  stroke-width:     1.5;
  stroke-linecap:   round;
  stroke-linejoin:  round;
}
.contact-label {
  font-family:    'Oswald', sans-serif;
  font-size:      0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          var(--lime);
  margin-bottom:  0.3rem;
}
.contact-value {
  font-size:   0.92rem;
  line-height: 1.6;
  color:       rgba(247,248,247,0.72);
}
.contact-link {
  color:           inherit;
  text-decoration: none;
  transition:      color 0.2s;
}
.contact-link:hover { color: var(--lime); text-decoration: underline; }

.map-wrap {
  position:      relative;
  overflow:      hidden;
  height:        420px;
  border-radius: 20px;
  box-shadow:    0 8px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(186,236,12,0.18);
}
.map-wrap::after {
  content:        '';
  position:       absolute;
  inset:          0;
  pointer-events: none;
  border-radius:  20px;
  box-shadow:     inset 0 0 0 1px rgba(186,236,12,0.14);
}
.map-wrap iframe {
  width:   100%;
  height:  100%;
  border:  none;
  display: block;
}


/* ─── 13. WHATSAPP FLOTANTE ─── */
.whatsapp-float {
  position:        fixed;
  bottom:          28px;
  right:           28px;
  z-index:         999;
  display:         flex;
  align-items:     center;
  gap:             10px;
  background:      #25D366;
  color:           #fff;
  text-decoration: none;
  padding:         13px 20px 13px 16px;
  border-radius:   50px;
  font-family:     'Inter', sans-serif;
  font-size:       0.88rem;
  font-weight:     600;
  letter-spacing:  0.02em;
  box-shadow:      0 4px 20px rgba(37,211,102,0.38), 0 2px 8px rgba(0,0,0,0.3);
  transition:      transform 0.2s ease, box-shadow 0.2s ease;
}
.whatsapp-float:hover {
  transform:  translateY(-3px);
  box-shadow: 0 8px 28px rgba(37,211,102,0.5), 0 4px 12px rgba(0,0,0,0.3);
}
.whatsapp-float svg {
  width:       22px;
  height:      22px;
  flex-shrink: 0;
  fill:        #fff;
}


/* ─── 14. FOOTER ─── */
footer {
  background:  #040C0C;
  border-top:  1px solid rgba(186,236,12,0.1);
  padding:     2rem 5vw;
  display:     flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap:   wrap;
  gap:         1rem;
}
.footer-logo {
  display:         inline-flex;
  text-decoration: none;
}
.footer-logo img {
  height:  36px;
  width:   auto;
  opacity: 0.85;
}
.footer-slogan {
  font-family:    'Oswald', sans-serif;
  font-size:      0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          rgba(247,248,247,0.35);
  margin-top:     0.3rem;
}
.footer-copy {
  font-size: 0.75rem;
  color:     rgba(247,248,247,0.35);
}


/* ─── 15. RESPONSIVE ─── */
@media (max-width: 768px) {

  /* Nav */
  nav {
    padding:     0 4vw;
    height:      auto;
    min-height:  56px;
    flex-wrap:   wrap;
  }
  .nav-logo img   { height: 38px; }
  .nav-toggle     { display: flex; }
  nav ul {
    flex-direction: column;
    align-items:    stretch;
    width:          100%;
    max-height:     0;
    overflow:       hidden;
    transition:     max-height 0.3s ease;
    order:          3;
    background:     rgba(7,19,19,0.98);
    gap:            0;
  }
  nav.nav-open ul {
    max-height:  320px;
    border-top:  1px solid rgba(186,236,12,0.15);
  }
  nav ul li  { width: 100%; }
  nav ul a {
    display:        block;
    padding:        0.9rem 0;
    font-size:      0.78rem;
    letter-spacing: 0.16em;
    text-align:     center;
  }
  nav ul a::after { display: none; }

  /* Hero */
  section        { padding: 5rem 5vw; }
  #inicio        { min-height: 100svh; }
  .hero-brand    { font-size: clamp(4rem, 20vw, 6rem); }
  .hero-sub      { font-size: 0.85rem; letter-spacing: 0.18em; }
  .hero-cta      { flex-direction: column; align-items: stretch; width: 100%; max-width: 280px; }
  .btn           { text-align: center; padding: 1rem 1.5rem; }
  .hero-scroll   { display: none; }

  /* Gallery */
  .gallery-rows          { margin: 2rem -5vw 3rem; gap: 8px; }
  .gallery-rows::before,
  .gallery-rows::after   { width: 60px; }
  .gallery-img           { height: 200px; width: 270px; }

  /* Service cards: en mobile la imagen se ve sutilmente sin hover */
  .service-card::before  { background: rgba(10,12,10,0.72); }
  .services-grid         { grid-template-columns: 1fr; gap: 1rem; }
  .service-card          { min-height: 180px; padding: 1.6rem 1.4rem; }

  /* Machines */
  .machines-grid   { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
  .machine-card    { min-height: 110px; padding: 1.2rem 0.8rem; }
  .machine-icon    { font-size: 1.5rem; }
  .machine-name    { font-size: 0.72rem; }

  /* Plans */
  .plans-grid            { grid-template-columns: 1fr; gap: 1rem; }
  .plan-card.featured    { transform: none; }
  .plan-card.featured:hover { transform: translateY(-4px); }

  /* Contact */
  .contact-grid  { grid-template-columns: 1fr; gap: 2.5rem; }
  .map-wrap      { height: 280px; }

  /* Section titles */
  .section-title { font-size: clamp(2rem, 10vw, 3rem); }

  /* WhatsApp float */
  .whatsapp-float {
    bottom:     18px;
    right:      18px;
    font-size:  0.8rem;
    padding:    11px 16px 11px 13px;
  }
}

@media (max-width: 390px) {
  nav ul a     { font-size: 0.7rem; }
  .gallery-img { height: 160px; width: 220px; }
}