/* ============================================================
   Hello Confeitaria — estilo do site de pedidos
   Paleta e regras vêm de identidade/design-guide.md
   Cores = manual de marca oficial (identidade/manual-marca.pdf)
   ============================================================ */

:root{
  --rosa:#EAA4BD;      /* Amaranth Pink */
  --creme:#FDE6B6;     /* Peach */
  --verde:#1E3020;     /* Dark Green */
  --vermelho:#B9251F;  /* Cornell Red */
  --off:#F9F0E8;       /* Linen */
  --preto:#080A12;     /* Rich Black */
  /* tom mais escuro do rosa pra hover — método oficial do manual:
     ajustar intensidade misturando com preto, sem sair da paleta */
  --rosa-forte:color-mix(in srgb, var(--rosa) 78%, black);
  --sombra:0 0 0 2px var(--verde);
}

*{box-sizing:border-box;margin:0;padding:0}

html{
  overflow-x:hidden;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%; /* iOS não infla a fonte no giro da tela */
}

body{
  font-family:'Poppins',system-ui,sans-serif;
  /* fundo liso igual ao da landing: os adesivos fazem a textura, nao o padrao */
  background-color:var(--creme);
  color:var(--verde);
  line-height:1.5;
  overflow-x:hidden;
  /* altura da barra fixa + área segura do iPhone */
  padding-bottom:calc(112px + env(safe-area-inset-bottom));

  /* texto não copiável, sem menu de long-press, sem zoom de duplo toque */
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* o cliente precisa poder editar o que ele mesmo digitou */
input,textarea{
  -webkit-user-select:text;
  user-select:text;
  -webkit-touch-callout:default;
}

img{max-width:100%}
.wrap{max-width:760px;margin:0 auto;padding:0 20px}
/* o corpo ancora os adesivos de fundo; o conteudo fica por cima deles */
main.wrap{position:relative}
main.wrap > *:not(.decor){position:relative;z-index:2}
.hidden{display:none}

/* seção revelada rola até aqui sem colar no topo */
section{scroll-margin-top:16px}

/* ---------------- header ---------------- */
header{
  position:relative;
  text-align:center;
  padding:48px 20px 66px; /* +10px pro babado não comer o texto */
  overflow:hidden;

  /* pérolas e brilhos espalhados no rosa */
  background-color:var(--rosa);
  /* padrao ancorado embaixo pra calda continuar o mesmo alinhamento */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='%23F9F0E8' opacity='.28'%3E%3Ccircle cx='24' cy='30' r='4.5'/%3E%3Ccircle cx='38' cy='40' r='3'/%3E%3Ccircle cx='150' cy='120' r='4.5'/%3E%3Ccircle cx='138' cy='131' r='3'/%3E%3Ccircle cx='96' cy='16' r='2.6'/%3E%3Ccircle cx='16' cy='140' r='3'/%3E%3C/g%3E%3Cg fill='%23FDE6B6' opacity='.5'%3E%3Cpath d='M120 54 C121 62 123 64 131 65 C123 66 121 68 120 76 C119 68 117 66 109 65 C117 64 119 62 120 54Z'/%3E%3Cpath d='M56 108 C57 114 58 115 64 116 C58 117 57 118 56 124 C55 118 54 117 48 116 C54 115 55 114 56 108Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:180px 180px;
  background-position:left bottom;
}

/* adesivo e textura ficam atras do logo e do texto */
header > *:not(.decor){position:relative;z-index:2}

/* logo oficial da Hello (identidade/logo.png, reduzido pra web) */
.logo{
  display:block;margin:0 auto;
  width:min(300px,64vw);height:auto;
}
.tagline{
  font-family:'Pacifico',cursive;
  font-weight:400;font-size:clamp(20px,5.5vw,28px);
  line-height:1.2;
  margin-top:10px;
}
.sub{
  margin-top:22px;font-size:14px;font-weight:600;
  background:var(--creme);color:var(--vermelho);
  display:inline-block;padding:8px 20px;border-radius:99px;
  box-shadow:var(--sombra);
}

/* ---------------- seções ---------------- */
section{padding:44px 0 8px}
h2{
  font-size:clamp(26px,7vw,38px);font-weight:900;
  line-height:1.1;
  color:var(--vermelho);
}
.passo{
  font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rosa-forte);
  margin-bottom:6px;
}
.ajuda{font-size:14px;margin-top:8px;max-width:52ch}
.titulo-menor{margin-top:26px;font-size:19px;font-weight:900}

.grid{display:grid;gap:12px;margin-top:20px}
.g2{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}

/* ---------------- cards escolhíveis ---------------- */
.opt{
  background:var(--off);border:none;border-radius:20px;
  box-shadow:var(--sombra);padding:16px 14px;cursor:pointer;
  text-align:left;font:inherit;color:inherit;
  transition:transform .12s ease, background .12s ease;
  display:flex;flex-direction:column;gap:2px;
}
/* só onde existe mouse — no toque o :hover fica grudado depois do tap */
@media (hover:hover){ .opt:hover{transform:translateY(-2px)} }
.opt:active{transform:scale(.98)}
.opt[aria-pressed="true"]{background:var(--rosa);box-shadow:0 0 0 4px var(--vermelho)}
.opt .nome{font-weight:700;font-size:16px}
.opt .desc{font-size:12.5px;opacity:.8;line-height:1.35}
.opt .preco{
  margin-top:8px;font-weight:900;font-size:17px;color:var(--vermelho);
  background:var(--creme);align-self:flex-start;
  padding:2px 10px;border-radius:8px;box-shadow:0 0 0 1.5px var(--verde);
}
.opt[aria-pressed="true"] .preco{background:var(--off)}
.opt .mais{font-size:12px;font-weight:700;color:var(--vermelho)}

/* ---------------- campos ---------------- */
label.campo{display:block;margin-top:18px;font-weight:600;font-size:14px}
label.campo .opcional{opacity:.6;font-weight:400}
input,textarea{
  font:inherit;
  font-size:16px; /* abaixo de 16px o iOS dá zoom sozinho ao focar */
  width:100%;margin-top:6px;
  background:var(--off);border:none;border-radius:14px;
  box-shadow:var(--sombra);padding:12px 14px;color:var(--verde);
  -webkit-appearance:none;appearance:none;
}
input[type="date"]{min-height:48px} /* iOS encolhe o campo de data sem isso */
textarea{min-height:88px;resize:vertical}
input:focus,textarea:focus{outline:3px solid var(--vermelho);outline-offset:1px}

/* ---------------- elipse (assinatura da marca) ---------------- */
.elipse{
  background:var(--creme);box-shadow:var(--sombra);
  border-radius:50%/28%;padding:44px 30px;text-align:center;margin-top:24px;
}
.elipse h3{font-size:24px;font-weight:900;margin-bottom:14px}
.elipse ol{list-style:none;counter-reset:p}
.elipse li{
  counter-increment:p;padding:11px 0;font-weight:600;font-size:15px;
  border-bottom:1.5px solid var(--verde);
}
.elipse li:last-child{border:none}
.elipse li::before{content:counter(p) ". ";color:var(--vermelho);font-weight:900}

/* ---------------- políticas ---------------- */
/* só o xadrez: os adesivos fazem o resto do desenho */
.politicas{
  position:relative;overflow:hidden;
  margin-top:48px;
  padding:60px 0 52px;
  background-color:var(--rosa);
  background-image:repeating-conic-gradient(rgba(253,230,182,.22) 0% 25%, transparent 0% 50%);
  /* xadrez ancorado embaixo (nao em cima): assim a calda continua o mesmo
     alinhamento de casas, mesmo quando um <details> abre e a secao cresce */
  background-size:52px 52px;
  background-position:left bottom;
}
.politicas .decor-globo{bottom:14px;right:4%;width:88px;animation-delay:.9s}
.politicas .decor-taca{bottom:18px;left:3%;width:78px;animation-delay:2.1s}
@media(max-width:640px){
  .politicas .decor-globo{width:60px}
  .politicas .decor-taca{width:54px}
}
/* babado separando o creme do rosa */
.politicas::before{
  content:"";
  position:absolute;top:-1px;left:0;right:0;height:20px;
  background:
    radial-gradient(circle at 10px 20px, transparent 10px, var(--creme) 10.5px) 0 0/20px 20px repeat-x;
}
.politicas h2{color:var(--creme);position:relative}
.politicas .wrap{position:relative;z-index:2}
details{
  background:var(--creme);border-radius:18px;box-shadow:var(--sombra);
  margin-top:12px;overflow:hidden;
}
summary{
  padding:14px 18px;font-weight:700;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:12px;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-weight:900;color:var(--vermelho)}
details[open] summary::after{content:"–"}
details .corpo{padding:0 18px 18px;font-size:14px}
details .corpo p{margin-top:8px}

/* ---------------- barra fixa do resumo ---------------- */
/* cartão flutuante, não faixa: a página respira por baixo dele */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  padding:0 14px calc(12px + env(safe-area-inset-bottom));
  pointer-events:none; /* só o cartão recebe clique */
}
.barra .in{
  pointer-events:auto;
  max-width:760px;margin:0 auto;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--off);
  border-radius:22px;
  padding:12px 12px 12px 18px;
  box-shadow:0 0 0 2px var(--verde), 0 10px 28px rgba(28,46,35,.16);
}
.barra .val{flex:1;min-width:140px;font-size:13px;line-height:1.3;color:var(--verde)}
.barra .val b{display:block;font-size:21px;font-weight:900;color:var(--vermelho)}
.barra .val small{display:block;font-size:11.5px;opacity:.7;margin-top:1px}
.cta{
  font:inherit;font-weight:800;font-size:15.5px;border:none;cursor:pointer;
  background:var(--vermelho);color:var(--off);
  padding:13px 20px;border-radius:99px;
  box-shadow:0 0 0 2px var(--verde);
  transition:background .15s ease, transform .12s ease;
}
/* desabilitado vira rosa apagado em vez de vermelho meio transparente */
.cta:disabled{
  background:var(--rosa);color:var(--verde);
  box-shadow:0 0 0 2px rgba(28,46,35,.35);
  opacity:.75;cursor:not-allowed;
}
@media (hover:hover){ .cta:not(:disabled):hover{background:var(--rosa-forte)} }
/* botão "continuar" dentro do fluxo (não é o da barra fixa) */
section > .cta{display:block;width:100%;margin-top:26px}
.cta:not(:disabled):active{transform:scale(.97)}

/* ---------------- rodapé ---------------- */
.aviso{
  margin-top:16px;font-size:13px;font-weight:600;
  background:var(--vermelho);color:var(--creme);
  padding:10px 16px;border-radius:14px;display:inline-block;
}
footer{text-align:center;padding:34px 20px;font-size:13px}
/* fio de pérolas separando o conteúdo do rodapé */
footer::before{
  content:"";display:block;height:14px;margin:0 auto 20px;max-width:220px;
  background:radial-gradient(circle at 7px 7px, var(--verde) 4px, transparent 4.5px) 0 0/18px 14px repeat-x;
  opacity:.35;
}
footer a{color:var(--vermelho);font-weight:700}
.contato{margin-top:14px;font-size:14px;font-weight:600}
.contato a{
  display:inline-block;margin-left:4px;
  background:var(--creme);padding:4px 12px;border-radius:99px;
  box-shadow:0 0 0 1.5px var(--verde);text-decoration:none;
}
.contato-horario{margin-top:6px;font-size:12.5px;opacity:.7}
.redes{margin-top:16px;font-size:13px}
/* acento cursivo oficial do manual de marca (Pacifico) */
.script{
  font-family:'Pacifico',cursive;
  font-size:1.2em;color:var(--vermelho);line-height:1.2;
}

/* ============================================================
   MOBILE — o site nasce no celular, é de lá que o cliente vem
   ============================================================ */

/* celular comum (até 600px) */
@media (max-width:600px){
  .wrap{padding:0 16px}
  header{padding:36px 16px 42px}
  section{padding:34px 0 6px}

  /* cards de tamanho em 2 colunas mesmo em tela estreita */
  .g2{grid-template-columns:repeat(2,1fr);gap:10px}
  .g3{grid-template-columns:repeat(2,1fr);gap:10px}

  .opt{padding:14px 12px;border-radius:16px}
  .opt .nome{font-size:15px}
  .opt .preco{font-size:16px}

  /* elipse vira cápsula: círculo puro come o texto em tela estreita */
  .elipse{border-radius:32px;padding:32px 22px}
  .elipse h3{font-size:21px}
  .elipse li{font-size:14px;padding:9px 0}

  .politicas{padding:34px 0 40px}
  summary{padding:13px 15px;font-size:14px}
}

/* recheio tem nome comprido — 1 coluna pra não quebrar feio */
@media (max-width:600px){
  #recheios{grid-template-columns:1fr}
  #recheios .opt{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
  #recheios .mais{white-space:nowrap}
}

/* barra fixa: em tela estreita o botão ocupa a linha inteira */
@media (max-width:420px){
  .barra{padding:0 10px calc(10px + env(safe-area-inset-bottom))}
  .barra .in{flex-direction:column;align-items:stretch;gap:8px;padding:12px 12px}
  .barra .val{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0}
  .barra .val b{font-size:19px}
  .barra .val span{font-size:12px;opacity:.85}
  .barra .val small{width:100%}
  .cta{width:100%;padding:13px 18px}
}

/* telas bem pequenas (iPhone SE) */
@media (max-width:340px){
  .g2,.g3{grid-template-columns:1fr}
}

/* quem prefere menos movimento não leva scroll animado nem transform */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
}


/* ============================================================
   Adesivos e calda vindos da landing (css/landing.css)
   ============================================================ */

/* bugigangas espalhadas: pink em fundo claro, peach em fundo rosa */
.decor{position:absolute;pointer-events:none;z-index:1;width:130px;height:auto;opacity:.95;animation:float 5s ease-in-out infinite}
@media(max-width:640px){ .decor{width:76px} }
.decor-fundo{opacity:.14;animation:none}
.decor-xl{width:260px}
@media(max-width:640px){ .decor-xl{width:150px} }
@keyframes float{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-14px) rotate(6deg)}
}
@media(prefers-reduced-motion:reduce){ .decor{animation:none} }

/* ---------------- calda entre seções ----------------
   calda de confeiteiro pingando da seção de cima por cima da de baixo.
   a cor é sempre a da seção que está acima (--calda-cor), então a virada
   de cor continua a mesma de antes, só o recorte que ficou mais detalhado.
   é um desenho único (não é padrão repetido): traço contínuo de bézier no
   viewBox 1440x170, esticado na largura da tela — nunca menos que 1440px de
   largura, centralizado, senão os pingos achatam. usa mask pra colorir por
   variável. desenho vem do componente DripEdge do Framer. */
.calda{position:relative;z-index:3;--calda-cor:var(--rosa)}
.calda-creme{--calda-cor:var(--creme)}
/* a calda da fita é verde escuro pra destacar os nomes rolando */
.calda-verde{--calda-cor:var(--verde)}
.calda-verde .calda-trilho span{color:var(--off)}
.calda-verde .calda-trilho i{color:var(--rosa)}
.calda::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:110px;
  background-color:var(--calda-cor);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 170' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,42 C30,42 38,78 70,78 C102,78 112,40 150,40 C190,40 210,102 255,102 C300,102 310,36 350,36 C382,36 390,148 440,148 C490,148 498,38 530,38 C562,38 572,72 610,72 C648,72 654,46 688,46 C728,46 736,112 782,112 C828,112 836,34 872,34 C898,34 902,66 926,66 C950,66 956,42 980,42 C1009,42 1018,138 1064,138 C1110,138 1119,40 1148,40 C1188,40 1198,96 1242,96 C1286,96 1296,44 1332,44 C1356,44 1362,70 1390,70 C1414,70 1420,42 1440,42 L1440,0 Z'/%3E%3C/svg%3E") no-repeat center top;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 170' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,42 C30,42 38,78 70,78 C102,78 112,40 150,40 C190,40 210,102 255,102 C300,102 310,36 350,36 C382,36 390,148 440,148 C490,148 498,38 530,38 C562,38 572,72 610,72 C648,72 654,46 688,46 C728,46 736,112 782,112 C828,112 836,34 872,34 C898,34 902,66 926,66 C950,66 956,42 980,42 C1009,42 1018,138 1064,138 C1110,138 1119,40 1148,40 C1188,40 1198,96 1242,96 C1286,96 1296,44 1332,44 C1356,44 1362,70 1390,70 C1414,70 1420,42 1440,42 L1440,0 Z'/%3E%3C/svg%3E") no-repeat center top;
  -webkit-mask-size:max(100%,1440px) 100%;mask-size:max(100%,1440px) 100%;
}
@media(max-width:640px){ .calda::after{height:64px} }


/* a calda pinga por cima da seção de baixo: folga pro texto não ficar embaixo dela */
/* calda leva junto o padrao da secao de cima, no mesmo alinhamento */
.calda-perolas::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='%23F9F0E8' opacity='.28'%3E%3Ccircle cx='24' cy='30' r='4.5'/%3E%3Ccircle cx='38' cy='40' r='3'/%3E%3Ccircle cx='150' cy='120' r='4.5'/%3E%3Ccircle cx='138' cy='131' r='3'/%3E%3Ccircle cx='96' cy='16' r='2.6'/%3E%3Ccircle cx='16' cy='140' r='3'/%3E%3C/g%3E%3Cg fill='%23FDE6B6' opacity='.5'%3E%3Cpath d='M120 54 C121 62 123 64 131 65 C123 66 121 68 120 76 C119 68 117 66 109 65 C117 64 119 62 120 54Z'/%3E%3Cpath d='M56 108 C57 114 58 115 64 116 C58 117 57 118 56 124 C55 118 54 117 48 116 C54 115 55 114 56 108Z'/%3E%3C/g%3E%3C/svg%3E");background-size:180px 180px;background-position:left top}
/* a calda que sai do xadrez leva o xadrez junto */
.calda-xadrez::after{background-image:repeating-conic-gradient(rgba(253,230,182,.22) 0% 25%, transparent 0% 50%);background-size:52px 52px;background-position:left top}

.calda + main{display:block;padding-top:56px}
.calda + footer{padding-top:96px}
@media(max-width:640px){ .calda + main{padding-top:30px} .calda + footer{padding-top:62px} }