/* ZARK GYM Rubí — home page styles. Builds on the brand foundation. */
@import url('colors_and_type.css');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap');

/* Display typeface override — Redig (client-supplied), replaces BBH Bartle */
@font-face {
  font-family: 'Redig';
  src: url('fonts/Redig-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Redig';
  src: url('fonts/Redig-Oblique.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
:root {
  --font-display: 'Redig', 'BBH Bartle', 'Arial Narrow', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--ink-900);
  color: var(--fg1);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 720px) { .wrap { padding: 0 22px; } }

/* ---------- TYPE HELPERS ---------- */
.display {
  font-family: var(--font-display); text-transform: uppercase;
  line-height: .92; letter-spacing: .045em; margin: 0;
  font-weight: 400;
}
h2.display { font-size: clamp(52px, 7.4vw, 118px); }
#contacto h2.display { font-size: clamp(42px, 5.2vw, 76px); }
.eyebrow {
  font: 700 13px/1.1 var(--font-sans);
  letter-spacing: .22em; text-transform: uppercase; color: var(--rust-500);
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before {
  content: ""; width: 30px; height: 3px; background: var(--rust-500);
  display: inline-block; flex: none;
}
.eyebrow.center { justify-content: center; }
.eyebrow.hero-eyebrow { font-size: 20px; letter-spacing: .2em; }
.eyebrow.hero-eyebrow::before { width: 40px; height: 4px; }
.mono { font-family: var(--font-mono); letter-spacing: .02em; }

/* ---------- SECTIONS ---------- */
.section { padding: 120px 0; }
@media (max-width: 720px) { .section { padding: 72px 0; } }

/* ---------- TEXTURES ---------- */
/* corrugated / ribbed steel */
.tex-corrugated {
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.022) 0px,
      rgba(255,255,255,0.022) 1px,
      rgba(0,0,0,0.28) 2px,
      rgba(0,0,0,0.28) 7px,
      rgba(255,255,255,0.022) 8px),
    linear-gradient(180deg, var(--ink-800), var(--ink-900));
}
/* fine grain / concrete grit overlay */
.tex-grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
/* rust hatch for accent panels */
.tex-rust-field {
  background:
    repeating-linear-gradient(115deg, rgba(0,0,0,0.10) 0 2px, transparent 2px 26px),
    var(--rust-500);
}

/* ---------- BUTTONS ---------- */
.btn {
  font: 700 14px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase;
  padding: 17px 30px; border-radius: var(--r-md); border: 1.5px solid transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: all var(--dur) var(--ease-out); white-space: nowrap; text-decoration: none;
}
.btn-primary { background: var(--rust-500); color: #fff; }
.btn-primary:hover { background: var(--rust-400); box-shadow: var(--shadow-rust); transform: translateY(-1px); }
.btn-primary:active { background: var(--rust-700); transform: scale(.98); }
.btn-ghost { background: transparent; border-color: var(--ink-500); color: #fff; }
.btn-ghost:hover { border-color: var(--rust-500); color: var(--rust-300); background: rgba(161,73,36,.08); }
.btn-dark { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }
.btn-dark:hover { background: #000; transform: translateY(-1px); }
.btn .ic { width: 18px; height: 18px; }

/* ---------- CARDS ---------- */
.card {
  background: var(--ink-800); border: 1px solid var(--ink-600);
  border-radius: var(--r-md); transition: border-color var(--dur), transform var(--dur);
}

/* ---------- THICK RUST RULE ---------- */
.rule-rust { width: 56px; height: 4px; background: var(--rust-500); border: 0; margin: 0; }

/* ---------- LUCIDE ---------- */
.lucide, svg.lucide { stroke-width: 1.75; }

/* ---------- MOBILE HEADINGS ---------- */
@media (max-width: 720px) {
  h1.display { font-size: clamp(88px, 18vw, 120px) !important; }
  h1.display span { font-size: inherit !important; }
  h2.display { font-size: clamp(110px, 22vw, 150px) !important; }
  h2.display span { font-size: inherit !important; }
}

/* ---------- REVIEWS GRID ---------- */
.reviews-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
@media (max-width: 900px) { .reviews-grid { grid-template-columns: 1fr; } }

/* ---------- REVEAL ANIMATION ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }