/* ============================================================================
   Stronger Fit Center — Av. Rotaria, El Tigre (Anzoátegui)
   Arquetipo U · Taller industrial de fuerza.
   Voz tipográfica: áspera, pesada, honesta.
     · Big Shoulders Display 800 — letrero pintado de galpón, condensada y
       achaflanada: el rótulo de la cortina metálica, no la fuente de gimnasio.
     · Barlow 400/600 — grotesca de infraestructura pública, sin adorno.
   Paleta del brief: naranja industrial, zinc, acero y negro. Todo oscuro.
   ========================================================================== */

@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/big-shoulders-display-800-latin-1.woff2') format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/barlow-400-latin-1.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/barlow-600-latin-2.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  /* Paleta del brief. Los neutros intermedios se derivan del zinc: no se
     cambia ningún matiz, solo se abre la escala para bordes y superficies. */
  --negro:#09090B;
  --zinc:#18181B;
  --zinc-alto:#212125;
  --linea:#2D2D33;
  --linea-viva:#3F3F46;
  --acero:#A1A1AA;
  --naranja:#EA580C;
  --texto:#FAFAFA;

  --display:'Big Shoulders Display', ui-sans-serif, system-ui, sans-serif;
  --texto-f:'Barlow', ui-sans-serif, system-ui, sans-serif;

  /* Escala modular ~1.28. Las escalas planas se leen como no decididas. */
  --t-xs:.8125rem;
  --t-sm:.9375rem;
  --t-base:1.0625rem;
  --t-md:1.25rem;
  --t-lg:clamp(1.35rem,1.1rem + 1.1vw,1.75rem);
  --t-xl:clamp(2.1rem,1.4rem + 3.4vw,3.5rem);
  --t-hero:clamp(2.9rem,1.5rem + 7.6vw,5.5rem);

  --canal:20px;
  --ancho:1180px;
  --top-fijo:0px;

  --ease-out-quart:cubic-bezier(.25,1,.5,1);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);

  /* Escala z semántica: nada de 999. */
  --z-riel:5;
  --z-cabecera:20;
  --z-barra:40;
}

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--negro);
  color:var(--texto);
  font-family:var(--texto-f);
  font-size:var(--t-base);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom:80px;              /* deja aire para la barra fija de móvil */
}

img,video,svg{display:block;max-width:100%}

a{color:inherit}

h1,h2,h3{
  font-family:var(--display);
  font-weight:800;
  line-height:.94;
  letter-spacing:-.005em;           /* condensada: no necesita apretarse más */
  text-transform:uppercase;
  text-wrap:balance;
  margin:0;
}

p{margin:0}

.contenedor{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 var(--canal)}
.prosa{max-width:62ch}

.oculto-visual{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

:focus-visible{outline:2px solid var(--naranja);outline-offset:3px}

/* ── Botones ──────────────────────────────────────────────────────────────
   Todo lo presionable baja al presionarse: sin eso la interfaz no parece
   estar escuchando. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 22px;
  font-family:var(--texto-f);font-weight:600;font-size:var(--t-sm);
  letter-spacing:.055em;text-transform:uppercase;text-decoration:none;
  border:1px solid transparent;border-radius:2px;
  transition:transform 160ms var(--ease-out-quart),
             background-color 180ms var(--ease-out-quart),
             border-color 180ms var(--ease-out-quart),
             box-shadow 180ms var(--ease-out-quart),
             color 180ms var(--ease-out-quart);
}
.btn:active{transform:scale(.97)}
.btn svg{flex:none}

.btn--fuerza{background:var(--naranja);color:var(--negro);border-color:var(--naranja)}
.btn--acero{background:transparent;color:var(--texto);border-color:var(--linea-viva)}
.btn--negro{background:var(--negro);color:var(--texto);border-color:var(--negro)}

@media (hover:hover) and (pointer:fine){
  .btn--fuerza:hover{box-shadow:0 8px 26px -12px rgba(234,88,12,.9)}
  .btn--acero:hover{border-color:var(--acero);background:rgba(250,250,250,.05)}
  .btn--negro:hover{box-shadow:0 8px 26px -12px rgba(9,9,11,.95)}
}

/* ── Cabecera ────────────────────────────────────────────────────────────── */
.cabecera{
  border-bottom:1px solid var(--linea);
  background:var(--negro);
}
.cabecera__inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:64px;
}
.marca{
  display:flex;align-items:baseline;gap:9px;text-decoration:none;
}
.marca__nombre{
  font-family:var(--display);font-weight:800;font-size:1.5rem;
  text-transform:uppercase;letter-spacing:.01em;line-height:1;
}
.marca__punto{width:9px;height:9px;background:var(--naranja);display:block;align-self:center}
.cabecera__nav{display:none}

@media (min-width:900px){
  :root{--top-fijo:64px}
  .cabecera{position:sticky;top:0;z-index:var(--z-cabecera)}
  .cabecera__nav{display:flex;align-items:center;gap:28px}
  .cabecera__nav a:not(.btn){
    font-size:var(--t-sm);font-weight:600;letter-spacing:.05em;
    text-transform:uppercase;color:var(--acero);text-decoration:none;
    padding:6px 0;border-bottom:1px solid transparent;
    transition:color 180ms var(--ease-out-quart),border-color 180ms var(--ease-out-quart);
  }
  .cabecera__nav .btn{min-height:44px}
  body{padding-bottom:0}
}
@media (min-width:900px) and (hover:hover) and (pointer:fine){
  .cabecera__nav a:not(.btn):hover{color:var(--texto);border-color:var(--naranja)}
}

/* ── Barra fija inferior (móvil) ─────────────────────────────────────────── */
.barra-fija{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-barra);
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  padding:9px var(--canal) calc(9px + env(safe-area-inset-bottom));
  background:rgba(9,9,11,.96);
  border-top:1px solid var(--linea-viva);
}
.barra-fija .btn{min-height:50px;padding:0 12px;font-size:var(--t-xs)}
@media (min-width:900px){.barra-fija{display:none}}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--linea)}
.hero__fondo{
  position:absolute;inset:0;z-index:-2;
  background:#0D0D10 url('img/07-1600.webp') center/cover no-repeat;
}
.hero__video{width:100%;height:100%;object-fit:cover;transform:scale(1.03)}
.hero__velo{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(9,9,11,.78) 0%,rgba(9,9,11,.82) 48%,rgba(9,9,11,.96) 100%),
    linear-gradient(90deg,rgba(9,9,11,.86) 0%,rgba(9,9,11,.42) 68%,rgba(9,9,11,.6) 100%);
}
.hero__cuerpo{padding:52px 0 44px}
.hero__kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:var(--t-xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--naranja);margin-bottom:18px;
}
.hero__kicker::before{content:"";width:26px;height:2px;background:var(--naranja)}
.hero h1{font-size:var(--t-hero);max-width:15ch}
.hero h1 em{font-style:normal;color:var(--naranja)}
.hero__bajada{
  margin-top:20px;max-width:34ch;
  font-size:var(--t-md);line-height:1.45;color:var(--texto);
  border-left:1px solid var(--linea-viva);padding-left:16px;
}
.hero__acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.hero__acciones .btn{flex:1 1 220px}

/* Estado del taller: el texto por defecto ya es correcto; el JS solo lo afina
   con la hora de Caracas. Nunca hay un hueco esperando al script. */
.estado{
  display:flex;align-items:center;gap:11px;margin-top:26px;
  font-size:var(--t-sm);color:var(--acero);letter-spacing:.02em;
}
.estado__luz{
  width:9px;height:9px;flex:none;border-radius:50%;
  background:var(--acero);box-shadow:0 0 0 4px rgba(161,161,170,.16);
}
.estado[data-abierto="si"] .estado__luz{background:var(--naranja);box-shadow:0 0 0 4px rgba(234,88,12,.22)}
.estado b{color:var(--texto);font-weight:600}

@media (min-width:900px){
  .hero__cuerpo{padding:104px 0 92px;min-height:min(82vh,720px);display:flex;flex-direction:column;justify-content:center}
  .hero__acciones .btn{flex:0 0 auto}
}

/* ── Franja de datos ─────────────────────────────────────────────────────── */
.franja{border-bottom:1px solid var(--linea);background:var(--zinc)}
.franja__grid{display:grid;gap:0}
.franja__celda{
  padding:20px 0;border-bottom:1px solid var(--linea);
}
.franja__celda:last-child{border-bottom:0}
.franja__rotulo{
  font-size:var(--t-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--naranja);margin-bottom:5px;
}
.franja__dato{font-size:var(--t-md);line-height:1.3;font-weight:600}
.franja__dato a{text-decoration:none;border-bottom:1px solid var(--linea-viva);padding-bottom:1px;
  transition:border-color 180ms var(--ease-out-quart),color 180ms var(--ease-out-quart)}
@media (hover:hover) and (pointer:fine){
  .franja__dato a:hover{color:var(--naranja);border-color:var(--naranja)}
}
@media (min-width:760px){
  .franja__grid{grid-template-columns:repeat(3,1fr);gap:0}
  .franja__celda{padding:26px 28px;border-bottom:0;border-left:1px solid var(--linea)}
  .franja__celda:first-child{padding-left:0;border-left:0}
}

/* ── Encabezado de sección ───────────────────────────────────────────────── */
.seccion{padding:64px 0}
.seccion__cabeza{margin-bottom:34px}
.seccion h2{font-size:var(--t-xl);max-width:18ch}
.seccion__nota{margin-top:14px;color:var(--acero);max-width:56ch}
@media (min-width:900px){.seccion{padding:96px 0}}

/* ── EL PISO: la barra que se carga (momento firma) ──────────────────────── */
.piso{border-bottom:1px solid var(--linea)}
.piso__riel{
  position:sticky;top:var(--top-fijo);z-index:var(--z-riel);
  padding:14px 0 22px;
  background:linear-gradient(180deg,var(--negro) 0%,var(--negro) 58%,rgba(9,9,11,0) 100%);
}
.barra-svg{width:100%;height:auto}

.barra-svg .metal{fill:var(--linea-viva)}
.barra-svg .collar{fill:#52525B}
.barra-svg .moleteado{stroke:#71717A;stroke-width:1.5;opacity:.55}

/* Los lados giran según cuántos discos hay puestos: la barra se dobla.
   `--carga` la escribe el JS; sin JS la barra queda recta y correcta. */
.lado{
  transform-box:view-box;
  transition:transform 520ms var(--ease-out-expo);
}
.lado--izq{transform-origin:250px 85px;transform:rotate(calc(var(--carga,0) * -.5deg))}
.lado--der{transform-origin:750px 85px;transform:rotate(calc(var(--carga,0) * .5deg))}

/* Estado por defecto = barra CARGADA. Sin JS, sin observador o en un navegador
   headless la ilustración se ve completa y correcta; el guion solo la descarga
   (la sección está bajo el pliegue, no hay parpadeo) para que se vuelva a
   cargar al bajar. La animación mejora un estado ya visible, nunca lo crea. */
.plato{
  fill:#27272A;stroke:var(--linea-viva);stroke-width:1.5;
  transform-box:fill-box;transform-origin:center;
  transition:transform 460ms var(--ease-out-quart),
             opacity 300ms var(--ease-out-quart),
             fill 260ms var(--ease-out-quart),
             stroke 260ms var(--ease-out-quart);
  transition-delay:calc(var(--i) * 35ms);
}
.lado--izq{--dir:-1}
.lado--der{--dir:1}
.piso--cargable .plato:not([data-on]){
  transform:translateX(calc(var(--dir) * 40px)) scaleY(.55);
  opacity:.28;
}
.plato[data-on]{fill:var(--naranja);stroke:#F97316}

.servicios{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.servicio{
  position:relative;
  display:grid;gap:6px;
  padding:24px 0 24px 20px;
  border-bottom:1px solid var(--linea);
  transition:background-color 220ms var(--ease-out-quart);
}
.servicio::before{
  content:"";position:absolute;left:0;top:24px;bottom:24px;width:3px;
  background:var(--linea-viva);
  transform:scaleY(.35);transform-origin:top;
  transition:transform 380ms var(--ease-out-expo),background-color 280ms var(--ease-out-quart);
}
.servicio--activo::before{background:var(--naranja);transform:scaleY(1)}
.servicio__nombre{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:var(--t-lg);line-height:1;letter-spacing:0;
  transition:transform 200ms var(--ease-out-quart),color 200ms var(--ease-out-quart);
}
.servicio__detalle{color:var(--acero);max-width:58ch}
@media (hover:hover) and (pointer:fine){
  .servicio:hover{background:rgba(250,250,250,.028)}
  .servicio:hover .servicio__nombre{transform:translateX(7px);color:var(--naranja)}
  .servicio:hover::before{background:var(--naranja);transform:scaleY(1)}
}
@media (min-width:760px){
  .servicio{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:28px;align-items:baseline;padding-left:26px}
}

.piso__foto{margin-top:38px;border:1px solid var(--linea)}
.piso__foto img{width:100%;height:auto}
.piso__pie{
  padding:11px 14px;border-top:1px solid var(--linea);background:var(--zinc);
  font-size:var(--t-xs);color:var(--acero);letter-spacing:.03em;
}

/* ── Banda "para quién" ──────────────────────────────────────────────────── */
.banda{position:relative;isolation:isolate;border-bottom:1px solid var(--linea);overflow:hidden}
.banda__foto{position:absolute;inset:0;z-index:-2}
.banda__foto img{width:100%;height:100%;object-fit:cover;object-position:center 32%}
.banda__velo{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(9,9,11,.95) 0%,rgba(9,9,11,.88) 46%,rgba(9,9,11,.66) 100%);
}
.banda__cuerpo{padding:72px 0}
.banda h2{font-size:var(--t-xl);max-width:16ch}
.banda__cita{
  margin-top:22px;max-width:40ch;font-size:var(--t-md);line-height:1.5;
}
.banda__extra{margin-top:18px;max-width:46ch;color:var(--acero)}
@media (min-width:900px){.banda__cuerpo{padding:110px 0}}

/* ── Método: placas de acero ─────────────────────────────────────────────── */
.placas{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea)}
.placa{background:var(--zinc);padding:28px 24px 32px}
.placa__marca{width:34px;height:3px;background:var(--naranja);margin-bottom:18px}
.placa h3{font-size:var(--t-lg);margin-bottom:11px}
.placa p{color:var(--acero)}
@media (min-width:860px){.placas{grid-template-columns:repeat(3,1fr)}}

.metodo__cierre{
  margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:18px;
  padding-top:26px;border-top:1px solid var(--linea);
}
.metodo__cierre p{color:var(--acero);max-width:46ch}

/* ── Horario ─────────────────────────────────────────────────────────────── */
.horario__caja{border:1px solid var(--linea);margin:0}
.horario__caja dt,.horario__caja dd{margin:0}
.dia{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:13px 18px;border-bottom:1px solid var(--linea);
  font-variant-numeric:tabular-nums;
}
.dia:last-child{border-bottom:0}
.dia__nombre{font-weight:600;letter-spacing:.02em}
.dia__horas{color:var(--acero);font-size:var(--t-sm);text-align:right}
.dia[data-cerrado]{color:var(--acero)}
.dia[data-hoy]{background:var(--zinc)}
.dia[data-hoy] .dia__nombre{color:var(--naranja)}
.dia[data-hoy] .dia__horas{color:var(--texto)}

.ubicacion{margin-top:30px}
.ubicacion h3{font-size:var(--t-lg);margin-bottom:12px}
.ubicacion p{color:var(--acero);max-width:44ch}
.ubicacion .btn{margin-top:20px}
@media (min-width:860px){
  .horario__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:start}
  .ubicacion{margin-top:0}
}

/* ── Cierre ──────────────────────────────────────────────────────────────── */
.cierre{background:var(--naranja);color:var(--negro);padding:64px 0}
.cierre h2{font-size:var(--t-xl);max-width:16ch;color:var(--negro)}
.cierre p{margin-top:18px;max-width:44ch;color:#2A1206}
.cierre__acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.cierre__acciones .btn{flex:1 1 230px}
.cierre .btn--contorno{background:transparent;color:var(--negro);border-color:rgba(9,9,11,.55)}
@media (hover:hover) and (pointer:fine){
  .cierre .btn--contorno:hover{background:rgba(9,9,11,.1);border-color:var(--negro)}
}
@media (min-width:900px){
  .cierre{padding:92px 0}
  .cierre__acciones .btn{flex:0 0 auto}
}

/* ── Pie ─────────────────────────────────────────────────────────────────── */
.pie{padding:44px 0 40px;border-top:1px solid var(--linea);font-size:var(--t-sm)}
.pie__grid{display:grid;gap:26px}
.pie__marca{font-family:var(--display);font-weight:800;font-size:1.6rem;text-transform:uppercase;line-height:1}
.pie p,.pie li{color:var(--acero)}
.pie ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.pie a{text-decoration:none;border-bottom:1px solid var(--linea-viva);
  transition:color 180ms var(--ease-out-quart),border-color 180ms var(--ease-out-quart)}
@media (hover:hover) and (pointer:fine){
  .pie a:hover{color:var(--naranja);border-color:var(--naranja)}
}
.pie__legal{
  margin-top:30px;padding-top:20px;border-top:1px solid var(--linea);
  color:var(--acero);font-size:var(--t-xs);
}
@media (min-width:760px){.pie__grid{grid-template-columns:1.2fr 1fr 1fr}}

/* ── Movimiento reducido: se conserva el estado final, se quita el viaje ─── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:1ms !important;
    transition-delay:0ms !important;
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
  }
  .plato{transform:none;opacity:1}
  .lado{transform:none}
  .hero__video{display:none}
}