/* cr · CrioEfficace — a placa fria, a única faceta de aço */
.cr-secao { --cr-d: 3.4rem; --cr-alt: 4.9rem; }

/* ───────── em cima: o retrato escuro, de perto, com a placa no centro da luz ───────── */
.cr-topo { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: clamp(35rem, 80vh, 48rem); }
.cr-cena { position: absolute; z-index: -1; margin: 0; left: 50%; width: 100vw; transform: translateX(-50%); top: calc(var(--respiro) * -1); bottom: -7rem; overflow: hidden; pointer-events: none; }
.cr-quadro { position: absolute; height: min(128%, 92vw); aspect-ratio: 3600 / 1728; left: 63%; top: 45%; transform: translate(-59.3%, -44.8%); }
.cr-quadro img { display: block; width: 100%; height: 100%; max-width: none; filter: brightness(.66) saturate(.8) contrast(1.14); }
/* a seção começa e termina em noite: o retrato se dissolve pelas bordas */
.cr-cena::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(to bottom, var(--noite) 0, rgb(36 26 22 / 0) 24%, rgb(36 26 22 / 0) 64%, var(--noite) 97%),
  linear-gradient(to right, var(--noite) 0, rgb(36 26 22 / .9) 26%, rgb(36 26 22 / 0) 58%),
  radial-gradient(ellipse 46% 62% at 63% 45%, rgb(36 26 22 / 0) 0, rgb(36 26 22 / .1) 45%, rgb(36 26 22 / .66) 100%); }
/* a luz fria nasce na placa; o resto do retrato fica na penumbra */
.cr-frio-luz { position: absolute; inset: 0; background: radial-gradient(ellipse 11% 23% at 58.6% 44.5%, rgb(196 214 230 / .85) 0, rgb(196 214 230 / .35) 45%, rgb(196 214 230 / 0) 100%); mix-blend-mode: soft-light; opacity: .55; transition: opacity 2.2s ease-in-out; }
.cr-secao.cr-frio .cr-frio-luz { opacity: 1; }
/* as arestas da placa continuam para fora: ela é a faceta de aço de uma pedra maior */
.cr-arestas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: rgb(243 232 220 / .34); stroke-width: 1; stroke-linejoin: round; }
.cr-arestas * { vector-effect: non-scaling-stroke; }
.cr-ar-a { fill: rgb(207 211 214 / .1); }
.cr-ar-b { fill: rgb(243 232 220 / .04); stroke: rgb(243 232 220 / .2); }
/* o brilho frio corre pela placa quando a quinta faceta se acende */
.cr-placa-luz { position: absolute; inset: 0; clip-path: polygon(59.55% 33.7%, 64.1% 42.7%, 61% 52%, 59.45% 56%, 54.55% 46.8%); background: linear-gradient(127deg, transparent 30%, rgb(255 255 255 / .75) 47%, rgb(222 232 240 / .6) 53%, transparent 70%) 110% 110% / 300% 300% no-repeat; mix-blend-mode: soft-light; opacity: 0; }
.cr-secao.cr-frio .cr-placa-luz { animation: cr-placa 2.6s ease-in-out both; }
@keyframes cr-placa { 0% { background-position: 110% 110%; opacity: 0; } 15%, 80% { opacity: 1; } 100% { background-position: -10% -10%; opacity: 0; } }

.cr-abre { position: relative; max-width: min(39rem, 46%); }
.cr-titulo { margin-top: clamp(1.25rem, 2.2vw, 2rem); font-size: clamp(3rem, 7.6vw, 7.25rem); line-height: .94; max-width: 5.6em; text-wrap: balance; }
.wf-noite .cr-titulo em { color: var(--aco); }
.cr-lide { margin-top: clamp(1.5rem, 2.6vw, 2.4rem); max-width: 30em; }
.cr-dela { margin: clamp(1.5rem, 2.6vw, 2.25rem) 0 0; padding-left: 1.25rem; border-left: 1px solid var(--rosa-noite); }
.cr-dela .wf-fala { font-size: clamp(1.45rem, 2.1vw, 2rem); max-width: 16em; text-wrap: balance; }

/* ───────── embaixo: as cinco facetas e quem costuma procurar ───────── */
.cr-baixo { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(2rem, 5vw, 5.5rem); align-items: end; margin-top: clamp(4rem, 8vw, 7.5rem); }
.cr-sub { font-family: var(--f-titulo); font-weight: 400; font-size: clamp(1.9rem, 3.4vw, 3.25rem); line-height: 1.04; color: var(--marfim); max-width: 12em; text-wrap: balance; }

/* cinco tiras cortadas pela mesma diagonal: juntas, são o perfil de uma pedra em degraus */
.cr-facetas { margin-top: clamp(1.75rem, 3vw, 2.75rem); display: grid; gap: 5px; }
.cr-faceta { position: relative; display: flex; align-items: center; gap: 1.1rem; min-height: var(--cr-alt); width: calc(100% - (4 - var(--n)) * (var(--cr-d) + 4px)); padding: .5rem calc(var(--cr-d) + 1rem) .5rem 0; background: rgb(243 232 220 / .075); box-shadow: inset 0 1px 0 rgb(243 232 220 / .2); clip-path: polygon(0 0, 100% 0, calc(100% - var(--cr-d)) 100%, 0 100%); clip-path: polygon(0 0, calc(100% - var(--cr-d)) 0, 100% 100%, 0 100%); }
.cr-faceta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgb(219 169 157 / .5), rgb(234 210 185 / .3)); opacity: 0; transition: opacity 2.2s ease-in-out; }
.cr-faceta > * { position: relative; }
.cr-num { flex: none; width: 4.4rem; padding-left: 1.3rem; font-family: var(--f-titulo); font-size: 1.5rem; line-height: 1; color: var(--rosa-noite); transition: color 2.2s ease-in-out; }
.cr-item { font-family: var(--f-titulo); font-size: clamp(1.4rem, 2.15vw, 2.05rem); line-height: 1.08; color: var(--marfim); }
.cr-faceta.cr-aco { background: rgb(207 211 214 / .17); }
.cr-faceta.cr-aco::before { background: linear-gradient(100deg, rgb(207 211 214 / .3), rgb(232 238 242 / .2)); }
.cr-faceta.cr-aco .cr-num { color: var(--aco); }
.cr-faceta.cr-acesa::before { opacity: 1; }
.cr-faceta.cr-acesa .cr-num { color: var(--marfim); }

.cr-quem { padding-bottom: .1rem; }
.cr-linha { margin-top: 1.5rem; font-family: var(--f-titulo); font-size: clamp(1.65rem, 2.75vw, 2.7rem); line-height: 1.14; color: var(--marfim); }
.cr-linha span:nth-child(2) { color: var(--rosa-noite); }

/* o fecho: a frase honesta com o peso de um título, e o único botão */
.cr-fim { margin-top: clamp(3.5rem, 7vw, 6.5rem); padding-top: clamp(1.75rem, 3vw, 2.75rem); border-top: 1px solid var(--fio-noite); display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.75rem 3rem; }
.cr-fim .botao { min-height: 64px; padding-inline: 2.4rem; font-size: 1.0625rem; }
.cr-honesta { font-size: clamp(1.9rem, 3.9vw, 3.75rem); line-height: 1.04; max-width: 15em; text-wrap: balance; }

/* ───────── telas médias ───────── */
@media (max-width: 1180px) {
  .cr-secao { --cr-d: 1.5rem; }
  .cr-quadro { left: 59%; }
  .cr-abre { max-width: 41%; }
  .cr-titulo { font-size: clamp(3rem, 6.3vw, 5rem); }
  .cr-cena::after { background:
    linear-gradient(to bottom, var(--noite) 0, rgb(36 26 22 / 0) 24%, rgb(36 26 22 / 0) 64%, var(--noite) 97%),
    linear-gradient(to right, var(--noite) 0, rgb(36 26 22 / .94) 38%, rgb(36 26 22 / 0) 62%),
    radial-gradient(ellipse 46% 62% at 59% 45%, rgb(36 26 22 / 0) 0, rgb(36 26 22 / .1) 45%, rgb(36 26 22 / .66) 100%); }
  .cr-faceta { padding-right: calc(var(--cr-d) + .4rem); }
  .cr-num { width: 3.6rem; padding-left: 1.1rem; }
  .cr-baixo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2.5rem; }
}

/* ───────── celular e tablet em pé: a foto em cima, o texto embaixo ───────── */
@media (max-width: 900px) {
  .cr-secao { --cr-d: .9rem; --cr-alt: 4rem; padding-top: 0; }
  .cr-topo { display: block; min-height: 0; }
  .cr-cena { position: relative; left: auto; width: auto; transform: none; top: auto; bottom: auto; margin-inline: calc(var(--margem) * -1); height: min(122vw, 36rem); }
  .cr-quadro { height: 150%; left: 30%; top: 45%; }
  .cr-faceta { padding-right: calc(var(--cr-d) + 1rem); }
  .cr-cena::after { background:
    linear-gradient(to bottom, var(--noite) 0, rgb(36 26 22 / 0) 20%, rgb(36 26 22 / 0) 52%, var(--noite) 86%),
    radial-gradient(ellipse 70% 60% at 40% 45%, rgb(36 26 22 / 0) 0, rgb(36 26 22 / .12) 50%, rgb(36 26 22 / .6) 100%); }
  .cr-abre { max-width: none; margin-top: -4.5rem; }
  .cr-titulo { font-size: clamp(3rem, 14.6vw, 6.5rem); max-width: 5.6em; }
  .cr-baixo { display: block; margin-top: 3.5rem; }
  .cr-quem { margin-top: 3.5rem; }
  .cr-num { width: 3.4rem; padding-left: 1rem; font-size: 1.3rem; }
  .cr-fim .botao { width: 100%; max-width: 24rem; }
  .cr-linha span { display: block; }
  .cr-linha span + span { margin-top: .7rem; }
  .cr-item { font-size: clamp(1.3rem, 5.6vw, 1.9rem); }
}