/* ============================================================================
   demo-gym.css · Box de entrenamiento (DARK, volt) · Capa 2
   Scopeado 100% en html.demo-gym. Reescrito entero desde el blueprint propio
   (el archivo Porto original queda descartado). Re-skineable: los colores
   salen de var(--primary)/(--secondary)/(--dark)/(--light)/(--quaternary),
   que SkinColorService reinyecta por tenant. Solo literales de contraste
   (rgba blancas sobre foto) quedan inline.
   Capa A (cd-system-base.css) ya alinea botones/badges/paginación globales;
   acá va la Capa B: home custom + ensamble de módulos (services/gallery/team).
   ============================================================================ */

html.demo-gym {
    --gy-volt: var(--primary, #C9FF35);
    --gy-volt-2: var(--tertiary, #A6E01C);
    --gy-ink: var(--dark, #0C0C0E);
    --gy-coal: var(--secondary, #161619);
    --gy-coal-2: #1E1E23;
    --gy-chalk: var(--light, #F1F1EA);
    --gy-steel: var(--quaternary, #8B8B93);
    --gy-line: rgba(255, 255, 255, .11);
    --gy-disp: var(--font-family-secondary, "Oswald", "Helvetica Neue", Arial, sans-serif);
    --gy-sans: var(--font-family-primary, "Jost", "Helvetica Neue", Arial, system-ui, sans-serif);
}

html.demo-gym body,
html.demo-gym .gy-main {
    background: var(--gy-ink);
    color: var(--gy-chalk);
    font-family: var(--gy-sans);
    font-weight: 300;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
html.demo-gym img { max-width: 100%; }
html.demo-gym a { color: inherit; text-decoration: none; }
html.demo-gym .gy-wrap { max-width: 1280px; margin: 0 auto; padding: 0 34px; }
html.demo-gym .gy-disp {
    font-family: var(--gy-disp);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -.01em;
    line-height: .92;
    margin: 0;
}
html.demo-gym h1.gy-disp { line-height: .9; }
html.demo-gym .gy-k {
    font-size: .7rem; letter-spacing: .32em; text-transform: uppercase;
    font-weight: 600; color: var(--gy-volt); display: inline-block;
}
html.demo-gym .gy-muted { color: var(--gy-steel); }
html.demo-gym .gy-mt { margin-top: 14px; }

/* ── botones ── */
html.demo-gym .gy-btn {
    display: inline-flex; align-items: center; gap: .5em;
    font-family: var(--gy-sans); font-size: .78rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; padding: 16px 32px;
    cursor: pointer; transition: .2s; border: 2px solid var(--gy-volt); border-radius: 0;
}
html.demo-gym .gy-btn--volt { background: var(--gy-volt); color: #111; }
html.demo-gym .gy-btn--volt:hover { background: var(--gy-volt-2); border-color: var(--gy-volt-2); color: #111; }
html.demo-gym .gy-btn--out { color: var(--gy-chalk); border-color: var(--gy-line); }
html.demo-gym .gy-btn--out:hover { border-color: var(--gy-volt); color: var(--gy-volt); }
html.demo-gym .gy-btn--dark { background: #111; color: var(--gy-volt); border-color: #111; }
html.demo-gym .gy-btn--dark:hover { background: #000; color: var(--gy-volt); }

/* ══ HEADER (nav bar oscuro sticky) ══ */
html.demo-gym .gy-header {
    position: sticky; top: 0; z-index: 1030;
    background: rgba(12, 12, 14, .82); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--gy-line);
}
html.demo-gym .gy-bar {
    max-width: 1280px; margin: 0 auto; padding: 14px 34px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
html.demo-gym .gy-brand { display: flex; align-items: center; }
html.demo-gym .gy-nav { display: flex; gap: 28px; }
html.demo-gym .gy-nav a {
    font-size: .74rem; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--gy-steel); transition: .2s;
}
html.demo-gym .gy-nav a:hover, html.demo-gym .gy-nav a.on { color: var(--gy-volt); }
html.demo-gym .gy-hright { display: flex; align-items: center; gap: 16px; }
html.demo-gym .gy-hd-cta {
    font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    background: var(--gy-volt); color: #111; padding: 12px 24px; transition: .2s;
}
html.demo-gym .gy-hd-cta:hover { background: var(--gy-volt-2); color: #111; }
html.demo-gym .gy-burger { display: none; background: none; border: 0; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; }
html.demo-gym .gy-burger span { width: 24px; height: 2px; background: var(--gy-chalk); display: block; }

/* ══ HERO ══ */
html.demo-gym .gy-hero { position: relative; min-height: 92vh; display: flex; align-items: flex-end; overflow: hidden; }
html.demo-gym .gy-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: grayscale(.3) contrast(1.05); }
html.demo-gym .gy-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 12, 14, .55), rgba(12, 12, 14, .25) 40%, rgba(12, 12, 14, .92)); }
html.demo-gym .gy-hero-inner { position: relative; z-index: 2; width: 100%; padding: 0 0 70px; }
html.demo-gym .gy-hero .gy-k { margin-bottom: 16px; }
html.demo-gym .gy-hero h1 { font-size: clamp(3.4rem, 13vw, 12rem); color: var(--gy-chalk); }
html.demo-gym .gy-hero h1 em { font-style: normal; color: var(--gy-volt); }
html.demo-gym .gy-hero h1 .gy-outline { color: transparent; -webkit-text-stroke: 2px var(--gy-chalk); }
html.demo-gym .gy-hero-sub { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 24px; flex-wrap: wrap; }
html.demo-gym .gy-hero-sub p { font-size: 1.05rem; color: #CFCFC8; max-width: 36ch; margin: 0; }
html.demo-gym .gy-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ══ STATS BAND ══ */
html.demo-gym .gy-stats { background: var(--gy-volt); color: #111; }
html.demo-gym .gy-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
html.demo-gym .gy-stat { padding: 34px 20px; text-align: center; border-right: 2px solid rgba(0, 0, 0, .16); }
html.demo-gym .gy-stat:last-child { border-right: 0; }
html.demo-gym .gy-stat b { font-size: 3.4rem; display: block; line-height: 1; color: #111; }
html.demo-gym .gy-stat span { font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }

/* ══ INTRO ══ */
html.demo-gym .gy-intro { padding: 110px 0; }
html.demo-gym .gy-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
html.demo-gym .gy-intro h2 { font-size: clamp(2.4rem, 6vw, 4.6rem); margin: 16px 0 24px; }
html.demo-gym .gy-intro h2 em { font-style: normal; color: var(--gy-volt); }
html.demo-gym .gy-intro p { color: var(--gy-steel); font-size: 1.04rem; margin-bottom: 14px; max-width: 50ch; }
html.demo-gym .gy-intro-figure { position: relative; overflow: hidden; }
html.demo-gym .gy-intro-figure img { width: 100%; height: 520px; object-fit: cover; filter: grayscale(.2); }
html.demo-gym .gy-stamp {
    position: absolute; right: -6px; bottom: 24px; background: var(--gy-volt); color: #111;
    font-size: 1.5rem; padding: 12px 22px; transform: skewX(-8deg);
}

/* ══ DISCIPLINAS ══ */
html.demo-gym .gy-disc { padding: 0 0 110px; }
html.demo-gym .gy-disc-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 44px; flex-wrap: wrap; gap: 14px; }
html.demo-gym .gy-disc-head h2 { font-size: clamp(2.2rem, 5vw, 4rem); margin-top: 8px; }
html.demo-gym .gy-disc-head h2 em { font-style: normal; color: var(--gy-volt); }
html.demo-gym .gy-disc-head p { max-width: 34ch; margin: 0; }
html.demo-gym .gy-disc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
html.demo-gym .gy-card { position: relative; min-height: 340px; display: flex; align-items: flex-end; overflow: hidden; border: 1px solid var(--gy-line); }
html.demo-gym .gy-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: grayscale(.35); transition: .6s; }
html.demo-gym .gy-card:hover .gy-card-bg { transform: scale(1.06); filter: grayscale(0); }
html.demo-gym .gy-card-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(12, 12, 14, .92)); }
html.demo-gym .gy-card-body { position: relative; z-index: 2; padding: 22px; }
html.demo-gym .gy-card h3 { font-size: 1.6rem; color: var(--gy-chalk); }
html.demo-gym .gy-card p { font-size: .82rem; color: var(--gy-steel); margin: 4px 0 0; }
html.demo-gym .gy-card-n { position: absolute; top: 16px; left: 18px; z-index: 2; font-size: 1.3rem; color: var(--gy-volt); }

/* ══ HORARIOS (grilla) ══ */
html.demo-gym .gy-sched { background: var(--gy-coal); padding: 100px 0; border-top: 1px solid var(--gy-line); border-bottom: 1px solid var(--gy-line); }
html.demo-gym .gy-sched h2 { font-size: clamp(2.2rem, 5vw, 4rem); margin: 8px 0; }
html.demo-gym .gy-sched h2 em { font-style: normal; color: var(--gy-volt); }
html.demo-gym .gy-sched-lead { color: var(--gy-steel); margin-bottom: 40px; }
html.demo-gym .gy-sched-scroll { width: 100%; overflow-x: auto; }
html.demo-gym .gy-grid-sched { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 640px; }
html.demo-gym .gy-grid-sched th { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gy-steel); font-weight: 700; padding: 14px 10px; text-align: left; border-bottom: 1px solid var(--gy-line); }
html.demo-gym .gy-grid-sched td { padding: 12px 10px; border-bottom: 1px solid var(--gy-line); color: #CFCFC8; }
html.demo-gym .gy-time { font-size: 1.1rem; color: var(--gy-chalk); }
html.demo-gym .gy-cl { display: inline-block; padding: 6px 12px; font-size: .72rem; font-weight: 600; letter-spacing: .04em; background: var(--gy-coal-2); border: 1px solid var(--gy-line); color: #CFCFC8; }
html.demo-gym .gy-cl--em { color: var(--gy-volt); border-color: rgba(201, 255, 53, .4); }

/* ══ PLANES ══ */
html.demo-gym .gy-plans { padding: 110px 0; }
html.demo-gym .gy-plans-head { text-align: center; margin-bottom: 52px; }
html.demo-gym .gy-plans-head h2 { font-size: clamp(2.4rem, 6vw, 4.6rem); margin-top: 8px; }
html.demo-gym .gy-plans-head h2 em { font-style: normal; color: var(--gy-volt); }
html.demo-gym .gy-plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
html.demo-gym .gy-plan { border: 1px solid var(--gy-line); background: var(--gy-coal); padding: 34px 30px; display: flex; flex-direction: column; transition: .25s; }
html.demo-gym .gy-plan:hover { border-color: var(--gy-volt); transform: translateY(-4px); }
html.demo-gym .gy-plan--feat { background: var(--gy-volt); color: #111; border-color: var(--gy-volt); }
html.demo-gym .gy-plan-tag { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--gy-volt); }
html.demo-gym .gy-plan--feat .gy-plan-tag { color: #111; }
html.demo-gym .gy-plan h3 { font-size: 2rem; margin: 8px 0 4px; }
html.demo-gym .gy-plan-price { font-size: 2.2rem; line-height: 1; margin: 14px 0; color: inherit; }
html.demo-gym .gy-plan ul { list-style: none; margin: 12px 0 26px; padding: 0; flex: 1; }
html.demo-gym .gy-plan-spacer { flex: 1; }
html.demo-gym .gy-plan li { font-size: .9rem; padding: 8px 0 8px 22px; position: relative; color: #CFCFC8; border-bottom: 1px solid var(--gy-line); }
html.demo-gym .gy-plan--feat li { color: #222; border-color: rgba(0, 0, 0, .12); }
html.demo-gym .gy-plan li::before { content: "→"; position: absolute; left: 0; color: var(--gy-volt); font-weight: 700; }
html.demo-gym .gy-plan--feat li::before { color: #111; }
html.demo-gym .gy-plan-cta { width: 100%; justify-content: center; }

/* ══ EL BOX EN FOTOS (gallery home) ══ */
html.demo-gym .gy-shots { padding: 0 0 110px; }
html.demo-gym .gy-shots-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; flex-wrap: wrap; gap: 14px; }
html.demo-gym .gy-shots-head h2 { font-size: clamp(2rem, 5vw, 3.6rem); margin-top: 8px; }
html.demo-gym .gy-shots-head h2 em { font-style: normal; color: var(--gy-volt); }
html.demo-gym .gy-shots-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
html.demo-gym .gy-shot { position: relative; height: 260px; overflow: hidden; border: 1px solid var(--gy-line); display: flex; align-items: flex-end; }
html.demo-gym .gy-shot-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: grayscale(.35); transition: .5s; }
html.demo-gym .gy-shot:hover .gy-shot-bg { transform: scale(1.06); filter: grayscale(0); }
html.demo-gym .gy-shot-cap { position: relative; z-index: 2; padding: 14px 16px; font-size: .8rem; font-weight: 600; background: linear-gradient(180deg, transparent, rgba(12, 12, 14, .9)); width: 100%; }

/* ══ COACHES (team home) ══ */
html.demo-gym .gy-coaches { background: var(--gy-coal); padding: 100px 0; border-top: 1px solid var(--gy-line); }
html.demo-gym .gy-coaches h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); margin: 8px 0 44px; }
html.demo-gym .gy-coaches h2 em { font-style: normal; color: var(--gy-volt); }
html.demo-gym .gy-coach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
html.demo-gym .gy-coach figure { overflow: hidden; height: 400px; position: relative; margin: 0; }
html.demo-gym .gy-coach img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4); transition: .5s; }
html.demo-gym .gy-coach:hover img { filter: grayscale(0); }
html.demo-gym .gy-coach-meta { padding: 16px 4px; }
html.demo-gym .gy-coach h3 { font-size: 1.5rem; color: var(--gy-chalk); }
html.demo-gym .gy-coach-role { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gy-volt); font-weight: 700; margin-top: 4px; }

/* ══ CTA FINAL ══ */
html.demo-gym .gy-cta { position: relative; min-height: 66vh; display: flex; align-items: center; overflow: hidden; }
html.demo-gym .gy-cta-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: grayscale(.4); }
html.demo-gym .gy-cta-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 12, 14, .9), rgba(12, 12, 14, .5)); }
html.demo-gym .gy-cta-inner { position: relative; z-index: 2; width: 100%; }
html.demo-gym .gy-cta h2 { font-size: clamp(3rem, 9vw, 6.4rem); color: var(--gy-chalk); margin-top: 12px; }
html.demo-gym .gy-cta h2 em { font-style: normal; color: var(--gy-volt); }
html.demo-gym .gy-cta p { color: var(--gy-steel); margin: 16px 0 28px; max-width: 40ch; font-size: 1.05rem; }
html.demo-gym .gy-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ══ PAGE HEADER (banda coal — módulos/about/contact) ══ */
html.demo-gym .gy-pagehead { background: var(--gy-coal); border-bottom: 1px solid var(--gy-line); padding: 130px 0 54px; }
html.demo-gym .gy-crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 14px; }
html.demo-gym .gy-crumb li { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gy-steel); font-weight: 600; }
html.demo-gym .gy-crumb a { color: var(--gy-steel); }
html.demo-gym .gy-crumb a:hover { color: var(--gy-volt); }
html.demo-gym .gy-pagehead h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); color: var(--gy-chalk); }
html.demo-gym .gy-pagehead p { color: var(--gy-steel); margin-top: 12px; max-width: 60ch; }

/* ══ SECCIONES INTERNAS (about / contact) ══ */
html.demo-gym .gy-sec { padding: 90px 0; }
html.demo-gym .gy-about-grid, html.demo-gym .gy-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
html.demo-gym .gy-about-title { font-size: clamp(2rem, 5vw, 3.4rem); margin: 14px 0 22px; }
html.demo-gym .gy-sec p { color: var(--gy-steel); margin-bottom: 14px; }
html.demo-gym .gy-about-img { width: 100%; height: 480px; object-fit: cover; filter: grayscale(.2); }
html.demo-gym .gy-contact-list { list-style: none; padding: 0; margin: 22px 0 0; }
html.demo-gym .gy-contact-list li { padding: 14px 0; border-bottom: 1px solid var(--gy-line); color: var(--gy-chalk); }
html.demo-gym .gy-contact-list strong { display: block; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gy-volt); margin-bottom: 4px; font-weight: 700; }
html.demo-gym .gy-contact-form .gy-input {
    width: 100%; background: var(--gy-coal); border: 1px solid var(--gy-line); color: var(--gy-chalk);
    padding: 14px 16px; margin-bottom: 14px; font-family: var(--gy-sans); font-size: .95rem; border-radius: 0;
}
html.demo-gym .gy-contact-form .gy-input::placeholder { color: var(--gy-steel); }
html.demo-gym .gy-contact-form .gy-input:focus { outline: none; border-color: var(--gy-volt); }
html.demo-gym .gy-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
html.demo-gym .gy-alert { background: rgba(201, 255, 53, .12); border: 1px solid var(--gy-volt); color: var(--gy-chalk); padding: 14px 16px; margin-bottom: 16px; }

/* ══ FOOTER ══ */
html.demo-gym .gy-footer { background: var(--gy-ink); padding: 66px 0 34px; border-top: 1px solid var(--gy-line); }
html.demo-gym .gy-fin { max-width: 1280px; margin: 0 auto; padding: 0 34px; }
html.demo-gym .gy-fgrid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 38px; margin-bottom: 40px; }
html.demo-gym .gy-fbrand p { font-size: .87rem; color: var(--gy-steel); max-width: 34ch; }
html.demo-gym .gy-footer h4 { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gy-volt); margin-bottom: 16px; font-weight: 700; }
html.demo-gym .gy-footer ul { list-style: none; padding: 0; margin: 0; }
html.demo-gym .gy-footer ul li { margin-bottom: 8px; }
html.demo-gym .gy-footer ul a, html.demo-gym .gy-footer ul li { font-size: .87rem; color: var(--gy-steel); }
html.demo-gym .gy-footer ul a:hover { color: var(--gy-volt); }
html.demo-gym .gy-social { display: flex; gap: 12px; margin-bottom: 16px; }
html.demo-gym .gy-social a { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--gy-line); color: var(--gy-steel); transition: .2s; }
html.demo-gym .gy-social a:hover { border-color: var(--gy-volt); color: var(--gy-volt); }
html.demo-gym .gy-fcta { display: inline-block; }
html.demo-gym .gy-fbot { border-top: 1px solid var(--gy-line); padding-top: 22px; display: flex; justify-content: space-between; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; flex-wrap: wrap; gap: 8px; color: var(--gy-steel); }

/* ══ CAPA B · ENSAMBLE DE MÓDULOS (services / gallery / team compartidos) ══
   El demo es DARK → la vista compartida (que asume skin oscuro) encaja. Acá
   solo aseguramos fondo ink, cards coal legibles y acentos volt. */
html.demo-gym .main > section { background: var(--gy-ink); }
html.demo-gym .main .section:not(.gy-hero):not(.gy-cta) { background: var(--gy-ink); }
/* cards de módulo → fondo coal, borde línea, texto chalk */
html.demo-gym .main .card,
html.demo-gym .main .service-item,
html.demo-gym .main .gallery-item,
html.demo-gym .main .team-item,
html.demo-gym .main .thumb-info {
    background: var(--gy-coal); border: 1px solid var(--gy-line); color: var(--gy-chalk);
}
html.demo-gym .main .card .card-body { color: var(--gy-chalk); }
html.demo-gym .main h1, html.demo-gym .main h2, html.demo-gym .main h3,
html.demo-gym .main h4, html.demo-gym .main h5 { color: var(--gy-chalk); }
html.demo-gym .main p, html.demo-gym .main li, html.demo-gym .main .text-color-dark { color: var(--gy-steel); }
/* enlaces / precios / acentos → volt */
html.demo-gym .main a.text-color-primary,
html.demo-gym .main .text-color-primary,
html.demo-gym .main .price { color: var(--gy-volt) !important; }
/* botones de módulo → texto oscuro sobre volt (la Capa A ya los pinta con --primary) */
html.demo-gym .main .btn-primary { color: #111 !important; }

/* ── responsive ── */
@media (max-width: 991px) {
    html.demo-gym .gy-nav {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; gap: 0; background: rgba(12, 12, 14, .97);
        border-bottom: 1px solid var(--gy-line); padding: 8px 0;
    }
    html.demo-gym .gy-nav.open { display: flex; }
    html.demo-gym .gy-nav a { padding: 14px 34px; }
    html.demo-gym .gy-burger { display: flex; }
    html.demo-gym .gy-hd-cta { display: none; }
}
@media (max-width: 960px) {
    html.demo-gym .gy-disc-grid { grid-template-columns: 1fr 1fr; }
    html.demo-gym .gy-coach-grid, html.demo-gym .gy-shots-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
    html.demo-gym .gy-intro-grid, html.demo-gym .gy-about-grid, html.demo-gym .gy-contact-grid { grid-template-columns: 1fr; gap: 40px; }
    html.demo-gym .gy-intro-figure img, html.demo-gym .gy-about-img { height: 400px; }
    html.demo-gym .gy-plans-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
    html.demo-gym .gy-fgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
    html.demo-gym .gy-stats-grid { grid-template-columns: 1fr 1fr; }
    html.demo-gym .gy-stat { border-bottom: 2px solid rgba(0, 0, 0, .16); }
    html.demo-gym .gy-form-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    html.demo-gym .gy-disc-grid, html.demo-gym .gy-coach-grid, html.demo-gym .gy-shots-grid { grid-template-columns: 1fr; }
    html.demo-gym .gy-wrap, html.demo-gym .gy-bar, html.demo-gym .gy-fin { padding-left: 20px; padding-right: 20px; }
}