/* Centro de Estética Cissa: o fecho da cinta pós-cirúrgica (sites/cissa/LEITURA.md).
   A peça de compressão do pós-operatório fecha por colchetes em três carreiras: fita de colchetes atravessando a página,
   nota do Google impressa na fita, três carreiras na primeira sessão, malha powernet nas faixas, pictogramas das peças.
   Clima claro do site atual, fundo branco da cortina (não creme), linho da poltrona, marrom da marca nos fios,
   chocolate na ação, prata nos colchetes; sem dourado. Schibsted Grotesk nos títulos + DM Sans do site atual.
   N3 sem efeito nenhum. Nada acima de z-index 110. */
:root {
  --branco: #fbfbfa;
  --linho: #e7ddd3;
  --linho-2: #d8cabc;
  --marrom: #8c6b4f;
  --choco: #4a3628;
  --choco-2: #3a2a1f;
  --prata: #a9abae;
  --fundo: var(--branco);
  --tinta: #2a211b;
  --suave: #66584d;
  --marca: var(--choco);
  --marca-2: var(--marrom);
  --linha: rgb(74 54 40 / .16);
  --fonte-titulo: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --fonte-texto: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --raio: 4px;
  --sec: clamp(68px, 8.5vw, 120px);
}
body { font-size: clamp(16px, 1.05vw, 17.5px); line-height: 1.62; }
h1, h2, h3, h4 { font-weight: 600; color: var(--tinta); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.05; }
h3 { font-size: clamp(1.12rem, 1.4vw, 1.3rem); line-height: 1.2; letter-spacing: -0.015em; }
section { padding-block: var(--sec); }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
.rotulo { font: 600 12px/1 var(--fonte-titulo); letter-spacing: .14em; text-transform: uppercase; color: var(--marrom); margin-bottom: 1rem; }

/* Botões: retângulo de canto curto, chocolate */
.botao { border-radius: var(--raio); font: 600 .95rem/1 var(--fonte-titulo); letter-spacing: -0.005em; padding: 1.05em 1.5em; }
.botao:hover { background: var(--choco-2); box-shadow: none; }
.botao--claro { --b-fundo: var(--branco); --b-tinta: var(--choco); }
.botao--claro:hover { background: #fff; }
.ext { display: inline-block; width: .75em; height: .75em; fill: none; stroke: currentColor; stroke-width: 1.4; margin-left: .35em; vertical-align: .05em; }
.trat__pagina { display: inline-flex; align-items: center; min-height: 44px; font: 600 .86rem/1.2 var(--fonte-titulo); color: var(--choco); text-decoration: none; gap: .1em; }
.trat__pagina:hover { color: var(--marrom); }

/* ===== Cabeçalho ===== */
.topo { position: sticky; top: 0; z-index: 50; background: rgb(251 251 250 / .97); border-bottom: 1px solid var(--linha); }
.topo__linha { display: flex; align-items: center; gap: 1.8rem; min-height: 72px; }
.topo__marca { margin-right: auto; display: flex; align-items: center; gap: .65rem; min-height: 44px; color: var(--tinta); }
.topo__marca b { font: 700 1.7rem/1 var(--fonte-titulo); letter-spacing: -0.04em; color: var(--choco); }
.topo__marca span { font: 500 12px/1.2 var(--fonte-titulo); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); padding-left: .65rem; border-left: 1px solid var(--linha); }
.topo__menu { display: flex; gap: 1.4rem; font: 500 14px/1 var(--fonte-titulo); }
.topo__menu a { padding-block: 12px; color: var(--suave); }
.topo__menu a:hover { color: var(--tinta); }
.topo__cta { padding: .85em 1.15em; font-size: .88rem; }
.topo__burger { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 10px; }
.topo__burger span { display: block; height: 2px; background: var(--tinta); margin: 6px 0; transition: transform .3s; }
.menu-aberto .topo__burger span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-aberto .topo__burger span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ===== Motivo 1: a fita do fecho de colchetes ===== */
.fecho { position: relative; height: 44px; background-color: var(--linho);
  background-image: var(--fecho), repeating-linear-gradient(90deg, rgb(74 54 40 / .07) 0 1px, transparent 1px 4px);
  background-size: 36px 44px, auto; background-repeat: repeat-x, repeat; background-position: center top, 0 0;
  border-block: 1px solid var(--linho-2); }
.fecho--hero { margin-top: -22px; z-index: 2; display: flex; justify-content: center; align-items: center; }
/* Motivo 2: a nota do Google impressa na fita */
.fecho__nota { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; background: var(--linho);
  font: 600 12px/1 var(--fonte-titulo); letter-spacing: .15em; text-transform: uppercase; color: var(--choco); white-space: nowrap;
  box-shadow: -10px 0 0 var(--linho), 10px 0 0 var(--linho); }
.fecho__nota::before, .fecho__nota::after { content: ""; position: absolute; top: 50%; width: 1px; height: 18px; translate: 0 -50%; background: var(--marrom); opacity: .5; }
.fecho__nota::before { left: 0; } .fecho__nota::after { right: 0; }
.fecho__nota:hover { color: var(--marrom); }

/* ===== Hero ===== */
.hero { padding-block: clamp(20px, 2.4vw, 32px) var(--sec); }
.hero__foto { margin: 0; position: relative; height: min(36vh, 360px); min-height: 260px; overflow: hidden; border-radius: var(--raio) var(--raio) 0 0; background: #eef0f1; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 15%; }
.hero__texto { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(28px, 4vw, 64px); align-items: end; padding-top: clamp(30px, 3.6vw, 52px); }
.hero h1 { font-size: clamp(2.5rem, 4.9vw, 4.6rem); line-height: .98; letter-spacing: -0.045em; font-weight: 600; }
.hero__lado { display: grid; gap: 1rem; justify-items: start; padding-bottom: .4rem; }
.hero__lado p { color: var(--suave); font-size: 1.05em; }
.hero__bio { font: 600 .9rem/1.3 var(--fonte-titulo); color: var(--marrom) !important; }
.hero__lado .botao { margin-top: .5rem; }

/* ===== Cabeça de seção ===== */
.cabeca { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 4vw, 64px); align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.cabeca p { color: var(--suave); max-width: 44ch; }
.cabeca--larga { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }

/* ===== Tratamentos: linhas com fio ===== */
.trat__lista { border-top: 1px solid var(--linha); }
.trat { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto; gap: clamp(16px, 3vw, 48px); align-items: baseline; padding: 1.5rem 0; border-bottom: 1px solid var(--linha); }
.trat h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); }
.trat p { color: var(--suave); }
.trat__agenda { margin-top: 1.6rem; color: var(--suave); font-size: .95rem; }
.trat__agenda span { font: 600 12px/1 var(--fonte-titulo); letter-spacing: .14em; text-transform: uppercase; color: var(--marrom); margin-right: .6rem; }

/* ===== Motivo 4 e 5: faixa de malha powernet com as peças ===== */
.cirurgias { background-color: var(--linho); background-image: var(--malha); background-size: 10.392px 18px; }
.cirurgias .cabeca p { color: #55483e; }
.grupos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 28px); }
.grupo { background: var(--branco); border-radius: var(--raio); padding: clamp(20px, 2.4vw, 32px); border: 1px solid var(--linho-2); }
.grupo__cabeca { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; padding-bottom: 1.2rem; border-bottom: 1px solid var(--linha); margin-bottom: .4rem; }
.peca { width: 96px; height: 64px; fill: none; stroke: var(--choco); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.peca .peca__fino { stroke-width: 1; stroke: var(--marrom); }
.peca .peca__trac { stroke-dasharray: 3 3; }
.peca .peca__gancho { stroke: #7f8185; stroke-width: 1.8; }
.grupo__peca { font: 600 12px/1.3 var(--fonte-titulo); letter-spacing: .12em; text-transform: uppercase; color: var(--marrom); margin-top: .35rem; }
.grupo__lista li { padding: 1.1rem 0; border-bottom: 1px solid var(--linha); }
.grupo__lista li:last-child { border-bottom: 0; padding-bottom: 0; }
.grupo__lista h4 { font-size: 1.08rem; letter-spacing: -0.015em; }
.grupo__lista h4 a:hover { color: var(--marrom); }
.grupo__lista p { color: var(--suave); font-size: .95rem; margin-top: .4rem; }
.grupo__wa { display: inline-flex; align-items: center; gap: .45em; min-height: 44px; font: 600 .85rem/1 var(--fonte-titulo); color: var(--choco); }
.grupo__wa svg { width: 1.05em; height: 1.05em; }
.grupo__wa:hover { color: var(--marrom); }

/* ===== Frase do Instagram ===== */
.frase { padding-block: clamp(64px, 8vw, 112px); text-align: center; }
.frase__texto { font: 600 clamp(1.7rem, 3.6vw, 3.1rem)/1.1 var(--fonte-titulo); letter-spacing: -0.035em; max-width: 22ch; margin-inline: auto; color: var(--choco); }
.frase__fonte { display: inline-flex; align-items: center; min-height: 44px; margin-top: 1rem; font: 600 13px/1 var(--fonte-titulo); letter-spacing: .1em; color: var(--marrom); }

/* ===== Sobre ===== */
.sobre { padding-top: 0; }
.sobre__grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.sobre__foto { margin: 0; border-radius: var(--raio); overflow: hidden; aspect-ratio: 900 / 1133; background: var(--linho); }
.sobre__foto img { width: 100%; height: 100%; object-fit: cover; }
.sobre__texto { display: grid; gap: 1rem; padding-top: clamp(0px, 3vw, 40px); }
.sobre__texto h2 { max-width: 16ch; }
.sobre__texto > p { color: var(--suave); max-width: 60ch; }
.sobre__linha { font: 600 clamp(1.2rem, 1.9vw, 1.55rem)/1.25 var(--fonte-titulo) !important; letter-spacing: -0.02em; color: var(--choco) !important; padding: .4rem 0 .4rem 1rem; border-left: 3px solid var(--linho-2); }
.sobre__registro { font-size: .9rem; color: var(--suave); padding-top: 1rem; border-top: 1px solid var(--linha); }

/* ===== Espaço ===== */
.espaco { padding-top: 0; }
.espaco__grade { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.espaco__foto { display: block; overflow: hidden; border-radius: var(--raio); background: var(--linho); }
.espaco__foto img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.espaco__foto--rec, .espaco__foto--recepcao2 { grid-column: span 3; }
.espaco__foto--banheiro, .espaco__foto--entrada, .espaco__foto--entrada2 { grid-column: span 2; }
.espaco__foto--banheiro img { object-position: 50% 60%; }
.espaco__cuidados { display: flex; flex-wrap: wrap; gap: .6rem 2rem; margin-top: 1.6rem; color: var(--suave); font-size: .95rem; }
.espaco__cuidados li { display: flex; align-items: center; gap: .6rem; }
.marcador { width: 22px; height: 12px; flex: none; fill: none; stroke: var(--marrom); stroke-width: 1.5; stroke-linecap: round; }
.espaco__frase { margin-top: 1.4rem; font: 600 1.05rem/1.3 var(--fonte-titulo); color: var(--choco); }
.espaco__frase a { display: inline-flex; align-items: center; min-height: 44px; }

/* ===== Motivo 3: as três carreiras ===== */
.primeira { background: #f3efea; }
.passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.passo { display: grid; gap: .55rem; align-content: start; }
.carreiras { width: 100%; max-width: 260px; height: auto; margin-bottom: .6rem; }
.carreiras__fita { fill: var(--linho); }
.carreiras__lado { fill: var(--linho-2); }
.ilhos { fill: none; stroke: #c3c5c8; stroke-width: 1.5; }
.ilhos--preso { stroke: var(--choco); stroke-width: 1.8; }
.gancho { fill: none; stroke: #7f8185; stroke-width: 2.1; stroke-linecap: round; }
.gancho__pe { fill: #7f8185; }
.carreiras__num { font: 600 12px var(--fonte-titulo); fill: var(--suave); text-anchor: middle; }
.passo__num { font: 600 12px/1 var(--fonte-titulo); letter-spacing: .14em; text-transform: uppercase; color: var(--marrom); }
.passo p:last-child { color: var(--suave); }
.levar { margin-top: clamp(28px, 4vw, 48px); padding: 1.1rem 1.3rem; background: var(--branco); border-radius: var(--raio); border: 1px solid var(--linho-2); color: var(--suave); }
.levar b { font-family: var(--fonte-titulo); color: var(--choco); margin-right: .5rem; }

/* ===== Perguntas: 3 colunas por momento ===== */
.duvidas__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.5vw, 56px); }
.duvidas__grupo h3 { display: flex; align-items: center; gap: .6rem; font-size: 1rem; letter-spacing: .02em; text-transform: uppercase; color: var(--marrom); padding-bottom: .9rem; border-bottom: 1px solid var(--linha); }
.duvidas__grupo h3 .marcador { stroke: var(--choco); }
.duvidas dt { font: 600 1.05rem/1.3 var(--fonte-titulo); letter-spacing: -0.01em; margin-top: 1.3rem; }
.duvidas dd { margin: .45rem 0 0; color: var(--suave); font-size: .95rem; }

/* ===== Onde estamos + contato ===== */
.onde { background: #f3efea; }
.onde__grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.onde__end { margin-top: 1.2rem; font-size: 1.1rem; }
.onde__end span { display: inline-block; margin-top: .4rem; color: var(--suave); font-size: .95rem; }
.onde__horario { margin-top: 1.4rem; border-collapse: collapse; width: 100%; max-width: 380px; }
.onde__horario th, .onde__horario td { text-align: left; padding: .65rem 0; border-bottom: 1px solid var(--linha); font-weight: 400; }
.onde__horario th { color: var(--suave); }
.onde__horario td { text-align: right; font-family: var(--fonte-titulo); font-weight: 600; }
.onde__links { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin-top: 1rem; }
.contato { background: var(--branco); border: 1px solid var(--linho-2); border-radius: var(--raio); padding: clamp(22px, 3vw, 40px); display: grid; gap: 1.1rem; }
.contato h3 { font-size: 1.35rem; }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; transition: opacity .3s; }
.campo { display: grid; gap: .4rem; font: 500 .85rem/1.2 var(--fonte-titulo); color: var(--suave); }
.campo--largo { grid-column: 1 / -1; }
.campo input, .campo textarea { width: 100%; padding: .85rem .9rem; border: 1px solid var(--linho-2); border-radius: var(--raio); background: #fff; font: 400 1rem/1.4 var(--fonte-texto); color: var(--tinta); min-height: 48px; }
.campo input:focus, .campo textarea:focus { outline: 2px solid var(--marrom); outline-offset: 1px; }
.contato .botao { justify-self: start; }
.form-ok { display: grid; gap: .2rem; }

/* ===== Fecho final ===== */
.final { padding-top: 0; background-color: var(--choco); background-image: var(--malha-escura); background-size: 10.392px 18px; color: var(--branco); }
.fecho--final { border-top: 0; }
.final__texto { padding-top: clamp(56px, 7vw, 96px); display: grid; justify-items: center; text-align: center; gap: 1.1rem; }
.final h2 { color: var(--branco); font-size: clamp(2rem, 4.2vw, 3.6rem); }
.final p { color: #e8ddd2; max-width: 52ch; }

/* ===== Rodapé ===== */
.rodape { background: var(--choco-2); color: #d9cec4; padding-block: 48px 28px; font-size: .92rem; }
.rodape__grade { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 28px; }
.rodape__grade p + p { margin-top: .5rem; }
.rodape__marca { color: var(--branco); }
.rodape__marca b { font: 700 1.4rem/1 var(--fonte-titulo); letter-spacing: -0.04em; margin-right: .4rem; }
.rodape__titulo { font: 600 12px/1 var(--fonte-titulo); letter-spacing: .14em; text-transform: uppercase; color: #bfae9e; margin-bottom: .6rem; }
.rodape a { display: inline-block; padding-block: 10px; }
.rodape__legal { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgb(255 255 255 / .12); color: #b5a698; font-size: .85rem; }

/* ===== Responsivo ===== */
@media (max-width: 1100px) {
  .topo__menu { gap: 1rem; font-size: 13px; }
}
@media (max-width: 980px) {
  .topo__menu { display: none; }
  .menu-aberto .topo__menu { display: flex; position: fixed; inset: 72px 0 auto 0; flex-direction: column; gap: 0; padding: 8px 20px 20px; background: var(--branco); border-bottom: 1px solid var(--linha); font-size: 17px; }
  .menu-aberto .topo__menu a { padding-block: 14px; border-bottom: 1px solid var(--linha); color: var(--tinta); }
  .topo__burger { display: block; }
  .hero__texto, .cabeca, .cabeca--larga { grid-template-columns: 1fr; align-items: start; }
  .trat { grid-template-columns: 1fr; gap: .5rem; }
  .grupos { grid-template-columns: 1fr; }
  .sobre__grade, .onde__grade { grid-template-columns: 1fr; }
  .sobre__foto { max-width: 520px; }
  .passos, .duvidas__grade { grid-template-columns: 1fr; }
  .passo { grid-template-columns: 150px minmax(0, 1fr); column-gap: 18px; }
  .passo .carreiras { grid-row: span 3; }
  .rodape__grade { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .topo__cta { display: none; }
  .topo__marca b { font-size: 1.5rem; }
  .hero__foto { height: auto; min-height: 0; aspect-ratio: 700 / 520; }
  .hero__foto img { object-position: 50% 50%; }
  .fecho__nota { font-size: 12px; letter-spacing: .08em; padding: 0 12px; }
  .hero h1 { font-size: clamp(2.2rem, 10.5vw, 3rem); }
  .espaco__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .espaco__foto--rec { grid-column: 1 / -1; }
  .espaco__foto--recepcao2, .espaco__foto--banheiro, .espaco__foto--entrada, .espaco__foto--entrada2 { grid-column: span 1; }
  .passo { grid-template-columns: 1fr; }
  .passo .carreiras { grid-row: auto; max-width: 200px; }
  .campos { grid-template-columns: 1fr; }
  .contato .botao { justify-self: stretch; }
}