/* =============================================================
   Gym Kas Cardio Sport — Arquetipo 07 · Brutalist Grid
   Blanco + negro + rojo de marca. Sin curvas, sin sombras.
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --bg:      #ffffff;
  --ink:     #0a0a0a;
  --mute:    #5c5c5c;
  --accent:  #E30613;   /* rojo del logo */
  --accent-ink: #b8000d;
  --line:    #0a0a0a;
  --line-inv: rgba(255,255,255,.22);

  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, Consolas, monospace;

  /* Margen lateral; en horizontal crece lo necesario para no quedar bajo el notch */
  --gutter:  max(clamp(1rem, 3vw, 2rem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --header-h: 72px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; font-weight: 400; }
em { font-style: normal; color: var(--accent); }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
* { border-radius: 0 !important; }

/* =============================================================
   3. Utilities
   ============================================================= */
.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: .6rem 1rem; background: var(--ink); color: #fff; font-weight: 600;
}
.skip-link:focus { top: 1rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.kicker {
  font-family: var(--mono); font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
}

/* =============================================================
   4. Components
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  padding: 1rem 1.4rem;
  font-family: var(--mono); font-weight: 600; font-size: .85rem;
  text-transform: uppercase; letter-spacing: .06em;
  border: 2px solid var(--ink);
  transition: none;
}
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-ghost { background: transparent; }

/* =============================================================
   5. Status bar + header
   ============================================================= */
.statusbar {
  display: flex; align-items: center; gap: .7rem;
  padding: calc(.45rem + env(safe-area-inset-top, 0px)) var(--gutter) .45rem;
  background: var(--ink); color: #fff;
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
}
.status-dot { width: 8px; height: 8px; background: #7a7a7a; flex: none; }
.statusbar.is-open .status-dot { background: #22c55e; animation: blink 1.6s steps(2) infinite; }
.statusbar.is-closed .status-dot { background: var(--accent); }
.statusbar-phone { margin-left: auto; white-space: nowrap; }
@keyframes blink { 50% { opacity: .25; } }

.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h);
  padding: 0 var(--gutter);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.brand img { height: 52px; width: auto; }

.nav-toggle {
  font-family: var(--mono); font-weight: 600; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .08em;
  padding: .6rem 1rem; border: 2px solid var(--ink);
}
.nav-toggle[aria-expanded="true"] { background: var(--ink); color: #fff; }

.nav {
  position: absolute; top: 100%; left: 0; right: 0;
  display: none; flex-direction: column;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.nav.is-open { display: flex; }
.nav a {
  display: flex; gap: .8rem; align-items: baseline;
  padding: 1rem var(--gutter);
  border-top: 1px solid var(--line);
  font-family: var(--display); font-size: 1.8rem; text-transform: uppercase; line-height: 1.1;
}
.nav a span { font-family: var(--mono); font-size: .75rem; color: var(--accent); }
.nav .nav-cta { background: var(--accent); color: #fff; }
.no-js .nav { position: static; display: flex; }
.no-js .nav-toggle { display: none; }

/* =============================================================
   6. Hero
   ============================================================= */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}
.hero > * { background: var(--bg); }
.hero-type { padding: clamp(2rem, 6vw, 4rem) var(--gutter) 1.5rem; }
.hero-type .kicker { margin-bottom: 1.2rem; }
.hero-title {
  font-family: var(--display);
  font-size: clamp(3.6rem, 15.5vw, 12.5rem);
  line-height: .88;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.hero-title .line { display: block; }

.hero-photo { position: relative; overflow: hidden; min-height: 280px; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15); }
.hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background: var(--accent); mix-blend-mode: multiply; opacity: .85;
}
.hero-photo figcaption {
  position: absolute; left: 0; bottom: 0; z-index: 1;
  padding: .45rem .8rem; background: var(--ink); color: #fff;
  font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
}

.hero-side { padding: 1.75rem var(--gutter) 2.25rem; display: grid; gap: 1.5rem; align-content: start; }
.hero-lead { font-size: 1.1rem; max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero-stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--line);
}
.hero-stats > div { background: var(--bg); padding: 1.1rem var(--gutter); }
.hero-stats dt { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); }
.hero-stats dd { font-family: var(--display); font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.05; }

/* =============================================================
   7. Marquee
   ============================================================= */
.marquee { overflow: hidden; background: var(--accent); color: #fff; border-bottom: 1px solid var(--line); }
.marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee span {
  font-family: var(--display); font-size: clamp(1.8rem, 5vw, 3.4rem);
  text-transform: uppercase; line-height: 1; padding: .9rem 1.4rem; white-space: nowrap;
}
.marquee span::after { content: "✦"; font-size: .45em; vertical-align: middle; margin-left: 2.8rem; color: var(--ink); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* =============================================================
   8. Blocks
   ============================================================= */
.block { border-bottom: 1px solid var(--line); }
.block-head {
  display: grid; gap: 1rem;
  padding: clamp(3rem, 8vw, 6rem) var(--gutter) clamp(2rem, 5vw, 3.5rem);
}
.block-head h2, .team-text h2, .visit-info h2, .cta h2, .community-title {
  font-family: var(--display);
  font-size: clamp(2.6rem, 8vw, 6.5rem);
  line-height: .92; text-transform: uppercase;
}
.block-intro { max-width: 52ch; font-size: 1.05rem; color: var(--mute); }

/* ----- Activity cards ----- */
.grid-cards {
  display: grid; grid-template-columns: 1fr;
  gap: 1px; background: var(--line); border-top: 1px solid var(--line);
}
.card {
  position: relative; background: var(--bg);
  padding: 0 0 1.6rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.card figure { aspect-ratio: 5 / 4; overflow: hidden; margin-bottom: .9rem; }
.card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.card-num { position: absolute; top: 0; left: 0; z-index: 1; padding: .4rem .7rem; background: var(--ink); color: #fff; font-family: var(--mono); font-size: .75rem; font-weight: 600; }
.card h3, .card p, .card-link { padding: 0 var(--gutter); }
.card h3 { font-family: var(--display); font-size: 1.9rem; line-height: 1.05; text-transform: uppercase; }
.card p { color: var(--mute); max-width: 42ch; }
.card-text { padding-top: 4.5rem; justify-content: flex-end; min-height: 280px; }
.card-accent { background: var(--accent); color: #fff; }
.card-accent p { color: rgba(255,255,255,.88); }
.card-accent .card-num { background: #fff; color: var(--accent); }
.card-link { margin-top: .6rem; font-family: var(--mono); font-weight: 600; text-transform: uppercase; font-size: .85rem; text-decoration: underline; text-underline-offset: 4px; }

/* ----- Dark block (instalaciones) ----- */
.block-dark { background: var(--ink); color: #fff; }
.block-dark .block-intro { color: rgba(255,255,255,.7); }
.zones {
  display: grid; grid-template-columns: 1fr;
  gap: 1px; background: var(--line-inv); border-top: 1px solid var(--line-inv);
}
.zone { background: var(--ink); padding: 2rem var(--gutter); display: grid; gap: .6rem; }
.zone-num { font-family: var(--display); font-size: 4rem; line-height: .9; color: var(--accent); }
.zone h3 { font-family: var(--display); font-size: 1.9rem; text-transform: uppercase; line-height: 1.05; }
.zone p { color: rgba(255,255,255,.72); max-width: 40ch; }

.mosaic {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--line-inv); border-top: 1px solid var(--line-inv);
}
.mosaic figure { overflow: hidden; aspect-ratio: 5 / 4; }
.mosaic .m-a { grid-column: span 2; aspect-ratio: 16 / 10; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }

/* ----- Video (instalaciones) ----- */
.video-block {
  display: grid; grid-template-columns: 1fr;
  gap: 1px; background: var(--line-inv); border-top: 1px solid var(--line-inv);
}
.video-block > * { background: var(--ink); }
.video-text { padding: 2.5rem var(--gutter); display: grid; gap: .8rem; align-content: center; }
.video-text .kicker { color: var(--accent); }
.video-text h3 { font-family: var(--display); font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: .95; text-transform: uppercase; }
.video-text p:last-child { color: rgba(255,255,255,.72); max-width: 36ch; }
.video { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.video img, .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video img { transition: transform .6s var(--ease-out); }
.video-play {
  position: absolute; left: 0; bottom: 0; z-index: 1;
  display: inline-flex; align-items: center; gap: .7rem;
  padding: 1rem 1.4rem; background: var(--accent); color: #fff;
  font-family: var(--mono); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em;
}
.video:focus-visible .video-play { background: #fff; color: var(--ink); }

/* ----- Audience ----- */
.audience {
  display: grid; grid-template-columns: 1fr;
  gap: 1px; background: var(--line); border-top: 1px solid var(--line);
}
.audience article { background: var(--bg); padding: 2rem var(--gutter) 2.4rem; display: grid; gap: .7rem; align-content: start; }
.aud-tag { font-family: var(--mono); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.audience h3 { font-family: var(--display); font-size: 1.8rem; line-height: 1.05; text-transform: uppercase; }
.audience p:last-child { color: var(--mute); }

/* ----- Team ----- */
.team { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); }
.team > * { background: var(--bg); }
.team-photo { overflow: hidden; aspect-ratio: 5 / 4; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-text { padding: clamp(2.5rem, 7vw, 5rem) var(--gutter); display: grid; gap: 1.3rem; align-content: center; }
.team-lead { font-size: 1.1rem; max-width: 50ch; }
.director { border-left: 6px solid var(--accent); padding: .3rem 0 .3rem 1rem; display: grid; gap: .2rem; }
.director-role { font-family: var(--mono); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.director-name { font-family: var(--display); font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.05; text-transform: uppercase; }
.site-footer p + p { margin-top: .6rem; }
.site-footer .f-director { color: #fff; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; white-space: normal; }
.creds { border-top: 1px solid var(--line); }
.creds li {
  display: flex; gap: 1rem; align-items: baseline;
  padding: .75rem 0; border-bottom: 1px solid var(--line);
  font-family: var(--display); font-size: 1.45rem; text-transform: uppercase; line-height: 1.1;
}
.creds span { font-family: var(--mono); font-size: .75rem; color: var(--accent); }

/* ----- Rehabilitación en vídeo ----- */
.rehab { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); }
.rehab > * { background: var(--bg); }
.rehab-text { padding: clamp(3rem, 8vw, 5rem) var(--gutter); display: grid; gap: 1.3rem; align-content: center; }
.rehab-text .kicker { color: var(--accent); }
.rehab-text h2 { font-family: var(--display); font-size: clamp(2.6rem, 8vw, 6rem); line-height: .92; text-transform: uppercase; }
.rehab-lead { font-size: 1.1rem; max-width: 50ch; }
.rehab-steps { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.rehab-steps li { display: flex; gap: .7rem; align-items: baseline; padding: .6rem 0; border-bottom: 1px solid var(--line); font-family: var(--display); font-size: 1.2rem; text-transform: uppercase; line-height: 1.1; }
.rehab-steps span { font-family: var(--mono); font-size: .7rem; color: var(--accent); }
.rehab-text .btn { justify-self: start; }
.rehab-video { position: relative; background: var(--ink); display: grid; place-items: center; padding: 1.5rem var(--gutter); }
.rehab-video video { width: 100%; max-width: 420px; height: auto; aspect-ratio: 9 / 16; background: #000; }

/* ----- Página de vídeos ----- */
.vhero { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.vhero > * { background: var(--bg); }
.vhero-type { padding: clamp(2.5rem, 7vw, 5rem) var(--gutter) 2rem; display: grid; gap: 1.2rem; align-content: end; }
.vhero-title { font-family: var(--display); font-size: clamp(3.6rem, 14vw, 11rem); line-height: .88; text-transform: uppercase; letter-spacing: -.01em; }
.vhero-side { padding: 1.75rem var(--gutter) 2.25rem; display: grid; gap: 1.6rem; align-content: start; }
.vindex { display: grid; border-top: 1px solid var(--line); }
.vindex a {
  display: flex; gap: .8rem; align-items: baseline;
  padding: .55rem 0; border-bottom: 1px solid var(--line);
  font-family: var(--display); font-size: 1.3rem; text-transform: uppercase; line-height: 1.1;
}
.vindex a span { font-family: var(--mono); font-size: .7rem; color: var(--accent); }

.vlist { display: grid; gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.vitem { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); scroll-margin-top: var(--header-h); }
.vitem > * { background: var(--bg); }
.vitem-text { padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter); display: grid; gap: 1rem; align-content: center; }
.vitem-text h2 { font-family: var(--display); font-size: clamp(2.4rem, 6.5vw, 5rem); line-height: .92; text-transform: uppercase; }
.vitem-text p:not(.vitem-meta) { max-width: 48ch; color: var(--mute); font-size: 1.05rem; }
.vitem-text p:nth-of-type(2) { color: var(--ink); }
.vitem-meta { display: flex; gap: .8rem; align-items: center; font-family: var(--mono); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.vitem-meta span { background: var(--ink); color: #fff; padding: .3rem .6rem; }
.vitem-video { background: var(--ink); display: grid; place-items: center; padding: clamp(1rem, 3vw, 2rem) var(--gutter); }
.vitem-video video { width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; object-fit: contain; }
.vitem-vertical .vitem-video video { max-width: 400px; aspect-ratio: 9 / 16; }
.vitem-photo { background: var(--ink); display: grid; place-items: center; padding: clamp(1rem, 3vw, 2rem) var(--gutter); }
.vitem-photo img { width: 100%; max-width: 440px; aspect-ratio: 3 / 4; object-fit: cover; }
.vitem-accent > .vitem-text { background: var(--accent); color: #fff; }
.vitem-accent .vitem-text p:not(.vitem-meta) { color: rgba(255,255,255,.9); }
.vitem-accent .vitem-text p:nth-of-type(2) { color: #fff; }
.vitem-accent em { color: var(--ink); }
.vitem-accent .vitem-meta { color: #fff; }

/* ----- Banda "ver vídeos" en la home ----- */
.vband { display: grid; gap: 1.2rem; padding: clamp(3rem, 8vw, 5rem) var(--gutter); background: var(--accent); color: #fff; border-bottom: 1px solid var(--line); }
.vband h2 { font-family: var(--display); font-size: clamp(2.6rem, 8vw, 6rem); line-height: .92; text-transform: uppercase; }
.vband em { color: var(--ink); }
.vband p { max-width: 54ch; font-size: 1.05rem; }
.vband .btn { justify-self: start; background: var(--ink); border-color: var(--ink); color: #fff; }

/* ----- Accesos a las páginas (inicio) ----- */
.tiles { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.tiles > li { background: var(--bg); }
.tile { position: relative; display: flex; flex-direction: column; gap: .5rem; height: 100%; padding-bottom: 1.6rem; }
.tile figure { aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: .9rem; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.tile-num { position: absolute; top: 0; left: 0; z-index: 1; padding: .4rem .7rem; background: var(--ink); color: #fff; font-family: var(--mono); font-size: .75rem; font-weight: 600; }
.tile h3, .tile p { padding: 0 var(--gutter); }
.tile h3 { font-family: var(--display); font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.02; text-transform: uppercase; padding-right: 4rem; }
.tile p { color: var(--mute); max-width: 40ch; }
.tile-go { position: absolute; right: var(--gutter); bottom: 1.3rem; font-family: var(--display); font-size: 2.4rem; line-height: 1; color: var(--accent); transition: transform .3s var(--ease-out); }
.tile:focus-visible .tile-go { transform: translateX(6px); }
.tile:focus-visible h3 { color: var(--accent); }
.tile-accent { background: var(--accent); color: #fff; }
.tile-accent p { color: rgba(255,255,255,.88); }
.tile-accent .tile-go { color: var(--ink); }
.tile-dark { background: var(--ink); color: #fff; }
.tile-dark p { color: rgba(255,255,255,.72); }
.tile-accent figure img { object-position: center 30%; }

.anchor { display: block; height: 0; }
.nav a[aria-current="page"] { color: var(--accent); }
.nav a[aria-current="page"] span { color: inherit; }
.site-footer .f-title-gap { margin-top: 1.2rem; }
.site-footer .f-links a { color: rgba(255,255,255,.75); }

/* ----- Páginas legales ----- */
.legal { border-bottom: 1px solid var(--line); padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) clamp(3rem, 8vw, 6rem); }
.legal-body { max-width: 72ch; display: grid; gap: 1rem; }
.legal-body h2 {
  font-family: var(--display); font-size: clamp(1.7rem, 3.6vw, 2.4rem); line-height: 1.05; text-transform: uppercase;
  margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 1rem);
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li { color: #2a2a2a; }
.legal-body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); }
.legal-body ul { list-style: none; display: grid; gap: .5rem; }
.legal-body ul li { padding-left: 1.4rem; position: relative; }
.legal-body ul li::before { content: ""; position: absolute; left: 0; top: .65em; width: .6rem; height: 2px; background: var(--accent); }
.legal-data { display: grid; border-top: 1px solid var(--line); margin: .4rem 0; }
.legal-data > div { display: grid; grid-template-columns: 1fr; gap: .1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.legal-data dt { font-family: var(--mono); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.legal-data dd { font-weight: 500; }
.legal-table-wrap { overflow-x: auto; border: 1px solid var(--line); }
.legal-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .92rem; }
.legal-table th, .legal-table td { padding: .7rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.legal-table th { background: var(--ink); color: #fff; font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.legal-table tr:last-child td { border-bottom: 0; }
.legal-date { margin-top: 2rem; font-family: var(--mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mute) !important; }

/* ----- Mapa con aviso (se carga al pulsar) ----- */
.map-consent {
  min-height: 360px; height: 100%;
  display: grid; align-content: center; justify-items: start; gap: 1rem;
  padding: 2.5rem var(--gutter);
  background:
    linear-gradient(var(--line-inv) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, var(--line-inv) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--ink);
  color: #fff;
}
.map-consent .kicker { color: var(--accent); }
.map-consent p:not(.kicker) { max-width: 46ch; color: rgba(255,255,255,.8); }
.map-consent a:not(.btn) { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.map-consent .btn-ghost { color: #fff; border-color: #fff; }

/* ----- Pie: enlaces legales ----- */
/* Enlaces legales: obligatorios pero discretos, en letra pequeña bajo el copyright */
.site-footer .f-legal { grid-column: 1 / -1; margin-top: -1px; padding-top: 0; padding-bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); font-size: .66rem; color: rgba(255,255,255,.35); }
.site-footer .f-legal a { color: rgba(255,255,255,.35); }

@media (min-width: 720px) {
  .legal-data > div { grid-template-columns: 11rem 1fr; gap: 1rem; align-items: baseline; }
}

/* ----- Community strip ----- */
.community { border-bottom: 1px solid var(--line); }
.community-title { padding: clamp(2.5rem, 6vw, 4rem) var(--gutter) 1.5rem; }
.community-strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 72%);
  gap: 1px; background: var(--line); border-top: 1px solid var(--line);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.community-strip figure { scroll-snap-align: start; aspect-ratio: 5 / 4; overflow: hidden; background: var(--bg); }
.community-strip img { width: 100%; height: 100%; object-fit: cover; }

/* ----- Visit ----- */
.visit { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); }
.visit > * { background: var(--bg); }
.visit-info { padding: clamp(3rem, 8vw, 5rem) var(--gutter); display: grid; gap: 1.4rem; align-content: start; }
.hours { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: .95rem; }
.hours th, .hours td { padding: .6rem 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.hours td { text-align: right; }
.hours tr:first-child th, .hours tr:first-child td { border-top: 1px solid var(--line); }
.hours tr.is-today { background: var(--ink); color: #fff; }
.hours tr.is-today th, .hours tr.is-today td { padding-left: .7rem; padding-right: .7rem; }
.hours tr.is-today th::after { content: " · hoy"; color: var(--accent); }
.hours-note { font-size: .92rem; color: var(--mute); }
.hours-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.address { font-style: normal; display: grid; font-family: var(--display); font-size: 1.7rem; line-height: 1.1; text-transform: uppercase; }
.visit-info .btn { justify-self: start; }
.visit-map { min-height: 360px; }
.visit-map iframe { width: 100%; height: 100%; min-height: 360px; border: 0; filter: grayscale(1) contrast(1.05); }

/* ----- CTA ----- */
.cta {
  background: var(--accent); color: #fff;
  padding: clamp(3.5rem, 10vw, 7rem) var(--gutter);
  display: grid; gap: 1rem;
  border-bottom: 1px solid var(--line);
}
.cta .kicker { color: var(--ink); }
.cta-phone {
  font-family: var(--display);
  font-size: clamp(3.2rem, 14vw, 11rem);
  line-height: .95; letter-spacing: -.01em;
  justify-self: start;
  border-bottom: 6px solid currentColor;
}
.cta-alt { font-family: var(--mono); text-transform: uppercase; font-size: .85rem; letter-spacing: .06em; }
.cta-alt a { text-decoration: underline; text-underline-offset: 4px; }

/* ----- Footer ----- */
.site-footer {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--line-inv);
  color: #fff;
}
.site-footer > * { background: var(--ink); padding: 1.6rem var(--gutter); }
.site-footer p { font-family: var(--mono); font-size: .85rem; line-height: 1.7; color: rgba(255,255,255,.75); }
.site-footer .f-title { color: var(--accent); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 600; margin-bottom: .4rem; }
.site-footer .f-copy { font-size: .72rem; color: rgba(255,255,255,.5); padding-bottom: .5rem; }

/* ----- Cursor coords (solo ratón) ----- */
.cursor-coords {
  position: fixed; top: 0; left: 0; z-index: 100; pointer-events: none;
  font-family: var(--mono); font-size: .68rem; padding: .15rem .35rem;
  background: var(--ink); color: #fff; opacity: 0;
  transform: translate3d(-100px, -100px, 0);
}
.cursor-coords.is-on { opacity: 1; }

/* =============================================================
   9. Effects — B/N a color con ratón, reveals
   ============================================================= */
/* ----- Táctil: que en el móvil se sienta como una app ----- */
/* Sin el destello gris/azul que pintan iOS y Android al tocar: cada control lleva su propio estado :active */
html { -webkit-tap-highlight-color: transparent; }

/* Clic inmediato (sin la espera de 300 ms del doble toque) y sin seleccionar el texto del control al mantener pulsado */
a, button, summary, [role="button"] { touch-action: manipulation; }
.btn, .nav a, .nav-toggle, .vindex a, .tile, .card-link, .cta-phone, .statusbar-phone, .video, .map-consent .btn {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}

/* Respuesta al pulsar: el control reacciona en cuanto el dedo toca, no al soltar */
.btn, .nav-toggle, .cta-phone, .card-link, .vindex a, .nav a { transition: transform 120ms var(--ease-out), background-color 120ms var(--ease-out), color 120ms var(--ease-out); }
.btn:active, .nav-toggle:active { transform: scale(0.97); }
.btn-primary:active { background: var(--ink); border-color: var(--ink); }
.btn-ghost:active { background: var(--ink); color: #fff; }
.vband .btn:active { background: #fff; border-color: #fff; color: var(--ink); }
.map-consent .btn-ghost:active { background: #fff; color: var(--ink); }
.nav a:active, .vindex a:active { background: var(--ink); color: #fff; }
.nav .nav-cta:active { background: var(--ink); }
.cta-phone:active { background: var(--ink); border-color: var(--ink); }
.card-link:active, .statusbar-phone:active, .legal-body a:active { color: var(--accent); }
.tile { transition: background-color 120ms var(--ease-out); }
.tile:active { background: var(--ink); color: #fff; }
.tile:active p { color: rgba(255,255,255,.75); }
.tile-accent:active { background: var(--accent-ink); }
.tile:active .tile-go { transform: translateX(6px); }
.video:active .video-play { background: #fff; color: var(--ink); }
.tile-accent:focus-visible h3 { color: var(--ink); }

/* La tira de fotos que se desliza en horizontal no arrastra la página al llegar al final */
.community-strip { overscroll-behavior-x: contain; }

@media (hover: hover) and (pointer: fine) {
  /* Estados de ratón: solo con ratón, para que en el móvil no se queden pegados al tocar */
  .btn-primary:hover { background: var(--ink); border-color: var(--ink); }
  .btn-ghost:hover { background: var(--ink); color: #fff; }
  .statusbar-phone:hover { color: var(--accent); }
  .nav a:hover { background: var(--ink); color: #fff; }
  .video:hover img { transform: scale(1.03); }
  .video:hover .video-play { background: #fff; color: var(--ink); }
  .audience article:hover { background: var(--ink); color: #fff; }
  .audience article:hover p:last-child { color: rgba(255,255,255,.75); }
  .vindex a:hover { background: var(--ink); color: #fff; padding-left: .6rem; }
  .vband .btn:hover { background: #fff; border-color: #fff; color: var(--ink); }
  .tile:hover .tile-go { transform: translateX(6px); }
  .tile:hover h3 { color: var(--accent); }
  .tile-accent:hover h3 { color: var(--ink); }
  .legal-body a:hover { color: var(--accent); }
  .map-consent .btn-ghost:hover { background: #fff; color: var(--ink); }
  .cta-phone:hover { background: var(--ink); border-color: var(--ink); }
  .site-footer a:hover { color: #fff; text-decoration: underline; }
  .card img, .mosaic img, .team-photo img, .community-strip img { filter: grayscale(1) contrast(1.12); transition: filter .35s, transform .6s var(--ease-out); }
  .card:hover img, .mosaic figure:hover img, .team-photo:hover img, .community-strip figure:hover img { filter: none; transform: scale(1.04); }
  .card:not(.card-accent):hover { background: var(--ink); color: #fff; }
  .card:not(.card-accent):hover p { color: rgba(255,255,255,.75); }
  .card:hover .card-num { background: var(--accent); color: #fff; }
  .tile img { filter: grayscale(1) contrast(1.12); transition: filter .35s, transform .6s var(--ease-out); }
  .tile:hover img { filter: none; transform: scale(1.04); }
}

@media (hover: hover) and (pointer: fine) and (min-width: 960px) {
  .nav .nav-cta:hover { background: var(--ink); }
}

.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* En las rejillas con líneas, la ficha queda fija y aparece su contenido (sin destello negro) */
.js :is(.grid-cards, .tiles, .audience, .zones) > [data-reveal] { opacity: 1; transform: none; }
.js :is(.grid-cards, .tiles, .audience, .zones) > [data-reveal] > * { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: inherit; }
.js :is(.grid-cards, .tiles, .audience, .zones) > [data-reveal].is-in > * { opacity: 1; transform: none; }
.js .hero-title .line { opacity: 0; transform: translateY(40%); animation: lineIn .9s var(--ease-out) forwards; }
.js .hero-title .line:nth-child(2) { animation-delay: .1s; }
.js .hero-title .line:nth-child(3) { animation-delay: .2s; }
@keyframes lineIn { to { opacity: 1; transform: none; } }

/* =============================================================
   10. Responsive
   ============================================================= */
@media (min-width: 540px) {
  .community-strip { grid-auto-columns: minmax(260px, 45%); }
}

@media (min-width: 720px) {
  .grid-cards { grid-template-columns: repeat(2, 1fr); }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .card-accent { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
  .card-accent figure { margin: 0; aspect-ratio: auto; min-height: 100%; }
  .card-accent .card-body { display: flex; flex-direction: column; justify-content: center; gap: .5rem; padding: 2rem 0; }
  .audience { grid-template-columns: repeat(2, 1fr); }
  .zones { grid-template-columns: repeat(3, 1fr); }
  .mosaic { grid-template-columns: repeat(4, 1fr); }
  .mosaic .m-a { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  .hero-stats { grid-template-columns: repeat(4, 1fr); }
  .site-footer { grid-template-columns: repeat(4, 1fr); }
  .site-footer .f-copy { grid-column: 1 / -1; }
}

@media (min-width: 960px) {
  :root { --header-h: 84px; }
  .brand img { height: 60px; }
  .nav-toggle { display: none; }
  .nav {
    position: static; display: flex; flex-direction: row; align-items: stretch;
    height: 100%; border: 0; background: transparent;
  }
  .nav a {
    border-top: 0; border-left: 1px solid var(--line);
    padding: 0 1.1rem; align-items: center;
    font-family: var(--mono); font-size: .8rem; font-weight: 600; letter-spacing: .06em;
  }
  .nav a span { font-size: .65rem; display: none; }
  .nav a { padding: 0 .8rem; }
  .nav a[aria-current="page"] { box-shadow: inset 0 -4px 0 var(--accent); color: var(--accent); }
  .nav .nav-cta { padding: 0 1.6rem; margin-right: calc(var(--gutter) * -1); }

  .hero { grid-template-columns: repeat(12, 1fr); }
  .hero-type { grid-column: 1 / span 8; grid-row: 1 / span 2; display: flex; flex-direction: column; justify-content: flex-end; }
  .hero-photo { grid-column: 9 / -1; grid-row: 1; }
  .hero-side { grid-column: 9 / -1; grid-row: 2; }
  .hero-stats { grid-column: 1 / -1; }

  .block-head { grid-template-columns: repeat(12, 1fr); align-items: end; }
  .block-head .kicker { grid-column: 1 / -1; }
  .block-head h2 { grid-column: 1 / span 8; }
  .block-head .block-intro { grid-column: 9 / -1; }

  .grid-cards { grid-template-columns: repeat(3, 1fr); }
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .team { grid-template-columns: 1fr 1fr; }
  .video-block { grid-template-columns: 4fr 8fr; }
  .rehab { grid-template-columns: 7fr 5fr; }
  .team-photo { aspect-ratio: auto; }
  .visit { grid-template-columns: 5fr 7fr; }
  .vhero { grid-template-columns: 7fr 5fr; }
  .vitem { grid-template-columns: 5fr 7fr; }
  .vitem:nth-child(even) .vitem-text { order: 2; }
  .vitem-vertical, .vitem-accent { grid-template-columns: 5fr 7fr; } /* filas pares: medio a la izquierda (estrecho), texto a la derecha */
  .community-strip { grid-auto-columns: minmax(260px, 30%); }
}

@media (min-width: 1280px) {
  .grid-cards { grid-template-columns: repeat(4, 1fr); }
  .audience { grid-template-columns: repeat(4, 1fr); }
  .nav a { padding: 0 1.1rem; }
  .nav a span { display: inline; }
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .community-strip { grid-auto-columns: 1fr; overflow: visible; }
}

/* =============================================================
   11. Reduced motion — solo lo intrusivo
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation-duration: 90s; }
  .statusbar.is-open .status-dot { animation: none; }
}

@media (min-width: 960px) {
  .hero-title { font-size: clamp(5rem, 13.6vw, 13rem); }
  .hero-type { justify-content: space-between; gap: 2rem; }
}