@font-face { font-family: 'Anton'; src: url('../assets/fuentes/anton-latin-400-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 400; src: url('../assets/fuentes/hanken-grotesk-latin-400-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 600; src: url('../assets/fuentes/hanken-grotesk-latin-600-normal.woff2') format('woff2'); font-display: swap; }

:root {
  --negro: #0a0a0a;
  --negro-2: #161616;
  --negro-3: #232323;
  --hueso: #ecece9;
  --gris: #a5a5a2;
  --brasa: #e5481f;
  --margen: clamp(16px, 2.2vw, 32px);
  --seccion: clamp(88px, 11vw, 168px);
  --titulo: clamp(4rem, 11vw, 11rem);
  --medio: clamp(1.75rem, 3.2vw, 3rem);
  --display: 'Anton', Impact, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--negro); }
body { margin: 0; background: var(--negro); color: var(--hueso); font: 400 1.0625rem/1.5 'Hanken Grotesk', system-ui, sans-serif; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
figure img { filter: grayscale(1) contrast(1.06); }
h1, h2, h3, p, ul, figure, dl, dd, address { margin: 0; padding: 0; }
ul { list-style: none; }
address { font-style: normal; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
h1, h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: .95; }
h2 { font-size: var(--titulo); }
h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; line-height: 1; }
:focus-visible { outline: 3px solid var(--brasa); outline-offset: 3px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: fixed; left: 12px; top: -80px; z-index: 200; background: var(--brasa); color: var(--negro); padding: 10px 16px; }
.saltar:focus { top: 12px; }

.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 10px 26px; font-weight: 600; text-decoration: none; text-transform: uppercase; letter-spacing: .04em; font-size: .9375rem; transition: background-color .15s, color .15s; }
.boton:active { transform: translateY(1px); }
.boton-brasa { background: var(--brasa); color: var(--negro); }
.boton-brasa:hover { background: var(--hueso); }
.boton-linea { background: var(--negro-3); color: var(--hueso); }
.boton-linea:hover { background: var(--hueso); color: var(--negro); }
.boton-negro { background: var(--negro); color: var(--hueso); }
.boton-negro:hover { background: var(--hueso); color: var(--negro); }

/* Barra */
.barra { position: fixed; inset: 0 0 auto; z-index: 50; height: 60px; display: flex; align-items: center; gap: 24px; padding: 0 var(--margen); background: var(--negro); }
.barra-marca { font: 400 1.75rem/1 var(--display); text-transform: uppercase; text-decoration: none; letter-spacing: .02em; }
.barra-nav { display: flex; gap: clamp(14px, 2vw, 30px); margin-left: auto; font-weight: 600; }
.barra-nav a { text-decoration: none; color: var(--gris); transition: color .15s; }
.barra-nav a:hover { color: var(--hueso); }
.barra-boton { min-height: 40px; padding: 6px 16px; }

/* Portada */
.portada { position: relative; height: 100svh; min-height: 560px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--margen); }
.portada-foto { position: absolute; inset: 0; }
.portada-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; filter: grayscale(1) contrast(1.1) brightness(.62); }
.portada-texto { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.portada-frase { font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.2; font-weight: 600; max-width: 26ch; }
.estado { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; }
.estado::before { content: ''; width: 10px; height: 10px; background: var(--gris); flex: none; }
.estado.abierto::before { background: var(--brasa); }
h1 { position: relative; }
.marca { display: block; font-size: 25vw; line-height: .96; letter-spacing: -0.005em; margin: 0 0 -0.02em; white-space: nowrap; text-align: center; }

/* Frases */
.frase { font: 400 clamp(3rem, 10vw, 10rem)/1 var(--display); text-transform: uppercase; padding: clamp(80px, 12vw, 180px) var(--margen); max-width: 100%; }
.palabra { display: inline-block; }

/* Cabezas de sección */
.cabeza { display: grid; grid-template-columns: 1fr 1fr; gap: 16px var(--margen); align-items: end; margin-bottom: clamp(28px, 4vw, 56px); }
.cabeza p, .bajada { font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.3; max-width: 38ch; }
.nota { color: var(--gris); margin-top: 16px; }

/* Planes */
.planes { padding: var(--seccion) var(--margen); background: var(--negro-2); }
.lista-planes { display: grid; gap: 4px; }
.plan { display: grid; grid-template-columns: 1.1fr 1.1fr 1.6fr auto; align-items: center; gap: 24px; padding: clamp(14px, 1.6vw, 22px) 20px; background: var(--negro); }
.plan h3 { font-size: clamp(2.5rem, 4.6vw, 4.5rem); }
.plan-mes strong { font: 400 clamp(2rem, 3.2vw, 3.25rem)/1 var(--display); display: block; font-variant-numeric: tabular-nums; }
.plan-mes span { color: var(--gris); }
.plan-fuerte { background: var(--brasa); color: var(--negro); }
.plan-fuerte .plan-mes span { color: var(--negro); }
.plan .boton { min-width: 120px; }

/* Máquinas */
.maquinas { display: grid; grid-template-columns: 5fr 7fr; align-items: stretch; }
.foto-alta { overflow: hidden; min-height: 100%; }
.foto-alta img { width: 100%; height: 100%; object-fit: cover; }
.maquinas-cuerpo { padding: var(--seccion) var(--margen); }
.maquinas-cuerpo .bajada { margin: 14px 0 32px; }
.inventario { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.inventario li { display: flex; align-items: center; gap: 16px; padding: 10px 14px; background: var(--negro-2); font-weight: 600; line-height: 1.15; }
.inventario strong { font: 400 2.5rem/1 var(--display); min-width: 1.2em; color: var(--brasa); font-variant-numeric: tabular-nums; }

/* Pesos */
.pesos { padding: var(--seccion) var(--margen) 0; }
.pesos-grande { font-size: clamp(3.5rem, 13.2vw, 15rem); margin-bottom: clamp(24px, 3vw, 44px); white-space: nowrap; }
.pesos-grande span { color: var(--brasa); }
.pesos-cuerpo { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; align-items: stretch; }
.pesos-cuerpo figure { overflow: hidden; }
.pesos-cuerpo figure img { width: 100%; height: 100%; object-fit: cover; }
.pesos-lista { display: grid; gap: 4px; }
.pesos-lista div { padding: 12px 16px; background: var(--negro-2); }
.pesos-lista dt { font: 400 1.5rem/1.1 var(--display); text-transform: uppercase; }
.pesos-lista dd { color: var(--gris); }

/* Clases */
.clases { padding: var(--seccion) var(--margen); background: var(--negro-2); }
.filtros, .dias { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
.dias { display: none; }
.ficha { min-height: 44px; padding: 8px 16px; background: var(--negro-3); font-weight: 600; transition: background-color .12s, color .12s; }
.ficha:hover { background: var(--hueso); color: var(--negro); }
.ficha[aria-pressed="true"] { background: var(--brasa); color: var(--negro); }
.tabla { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; margin: 0 -4px; }
.tabla th { font-weight: 600; text-align: left; padding: 8px 10px; color: var(--gris); }
.tabla .col-hora { width: 76px; font: 400 1.375rem/1 var(--display); color: var(--hueso); padding-left: 0; font-variant-numeric: tabular-nums; }
.tabla td { background: var(--negro); padding: 12px; vertical-align: top; transition: opacity .15s, background-color .15s; }
.tabla td.vacia { background: transparent; }
.tabla td.apagada { opacity: .18; }
.tabla td strong { display: block; font: 400 1.25rem/1.1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.tabla td span { color: var(--gris); font-size: 1rem; }

/* Equipo */
.equipo { padding: var(--seccion) var(--margen); }
.personas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.personas img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 20%; filter: grayscale(1) contrast(1.08); margin-bottom: 12px; }
.personas h3 { font-size: clamp(1.5rem, 2.2vw, 2.125rem); margin-bottom: 4px; }
.personas p { color: var(--gris); padding-right: 12px; }

/* Coach */
.coach { background: var(--brasa); color: var(--negro); display: grid; grid-template-columns: 1fr 1fr; }
.coach figure { overflow: hidden; }
.coach figure img { width: 100%; height: 100%; object-fit: cover; }
.coach-cuerpo { padding: var(--seccion) var(--margen); display: grid; gap: 16px; align-content: center; justify-items: start; }
.coach-cuerpo h2 { font-size: clamp(3.5rem, 7.4vw, 8rem); }
.precios-coach { display: grid; gap: 4px; width: 100%; margin: 8px 0; }
.precios-coach li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 8px 12px; background: var(--negro); color: var(--hueso); font-weight: 600; }
.precios-coach strong { font: 400 1.75rem/1 var(--display); font-variant-numeric: tabular-nums; }

/* Tienda */
.tienda { padding: 0 var(--margen) var(--seccion); }
.tienda-cuerpo { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px var(--margen); align-items: start; }
.tienda h3 { font-size: var(--medio); margin-bottom: 12px; }
.precios { display: grid; gap: 4px; }
.precios li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 12px; background: var(--negro-2); }
.precios strong { font: 400 1.375rem/1 var(--display); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tienda figure { overflow: hidden; align-self: stretch; }
.tienda figure img { width: 100%; height: 100%; object-fit: cover; }

/* Dónde */
.donde { padding: var(--seccion) var(--margen); background: var(--negro-2); display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.donde-texto { display: grid; gap: 16px; }
.donde address { font: 400 var(--medio)/1.08 var(--display); text-transform: uppercase; }
.horarios { width: 100%; border-collapse: collapse; }
.horarios th { text-align: left; font-weight: 400; padding: 8px 10px; }
.horarios td { text-align: right; padding: 8px 10px; font-variant-numeric: tabular-nums; }
.horarios tr.hoy { background: var(--brasa); color: var(--negro); font-weight: 600; }
.llegar { display: grid; gap: 8px; }
.llegar dt { font-weight: 600; }
.llegar dd { color: var(--gris); }
.contacto a { font-weight: 600; text-underline-offset: 4px; }
.mapa svg { width: 100%; height: auto; }
.mapa-texto text { font-size: 22px; }

/* Pie */
.pie { padding: var(--seccion) var(--margen) 20px; overflow: hidden; }
.frase-pie { font: 400 var(--medio)/1 var(--display); text-transform: uppercase; color: var(--gris); }
.pie-marca { font: 400 25vw/.96 var(--display); text-transform: uppercase; text-align: center; white-space: nowrap; letter-spacing: -0.005em; }
.pie-legal { color: var(--gris); font-size: 1rem; max-width: 80ch; margin-top: 16px; }

@media (max-width: 1000px) {
  .barra-nav { gap: 12px; font-size: .9375rem; }
  .plan { grid-template-columns: 1fr 1fr auto; }
  .plan-nota { grid-column: 1 / -1; grid-row: 2; }
  .plan .boton { grid-column: 3; grid-row: 1; }
  .personas { grid-template-columns: 1fr 1fr; gap: 20px 4px; }
  .tienda-cuerpo { grid-template-columns: 1fr 1fr; }
  .tienda figure { grid-column: 1 / -1; margin-top: 20px; }
  .pesos-cuerpo { grid-template-columns: 1fr 1fr; }
  .pesos-lista { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 760px) {
  .barra-nav { display: none; }
  .barra-boton { margin-left: auto; }
  .marca, .pie-marca { font-size: 44vw; white-space: normal; line-height: .98; }
  .marca span, .pie-marca span { display: block; }
  .portada-texto { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cabeza { grid-template-columns: 1fr; }
  .plan { grid-template-columns: 1fr auto; gap: 8px 12px; padding: 14px; }
  .plan h3 { grid-column: 1; }
  .plan-mes { grid-column: 1; grid-row: 2; }
  .plan-nota { grid-column: 1 / -1; grid-row: 3; }
  .plan .boton { grid-column: 2; grid-row: 1 / span 2; }
  .maquinas, .coach, .donde { grid-template-columns: 1fr; }
  .foto-alta { min-height: 0; aspect-ratio: 3 / 2; }
  .coach figure { aspect-ratio: 3 / 2; }
  .inventario { grid-template-columns: 1fr; }
  .pesos-grande { white-space: normal; font-size: 21vw; }
  .tienda-cuerpo { grid-template-columns: 1fr; gap: 24px; }
  .dias { display: flex; }
  .tabla { table-layout: auto; }
  .tabla th[data-d], .tabla td[data-d] { display: none; }
  .tabla thead { display: none; }
  .tabla[data-ver="1"] [data-d="1"], .tabla[data-ver="2"] [data-d="2"], .tabla[data-ver="3"] [data-d="3"],
  .tabla[data-ver="4"] [data-d="4"], .tabla[data-ver="5"] [data-d="5"], .tabla[data-ver="6"] [data-d="6"] { display: table-cell; }
  .mapa-texto text { font-size: 32px; }
}
html.quieto .marca { transform: none; }

/* Solo en la web de Impulso: franja de aviso y mensaje de demostración */
.aviso {
  position: fixed; inset: 0 0 auto; z-index: 60; height: 34px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 0 var(--margen); background: #000; color: #f4f1ea;
  font: 500 14px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
  transition: transform .25s ease;
}
.aviso a { white-space: nowrap; font-weight: 700; color: #ff6a2b; text-decoration: none; }
.aviso a:hover { text-decoration: underline; }
.barra { top: 34px; transition: top .25s ease; }
.sin-aviso .aviso { transform: translateY(-100%); }
.sin-aviso .barra { top: 0; }
.demo-aviso {
  position: fixed; z-index: 300; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: min(440px, calc(100vw - 32px)); padding: 14px 18px;
  background: #ecece9; color: #0a0a0a; font: 500 15px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  transform: translate(-50%, calc(100% + 24px)); opacity: 0; visibility: hidden;
  transition: transform .26s cubic-bezier(.23, 1, .32, 1), opacity .2s ease, visibility .26s;
}
.demo-aviso.visible { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
@media (max-width: 560px) { .aviso { font-size: 13px; } .aviso__largo { display: none; } }