/* Template "fitness-faixas" — pele da Ingrid Dias · Pilates Studio.
   Estúdio ao fim da tarde: aveia, areia, bronze. Sem serifas, sem arcos, sem fundos escuros.
   Regras do brand-kit.md: círculo de linha fina + linhas horizontais; cantos 8px. */
:root {
  --aveia: #EDE6DC;
  --areia: #C9B49A;
  --areia-clara: #DDCFBD;
  --taupe: #8C7B6B;        /* só grafismo */
  --taupe-texto: #6E6052;  /* legendas */
  --bronze: #9A7B4F;       /* linhas e círculo */
  --grafite: #4A4038;      /* texto e botão principal */
  --linha: rgba(74, 64, 56, .18);

  --fonte: "Jost", "Century Gothic", system-ui, sans-serif;
  --margem: 24px;
  --raio: 8px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #D9CEBF; color: var(--grafite); font: 400 16px/1.65 var(--fonte); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
p, h1, h2, h3 { margin: 0; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }

.bio { position: relative; max-width: 480px; min-height: 100vh; margin: 0 auto; background: var(--aveia); overflow: hidden; }

/* ---------- Monograma ---------- */
.mono {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  width: 128px;
  height: 128px;
  margin: -64px auto 0;
  position: relative;
  border: 1px solid var(--bronze);
  border-radius: 50%;
  background: var(--aveia);
}
.mono__letras { font: 300 34px/1 var(--fonte); letter-spacing: .38em; margin-right: -.38em; }
.mono__linha { width: 48px; height: 1px; background: var(--bronze); }
.mono--pequeno { width: 76px; height: 76px; margin: 0 auto; gap: 5px; }
.mono--pequeno .mono__letras { font-size: 20px; }
.mono--pequeno .mono__linha { width: 28px; }

/* ---------- Capa ---------- */
.capa { padding-bottom: 8px; text-align: center; }
.capa__foto img { width: 100%; aspect-ratio: 4 / 3.3; object-fit: cover; object-position: 70% 40%; }
.capa__nome { margin-top: 22px; font: 300 22px/1.3 var(--fonte); letter-spacing: .34em; margin-right: -.34em; text-transform: uppercase; }
.capa__descritor { margin-top: 4px; font: 400 12px/1.5 var(--fonte); letter-spacing: .28em; text-transform: uppercase; color: var(--taupe-texto); }
.capa__frase { max-width: 19em; margin: 22px auto 0; padding: 0 var(--margem); font: 300 21px/1.45 var(--fonte); text-wrap: balance; }
.capa__selos { display: grid; grid-template-columns: repeat(3, 1fr); margin: 26px var(--margem) 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.capa__selos li { display: grid; place-items: center; min-height: 64px; padding: 8px 6px; font: 400 12px/1.35 var(--fonte); letter-spacing: .06em; color: var(--taupe-texto); }
.capa__selos li + li { border-left: 1px solid var(--linha); }

/* ---------- Botões ---------- */
.acoes { display: grid; gap: 10px; padding: 26px var(--margem) 0; }
.principal {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 64px; padding: 12px 20px;
  border-radius: var(--raio);
  background: var(--grafite); color: var(--aveia);
  text-decoration: none;
  transition: background-color .3s ease;
}
.principal svg { width: 22px; height: 22px; flex: none; }
.principal__txt { display: flex; flex-direction: column; text-align: left; font: 500 15px/1.3 var(--fonte); letter-spacing: .14em; text-transform: uppercase; }
.principal__txt small { font: 400 13px/1.4 var(--fonte); letter-spacing: .02em; text-transform: none; color: rgba(237, 230, 220, .85); }
.principal--simples { justify-self: stretch; margin-top: 8px; font: 500 14px var(--fonte); letter-spacing: .14em; text-transform: uppercase; }
.secundarios { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }
.secundario {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; border: 1px solid var(--linha); border-radius: var(--raio);
  font: 400 13px var(--fonte); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  transition: border-color .3s ease;
}
.secundario svg { width: 18px; height: 18px; color: var(--taupe); }

/* ---------- Faixas ---------- */
.faixa { padding: 48px var(--margem) 44px; }
.faixa--areia { margin-top: 40px; background: var(--areia-clara); }
.titulo { font: 300 15px/1.3 var(--fonte); letter-spacing: .36em; text-transform: uppercase; }
.linha { display: block; height: 1px; margin: 14px 0 6px; background: var(--bronze); transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1) !important; opacity: 1 !important; }
.linha.revelar--in { transform: scaleX(1) !important; }
.nota { margin-top: 14px; font-size: 13.5px; color: var(--taupe-texto); }
.etiqueta { font: 400 12px var(--fonte); letter-spacing: .28em; text-transform: uppercase; color: var(--taupe-texto); }

/* aulas numeradas */
.aula { border-bottom: 1px solid var(--linha); }
.aula > summary { display: grid; grid-template-columns: 44px 1fr 28px; align-items: start; gap: 10px; padding: 20px 0; list-style: none; cursor: pointer; }
.aula > summary::-webkit-details-marker { display: none; }
.aula__num { font: 300 26px/1 var(--fonte); color: var(--taupe); }
.aula__txt { display: flex; flex-direction: column; }
.aula__nome { font: 500 17px/1.3 var(--fonte); letter-spacing: .02em; }
.aula__resumo { margin-top: 3px; font-size: 14.5px; line-height: 1.5; }
.aula__meta { margin-top: 6px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--taupe-texto); }
.aula__icone { display: grid; place-items: center; width: 28px; height: 28px; color: var(--grafite); transition: transform .4s ease; }
.aula__icone svg { width: 18px; height: 18px; }
.aula[open] .aula__icone { transform: rotate(45deg); }
.aula__corpo { display: grid; gap: 14px; padding: 0 0 22px 54px; font-size: 15px; }
.lista { border-top: 1px solid var(--linha); }
.preco { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.preco span { display: flex; flex-direction: column; }
.preco b { font-weight: 500; }
.preco small { font-size: 13px; color: var(--taupe-texto); }
.preco em { font: 300 20px var(--fonte); font-style: normal; white-space: nowrap; }
.ponto { padding-left: 16px; position: relative; }
.ponto::before { content: ""; position: absolute; left: 0; top: .8em; width: 8px; height: 1px; background: var(--bronze); }
.contorno { display: flex; align-items: center; justify-content: center; min-height: 48px; border: 1px solid var(--grafite); border-radius: var(--raio); font: 500 13px var(--fonte); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: background-color .3s ease, color .3s ease; }

/* horário semanal */
.dias { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 18px; }
.dias button {
  min-height: 48px; padding: 0; border: 1px solid var(--linha); border-radius: var(--raio); background: transparent;
  font: 400 13px var(--fonte); letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.dias button[aria-selected="true"] { border-color: var(--grafite); background: var(--grafite); color: var(--aveia); }
.sessoes { margin-top: 14px; border-top: 1px solid var(--linha); }
.sessoes li { display: grid; grid-template-columns: 76px 1fr; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--linha); }
.sessoes__hora { font: 300 22px/1 var(--fonte); letter-spacing: .02em; }

/* destaque */
.destaque { background: var(--aveia); }
.destaque__foto { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 45%; }
.destaque__txt { display: grid; gap: 10px; padding: 32px var(--margem) 8px; font-size: 15.5px; }
.destaque__preco { font: 300 54px/1 var(--fonte); letter-spacing: -.01em; }

/* sobre */
.sobre { margin-top: 48px; }
.sobre__foto { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 32% 50%; }
.sobre .faixa { padding-top: 32px; padding-bottom: 8px; font-size: 15.5px; }
.sobre .linha { margin-bottom: 14px; }

/* informações */
.info { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; margin-top: 18px; }
.info__bloco--largo { grid-column: 1 / -1; }
.info h3 { margin-bottom: 6px; font: 400 11px var(--fonte); letter-spacing: .28em; text-transform: uppercase; color: var(--taupe-texto); }
.info p { font-size: 15px; }
.info b { font-weight: 500; }
.texto-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; letter-spacing: .06em; text-underline-offset: 5px; }

/* rodapé */
.rodape { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 44px var(--margem) 104px; text-align: center; font: 400 11px var(--fonte); letter-spacing: .26em; text-transform: uppercase; color: var(--taupe-texto); }
.rodape__assinatura { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 13px; letter-spacing: .04em; text-transform: none; color: var(--grafite); text-underline-offset: 4px; }

/* barra fixa */
.barra {
  position: fixed; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 10;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: min(calc(100% - 24px), 456px); min-height: 54px; border-radius: var(--raio);
  background: var(--grafite); color: var(--aveia);
  font: 500 13px var(--fonte); letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 16px 34px -18px rgba(74, 64, 56, .8);
  transform: translate(-50%, 140%); transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.barra svg { width: 20px; height: 20px; }
.barra--visivel { transform: translate(-50%, 0); }

/* movimento: lento, a respirar */
.revelar { opacity: 0; transform: translateY(14px); transition: opacity 1s ease, transform 1s ease; }
.revelar--in { opacity: 1; transform: none; }

@media (hover: hover) {
  .principal:hover { filter: brightness(.85); }
  .secundario:hover { border-color: var(--bronze); }
  .contorno:hover { background: var(--grafite); color: var(--aveia); }
  .dias button:hover { border-color: var(--grafite); }
}
@media (min-width: 520px) {
  body { padding: 28px 0; }
  .bio { min-height: 0; border-radius: 12px; box-shadow: 0 40px 90px -40px rgba(74, 64, 56, .55); }
}
@media (prefers-reduced-motion: reduce) {
  .revelar, .linha { opacity: 1; transform: none !important; }
  *, *::before, *::after { transition: none !important; }
}

/* ---------- Paletas do simulador (data-paleta no <html>) ---------- */
:root[data-paleta="2"] { /* Sálvia */
  --aveia: #E7EBE4;
  --areia: #B9C4B3;
  --areia-clara: #D3DCCD;
  --taupe: #7F8C79;
  --taupe-texto: #56614F;
  --bronze: #6E7D60;
  --grafite: #36403A;
}
:root[data-paleta="3"] { /* Rosé */
  --aveia: #F1E7E3;
  --areia: #D8BFB6;
  --areia-clara: #E6D3CC;
  --taupe: #9A7F78;
  --taupe-texto: #6E5650;
  --bronze: #9A7064;
  --grafite: #4A3936;
}