/* cs · A consulta — verde, rotina em cinco derivações */
.cs { --cs-borda: max(var(--marg), (100% - var(--largura)) / 2); }

.cs-malha { position: absolute; inset: 0; z-index: -1; overflow: clip; pointer-events: none; }
.cs-m { position: absolute; border-radius: 50%; }
.cs-m1 { width: 70vmax; height: 70vmax; right: -24vmax; top: -18vmax; background: radial-gradient(closest-side, rgb(29 74 55 / .9), transparent); }
.cs-m2 { width: 60vmax; height: 60vmax; left: -26vmax; bottom: -20vmax; background: radial-gradient(closest-side, rgb(42 13 11 / .55), transparent); }

/* ---------- abertura ---------- */
.cs-abre {
  display: grid;
  grid-template-columns: var(--cs-borda) minmax(0, 1fr) minmax(0, 1.02fr);
  grid-template-rows: auto auto;
  column-gap: clamp(2rem, 4vw, 4.5rem);
}
.cs-texto { grid-column: 2; grid-row: 1; padding-top: clamp(0rem, 2vw, 2rem); position: relative; z-index: 2; }
.cs-rot { margin: 0 0 1.6rem; }
.cs-titulo .ts-sobre { font-size: clamp(1.3rem, .8rem + 1.9vw, 2.6rem); }
.cs-titulo .ts-forte { font-size: clamp(3.4rem, 1.2rem + 7.4vw, 9.2rem); line-height: .84; letter-spacing: -.01em; }
.cs-f1 { margin: clamp(2rem, 4vw, 3rem) 0 0; max-width: 40ch; padding-left: 1.2rem; border-left: 2px solid var(--vermelho-caneta); }
.cs-f1 p { margin: 0; font-size: clamp(1.15rem, .95rem + .6vw, 1.45rem); font-weight: 300; line-height: 1.45; color: var(--creme-80); }
.cs-f1 strong { font-weight: 500; color: var(--creme); }
.cs-f1 footer { margin-top: 1rem; font-size: 1rem; }
.cs-v { background: none; color: var(--creme); font-weight: 500; text-decoration: underline; text-decoration-color: rgb(224 83 63 / .0); text-decoration-thickness: 2px; text-underline-offset: .22em; transition: text-decoration-color .6s; }
.cs-v.on, html:not(.js) .cs-v { text-decoration-color: var(--vermelho-caneta); }

.cs-foto { grid-column: 3 / -1; grid-row: 1 / span 2; margin: calc(-1 * var(--respiro)) 0 0; position: relative; align-self: start; }
.cs-foto img { display: block; width: 100%; height: min(128svh, 1300px); object-fit: cover; object-position: 50% 0%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18%), linear-gradient(to top, transparent 0, #000 24%, #000 92%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 18%), linear-gradient(to top, transparent 0, #000 24%, #000 92%, transparent); mask-composite: intersect; }

/* ---------- folha de cinco derivações ---------- */
.cs-folha {
  grid-column: 2 / 4; grid-row: 2; margin: clamp(2.5rem, 5vw, 4rem) 0 0; position: relative; z-index: 3;
  width: min(100% - 4vw, 1180px); justify-self: start;
  background-color: var(--papel); color: var(--tinta);
  background-image:
    linear-gradient(rgb(157 23 21 / .2) 1px, transparent 1px),
    linear-gradient(90deg, rgb(157 23 21 / .2) 1px, transparent 1px),
    linear-gradient(rgb(157 23 21 / .08) 1px, transparent 1px),
    linear-gradient(90deg, rgb(157 23 21 / .08) 1px, transparent 1px);
  background-size: 30px 30px, 30px 30px, 6px 6px, 6px 6px;
  border-radius: 4px; padding: 1rem clamp(.9rem, 2vw, 1.6rem) 1.1rem;
  transform: rotate(-1.2deg);
  box-shadow: 0 34px 60px -26px rgb(0 0 0 / .7), 0 8px 18px -8px rgb(0 0 0 / .45);
}
.cs-folha-cab { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--f-nota); font-size: var(--t-mini); color: var(--vermelho); letter-spacing: .04em; padding-bottom: .5rem; border-bottom: 1px solid rgb(157 23 21 / .35); }
.cs-linhas { position: relative; }
.cs-ecg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cs-linha { --cs-lh: clamp(92px, 8.4vw, 124px); position: relative; height: var(--cs-lh); display: flex; align-items: flex-end; gap: .7rem; padding-bottom: max(0px, calc(var(--cs-lh) * .26 - .75em)); }
.cs-linha + .cs-linha { border-top: 1px dashed rgb(157 23 21 / .22); }
.cs-der { font-family: var(--f-nota); font-size: .8rem; color: var(--vermelho); opacity: .8; padding-top: .2rem; }
.cs-rotina { font-size: clamp(1.1rem, .9rem + .7vw, 1.55rem); background: rgb(243 239 230 / .88); padding: 0 .3em; border-radius: 3px; position: relative; z-index: 1; }
.js .cs-rotina { opacity: 0; translate: -8px 0; transition: opacity .5s var(--curva), translate .5s var(--curva); }
.js .cs-rotina.on { opacity: 1; translate: none; }
.cs-folha-pe { margin: .6rem 0 0; text-align: right; font-size: 1.05rem; }

/* ---------- passos ---------- */
.cs-passos {
  display: grid; grid-template-columns: var(--cs-borda) minmax(0, .85fr) minmax(0, 1.15fr) var(--cs-borda);
  column-gap: clamp(2rem, 5vw, 5rem); margin-top: clamp(5rem, 10vw, 9rem);
}
.cs-foto2 { grid-column: 1 / 3; margin: 0; position: relative; align-self: stretch; }
.cs-foto2 img { position: sticky; top: 5.5rem; display: block; width: 100%; height: min(88svh, 920px); object-fit: cover; object-position: 40% 20%;
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 18%); mask-image: linear-gradient(to left, transparent 0, #000 18%); }
.cs-lista { grid-column: 3; }
.cs-lista-tit { margin: 0 0 2.8rem; text-transform: uppercase; line-height: .92; }
.cs-lt1 { display: block; font-size: clamp(1.4rem, .9rem + 1.6vw, 2.3rem); font-weight: 300; color: var(--creme-80); margin-bottom: .3em; }
.cs-lt2 { display: block; font-size: clamp(2.3rem, 1.1rem + 3.4vw, 4.4rem); font-weight: 700; }
.cs-lista-tit .rotulo { display: block; margin-bottom: .9rem; letter-spacing: .04em; }
.cs-lista ol { list-style: none; margin: 0; padding: 0; }
.cs-lista li { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); column-gap: 1rem; padding: 2rem 0 2.2rem; border-top: 1px solid var(--linha-escuro); }
.cs-lista li > * { grid-column: 2; }
.cs-n { grid-column: 1 !important; grid-row: 1 / span 3; font-family: var(--f-titulo); font-weight: 700; font-size: 3.6rem; color: transparent; -webkit-text-stroke: 1.5px var(--vermelho-caneta); line-height: .8; }
.cs-lista h4 { margin: 0 0 .6rem; font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.1rem); font-weight: 700; text-transform: uppercase; line-height: 1; }
.cs-lista p { margin: 0 0 .7rem; color: var(--creme-80); max-width: 46ch; }
.cs-cita { color: var(--creme) !important; font-size: 1.02em; line-height: 1.5; }
.cs-cita-longa { font-weight: 300; font-size: clamp(1.15rem, 1rem + .4vw, 1.35rem); line-height: 1.45; padding-left: 1rem; border-left: 2px solid var(--vermelho-caneta); }
.cs-fecho { margin-top: 1.5rem; padding-top: 2rem; border-top: 1px solid var(--linha-escuro); display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; align-items: center; }
.cs-fecho p { margin: 0; color: var(--creme-80); }

/* ---------- celular / tablet ---------- */
@media (max-width: 900px) {
  .cs-abre { grid-template-columns: var(--marg) minmax(0, 1fr) var(--marg); grid-template-rows: auto; }
  .cs-texto { grid-column: 2; grid-row: 1; }
  .cs-foto { grid-column: 1 / -1; grid-row: 2; margin: 2.5rem 0 0; }
  .cs-foto img { height: auto; aspect-ratio: 4 / 5; object-position: 50% 8%;
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 25%); mask-image: linear-gradient(to top, transparent 0, #000 25%); }
  .cs-folha { grid-column: 2; grid-row: 3; margin-top: -22vw; width: 100%; }
  .cs-passos { grid-template-columns: var(--marg) minmax(0, 1fr) var(--marg); margin-top: 5rem; }
  .cs-foto2 { grid-column: 1 / -1; }
  .cs-foto2 img { position: static; height: auto; aspect-ratio: 4 / 5; object-position: 40% 10%; -webkit-mask-image: linear-gradient(to top, transparent 0, #000 22%); mask-image: linear-gradient(to top, transparent 0, #000 22%); }
  .cs-lista { grid-column: 2; margin-top: 3rem; }
}
@media (max-width: 520px) {
  .cs-folha-cab span + span { display: none; }
  .cs-linha { align-items: flex-start; padding: .3rem 0 0; }
  .cs-lista li { grid-template-columns: minmax(0, 1fr); }
  .cs-lista li > *, .cs-n { grid-column: 1 !important; }
  .cs-n { grid-row: auto; font-size: 2.6rem; margin-bottom: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .js .cs-rotina { opacity: 1; translate: none; }
  .cs-v { text-decoration-color: var(--vermelho-caneta); }
}