/* Banner inicial: 4 versões com a equipa (escolha com o seletor em baixo) */
.hero.hv { justify-content: stretch !important; overflow: hidden; }
.hv__v { display: none; flex: 1 1 auto; width: 100%; min-height: 0; }
html:not([data-hv]) .hv1, html[data-hv="1"] .hv1, html[data-hv="2"] .hv2, html[data-hv="3"] .hv3, html[data-hv="4"] .hv4 { display: grid; }
html[data-hv="2"] .hero.hv { --bg: var(--ink); --fg: var(--white); }
html[data-hv="3"] .hero.hv { --bg: var(--red); --fg: var(--white); }
html[data-hv="4"] .hero.hv { --bg: var(--lime); --fg: var(--ink); }
.hv img { display: block; max-width: none; }
.hv__eye { margin-bottom: .9rem; opacity: .8; }
html .hero .hv__t { width: auto; margin: 0; color: inherit; font-family: var(--f-display); font-weight: 700; font-size: clamp(3rem, 14.5vw, 6.4rem); line-height: .9; letter-spacing: -.005em; text-transform: uppercase; text-wrap: balance; }
.hv__lead { max-width: 40ch; margin-top: 1rem; font-size: 1rem; line-height: 1.5; }
.hv__ctas { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.hv__btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.1rem; padding: 0 1.3rem; border: 2px solid var(--red); background: var(--red); color: var(--white); font-size: .74rem; font-weight: 800; font-stretch: 125%; letter-spacing: .02em; text-transform: uppercase; transition: background .2s, border-color .2s, color .2s, transform .25s var(--ease); }
.hv__btn svg { width: 1.1rem; transition: transform .3s var(--ease); }
.hv__btn:hover { transform: translateY(-2px); background: var(--ink); border-color: var(--ink); color: var(--white); }
.hv__btn:hover svg { transform: translateX(4px); }
.hv__btn--ghost { background: none; border-color: currentColor; color: inherit; }
.hv__proof { display: flex; align-items: center; gap: .8rem; margin-top: 1.2rem; font-size: .9rem; font-weight: 600; }
.hv__proof .stars { font-size: 1.1rem; }
@keyframes hvUp { from { opacity: 0; transform: translateY(24px); } }
@keyframes hvImg { from { opacity: 0; transform: translateY(6%); } }
.hv__v .hv__t, .hv__v .hv__lead, .hv__v .hv__ctas { animation: hvUp .9s var(--ease) both; }
.hv__v .hv__lead { animation-delay: .1s; } .hv__v .hv__ctas { animation-delay: .18s; }
.hv__v img { animation: hvImg 1.1s var(--ease) .15s both; }

/* V1: papel + traço vermelho */
.hv1 { grid-template-rows: auto 1fr; padding-top: .8rem; }
.hv1 .hv__t span { color: var(--red); }
.hv1__img { position: relative; align-self: end; margin: 1.4rem calc(var(--gr) * -1) 0 calc(var(--gl) * -1); }
.hv1__img::before { content: ""; position: absolute; z-index: 0; left: 28%; right: -12%; top: -28%; bottom: -4%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 700' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='r' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='3' seed='3' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='26' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cfilter id='s' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.04' numOctaves='2' seed='5' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='60' xChannelSelector='R' yChannelSelector='G' result='d'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' seed='9' result='n'/%3E%3CfeColorMatrix in='n' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3 1.9' result='m'/%3E%3CfeComposite in='d' in2='m' operator='in'/%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' stroke='%23e2231a' stroke-linecap='round'%3E%3Cpath filter='url(%23s)' stroke-width='150' opacity='.85' d='M640 40C470 10 330 120 360 250S560 400 520 530 330 690 160 650'/%3E%3Cpath filter='url(%23r)' stroke-width='86' d='M640 40C470 10 330 120 360 250S560 400 520 530 330 690 160 650'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; pointer-events: none; }
.hv1__img img { position: relative; z-index: 1; width: 100%; height: auto; }

/* V2: preto + nome gigante */
.hv2 { position: relative; grid-template-rows: 1fr auto; }
.hv2__big { position: absolute; z-index: 0; left: 0; right: 0; top: .4rem; margin: 0; color: var(--lime); font-family: var(--f-display); font-weight: 700; font-size: 26.5vw; line-height: .82; text-align: center; text-transform: uppercase; }
.hv2__big span { display: block; }
.hv2__img { position: relative; z-index: 1; align-self: end; margin: 30vw calc(var(--gr) * -1) 0 calc(var(--gl) * -1); }
.hv2__img img { width: 100%; height: auto; }
.hv2__bar { position: relative; z-index: 2; display: grid; gap: 1rem; padding-top: 1.3rem; background: var(--ink); }
html .hero .hv2 .hv__t { font-size: clamp(1.7rem, 7.4vw, 3rem); line-height: .98; }
.hv2__names { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 0; padding: .9rem 0 0; list-style: none; border-top: 1px solid rgb(255 255 255 / .2); }
.hv2__names li { font-size: .6rem; opacity: .8; }
.hv2__names b { display: block; margin-bottom: .2rem; font-family: var(--f-display); font-size: 1.25rem; font-weight: 700; line-height: 1; letter-spacing: 0; opacity: 1; }
.hv2 .sticker { --s: 5.8rem; position: absolute; z-index: 3; right: 0; top: -6.6rem; }

/* V3: vermelho + escolhe a tua cadeira */
.hv3 { grid-template-rows: auto 1fr; padding-top: .8rem; }
.hv3__stage { position: relative; align-self: end; margin: 1.2rem calc(var(--gr) * -1) 0 calc(var(--gl) * -1); }
.hv3__stage img { width: 100%; height: auto; }
.hv3__tags { position: absolute; left: 0; right: 0; bottom: .9rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; padding: 0 .6rem; }
.hv3__tags a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 .4rem; padding: .55rem .65rem; background: var(--white); color: var(--ink); box-shadow: 0 10px 24px -12px rgb(0 0 0 / .6); transition: transform .25s var(--ease), background .2s; }
.hv3__tags a:hover { transform: translateY(-3px); background: var(--lime); }
.hv3__tags b { font-family: var(--f-display); font-size: 1.1rem; font-weight: 700; line-height: 1.05; text-transform: uppercase; }
.hv3__tags span { display: none; grid-column: 1; font-size: .6rem; font-weight: 700; text-transform: uppercase; opacity: .65; }
.hv3__tags i { grid-row: 1 / span 2; grid-column: 2; font-style: normal; font-weight: 800; color: var(--red); }

/* V4: amarelo editorial */
.hv4 { grid-template-rows: auto 1fr auto; padding-top: .8rem; }
.hv4 .hv__t span { color: var(--red); }
.hv4__img { align-self: end; margin: 1rem calc(var(--gr) * -1) 0 calc(var(--gl) * -1); }
.hv4__img img { width: 100%; height: auto; filter: grayscale(1) contrast(1.12); mix-blend-mode: multiply; }
.hv4__tick { overflow: hidden; margin: 0 calc(var(--gr) * -1) 0 calc(var(--gl) * -1); padding-block: .75rem; background: var(--ink); color: var(--lime); }
.hv4__tick div { display: flex; gap: 2rem; width: max-content; animation: hvTick 26s linear infinite; }
.hv4__tick span { font-family: var(--f-display); font-size: 1.3rem; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.hv4__tick span::after { content: "\25CF"; margin-left: 2rem; color: var(--red); font-size: .7em; vertical-align: middle; }
@keyframes hvTick { to { transform: translateX(-50%); } }

@media (min-width: 600px) { .hv3__tags span { display: block; } .hv3__tags { padding: 0 1.2rem; gap: 1rem; } }
@media (min-width: 900px) {
.hv1 { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); grid-template-rows: 1fr; align-items: end; column-gap: 2vw; padding-top: 0; }
.hv1__txt { align-self: center; padding-bottom: 3vw; }
html .hero .hv1 .hv__t, html .hero .hv3 .hv__t { font-size: 5.6vw; }
.hv1__img { margin: 0 calc(var(--gr) * -1) 0 0; }
.hv1__img img { width: 100%; max-height: calc(100svh - var(--hh, 64px) - 4vw); object-fit: contain; object-position: 50% 100%; }
.hv__lead { font-size: max(1.05vw, .95rem); }
.hv2__big { top: 1vw; font-size: 17.5vw; }
.hv2__img { justify-self: center; margin: 7vw 0 0; }
.hv2__img img { width: auto; height: min(56svh, 40vw); }
.hv2__bar { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) auto; align-items: center; column-gap: 3vw; padding: 1.4vw 0 1.6vw; }
html .hero .hv2 .hv__t { font-size: 2.3vw; }
.hv2__names { padding: 0; border: 0; }
.hv2__names li { font-size: .68rem; }
.hv2__names b { font-size: 1.7vw; }
.hv2 .sticker { position: relative; top: auto; right: auto; --s: 7vw; }
.hv3 { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); grid-template-rows: 1fr; align-items: end; column-gap: 2vw; padding-top: 0; }
.hv3__txt { align-self: center; padding-bottom: 3vw; }
.hv3__stage { margin: 0 calc(var(--gr) * -1) 0 0; }
.hv3__stage img { max-height: calc(100svh - var(--hh, 64px) - 4vw); width: 100%; object-fit: contain; object-position: 50% 100%; }
.hv3__tags { bottom: 2vw; padding: 0 3vw; gap: 2vw; }
.hv3__tags a { padding: .8rem 1rem; }
.hv3__tags b { font-size: 1.5vw; }
.hv4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; padding-top: 2vw; }
.hv4__txt { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .6fr); align-items: end; column-gap: 4vw; }
html .hero .hv4 .hv__t { font-size: 7vw; }
.hv4__side .hv__lead { margin: 0 0 1.2rem; }
.hv4__img { grid-column: 1 / -1; justify-self: center; margin: 0; }
.hv4__img img { width: auto; height: min(52svh, 34vw); }
.hv4__tick { grid-column: 1 / -1; }
}

/* seletor de versões (só para aprovar) */
.hvpick { position: fixed; z-index: 90; right: max(12px, env(safe-area-inset-right, 0px)); top: calc(var(--hh, 64px) + 10px); display: flex; align-items: center; gap: .3rem; padding: .35rem .35rem .35rem .75rem; background: var(--ink); color: var(--white); box-shadow: 0 14px 30px -12px rgb(0 0 0 / .6); }
.hvpick .caps { margin-right: .3rem; font-size: .6rem; }
.hvpick button { width: 2.1rem; height: 2.1rem; border: 1px solid rgb(255 255 255 / .35); background: none; color: var(--white); font-weight: 800; cursor: pointer; }
.hvpick button[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.hvpick .hvpick__x { border: 0; opacity: .6; font-size: 1.1rem; }
@media (min-width: 900px) { .hvpick { right: 1.4rem; } }
@media (prefers-reduced-motion: reduce) { .hv__v *, .hv4__tick div { animation: none !important; } }
