/* Componentes das páginas (partilhados entre várias) */

/* ---------- abertura com vídeo que encolhe ---------- */
.hv { position: relative; height: 220vh; }
.hv-pin { position: sticky; top: 0; height: 100svh; overflow: clip; display: grid; place-items: center; }
.hv-media { position: absolute; inset: 0; overflow: hidden; will-change: clip-path; }
.hv-media video, .hv-media img { width: 100%; height: 100%; object-fit: cover; }
.hv-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgb(90 114 106 / .92), rgb(90 114 106 / .25) 55%, rgb(90 114 106 / .35)); }
.hv-copy { position: absolute; left: var(--g); right: var(--g); bottom: clamp(40px, 8vh, 90px); color: var(--creme); display: grid; gap: 24px; z-index: 2; }
.hv-copy .t-mega { max-width: 9em; }
.hv-row { display: flex; justify-content: space-between; align-items: end; gap: 28px; flex-wrap: wrap; }
.hv-row .lead { max-width: 26em; }
.hv-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hv-side { position: absolute; right: var(--g); top: 50%; z-index: 2; color: var(--creme); writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); }
.hv-after { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; pointer-events: none; }
.hv-after p { color: var(--verde); opacity: 0; text-align: center; }
@media (max-width: 800px) { .hv { height: 180vh; } .hv-side { display: none; } .hv-actions .btn { flex: 1 1 100%; } }

/* ---------- manifesto ---------- */
.manifesto p:not(.eyebrow) { font-weight: 300; font-size: clamp(30px, 4.3vw, 70px); line-height: 1.14; letter-spacing: -.012em; max-width: 19em; }
.manifesto .w { opacity: .16; }

/* ---------- casa (sobre, com parallax) ---------- */
.house { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: start; }
.house-copy { grid-column: 1 / 6; position: sticky; top: 130px; display: grid; gap: 26px; }
.house-pics { grid-column: 7 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.house-pics figure { border-radius: var(--r2); overflow: hidden; aspect-ratio: 3 / 4; }
.house-pics figure:nth-child(2) { margin-top: 110px; }
.house-pics figure:nth-child(3) { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.house-pics img { width: 100%; height: 118%; object-fit: cover; }
.house-list { list-style: none; } .house-list li { padding: 15px 0 11px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 40px 1fr; }
@media (max-width: 960px) { .house { grid-template-columns: 1fr; } .house-copy, .house-pics { grid-column: 1 / -1; position: static; } .house-pics figure:nth-child(2) { margin-top: 50px; } }

/* ---------- palco: máquina que desce e dá zoom ---------- */
.stagez { position: relative; height: 320vh; }
.stagez-pin { position: sticky; top: 0; height: 100svh; overflow: clip; }
.stagez-light { position: absolute; inset: 0; background: radial-gradient(38vmax 34vmax at var(--mx, 50%) var(--my, 40%), rgb(246 244 227 / .2), transparent 72%); pointer-events: none; }
.stagez-name { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); font-weight: 300; font-size: clamp(120px, 26vw, 420px); line-height: .8; letter-spacing: -.04em; color: var(--creme); opacity: .1; white-space: nowrap; pointer-events: none; }
.stagez-rig { position: absolute; left: 50%; top: 11svh; height: 78svh; aspect-ratio: 475 / 1027; translate: -50% 0; transform-origin: 50% 12%; z-index: 2; }
.stagez-rig img { width: 100%; height: 100%; filter: drop-shadow(0 40px 40px rgb(20 32 27 / .45)); }
.stagez-copy { position: absolute; left: var(--g); bottom: clamp(30px, 6vh, 64px); z-index: 3; max-width: 26em; display: grid; gap: 14px; }
.stagez-cta { position: absolute; right: var(--g); bottom: clamp(30px, 6vh, 64px); z-index: 3; }
.hs { position: absolute; display: flex; align-items: center; gap: 8px; margin: -8px 0 0 -8px; transform-origin: 8px 50%; opacity: 0; white-space: nowrap; }
.hs i { width: 16px; height: 16px; border-radius: 50%; background: var(--creme); animation: hsp 2s infinite; flex: none; }
.hs b { background: var(--creme); color: var(--verde); font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; padding: 7px 10px 5px; border-radius: 999px; }
@keyframes hsp { 0% { box-shadow: 0 0 0 0 rgb(246 244 227 / .7); } 100% { box-shadow: 0 0 0 16px rgb(246 244 227 / 0); } }
@media (max-width: 800px) { .stagez-rig { top: 16svh; height: 62svh; } .stagez-cta { left: var(--g); right: auto; bottom: 20px; } .stagez-copy { bottom: 90px; } .stagez-copy .lead { display: none; } }

/* ---------- carris de cartões (tecnologias) ---------- */
.rail-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 44px; flex-wrap: wrap; }
.rail { overflow: clip; }
.rail-track { display: flex; gap: 18px; width: max-content; padding: 0 var(--g); }
.tcard { position: relative; flex: 0 0 auto; width: clamp(270px, 28vw, 420px); aspect-ratio: 3 / 4; border-radius: var(--r2); overflow: hidden; background: var(--verde); color: var(--creme); display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; isolation: isolate; }
.tcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.tcard::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgb(90 114 106 / .95), rgb(90 114 106 / 0) 55%); z-index: -1; }
.tcard:hover img { transform: scale(1.06); }
.tcard .ph { position: absolute; inset: 0; z-index: -2; --soft: var(--c14); --fg: var(--creme); }
.tcard h3 { font-weight: 300; font-size: clamp(26px, 2.3vw, 36px); line-height: 1; }
.tcard .meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tcard small { font-weight: 600; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; }
.tcard .go { position: absolute; right: 18px; top: 18px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--c50); transition: background .4s, color .4s, transform .6s var(--ease); }
.tcard:hover .go { background: var(--creme); color: var(--verde); transform: rotate(-45deg); }
@media (max-width: 960px) { .rail { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .rail::-webkit-scrollbar { display: none; } .tcard { width: 76vw; scroll-snap-align: center; } }

/* ---------- cartões empilhados (como funciona) ---------- */
.stack { display: grid; }
.stack-card { position: sticky; top: 110px; min-height: 64svh; margin-bottom: 7vh; border-radius: 22px; padding: clamp(24px, 3vw, 44px); display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; overflow: hidden; transform-origin: 50% 0; }
.stack-card:nth-child(odd) { background: var(--verde); color: var(--creme); }
.stack-card:nth-child(even) { background: var(--creme); color: var(--verde); box-shadow: inset 0 0 0 1px var(--v22), 0 -24px 50px rgb(90 114 106 / .12); }
.stack-card .k { font-weight: 300; font-size: clamp(70px, 9vw, 150px); line-height: .8; }
.stack-card .body { display: grid; align-content: space-between; gap: 20px; }
.stack-card .pic { border-radius: 14px; overflow: hidden; min-height: 260px; }
.stack-card .pic img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 800px) { .stack-card { grid-template-columns: 1fr; top: 80px; } .stack-card .pic { min-height: 200px; max-height: 30svh; } }

/* ---------- produtos ---------- */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 28px 18px; }
.pcard { display: grid; gap: 12px; align-content: start; position: relative; }
.pcard-media { position: relative; }
.pcard-img { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--r2); overflow: hidden; background: var(--soft); }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), opacity .6s; }
.pcard-img img + img { position: absolute; inset: 0; opacity: 0; }
.pcard-media:hover .pcard-img img:first-child { transform: scale(1.04); }
.pcard-media:hover .pcard-img img + img { opacity: 1; }
.pcard-img .ph { position: absolute; inset: 0; }
.pcard-add { position: absolute; left: 12px; right: 12px; bottom: 12px; opacity: 0; transform: translateY(10px); transition: all .5s var(--ease); }
.pcard-media:hover .pcard-add, .pcard-media:focus-within .pcard-add { opacity: 1; transform: none; }
@media (hover: none) { .pcard-add { opacity: 1; transform: none; } }
.pcard h3 { font-weight: 400; font-size: 20px; line-height: 1.2; }
.pcard .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pcard .cat { font-weight: 600; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.pcard .price { font-weight: 600; }
.pcard .add-sm { width: 100%; }

/* ---------- filtros ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters button { padding: 11px 18px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; font-size: 15px; letter-spacing: .08em; transition: background .3s, color .3s; }
.filters button[aria-pressed="true"] { background: var(--fg); color: var(--bg); box-shadow: none; }
.filters a.chip { padding: 11px 18px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; font-size: 15px; letter-spacing: .08em; transition: background .3s, color .3s; } .filters a.chip:hover { background: var(--fg); color: var(--bg); box-shadow: none; }

/* ---------- listas com imagem que segue o rato ---------- */
.hlist { list-style: none; border-top: 1px solid var(--line); }
.hlist a { display: grid; grid-template-columns: 60px 1fr auto; gap: 20px; align-items: baseline; padding: 22px 0 16px; border-bottom: 1px solid var(--line); transition: padding .6s var(--ease), opacity .4s; }
.hlist:hover a { opacity: .38; } .hlist a:hover { opacity: 1; padding-left: 14px; }
.hlist .n { font-weight: 600; font-size: 14px; letter-spacing: .14em; }
.hlist .t { font-weight: 300; font-size: clamp(24px, 3vw, 44px); line-height: 1.05; }
.hlist .m { font-size: 16px; }
@media (max-width: 600px) { .hlist a { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 14px; } .hlist .m { grid-column: 2; font-size: 14px; opacity: .8; } }
.float-img { position: fixed; left: 0; top: 0; width: 240px; height: 300px; margin: -150px 0 0 -120px; border-radius: var(--r2); overflow: hidden; pointer-events: none; opacity: 0; z-index: 60; transform: scale(.8); }
.float-img img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: none) { .float-img { display: none; } }

/* ---------- conteúdo de texto longo (artigos, legais) ---------- */
.prose { max-width: 700px; display: grid; gap: 20px; font-size: 19px; line-height: 1.75; }
.prose h2 { font-weight: 300; font-size: 32px; line-height: 1.15; margin-top: 18px; }
.prose ul { padding-left: 22px; display: grid; gap: 6px; }
.readbar { position: fixed; left: 0; top: 0; height: 3px; width: 100%; background: var(--verde); transform-origin: left; transform: scaleX(0); z-index: 120; }

/* ---------- tabelas simples (conta, carrinho) ---------- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-weight: 600; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; padding: 0 0 12px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 18px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl td:last-child, .tbl th:last-child { text-align: right; }
.tag { display: inline-block; padding: 5px 10px 3px; border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: .06em; box-shadow: inset 0 0 0 1px currentColor; }