/* Portal do projeto de Reitchel Komch: uma janela para cada entrega, na identidade da artista. */
@font-face { font-family: "Anton"; font-weight: 400; font-display: swap; src: url("fontes/anton-400.woff2") format("woff2"); }
@font-face { font-family: "Ubuntu"; font-weight: 400; font-display: swap; src: url("fontes/ubuntu-400.woff2") format("woff2"); }
@font-face { font-family: "Ubuntu"; font-weight: 700; font-display: swap; src: url("fontes/ubuntu-700.woff2") format("woff2"); }
:root { --marrom:#4B261D; --terracota:#C2593B; --ocre:#E0A03F; --verde:#213127; --noite:#1D120E; --creme:#F5E9DD; --pad: clamp(20px, 5vw, 72px); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--creme); color: var(--noite); font-family: "Ubuntu", system-ui, sans-serif; font-size: 18px; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
h1, h2 { font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; margin: 0; line-height: 1; text-wrap: balance; }
em { font-style: normal; }
:focus-visible { outline: 3px solid var(--ocre); outline-offset: 3px; }

.topo { background: var(--noite); color: var(--creme); padding: 30px var(--pad) 56px; }
.marca { display: flex; align-items: center; gap: 12px; font-family: "Anton", sans-serif; font-size: 22px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 52px; }
.marca img { width: 60px; height: 60px; border-radius: 50%; background: var(--creme); padding: 6px; object-fit: contain; }
.topo h1 { font-size: clamp(64px, 11vw, 150px); }
.topo h1 em { color: var(--ocre); }
.topo p { max-width: 640px; margin: 22px 0 0; font-size: 21px; color: #F0DDCB; }

.bloco { padding: 64px var(--pad) 0; }
.bloco h2 { font-size: clamp(36px, 4.6vw, 62px); color: var(--terracota); margin-bottom: 28px; }
.bloco h2 em { color: var(--marrom); }
.janelas { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; }
.janelas.duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.janela { display: flex; flex-direction: column; min-width: 0; background: #FFF8F1; border: 1px solid #DCC8B5; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 14px rgba(29,18,14,.08); transition: transform .18s, box-shadow .18s; }
.janela:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(29,18,14,.18); }
.janela.grande { grid-row: span 2; }
.moldura { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--marrom); color: var(--creme); }
.moldura i { width: 10px; height: 10px; border-radius: 50%; background: var(--ocre); }
.moldura i:nth-child(2) { background: var(--terracota); }
.moldura i:nth-child(3) { background: var(--creme); }
.moldura small { margin-left: 8px; font-size: 14px; }
.janela > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.janela.grande > img { flex: 1; min-height: 0; object-position: left top; }
.capa { display: grid; place-items: center; height: 170px; color: var(--creme); }
.capa.terracota { background: var(--terracota); }
.capa.verde { background: var(--verde); }
.txt { display: grid; gap: 6px; padding: 20px 22px 22px; }
.txt b { font-family: "Anton", sans-serif; font-weight: 400; font-size: 30px; line-height: 1.05; text-transform: uppercase; color: var(--noite); }
.txt > span { color: #4e3a31; }
.txt .abrir { justify-self: start; margin-top: 10px; padding: 13px 20px; background: var(--terracota); color: var(--creme); font-weight: 700; font-size: 17px; border-radius: 4px; }

.fale { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: 72px; padding: 56px var(--pad); background: var(--verde); color: var(--creme); }
.fale h2 { font-size: clamp(38px, 5vw, 68px); color: var(--ocre); }
.fale h2 em { color: var(--creme); }
.fale p { margin: 10px 0 0; font-size: 20px; color: #D9CDBF; }
.zap-grande { display: inline-flex; align-items: center; gap: 12px; padding: 18px 28px; background: #1FA855; color: #fff; font-weight: 700; font-size: 20px; border-radius: 6px; }
footer { padding: 24px var(--pad) 28px; background: var(--noite); color: #CDB8A6; font-size: 15px; }
.zap { position: fixed; z-index: 20; right: 20px; bottom: 20px; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #1FA855; color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.35); }

@media (max-width: 760px) {
  .marca { margin-bottom: 36px; }
  .topo p { font-size: 19px; }
  .janelas, .janelas.duas { grid-template-columns: minmax(0, 1fr); }
  .janela.grande { grid-row: auto; }
  .janela.grande > img { flex: none; }
  .txt .abrir { justify-self: stretch; text-align: center; }
  .zap-grande { width: 100%; justify-content: center; }
  footer { padding-right: 96px; }
}
@media (prefers-reduced-motion: reduce) { .janela { transition: none; } }