/* =========================================================
   Ibratin — página de entrada
   Uma tela: escolher o estado e entrar na loja.
   ========================================================= */

:root {
  --azul:     #2F519C;
  --azul-cl:  #4E77CC;
  --laranja:  #E8873C;
  --laranja-f:#D06C22;
  --fundo:    #0A1430;
  --branco:   #FFFFFF;
  --tinta:    #14203F;
  --raio:     16px;
}

* , *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  color: #fff;
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
h1 { margin: 0; }
p  { margin: 0; }
a  { color: inherit; text-decoration: none; }

:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; border-radius: 6px; }

/* ---------------------------------------------------------
   PALCO — o fundo vivo
   --------------------------------------------------------- */
.palco {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(1000px 620px at 78% -12%, rgba(78,119,204,.55) 0%, rgba(78,119,204,0) 62%),
    radial-gradient(760px 520px at 12% 8%,   rgba(232,135,60,.32) 0%, rgba(232,135,60,0) 60%),
    radial-gradient(900px 620px at 50% 118%, rgba(47,81,156,.5)  0%, rgba(47,81,156,0)  64%),
    linear-gradient(165deg, #0E1B3E 0%, var(--fundo) 48%, #070F26 100%);
}

/* brilho que respira devagar, para a tela não ficar parada */
.palco::before {
  content: '';
  position: absolute; inset: -20%;
  background: radial-gradient(620px 620px at 30% 30%, rgba(232,135,60,.14), transparent 60%);
  animation: respira 14s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes respira {
  from { transform: translate3d(-4%, -2%, 0) scale(1);    opacity: .75; }
  to   { transform: translate3d(6%, 4%, 0)  scale(1.18); opacity: 1;   }
}

/* ---------------------------------------------------------
   LOGO
   --------------------------------------------------------- */
.marca {
  position: relative; z-index: 2;
  display: flex; justify-content: center;
  padding: clamp(18px, 3vh, 30px) 20px 0;
}
.marca img { width: clamp(150px, 20vw, 200px); height: auto; }

/* ---------------------------------------------------------
   AÇÃO — título + seletor
   --------------------------------------------------------- */
.acao {
  position: relative; z-index: 2;
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(16px, 2.4vh, 26px);
  padding: clamp(20px, 3.5vh, 44px) 20px clamp(20px, 3vh, 36px);
  text-align: center;
}

.acao h1 {
  /* o vh no meio do clamp impede que o título empurre a vitrine
     para fora da tela em monitores baixos */
  font-size: clamp(2.1rem, min(6vw, 8.5vh), 4.2rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.035em;
  background: linear-gradient(180deg, #fff 38%, #B9C9EE 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: entra .7s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes entra {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* formulário */
.form {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  width: 100%; max-width: 620px;
  animation: entra .7s cubic-bezier(.2,.7,.3,1) .1s both;
}

.form__campo { position: relative; flex: 1 1 300px; min-width: 0; }

.form__campo select {
  width: 100%; height: 66px;
  padding: 0 48px 0 22px;
  font-family: inherit; font-size: 1.06rem; font-weight: 600;
  color: var(--tinta); background: #fff;
  border: 0; border-radius: var(--raio);
  box-shadow: 0 10px 30px rgba(3,10,28,.45);
  appearance: none; -webkit-appearance: none; cursor: pointer;
  transition: box-shadow .25s ease, transform .25s ease;
}
.form__campo select:hover { transform: translateY(-1px); }
.form__campo select:focus { outline: none; box-shadow: 0 0 0 4px rgba(232,135,60,.5), 0 10px 30px rgba(3,10,28,.45); }
.form__campo optgroup { font-weight: 700; color: #7A849C; }
.form__campo option   { font-weight: 500; color: var(--tinta); }

.form__seta {
  position: absolute; right: 18px; top: 50%; translate: 0 -50%;
  width: 22px; height: 22px; pointer-events: none;
  fill: none; stroke: #9AA4BC; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

.form__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 66px; padding: 0 34px;
  font-family: inherit; font-size: 1.05rem; font-weight: 800; color: #fff;
  background: linear-gradient(180deg, var(--laranja), var(--laranja-f));
  border: 0; border-radius: var(--raio); cursor: pointer;
  box-shadow: 0 10px 30px rgba(232,135,60,.42);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.form__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor;
                 stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
                 transition: translate .22s ease; }
.form__btn:hover  { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(232,135,60,.55); filter: brightness(1.05); }
.form__btn:hover svg { translate: 3px 0; }
.form__btn:active { transform: translateY(0); }

.nota {
  font-size: .93rem; color: #A7B4D4; max-width: 46ch;
  animation: entra .7s cubic-bezier(.2,.7,.3,1) .18s both;
}
.nota b { color: #fff; font-weight: 700; }

/* ---------------------------------------------------------
   VITRINE — faixas que passam sozinhas
   --------------------------------------------------------- */
.vitrine {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 12px;
  padding-bottom: clamp(14px, 2vh, 20px);
  /* apaga as pontas para os cards nascerem e sumirem no escuro */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.fila { overflow: hidden; }

.fila__pista {
  display: flex; width: max-content;
  animation: correr 62s linear infinite;
}
.fila--volta .fila__pista { animation-direction: reverse; }

/* dois grupos idênticos: ao deslocar exatamente metade, o laço é invisível */
.fila__grupo { display: flex; gap: 14px; padding-right: 14px; }

@keyframes correr {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.vitrine:hover .fila__pista,
.fila__pista:focus-within { animation-play-state: paused; }

/* Depois que o visitante escolhe o estado, a faixa mostra só os produtos
   da unidade dele — os preços das duas lojas são diferentes. Como os dois
   grupos são cópias exatas, esconder por unidade não desalinha o laço. */
.palco[data-unidade="sp"] .card[data-unidade="al"],
.palco[data-unidade="al"] .card[data-unidade="sp"] { display: none; }

/* card */
.card {
  /* flex column: sem isso o <a> gera uma caixa de linha anônima
     que soma ~22px de altura morta em cada card */
  display: flex; flex-direction: column;
  flex: none; width: clamp(146px, 11.5vw, 178px);
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  overflow: hidden;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform .28s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.card:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,.11);
  border-color: rgba(232,135,60,.55);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}

.card__foto {
  position: relative; display: block;
  aspect-ratio: 1/1; background: #fff;
  overflow: hidden;
}
.card__foto img { width: 100%; height: 100%; object-fit: contain; padding: 10px;
                  transition: scale .3s ease; }
.card:hover .card__foto img { scale: 1.06; }

.card__selo {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  padding: 3px 9px; border-radius: 999px;
  font-size: .61rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: var(--laranja); color: #fff;
}
.card__selo--of { background: #D3264F; }

.card__txt { display: block; padding: 9px 11px 11px; }

.card__nome {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .78rem; font-weight: 500; line-height: 1.32; color: #DCE4F5;
  /* altura fixa de duas linhas: com min-height os cards de nome curto
     ficavam mais baixos e as duas faixas desalinhavam */
  height: 2.64em;
}
/* Altura fixa e preço ancorado embaixo: o "de" riscado não cabe na mesma
   linha em produtos caros, e a quebra deixava alguns cards mais altos que
   os outros — o que desalinhava as duas faixas inteiras. */
.card__preco {
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: flex-end;
  height: 36px; margin-top: 5px;
}
.card__preco s { font-size: .7rem;  line-height: 1.25; color: #8593B4; }
.card__preco b { font-size: 1rem;   line-height: 1.25; font-weight: 800;
                 color: #fff; letter-spacing: -.01em; }

/* ---------------------------------------------------------
   RODAPÉ
   --------------------------------------------------------- */
.rodape {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 20px clamp(18px, 3vh, 26px);
  font-size: .8rem; color: #7D8AAB;
}
.rodape a { color: #A7B4D4; transition: color .2s ease; }
.rodape a:hover { color: var(--laranja); }

/* ---------------------------------------------------------
   TELAS PEQUENAS
   --------------------------------------------------------- */
@media (max-width: 620px) {
  .acao { gap: 18px; padding-top: 24px; }
  .acao h1 { font-size: clamp(2rem, 10vw, 2.7rem); }
  .form { flex-direction: column; max-width: 420px; }
  /* o flex-basis de 300px do desktop vira ALTURA aqui e empurra o botão
     para longe do campo — no empilhado o item não pode flexionar */
  .form__campo { flex: none; width: 100%; }
  .form__campo select, .form__btn { width: 100%; height: 60px; }
  .nota { font-size: .86rem; }

  .card { width: 148px; }
  .card__nome { font-size: .75rem; }
  .card__preco b { font-size: .92rem; }
  .fila__pista { animation-duration: 44s; }
  .vitrine { gap: 10px; }
}

/* uma faixa só em telas muito baixas, para o seletor não sair da tela */
@media (max-height: 620px) and (min-width: 621px) {
  .fila:nth-child(2) { display: none; }
}

/* ---------------------------------------------------------
   ACESSIBILIDADE
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fila__pista { animation: none; }
  .fila { overflow-x: auto; }
  .palco::before { animation: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}