/* cr · Com as crianças (esmalte) */
.cr { --cr-p: 0; --cr-marca: color-mix(in oklab, var(--rosa) 30%, transparent); }

.cr-grade {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
}

/* ---------- coluna esquerda: título + ela, com a tinta crescendo atrás ---------- */
.cr-grade { align-items: stretch; }
.cr-esq { display: flex; flex-direction: column; }
.cr-intro { margin-top: var(--e-3); max-width: 30rem; color: var(--tinta); }
.cr-ela {
  position: relative; margin: var(--e-3) 0 0;
  flex: 1 1 auto; min-height: 520px;
}
.cr-borrao {
  position: absolute; left: 50%; top: 56%;
  width: min(122%, 640px); aspect-ratio: 1; translate: -50% -50%;
  overflow: visible; pointer-events: none;
}
.cr-borrao path {
  fill: color-mix(in oklab, var(--rosa) 24%, var(--papel));
  transform-origin: 50% 55%;
  transform: scale(calc(.38 + var(--cr-p) * .62)) rotate(calc(var(--cr-p) * 22deg));
  transition: transform 1.4s var(--curva);
}
.cr-gotas { position: absolute; inset: 6% 0 0; }
.cr-gotas i {
  position: absolute; display: block; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffd3e4, var(--rosa) 62%);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--rosa) 18%, transparent);
  transform: scale(0); transition: transform .9s var(--curva);
}
.cr-gotas i:nth-child(1) { width: 18px; height: 18px; left: 6%;  top: 26%; }
.cr-gotas i:nth-child(2) { width: 11px; height: 11px; left: 90%; top: 20%; }
.cr-gotas i:nth-child(3) { width: 24px; height: 24px; left: 93%; top: 56%; }
.cr-gotas i:nth-child(4) { width: 10px; height: 10px; left: 1%;  top: 60%; }
.cr-gotas i:nth-child(5) { width: 14px; height: 14px; left: 16%; top: 10%; }
.cr-gotas i:nth-child(6) { width: 9px;  height: 9px;  left: 78%; top: 6%; }
.cr[data-cr-n="1"] .cr-gotas i:nth-child(-n+1),
.cr[data-cr-n="2"] .cr-gotas i:nth-child(-n+2),
.cr[data-cr-n="3"] .cr-gotas i:nth-child(-n+3),
.cr[data-cr-n="4"] .cr-gotas i:nth-child(-n+4),
.cr[data-cr-n="5"] .cr-gotas i:nth-child(-n+5),
.cr[data-cr-n="6"] .cr-gotas i,
.cr[data-cr-n="7"] .cr-gotas i { transform: scale(1); }
.cr-retrato {
  position: absolute; left: 50%; bottom: 0; translate: -50% 0;
  height: min(100%, 820px); width: auto; max-width: none;
  /* o corte reto da foto some no papel */
  -webkit-mask-image: linear-gradient(to top, transparent, #000 12%);
  mask-image: linear-gradient(to top, transparent, #000 12%);
}

/* ---------- texto ---------- */
.cr-texto { padding-top: clamp(1.5rem, 5vw, 5.5rem); }
.cr-fonte { margin-top: var(--e-2); font-size: .9rem; }

.cr-lista { list-style: none; margin: 0; padding: 0; counter-reset: cr; }
.cr-item {
  display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 0 var(--e-2);
  align-items: baseline;
  padding: clamp(1rem, 2.2vw, 1.6rem) 0;
  border-top: 1px solid var(--linha-clara);
}
.cr-num {
  font-family: var(--f-titulo); font-style: italic; font-weight: 600;
  font-size: 1.05rem; color: var(--tinta-suave);
  transition: color .8s;
}
.cr-item.cr-pintado .cr-num { color: var(--rosa-escuro); }
.cr-frase {
  font-family: var(--f-titulo); font-weight: 500;
  font-size: clamp(1.45rem, 1rem + 1.35vw, 2.35rem); line-height: 1.16; letter-spacing: -.008em;
  text-wrap: pretty;
}

/* a tinta que passa por trás de cada frase, linha a linha */
.cr-tinta {
  background-image: linear-gradient(176deg, transparent 50%, var(--cr-marca) 58%, var(--cr-marca) 86%, transparent 95%);
  background-repeat: no-repeat; background-size: 0% 100%;
  -webkit-box-decoration-break: slice; box-decoration-break: slice;
  transition: background-size 1.6s var(--curva);
}
.cr-item.cr-pintado .cr-tinta { background-size: 100% 100%; }
.no-js .cr-tinta, html:not(.js) .cr-tinta { background-size: 100% 100%; }

/* 07: a avaliação */
.cr-pais { margin: var(--e-3) 0 0; padding: clamp(1.4rem, 2.6vw, 2.2rem) clamp(1.2rem, 2.4vw, 2.2rem) clamp(1.2rem, 2vw, 1.6rem) 0;
  border: 0; border-radius: var(--raio); background: var(--papel-2);
  box-shadow: 0 30px 70px -40px rgb(42 20 24 / .35), 0 0 0 1px var(--linha-clara) inset;
  grid-template-columns: 4.6rem minmax(0, 1fr); gap: 0 .4rem; }
.cr-pais .cr-num { justify-self: center; }
.cr-pais-rotulo {
  font-size: var(--t-rotulo); letter-spacing: .16em; text-transform: uppercase; font-weight: 500;
  color: var(--rosa-escuro); margin-bottom: var(--e-2);
}
.cr-pais-texto { margin: 0; }
.cr-pais-texto p {
  font-family: var(--f-titulo); font-style: italic; font-weight: 500;
  font-size: clamp(1.2rem, 1rem + .8vw, 1.7rem); line-height: 1.3;
}
.cr-pais-quem { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.4rem; margin-top: var(--e-3); font-size: .95rem; color: var(--tinta-suave); }
.cr-pais-quem b { color: var(--tinta); font-weight: 600; }
.cr-pais-nota {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 48px;
  text-decoration: none; color: var(--tinta); font-weight: 500;
  border-bottom: 1px solid color-mix(in oklab, var(--tinta) 30%, transparent);
}
.cr-pais-nota:hover { border-color: var(--rosa); }
.cr-estrelas { color: var(--rosa-escuro); letter-spacing: .08em; }

.cr-faixa { margin-top: clamp(4rem, 8vw, 7rem); text-align: center; }
.cr-fecho { margin: 0 auto; max-width: 54rem; }
.cr-fecho .wf-fala { font-size: clamp(1.5rem, 1rem + 2vw, 2.7rem); line-height: 1.22; color: var(--tinta); text-wrap: balance; }
.cr-fecho::before { content: ""; display: block; width: 12px; height: 12px; margin: 0 auto var(--e-3); border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffd3e4, var(--rosa) 62%); box-shadow: 0 0 0 5px color-mix(in oklab, var(--rosa) 20%, transparent); }

/* ---------- fora do consultório ---------- */
.cr-fora {
  margin-top: clamp(4rem, 9vw, 8rem);
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}
.cr-fora-fala { font-size: clamp(1.25rem, 1rem + 1vw, 1.9rem); line-height: 1.3; color: var(--tinta); }
.cr-fora-apoio { margin-top: var(--e-3); max-width: 28rem; }
.cr-mosaico {
  display: grid; gap: clamp(.6rem, 1.2vw, 1rem);
  grid-template-columns: 1.1fr 1fr 1fr;
  grid-template-rows: auto auto;
  position: relative;
}
.cr-f { margin: 0; border-radius: var(--raio); box-shadow: 0 30px 70px -40px rgb(42 20 24 / .35); background: #e9dfd5; }
.cr-f-1 { grid-row: 1 / 3; }
.cr-f-1 img { object-position: 30% 50%; }
.cr-f-2 { grid-column: 2 / 4; aspect-ratio: 1080 / 640; }
.cr-f-3 { aspect-ratio: 1; }
.cr-f-4 { aspect-ratio: 1; }
.cr-mosaico-rotulo { grid-column: 1 / -1; display: flex; align-items: center; gap: .6rem; margin-top: .4rem; font-size: .85rem; color: var(--tinta-suave); }

/* ---------- celular e tablet ---------- */
@media (max-width: 960px) {
  .cr-grade { grid-template-columns: 1fr; gap: 0; }
  .cr-ela { min-height: 0; height: clamp(380px, 108vw, 580px); }
  .cr-texto { padding-top: var(--e-3); }
  .cr-item { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .cr-pais { grid-template-columns: 3rem minmax(0, 1fr); padding-right: 1.1rem; }
  .cr-fora { grid-template-columns: 1fr; }
  .cr-mosaico { grid-template-columns: 1fr 1fr; }
  .cr-f-1 { grid-row: auto; grid-column: 1 / 3; aspect-ratio: 1080 / 900; }
  .cr-f-2 { grid-column: 1 / 3; }
}
@media (min-width: 961px) and (max-width: 1200px) {
  .cr-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .cr-tinta, .cr-borrao path, .cr-gotas i, .cr-num { transition: none; }
}

/* ---------- rodada 2 ---------- */
.cr-topo {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e-3) clamp(2rem, 5vw, 6rem);
  align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.cr-topo .wf-h2 { font-size: clamp(2.1rem, 1.1rem + 3.2vw, 4.2rem); }
.cr-topo .cr-intro { margin-top: 0; }
.cr-ela { margin-top: 0; min-height: 640px; }
.cr-retrato { height: min(104%, 980px); }
.cr-texto { padding-top: 0; }
.cr-pais-nota { white-space: nowrap; }

.cr-faixa { position: relative; padding: clamp(3rem, 6vw, 5rem) 0; }
.cr-poca { position: absolute; z-index: -1; left: 50%; top: 50%; width: min(100%, 980px); height: 100%; translate: -50% -50%; overflow: visible; }
.cr-poca path, .cr-poca circle { fill: color-mix(in oklab, var(--rosa) 13%, var(--papel)); transform-origin: 50% 50%; transform: scale(.6, .4); opacity: 0;
  transition: transform 1.6s var(--curva), opacity .8s; }
.cr-faixa.cr-pintado .cr-poca path, .cr-faixa.cr-pintado .cr-poca circle { transform: none; opacity: 1; }
.cr-fecho .wf-fala { font-size: clamp(1.5rem, 1rem + 2.1vw, 2.9rem); }


.cr-mosaico .cr-f-1 img { object-position: 40% 50%; }

@media (max-width: 960px) {
  .cr-topo { grid-template-columns: 1fr; margin-bottom: var(--e-3); }
  .cr-ela { min-height: 0; }
  .cr-retrato { height: 100%; }
  .cr-pais-nota { white-space: normal; flex-wrap: wrap; } .cr-pais-nota > span:nth-child(2) { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .cr-poca path, .cr-poca circle { transition: none; } }
@media (min-width: 961px) and (max-width: 1200px) {
  .cr-retrato { height: auto; width: 108%; max-height: 104%; object-fit: contain; }
}
@media (max-width: 960px) { .cr-mosaico-rotulo, .cr-fonte { font-size: .875rem; } }