/* Área da aluna: duas vitrines lado a lado, cada uma com a cor do produto e uma prateleira de produtos analisados */
:root {
  --tinta: #17181A; --cinza: #5E6166; --papel: #FFFFFF; --linha: #E4E2DE;
  --fio: #C2601F; --fio-fundo: #F6E7D9; --fio-borda: #D9B596; --fio-texto: #FFF4EA;
  --vnv: #2F7FB8; --vnv-fundo: #E0EDF7; --vnv-borda: #A9C8E2; --vnv-texto: #EEF6FC;
  --lente: #0E6B66; --lente-fundo: #DDEDEA; --lente-borda: #9CC9C3; --lente-texto: #E8F5F3;
  --fonte: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--papel); }
body { margin: 0; color: var(--tinta); font: 400 16px/1.5 var(--fonte); font-optical-sizing: auto; }
button, input { font: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* topo: discreto, por cima das vitrines */
.topo { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 22px clamp(20px, 4vw, 56px); }
.topo-marca { font-size: 15px; font-weight: 600; text-decoration: none; color: var(--papel); letter-spacing: .01em; }
.topo form { margin: 0; }
.topo button { background: transparent; color: var(--papel); border: 1px solid rgba(255, 255, 255, .55); border-radius: 4px; padding: 7px 16px; font-size: 14px; font-weight: 600; cursor: pointer; }
.topo button:hover { background: rgba(255, 255, 255, .14); }

/* botões: retângulos firmes, sem enfeite */
.bt { display: inline-block; background: var(--papel); color: var(--tinta); border: 2px solid var(--papel); border-radius: 4px; padding: 14px 34px; font-size: 17px; font-weight: 700; text-decoration: none; cursor: pointer; }
.lado-fio .bt { color: #6E2D08; }
.lado-vnv .bt { color: #123E63; }
.bt:hover { background: transparent; color: var(--papel); }
.bt-vazado { background: transparent; color: var(--papel); }
.lado .bt-vazado { color: var(--papel); }
.bt-vazado:hover { background: var(--papel); }
.lado-fio .bt-vazado:hover { color: #6E2D08; }
.lado-vnv .bt-vazado:hover { color: #123E63; }

/* vitrine */
.vitrine { display: grid; grid-template-columns: repeat(3, 1fr); min-height: 100vh; }
.lado { display: flex; flex-direction: column; min-height: 100%; min-width: 0; overflow: hidden; }
.entrada > * { min-width: 0; }
.lado-fio { background: var(--fio); --fundo: var(--fio-fundo); --borda: var(--fio-borda); --claro: var(--fio-texto); }
.lado-vnv { background: var(--vnv); --fundo: var(--vnv-fundo); --borda: var(--vnv-borda); --claro: var(--vnv-texto); }
.lado-txt { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 110px clamp(24px, 5vw, 72px) 44px; color: var(--papel); }
.lado-nome { margin: 0; font-size: 19px; font-weight: 650; line-height: 1.3; }
.lado-nome span { display: block; font-weight: 400; font-size: 16px; color: var(--claro); opacity: .85; }
.marca-grande {
  margin: 18px 0 20px -0.04em; font-size: clamp(120px, 15.5vw, 236px); line-height: .78; font-weight: 800;
  font-variation-settings: 'wdth' 75; letter-spacing: -0.045em; color: var(--papel);
}
.lado-texto { margin: 0 0 30px; max-width: 30ch; font-size: 18px; line-height: 1.45; color: var(--claro); }
.lado-aviso { margin: -12px 0 16px; font-size: 15px; font-weight: 600; color: var(--papel); }
.lado-txt .bt { align-self: flex-start; }

/* prateleira em movimento */
.prateleira { position: relative; background: var(--fundo); padding-top: 34px; overflow: hidden; }
.prateleira::after { content: ''; display: block; height: 14px; background: var(--borda); box-shadow: 0 10px 18px -10px rgba(0, 0, 0, .35); }
.fila { display: flex; width: max-content; background: var(--fundo); animation: desliza var(--tempo) linear infinite; }
.lado-fio .fila { --tempo: 500s; }
.lado-vnv .fila { --tempo: 430s; }
.lado-vnv .fila { animation-direction: reverse; }
.prateleira:hover .fila { animation-play-state: paused; }
.fila-grupo { display: flex; align-items: flex-end; gap: 34px; padding-right: 34px; height: clamp(150px, 20vh, 200px); }
.prateleira img { display: block; height: 100%; width: auto; max-width: 130px; object-fit: contain; object-position: bottom; mix-blend-mode: multiply; }
.prateleira img:nth-child(even) { height: 84%; }
.prateleira img:nth-child(3n) { height: 92%; }
@keyframes desliza { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .fila { animation: none; } }

/* quem ainda não comprou: a vitrine fica, a prateleira esmaece */
.sem-acesso .prateleira img { filter: grayscale(1); opacity: .55; }

.faixa { position: absolute; top: 70px; left: 50%; transform: translateX(-50%); z-index: 6; margin: 0; width: min(640px, calc(100% - 32px)); background: var(--papel); color: var(--tinta); padding: 12px 18px; border-radius: 4px; font-size: 15px; box-shadow: 0 8px 30px -12px rgba(0, 0, 0, .4); }
.rodape { padding: 18px clamp(20px, 4vw, 56px); font-size: 13px; color: var(--cinza); border-top: 1px solid var(--linha); }
.rodape p { margin: 0; }

/* entrar */
.entrada { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100vh; }
.entrada-arte { display: flex; flex-direction: column; }
.entrada-arte .lado { flex: 1; min-height: 0; }
.entrada-arte .lado-txt { padding-top: 90px; padding-bottom: 28px; }
.entrada-arte .fila-grupo { height: clamp(110px, 15vh, 160px); gap: 26px; padding-right: 26px; }
.entrada:not(.entrada-fio):not(.entrada-vnv) .entrada-arte .marca-grande { font-size: clamp(96px, 10vw, 160px); }
.entrada:not(.entrada-fio):not(.entrada-vnv) .entrada-arte .lado-txt { padding-top: 70px; }
.entrada:not(.entrada-fio):not(.entrada-vnv) .entrada-arte .lado-vnv .lado-txt { padding-top: 32px; }
.entrada-arte .marca-grande { margin-bottom: 0; }
.pg-entrar .topo { right: auto; }
.entrar { display: flex; flex-direction: column; justify-content: center; padding: 110px clamp(24px, 6vw, 96px) 64px; max-width: 620px; }
.entrar h1 { margin: 0; font-size: clamp(34px, 3.6vw, 48px); line-height: 1.05; font-weight: 750; letter-spacing: -0.03em; font-variation-settings: 'wdth' 85; }
.entrar .sub { margin: 14px 0 0; max-width: 44ch; color: var(--cinza); font-size: 17px; }
.entrar form { display: grid; gap: 18px; margin-top: 32px; max-width: 420px; }
.entrar label { display: grid; gap: 7px; font-size: 15px; font-weight: 600; }
.entrar input { font-size: 17px; padding: 14px 16px; border: 1.5px solid #CFCCC7; border-radius: 4px; background: var(--papel); color: var(--tinta); }
.entrar input:hover { border-color: #9C9893; }
.entrar input:focus { border-color: var(--tinta); outline: none; box-shadow: 0 0 0 3px rgba(23, 24, 26, .12); }
.entrar .bt { margin-top: 8px; background: var(--tinta); color: var(--papel); border-color: var(--tinta); width: 100%; }
.entrar .bt:hover { background: #2E3034; border-color: #2E3034; color: var(--papel); }
.entrada-fio .entrar .bt { background: var(--fio); border-color: var(--fio); }
.entrada-fio .entrar .bt:hover { background: #A44F17; border-color: #A44F17; }
.entrada-vnv .entrar .bt { background: var(--vnv); border-color: var(--vnv); }
.entrada-vnv .entrar .bt:hover { background: #1F5F8E; border-color: #1F5F8E; }
.voltar { margin-top: 22px; font-size: 15px; font-weight: 600; color: var(--cinza); align-self: flex-start; }
.voltar:hover { color: var(--tinta); }
.aviso, .erro { margin: 20px 0 0; padding: 12px 16px; border-radius: 4px; font-size: 15px; max-width: 420px; }
.aviso { background: #F3F2EF; }
.erro { background: #FBE9E7; color: #8A1C1C; }
.pg-entrar .topo { position: absolute; }

@media (max-width: 860px) {
  .vitrine { grid-template-columns: 1fr; }
  .lado-txt { padding-top: 90px; padding-bottom: 32px; }
  .lado + .lado .lado-txt { padding-top: 48px; }
  .marca-grande { font-size: clamp(110px, 30vw, 170px); }
  .fila-grupo { height: 130px; gap: 24px; padding-right: 24px; }
  .entrada { grid-template-columns: 1fr; min-height: 0; }
  .entrada-arte { flex-direction: row; }
  .entrada-arte .lado-txt { padding: 64px 20px 16px; }
  .entrada-arte .marca-grande, .entrada:not(.entrada-fio):not(.entrada-vnv) .entrada-arte .marca-grande { font-size: clamp(64px, 17vw, 110px); }
  .entrada:not(.entrada-fio):not(.entrada-vnv) .entrada-arte .lado-vnv .lado-txt { padding-top: 64px; }
  .entrada-arte .prateleira { padding-top: 18px; }
  .entrada-arte .lado { min-width: 0; }
  .entrada-arte .fila-grupo { height: 84px; gap: 16px; padding-right: 16px; }
  .entrar { padding: 36px 20px 48px; max-width: none; }
  .lado-txt .bt, .entrar .bt { align-self: stretch; text-align: center; }
}

/* Lente (Método DECIDE) */
.lado-lente { background: var(--lente); --fundo: var(--lente-fundo); --borda: var(--lente-borda); --claro: var(--lente-texto); }
.lado-lente .bt { color: #06403D; }
.lado-lente .bt-vazado:hover { color: #06403D; }
.lado-lente .fila { --tempo: 80s; }
.entrada-lente .entrar .bt { background: var(--lente); border-color: var(--lente); }
.entrada-lente .entrar .bt:hover { background: #0A524E; border-color: #0A524E; }
@media (max-width: 1100px) { .vitrine { grid-template-columns: 1fr; } }

/* Borrifada (Perfume Certo) */
:root { --borr: #2A221C; --borr-fundo: #EFE5D3; --borr-borda: #D9A646; --borr-texto: #F2EADB; }
.lado-borr { background: var(--borr); --fundo: var(--borr-fundo); --borda: var(--borr-borda); --claro: var(--borr-texto); }
.lado-borr .bt { color: #2A221C; }
.lado-borr .bt-vazado:hover { color: #2A221C; }
.lado-borr .fila { --tempo: 450s; }
.lado-borr .marca-grande { font-size: clamp(76px, 8.6vw, 150px); }
.entrada:not(.entrada-fio):not(.entrada-vnv) .entrada-arte .lado-borr .marca-grande { font-size: clamp(60px, 6.6vw, 112px); }
.entrada-borr .entrar .bt { background: var(--borr); border-color: var(--borr); }
.entrada-borr .entrar .bt:hover { background: #3E342C; border-color: #3E342C; }
/* quatro áreas: duas por linha */
.vitrine { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) {
  .vitrine { grid-template-columns: 1fr; }
  .lado-borr .marca-grande, .entrada:not(.entrada-fio):not(.entrada-vnv) .entrada-arte .lado-borr .marca-grande { font-size: clamp(56px, 15vw, 104px); }
}

/* Lente: fotos de procedimentos na prateleira (sem o efeito de recorte dos produtos) */
.lado-lente .prateleira img { mix-blend-mode: normal; max-width: none; width: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .45); }

/* quatro áreas na mesma tela (computador): 2 × 2, mais compactas, botão ao lado do nome */
@media (min-width: 861px) {
  .vitrine { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); height: 100vh; height: 100dvh; min-height: 640px; }
  .vitrine .lado { min-height: 0; }
  .vitrine .lado-txt { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "nome nome" "marca bt" "texto texto" "aviso aviso"; align-content: end; column-gap: 28px; padding: 64px clamp(24px, 3.4vw, 56px) 20px; }
  .vitrine .lado-nome { grid-area: nome; font-size: 16px; }
  .vitrine .lado-nome span { font-size: 14px; }
  .vitrine .marca-grande, .vitrine .lado-borr .marca-grande { grid-area: marca; margin: 8px 0 10px -0.04em; font-size: clamp(60px, 6.4vw, 112px); }
  .vitrine .lado-texto { grid-area: texto; margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.4; }
  .vitrine .lado-aviso { grid-area: aviso; margin: 8px 0 0; font-size: 14px; }
  .vitrine .lado-txt .bt { grid-area: bt; align-self: center; justify-self: start; padding: 10px 26px; font-size: 16px; }
  .vitrine .prateleira { padding-top: 16px; }
  .vitrine .prateleira::after { height: 10px; }
  .vitrine .fila-grupo { height: clamp(84px, 13vh, 140px); gap: 24px; padding-right: 24px; }
}