/* ============================================================
   ConfeiteiraFlow — página de fila de espera
   Direção: confeitaria editorial + cupom de caixa. O "papel de
   cupom" (serrilhado, fonte de maquininha) é a assinatura visual:
   é o objeto que toda confeiteira de feira reconhece.
   ============================================================ */
:root {
  --massa: #FFF4E6;      /* fundo: massa crua */
  --massa-2: #F8E6CF;
  --papel: #FFFDF8;      /* papel de cupom */
  --cacau: #2A1610;      /* texto e fundos fortes */
  --cacau-2: #5A3A2C;
  --morango: #E2435A;    /* ação */
  --morango-2: #C22F46;
  --manteiga: #F7C948;   /* destaque */
  --pistache: #7FB38C;
  --tinta: #3B2A24;

  --f-titulo: "Young Serif", "Georgia", serif;
  --f-corpo: "Figtree", "Segoe UI", system-ui, sans-serif;
  --f-cupom: "IBM Plex Mono", "Consolas", monospace;

  --raio: 22px;
  --sombra: 0 24px 60px -24px rgba(42, 22, 16, 0.45);
  --sombra-leve: 0 10px 30px -14px rgba(42, 22, 16, 0.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-corpo);
  color: var(--tinta);
  background:
    radial-gradient(1200px 600px at 110% -10%, rgba(247, 201, 72, 0.28), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(226, 67, 90, 0.10), transparent 60%),
    var(--massa);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* granulado bem leve, de papel */
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .09 0 0 0 0 .06 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, .topo, .rodape { position: relative; z-index: 1; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 400; color: var(--cacau); line-height: 1.08; letter-spacing: -0.01em; }
strong { color: var(--cacau); font-weight: 700; }

section { padding: clamp(4rem, 9vw, 7.5rem) clamp(1.25rem, 5vw, 4rem); max-width: 1180px; margin: 0 auto; }

/* ---------------------------------------------------------------- botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--morango); color: #fff; text-decoration: none; border: 0;
  font: 700 1.02rem/1 var(--f-corpo); letter-spacing: .01em;
  padding: 1.05rem 1.6rem; border-radius: 999px; cursor: pointer;
  box-shadow: 0 10px 0 -2px var(--morango-2), 0 18px 30px -12px rgba(226, 67, 90, .6);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(4px); box-shadow: 0 4px 0 -2px var(--morango-2), 0 8px 18px -10px rgba(226, 67, 90, .6); }
.btn--pequeno { padding: .7rem 1.1rem; font-size: .9rem; box-shadow: 0 6px 0 -2px var(--morango-2); }
.btn--grande { width: 100%; padding: 1.25rem; font-size: 1.1rem; }
.btn:disabled { opacity: .6; cursor: default; transform: none; }
.link-seta { font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--manteiga); padding-bottom: 2px; }

.rotulo {
  font: 600 .78rem/1 var(--f-cupom); letter-spacing: .18em; text-transform: uppercase;
  color: var(--morango-2); margin-bottom: 1rem;
}
.rotulo--claro { color: var(--manteiga); }

/* ------------------------------------------------------------------ topo */
.topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem clamp(1.25rem, 5vw, 4rem); max-width: 1180px; margin: 0 auto;
}
.marca { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; font: 800 1.3rem/1 var(--f-corpo); color: var(--cacau); letter-spacing: -.02em; }
.marca b { color: var(--morango); font-weight: 800; }
.marca__fatia { width: 34px; height: 34px; }

/* ------------------------------------------------------------------ hero */
.hero {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center; padding-top: clamp(2rem, 5vw, 4rem);
}
.selo {
  display: inline-block; font: 600 .8rem/1 var(--f-cupom); letter-spacing: .06em;
  background: var(--cacau); color: var(--manteiga); padding: .55rem .85rem; border-radius: 999px;
  margin-bottom: 1.4rem;
}
.hero h1 { font-size: clamp(2.6rem, 6.4vw, 4.9rem); }
.marca-texto {
  background: linear-gradient(transparent 62%, var(--manteiga) 62%, var(--manteiga) 92%, transparent 92%);
  padding: 0 .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hero__sub { font-size: clamp(1.08rem, 1.6vw, 1.25rem); margin: 1.5rem 0 2rem; max-width: 36ch; color: var(--cacau-2); }
.hero__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; }
.hero__garantias { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 2rem; font-size: .92rem; color: var(--cacau-2); }
.hero__garantias li::before { content: "✓ "; color: var(--pistache); font-weight: 800; }

.hero__palco { position: relative; display: flex; justify-content: center; min-height: 560px; }

/* celular: moldura desenhada em CSS em volta do print real */
.celular {
  position: relative; width: min(300px, 78vw); aspect-ratio: 390 / 844;
  border-radius: 44px; padding: 11px; background: #1b0f0b;
  box-shadow: var(--sombra), inset 0 0 0 2px rgba(255, 255, 255, .06);
  flex-shrink: 0;
}
/* sem "ilha" de câmera: ela tampava as abas no topo do print real */
.celular img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 34px; }
.celular--hero { transform: rotate(-4deg); animation: flutua 7s ease-in-out infinite; }
@keyframes flutua { 50% { transform: rotate(-4deg) translateY(-10px); } }

/* ---------------------------------------------------------- papel cupom */
.cupom-papel {
  --serra: 10px;
  position: relative; background: var(--papel); color: var(--cacau);
  font-family: var(--f-cupom); font-size: .82rem; padding: 1.3rem 1.2rem 1.5rem;
  box-shadow: var(--sombra-leve);
  /* borda serrilhada em cima e embaixo, como papel de bobina */
  -webkit-mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--serra) * 2) var(--serra) repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(var(--serra) * 2) var(--serra) repeat-x,
    linear-gradient(#000 0 0) center / 100% calc(100% - var(--serra) * 2) no-repeat;
          mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--serra) * 2) var(--serra) repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(var(--serra) * 2) var(--serra) repeat-x,
    linear-gradient(#000 0 0) center / 100% calc(100% - var(--serra) * 2) no-repeat;
}
.cupom-papel__cab { text-align: center; font-weight: 600; letter-spacing: .12em; margin-bottom: .6rem; }
.cupom-papel__sub { text-align: center; font-size: .75rem; color: var(--cacau-2); margin-top: -.3rem; }
.cupom-papel__linha { display: flex; justify-content: space-between; gap: 1rem; padding: .18rem 0; }
.cupom-papel__linha--forte { font-weight: 600; font-size: .95rem; }
.cupom-papel__linha--troco { color: #2f7d55; font-weight: 600; }
.cupom-papel__linha--gigante { font-size: 1.7rem; font-weight: 600; }
.cupom-papel__tracos { border-top: 2px dashed rgba(42, 22, 16, .35); margin: .55rem 0; }

.cupom-papel--hero {
  position: absolute; width: 215px; right: max(0px, calc(50% - 250px)); bottom: 20px;
  transform: rotate(6deg); animation: imprime 1.1s cubic-bezier(.2, .9, .3, 1.2) .5s both;
}
@keyframes imprime { from { clip-path: inset(0 0 100% 0); transform: rotate(6deg) translateY(-30px); } to { clip-path: inset(0 0 0 0); transform: rotate(6deg); } }

/* ------------------------------------------------------------------- dor */
.dor { max-width: 860px; }
.dor h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom: 2rem; }
.dor__lista { list-style: none; display: grid; gap: .2rem; }
.dor__lista li {
  display: flex; gap: 1.2rem; align-items: baseline; font-size: clamp(1.1rem, 2vw, 1.35rem);
  padding: 1rem 0; border-bottom: 2px dashed rgba(42, 22, 16, .18); color: var(--cacau);
}
.dor__lista span { font: 600 .85rem/1 var(--f-cupom); color: var(--morango); }
.dor__lista em { font-style: normal; background: var(--manteiga); padding: 0 .25em; }
.dor__virada { margin-top: 2.2rem; font-size: 1.15rem; max-width: 50ch; }

/* -------------------------------------------------------------- recursos */
.recursos > h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); max-width: 18ch; margin-bottom: clamp(3rem, 7vw, 5rem); }
.recurso {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center;
  margin-bottom: clamp(4rem, 9vw, 7rem);
}
.recurso--inverso { grid-template-columns: 1fr auto; }
.recurso--inverso .celular { order: 2; }
.recurso .celular { width: min(280px, 70vw); transform: rotate(-2deg); }
.recurso--inverso .celular { transform: rotate(2deg); }
.recurso__texto { max-width: 44ch; }
.recurso__num {
  display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--cacau); color: var(--manteiga); font: 600 1rem/1 var(--f-cupom); margin-bottom: 1rem;
}
.recurso h3 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: 1rem; }
.recurso p { font-size: 1.08rem; color: var(--cacau-2); }
.recurso__extra {
  margin-top: 1.1rem; font: 500 .9rem/1.45 var(--f-cupom) !important; color: var(--cacau) !important;
  background: var(--papel); border-left: 4px solid var(--manteiga); padding: .8rem 1rem; border-radius: 0 12px 12px 0;
}

/* ----------------------------------------------------------------- prova */
.prova {
  display: grid; grid-template-columns: 330px 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center;
  background: var(--cacau); color: #f3e3d3; border-radius: 36px; max-width: 1100px;
  margin: 0 clamp(1rem, 4vw, auto); padding: clamp(2.5rem, 6vw, 4.5rem);
}
@media (min-width: 1180px) { .prova { margin: 0 auto; } }
.prova h2 { color: #fff; font-size: clamp(2rem, 4vw, 2.9rem); margin-bottom: 1.2rem; }
.prova__texto p { font-size: 1.08rem; margin-bottom: 1rem; color: #e9d5c3; }
.cupom-papel--prova { transform: rotate(-3deg); font-size: .9rem; }
/* o papel é claro mesmo dentro de seção escura: texto sempre cacau */
.cupom-papel p { color: var(--cacau); }
.cupom-papel .cupom-papel__sub { color: var(--cacau-2); }
.cupom-papel .cupom-papel__linha--troco { color: #2f7d55; }

/* ---------------------------------------------------------------- passos */
.passos h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom: 2.5rem; max-width: 20ch; }
.passos__lista { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.passos__lista li { background: var(--papel); border-radius: var(--raio); padding: 1.8rem 1.5rem; box-shadow: var(--sombra-leve); }
.passos__lista b { font: 600 2.4rem/1 var(--f-titulo); color: var(--morango); }
.passos__lista h3 { font-size: 1.5rem; margin: .8rem 0 .4rem; }

/* ------------------------------------------------------------------ fila */
.fila {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start;
  background:
    radial-gradient(600px 300px at 0% 0%, rgba(247, 201, 72, .18), transparent 70%),
    var(--cacau);
  color: #f3e3d3; border-radius: 36px; max-width: 1100px;
  margin: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, auto); padding: clamp(2.5rem, 6vw, 4.5rem);
}
@media (min-width: 1180px) { .fila { margin-left: auto; margin-right: auto; } }
.fila h2 { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.2rem); margin-bottom: 1.2rem; }
.fila__oferta p { font-size: 1.1rem; color: #e9d5c3; }
.fila__oferta strong { color: var(--manteiga); }
.fila__beneficios { list-style: none; margin-top: 1.6rem; display: grid; gap: .7rem; }
.fila__beneficios li { font-weight: 600; color: #fff; }
.fila__beneficios li::before { content: "★ "; color: var(--manteiga); }

.fila__form { background: var(--papel); color: var(--tinta); border-radius: 26px; padding: 1.8rem; display: grid; gap: 1.1rem; box-shadow: var(--sombra); }
.fila__form label { display: grid; gap: .35rem; font-weight: 600; font-size: .92rem; color: var(--cacau); }
.fila__form input:not([type="radio"]) {
  font: 500 1.05rem var(--f-corpo); padding: .9rem 1rem; border-radius: 14px;
  border: 2px solid rgba(42, 22, 16, .14); background: #fff; color: var(--cacau); width: 100%;
}
.fila__form input:focus { outline: none; border-color: var(--morango); }
.fila__form fieldset { border: 0; display: grid; gap: .45rem; }
.fila__form legend { font-weight: 600; font-size: .92rem; color: var(--cacau); margin-bottom: .4rem; }
.opcoes { display: flex; flex-wrap: wrap; gap: .45rem; }
.opcoes label { display: block; cursor: pointer; }
.opcoes input { position: absolute; opacity: 0; pointer-events: none; }
.opcoes span {
  display: block; padding: .6rem .9rem; border-radius: 999px; border: 2px solid rgba(42, 22, 16, .14);
  font-weight: 600; font-size: .9rem; background: #fff; transition: all .15s ease;
}
.opcoes input:checked + span { background: var(--cacau); color: var(--manteiga); border-color: var(--cacau); }
.opcoes input:focus-visible + span { outline: 3px solid var(--manteiga); }
.fila__msg { min-height: 1.3em; font-weight: 600; text-align: center; }
.fila__msg[data-tom="ok"] { color: #2f7d55; }
.fila__msg[data-tom="erro"] { color: var(--morango-2); }
.fila__msg a { color: var(--morango-2); }
.fila__letras { font-size: .8rem; text-align: center; color: var(--cacau-2); }
.isca { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* ------------------------------------------------------------------- faq */
.faq { max-width: 820px; }
.faq h2 { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 2rem; }
.faq details { border-bottom: 2px dashed rgba(42, 22, 16, .18); padding: 1.2rem 0; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 1.12rem; color: var(--cacau); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 600 1.4rem/1 var(--f-cupom); color: var(--morango); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: .8rem; color: var(--cacau-2); font-size: 1.05rem; }

/* ---------------------------------------------------------------- rodapé */
.rodape { text-align: center; padding: 3rem 1.25rem 4rem; color: var(--cacau-2); font-size: .92rem; }
.marca--rodape { justify-content: center; margin-bottom: .5rem; }

/* --------------------------------------------------- aparecer ao rolar */
.aparece { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.aparece.visivel { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- celular */
@media (max-width: 860px) {
  .hero, .recurso, .recurso--inverso, .prova, .fila { grid-template-columns: 1fr; }
  .hero__palco { min-height: 0; padding: 1rem 0 3rem; }
  .recurso .celular, .recurso--inverso .celular { order: 0; margin: 0 auto; }
  .recurso__texto { max-width: none; }
  .cupom-papel--hero { width: 185px; right: 2%; bottom: 0; font-size: .72rem; }
  .selo { font-size: .72rem; letter-spacing: .02em; }
  .prova { margin: 0 1rem; }
  .cupom-papel--prova { max-width: 320px; margin: 0 auto; }
  .passos__lista { grid-template-columns: 1fr; }
  .fila { margin: 2rem 1rem; padding: 2rem 1.3rem; }
  .fila__form { padding: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .aparece { opacity: 1; transform: none; }
}