/* Gimnasio Bodyform — RDW Novatech Web Studio, nov-2026 */
:root{
  --crema:#F5EFE6;
  --arena:#E7DCCB;
  --tinta:#1A1814;
  --gris:#5E574D;
  --naranja:#EC6A1E;
  --naranja-osc:#B4470B;
  --blanco:#FFFCF7;
  --radio:22px;
  --disp:"Archivo", "Arial Narrow", system-ui, sans-serif;
  --txt:"Atkinson Hyperlegible", system-ui, sans-serif;
  --mono:"Space Mono", ui-monospace, monospace;
  --pad:clamp(20px, 5vw, 72px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--crema);color:var(--tinta);font:400 17px/1.6 var(--txt);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--disp);font-variation-settings:"wdth" 100;line-height:1;letter-spacing:-.02em;margin:0;text-wrap:balance}
h2{font-size:clamp(34px,5.4vw,72px);font-weight:850}
h2 em,h1 em{font-style:normal;color:var(--naranja)}
h3{font-size:22px;font-weight:800;letter-spacing:-.01em}
p{text-wrap:pretty}
.mono{font:700 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--naranja-osc);margin:0 0 18px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.saltar{position:absolute;left:-999px;top:8px;background:var(--tinta);color:var(--crema);padding:10px 14px;border-radius:8px;z-index:99}
.saltar:focus{left:8px}
:focus-visible{outline:3px solid var(--naranja);outline-offset:3px;border-radius:6px}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;font:700 16px/1 var(--txt);text-decoration:none;border:2px solid var(--tinta);transition:transform .25s, background .25s, color .25s}
.btn-wa{background:var(--tinta);color:var(--crema)}
.btn-wa:hover{background:var(--naranja);border-color:var(--naranja);color:var(--tinta)}
.btn-linea{background:transparent}
.btn-linea:hover{background:var(--tinta);color:var(--crema)}
.btn:active{transform:scale(.97)}
.btn-sm{min-height:42px;padding:0 18px;font-size:14px}

/* Barra */
.barra{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:calc(12px + env(safe-area-inset-top)) max(var(--pad), env(safe-area-inset-right)) 12px max(var(--pad), env(safe-area-inset-left));transition:background .3s, box-shadow .3s}
.barra.solida{background:rgba(245,239,230,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(26,24,20,.08)}
.marca{text-decoration:none;font-family:var(--disp);font-size:22px;letter-spacing:-.02em;line-height:1}
.marca-body{font-weight:900;font-variation-settings:"wdth" 125}
.marca-form{font-weight:500;font-variation-settings:"wdth" 70;color:var(--naranja-osc)}
.menu{display:none;gap:28px;font-size:15px}
.menu a{text-decoration:none;position:relative}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--naranja);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.menu a:hover::after{transform:scaleX(1)}
@media (min-width:900px){.menu{display:flex}}

/* Hero */
.hero{min-height:100svh;display:grid;gap:36px;align-items:center;padding:calc(110px + env(safe-area-inset-top)) var(--pad) 56px}
@media (min-width:900px){.hero{grid-template-columns:1.1fr .9fr;gap:56px}}
.etiqueta{display:inline-flex;align-items:center;gap:10px;font:700 13px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;background:var(--blanco);padding:10px 14px;border-radius:999px;margin:0 0 26px;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.punto{width:9px;height:9px;border-radius:50%;background:var(--naranja);box-shadow:0 0 0 0 rgba(236,106,30,.6);animation:latido 2s infinite}
.punto.cerrado{background:#9b948a;animation:none}
@keyframes latido{70%{box-shadow:0 0 0 10px rgba(236,106,30,0)}100%{box-shadow:0 0 0 0 rgba(236,106,30,0)}}
.titular{font-size:clamp(46px,15vw,150px);font-weight:900;line-height:.86;letter-spacing:-.035em;margin-bottom:28px}
.estira{display:block;white-space:nowrap;font-variation-settings:"wdth" calc(var(--w,100) + var(--s,0));will-change:font-variation-settings}
.hero-lead{max-width:34em;font-size:clamp(17px,1.5vw,19px);color:var(--gris);margin:0 0 30px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-foto{position:relative;justify-self:center;width:min(100%,560px)}
.arco{border-radius:300px 300px var(--radio) var(--radio);overflow:hidden;aspect-ratio:4/5;background:var(--arena);clip-path:inset(0 0 0 0 round 300px 300px 22px 22px)}
.arco img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;transform-origin:50% 60%}
.disco{position:absolute;left:-14px;bottom:-26px;width:clamp(128px,15vw,170px);aspect-ratio:1}
.disco svg{width:100%;height:100%}
.disco-borde{fill:var(--tinta)}
.disco-aro{fill:none;stroke:#3a3631;stroke-width:2}
.disco-hueco{fill:var(--crema)}
.disco-txt{fill:var(--crema);font:700 11.5px var(--mono);letter-spacing:.14em}
.disco-nota{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:var(--crema);pointer-events:none}
.disco-nota b{font:900 40px/1 var(--disp);font-variation-settings:"wdth" 110;color:var(--naranja);margin-top:-6px}
.disco-nota span{font:700 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;margin-top:4px}
@media (min-width:900px){.disco{left:-60px}}

/* Franja */
.franja{display:grid;gap:2px;background:var(--tinta);color:var(--crema);padding:0}
.franja p{margin:0;padding:18px var(--pad);font:700 15px/1.3 var(--mono);display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #2d2a25}
.franja span{color:var(--naranja);text-transform:uppercase;letter-spacing:.08em}
@media (min-width:900px){.franja{grid-template-columns:repeat(3,1fr)}.franja p{border-bottom:0;border-right:1px solid #2d2a25;justify-content:flex-start;gap:18px}}

/* Secciones */
section{position:relative}
.sec-cab{max-width:900px;margin-bottom:48px}
.sec-lead{color:var(--gris);font-size:18px;max-width:36em;margin:22px 0 0}
.espacios,.horas{padding:clamp(80px,11vw,150px) var(--pad)}

/* Espacios */
.lista-espacios{list-style:none;margin:0;padding:0;display:grid;gap:56px}
.esp{display:grid;gap:22px;align-items:end}
.esp .num{font:700 13px/1 var(--mono);color:var(--naranja-osc);display:block;margin-bottom:12px}
.esp p{color:var(--gris);margin:12px 0 0;max-width:30em}
.corte{margin:0;border-radius:var(--radio);overflow:hidden;aspect-ratio:3/2;background:var(--arena)}
.corte img{width:100%;height:100%;object-fit:cover}
@media (min-width:900px){
  .lista-espacios{grid-template-columns:repeat(12,1fr);gap:80px 32px}
  .esp:nth-child(1){grid-column:1 / span 7}
  .esp:nth-child(2){grid-column:9 / span 4;margin-top:160px}
  .esp:nth-child(3){grid-column:2 / span 4}
  .esp:nth-child(4){grid-column:7 / span 6;margin-top:-120px}
  .esp:nth-child(2) .corte,.esp:nth-child(3) .corte{aspect-ratio:4/5}
}

/* Cycling */
.cycling{background:var(--tinta);color:var(--crema);padding:clamp(80px,11vw,150px) var(--pad);display:grid;gap:40px;align-items:center;overflow:hidden}
@media (min-width:900px){.cycling{grid-template-columns:.9fr 1.1fr;gap:80px}}
.cycling .mono{color:var(--naranja)}
.cycling .sec-lead{color:#c9c0b2}
.cyc-rueda{width:min(78vw,480px);justify-self:center;aspect-ratio:1}
.cyc-rueda svg{width:100%;height:100%;overflow:visible}
.llanta{fill:none;stroke:var(--naranja);stroke-width:9}
.llanta2{fill:none;stroke:#3a3631;stroke-width:2}
.radios line{stroke:#8f877c;stroke-width:1.1}
.buje{fill:var(--naranja)}
#rueda .giro{transform-origin:100px 100px}
.tabla-cyc{margin:34px 0 34px;border-top:1px solid #3a3631}
.tabla-cyc .fila{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:10px;padding:14px 4px;border-bottom:1px solid #3a3631;font:400 15px/1.3 var(--mono)}
.tabla-cyc .fila span:first-child{font-family:var(--txt);font-weight:700;font-size:16px}
.tabla-cyc .fila.hoy{background:var(--naranja);color:var(--tinta);border-radius:10px;border-color:transparent;padding-left:12px}
.cycling .btn-wa{background:var(--naranja);border-color:var(--naranja);color:var(--tinta)}
.cycling .btn-wa:hover{background:var(--crema);border-color:var(--crema)}

/* Horas */
.dias{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.dias button{font:700 14px/1 var(--mono);border:2px solid var(--tinta);background:transparent;color:var(--tinta);border-radius:999px;padding:12px 16px;cursor:pointer;min-width:58px}
.dias button[aria-selected="true"]{background:var(--tinta);color:var(--crema)}
.grafica{display:flex;align-items:flex-end;gap:clamp(3px,.8vw,10px);height:clamp(220px,32vw,340px);padding-bottom:30px;border-bottom:2px solid var(--tinta);position:relative}
.barra-h{flex:1;max-width:96px;position:relative;height:100%;display:flex;align-items:flex-end}
.barra-h i{display:block;width:100%;height:var(--v);background:var(--arena);border-radius:8px 8px 3px 3px;transform-origin:bottom;transition:height .6s cubic-bezier(.2,.8,.2,1), background .3s}
.barra-h.baja i{background:#f3b48c}
.barra-h.alta i{background:var(--naranja)}
.barra-h.ahora i{outline:3px solid var(--tinta);outline-offset:2px}
.barra-h small{position:absolute;bottom:-26px;left:50%;transform:translateX(-50%);font:400 11px/1 var(--mono);color:var(--gris);white-space:nowrap}
.barra-h:nth-child(even) small{visibility:hidden}
@media (min-width:700px){.barra-h:nth-child(even) small{visibility:visible}}
.nota-graf{margin:42px 0 0;font-size:17px;max-width:40em}
.nota-graf b{color:var(--naranja-osc)}
.leyenda{font:400 12px var(--mono);color:var(--gris)}

/* Opiniones */
.opiniones{background:var(--arena);padding:clamp(80px,11vw,150px) var(--pad)}
.nota-grande{display:flex;align-items:baseline;gap:16px;margin-bottom:40px}
.nota-grande b{font:900 clamp(90px,14vw,190px)/.8 var(--disp);font-variation-settings:"wdth" 120;letter-spacing:-.04em}
.nota-grande span{font:700 14px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--gris)}
.opiniones blockquote{margin:0 0 30px;max-width:900px}
.opiniones blockquote p{font:800 clamp(24px,3.2vw,40px)/1.15 var(--disp);letter-spacing:-.015em;margin:0}
.opiniones blockquote:nth-of-type(2){margin-left:auto;text-align:right}
mark{background:linear-gradient(transparent 58%, var(--naranja) 58%, var(--naranja) 92%, transparent 92%);background-size:var(--m,100%) 100%;background-repeat:no-repeat;color:inherit;padding:0 .08em}
.fuente{font:400 13px var(--mono);color:var(--gris);margin:30px 0 0}

/* Planes */
.planes{display:grid;gap:0;background:var(--blanco)}
@media (min-width:900px){.planes{grid-template-columns:1fr 1fr}}
.planes-foto{min-height:320px;overflow:hidden}
.planes-foto img{width:100%;height:100%;object-fit:cover}
.planes-texto{padding:clamp(56px,8vw,110px) var(--pad);align-self:center}
.planes-texto p:not(.mono){color:var(--gris);max-width:30em;margin:22px 0 30px}

/* Visitanos */
.visitanos{padding:clamp(80px,11vw,150px) var(--pad);display:grid;gap:48px}
@media (min-width:900px){.visitanos{grid-template-columns:1fr 1fr;gap:72px;align-items:start}}
.visitanos h2{font-size:clamp(32px,4.4vw,60px)}
.reloj{display:flex;align-items:center;gap:18px;margin:34px 0 22px}
.reloj svg{width:96px;height:96px;flex:none}
.r-fondo{fill:var(--blanco);stroke:var(--arena);stroke-width:10}
.r-abierto{fill:none;stroke:var(--naranja);stroke-width:10;stroke-linecap:round}
.r-aguja{stroke:var(--tinta);stroke-width:3;stroke-linecap:round}
.r-centro{fill:var(--tinta)}
.estado{font:700 18px/1.3 var(--txt);margin:0}
.tabla-hor{width:100%;border-collapse:collapse;font-size:16px}
.tabla-hor th,.tabla-hor td{text-align:left;padding:11px 8px;border-bottom:1px solid var(--arena)}
.tabla-hor td{font-family:var(--mono);font-size:14px;text-align:right}
.tabla-hor tr.hoy{background:var(--blanco)}
.tabla-hor tr.hoy th::after{content:" · hoy";color:var(--naranja-osc);font:700 12px var(--mono)}
.contacto{margin-top:26px;color:var(--gris)}
.contacto a{color:var(--tinta);font-weight:700}
.vis-mapa{display:grid;gap:16px}
.vis-mapa iframe{width:100%;aspect-ratio:4/3;border:0;border-radius:var(--radio);filter:saturate(.7) contrast(1.05);background:var(--arena)}

/* Pie */
.pie{background:var(--tinta);color:#c9c0b2;padding:56px var(--pad) calc(110px + env(safe-area-inset-bottom));text-align:center;font-size:14px}
.pie-marca{font-family:var(--disp);font-size:clamp(56px,12vw,150px);color:var(--crema);margin:0 0 12px;line-height:.9;letter-spacing:-.03em}
.pie-marca .marca-form{color:var(--naranja)}
.pie p{margin:6px 0}
.pie-cred{margin-top:22px!important;font-family:var(--mono);font-size:12px}

/* Burbuja */
.burbuja{position:fixed;right:max(18px, env(safe-area-inset-right));bottom:max(18px, env(safe-area-inset-bottom));z-index:60;width:62px;height:62px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 10px 28px rgba(0,0,0,.25);transition:transform .25s}
.burbuja svg{width:32px;height:32px;fill:#fff}
.burbuja:hover{transform:scale(1.07)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}