/* ==========================================================================
   Vazto — Cases (the list and the single case)

   Built on the site's own system: `vazto.css` tokens (--shell, --block,
   --teal, --cyan, grounds g-paper / g-tint / g-dark / g-hero), the global
   header and footer, the Home's closing band. Nothing from the 2024 layout
   (its colours, type, boxed grids) is carried over: only its information
   order.

   The projects are the protagonists: images first, then client, then
   project. No filters, no tabs, no search, by brief.
   ========================================================================== */

/* --------------------------------------------------------------- hero */
/* centred and compact: the title and the intro, no images (the cases
   below are the images). The bottom padding is where the first row of
   cards rises into the hero: the teal ends under the covers, not in a gap. */
.cs-hero{ position:relative; overflow:hidden; padding-block:clamp(120px,12vw,152px) clamp(112px,11vw,148px); text-align:center }
.cs-hero .shell{ display:grid; justify-items:center }
.cs-hero .h1{ color:#fff; max-inline-size:14ch; margin-inline:auto }
.cs-hero .lede{ margin-block-start:18px; margin-inline:auto; max-inline-size:62ch; color:var(--on-dark-soft) }
.cs-hero__destaque{ margin:18px auto 0; max-inline-size:30ch; font-family:var(--display); font-weight:600; font-size:clamp(22px,2.5vw,30px); line-height:1.25; letter-spacing:-.015em; color:var(--cyan-lit) }
.cs-hero .lede{ margin-block-start:14px }
.cs-hero__fecho{ margin-block-start:16px; font-family:var(--display); font-weight:600; font-size:16px; letter-spacing:.01em; color:#fff }
.cs-hero + #lista{ display:flow-root; padding-block-start:0; overflow:visible; z-index:1 }
.cs-hero + #lista .cs-grade{ position:relative; z-index:2; margin-block-start:clamp(-88px,-8vw,-64px) }

/* the breadcrumb: one quiet line, not a navigation bar */
.cs-trilha{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:13.5px; color:var(--on-dark-soft); margin-block-end:22px }
.cs-trilha a{ color:var(--on-dark-soft); text-decoration:none; border-block-end:1px solid transparent; transition:color .2s, border-color .2s }
.cs-trilha a:hover{ color:#fff; border-color:rgba(255,255,255,.4) }
.cs-trilha span[aria-hidden]{ opacity:.5 }
.cs-trilha [aria-current]{ color:var(--cyan-lit) }

/* ----------------------------------------------------------- case cards */
.cs-grade{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,24px) }
.cs-card{ position:relative; display:block; border-radius:20px; overflow:hidden; isolation:isolate; color:#fff; text-decoration:none;
  background:#071619; box-shadow:0 22px 50px -36px rgba(1,26,32,.85) }
.cs-card__img{ display:block; inline-size:100%; aspect-ratio:310/382; object-fit:cover; transition:transform .9s var(--ease), filter .6s ease }
.cs-card::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(3,7,13,0) 38%,rgba(3,7,13,.55) 64%,rgba(3,7,13,.92) 100%); transition:opacity .5s ease }
.cs-card__txt{ position:absolute; z-index:2; inset-inline:0; inset-block-end:0; display:grid; gap:10px; padding:22px 22px 24px }
.cs-card__logo{ display:grid; place-items:center; justify-self:start; padding:8px 12px; border-radius:10px; background:#fff }
.cs-card__logo img{ display:block; inline-size:var(--lw,auto); block-size:var(--lh,30px); max-inline-size:100%; object-fit:contain }
.cs-card__cli{ font-family:var(--display); font-weight:700; font-size:clamp(20px,2.1vw,24px); line-height:1.12; letter-spacing:-.02em }
.cs-card__proj{ font-size:14.5px; line-height:1.45; color:rgba(241,247,247,.82); max-inline-size:34ch }
.cs-card__cta{ display:inline-flex; align-items:center; gap:8px; font-family:var(--display); font-weight:600; font-size:14.5px; color:var(--cyan-lit) }
.cs-card__cta svg{ inline-size:16px; block-size:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; transition:transform .35s var(--ease) }
.cs-card__estado{ justify-self:start; padding:5px 12px; border-radius:99px; font-size:12.5px; font-weight:600; letter-spacing:.04em;
  color:rgba(241,247,247,.86); box-shadow:inset 0 0 0 1px rgba(241,247,247,.32); background:rgba(3,7,13,.35) }

a.cs-card:focus-visible{ outline:2px solid var(--cyan); outline-offset:4px }
@media (hover:hover){
  a.cs-card:hover .cs-card__img{ transform:scale(1.045) }
  a.cs-card:hover::after{ opacity:.92 }
  a.cs-card:hover .cs-card__cta svg{ transform:translateX(4px) }
}
@media (prefers-reduced-motion:reduce){
  .cs-card__img,.cs-card__cta svg{ transition:none }
  a.cs-card:hover .cs-card__img{ transform:none }
}

/* the featured case: the only one with a full page, so it reads as one */
.cs-destaque{ grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); background:linear-gradient(150deg,#0b3d42 0%,#062429 55%,#03070d 100%) }
.cs-destaque::after{ display:none }
.cs-destaque .cs-card__img{ aspect-ratio:auto; block-size:100%; min-block-size:420px }
.cs-destaque .cs-card__txt{ position:relative; align-content:center; gap:16px; padding:clamp(28px,4vw,52px) }
.cs-destaque .cs-card__cli{ font-size:clamp(30px,3.6vw,44px) }
.cs-destaque .cs-card__proj{ font-size:16.5px; max-inline-size:40ch }
.cs-destaque .cs-card__logo{ background:transparent; padding:0; block-size:auto }
.cs-destaque .cs-card__logo img{ block-size:auto; inline-size:min(240px,70%); max-inline-size:none }

@media (max-width:979px){
  .cs-grade{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .cs-destaque{ grid-template-columns:minmax(0,1fr) }
  .cs-destaque .cs-card__img{ aspect-ratio:16/10; min-block-size:0 }
}
@media (max-width:599px){
  .cs-grade{ grid-template-columns:minmax(0,1fr) }
  .cs-card__img{ aspect-ratio:4/4.2 }
  .cs-card__cli{ font-size:22px }
}

/* ------------------------------------------------------ the single case
   A case reads as a chapter sequence, each on its own ground:
   hero (petrol) → summary, context, objective (paper) → specialties and the
   six fronts (dark) → where it acted (tint, with a dark panel) → the site
   (paper) → the brand gallery (tint) → other cases (dark, compact).
   Icons: one inline sprite, 24px line glyphs, the Home's drawing. */
.cs-sprite{ position:absolute; inline-size:0; block-size:0; overflow:hidden }
.cs-ico{ inline-size:24px; block-size:24px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }

/* hero: a technical grid fades in behind the image, corner marks frame it */
.cs-caso-hero{ position:relative; overflow:hidden; padding-block:clamp(116px,12vw,150px) clamp(52px,6vw,84px) }
.cs-caso-hero::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(110,245,245,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(110,245,245,.07) 1px,transparent 1px);
  background-size:56px 56px; background-position:center;
  -webkit-mask-image:radial-gradient(60% 70% at 78% 45%,#000 0%,transparent 72%); mask-image:radial-gradient(60% 70% at 78% 45%,#000 0%,transparent 72%) }
.cs-caso-hero .shell{ position:relative; z-index:2; display:grid; gap:clamp(30px,4.4vw,64px); align-items:center }
.cs-caso-hero__logo{ display:block; inline-size:min(300px,70%); block-size:auto; margin-block-end:26px }
.cs-caso-hero .h1{ color:#fff; font-size:clamp(31px,4.3vw,54px); max-inline-size:17ch }
.cs-caso-hero .lede{ margin-block-start:18px; max-inline-size:46ch }
.cs-etiquetas{ display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 0; padding:0; list-style:none }
.cs-etiquetas li{ display:inline-flex; align-items:center; gap:10px; padding:5px 16px 5px 5px; border-radius:99px; font-size:15px; font-weight:600;
  color:var(--on-dark); background:rgba(241,247,247,.06); box-shadow:inset 0 0 0 1px rgba(110,245,245,.22) }
.cs-etiquetas__ico{ display:grid; place-items:center; inline-size:32px; block-size:32px; border-radius:50%; background:var(--esp) }
.cs-etiquetas__ico .cs-ico{ inline-size:20px; block-size:20px }
.cs-caso-hero__fig{ position:relative; margin:0; padding:14px }
.cs-caso-hero__fig::before,.cs-caso-hero__fig::after{ content:""; position:absolute; inline-size:48px; block-size:48px; border:0 solid var(--cyan); opacity:.7 }
.cs-caso-hero__fig::before{ inset-block-start:0; inset-inline-start:0; border-block-start-width:2px; border-inline-start-width:2px; border-start-start-radius:10px }
.cs-caso-hero__fig::after{ inset-block-end:0; inset-inline-end:0; border-block-end-width:2px; border-inline-end-width:2px; border-end-end-radius:10px }
.cs-caso-hero__fig img{ display:block; inline-size:100%; aspect-ratio:3/2; object-fit:cover; border-radius:20px;
  box-shadow:0 34px 80px -42px rgba(0,0,0,.95), 0 0 0 1px rgba(7,210,210,.2) }
.cs-caso-hero__fig figcaption{ position:absolute; inset-inline-start:34px; inset-block-end:34px; padding:6px 12px; border-radius:99px;
  font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:rgba(3,7,13,.55); backdrop-filter:blur(4px) }
@media (min-width:980px){ .cs-caso-hero .shell{ grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr) } }

/* summary: four modules, icon + label + information */
.cs-resumo{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:0 }
.cs-resumo__i{ display:grid; align-content:start; gap:6px; padding:22px 22px 24px; border-radius:18px; background:#fff;
  box-shadow:0 0 0 1px var(--rule), 0 18px 40px -34px rgba(1,26,32,.5) }
.cs-resumo__i .cs-ico{ inline-size:46px; block-size:46px; padding:11px; margin-block-end:10px; border-radius:14px; color:var(--teal); background:rgba(2,115,115,.08) }
.cs-resumo dt{ font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal) }
.cs-resumo dd{ margin:0; font-family:var(--display); font-weight:600; font-size:clamp(17px,1.6vw,19px); line-height:1.3; color:var(--text) }
.cs-resumo dd small{ display:block; margin-block-start:4px; font-family:var(--body); font-weight:400; font-size:14.5px; color:var(--text-soft) }

/* context and objective: two numbered chapters, side by side */
.cs-capitulos{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:clamp(36px,5.5vw,80px); margin-block-start:clamp(48px,6vw,76px) }
.cs-cap{ display:grid; align-content:start; gap:18px }
.cs-cap__n{ display:flex; align-items:center; gap:14px; font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:.12em; color:var(--teal) }
.cs-cap__n::after{ content:""; inline-size:56px; block-size:1px; background:currentColor; opacity:.5 }
.cs-cap > p{ font-size:17px; line-height:1.62; color:var(--text-soft) }
.cs-nota{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:start; padding:18px 20px; border-radius:16px;
  background:rgba(2,115,115,.05); box-shadow:inset 0 0 0 1px rgba(2,115,115,.12) }
.cs-nota .cs-ico{ color:var(--teal); margin-block-start:2px }
.cs-nota p{ font-size:16px; line-height:1.55; color:var(--text) }
.cs-nota strong{ display:block; margin-block-end:4px; font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal) }
.cs-nota--forte{ background:linear-gradient(140deg,#0c3033 0%,#071619 70%); box-shadow:0 22px 44px -32px rgba(1,26,32,.9) }
.cs-nota--forte .cs-ico,.cs-nota--forte strong{ color:var(--cyan) }
.cs-nota--forte p{ color:#fff; font-family:var(--display); font-weight:500; font-size:clamp(17px,1.7vw,19px); line-height:1.4 }
.cs-objetivo blockquote{ margin:0; padding-inline-start:22px; border-inline-start:3px solid var(--cyan);
  font-family:var(--display); font-weight:500; font-size:clamp(20px,2.2vw,27px); line-height:1.36; letter-spacing:-.014em; color:var(--text) }
.cs-objetivo .lede{ max-inline-size:60ch }
.cs-objetivo__dig{ display:flex; gap:14px; align-items:flex-start; padding-block-start:18px; border-block-start:1px solid var(--rule); font-size:16px; line-height:1.55; color:var(--text) }
.cs-objetivo__dig .cs-ico{ color:var(--teal) }
@media (max-width:979px){
  .cs-resumo{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .cs-capitulos{ grid-template-columns:minmax(0,1fr) }
}
@media (max-width:559px){
  .cs-resumo{ grid-template-columns:minmax(0,1fr); gap:10px }
  .cs-resumo__i{ grid-template-columns:auto minmax(0,1fr); gap:2px 16px; padding:18px }
  .cs-resumo__i .cs-ico{ grid-row:1 / span 2; margin:0 }
}

/* specialties next to the section title, then the six fronts as one network:
   a spine down the middle, each front tied to it */
.cs-feito__topo{ display:grid; gap:24px 56px; align-items:end; margin-block-end:clamp(36px,5vw,56px) }
.cs-feito__topo .head{ margin-block-end:0 }
.cs-feito__topo .lede{ margin-block-start:14px }
.cs-esp{ padding:20px 22px; border-radius:20px; box-shadow:inset 0 0 0 1px var(--rule-dark); background:rgba(241,247,247,.03) }
.cs-esp__t{ font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan) }
.cs-esp ul{ display:grid; gap:14px; margin:14px 0 0; padding:0; list-style:none }
.cs-esp li{ display:flex; gap:14px; align-items:center }
.cs-esp__ico{ display:grid; place-items:center; inline-size:46px; block-size:46px; flex:none; border-radius:50%; color:var(--cyan); box-shadow:inset 0 0 0 1px rgba(7,210,210,.45); background:rgba(7,210,210,.08) }
.cs-esp li strong{ display:block; font-family:var(--display); font-weight:600; font-size:17px; color:#fff }
.cs-esp li span:last-child{ font-size:14.5px; line-height:1.45; color:var(--on-dark-soft) }
@media (min-width:980px){ .cs-feito__topo{ grid-template-columns:minmax(0,1fr) minmax(0,.85fr) } }

.cs-frentes{ --g:64px; position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px var(--g); margin:0; padding:0; list-style:none }
.cs-frentes::before{ content:""; position:absolute; inset-block:20px; inset-inline-start:50%; inline-size:1px; translate:-.5px 0;
  background:linear-gradient(180deg,transparent,rgba(7,210,210,.5) 8%,rgba(7,210,210,.5) 92%,transparent) }
.cs-frente{ position:relative; display:grid; align-content:start; gap:12px; padding:22px 24px 26px; border-radius:20px;
  background:rgba(241,247,247,.035); box-shadow:inset 0 0 0 1px var(--rule-dark); transition:box-shadow .35s ease, background .35s ease }
.cs-frente::after{ content:""; position:absolute; inset-block-start:44px; inline-size:calc(var(--g) / 2); block-size:1px; background:rgba(7,210,210,.5) }
.cs-frente:nth-child(odd)::after{ inset-inline-start:100% }
.cs-frente:nth-child(even)::after{ inset-inline-end:100% }
.cs-frente:nth-child(odd)::before{ content:""; position:absolute; z-index:1; inset-block-start:39px; inset-inline-start:calc(100% + var(--g) / 2 - 5.5px);
  inline-size:11px; block-size:11px; border-radius:50%; background:#071619; box-shadow:0 0 0 2px var(--cyan), 0 0 14px rgba(7,210,210,.6) }
.cs-frente__cab{ display:flex; align-items:center; gap:14px }
.cs-frente__n{ font-family:var(--display); font-weight:700; font-size:30px; line-height:1; color:var(--cyan) }
.cs-frente__ico{ display:grid; place-items:center; inline-size:44px; block-size:44px; border-radius:12px; color:var(--cyan-lit); background:rgba(7,210,210,.1) }
.cs-frente__tag{ margin-inline-start:auto; padding:4px 10px; border-radius:99px; font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--on-dark-soft); box-shadow:inset 0 0 0 1px var(--rule-dark) }
.cs-frente h3{ font-size:clamp(19px,1.9vw,22px); line-height:1.22; color:#fff; letter-spacing:-.018em }
.cs-frente ul{ display:grid; gap:7px; margin:0; padding:0; list-style:none }
.cs-frente li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; font-size:15.5px; line-height:1.5; color:var(--on-dark-soft) }
.cs-frente li::before{ content:""; inline-size:6px; block-size:6px; margin-block-start:.62em; border-radius:50%; background:var(--cyan) }
@media (hover:hover){ .cs-frente:hover{ background:rgba(241,247,247,.06); box-shadow:inset 0 0 0 1px rgba(7,210,210,.42) } }
@media (max-width:899px){
  .cs-frentes{ --g:28px; grid-template-columns:minmax(0,1fr); gap:16px; padding-inline-start:var(--g) }
  .cs-frentes::before{ inset-inline-start:6px; translate:none }
  .cs-frente::after,.cs-frente:nth-child(odd)::after,.cs-frente:nth-child(even)::after{ inset-inline:auto 100%; inline-size:calc(var(--g) - 6px) }
  .cs-frente::before,.cs-frente:nth-child(odd)::before{ content:""; position:absolute; z-index:1; inset-block-start:39px; inset-inline-start:calc(-1 * var(--g) + 1px);
    inline-size:11px; block-size:11px; border-radius:50%; background:#071619; box-shadow:0 0 0 2px var(--cyan), 0 0 14px rgba(7,210,210,.6) }
}
@media (max-width:419px){ .cs-frente{ padding:18px 18px 22px } .cs-frente__tag{ display:none } }

/* where the project acted: a dark panel of areas beside the timeline and the
   numbers counted from the delivered files */
.cs-impacto{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px }
.cs-areas{ display:grid; grid-template-rows:auto 1fr; padding:clamp(24px,3vw,34px); border-radius:24px; background:var(--grad-dark); color:var(--on-dark) }
.cs-areas h3,.cs-linha h3,.cs-numeros h3{ font-size:clamp(19px,1.9vw,22px); letter-spacing:-.018em; line-height:1.25 }
.cs-areas h3{ color:#fff }
.cs-areas ul{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; gap:12px; margin:22px 0 0; padding:0; list-style:none }
.cs-areas li{ display:grid; align-content:start; gap:6px; padding:18px; border-radius:16px; background:rgba(241,247,247,.04); box-shadow:inset 0 0 0 1px var(--rule-dark) }
.cs-areas .cs-ico{ inline-size:30px; block-size:30px; margin-block-end:6px; color:var(--cyan) }
.cs-areas strong{ font-family:var(--display); font-weight:600; font-size:17px; color:#fff }
.cs-areas span{ font-size:14.5px; line-height:1.45; color:var(--on-dark-soft) }
.cs-impacto__lado{ display:grid; gap:18px }
.cs-linha,.cs-numeros{ padding:clamp(22px,2.8vw,30px); border-radius:24px; background:#fff; box-shadow:0 0 0 1px var(--rule), 0 18px 40px -34px rgba(1,26,32,.5) }
.cs-linha h3{ display:flex; align-items:center; gap:10px; color:var(--text) }
.cs-linha h3 .cs-ico{ color:var(--teal) }
.cs-linha ol{ position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:22px 0 0; padding:0; list-style:none }
.cs-linha ol::before{ content:""; position:absolute; inset-block-start:5px; inset-inline:6px 6px; block-size:1px; background:rgba(2,115,115,.35) }
.cs-linha li{ position:relative; display:grid; gap:4px; padding-block-start:22px }
.cs-linha li::before{ content:""; position:absolute; inset-block-start:0; inset-inline-start:0; inline-size:11px; block-size:11px; border-radius:50%; background:#fff; box-shadow:0 0 0 2px var(--teal) }
.cs-linha time{ font-family:var(--display); font-weight:700; font-size:16px; color:var(--teal) }
.cs-linha span{ font-size:15px; line-height:1.45; color:var(--text-soft) }
.cs-numeros h3{ color:var(--text) }
.cs-numeros dl{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin:12px 0 0 }
.cs-numeros dl > div{ display:flex; flex-direction:column-reverse; justify-content:flex-end; gap:2px; padding:14px 0; border-block-start:1px solid var(--rule) }
.cs-numeros dl > div:nth-child(even){ padding-inline-start:20px; border-inline-start:1px solid var(--rule) }
.cs-numeros dd{ margin:0; font-family:var(--display); font-weight:700; font-size:clamp(34px,3.6vw,44px); line-height:1; letter-spacing:-.03em; color:var(--teal) }
.cs-numeros dt{ font-size:14.5px; line-height:1.4; color:var(--text-soft) }
@media (max-width:979px){ .cs-impacto{ grid-template-columns:minmax(0,1fr) } }
@media (max-width:559px){
  .cs-linha ol{ grid-template-columns:minmax(0,1fr); gap:18px; padding-inline-start:26px }
  .cs-linha ol::before{ inset-block:6px; inset-inline:5px auto; inline-size:1px; block-size:auto }
  .cs-linha li{ padding-block-start:0 }
  .cs-linha li::before{ inset-block-start:5px; inset-inline-start:-26px }
  .cs-areas ul{ gap:10px }
  .cs-areas li{ padding:16px 14px }
}

/* the site: the layouts Vazto designed, framed as browser windows */
.cs-site__topo{ display:grid; gap:10px 56px; align-items:end; margin-block-end:clamp(28px,4vw,44px) }
.cs-site__topo .head{ margin-block-end:0 }
.cs-site__topo .lede{ max-inline-size:52ch }
@media (min-width:980px){ .cs-site__topo{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) } }
.cs-site{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); grid-template-rows:auto auto; gap:clamp(14px,1.8vw,22px) }
.cs-tela{ margin:0; display:grid; gap:10px; grid-template-rows:1fr auto }
.cs-tela--a{ grid-row:span 2 }
.cs-tela button{ display:flex; flex-direction:column; inline-size:100%; block-size:100%; padding:0; border:0; border-radius:14px; overflow:hidden; cursor:zoom-in;
  background:#0b1d1f; box-shadow:0 0 0 1px var(--rule), 0 26px 56px -38px rgba(1,26,32,.7) }
.cs-tela__barra{ display:flex; gap:6px; align-items:center; flex:none; block-size:26px; padding-inline:12px; background:#0b1d1f }
.cs-tela__barra i{ inline-size:8px; block-size:8px; border-radius:50%; background:rgba(241,247,247,.28) }
.cs-tela img{ display:block; inline-size:100%; flex:1 1 auto; min-block-size:0; object-fit:cover; object-position:top; transition:transform .8s var(--ease) }
.cs-tela--b img,.cs-tela--c img{ aspect-ratio:16/10 }
.cs-tela figcaption{ font-size:13.5px; font-weight:600; color:var(--text-soft) }
.cs-tela button:focus-visible{ outline:2px solid var(--teal); outline-offset:3px }
@media (hover:hover){ .cs-tela button:hover img{ transform:scale(1.02) } }
@media (max-width:719px){
  .cs-site{ grid-template-columns:minmax(0,1fr) }
  .cs-tela--a{ grid-row:auto }
  .cs-tela--a img{ aspect-ratio:1200/812 }
}

/* the gallery: an editorial grid, no carousel */
.cs-galeria{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(12px,1.6vw,18px) }
.cs-galeria figure{ margin:0; position:relative; border-radius:18px; overflow:hidden; background:#e9eded }
.cs-galeria button{ display:block; inline-size:100%; padding:0; border:0; background:none; cursor:zoom-in }
.cs-galeria img{ display:block; inline-size:100%; block-size:100%; object-fit:cover; transition:transform .8s var(--ease) }
.cs-galeria figcaption{ position:absolute; inset-inline-start:14px; inset-block-end:14px; padding:6px 12px; border-radius:99px;
  font-size:13px; font-weight:600; color:#fff; background:rgba(3,7,13,.55); backdrop-filter:blur(4px) }
.cs-galeria button:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; border-radius:18px }
@media (hover:hover){ .cs-galeria button:hover img{ transform:scale(1.035) } }
.g-1{ grid-column:span 4 } .g-2{ grid-column:span 2 } .g-3{ grid-column:span 2 } .g-4{ grid-column:span 2 } .g-5{ grid-column:span 2 } .g-6{ grid-column:span 6 }
.g-1 img{ aspect-ratio:16/9 } .g-2 img{ aspect-ratio:auto; block-size:100% } .g-2 button{ block-size:100% }
.g-3 img,.g-4 img,.g-5 img{ aspect-ratio:3/2 } .g-6 img{ aspect-ratio:1024/576 }
@media (max-width:719px){
  .cs-galeria{ grid-template-columns:minmax(0,1fr) }
  .g-1,.g-2,.g-3,.g-4,.g-5,.g-6{ grid-column:auto }
  .g-2 img{ aspect-ratio:3/2 }
}

/* lightbox: a native <dialog>, one image, close on click or Esc */
.cs-lb{ inline-size:min(1200px,94vw); max-block-size:92vh; padding:0; border:0; border-radius:16px; background:#03070d; overflow:hidden }
.cs-lb::backdrop{ background:rgba(3,7,13,.86); backdrop-filter:blur(6px) }
.cs-lb img{ display:block; inline-size:100%; max-block-size:86vh; object-fit:contain }
.cs-lb button{ position:absolute; inset-block-start:10px; inset-inline-end:10px; inline-size:42px; block-size:42px; border-radius:50%; border:0;
  font-size:20px; color:#fff; background:rgba(3,7,13,.7); cursor:pointer }
.cs-lb button:focus-visible{ outline:2px solid var(--cyan) }

/* other cases on the single page: a compact closing band, smaller than the
   case it follows */
.cs-outros.section{ padding-block:clamp(52px,6vw,76px) }
.cs-outros__topo{ text-align:center; margin-block-end:clamp(22px,3vw,32px) }
.cs-outros__topo .h2{ font-size:clamp(24px,3vw,32px) }
/* the same card as the list page (.cs-card: same cover ratio, radius,
   overlay and hierarchy), only at a slightly smaller scale */
.cs-outros .cs-grade{ max-inline-size:960px; margin-inline:auto; gap:18px }
.cs-outros .actions{ justify-content:center; margin-block-start:clamp(24px,3.4vw,34px) }
@media (min-width:600px){ .cs-outros .cs-grade{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (min-width:600px) and (max-width:979px){ .cs-outros .cs-card__txt{ padding:16px 16px 18px } }

/* ======================================================== the PDF cases
   The fourteen cases of "Cases Novos Vazto.pdf" (generated pages). They have
   no project images, by design: the cover leads the hero once, and the rest
   is information design — summary, context, the list of what was done,
   areas, duration and the results with their figures in front. */

/* hero: the cover is portrait and small at the source (310x382), so it is a
   framed card beside the title, never a backdrop */
.cs-caso-hero--capa .cs-caso-hero__fig{ justify-self:end; inline-size:min(100%,330px) }
.cs-caso-hero--capa .cs-caso-hero__fig img{ aspect-ratio:310/382 }
.cs-caso-hero--capa .h1{ font-size:clamp(30px,3.9vw,48px); max-inline-size:22ch }
@media (min-width:980px){ .cs-caso-hero--capa .shell{ grid-template-columns:minmax(0,1fr) auto } }
@media (max-width:979px){ .cs-caso-hero--capa .cs-caso-hero__fig{ justify-self:start; inline-size:min(100%,300px) } }
.cs-marca{ display:inline-grid; place-items:center; justify-self:start; padding:16px 24px; margin-block-end:24px; border-radius:18px; background:#fff;
  box-shadow:0 14px 30px -20px rgba(0,0,0,.6) }
.cs-marca img{ display:block; inline-size:var(--lw,auto); block-size:var(--lh,56px); max-inline-size:100%; object-fit:contain }
@media (max-width:599px){ .cs-marca{ padding:12px 18px } .cs-marca img{ inline-size:calc(var(--lw) * .78); block-size:calc(var(--lh) * .78) } }
.cs-marca--nome{ block-size:auto; padding:10px 18px; font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:-.01em; color:var(--teal-deep) }
.cs-cliente{ margin-block-start:14px; font-size:15px; color:var(--on-dark-soft) }

/* summary with two to four items */
.cs-resumo--3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.cs-resumo--2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.cs-resumo__esp i{ font-style:normal; color:var(--text-soft) }
.cs-resumo__n{ font-size:1.6em; font-weight:700; color:var(--teal) }

/* lists inside the context notes */
.cs-lista{ display:grid; gap:6px; margin:6px 0 0; padding:0; list-style:none }
.cs-lista li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; font-size:16px; line-height:1.5; color:var(--text) }
.cs-lista li::before{ content:""; inline-size:6px; block-size:6px; margin-block-start:.62em; border-radius:50%; background:var(--teal) }
.cs-nota--forte .cs-lista li{ color:#fff; font-family:var(--display); font-weight:500; font-size:17px }
.cs-nota--forte .cs-lista li::before{ background:var(--cyan) }
.cs-cap + .cs-cap .cs-nota + .cs-nota{ margin-block-start:0 }

/* the project's description: an editorial column, the first paragraph leads */
.cs-descricao{ display:grid; gap:clamp(20px,3vw,40px) }
.cs-descricao__txt{ display:grid; gap:18px; max-inline-size:76ch }
.cs-descricao__txt p{ font-size:17px; line-height:1.68; color:var(--text-soft) }
.cs-descricao__txt p.cs-lead{ font-family:var(--display); font-weight:500; font-size:clamp(19px,1.9vw,23px); line-height:1.45; color:var(--text) }
@media (min-width:980px){ .cs-descricao{ grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr) } .cs-descricao .h2{ position:sticky; inset-block-start:96px; align-self:start } }

/* what Vazto did: numbered steps on a grid; titled stages when the PDF names them */
.cs-passos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0; padding:0; list-style:none }
.cs-passos li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:start; padding:18px 20px 20px; border-radius:18px;
  background:rgba(241,247,247,.035); box-shadow:inset 0 0 0 1px var(--rule-dark) }
.cs-passos__n{ font-family:var(--display); font-weight:700; font-size:22px; line-height:1.1; color:var(--cyan) }
.cs-passos p{ font-size:15.5px; line-height:1.5; color:var(--on-dark-soft) }
.cs-passos--muitos li{ padding:16px 18px }
.cs-passos--etapas{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }
.cs-passos--etapas li{ padding:24px 26px 26px }
.cs-passos--etapas .cs-passos__n{ font-size:30px }
.cs-passos--etapas h3{ font-size:clamp(18px,1.8vw,21px); line-height:1.22; letter-spacing:-.016em; color:#fff; margin-block-end:8px }
@media (max-width:979px){ .cs-passos{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:640px){ .cs-passos,.cs-passos--etapas{ grid-template-columns:minmax(0,1fr); gap:10px } .cs-passos li{ padding:16px 16px 18px } }

/* where it acted: areas beside the duration */
.cs-impacto--so{ grid-template-columns:minmax(0,1fr) }
.cs-tempo{ display:grid; align-content:center; gap:6px; padding:clamp(24px,3vw,34px); border-radius:24px; background:#fff;
  box-shadow:0 0 0 1px var(--rule), 0 18px 40px -34px rgba(1,26,32,.5) }
.cs-tempo h3{ display:flex; align-items:center; gap:10px; font-size:clamp(19px,1.9vw,22px); letter-spacing:-.018em; color:var(--text) }
.cs-tempo h3 .cs-ico{ color:var(--teal) }
.cs-tempo__v{ display:flex; align-items:baseline; gap:12px; margin-block-start:8px; font-family:var(--display); font-weight:600; font-size:clamp(20px,2vw,26px); color:var(--text-soft) }
.cs-tempo__v span{ font-weight:700; font-size:clamp(64px,8vw,104px); line-height:.9; letter-spacing:-.04em; color:var(--teal) }
.cs-tempo__nota{ justify-self:start; padding:5px 12px; border-radius:99px; font-size:13.5px; font-weight:600; color:var(--teal-deep); background:rgba(2,115,115,.1) }
.cs-areas li{ grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:12px }
.cs-areas li .cs-ico{ margin:0 }

/* results: the PDF's figures in front, every sentence below */
.cs-res__num{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; margin:0 0 clamp(26px,3.5vw,40px) }
.cs-res__num > div{ display:flex; flex-direction:column-reverse; justify-content:flex-end; gap:8px; padding:24px 24px 26px; border-radius:20px;
  background:linear-gradient(150deg,#0c3033 0%,#071619 75%); box-shadow:0 22px 44px -32px rgba(1,26,32,.9) }
.cs-res__num dd{ margin:0; font-family:var(--display); font-weight:700; font-size:clamp(40px,4.6vw,58px); line-height:1; letter-spacing:-.035em; color:var(--cyan-lit) }
.cs-res__num dd small{ display:block; margin-block-end:4px; font-size:15px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--on-dark-soft) }
.cs-res__num dt{ font-size:15.5px; line-height:1.45; color:var(--on-dark-soft) }
.cs-res__lista{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 40px; margin:0; padding:0; list-style:none }
.cs-res__lista li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:start; padding-block:12px 14px; box-shadow:inset 0 -1px 0 var(--rule);
  font-size:16px; line-height:1.5; color:var(--text) }
.cs-res__lista .cs-ico{ color:var(--teal) }
.cs-res__blocos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px }
.cs-res__blocos article{ display:grid; gap:8px; padding:22px 24px 24px; border-radius:20px; background:#fff; box-shadow:0 0 0 1px var(--rule), 0 18px 40px -34px rgba(1,26,32,.5) }
.cs-res__blocos .cs-ico{ color:var(--teal) }
.cs-res__blocos h3{ font-size:clamp(18px,1.8vw,20px); line-height:1.25; letter-spacing:-.016em; color:var(--text) }
.cs-res__blocos p{ font-size:15.5px; line-height:1.55; color:var(--text-soft) }
.cs-res__fecho{ margin:clamp(26px,3.5vw,40px) 0 0; padding-inline-start:22px; border-inline-start:3px solid var(--cyan); max-inline-size:80ch;
  font-family:var(--display); font-weight:500; font-size:clamp(17px,1.7vw,20px); line-height:1.5; color:var(--text) }
@media (max-width:899px){ .cs-res__lista,.cs-res__blocos{ grid-template-columns:minmax(0,1fr) } }
@media (max-width:519px){ .cs-res__num{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px } .cs-res__num > div{ padding:18px 16px 20px } .cs-res__num dt{ font-size:14.5px } }


/* ========================================================= case page layout
   Approved on Bumble (2026-10-09) and used by every generated case; the hero
   is unchanged. Reorganised the same day: every block takes the height of
   its own content. No block sits beside one of a different size and
   stretches to match it (grids align to the start, never stretch). */
.cv2-sec.section{ padding-block:clamp(48px,5.6vw,72px) }
.cv2-t{ font-size:clamp(24px,2.6vw,32px); line-height:1.12; letter-spacing:-.024em; margin-block-end:18px }
.g-dark .cv2-t{ color:#fff }
.cv2-t em{ font-style:normal; color:var(--teal) }
.g-dark .cv2-t em{ color:var(--cyan) }
.cv2-texto{ display:grid; gap:12px }
.cv2-texto p{ font-size:16.5px; line-height:1.62; color:var(--text-soft) }
.g-dark .cv2-texto p{ color:var(--on-dark-soft) }
.cv2-texto--cols{ display:block; columns:2; column-gap:clamp(28px,4.4vw,64px) }
.cv2-texto--cols p + p{ margin-block-start:12px }

/* overview: one panel of quick facts */
.cv2-fatos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); margin:0 0 clamp(32px,4vw,52px); border-radius:20px; background:#fff;
  box-shadow:0 0 0 1px var(--rule), 0 22px 46px -38px rgba(1,26,32,.55) }
.cv2-fatos > div{ display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; column-gap:14px; align-items:center; padding:18px 22px }
.cv2-fatos > div + div{ box-shadow:inset 1px 0 0 var(--rule) }
.cv2-fatos > div > .cs-ico{ grid-row:1 / span 2; inline-size:44px; block-size:44px; padding:10px; border-radius:12px; color:var(--teal); background:rgba(2,115,115,.08) }
.cv2-fatos dt{ font-family:var(--display); font-weight:600; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal) }
.cv2-fatos dd{ margin:2px 0 0; font-family:var(--display); font-weight:600; font-size:17px; line-height:1.3; color:var(--text) }
.cv2-fatos dd small{ display:block; font-family:var(--body); font-weight:500; font-size:13px; color:var(--text-soft) }

/* about the company: one editorial row, title and a short rule on the left,
   the text in a comfortable measure on the right */
.cv2-sobre{ display:block }
.cv2-sobre .cv2-t::after{ content:""; display:block; inline-size:44px; block-size:3px; margin-block-start:14px; border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--teal)) }
.cv2-sobre .cv2-texto{ max-inline-size:78ch }
.cv2-sobre .cv2-texto p{ font-size:17px; line-height:1.68 }

/* challenges and objectives: the two notes side by side when their sizes
   are close (--lado), one above the other when not; a note's list of four
   or more runs in columns, so a long list does not make a tall block */
.cv2-ctx{ display:grid; gap:14px; align-items:start }
@media (min-width:980px){ .cv2-ctx--lado{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.cv2-ctx .cs-nota{ padding:20px 24px }
.cv2-ctx .cs-nota p{ font-size:16px }
.cs-lista--cols{ display:block; columns:2 18em; column-gap:36px }
.cs-lista--cols li{ break-inside:avoid; margin-block-end:6px }
.cv2-ctx--lado .cs-lista--cols{ columns:1 }

/* the project: the description, then what Vazto did below it */
.cv2-desc{ margin-block-end:clamp(28px,3.4vw,40px) }
.cv2-desc .cv2-texto:not(.cv2-texto--cols){ max-inline-size:80ch }
.cv2-feito{ padding:clamp(22px,2.6vw,30px); border-radius:22px; background:rgba(241,247,247,.035); box-shadow:inset 0 0 0 1px var(--rule-dark) }
.cv2-feito__t{ font-size:clamp(19px,1.9vw,23px); line-height:1.22; letter-spacing:-.02em; color:#fff; margin-block-end:20px }
.cv2-feito__t em{ font-style:normal; color:var(--cyan) }
.cv2-passos{ display:grid; gap:12px; margin:0; padding:0; list-style:none; align-items:stretch }
.cv2-passos--grade{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.cv2-passos--3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.cv2-passos li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:start; align-content:start; padding:18px 20px; border-radius:16px;
  background:rgba(241,247,247,.03); box-shadow:inset 0 0 0 1px var(--rule-dark) }
.cv2-passos__ico{ display:grid; place-items:center; inline-size:46px; block-size:46px; border-radius:13px; color:var(--cyan-lit);
  background:#0a2a2e; box-shadow:inset 0 0 0 1px rgba(7,210,210,.42) }
.cv2-passos p{ font-size:15.5px; line-height:1.5; color:var(--on-dark) }
.cv2-passos__n{ display:block; margin-block-end:2px; font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.14em; color:var(--cyan) }
.cv2-passos--etapas :is(h3,h4){ margin-block-end:6px; font-family:var(--display); font-weight:600; font-size:17px; line-height:1.3; color:#fff }
.cv2-passos--etapas p{ font-size:15px; color:var(--on-dark-soft) }

/* specialties: one coloured module each, after the old site's specialty
   blocks (exemplo-especialidades.png): the specialty's own colour, its
   official icon, its name. As many columns as specialties, never an empty
   slot. Ink, not white, on the colour: two of the four are light. */
.cv2-esp{ padding-block-end:clamp(30px,3.8vw,46px); margin-block-end:clamp(30px,3.8vw,46px); box-shadow:inset 0 -1px 0 var(--rule) }
.cv2-esp__grade{ display:grid; grid-template-columns:repeat(var(--n,3),minmax(0,1fr)); gap:14px; margin:0; padding:0; list-style:none }
.cv2-esp__grade li{ display:flex; align-items:center; gap:18px; min-block-size:112px; padding:22px 26px; border-radius:20px; background:var(--esp);
  box-shadow:0 22px 40px -32px rgba(1,26,32,.7) }
.cv2-esp__grade .cs-ico{ inline-size:56px; block-size:56px; flex:none }
.cv2-esp__grade span{ font-family:var(--body); font-weight:700; font-size:clamp(15px,1.35vw,18px); letter-spacing:.1em; text-transform:uppercase; color:#0b1d1f }
@media (max-width:979px){
  .cv2-esp__grade{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .cv2-esp__grade[style*="--n:1"]{ grid-template-columns:minmax(0,1fr) }
  .cv2-esp__grade[style*="--n:3"] li:last-child{ grid-column:1 / -1 }
}
@media (max-width:640px){
  .cv2-esp__grade{ gap:10px }
  .cv2-esp__grade li{ flex-direction:column; justify-content:center; gap:10px; min-block-size:118px; padding:18px 10px; text-align:center }
  .cv2-esp__grade .cs-ico{ inline-size:44px; block-size:44px }
  .cv2-esp__grade span{ font-size:13px; letter-spacing:.08em }
}

/* the areas, in the language of the Home's ecosystem (home-areas.js,
   home.css .ab-*): a dark ground, each area a node with its own hue on the
   cyan-to-lavender arc (--cor, --luz, --fundo, set per area by the
   generator), a disc with a halo, the Home's glyph, the name in small caps.
   A thin line in the arc's colours runs under the nodes: they are linked.
   Every node has the same height, whatever the number of areas. */
.cv2-areas__grade{ position:relative; display:grid; grid-template-columns:repeat(var(--cols,4),minmax(0,1fr)); gap:12px; margin:0; padding:clamp(20px,2.6vw,28px);
  border-radius:22px; list-style:none; background:var(--grad-dark); box-shadow:0 26px 50px -38px rgba(1,26,32,.9) }
.cv2-areas__grade::before{ content:""; position:absolute; inset-inline:clamp(20px,2.6vw,28px); inset-block-start:0; block-size:2px; border-radius:2px;
  background:linear-gradient(90deg,hsl(172 68% 60%),hsl(220 68% 60%),hsl(268 68% 60%)); opacity:.8 }
.cv2-areas__grade li{ display:flex; align-items:center; gap:14px; block-size:72px; padding:0 16px; border-radius:16px;
  background:rgba(241,247,247,.035); box-shadow:inset 0 0 0 1px var(--rule-dark) }
.cv2-area__no{ flex:none; display:grid; place-items:center; inline-size:44px; block-size:44px; border-radius:50%; color:var(--luz);
  background:var(--fundo); box-shadow:inset 0 0 0 1.5px var(--luz), 0 0 0 6px color-mix(in srgb,var(--cor) 14%,transparent) }
.cv2-area__no .cs-ico{ inline-size:26px; block-size:26px }
.cv2-passos__ico .cs-ico{ inline-size:28px; block-size:28px }
.cv2-fatos > div > .cs-ico{ padding:8px }
.cv2-areas__grade strong{ font-family:var(--body); font-weight:600; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:rgba(241,247,247,.88) }

/* results: their own section; the figures in a row sized to how many there
   are (one is not stretched across the page), every sentence below */
.cv2-res{ display:grid; gap:22px; padding:clamp(22px,3vw,32px); border-radius:24px; background:#fff;
  box-shadow:0 0 0 1px var(--rule), 0 22px 46px -38px rgba(1,26,32,.55) }
.cv2-res__num{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 }
.cv2-res__num--1{ grid-template-columns:minmax(0,1fr); max-inline-size:420px }
.cv2-res__num--2{ grid-template-columns:repeat(2,minmax(0,1fr)); max-inline-size:860px }
.cv2-res__num--4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
.cv2-res__num > div{ display:flex; flex-direction:column-reverse; justify-content:flex-end; gap:8px; padding:20px 22px; border-radius:18px;
  background:linear-gradient(150deg,#0c3033 0%,#071619 75%) }
.cv2-res__num dd{ margin:0; font-family:var(--display); font-weight:700; font-size:clamp(38px,4vw,52px); line-height:1; letter-spacing:-.035em; color:var(--cyan-lit) }
.cv2-res__num dd small{ display:block; margin-block-end:4px; font-size:14px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--on-dark-soft) }
.cv2-res__num dt{ font-size:15px; line-height:1.45; color:var(--on-dark-soft) }
.cv2-res__lista{ display:grid; gap:0 40px; margin:0; padding:0; list-style:none }
.cv2-res__lista--cols{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.cv2-res__lista li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:start; padding-block:11px 12px; box-shadow:inset 0 -1px 0 var(--rule);
  font-size:15.5px; line-height:1.5; color:var(--text) }
.cv2-res__lista .cs-ico{ color:var(--teal) }
.cv2-res__blocos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:start }
.cv2-res__blocos article{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:start; padding:16px 18px; border-radius:16px; box-shadow:inset 0 0 0 1px var(--rule) }
.cv2-res__blocos .cs-ico{ color:var(--teal) }
.cv2-res__blocos h3{ margin-block-end:4px; font-family:var(--display); font-weight:600; font-size:16.5px; line-height:1.3; color:var(--text) }
.cv2-res__blocos p{ font-size:15px; line-height:1.5; color:var(--text-soft) }

@media (max-width:979px){
  .cv2-texto--cols{ columns:1 }
  .cv2-passos--3{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .cv2-res__num--4{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .cv2-res__lista--cols{ grid-template-columns:minmax(0,1fr) }
  .cv2-areas__grade{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) }
  .cv2-areas__grade[style*="--cols:4"],.cv2-areas__grade[style*="--cols:2"]{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:640px){
  .cv2-fatos{ grid-template-columns:minmax(0,1fr) }
  .cv2-fatos > div{ padding:14px 18px }
  .cv2-fatos > div + div{ box-shadow:inset 0 1px 0 var(--rule) }
  .cs-lista--cols{ columns:1 }
  .cv2-ctx .cs-nota{ padding:18px }
  .cv2-feito{ padding:20px 16px }
  .cv2-passos--grade,.cv2-passos--3,.cv2-res__blocos{ grid-template-columns:minmax(0,1fr) }
  .cv2-passos li{ gap:12px; padding:14px 16px }
  .cv2-passos__ico{ inline-size:40px; block-size:40px }
  .cv2-passos__ico .cs-ico{ inline-size:24px; block-size:24px }
  .cv2-areas__grade{ grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; padding:16px }
  /* a phone: the node above its name, as on the Home, so long names fit */
  .cv2-areas__grade li{ flex-direction:column; justify-content:center; block-size:104px; gap:10px; padding:0 8px; text-align:center }
  .cv2-area__no{ inline-size:38px; block-size:38px; box-shadow:inset 0 0 0 1.5px var(--luz), 0 0 0 4px color-mix(in srgb,var(--cor) 14%,transparent) }
  .cv2-areas__grade strong{ font-size:11.5px; letter-spacing:.1em }
  .cv2-res__num,.cv2-res__num--1{ grid-template-columns:minmax(0,1fr); max-inline-size:none }
  /* an even number of short figures stays in pairs */
  .cv2-res__num--2,.cv2-res__num--4{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
  .cv2-res__num--2 > div,.cv2-res__num--4 > div{ padding:16px }
  .cv2-res__num--2 dd,.cv2-res__num--4 dd{ font-size:32px; overflow-wrap:anywhere }
  .cv2-res__num--2 dt,.cv2-res__num--4 dt{ font-size:14px }
}