/* Florista dos Anjos · style.css (só estiliza; os movimentos vêm dos kits e do main.js) */
:root {
  --bg: #FBF7F4; --fg: #3B1620; --acento: #8E1D2A;
  --sup: #F4E6E6; --po: #EBC9CF; --vinho: #5E2234; --linha: rgba(59,22,32,.14);
  --mudo: color-mix(in oklab, var(--fg) 62%, var(--bg));
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Instrument Sans", system-ui, sans-serif;
  --pad: clamp(64px, 10vw, 140px);
  --raio: 12px;
}
.cena--1 { --foco: .66; } .cena--2 { --foco: .58; } .cena--3 { --foco: .7; }
body { font-family: var(--sans); font-size: 1rem; line-height: 1.6; }
a { color: inherit; }
em { font-style: italic; color: var(--acento); font-weight: 400; }
img { width: 100%; height: auto; }

/* --- nav: placa própria, nunca transparente sobre texto --- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 12px clamp(16px, 3vw, 40px); background: rgba(251,247,244,.94); color: #3B1620;
  border-bottom: 1px solid rgba(59,22,32,.10); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.nav__marca { display: flex; align-items: center; gap: 10px; text-decoration: none; line-height: 1; }
.nav__nome { display: flex; flex-direction: column; }
.selo { display: block; stroke-width: 1.25; flex: 0 0 auto; }
.selo--nav { width: 22px; height: 22px; color: #5E2234; }
.selo--rodape { width: 48px; height: 48px; color: #EBC9CF; margin: 0 auto 28px; }
.nav__florista { font-family: var(--serif); font-size: 28px; font-weight: 500; letter-spacing: -.01em; }
.nav__anjos { font-size: 9.5px; letter-spacing: .38em; font-weight: 600; margin-top: 3px; padding-left: 2px; }
.nav__links { display: flex; gap: 28px; font-size: 14px; }
.nav__links a { text-decoration: none; opacity: .78; transition: opacity var(--dur-micro); }
.nav__links a:hover { opacity: 1; }
.nav__dir { display: flex; align-items: center; gap: 16px; }
.idiomas { display: flex; border: 1px solid rgba(59,22,32,.18); border-radius: 999px; overflow: hidden; font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.idiomas a { padding: 7px 10px; text-decoration: none; opacity: .6; }
.idiomas a.ativo { background: #3B1620; color: #FBF7F4; opacity: 1; }

/* --- botões --- */
.botao { display: inline-flex; align-items: center; gap: 6px; padding: 15px 24px; border-radius: 10px; background: var(--acento); color: #FBF7F4;
  font-weight: 600; font-size: 15px; text-decoration: none; letter-spacing: .01em; box-shadow: 0 6px 18px -8px rgba(94,34,52,.55);
  transition: background var(--dur-micro), transform var(--dur-micro); }
.botao:hover { background: var(--vinho); transform: translateY(-1px); }
.botao--nav { padding: 11px 18px; font-size: 14px; }
.botao--linha { background: transparent; color: var(--fg); border: 1px solid currentColor; box-shadow: none; }
.botao--linha:hover { background: var(--fg); color: var(--bg); }
.botao--sobrio { background: #2E2A27; box-shadow: none; }
.botao--sobrio:hover { background: #4a4440; }

/* --- texto --- */
.sobrancelha { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--mudo); margin: 0 0 16px; }
.titulo { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5.2vw, 84px); line-height: 1.04; letter-spacing: -.03em; margin: 0 0 24px; }
.tt { overflow: hidden; padding-bottom: .08em; }
.tt > .tt-in { display: block; }
.titulo--sobrio em { color: inherit; }

/* --- cenas (palcos com pôster e canvas) --- */
.palco { background-size: cover; background-position: center; background-color: #E9E1DA; }
.palco__canvas { position: absolute; inset: 0; opacity: 0; transition: opacity .3s linear; }
.palco__canvas.on { opacity: 1; }
.veu { position: absolute; inset: 0; pointer-events: none; }
.veu--esq { background: linear-gradient(90deg, rgba(251,247,244,.9) 0%, rgba(251,247,244,.72) 30%, rgba(251,247,244,.25) 52%, rgba(251,247,244,0) 64%); }

.hero__texto { position: absolute; left: clamp(20px, 6vw, 96px); top: 50%; transform: translateY(-46%); width: min(560px, 44vw); z-index: 3; }
.hero__titulo { font-family: var(--serif); font-weight: 400; font-size: clamp(52px, 6.6vw, 112px); line-height: 1.0; letter-spacing: -.035em; margin: 0 0 24px; }
.hero__titulo .am-acento { font-style: italic; color: var(--acento); }
.hero__linha { font-size: clamp(17px, 1.3vw, 20px); max-width: 40ch; margin: 0 0 32px; }
.hero__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.hero__tel { font-size: 15px; text-decoration: none; border-bottom: 1px solid var(--linha); padding-bottom: 2px; }

/* --- bloco 2: manifesto + a escolha (sobe por cima da cena 1: P12) --- */
.escolha { position: relative; z-index: 3; margin-top: -100vh; }
.manifesto { background: var(--bg); border-radius: 28px 28px 0 0; box-shadow: 0 -24px 60px -30px rgba(59,22,32,.35); position: relative; z-index: 1; padding: calc(var(--pad) + 16px) clamp(20px, 6vw, 96px) var(--pad); }
.manifesto__texto { font-family: var(--serif); font-size: clamp(30px, 3.4vw, 54px); line-height: 1.18; letter-spacing: -.02em; max-width: 26ch; margin: 0 auto; }
.escolha__trilho { position: relative; height: 300vh; }
.escolha__palco { position: sticky; top: 0; height: 100dvh; overflow: clip; background: var(--bg); }
.escolha__trilho { margin-top: -1px; }
.escolha__texto { position: absolute; left: clamp(20px, 6vw, 96px); top: 50%; transform: translateY(-48%); width: min(440px, 34vw); z-index: 4; }
.escolha__lista { list-style: none; margin: 8px 0 28px; padding: 0; counter-reset: f; }
.escolha__lista li { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--linha); opacity: .28; transition: opacity .5s var(--ease-out); }
.escolha__lista li.on { opacity: 1; }
.escolha__lista b { font-family: var(--serif); font-weight: 500; font-size: 26px; min-width: 4.4em; }
.escolha__lista span { color: var(--mudo); font-size: 15px; }
.escolha__fecho { font-size: 16px; opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.escolha__fecho.on { opacity: 1; transform: none; }

.ramo { position: absolute; inset: 0; z-index: 2; }
.peca { width: 22vmin; left: calc(66% - 11vmin); top: calc(52% - 16.5vmin); filter: drop-shadow(14px 22px 18px rgba(59,22,32,.22)); }
.peca--rosa { width: 24vmin; left: calc(66% - 12vmin); z-index: 5; }
.peca--cravo { z-index: 4; }
.peca--goivo { z-index: 3; width: 26vmin; left: calc(66% - 13vmin); top: calc(52% - 22vmin); }
.peca--gipsofila { z-index: 2; width: 28vmin; left: calc(66% - 14vmin); top: calc(52% - 24vmin); }
.peca--eucalipto { z-index: 1; width: 26vmin; left: calc(66% - 13vmin); top: calc(52% - 22vmin); }

.janela { position: absolute; z-index: 3; width: 150vmax; height: 150vmax; left: calc(66vw - 75vmax); top: calc(50dvh - 75vmax);
  border-radius: 50%; overflow: hidden; opacity: 0; transform: scale(.2); will-change: transform; box-shadow: 0 30px 80px -20px rgba(59,22,32,.35); }
.janela__img { position: absolute; width: 100vw; height: 100dvh; left: calc(75vmax - 66vw); top: calc(75vmax - 50dvh);
  background-size: cover; background-position: center; transform-origin: 66vw 50dvh; will-change: transform; }

/* --- bloco 3: cena 2 (pinada por baixo da escolha: a janela P14 abre-se para ela) --- */
.cena--2 { position: relative; z-index: 1; margin-top: -100vh; height: 400vh; }
.cena2__marcador { position: absolute; left: 0; width: 1px; top: 100vh; height: 300vh; pointer-events: none; }
.laco__texto { position: absolute; left: clamp(20px, 6vw, 96px); top: 14vh; width: min(520px, 40vw); z-index: 3; }
.laco__leg { font-size: 16px; margin: 0; }
.dados .am-dado { font-family: var(--sans); font-size: 13px; letter-spacing: .02em; font-weight: 500; background: rgba(251,247,244,.95); border-color: rgba(59,22,32,.18); color: #3B1620; box-shadow: 6px 8px 18px -10px rgba(59,22,32,.4); }
.dados path { stroke: var(--vinho); stroke-width: 1.2; }
.dados .am-dado { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.amostra { width: 12px; height: 12px; border-radius: 50%; background: var(--papel); flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(59,22,32,.12); }
.amostra--branco { box-shadow: inset 0 0 0 1px rgba(59,22,32,.35); }

/* --- bloco 4: as ocasiões (C8) --- */
.ocasioes { background: var(--bg); position: relative; z-index: 2; }
.ocasioes__palco { flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 4vh; padding-top: 88px; padding-bottom: 40px; }
.ocasioes__cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 6vw; padding: 0 6vw; }
.ocasioes__cab .titulo { margin: 0; font-size: clamp(38px, 4.4vw, 72px); }
.ocasioes__intro { max-width: 34ch; margin: 0; color: var(--mudo); }
.cartao { width: clamp(260px, 24vw, 380px); }
.cartao__foto { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--raio); box-shadow: 12px 18px 30px -18px rgba(59,22,32,.45); background: var(--sup); }
.cartao__foto img { height: 100%; object-fit: cover; }
.cartao h3 { font-family: var(--serif); font-weight: 500; font-size: 30px; letter-spacing: -.01em; margin: 18px 0 4px; }
.cartao p { margin: 0 0 10px; font-size: 15px; color: var(--mudo); max-width: 34ch; }
.cartao a { font-size: 14px; font-weight: 600; color: var(--acento); text-decoration: none; border-bottom: 1px solid currentColor; }

/* --- bloco 5a: encomendar --- */
.encomendar { padding: 64px clamp(20px, 6vw, 96px) 112px; background: var(--bg); position: relative; z-index: 2; }
.encomendar__grelha { display: grid; grid-template-columns: 1.05fr 1fr; gap: 6vw; align-items: center; }
.passos { list-style: none; padding: 0; margin: 0 0 32px; }
.passos li { font-family: var(--serif); font-size: clamp(22px, 2vw, 30px); line-height: 1.25; padding: 14px 0; border-top: 1px solid var(--linha); }
.encomendar__acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 48px; }
.servicos__lista { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.servicos__lista li { padding: 8px 14px; border-radius: 999px; background: var(--sup); font-size: 14px; }
.encomendar__fotos { position: relative; height: min(70vw, 680px); }
.foto { position: absolute; margin: 0; overflow: hidden; border-radius: var(--raio); box-shadow: 16px 24px 40px -22px rgba(59,22,32,.5); }
.foto img { height: 100%; object-fit: cover; }
.foto--a { width: 64%; height: 78%; left: 0; top: 0; }
.foto--b { width: 52%; height: 58%; right: 0; bottom: 0; border: 8px solid var(--bg); }

/* --- bloco 5b: homenagem (P06 muda --bg/--fg; C7 split) --- */
/* em baixo: os 22vh que o arco da cena 3 (P08) cobre + 64 px; o arco começa logo abaixo do fim do split */
.homenagem { background: var(--bg); color: var(--fg); padding: 0 clamp(20px, 6vw, 96px) calc(64px + 22vh); position: relative; z-index: 2; }
.homenagem__split { align-items: start; }
.homenagem__foto { margin: 0; border-radius: var(--raio); overflow: hidden; box-shadow: 10px 16px 30px -18px rgba(46,42,39,.45); }
.homenagem__texto { padding-top: 22vh; }
.homenagem__texto p { max-width: 44ch; font-size: 18px; margin: 0 0 32px; }
/* a sobrancelha é um <p> dentro de .homenagem__texto: devolve-lhe o tamanho, o peso e o tracking das outras */
.homenagem__texto p.sobrancelha { font-size: 12px; font-weight: 600; letter-spacing: .22em; margin: 0 0 16px; max-width: none; }
.homenagem .sobrancelha { color: color-mix(in oklab, var(--fg) 62%, var(--bg)); }

/* --- bloco 6: a porta (P08 arco) --- */
.cena--3 { position: relative; z-index: 3; margin-top: -22vh; border-radius: 50% 50% 0 0 / 22vh 22vh 0 0; overflow: clip; }
.placa { position: absolute; left: clamp(16px, 5vw, 80px); bottom: 10vh; width: min(500px, 40vw); z-index: 3; background: #FBF7F4; color: #3B1620;
  padding: clamp(24px, 3vw, 44px); border-radius: 18px; box-shadow: 18px 26px 50px -24px rgba(59,22,32,.55); border-top: 1px solid rgba(255,255,255,.8); }
.placa .titulo { font-size: clamp(34px, 3.4vw, 56px); margin-bottom: 12px; }
.placa__cidade { margin: 0 0 20px; color: color-mix(in oklab, #3B1620 62%, #FBF7F4); }
.placa__tel { display: block; font-family: var(--serif); font-size: clamp(30px, 2.8vw, 44px); letter-spacing: -.01em; text-decoration: none; color: #8E1D2A; margin-bottom: 14px; }
.placa__links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 15px; }

/* --- rodapé (P12 sobe por cima da cena 3) --- */
.rodape { position: relative; z-index: 4; margin-top: -100vh; height: 100dvh; box-sizing: border-box; background: #5E2234; color: #F6E9EA; border-radius: 28px 28px 0 0;
  padding: 112px clamp(20px, 6vw, 96px) 36px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 -24px 60px -30px rgba(59,22,32,.6); }
.rodape em { color: #EBC9CF; }
.rodape__assinatura { display: flex; flex-direction: column; align-items: center; text-align: center; margin: auto 0; position: relative; top: -48px; }
.rodape__marca { font-family: var(--serif); font-size: clamp(56px, min(14vw, 24dvh), 220px); line-height: .9; letter-spacing: -.045em; margin: 0; }
.rodape__grelha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; font-size: 16px; border-top: 1px solid rgba(246,233,234,.2); padding-top: 48px; }
.rodape__grelha p { margin: 0; }
.rodape a { text-decoration: none; border-bottom: 1px solid rgba(246,233,234,.35); }
.rodape__nota { font-size: 13px; opacity: .7; margin: 32px 0 0; }

/* --- celular --- */
@media (max-width: 820px) {
  .nav { padding: 10px 14px; gap: 10px; }
  .nav__links { display: none; }
  .nav__florista { font-size: 23px; }
  .nav__anjos { font-size: 8px; }
  .botao__num { display: none; }
  .botao--nav { padding: 10px 14px; }
  .idiomas a { padding: 6px 7px; }
  .am-trilho { height: 200vh; }
  /* no retrato o quadro 16:9 é mostrado inteiro em altura e deslocado até ao protagonista (--foco) */
  .palco { background-size: auto 100%; background-position: calc(var(--foco) * 100%) center; }
  .palco__canvas { --w: calc(100dvh * 16 / 9); width: var(--w); max-width: none; left: calc((100vw - var(--w)) * var(--foco)); right: auto; }
  .janela__img { background-size: auto 100%; background-position: 58% center; }
  .veu--esq { background: linear-gradient(0deg, rgba(251,247,244,.96) 0%, rgba(251,247,244,.86) 42%, rgba(251,247,244,.2) 66%, rgba(251,247,244,0) 78%); }
  /* hero no celular: a rosa enquadrada no terço de cima, nítida; o véu só sobe de baixo, onde está o texto */
  /* a rosa está em x .66 / y .68 do quadro: o quadro da cena 1 cresce para 200dvh e sobe, e a rosa fica a 36% do ecrã */
  .cena--1 { --foco: .82; --h1: 200dvh; --w1: calc(var(--h1) * 16 / 9); }
  .cena--1 .palco { background-size: auto var(--h1); background-position: calc(50vw - .66 * var(--w1)) calc(36dvh - .68 * var(--h1)); }
  .cena--1 .palco__canvas { --w: var(--w1); width: var(--w1); height: var(--h1); bottom: auto; top: calc(36dvh - .68 * var(--h1)); left: calc(50vw - .66 * var(--w1)); }
  .cena--1 .veu--esq { background: linear-gradient(0deg, rgba(251,247,244,.95) 0%, rgba(251,247,244,.9) 34%, rgba(251,247,244,0) 56%); }
  .hero__texto { left: 20px; right: 20px; width: auto; top: auto; bottom: 7dvh; transform: none; }
  .hero__titulo { font-size: clamp(42px, 12vw, 60px); }
  .hero__linha { font-size: 16px; margin-bottom: 22px; }
  .escolha__trilho { height: 260vh; }
  .escolha__texto { left: 20px; right: 20px; width: auto; top: 76px; transform: none; }
  .escolha__lista { margin-bottom: 12px; }
  .escolha__lista li { padding: 6px 0; }
  .escolha__lista b { font-size: 20px; }
  .escolha__lista span { font-size: 13px; }
  .escolha__fecho { font-size: 14px; }
  .peca { width: 26vmin; left: calc(50% - 13vmin); top: calc(78% - 19.5vmin); }
  .peca--rosa { width: 28vmin; left: calc(50% - 14vmin); }
  .peca--goivo, .peca--eucalipto { width: 30vmin; left: calc(50% - 15vmin); top: calc(78% - 26vmin); }
  .peca--gipsofila { width: 32vmin; left: calc(50% - 16vmin); top: calc(78% - 28vmin); }
  .janela { width: 170vmax; height: 170vmax; left: calc(50vw - 85vmax); top: calc(72dvh - 85vmax); }
  .janela__img { left: calc(85vmax - 50vw); top: calc(85vmax - 72dvh); transform-origin: 50vw 72dvh; }
  .cena--2 { height: 300vh; }
  .cena2__marcador { height: 200vh; }
  .laco__texto { left: 20px; right: 20px; width: auto; top: auto; bottom: 6dvh; }
  .dados svg { display: none; }
  .dados .am-dado { font-size: 11px; padding: 7px 10px; }
  .dados .am-dado:nth-of-type(1) { left: 20px !important; top: 82px !important; }
  .dados .am-dado:nth-of-type(2) { left: 20px !important; top: 122px !important; }
  .dados .am-dado:nth-of-type(3) { left: 20px !important; top: 162px !important; }
  .dados .am-dado:nth-of-type(4) { left: 92px !important; top: 162px !important; }
  .dados .am-dado:nth-of-type(5) { left: 164px !important; top: 162px !important; }
  .ocasioes__palco { display: block; padding: 96px 0 64px; }
  .ocasioes__cab { flex-direction: column; align-items: flex-start; gap: 12px; padding: 0 20px 24px; }
  .am-htrilho__faixa { padding: 0 20px; gap: 16px; scroll-padding-left: 20px; }
  .cartao { width: 78vw; }
  .encomendar__grelha { grid-template-columns: 1fr; }
  .encomendar__fotos { height: 120vw; }
  .homenagem__texto { padding-top: 32px; min-height: 0; }
  .encomendar { padding: 64px 20px 64px; }
  .homenagem { padding: 0 20px calc(48px + 16vh); }
  .cena--3 { margin-top: -16vh; border-radius: 50% 50% 0 0 / 12vh 12vh 0 0; }
  .placa { left: 14px; right: 14px; width: auto; bottom: 4dvh; padding: 22px; }
  .rodape__grelha { grid-template-columns: 1fr; gap: 18px; }
  .rodape { padding: 88px 20px 24px; }
  .rodape__assinatura { top: -24px; }
  .rodape__marca { font-size: clamp(48px, 15vw, 72px); }
  .rodape__grelha { font-size: 15px; padding-top: 20px; }
  .selo--rodape { width: 40px; height: 40px; margin-bottom: 14px; }
  .rodape__nota { margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .escolha__lista li, .escolha__fecho { opacity: 1 !important; transform: none !important; }
  .janela { display: none; }
}