/* granite-ember · 02-treino-na-semana (personal trainer, modelo do Site Essencial)
   Papel, pedra, grafite e uma brasa só, como traço curto ao lado do que está ativo. Peças próprias: o título
   gigante com os números que contam e o quadro da semana que acende o dia de hoje. Perfil: week-trail. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--ge-paper); color: var(--ge-ink); font: 400 var(--ge-body-size)/var(--ge-body-leading) var(--ge-font-ui); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--ge-font-heading); font-weight: 600; letter-spacing: var(--ge-heading-track); line-height: .98; margin: 0; }
p { margin: 0; }
.wrap { width: calc(100% - 2 * var(--ge-gutter)); max-width: var(--ge-container); margin-inline: auto; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ge-ink); color: var(--ge-paper); padding: 10px 16px; border-radius: 8px; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--ge-ember); outline-offset: 3px; }
.mono { font: 400 13px/1.4 var(--ge-font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ge-muted); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: var(--ge-radius-pill); font: 600 15px/1 var(--ge-font-ui); text-decoration: none; border: 1.5px solid var(--ge-ink); cursor: pointer; transition: background .25s, color .25s; }
.btn-ember { background: var(--ge-ink); color: var(--ge-paper); }
.btn-ember::before { content: ""; width: var(--ge-dash-w); height: var(--ge-dash-h); background: var(--ge-ember); border-radius: 2px; }
.btn-ember:hover { background: var(--ge-ember); border-color: var(--ge-ember); color: var(--ge-ink); }
.btn-ember:hover::before { background: var(--ge-ink); }
.btn-line { background: transparent; }
.btn-line:hover { background: var(--ge-ink); color: var(--ge-paper); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 14px; }

/* ---- cabeçalho ---- */
.header { position: sticky; top: 0; z-index: 50; background: rgba(250, 250, 248, .92); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.header.scrolled { border-bottom-color: var(--ge-line); }
.header-row { display: flex; align-items: center; gap: 28px; min-height: var(--ge-header-h); padding: 0 var(--ge-gutter); }
.brand { display: flex; align-items: baseline; gap: 12px; text-decoration: none; margin-right: auto; }
.brand-name { font: 700 22px/1 var(--ge-font-heading); letter-spacing: -.03em; }
.nav { display: flex; gap: 26px; }
.nav a { text-decoration: none; font-weight: 500; font-size: 15px; position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: var(--ge-dash-w); height: var(--ge-dash-h); background: var(--ge-ember); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ge-ease); }
.nav a:hover::after { transform: scaleX(1); }
.menu-toggle { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ge-ink); background: none; flex-direction: column; justify-content: center; gap: 6px; padding: 0 12px; cursor: pointer; }
.menu-toggle span { height: 2px; background: var(--ge-ink); transition: transform .25s; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.nav-mobile { display: none; }

/* ---- destaque: a foto ocupa o destaque inteiro, o título por cima ---- */
.hero { position: relative; min-height: calc(100vh - var(--ge-header-h)); display: flex; align-items: flex-end; background: var(--ge-ink); color: var(--ge-white); overflow: hidden; }
.hero-photo { position: absolute; inset: 0; margin: 0; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 30%; animation: aproximar 1.6s var(--ge-ease) both; }
@keyframes aproximar { from { transform: scale(1.08); } }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16, 17, 15, .92) 0%, rgba(16, 17, 15, .66) 36%, rgba(16, 17, 15, .08) 68%, rgba(16, 17, 15, .5) 100%), linear-gradient(0deg, rgba(16, 17, 15, .55), transparent 45%); }
.hero-copy { position: relative; z-index: 1; padding: clamp(40px, 5vw, 72px) var(--ge-gutter) clamp(36px, 4vw, 56px); max-width: 1180px; }
.hero .mono { color: rgba(250, 250, 248, .72); }
.hero h1 { font-size: clamp(48px, 6.6vw, 112px); text-transform: uppercase; margin: 18px 0 0; max-width: 11ch; }
.dash { position: relative; display: inline-block; }
.dash::after { content: ""; position: absolute; left: 0; bottom: -.04em; height: .09em; width: 100%; background: var(--ge-ember); transform-origin: left; animation: traco 1s var(--ge-ease) .5s both; }
@keyframes traco { from { transform: scaleX(0); } }
.lead { font-size: clamp(17px, 1.3vw, 20px); color: rgba(250, 250, 248, .82); max-width: 48ch; margin-top: 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero .btn-ember { background: var(--ge-ember); border-color: var(--ge-ember); color: var(--ge-ink); }
.hero .btn-ember::before { background: var(--ge-ink); }
.hero .btn-ember:hover { background: var(--ge-white); border-color: var(--ge-white); }
.hero .btn-line { border-color: rgba(250, 250, 248, .7); color: var(--ge-white); }
.hero .btn-line:hover { background: var(--ge-white); color: var(--ge-ink); }
.numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(36px, 5vw, 64px) 0 0; border-top: 1px solid rgba(250, 250, 248, .4); max-width: 760px; }
.numbers div { padding: 16px 16px 0 0; display: flex; flex-direction: column-reverse; gap: 4px; }
.numbers dt { font: 400 12px/1.3 var(--ge-font-mono); text-transform: uppercase; color: rgba(250, 250, 248, .7); }
.numbers dd { margin: 0; font: 600 clamp(40px, 4.4vw, 64px)/1 var(--ge-font-heading); letter-spacing: -.04em; }
/* sem a foto (o cliente tirou), o destaque volta ao papel */
.hero[data-ws2-layout="single"] { background: var(--ge-paper); color: var(--ge-ink); min-height: 0; }
.hero[data-ws2-layout="single"] .mono, .hero[data-ws2-layout="single"] .lead, .hero[data-ws2-layout="single"] .numbers dt { color: var(--ge-muted); }
.hero[data-ws2-layout="single"] .numbers { border-top-color: var(--ge-ink); }
.hero[data-ws2-layout="single"] .btn-line { border-color: var(--ge-ink); color: var(--ge-ink); }

/* ---- faixas ---- */
.band { padding: var(--ge-band-y) 0; }
.band-stone { background: var(--ge-stone); }
h2 { font-size: var(--ge-section-heading); margin-top: 14px; }

/* ---- modalidades ---- */
.mods-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.mods-photo { margin: 32px 0 0; }
.mods-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--ge-radius-media); }
.mods { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ge-gap); }
.mod { position: relative; padding: 28px 24px 30px; background: var(--ge-white); border: 1px solid var(--ge-line); border-radius: var(--ge-radius-tile); min-height: 230px; display: flex; flex-direction: column; transition: border-color .25s; }
.mod::before { content: ""; position: absolute; left: 24px; top: 0; width: var(--ge-dash-w); height: var(--ge-dash-h); background: var(--ge-ember); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ge-ease); }
.mod:hover { border-color: var(--ge-ink); }
.mod:hover::before { transform: scaleX(1); }
.mod-n { font: 400 13px/1 var(--ge-font-mono); color: var(--ge-muted); margin-bottom: auto; }
.mod h3 { font-size: var(--ge-card-heading); margin: 40px 0 10px; }
.mod p { color: var(--ge-muted); font-size: 15px; }

/* ---- semana ---- */
.week-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(36px, 4vw, 56px); }
.start { margin: 0; padding: 0 0 0 20px; display: grid; gap: 12px; color: var(--ge-muted); }
.start strong { color: var(--ge-ink); }
.week-label { margin-bottom: 14px; }
.week { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--ge-gap); }
.day { background: var(--ge-white); border-radius: var(--ge-radius-card); padding: 14px; min-height: 230px; display: flex; flex-direction: column; gap: 8px; position: relative; border: 1px solid transparent; }
.day-name { font: 700 13px/1 var(--ge-font-mono); text-transform: uppercase; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.day.is-today { border-color: var(--ge-ink); }
.day.is-today .day-name::after { content: "hoje"; font-weight: 400; padding: 3px 7px; border-radius: 999px; background: var(--ge-ember); color: var(--ge-ink); }
.day.is-today::before { content: ""; position: absolute; left: 14px; top: -2px; width: var(--ge-dash-w); height: var(--ge-dash-h); background: var(--ge-ember); border-radius: 2px; }
.block { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 8px; font-size: 14px; line-height: 1.25; }
.block small { font: 400 12px/1 var(--ge-font-mono); }
.block-forte { background: var(--ge-ink); color: var(--ge-paper); flex: 1; }
.block-forte small { color: rgba(250, 250, 248, .7); }
.block-leve { background: var(--ge-stone-deep); }
.block-pausa { background: repeating-linear-gradient(-45deg, transparent 0 6px, var(--ge-line) 6px 7px); color: var(--ge-muted); flex: 1; justify-content: center; text-align: center; }

/* ---- sobre ---- */
.about-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.about-photo { margin: 0; }
.about-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--ge-radius-media); filter: grayscale(.15); }
.about-copy > p:not(.tag):not(.eyebrow):not(.label):not(.mono) { color: var(--ge-muted); font-size: 18px; margin-top: 18px; max-width: 54ch; }
.tags { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { padding: 8px 14px; border: 1px solid var(--ge-ink); border-radius: 999px; font-size: 14px; }

/* ---- dúvidas ---- */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq-item { border-bottom: 1px solid var(--ge-line); }
.faq-item:first-child { border-top: 1px solid var(--ge-ink); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 18px; padding: 22px 0; font: 600 19px/1.3 var(--ge-font-heading); position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font: 400 22px/1 var(--ge-font-mono); }
.faq-item[open] summary::after { content: "−"; }
.faq-item[open] summary::before { content: ""; position: absolute; left: 0; top: -1px; width: var(--ge-dash-w); height: var(--ge-dash-h); background: var(--ge-ember); }
.faq-body { padding-bottom: 22px; color: var(--ge-muted); max-width: 62ch; }

/* ---- contato ---- */
.contact-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.contact-list { font-style: normal; margin-top: 26px; color: var(--ge-muted); line-height: 1.8; }
.contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: clamp(24px, 3vw, 40px); background: var(--ge-white); border: 1px solid var(--ge-line); border-radius: var(--ge-radius-media); }
.field { display: grid; gap: 6px; }
.field-wide { grid-column: 1 / -1; }
.field label { font: 400 12px/1.3 var(--ge-font-mono); text-transform: uppercase; }
.field input, .field select { width: 100%; min-width: 0; min-height: 50px; padding: 0 14px; border: 1px solid var(--ge-line); border-radius: 8px; background: var(--ge-paper); font: inherit; color: var(--ge-ink); }
.field input:focus, .field select:focus { outline: 2px solid var(--ge-ink); outline-offset: 1px; }
.consent { display: flex; gap: 10px; font-size: 14px; color: var(--ge-muted); }
.consent input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--ge-ember); flex: none; }
.form-status:empty { display: none; }
.form-note { font-size: 13px; color: var(--ge-muted); }

/* ---- rodapé ---- */
.footer { padding: 56px var(--ge-gutter) 24px; border-top: 1px solid var(--ge-line); overflow: hidden; }
.footer-top { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 32px; font-size: 14px; color: var(--ge-muted); }
.footer-nav { display: grid; gap: 8px; }
.footer-nav a { text-decoration: none; color: var(--ge-ink); font-weight: 500; }
.footer-brand { font: 800 clamp(48px, 13.5vw, 230px)/.85 var(--ge-font-wordmark); font-stretch: var(--ge-wordmark-stretch); text-transform: uppercase; letter-spacing: -.04em; margin: 40px 0 0; white-space: nowrap; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--ge-line); font-size: 13px; color: var(--ge-muted); }

.floating { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--ge-ink); color: var(--ge-paper); box-shadow: 0 0 0 3px var(--ge-ember); }

/* ---- revelação ---- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ge-ease), transform .6s var(--ge-ease); }
.reveal.in { opacity: 1; transform: none; }
html[data-ws2-motion="reduced"] .reveal { opacity: 1; transform: none; transition: none; }
html[data-ws2-motion="reduced"] .dash::after, html[data-ws2-motion="reduced"] .hero-photo img { animation: none; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-ws2-motion="full"]) .reveal { opacity: 1; transform: none; transition: none; }
  html:not([data-ws2-motion="full"]) .dash::after, html:not([data-ws2-motion="full"]) .hero-photo img { animation: none; }
}

@media (max-width: 1100px) {
  .week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .nav, .header-row > .btn { display: none; }
  .menu-toggle { display: flex; }
  .header:has(.menu-toggle[aria-expanded="true"]) .nav-mobile, .nav-mobile.open { display: flex; flex-direction: column; padding: 4px var(--ge-gutter) 18px; border-top: 1px solid var(--ge-line); }
  .nav-mobile a { padding: 14px 0; border-bottom: 1px solid var(--ge-line); text-decoration: none; font: 600 22px/1.2 var(--ge-font-heading); }
  .hero { min-height: 88vh; }
  .hero-photo::after { background: linear-gradient(0deg, rgba(16, 17, 15, .94) 0%, rgba(16, 17, 15, .7) 48%, rgba(16, 17, 15, .12) 80%); }
  .mods-grid, .week-head, .about-grid, .faq-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .about-photo { max-width: 420px; }
  .footer-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .mods, .contact-form { grid-template-columns: minmax(0, 1fr); }
  .week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .day { min-height: 0; }
  .numbers dt { font-size: 11px; }
}

@media (max-width: 600px) { .footer-brand { white-space: normal; font-size: 21vw; } }