/* Site da Linnea. Sempre claro, com a parede de azulejos no fundo (fundo.jpg, uma foto da parede de azulejo.js). Paleta Areia e mar (tokens.css), Jost nos títulos, Instrument Serif itálico no destaque, Albert Sans no texto. */

:root {
  --f-tit: 'Jost', system-ui, sans-serif;
  --f-txt: 'Albert Sans', system-ui, sans-serif;
  --f-enfase: 'Instrument Serif', Georgia, serif;
  --r-2: 4px;
  --r-3: 8px;
  --largura: 1120px;
  --margem: 24px;
  --sai: cubic-bezier(.2, .7, .2, 1);
  --borda: clamp(14px, 3.4vw, 44px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  overflow-x: clip;
  /* A parede de azulejos fica no fundo da página toda; o conteúdo vem em painéis por cima. */
  background: linear-gradient(rgb(255 255 255 / .45) 0 0), url(fundo.jpg) 0 0 / 900px repeat, var(--color-grout);
  color: var(--color-text);
  font: 400 18px/1.55 var(--f-txt);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: var(--color-brand); }
h1, h2, h3 { font-family: var(--f-tit); font-weight: 600; margin: 0; letter-spacing: -0.015em; }
h1 { font-size: clamp(44px, 7vw, 92px); line-height: 1; }
h1 .linha { display: block; }
h2 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.05; }
h3 { font-size: 22px; line-height: 1.2; }
h1 em, h2 em { font: italic 400 1.12em/1 var(--f-enfase); letter-spacing: 0; }
p { margin: 0; }

main > section:not(.abertura), .rodape {
  width: calc(100% - 2 * var(--borda)); margin: var(--borda) auto 0;
  padding-inline: max(var(--margem), (100% - var(--largura)) / 2);
  background: var(--color-bg); border-radius: var(--r-3);
  box-shadow: 0 2px 0 rgb(40 28 14 / .12), 0 18px 40px -24px rgb(19 35 46 / .45);
}
/* Entre um painel e outro, uma faixa maior de azulejos aparece. */
main > section + section:not(.ideia) { margin-top: clamp(56px, 9vw, 120px); }

/* ---------- topo: transparente sobre a foto, branco depois dela ---------- */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px max(var(--margem), (100% - var(--largura)) / 2);
  color: #FFFFFF;
  transition: background-color .3s, color .3s, box-shadow .3s;
}
.topo.solido { background: rgb(255 255 255 / .94); color: var(--color-text); box-shadow: 0 1px 0 var(--color-surface-sunken); backdrop-filter: blur(8px); }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; font: 600 24px var(--f-tit); }
.marca img { border-radius: 8px; }
.topo nav { display: flex; align-items: center; gap: 24px; }
.topo nav a:not(.btn) { color: inherit; text-decoration: none; font: 500 16px var(--f-tit); opacity: .9; }
.topo nav a:not(.btn):hover { opacity: 1; }
.topo .btn { min-height: 42px; padding: 0 18px; font-size: 16px; }
.topo:not(.solido) .btn { background: #FFFFFF; color: var(--color-text); }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px; border-radius: var(--r-2);
  font: 600 18px var(--f-tit); text-decoration: none;
  transition: transform .2s var(--sai);
}
.btn:hover { transform: translateY(-2px); }
.btn.p { background: var(--color-action); color: var(--color-on-action); }
.btn:focus-visible, .topo a:focus-visible { outline: 3px solid var(--color-brand); outline-offset: 3px; }

/* ---------- abertura: a foto inteira com o título por cima ---------- */
.abertura { position: relative; height: 100svh; min-height: 560px; overflow: hidden; color: #FFFFFF; }
.abertura .foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transform-origin: 50% 30%; }
.abertura::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgb(10 21 28 / .62), rgb(10 21 28 / 0) 55%), linear-gradient(to bottom, rgb(10 21 28 / .35), rgb(10 21 28 / 0) 20%); }
.abertura .dentro { position: absolute; z-index: 1; inset: auto 0 0; width: min(100% - 2 * var(--margem), var(--largura)); margin: 0 auto; padding-bottom: clamp(40px, 8vh, 80px); }
.abertura h1 { text-shadow: 0 2px 24px rgb(0 0 0 / .25); }

/* ---------- a ideia e os quatro cartões ---------- */
.ideia { display: grid; gap: 28px; padding-block: 96px; }
.chapeu { font: italic 400 22px var(--f-enfase); color: var(--color-brand); }
.frase { max-width: 28em; font: 500 clamp(26px, 3vw, 40px)/1.25 var(--f-tit); letter-spacing: -0.01em; text-wrap: pretty; }
.frase .p { transition: color .25s; }
.anima .frase .p { color: #C9CFD3; }
.anima .frase .p.lida { color: var(--color-text); }
.cartoes { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cartoes li { display: grid; align-content: start; gap: 8px; padding: 24px 22px 28px; border-radius: var(--r-3); background: var(--tom); }
.cartoes li:nth-child(1) { --tom: #F4ECDD; }
.cartoes li:nth-child(2) { --tom: #E1F0F5; }
.cartoes li:nth-child(3) { --tom: #FBE6DE; }
.cartoes li:nth-child(4) { --tom: #ECEFE2; }
.cartoes .n { font: italic 400 30px/1 var(--f-enfase); color: var(--color-gema); }
.cartoes h3 { margin-top: 10px; font-size: 21px; }
.cartoes p { font-size: 16px; color: var(--color-text-muted); }

/* ---------- a flor ---------- */
.flor { display: grid; grid-template-columns: auto 1fr; gap: 72px; align-items: center; padding-block: 88px; }
.flor .texto p { margin-top: 16px; font-size: 19px; color: var(--color-text-muted); max-width: 32em; }
.flor .mini-par { --t: clamp(120px, 15vw, 180px); }
/* O traço à mão em volta de "pares", desenhado quando aparece. */
.circulo { position: relative; display: inline-block; }
.circulo svg { position: absolute; left: -14%; top: -22%; width: 128%; height: 150%; overflow: visible; pointer-events: none; }
.circulo path { fill: none; stroke: var(--color-gema); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.anima .circulo path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s .5s var(--sai); }
.anima .visto .circulo path { stroke-dashoffset: 0; }

/* ---------- casais: colunas de fotos que passam, uma descendo e a outra subindo ---------- */
.casais { display: grid; grid-template-columns: 1fr 1.3fr; grid-template-rows: minmax(0, 1fr); gap: 48px; align-items: center; height: 680px; overflow: clip; }
.casais .texto { display: grid; gap: 14px; }
.casais h2 { font-size: clamp(40px, 5.6vw, 72px); }
.colunas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; height: 100%; }
.coluna { overflow: hidden; }
.trilho { display: grid; gap: 16px; }
.trilho img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-3); }
/* site.js repete as fotos uma vez; andar metade do trilho fecha a volta sem pulo. */
.anima .coluna .trilho { animation: sobe 36s linear infinite; }
.anima .coluna.desce .trilho { animation-direction: reverse; }
.anima .coluna.lenta .trilho { animation-duration: 60s; }
.coluna.desce:not(.lenta) { margin-top: -40px; }
@keyframes sobe { to { transform: translateY(calc(-50% - 8px)); } }

/* ---------- chamada final ---------- */
.chamada { display: grid; justify-items: center; text-align: center; gap: 16px; padding-block: 104px; }
.chamada p { font-size: 20px; color: var(--color-text-muted); }
.chamada .btn { margin-top: 12px; }

/* ---------- janela da lista de espera ---------- */
.aviso { width: min(100% - 32px, 440px); padding: 40px 32px 32px; border: 0; border-radius: var(--r-3); background: var(--color-bg); color: var(--color-text); box-shadow: 0 30px 80px -30px rgb(19 35 46 / .6); }
.aviso::backdrop { background: rgb(19 35 46 / .45); backdrop-filter: blur(3px); }
.aviso .pedir, .aviso .pronto { display: grid; gap: 12px; }
.aviso .pronto { justify-items: center; text-align: center; }
.aviso [hidden] { display: none; }
.aviso h2 { font-size: 30px; }
.aviso p { color: var(--color-text-muted); }
.aviso label { margin-top: 8px; font: 500 15px var(--f-tit); }
.aviso input { min-height: 52px; padding: 0 14px; border: 1px solid #C9CFD3; border-radius: var(--r-2); font: inherit; color: inherit; background: var(--color-bg); }
.aviso input:focus-visible { outline: 3px solid var(--color-brand); outline-offset: 1px; border-color: transparent; }
.aviso .mel { position: absolute; left: -9999px; width: 1px; height: 1px; }
.aviso .erro { color: #B3402A; font-size: 15px; }
.aviso .btn { width: 100%; border: 0; cursor: pointer; }
.aviso .btn[disabled] { opacity: .6; cursor: progress; }
.aviso .lgpd { font-size: 13px; line-height: 1.45; }
.aviso .fechar { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: var(--r-2); background: none; color: var(--color-text-muted); font-size: 28px; line-height: 1; cursor: pointer; }
.aviso .fechar:hover { background: var(--color-surface-sunken); }
.anima .aviso[open] { animation: abre .35s var(--sai); }
@keyframes abre { from { opacity: 0; transform: translateY(16px) scale(.98); } }

/* ---------- rodapé ---------- */
.rodape { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-bottom: var(--borda); padding-block: 28px; font-size: 15px; color: var(--color-text-muted); }
.rodape a { color: inherit; }
.rodape .en { flex-basis: 100%; }

/* ---------- entrada ao rolar ---------- */
.anima [data-revela] { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--sai), transform .8s var(--sai); transition-delay: var(--atraso, 0s); }
.anima [data-revela].visto { opacity: 1; transform: none; }

/* ---------- celular ---------- */
@media (max-width: 1000px) {
  .cartoes { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .topo nav a:not(.btn) { display: none; }
  .ideia { gap: 24px; padding-block: 64px; }
  .cartoes { grid-template-columns: 1fr; margin-top: 16px; }
  .flor { grid-template-columns: 1fr; gap: 40px; padding-block: 64px; }
  .flor .mini-par { --t: min(40vw, 176px); }
  .casais { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 32px; height: 760px; padding-top: 64px; }
  .colunas { gap: 10px; }
  .coluna.desce:not(.lenta) { margin-top: 0; }
  .trilho { gap: 10px; }
  @keyframes sobe { to { transform: translateY(calc(-50% - 5px)); } }
  .chamada { padding-block: 80px; }
}

/* ---------- a peça de cerâmica (de soulmate/design/prototipo/estilo.css) ---------- */
.az { position: relative; aspect-ratio: 1; --raio: 4px; }
.az > .sb, .az > .sa, .az > .peca { position: absolute; inset: 0; border-radius: var(--raio); }
.az > .sb { box-shadow: 0 0 1.4px .4px rgb(40 28 14 / .5); }
.az > .sa { background: rgb(40 28 14 / .34); filter: blur(7px); opacity: 0; }
.az > .peca { overflow: hidden; }
.az canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.az .c1, .az .fech { opacity: 0; }
.az .luz { position: absolute; inset: -21%; background-repeat: no-repeat; opacity: .42; pointer-events: none; }
.par .az .fech { transition: opacity .9s cubic-bezier(.4,0,.2,1); }
.par.fechado .az .fech { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .par .az .fech { transition: none; } }

.mini-par { display: grid; grid-template-columns: repeat(2, var(--t, 112px)); gap: 4px; padding: 4px; width: max-content; background: var(--grao), var(--color-grout); border-radius: var(--r-3); box-shadow: inset 0 1px 3px rgb(0 0 0 / .25); }
.mini-par .az { width: var(--t, 112px); }