/* ============================================================
   Clube Régia Real — folha de estilo única.
   Toda a identidade visual sai das variáveis abaixo: trocar a
   marca inteira é editar só este bloco :root.
   ============================================================ */
:root {
  --aurora:      #fff7f4;
  --petala:      #fbe6df;
  --petala-forte:#f7d9d0;
  --branco:      #ffffff;

  /* Família de ação, toda no matiz ~355°, vizinha do vinho (346°).
     O cobre alaranjado anterior ficava a 12° e brigava com a paleta. */
  --cobre:       #b03a42;
  --cobre-texto: #8c2a32;
  --cobre-claro: #e39aa0;

  --vinho:       #6b2b3a;
  --vinho-fundo: #4a1c28;
  --rosa:        #e8a6ab;

  --tinta:       #4a3238;
  --tinta-suave: #5c484f;

  --raio:        18px;
  --raio-peq:    12px;
  --raio-btn:    999px;
  --largura:     1180px;
  --linha:       rgba(74, 50, 56, 0.12);
  --linha-clara: rgba(255, 247, 244, 0.2);
  --sombra:      0 18px 40px -24px rgba(107, 43, 58, 0.45);
  --sombra-alta: 0 26px 60px -28px rgba(107, 43, 58, 0.5);

  /* Emblema embutido: máscara com arquivo externo é bloqueada em file://. */
  --emblema: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 616 698%22 role=%22img%22 aria-label=%22R%C3%A9gia Real%22%3E%3Cpath fill=%22currentColor%22 fill-rule=%22evenodd%22 d=%22M543 118L542 163L537 209L524 263L504 315L476 365L461 384L459 389L455 392L450 401L434 418L434 420L414 439L414 441L410 443L402 452L400 452L382 470L382 472L370 484L368 489L359 499L336 540L325 570L322 584L324 583L327 572L338 548L361 515L390 488L408 477L410 474L416 472L423 466L438 458L466 437L496 409L496 407L512 390L528 366L528 363L530 362L546 327L560 278L566 245L568 243L566 265L564 268L564 275L562 278L558 302L551 325L544 340L544 344L542 345L533 367L516 394L485 428L483 428L469 442L467 442L444 461L415 478L384 500L363 521L363 523L352 535L351 539L340 555L338 562L336 563L325 593L318 624L316 649L318 648L320 632L322 630L326 613L340 584L357 561L376 542L378 542L394 528L415 515L451 498L492 484L493 482L505 477L522 466L537 452L539 452L554 436L568 417L570 411L576 403L576 400L578 399L589 369L596 331L596 287L594 268L584 219L576 192L543 118ZM76 119L72 124L70 132L65 140L52 173L42 193L32 229L24 271L22 292L22 325L24 343L31 374L40 398L61 432L84 456L86 456L99 468L127 484L167 498L198 512L230 532L248 549L250 549L268 569L280 587L292 612L298 631L300 646L302 647L300 622L291 585L279 556L264 532L251 518L251 516L227 494L173 460L149 442L142 434L140 434L112 406L112 404L101 392L86 368L78 352L76 344L74 343L58 292L52 262L50 240L54 251L54 259L56 261L56 268L58 270L63 296L74 332L76 333L79 343L90 365L102 384L116 400L116 402L124 409L124 411L152 437L182 459L186 460L196 468L202 470L220 482L250 507L250 509L260 518L273 538L276 540L288 564L297 588L295 575L288 558L288 554L266 509L240 474L188 424L188 422L181 416L181 414L170 403L163 392L158 388L157 384L148 374L146 368L132 348L114 314L114 311L112 310L94 262L82 212L76 157L76 119ZM512 28L514 28L517 32L555 111L560 126L562 127L580 172L582 173L588 187L594 207L603 246L608 282L608 332L600 373L592 396L580 419L568 436L558 446L558 448L552 452L552 454L550 454L548 458L546 458L540 465L521 479L495 493L452 507L417 523L386 543L359 568L338 598L325 630L318 668L318 685L320 693L320 698L318 698L314 684L311 659L311 615L320 566L336 524L338 523L338 520L351 497L369 472L394 444L410 394L420 337L422 310L422 269L418 225L406 166L404 164L402 152L387 109L392 111L400 119L400 121L408 128L408 130L413 134L413 136L418 140L430 156L431 160L438 168L440 174L452 192L454 200L456 201L466 224L472 242L472 247L474 249L479 278L479 316L473 343L474 346L478 340L478 337L482 333L492 310L494 309L505 282L519 235L526 198L529 166L528 105L524 78L512 28ZM104 28L106 28L106 34L104 36L95 75L90 110L89 157L92 195L101 241L112 278L124 308L144 346L146 346L146 344L142 333L139 311L139 284L142 260L150 229L167 191L190 154L212 128L212 126L214 126L214 124L229 109L232 109L214 160L201 222L197 261L198 333L208 392L224 443L228 450L240 461L240 463L255 479L274 508L289 539L300 572L306 603L308 625L307 665L301 698L298 698L300 692L300 664L293 629L282 601L262 571L235 545L210 528L169 508L119 491L116 488L102 482L82 468L56 443L56 441L43 426L27 397L20 378L13 350L10 325L11 276L20 224L32 183L40 168L42 160L54 136L58 123L60 122L74 88L76 87L76 84L104 28ZM308 111L310 111L311 115L314 156L320 184L334 220L344 238L346 245L348 246L348 249L363 280L372 311L376 335L377 369L370 418L356 462L344 488L343 485L352 463L363 428L370 393L370 379L372 370L370 331L366 310L356 278L354 277L352 268L350 267L350 264L342 250L342 247L340 246L340 243L320 201L313 178L310 155L308 156L306 175L298 202L262 279L262 283L255 300L248 333L247 376L250 404L262 450L276 488L268 476L268 472L266 471L254 438L254 434L252 432L248 410L246 407L242 377L242 339L248 304L259 271L284 221L300 179L306 142L308 111ZM215 133L189 166L188 170L185 172L184 176L176 187L168 205L166 206L150 250L145 282L145 313L147 329L158 365L167 382L170 384L176 394L213 436L215 436L215 433L212 428L203 397L194 350L191 316L191 264L198 203L205 171L216 137L215 133ZM403 132L402 137L404 139L411 162L422 212L428 274L428 303L424 351L412 410L403 434L403 436L405 436L444 392L449 383L452 381L460 365L467 346L472 325L474 287L468 250L453 208L436 176L403 132ZM308 9L312 9L316 13L322 22L326 33L326 47L324 53L318 64L311 72L308 72L304 68L296 54L294 47L294 33L296 26L303 14L308 9Z%22/%3E%3C/svg%3E");

  --fonte-titulo: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-enfase: "Playfair Display", Georgia, "Times New Roman", serif;
  --fonte-corpo:  "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Fecha a faixa clara sob o rodapé: sem isto o fundo do html aparece
     quando a página é curta ou durante o overscroll. */
  background: var(--vinho-fundo);
}

body {
  margin: 0;
  background: var(--aurora);
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  color: var(--vinho);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.022em;
  margin: 0 0 0.55em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.85rem, 4.2vw, 2.75rem); }
h3 { font-size: clamp(1.12rem, 2.2vw, 1.32rem); font-weight: 600; letter-spacing: -0.018em; }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* A serifa itálica entra só nas frases que carregam emoção. */
.sentimento {
  font-family: var(--fonte-enfase);
  font-style: italic;
  font-weight: 500;
  color: var(--cobre-texto);
}
.secao--vinho .sentimento { color: var(--rosa); }

.env { width: min(100% - 2.4rem, var(--largura)); margin-inline: auto; }

/* 6.5rem em cima e embaixo somavam 208px de vão entre duas seções — no
   desktop virava um rio de branco. */
.secao { padding: clamp(2.4rem, 5vw, 4rem) 0; }
/* Seções vizinhas de mesmo fundo não têm troca de cor para marcar a divisão,
   então o vão entre elas pesa mais: encurta ainda um pouco. */
.secao + .secao:not(.secao--petala):not(.secao--vinho):not(.secao--sem-topo) {
  padding-top: clamp(1.8rem, 3.6vw, 3rem);
}
.secao--sem-topo { padding-top: 0; }
.secao--petala { background: var(--petala); }
.secao--vinho { background: var(--vinho-fundo); color: var(--petala); }
.secao--vinho h2, .secao--vinho h3 { color: var(--aurora); }

.olho {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cobre-texto);
  margin: 0 0 0.85rem;
}
.secao--vinho .olho { color: var(--rosa); }

.centro { text-align: center; }
.medida { max-width: 60ch; }
.centro .medida { margin-inline: auto; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.1rem 2.3rem;
  border: 0;
  border-radius: var(--raio-btn);
  /* degradê + brilho no topo + sombra colorida = volume.
     A parada mais clara manda no contraste do texto branco: #c04a52 dava 4.84,
     #b8434b sobe para 5.33 sem apagar o brilho do topo. */
  background: linear-gradient(170deg, #b8434b 0%, var(--cobre) 52%, #9c3039 100%);
  color: var(--branco);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform 0.18s ease, background-color 0.18s ease;
}
.btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(170deg, #ad3d45 0%, #a02f38 52%, #8a2830 100%);
}
.btn:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 6px rgba(74, 28, 40, 0.28);
}
.btn:focus-visible { outline: 3px solid var(--vinho); outline-offset: 3px; }
.btn--largo { width: 100%; }

/* ---------- Pulsar dos CTAs ----------
   Só escala e brilho, nada de halo. Um halo em ::after crescendo 22% pedia
   45px de folga lateral e o botão do hero só tem 17px até a borda de .hero,
   que recorta o overflow — saía um arco cortado reto. `filter` não sofre
   recorte de pai, e 3,5% de escala cabe na folga dos três CTAs. */
@media (prefers-reduced-motion: no-preference) {
  .btn { animation: cta-pulsa 2.6s ease-in-out 1.2s infinite; }
  /* No hover o botão já tem o translateY dele: a animação sai da frente
     inteira, senão o transform do keyframe vence o do :hover. */
  .btn:hover, .btn:active, .btn:focus-visible { animation: none; }

  @keyframes cta-pulsa {
    0%, 62%, 100% { transform: scale(1);     filter: brightness(1); }
    31%           { transform: scale(1.035); filter: brightness(1.09); }
  }
}

.btn-nota { margin-top: 0.95rem; font-size: 0.9rem; color: var(--tinta-suave); }
.secao--vinho .btn-nota { color: var(--petala); }

/* ---------- Barra de topo ---------- */
.barra {
  background: var(--vinho-fundo);
  color: var(--petala);
  text-align: center;
  padding: 0.75rem 1rem;
  font-size: 0.87rem;
}
.barra strong { color: var(--rosa); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(2.6rem, 6vw, 4.5rem) 0 clamp(3rem, 6vw, 4.5rem);
}
.hero .env { position: relative; z-index: 2; display: grid; gap: clamp(2.2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 940px) { .hero .env { grid-template-columns: 1.02fr 0.98fr; } }

/* Emblema da marca em traço, gigante e discreto, no lugar de uma marca-d'água de palavra. */
.hero-emblema {
  position: absolute;
  top: 4%;
  right: -4%;
  width: min(44vw, 440px);
  z-index: 1;
  aspect-ratio: 616 / 698;
  opacity: 0.55;
  /* O desfoque mora no pai e a máscara no filho: no mesmo elemento o
     filtro roda antes da máscara, que recorta as bordas de volta em foco. */
  filter: blur(3px);
  pointer-events: none;
}
.hero-emblema::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cobre-claro);
  -webkit-mask: var(--emblema) center/contain no-repeat;
          mask: var(--emblema) center/contain no-repeat;
}

.hero h1 { margin-bottom: 0.4em; }
/* Servia à frase curta "se sentir você."; a linha de ritmo é longa e com
   nowrap estourava a coluna, sendo cortada pelo overflow do .hero.
   `balance` distribui as linhas sem travar a quebra. */
.hero h1 .sentimento { text-wrap: balance; }
.hero .sub { font-size: clamp(1.06rem, 2.1vw, 1.24rem); color: var(--tinta); max-width: 44ch; }

/* Três promessas curtas, no formato de pastilha. */
.pilulas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
  margin: 1.8rem 0;
}
.pilula {
  padding: 1rem 0.9rem;
  border: 1px solid var(--petala-forte);
  border-radius: var(--raio-peq);
  background: linear-gradient(160deg, var(--branco), var(--petala));
  color: var(--vinho);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

@media (max-width: 520px) {
  /* empilhadas em três linhas de 57px, empurravam o CTA para fora da primeira
     tela: viram etiquetas em linha, que ocupam um terço disso. */
  .pilulas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 1.1rem 0;
  }
  .pilula {
    padding: 0.42rem 0.7rem;
    font-size: 0.78rem;
    line-height: 1.25;
    border-radius: var(--raio-btn);
  }
}

.hero-arte { position: relative; }
.hero-foto {
  position: relative;
  /* <figure> tem `margin: 1em 40px` por padrão do navegador: sem zerar, a foto
     perdia 80px de largura. No desktop passava despercebido; no celular, com
     447px de coluna, ela encolhia para 367px. */
  margin: 0;
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--petala);
  border: 1px solid var(--petala-forte);
  aspect-ratio: 4 / 5;
}
.hero-foto img { width: 100%; height: 100%; object-fit: cover; }

/* ASSINATURA: os cartões sobre a foto não são depoimento — são a semana
   dentro do Clube. Segunda resolve o plano, quarta resolve a solidão. */
.semana { display: grid; gap: 0.8rem; margin-top: 1rem; }
.semana-card {
  background: var(--branco);
  border: 1px solid var(--petala-forte);
  border-radius: var(--raio-peq);
  padding: 0.95rem 1.1rem;
  box-shadow: var(--sombra);
}
.semana-dia {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cobre-texto);
  margin-bottom: 0.2rem;
}
.semana-txt { font-size: 0.95rem; line-height: 1.4; color: var(--tinta); }

@media (min-width: 940px) {
  .semana { display: block; margin-top: 0; }
  .semana-card { position: absolute; width: 15.5rem; }
  /* sobe e recua: com o hero mais aberto o rosto passou a começar em 33% da
     largura e 24% da altura; em 12%/-1rem o cartão encostava nele. */
  .semana-card--seg { top: 3%; left: -2.5rem; }
  .semana-card--qua { bottom: 10%; right: -1rem; }
}

.aviso-legal {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 1.1rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}
.aviso-icone {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.04rem;
  color: var(--cobre-texto);
}
.aviso-icone svg { width: 100%; height: 100%; display: block; }

/* Marcador de imagem que ainda não chegou. */
.placeholder-img {
  display: grid;
  place-content: center;
  gap: 0.35rem;
  height: 100%;
  padding: 2rem;
  text-align: center;
  color: var(--tinta-suave);
  font-size: 0.88rem;
  background: repeating-linear-gradient(45deg, rgba(107,43,58,.05) 0 12px, transparent 12px 24px);
}
.placeholder-img strong { color: var(--vinho); }

/* ---------- Cards ---------- */
.grade { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 2.6rem; }
.card {
  background: var(--branco);
  border: 1px solid var(--petala-forte);
  border-radius: var(--raio);
  padding: 1.7rem;
}
.secao--petala .card { border-color: rgba(107, 43, 58, 0.12); }
.secao--vinho .card { background: rgba(255,255,255,0.05); border-color: var(--linha-clara); }
.card h3 { margin-bottom: 0.35rem; }
.card p { font-size: 0.95rem; color: var(--tinta-suave); }
.secao--vinho .card p { color: var(--petala); }

.selo {
  display: inline-grid;
  place-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.9rem;
  border-radius: 50%;
  background: var(--petala);
  color: var(--cobre-texto);
  font-size: 1rem;
  font-weight: 800;
}
.secao--vinho .selo { background: rgba(240,168,160,0.18); color: var(--rosa); }

/* ---------- Quem acompanha ---------- */
.perfil { display: grid; gap: clamp(1.8rem, 4vw, 3.4rem); align-items: center; }
@media (min-width: 900px) { .perfil { grid-template-columns: 0.92fr 1.08fr; } }

.perfil-foto {
  position: relative;
  margin: 0;
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--petala-forte);
  aspect-ratio: 4 / 5;
  box-shadow: var(--sombra-alta);
}
.perfil-foto > img { width: 100%; height: 100%; object-fit: cover; }

/* Plaquinha de perfil sobre a foto. */
.perfil-chip {
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  border-radius: var(--raio-btn);
  background: rgba(40, 22, 28, 0.82);
  backdrop-filter: blur(6px);
  color: var(--branco);
}
.perfil-chip-avatar {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  background: var(--petala-forte);
  object-fit: cover;
}
.perfil-chip-txt { flex: 1; min-width: 0; line-height: 1.25; }
.perfil-chip-txt strong { display: block; font-size: 0.98rem; font-weight: 600; }
.perfil-chip-txt span { font-size: 0.78rem; color: var(--petala); }
.perfil-chip-selo {
  flex: none;
  display: grid;
  place-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--branco);
}
.perfil-chip-selo::before {
  content: "";
  width: 1.3rem;
  height: 1.45rem;
  background: var(--cobre);
  -webkit-mask: var(--emblema) center/contain no-repeat;
          mask: var(--emblema) center/contain no-repeat;
}

/* Sobrancelha em pílula, no formato de pergunta. */
.pergunta {
  display: inline-block;
  margin: 0 0 1.1rem;
  padding: 0.75rem 1.35rem;
  border: 1px solid var(--petala-forte);
  border-radius: var(--raio-peq);
  background: linear-gradient(160deg, var(--branco), var(--petala));
  color: var(--vinho);
  font-family: var(--fonte-corpo);
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.3;
}


.perfil-nome { margin-bottom: 0.5rem; }
.perfil-texto p { font-size: 1.02rem; }

/* Texto ainda por escrever: fica visualmente marcado pra não ir ao ar por engano. */
.rascunho { color: var(--tinta-suave); }

/* Moldura em contorno: agrupa uma seção sem preencher fundo, para não somar
   mais um bloco de cor à página. Só contorno, no vinho da marca. */
.moldura {
  padding: clamp(1.6rem, 4vw, 2.8rem) clamp(1.1rem, 3vw, 2.2rem);
  border-radius: calc(var(--raio) + 6px);
  /* mesmo preenchimento do bloco dos módulos, para as duas caixas da página
     lerem como a mesma peça em vez de duas soluções diferentes. */
  background: var(--petala);
}
.moldura > .centro { margin-top: 0; }

/* ---------- Seção dos módulos ----------
   Bloco claro com o texto à esquerda e, à direita, duas fitas verticais que
   sobem sem parar. Regras na ordem: base primeiro, media queries no fim —
   antes a media de 900px vinha antes da regra base e era sobrescrita por ela. */
.modulos-bloco {
  --recheio: clamp(1.8rem, 4vw, 3rem);
  position: relative;
  display: grid;
  gap: clamp(1.8rem, 4vw, 2.6rem);
  padding: var(--recheio);
  border-radius: calc(var(--raio) + 10px);
  background: var(--petala);
  /* É O BLOCO que recorta os cartões. Quando o recorte era da janela, com raio
     próprio (18px) contra os 28px daqui, os dois arcos não batiam nos cantos e
     aparecia um degrau. Recortando aqui, a curva é a mesma por construção. */
  overflow: hidden;
}

/* Texto escuro sobre o claro: branco aqui daria 2,0 de contraste. */
.modulos-texto { color: var(--vinho-fundo); }
.modulos-texto h2 { margin: 0.85rem 0 0.8rem; color: var(--vinho-fundo); }
.modulos-texto .sentimento { color: var(--cobre-texto); }

.pilula-solta {
  display: inline-block;
  margin: 0;
  padding: 0.45rem 1.05rem;
  border: 1.5px solid var(--vinho-fundo);
  border-radius: var(--raio-btn);
  color: var(--vinho-fundo);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.modulos-sub { margin: 0; font-size: 1.02rem; line-height: 1.55; }

/* A janela não tem raio nem recorte próprios: quem faz as duas coisas é o
   bloco. Ela só delimita a altura das fitas. */
.modulos-janela {
  position: relative;
  min-width: 0;
  height: clamp(300px, 74vw, 380px);
  overflow: hidden;
}

.modulos-mosaico {
  /* Girar 3° faz cada cartão ocupar ~21px a mais na largura e ~12px na altura
     que a caixa dele. Com o gap antigo de 16px eles se sobrepunham nas quinas,
     por isso os espaçamentos aqui são separados e maiores que esse acréscimo. */
  --gap: 18px;
  --gap-col: 26px;
  /* Folga à esquerda para a inclinação não encostar na borda: a referência
     mostra a coluna da esquerda INTEIRA, quem corta é só a direita. */
  --folga-esq: 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap) var(--gap-col);
  height: 100%;
  /* mais largo que a janela: a segunda coluna é que sangra pela direita */
  /* três colunas e mosaico mais estreito: cartão menor, mosaico mais denso.
     158% deixava o cartão em 307px, maior do que era com duas colunas. */
  width: calc(124% - var(--folga-esq));
  margin-left: var(--folga-esq);
  /* SEM rotação aqui: girar o container desloca cada cartão na horizontal em
     proporção à distância dele do centro, e a fita tem ~4000px de altura — os
     cartões do topo saíam 22px pela esquerda e apareciam cortados. */
}
.mosaico-fita {
  display: grid;
  gap: var(--gap);
  align-content: start;
}
/* MESMA velocidade nas três, fases diferentes. Como as colunas têm número
   diferente de cartões (3, 3 e 2), duração igual daria velocidade diferente em
   px/s: cada ciclo percorre n×(altura+gap). A duração é então proporcional a n,
   e o que separa as colunas é só o atraso negativo — a posição de partida. */
.mosaico-fita { --n: 3; }
.mosaico-coluna--media .mosaico-fita { --n: 2; }
.mosaico-coluna--lenta .mosaico-fita { animation-delay: -14s; }
.mosaico-coluna--media .mosaico-fita { animation-delay: -7s; }

@media (prefers-reduced-motion: no-preference) {
  /* 12s por cartão: 3 cartões = 36s, 2 cartões = 24s, mesma velocidade. */
  .mosaico-fita { animation: mosaico-sobe calc(var(--n) * 12s) linear infinite; }
  /* -50% cortaria no meio de um gap; o meio gap devolve o alinhamento. */
  @keyframes mosaico-sobe {
    to { transform: translateY(calc(-50% - var(--gap) / 2)); }
  }
}

/* Inclinação em cada CARTÃO: assim o desvio horizontal é o mesmo para todos
   (~17px) em vez de crescer com a altura da fita. */
.modulos-janela .modulo { transform: rotate(-2.5deg); }

.modulo {
  position: relative;
  flex: 0 0 clamp(210px, 66vw, 250px);
  margin: 0;
  /* proporção das artes entregues: 941x1672 */
  aspect-ratio: 941 / 1672;
  scroll-snap-align: start;
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--vinho-fundo);
  box-shadow: var(--sombra);
}
.modulos-mosaico .modulo { flex: initial; }
.modulo > img { width: 100%; height: 100%; object-fit: cover; display: block; }

.modulo-legenda {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  padding: 3.2rem 1rem 1.15rem;
  /* as artes já chegam com degradê escuro no pé; este reforça o suficiente
     para o texto se sustentar sem lavar a foto. */
  background: linear-gradient(to top, rgba(16, 7, 10, 0.88) 42%, rgba(16, 7, 10, 0));
  text-align: center;
}
.modulo-selo {
  padding: 0.26rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: var(--raio-btn);
  color: var(--aurora);
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.modulo-titulo {
  color: var(--branco);
  font-size: clamp(0.98rem, 2.6vw, 1.1rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.modulo-desc {
  color: rgba(255, 247, 244, 0.86);
  font-size: 0.82rem;
  line-height: 1.4;
}
/* No mosaico o cartão é menor: só selo e título cabem sem apertar. */
.modulos-mosaico .modulo-desc { display: none; }

@media (min-width: 900px) {
  .modulos-bloco {
    grid-template-columns: 1fr 1.02fr;
    align-items: center;
    min-height: clamp(420px, 40vw, 580px);
  }
  /* Fora do fluxo, alcançando topo e base do bloco: são os cantos DELE que
     cortam o cartão. No fluxo, a janela crescia junto com a fita de ~4000px e
     arrastava o bloco para quase 6000px de altura. */
  .modulos-janela {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    height: auto;
  }
  .modulos-mosaico { --folga-esq: 28px; --gap: 20px; --gap-col: 30px; }
  .modulos-janela .modulo { transform: rotate(-3deg); }
  .modulos-janela .mosaico-coluna--lenta .modulo { transform: rotate(-3deg) translateY(6px); }
  .modulos-janela .mosaico-coluna--media .modulo { transform: rotate(-3deg) translateY(-8px); }
}

/* Abaixo de 900px o bloco vira uma coluna e o mosaico encolhe até virar ruído:
   cartões de 147px, título quebrando em duas linhas e a terceira coluna cortada
   ao meio. O carrossel logo abaixo já entrega os oito módulos com descrição, em
   tamanho legível — o mosaico é enfeite de tela grande. */
@media (max-width: 899px) {
  .modulos-janela { display: none; }
  .modulos-bloco { min-height: 0; }
}

/* ---------- Listas ---------- */
.par { display: grid; gap: 1rem; margin-top: 2.4rem; }
@media (min-width: 780px) { .par { grid-template-columns: 1fr 1fr; } }

.lista { list-style: none; margin: 0; padding: 0; }
.lista li { position: relative; padding-left: 1.9rem; margin-bottom: 0.8rem; font-size: 0.98rem; }
.lista li::before { position: absolute; left: 0; top: -0.03em; font-weight: 800; }
.lista--sim li::before { content: "✓"; color: var(--cobre-texto); }
.lista--nao li::before { content: "✕"; color: var(--tinta-suave); }

/* ---------- Oferta ---------- */
.oferta {
  display: grid;
  max-width: 560px;
  margin: 2.6rem auto 0;
  background: var(--branco);
  border: 1px solid var(--petala-forte);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra-alta);
  color: var(--tinta);
  text-align: left;
}
.oferta-lista { padding: clamp(1.6rem, 4vw, 2.3rem); }
.oferta-compra {
  padding: clamp(1.6rem, 4vw, 2.3rem);
  background: var(--petala);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.oferta-titulo { margin-bottom: 1.1rem; }
.oferta .lista { margin-bottom: 0; }

/* Em tela larga a oferta abre em duas colunas: o que leva | quanto custa. */
@media (min-width: 860px) {
  .oferta {
    max-width: 940px;
    grid-template-columns: 1.04fr 0.96fr;
    align-items: stretch;
  }
}
.oferta .btn-nota { color: var(--tinta-suave); text-align: center; }

.preco { margin-bottom: 1.4rem; text-align: center; }

/* Preço de mercado riscado: rotulado, nunca apresentado como preço antigo daqui. */
.preco-ancora {
  margin: 0 0 0.7rem;
  line-height: 1.35;
  color: var(--tinta-suave);
}
.preco-ancora-rotulo {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 0.15rem;
}
.preco-ancora s {
  font-size: clamp(1.15rem, 3vw, 1.4rem);
  font-weight: 700;
  color: var(--tinta-suave);
  text-decoration-thickness: 2.5px;
  text-decoration-color: var(--cobre);
}

.preco-parcela {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.35rem;
  margin: 0;
  /* era var(--cobre), que é cor de FUNDO de botão: como texto dava 4.95 */
  color: var(--cobre-texto);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
}
.preco-prefixo { font-size: clamp(1.05rem, 2.6vw, 1.35rem); font-weight: 700; letter-spacing: -0.02em; }
.preco-num { font-size: clamp(3.4rem, 10vw, 4.6rem); }

.preco-vista {
  margin: 0.35rem 0 0;
  color: var(--cobre-texto);
  font-size: clamp(1rem, 2.2vw, 1.12rem);
}
.preco-vista strong { font-weight: 700; }

.preco-anual {
  display: inline-block;
  margin: 0.9rem 0 0;
  padding: 0.38rem 0.95rem;
  border-radius: var(--raio-btn);
  background: var(--petala);
  color: var(--cobre-texto);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.preco-mes { margin: 0.7rem 0 0; font-size: 0.88rem; color: var(--tinta-suave); }

.oferta .btn { margin-top: 0; }

.aviso {
  margin-top: 1.1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--cobre);
  border-radius: var(--raio-peq);
  background: var(--petala);
  color: var(--tinta);
  font-size: 0.93rem;
}

/* ---------- Depoimentos ---------- */
.vazio {
  margin-top: 2.2rem;
  padding: 2.4rem;
  border: 1px dashed var(--petala-forte);
  border-radius: var(--raio);
  background: var(--branco);
  text-align: center;
  color: var(--tinta-suave);
}
.vazio strong { color: var(--vinho); }

/* Sobre o vinho, o marcador inverte pra continuar legível. */
.secao--vinho .vazio {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(251, 230, 223, 0.32);
  color: var(--petala);
}
.secao--vinho .vazio strong { color: var(--aurora); }

/* ---------- FAQ ---------- */
.faq { max-width: 780px; margin: 2.4rem auto 0; }
.faq-item {
  margin-bottom: 0.65rem;
  border: 0;
  border-radius: var(--raio-peq);
  overflow: hidden;
  background: var(--cobre);
}
.faq-item > button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  border: 0;
  background: none;
  color: var(--branco);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.012em;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.faq-item > button:hover { background: rgba(0, 0, 0, 0.12); }
.faq-item > button:focus-visible { outline: 3px solid var(--vinho); outline-offset: -3px; }
.faq-item > button::after {
  content: "+";
  flex: none;
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1;
  color: var(--branco);
  transition: transform 0.2s ease;
}
.faq-item[data-aberto] > button::after { transform: rotate(45deg); }
.faq-resposta {
  display: none;
  padding: 1.15rem 1.25rem 1.3rem;
  background: var(--branco);
  color: var(--tinta);
}
.faq-item[data-aberto] .faq-resposta { display: block; }

/* ---------- Rodapé ---------- */
.rodape {
  background: var(--vinho-fundo);
  color: var(--petala);
  padding: 2.4rem 0;
  font-size: 0.9rem;
  text-align: center;
}
.rodape a { color: var(--rosa); }
.rodape .fino {
  margin: 0;
  font-size: 0.79rem;
  line-height: 1.6;
  color: var(--petala);
  opacity: 0.8;
}

/* ---------- CTA ancorado ---------- */
.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
  background: rgba(74, 28, 40, 0.97);
  border-top: 1px solid var(--linha-clara);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.25s ease, visibility 0.25s;
}
.dock[data-visivel] { transform: translateY(0); visibility: visible; }
.dock-inner { width: min(100% - 1rem, 620px); margin-inline: auto; display: flex; align-items: center; gap: 0.9rem; }
.dock-preco { flex: 1; min-width: 0; color: var(--petala); font-size: 0.84rem; line-height: 1.3; }
.dock-preco strong { display: block; font-size: 1.1rem; font-weight: 800; color: var(--aurora); }
.dock .btn { flex: none; padding: 0.85rem 1.4rem; font-size: 0.93rem; box-shadow: inset 0 1px 0 rgba(255,255,255,0.28); }
@media (max-width: 520px) {
  .dock-inner { flex-direction: column; align-items: stretch; gap: 0.55rem; }
  .dock-preco { text-align: center; }
  .dock .btn { width: 100%; }
}
body[data-dock] .rodape { padding-bottom: 7.4rem; }
@media (max-width: 520px) { body[data-dock] .rodape { padding-bottom: 10.4rem; } }

/* ---------- Entrada ---------- */
@media (prefers-reduced-motion: no-preference) {
  .revela { opacity: 0; transform: translateY(14px); animation: sobe 0.7s cubic-bezier(.22,.7,.3,1) forwards; }
  .revela--1 { animation-delay: 0.05s; }
  .revela--2 { animation-delay: 0.16s; }
  .revela--3 { animation-delay: 0.27s; }
  @keyframes sobe { to { opacity: 1; transform: none; } }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* O número virou a manchete: destaque de cor dentro do próprio h1.
   Escrito como ritmo perseguido, não como garantia. */
.hero h1 strong { color: var(--cobre-texto); font-weight: 800; }

/* ---------- Selos de acesso e garantia ---------- */
.selos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.05rem; }
.selo-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--petala-forte);
  border-radius: var(--raio-btn);
  background: var(--branco);
  color: var(--tinta);
  font-size: 0.84rem;
  font-weight: 600;
}
.selo-item svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  fill: none;
  stroke: var(--cobre-texto);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.garantia { display: flex; align-items: flex-start; gap: 0.7rem; }
.oferta .btn-nota.garantia { text-align: left; }
/* O card é claro dentro da seção escura: os títulos precisam voltar ao vinho. */
.secao--vinho .oferta h3 { color: var(--vinho); }
.garantia strong { color: var(--vinho); }
.garantia-escudo {
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
  margin-top: 0.08rem;
  fill: none;
  stroke: var(--cobre-texto);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Painel de entregas com caixinha de perguntas ---------- */
.painel {
  background: var(--vinho-fundo);
  border: 1px solid var(--vinho-fundo);
  border-radius: 28px;
  padding: clamp(2rem, 4vw, 3.4rem) clamp(1.1rem, 3vw, 2.6rem);
}
/* Painel escuro: o título inverte, os cards seguem claros. */
.painel h2 { color: var(--aurora); }
.painel h2 .sentimento { color: var(--rosa); }
.painel .card { border-color: transparent; }

/* A caixinha fica acima do painel, com uma linha descendo por trás dela
   até encostar no bloco escuro. */
.entrada {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 2.4rem 0 2.8rem;
}
.entrada-linha {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: var(--vinho-fundo);
  z-index: 0;
}

.caixinha {
  position: relative;
  z-index: 1;
  width: min(100%, 450px);
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 6px 16px -10px rgba(38, 38, 38, 0.35);
  /* Fonte do sistema: o adesivo imita a interface do app, não a marca. */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.caixinha-topo {
  margin: 0;
  padding: 0.7rem 1rem;
  background: #3d3d3d;
  /* era #c8c8c8: 6.49. #d6d6d6 leva a 7.47 sem sair do cinza do mock. */
  color: #d6d6d6;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
}
.caixinha-corpo {
  margin: 0;
  padding: 1.5rem 1.3rem;
  background: #ffffff;
  color: #262626;
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  text-align: center;
}

/* Emoji: fonte própria do sistema, sem itálico herdado. */
[aria-hidden="true"] {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-style: normal;
  letter-spacing: 0;
}
.btn { gap: 0.15rem; }

/* A absolvição vem com o mesmo peso da frase que nomeia a falha. */
.lead {
  font-size: clamp(1.12rem, 2.4vw, 1.35rem);
  font-weight: 600;
  color: var(--vinho);
  letter-spacing: -0.015em;
}

/* Marcador de imagem: texto de serviço, sempre em alto contraste. */
.placeholder-img { color: var(--tinta); }

/* ---------- Numeração discreta dos cards do método ---------- */
.grade--numerada .card { position: relative; }
.grade--numerada .card h3 { padding-right: 2rem; }
.numero {
  position: absolute;
  top: 1.15rem;
  right: 1.2rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--cobre-texto);
  pointer-events: none;
  user-select: none;
}

/* ---------- Coroa da seção do desafio ---------- */
.coroa {
  display: block;
  width: clamp(2.6rem, 6vw, 3.3rem);
  margin: 0 auto 1.1rem;
  color: var(--cobre);
}
.coroa svg { width: 100%; height: auto; }

/* ---------- Depoimentos ---------- */
.depo-fonte {
  margin: 0.4rem 0 0;
  font-size: 0.87rem;
  color: var(--petala);
  opacity: 0.82;
}

.carrossel { margin-top: 2.4rem; }

.carrossel-trilho {
  display: flex;
  /* stretch de propósito: todo cartão fica com a altura do mais alto, e a
     folga dos curtos é ocupada pelo título — sem ele sobrava fundo vazio. */
  align-items: stretch;
  gap: 1.1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 0.4rem;
  /* respiro nas bordas pra o primeiro e o último cartão não colarem */
  scroll-padding-inline: 0.2rem;
}
.carrossel-trilho::-webkit-scrollbar { display: none; }
.carrossel-trilho:focus-visible { outline: 3px solid var(--rosa); outline-offset: 4px; border-radius: var(--raio); }

.depo {
  /* mais largo que as artes antigas: print de conversa tem mais linhas de
     texto por imagem, e no tamanho anterior a fonte caía para ~11px. */
  flex: 0 0 clamp(260px, 84vw, 360px);
  margin: 0;
  scroll-snap-align: start;
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--petala);
  box-shadow: var(--sombra);
}
.depo {
  display: flex;
  flex-direction: column;
}
/* Trecho do próprio depoimento. Só os prints CURTOS levam título: como todo
   cartão estica até a altura do mais alto, pôr título também nos altos apenas
   empurraria essa altura para cima e devolveria o vazio que ele veio corrigir. */
.depo-titulo {
  margin: 0;
  padding: 1.15rem 1.15rem 0.9rem;
  font-family: var(--fonte-enfase);
  font-style: italic;
  font-size: clamp(1.15rem, 3.7vw, 1.4rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--vinho);
}
/* Ocupa a folga que sobra e centra o print nela, para o cartão curto não
   ficar com o balão colado no título e um vazio embaixo. */
.depo-balao {
  flex: 1;
  display: grid;
  align-content: center;
}
.depo-balao img { width: 100%; height: auto; display: block; }

.carrossel-nav {
  display: flex;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 1.4rem;
}
/* Base: fundo CLARO. A versão anterior era branca sobre branco — nasceu junto
   com o carrossel de depoimentos, que vive na seção vinho, e ao ganhar um
   segundo carrossel em seção clara a seta sumiu. A variante escura mora
   em `.secao--vinho` logo abaixo. */
.carrossel-nav button {
  display: grid;
  place-content: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  /* a borda precisa separar o botão do fundo claro: petala-forte dava 1,26
     e o círculo sumia; o cobre dá 5,63, acima dos 3,0 que UI pede. */
  border: 1.5px solid var(--cobre);
  border-radius: 50%;
  background: var(--branco);
  color: var(--cobre-texto);
  cursor: pointer;
  box-shadow: 0 6px 14px -8px rgba(107, 43, 58, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.carrossel-nav button:hover {
  transform: translateY(-2px);
  background: var(--cobre);
  border-color: var(--cobre);
  color: var(--branco);
  box-shadow: 0 10px 20px -8px rgba(107, 43, 58, 0.5);
}

/* Sobre o vinho, o mesmo botão em vidro claro. */
.secao--vinho .carrossel-nav button {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.22);
  background: linear-gradient(170deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05));
  color: var(--aurora);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 6px 14px -8px rgba(0, 0, 0, 0.5);
}
.secao--vinho .carrossel-nav button:hover {
  background: linear-gradient(170deg, rgba(255,255,255,0.26), rgba(255,255,255,0.1));
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 10px 20px -8px rgba(0, 0, 0, 0.55);
}
.carrossel-nav button:active { transform: translateY(0); }
.carrossel-nav button:focus-visible { outline: 3px solid var(--cobre); outline-offset: 3px; }
.secao--vinho .carrossel-nav button:focus-visible { outline-color: var(--rosa); }
.carrossel-nav button[disabled] { opacity: 0.35; cursor: default; }
.carrossel-nav svg { width: 1.25rem; height: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
  .carrossel-trilho { scroll-behavior: auto; }
}

/* ---------- Marca ---------- */

/* O trilho responde ao arrasto do mouse; no toque a rolagem é nativa. */
.carrossel-trilho { cursor: grab; }
.carrossel-trilho[data-arrastando] { cursor: grabbing; user-select: none; }
.carrossel-trilho img { -webkit-user-drag: none; user-select: none; }