/* Café da Prosperidade · Raquel Mendes
   Editorial claro (referências DDN e Essency): café com leite, texto espresso, dourado do logo nos detalhes. */
:root{
  --leite:#F4EDE3;--latte:#E9DCCB;--creme:#FBF7F1;--espresso:#2B211C;--torra:#5C4637;--caramelo:#8A6440;
  --ouro:#B8953A;--ouro-claro:#D9BE6E;--cafe-1:#7A5236;--cafe-2:#B48A64;
  --display:"Playfair Display","Didot","Times New Roman",serif;
  --texto:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --larg:min(1140px,100% - 40px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--texto);background:var(--leite);color:var(--espresso);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--caramelo);outline-offset:3px;border-radius:4px}

/* marca */
.marca{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:var(--espresso)}
.marca .monograma{font-family:var(--display);font-size:52px;line-height:.8;font-weight:500;letter-spacing:-.05em;
  background:linear-gradient(180deg,var(--ouro-claro),var(--ouro) 50%,#7A6230);-webkit-background-clip:text;background-clip:text;color:transparent}
.marca .nome{display:grid;line-height:1.2;border-left:1px solid rgba(43,33,28,.25);padding-left:14px}
.marca .nome b{font-family:var(--display);font-weight:500;font-size:19px}
.marca .nome small{font-size:12.5px;color:var(--torra)}

/* dobra 1: topo (a foto recortada é o fundo, à direita, e some no creme) */
.topo{position:relative;overflow:hidden;background:radial-gradient(ellipse 42% 70% at 74% 48%,#FFFCF6 0%,rgba(255,252,246,0) 72%),var(--leite)}
.topo-in{position:relative;width:var(--larg);margin:0 auto;padding:40px 0 120px;min-height:min(100svh,940px);display:grid;align-content:center}
.topo-tx{position:relative;z-index:2;width:min(560px,100%);display:grid}
.topo-tx .marca{margin-bottom:40px}
h1{font-family:var(--display);font-weight:500;font-size:clamp(38px,3.6vw,56px);line-height:1.08;letter-spacing:-.01em;margin-bottom:20px}
h1 .l1{white-space:nowrap}
h1 em{display:block;font-style:italic;font-weight:400;color:var(--caramelo)}
.sub{font-size:18px;color:var(--torra);max-width:46ch;margin-bottom:28px}
.sub strong{color:var(--espresso);font-weight:600}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:0 32px;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--texto);font-size:16.5px;font-weight:700;letter-spacing:.01em;color:var(--creme);text-decoration:none;
  background:linear-gradient(135deg,#3A2A20,var(--cafe-1));box-shadow:0 14px 30px -14px rgba(58,42,32,.7);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 18px 34px -14px rgba(58,42,32,.8)}
.btn.claro{color:var(--espresso);background:linear-gradient(180deg,#FFFCF7,#EFE3D2);box-shadow:0 1px 0 #fff inset,0 10px 26px -12px rgba(0,0,0,.45)}
.confianca{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--torra)}
.confianca svg{width:15px;height:15px;flex:none;color:var(--ouro)}
.foto-fundo{position:absolute;z-index:1;right:max(0px,calc((100% - 1140px)/2 - 40px));bottom:0;height:calc(100% - 30px);max-height:900px;aspect-ratio:1028/1529;pointer-events:none}
.foto-fundo picture,.foto-fundo img{width:100%;height:100%}
.foto-fundo img{object-fit:contain;object-position:bottom center;
  -webkit-mask-image:linear-gradient(to top,transparent 0%,#000 26%);mask-image:linear-gradient(to top,transparent 0%,#000 26%)}
.selo{position:absolute;left:-6%;top:38%;width:132px;aspect-ratio:1;z-index:2;color:var(--caramelo)}
.selo svg.anel{width:100%;height:100%;animation:girar 45s linear infinite}
.selo .xic{position:absolute;inset:0;display:grid;place-items:center}
.selo .xic svg{width:36%;height:36%}
@keyframes girar{to{transform:rotate(360deg)}}

/* cartão ingresso (referência DDN) */
.ingresso-faixa{position:relative;margin-top:-40px;z-index:3;padding-bottom:40px}
.ingresso{width:var(--larg);margin:0 auto;position:relative;border-radius:26px;color:var(--creme);
  background:linear-gradient(110deg,var(--cafe-1) 0%,#946A47 55%,var(--cafe-2) 100%);
  padding:40px clamp(28px,7vw,110px);display:grid;justify-items:center;text-align:center;gap:14px;
  -webkit-mask:radial-gradient(circle 26px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 26px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 26px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 26px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat}
.ingresso .grao{position:absolute;left:clamp(24px,5vw,70px);top:50%;transform:translateY(-50%);width:clamp(90px,10vw,140px);opacity:.2;color:var(--creme)}
.ingresso h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,3vw,44px);line-height:1.1}
.ingresso p{max-width:58ch;color:rgba(251,247,241,.9);font-size:clamp(15.5px,1.2vw,17px)}
.ingresso small{font-size:13.5px;color:rgba(251,247,241,.82)}

/* dobra 2 */
.mesa-in{width:var(--larg);margin:0 auto;padding:40px 0}
.mesa h2{font-family:var(--display);font-weight:400;font-size:clamp(32px,3.6vw,52px);line-height:1.1;text-align:center}
.mesa h2 em{font-style:italic;color:var(--caramelo)}
.mesa .lead{text-align:center;color:var(--torra);margin:12px auto 0;max-width:52ch}
.itens{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(32px,4vw,52px)}
.itens li{background:var(--latte);border:1px solid rgba(138,100,64,.18);border-radius:18px;padding:24px 24px 26px;display:grid;gap:10px;align-content:start}
.itens .ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--creme);color:var(--caramelo)}
.itens .ic svg{width:22px;height:22px}
.itens b{font-family:var(--display);font-size:23px;font-weight:500;line-height:1.2}
.itens p{color:var(--torra);font-size:15.5px;line-height:1.55}
.itens .falta{color:var(--caramelo);font-weight:600;font-size:13.5px}
.quem{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:center;margin-top:80px}
.quem picture{display:block;position:relative;aspect-ratio:1000/1100;background:radial-gradient(ellipse 60% 55% at 50% 55%,var(--latte),rgba(233,220,203,0) 72%)}
.quem img{width:100%;height:100%;object-fit:contain;object-position:bottom center;-webkit-mask-image:linear-gradient(to top,transparent 0%,#000 22%);mask-image:linear-gradient(to top,transparent 0%,#000 22%)}
.quem-tx{display:grid;gap:16px;justify-items:start}
.quem-tx small{font-size:14px;font-weight:600;color:var(--caramelo)}
.quem-tx h2{text-align:left}
.quem-tx p{color:var(--torra);max-width:48ch}
.numeros{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;margin:6px 0 4px}
.numeros li{padding:16px 16px 14px;border-radius:16px;background:var(--latte);border:1px solid rgba(138,100,64,.18);display:grid;gap:2px}
.numeros b{font-family:var(--display);font-size:clamp(24px,2.2vw,32px);font-weight:500;line-height:1.1;color:var(--espresso)}
.numeros span{font-size:13.5px;color:var(--torra);line-height:1.35}
.livro{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--torra)}
.livro svg{width:20px;height:20px;flex:none;color:var(--caramelo)}
.livro em{color:var(--espresso);font-style:italic}
.quem-tx p strong{color:var(--espresso)}
.rodape{border-top:1px solid rgba(138,100,64,.2);color:var(--torra);font-size:13px}
.rodape-in{width:var(--larg);margin:0 auto;padding:40px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* formulário em etapas */
.janela{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(43,33,28,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.janela[hidden]{display:none}
.caixa{position:relative;width:min(460px,100%);background:var(--creme);color:var(--espresso);border-radius:24px;padding:30px 28px 26px;box-shadow:0 30px 80px -20px rgba(43,33,28,.6)}
.caixa .fechar{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(43,33,28,.07);color:var(--espresso);font-size:22px;line-height:1;cursor:pointer}
.caixa .fechar[hidden],.caixa .seguro[hidden]{display:none}
.barra{height:4px;border-radius:4px;background:rgba(43,33,28,.1);overflow:hidden;margin:0 40px 22px 0}
.barra i{display:block;height:100%;width:33%;background:linear-gradient(90deg,var(--cafe-1),var(--cafe-2));transition:width .3s}
.passo{display:grid;gap:14px}.passo[hidden]{display:none}
.passo label{font-family:var(--display);font-size:27px;line-height:1.15}
.passo small{color:var(--torra);font-size:14px}
.passo input{width:100%;height:56px;border-radius:14px;border:1.5px solid rgba(43,33,28,.16);background:#fff;padding:0 16px;font-size:17px;font-family:var(--texto);color:var(--espresso)}
.passo input:focus{outline:0;border-color:var(--caramelo);box-shadow:0 0 0 4px rgba(138,100,64,.18)}
.passo .btn{width:100%}
.erro{color:#9B2C1F;font-size:14px;min-height:20px}
.caixa .seguro{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:14px;font-size:12.5px;color:var(--torra)}
.caixa .seguro svg{width:13px;height:13px}
.passo.feito{justify-items:center;text-align:center;padding:10px 0 6px}
.feito-ic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;color:var(--creme);background:linear-gradient(135deg,var(--cafe-1),var(--cafe-2));box-shadow:0 10px 30px -8px rgba(122,82,54,.6)}
.feito-ic svg{width:30px;height:30px}
.girando{width:28px;height:28px;border-radius:50%;border:3px solid rgba(138,100,64,.2);border-top-color:var(--caramelo);animation:girar 1s linear infinite;margin-top:4px}
.girando[hidden]{display:none}

/* celular: a foto fica atrás, no alto à direita, e some no creme */
@media (max-width:860px){
  .topo-in{padding:20px 0 104px;min-height:0;align-content:start}
  .topo-tx{width:100%}
  .topo-tx .marca{margin-bottom:150px}
  .marca .monograma{font-size:40px}.marca .nome b{font-size:15px;max-width:7.2em}
  .foto-fundo{right:-18px;top:0;bottom:auto;height:300px}
  .foto-fundo img{-webkit-mask-image:linear-gradient(to top,transparent 2%,#000 45%);mask-image:linear-gradient(to top,transparent 2%,#000 45%)}
  .selo{display:none}
  h1{font-size:clamp(31px,8.6vw,38px);margin-bottom:12px}
  h1 .l1{white-space:normal}
  .sub{font-size:15.5px;line-height:1.55;margin-bottom:18px}
  .btn{width:100%;min-height:54px}
  .ingresso{padding:32px 24px;-webkit-mask:radial-gradient(circle 16px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 16px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 16px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 16px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat}
  .ingresso .grao{display:none}
  .itens,.quem{grid-template-columns:minmax(0,1fr)}
  .quem{gap:20px;margin-top:56px}
  .numeros{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .numeros li:last-child{grid-column:1/-1}
  .ingresso-faixa{margin-top:-30px}
  .topo-in{padding-bottom:70px}
  .quem .btn{justify-self:stretch}
}
@media (max-width:860px) and (max-height:700px){.topo-tx .marca{margin-bottom:118px}.foto-fundo{height:250px}h1{font-size:30px}.sub{font-size:14.5px;line-height:1.5;margin-bottom:14px}}


/* formulário na página (referências Clamor da Madrugada e Pense & Ore) */
.cadastro{display:grid;gap:10px;width:min(100%,470px);margin-top:4px;padding:18px;border-radius:22px;background:var(--creme);border:1px solid rgba(138,100,64,.2);box-shadow:0 30px 60px -40px rgba(58,42,32,.5)}
.campo{display:flex;align-items:center;gap:10px;height:54px;padding:0 14px 0 8px;border-radius:14px;background:#fff;border:1.5px solid rgba(43,33,28,.12);transition:border-color .15s,box-shadow .15s}
.campo:focus-within{border-color:var(--caramelo);box-shadow:0 0 0 4px rgba(138,100,64,.15)}
.campo.ruim{border-color:#B4432F}
.campo .ic{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--leite);color:var(--caramelo)}
.campo .ic svg{width:19px;height:19px}
.campo input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font-family:var(--texto);font-size:16.5px;color:var(--espresso)}
.campo input::placeholder{color:#9A8A7C}
.cadastro .btn{width:100%;margin-top:2px}
.cadastro .erro{color:#9B2C1F;font-size:13.5px;min-height:0}
.cadastro .erro:empty{display:none}
.cadastro .confianca{justify-content:center;font-size:12.5px;text-align:center}
.caixa.feito{display:grid;justify-items:center;text-align:center;gap:12px;padding:34px 28px}
.caixa.feito h2{font-family:var(--display);font-weight:400;font-size:30px}
.caixa.feito p{color:var(--torra)}


@media (max-width:860px){.cadastro{padding:12px;gap:8px}.campo{height:50px}.campo .ic{width:34px;height:34px}}
@media (max-width:860px) and (max-height:700px){.campo{height:46px}.cadastro .btn{min-height:50px}}
.numeros b{white-space:nowrap;font-size:clamp(21px,1.9vw,28px)}

/* selo: texto girando, anel duplo, vapor subindo e leve flutuação */
.selo{border-radius:50%;background:radial-gradient(circle,#FFFDF9 0%,#F7EFE4 100%);box-shadow:0 18px 40px -18px rgba(58,42,32,.45),0 0 0 1px rgba(138,100,64,.22);animation:flutua 6s ease-in-out infinite}
.selo::before{content:"";position:absolute;inset:9px;border-radius:50%;border:1px dashed rgba(138,100,64,.35)}
.selo::after{content:"";position:absolute;inset:30%;border-radius:50%;background:radial-gradient(circle,rgba(138,100,64,.12),transparent 70%)}
.selo svg.anel{position:absolute;inset:0;animation:girar 18s linear infinite}
.selo .xic svg{width:42%;height:42%;position:relative;z-index:1}
.selo .vapor{stroke-dasharray:14;stroke-dashoffset:14;opacity:0;animation:vapor 2.8s ease-in-out infinite}
.selo .v2{animation-delay:.5s}.selo .v3{animation-delay:1s}
@keyframes vapor{0%{stroke-dashoffset:14;opacity:0;transform:translateY(3px)}35%{opacity:1}70%{stroke-dashoffset:0;opacity:.9}100%{stroke-dashoffset:-14;opacity:0;transform:translateY(-4px)}}
@keyframes flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}


/* botão principal: cantos retos suaves, degradê café que corre e um brilho que passa */
.btn:not(.claro){position:relative;overflow:hidden;isolation:isolate;border-radius:12px;min-height:60px;padding:0 10px 0 28px;justify-content:space-between;gap:18px;
  color:#FBF4E8;letter-spacing:.015em;
  background:linear-gradient(110deg,#2B1D16 0%,#5A3A27 25%,#8A6440 50%,#5A3A27 75%,#2B1D16 100%);background-size:220% 100%;
  animation:corre 6s ease-in-out infinite;box-shadow:0 1px 0 rgba(255,236,200,.18) inset,0 18px 34px -16px rgba(58,42,32,.75)}
.btn:not(.claro)::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(232,201,140,.38) 50%,transparent 65%);transform:translateX(-120%);animation:brilho 3.8s ease-in-out infinite}
.btn:not(.claro)::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(110deg,rgba(216,180,110,.0),rgba(216,180,110,.7),rgba(216,180,110,.0));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.btn-seta{width:42px;height:42px;flex:none;border-radius:9px;display:grid;place-items:center;background:rgba(251,244,232,.12);border:1px solid rgba(216,180,110,.45);transition:transform .2s,background .2s}
.btn-seta svg{width:19px;height:19px}
.btn:not(.claro):hover .btn-seta{transform:translateX(3px);background:rgba(216,180,110,.25)}
.btn:not(.claro):hover{transform:translateY(-1px)}
.btn:disabled{opacity:.85;cursor:wait}
@keyframes corre{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes brilho{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.btn.claro{border-radius:12px}
.quem .btn:not(.claro){min-width:300px}
@media (max-width:860px){.btn:not(.claro){min-height:56px;padding-left:22px}.btn-seta{width:38px;height:38px}.quem .btn:not(.claro){min-width:0}}


/* logo: só o nome, nas cores da página */
.marca{gap:12px}
.marca-ic{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;color:var(--caramelo);border:1px solid rgba(138,100,64,.35);background:var(--creme)}
.marca-ic svg{width:26px;height:26px}
.marca-ic .vapor{stroke-dasharray:14;stroke-dashoffset:14;opacity:0;animation:vapor 2.8s ease-in-out infinite}
.marca-ic .v2{animation-delay:.6s}
.marca .nome{border-left:0;padding-left:0;gap:2px}
.marca .nome b{font-size:22px;font-weight:500;color:var(--espresso);letter-spacing:-.005em}
.marca .nome b i{font-style:italic;color:var(--caramelo)}
.marca .nome small{font-size:12.5px;letter-spacing:.02em}
@media (max-width:860px){.marca-ic{width:40px;height:40px}.marca-ic svg{width:22px;height:22px}.marca .nome b{font-size:18px;max-width:none}}

/* logo só com o nome */
.marca .nome b{font-size:26px;line-height:1.05}
.marca .nome small{font-size:13px;margin-top:3px}
@media (max-width:860px){.marca .nome b{font-size:21px}}
/* sombra da foto: contorno suave e um apoio no chão */
.foto-fundo img{filter:drop-shadow(0 30px 40px rgba(58,42,32,.22)) drop-shadow(0 6px 12px rgba(58,42,32,.12))}
.foto-fundo::after{content:"";position:absolute;left:10%;right:10%;bottom:-2%;height:12%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(58,42,32,.22),transparent 70%);z-index:-1;filter:blur(6px)}
.quem img{filter:drop-shadow(0 24px 34px rgba(58,42,32,.22)) drop-shadow(0 4px 10px rgba(58,42,32,.1))}

/* logo no modelo da arte dela: duas linhas, serifada encorpada, dourado */
.logo{display:grid;line-height:.95;font-family:var(--display);font-weight:700;letter-spacing:-.005em;
  background:linear-gradient(180deg,#E3C873 0%,#C29B3E 45%,#8E6B24 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.4))}
.logo span:first-child{font-size:26px}
.logo span:last-child{font-size:34px}
@media (max-width:860px){.logo span:first-child{font-size:21px}.logo span:last-child{font-size:27px}}

/* selo v3: disco café escuro, texto creme girando, pontinhos ao contrário, vapor */
.selo{width:150px;background:none;box-shadow:none;color:#B48A64;animation:flutua 5s ease-in-out infinite}
.selo::before,.selo::after{display:none}
.selo .pontos{position:absolute;inset:0;width:100%;height:100%;animation:girar 30s linear infinite reverse;color:#B48A64}
.selo .disco{position:absolute;inset:8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#5A3E2C 0%,#3A2A20 55%,#2B1F18 100%);
  box-shadow:0 18px 36px -14px rgba(43,31,24,.6),inset 0 1px 0 rgba(255,230,200,.15),inset 0 0 0 1px rgba(180,138,100,.35)}
.selo svg.anel{inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);color:#F1E2CC;animation:girar 12s linear infinite}
.selo .xic{color:#F1E2CC}
.selo .xic svg{width:40%;height:40%}
@media (max-width:860px){.selo{width:104px}}
/* sombra fora do esfumado: segue o contorno dela, sem quadro */
.foto-fundo img,.quem img{filter:none}
.foto-fundo picture{filter:drop-shadow(0 26px 34px rgba(58,42,32,.2)) drop-shadow(0 4px 10px rgba(58,42,32,.12))}
.quem picture{filter:drop-shadow(0 22px 30px rgba(58,42,32,.2)) drop-shadow(0 4px 10px rgba(58,42,32,.1))}
/* logo: formato da arte (duas linhas), com as cores e a letra da página */
.logo{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--espresso);filter:none;font-weight:500;line-height:1.08;gap:0}
.logo span:first-child{font-size:20px;font-weight:500;color:var(--espresso)}
.logo span:last-child{font-size:30px;font-style:italic;font-weight:400;color:var(--caramelo);margin-top:-2px}
@media (max-width:860px){.logo span:first-child{font-size:17px}.logo span:last-child{font-size:25px}}

/* logo final: desenho da arte dela (nome empilhado) nas cores da página */
.logo{display:inline-grid;justify-items:center;gap:2px;line-height:1;color:var(--espresso)}
.logo .l-top{font-family:var(--display);font-size:17px;font-weight:500;font-style:italic;color:var(--caramelo);letter-spacing:.04em}
.logo .l-fio{display:flex;align-items:center;gap:8px;width:100%;color:var(--caramelo);margin:3px 0 4px}
.logo .l-fio i{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(138,100,64,.6))}
.logo .l-fio i:last-child{background:linear-gradient(90deg,rgba(138,100,64,.6),transparent)}
.logo .l-fio svg{width:16px;height:11px;flex:none}
.logo .l-nome{font-family:var(--display);font-size:34px;font-weight:700;letter-spacing:.01em;color:var(--espresso)}
.logo span:first-child,.logo span:last-child{margin:0}
@media (max-width:860px){.logo .l-top{font-size:15px}.logo .l-nome{font-size:27px}}
.marca .logo .l-top{font-size:17px;font-style:italic;font-weight:500;color:var(--caramelo);margin:0}
.marca .logo .l-nome{font-size:36px;font-style:normal;font-weight:700;color:var(--espresso);margin:0}
.marca .logo .l-fio{margin:4px 0 5px}
@media (max-width:860px){.marca .logo .l-top{font-size:15px}.marca .logo .l-nome{font-size:28px}}

/* logo: volta ao formato anterior (Café da / Prosperidade), com tamanho de logo */
.marca .logo{justify-items:start;gap:0;line-height:1.05}
.marca .logo .l-top{font-size:22px;font-style:normal;font-weight:500;color:var(--espresso);letter-spacing:0}
.marca .logo .l-nome{font-size:34px;font-style:italic;font-weight:400;color:var(--caramelo);margin-top:-1px}
@media (max-width:860px){.marca .logo .l-top{font-size:18px}.marca .logo .l-nome{font-size:27px}}

/* símbolo CP ao lado do nome, nas cores da página */
.marca{gap:16px;align-items:center}
.marca .monograma{display:block;font-family:var(--display);font-size:54px;font-weight:500;line-height:.85;letter-spacing:-.05em;
  background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--caramelo);padding-right:16px;border-right:1px solid rgba(138,100,64,.35)}
@media (max-width:860px){.marca .monograma{font-size:42px;padding-right:12px}.marca{gap:12px}}

/* selo: só gira, devagar; nada balança */
.selo{animation:none}
.selo .pontos{animation:none}
.selo svg.anel{animation:girar 22s linear infinite}
.selo .disco{inset:6px}

/* botão no estilo da página do Nikias, nas cores do café */
.btn:not(.claro){border-radius:6px;padding:0 32px;justify-content:center;gap:0;min-height:62px;
  font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#FBF4E8;
  background:linear-gradient(90deg,#4A3022 0%,#7A5236 50%,#9C7048 100%);background-size:100% 100%;animation:none;
  border:0;border-top:2px solid rgba(214,170,120,.75);
  box-shadow:0 10px 20px rgba(122,82,54,.28),0 20px 40px rgba(122,82,54,.2),0 40px 80px rgba(122,82,54,.12);transition:transform .4s ease,box-shadow .4s ease}
.btn:not(.claro):hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(122,82,54,.32),0 26px 50px rgba(122,82,54,.24),0 50px 100px rgba(122,82,54,.14)}
.btn:not(.claro)::before{display:none}
.btn:not(.claro)::after{content:"";position:absolute;inset:0 auto 0 -15%;width:60px;z-index:0;
  background:linear-gradient(10deg,rgba(255,240,220,.7) 12%,rgba(255,240,220,0) 66%);transform:skew(-20deg);filter:blur(4px);animation:shinery 3.2s infinite ease-in-out}
.btn:not(.claro) span{position:relative;z-index:1}
@keyframes shinery{0%,100%{left:-15%;opacity:0}20%{opacity:1}48%{left:115%;opacity:1}51%{opacity:0}}
.btn.claro{border-radius:6px;text-transform:uppercase;letter-spacing:.06em;font-size:15px}
@media (max-width:860px){.btn:not(.claro){font-size:14.5px;min-height:56px;padding:0 18px}}

/* selo no padrão da página do Nikias, nas cores do café */
.topo .selo{width:168px;aspect-ratio:1;background:none;box-shadow:none;animation:none;color:inherit}
.topo .selo .selo-bg{position:absolute;inset:0;border-radius:50%;background:rgba(122,82,54,.78);box-shadow:0 10px 30px rgba(43,31,24,.35)}
.topo .selo .selo-core{position:absolute;inset:13.35%;border-radius:50%;background:#2B1F18;z-index:1}
.topo .selo .selo-ring{position:absolute;inset:0;width:100%;height:100%;z-index:1;animation:sealSpin 30s linear infinite}
.topo .selo .selo-ring text{font-family:var(--texto);font-size:11.5px;font-weight:600;letter-spacing:0;fill:#FBF4E8;text-transform:uppercase}
.topo .selo .selo-mark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;font-family:var(--display);font-size:38px;font-weight:500;letter-spacing:-.05em;color:#E9D2B4;line-height:1}
@keyframes sealSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media (max-width:860px){.topo .selo{width:104px}.topo .selo .selo-mark{font-size:24px}}

/* selo v4: design anterior (disco, pontinhos, xícara) com texto por igual e pontinhos girando */
.topo .selo.selo-v4{width:150px;color:#B48A64}
.selo-v4 .pontos{position:absolute;inset:0;width:100%;height:100%;color:#B48A64;animation:sealSpin 40s linear infinite reverse!important}
.selo-v4 .disco{position:absolute;inset:8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#5A3E2C 0%,#3A2A20 55%,#2B1F18 100%);
  box-shadow:0 18px 36px -14px rgba(43,31,24,.6),inset 0 1px 0 rgba(255,230,200,.15),inset 0 0 0 1px rgba(180,138,100,.35)}
.selo-v4 .anel{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);animation:sealSpin 26s linear infinite}
.selo-v4 .anel text{font-family:var(--texto);font-size:11px;font-weight:600;letter-spacing:0;fill:#F1E2CC;text-transform:uppercase}
.selo-v4 .xic{position:absolute;inset:0;display:grid;place-items:center;color:#F1E2CC}
.selo-v4 .xic svg{width:40%;height:40%}
@media (max-width:860px){.topo .selo.selo-v4{width:104px}}
.selo-v4 .anel text{font-size:12px;letter-spacing:3.6px}
.selo-v4 .anel text{letter-spacing:3.38px}

/* fundo atrás dela: xícara vista de cima (crema em anéis) */
.foto-fundo .crema{position:absolute;z-index:-1;left:50%;top:6%;width:118%;aspect-ratio:1;transform:translateX(-50%);pointer-events:none}
.foto-fundo .crema-gira{transform-origin:300px 300px;animation:girar 90s linear infinite}
.foto-fundo picture{position:relative;z-index:1}
@media (max-width:860px){.foto-fundo .crema{width:130%;top:0}}
.foto-fundo .crema{top:2%;width:112%}
@media (min-width:861px){
  .foto-fundo img{
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 14%),linear-gradient(to top,transparent 0%,#000 26%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right,transparent 0%,#000 14%),linear-gradient(to top,transparent 0%,#000 26%);
    mask-composite:intersect}
}

/* botão claro do cartão: mesmo padrão do principal */
.btn.claro{position:relative;overflow:hidden;isolation:isolate;min-height:60px;padding:0 34px;font-weight:700;color:#3A2A20;
  background:linear-gradient(90deg,#F6E9D6 0%,#FFF8EE 50%,#EBD7BB 100%);border-top:2px solid #FFFFFF;
  box-shadow:0 10px 20px rgba(43,31,24,.22),0 20px 40px rgba(43,31,24,.16);transition:transform .4s ease,box-shadow .4s ease}
.btn.claro:hover{transform:translateY(-4px)}
.btn.claro::after{content:"";position:absolute;inset:0 auto 0 -15%;width:60px;z-index:0;background:linear-gradient(10deg,rgba(255,255,255,.95) 12%,rgba(255,255,255,0) 66%);transform:skew(-20deg);filter:blur(4px);animation:shinery 3.2s infinite ease-in-out}
.btn.claro span{position:relative;z-index:1}

/* ===== celular: tudo centralizado (logo, foto grande no meio, título, formulário completo) ===== */
@media (max-width:860px){
  .topo-in{padding:16px 0 70px;text-align:center}
  .topo-tx{width:100%;justify-items:center}
  .topo-tx .marca{margin:0 auto 0;justify-content:center}
  .marca .monograma{font-size:34px}
  .marca .logo .l-top{font-size:15px}.marca .logo .l-nome{font-size:22px}
  .foto-fundo{position:relative;right:auto;left:auto;top:auto;bottom:auto;order:0;height:clamp(200px,34svh,300px);width:auto;margin:6px auto -26px;aspect-ratio:1028/1529;z-index:0}
  .foto-fundo img{-webkit-mask-image:linear-gradient(to top,transparent 0%,#000 30%);mask-image:linear-gradient(to top,transparent 0%,#000 30%)}
  .foto-fundo .crema{width:150%;top:4%}
  .topo .selo.selo-v4{display:none}
  .topo-in{display:flex;flex-direction:column;align-items:center}
  .topo-tx{display:contents}
  .topo-tx .marca{order:-2}
  .foto-fundo{order:-1}
  h1{position:relative;z-index:2;font-size:clamp(28px,8vw,36px);margin:0 0 8px;text-align:center}
  h1 .l1{white-space:nowrap}
  .sub{font-size:14.5px;line-height:1.5;margin:0 auto 14px;max-width:34ch;text-align:center}
  .cadastro{width:100%;padding:10px;gap:7px;text-align:left}
  .campo{height:46px}.campo .ic{width:32px;height:32px}
  .cadastro .btn{min-height:50px}
  .cadastro .confianca{font-size:11.5px}
}
@media (max-width:860px) and (max-height:700px){.foto-fundo{height:160px;margin-bottom:-18px}h1{font-size:27px}.sub{font-size:13.5px;margin-bottom:10px}.campo{height:42px}.cadastro .btn{min-height:46px}}
@media (max-width:860px){.cadastro .confianca{display:block;text-align:center}.cadastro .confianca svg{display:inline-block;vertical-align:-2px;margin-right:5px}}

/* ===== celular v2: foto grande de fundo; logo logo acima do título; formulário inteiro ===== */
@media (max-width:860px){
  .topo-in{display:flex;flex-direction:column;align-items:center;text-align:center;padding:max(170px,calc(100svh - 540px)) 0 70px;position:relative}
  .foto-fundo{position:absolute;order:0;top:0;left:50%;right:auto;bottom:auto;transform:translateX(-50%);margin:0;
    height:calc(max(170px,calc(100svh - 540px)) + 150px);width:auto;aspect-ratio:1028/1529;z-index:0}
  .foto-fundo img{-webkit-mask-image:linear-gradient(to top,transparent 0%,rgba(0,0,0,.35) 22%,#000 48%);mask-image:linear-gradient(to top,transparent 0%,rgba(0,0,0,.35) 22%,#000 48%)}
  .foto-fundo .crema{width:170%;top:6%}
  .topo-tx .marca{order:1;margin:0 auto 10px;position:relative;z-index:2}
  h1{order:2;position:relative;z-index:2}
  .sub{order:3;position:relative;z-index:2}
  .cadastro{order:4;position:relative;z-index:2}
}
@media (max-width:860px) and (max-height:700px){.topo-in{padding-top:150px}.foto-fundo{height:290px}.topo-tx .marca{margin-bottom:6px}}
@media (max-width:860px){
  .foto-fundo img{-webkit-mask-image:linear-gradient(to top,transparent 0,transparent 100px,rgba(0,0,0,.5) 160px,#000 230px);mask-image:linear-gradient(to top,transparent 0,transparent 100px,rgba(0,0,0,.5) 160px,#000 230px)}
  .foto-fundo .crema{opacity:.55}
  .foto-fundo{height:calc(max(170px,calc(100svh - 540px)) + 130px)}
}
@media (max-width:860px) and (max-height:700px){.foto-fundo{height:270px}}
/* celular v3: o texto começa onde a foto termina; logo menor */
@media (max-width:860px){
  .topo-in{padding-top:max(250px,calc(100svh - 500px))}
  .foto-fundo{height:calc(max(250px,calc(100svh - 500px)) + 40px)}
  .foto-fundo img{-webkit-mask-image:linear-gradient(to top,transparent 0,transparent 30px,#000 140px);mask-image:linear-gradient(to top,transparent 0,transparent 30px,#000 140px)}
  .marca .monograma{font-size:28px;padding-right:10px}
  .marca{gap:10px}
  .marca .logo .l-top{font-size:13px}.marca .logo .l-nome{font-size:19px}
  .topo-tx .marca{margin-bottom:8px}
}
@media (max-width:860px) and (max-height:700px){.topo-in{padding-top:250px}.foto-fundo{height:290px}}
/* celular v4: texto 10px acima; respiro em cima da cabeça */
@media (max-width:860px){
  .topo-in{padding-top:max(240px,calc(100svh - 510px))}
  .foto-fundo{top:18px;height:calc(max(240px,calc(100svh - 510px)) + 12px)}
}
@media (max-width:860px) and (max-height:700px){.topo-in{padding-top:240px}.foto-fundo{height:262px}}
@media (max-width:860px){
  .topo .selo.selo-v4{display:block;width:92px;left:-22%;top:44%;z-index:3}
  .selo-v4 .anel text{font-size:12px}
}
@media (max-width:860px){
  .topo .selo.selo-v4{width:70px;left:-8%;top:52%}
  .selo-v4 .anel text{font-size:15px}
}
/* celular v5: sobe mais 10px */
@media (max-width:860px){
  .topo-in{padding-top:max(230px,calc(100svh - 520px))}
  .foto-fundo{top:14px;height:calc(max(230px,calc(100svh - 520px)) + 12px)}
}
@media (max-width:860px) and (max-height:700px){.topo-in{padding-top:230px}.foto-fundo{height:252px}}
/* foto do topo um pouco menor no computador */
/* selo no celular: mesmo encaixe do texto do computador (não sobrepõe) */
@media (max-width:860px){.topo .selo.selo-v4{width:80px}.selo-v4 .anel text{font-size:12px;letter-spacing:3.38px}}