/* ==========================================================================
   PK STORE — Moda Masculina · Link na Bio
   Sistema visual: navy da marca sobre base osso. Editorial, sóbrio, masculino.
   ========================================================================== */

:root{
  /* Cores extraídas da logo atual do Instagram (navy sobre branco) */
  --navy:        #122544;
  --navy-deep:   #0B1729;
  --navy-soft:   #1E3A66;
  --steel:       #6B7A93;
  --bone:        #F5F3EF;
  --bone-2:      #EDEAE3;
  --line:        #DBD6CC;
  --white:       #FFFFFF;
  --wa:          #1FA855;

  --ink:         var(--navy);
  --ink-2:       #46536B;

  --r-lg: 18px;
  --r-md: 14px;
  --r-sm: 10px;

  --shadow-1: 0 1px 2px rgba(11,23,41,.06), 0 6px 18px rgba(11,23,41,.06);
  --shadow-2: 0 2px 4px rgba(11,23,41,.10), 0 14px 34px rgba(11,23,41,.16);

  --fs-display: clamp(30px, 9vw, 38px);
  --pad: 22px;
}

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

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

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:"Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size:16.5px;
  line-height:1.52;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:inherit; text-decoration:none; }
h1,h2,p,ul{ margin:0; }
ul{ padding:0; list-style:none; }
svg{ display:block; }

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

.page{
  max-width:460px;
  margin:0 auto;
  min-height:100dvh;
  background:var(--bone);
  box-shadow:0 0 60px rgba(11,23,41,.08);
}

/* ============ 01 · HERO ============ */
.hero{
  position:relative;
  padding:44px var(--pad) 34px;
  text-align:center;
  color:var(--white);
  overflow:hidden;
  border-bottom-left-radius:26px;
  border-bottom-right-radius:26px;
}

.hero__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% -20%, #24406F 0%, transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
}
/* Trama diagonal discreta — eco do tecido, sem virar textura de template */
.hero__bg::after{
  content:"";
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(135deg,
    rgba(255,255,255,.05) 0 1px, transparent 1px 9px);
  opacity:.7;
}

.hero__inner{ position:relative; }

/* Logo original da marca (avatar atual do Instagram) */
.mark{
  display:block;
  width:92px; height:92px;
  margin:0 auto 18px;
  border-radius:16px;
  background:var(--bone);
  object-fit:cover;
  box-shadow:var(--shadow-2);
}

.hero__name{
  font-family:"Bitter", Georgia, serif;
  font-size:var(--fs-display);
  font-weight:800;
  letter-spacing:.045em;
  line-height:1.05;
}
.hero__handle{
  margin-top:6px;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#9FB0CC;
}
.hero__tagline{
  margin-top:18px;
  font-family:"Bitter", Georgia, serif;
  font-style:italic;
  font-size:17px;
  font-weight:700;
  line-height:1.4;
  color:var(--white);
}
.hero__pitch{
  margin-top:10px;
  font-size:13.5px;
  line-height:1.55;
  color:#A9BAD4;
}

/* ============ 02 · TRUST ============ */
.stack{
  padding:0 var(--pad) 8px;
  display:flex;
  flex-direction:column;
  gap:26px;
}

.trust{
  margin-top:-16px;
  position:relative;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:6px 16px;
  box-shadow:var(--shadow-1);
}
.trust li{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 0;
  font-size:13.5px;
  font-weight:500;
  color:var(--ink-2);
}
.trust li + li{ border-top:1px solid var(--bone-2); }
.trust__i{
  font-family:"Bitter", Georgia, serif;
  font-size:12px;
  font-weight:800;
  color:var(--steel);
  letter-spacing:.08em;
  min-width:18px;
}

/* ============ BOTÕES ============ */
.btn{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  min-height:64px;
  padding:14px 18px;
  border-radius:var(--r-md);
  transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}
.btn:active{ transform:scale(.985); }

.btn__ico{ flex:0 0 24px; }
.btn__ico svg{ width:24px; height:24px; }

.btn__txt{ flex:1 1 auto; min-width:0; text-align:left; }
.btn__txt strong{
  display:block;
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.045em;
  line-height:1.25;
}
.btn__txt small{
  display:block;
  margin-top:3px;
  font-size:12px;
  font-weight:400;
  letter-spacing:.01em;
  opacity:.72;
}
.btn__arrow{
  flex:0 0 auto;
  font-size:16px;
  opacity:.5;
  transition:transform .16s ease;
}
.btn:hover .btn__arrow{ transform:translateX(3px); opacity:.9; }

/* CTA principal — único elemento com esse peso na página */
.btn--primary{
  background:var(--navy);
  color:var(--white);
  min-height:72px;
  box-shadow:var(--shadow-2);
}
.btn--primary .btn__ico{ color:#7CE0A3; }
.btn--primary:hover{ background:var(--navy-soft); }

.btn--outline{
  background:var(--white);
  color:var(--ink);
  border:1px solid var(--line);
  box-shadow:var(--shadow-1);
}
.btn--outline:hover{ border-color:var(--steel); }

.btn--wa .btn__ico{ color:var(--wa); }

.btn--ghost{
  background:transparent;
  color:var(--navy);
  border:1px solid var(--navy);
  min-height:54px;
  justify-content:center;
  gap:10px;
}
.btn--ghost .btn__txt{ flex:0 1 auto; text-align:center; }
.btn--ghost:hover{ background:var(--navy); color:var(--white); }

.btn--light{
  background:var(--white);
  color:var(--navy);
}
.btn--light:hover{ background:var(--bone); }

/* ============ 03 · CTA PRINCIPAL ============ */
.primary{ display:flex; flex-direction:column; gap:10px; }
.eyebrow{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--steel);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line);
}
.primary__note{
  font-size:12.5px;
  line-height:1.5;
  color:var(--ink-2);
  padding:0 4px;
}

/* ============ 05 · SEÇÕES ============ */
.section{ display:flex; flex-direction:column; gap:12px; }
.section__title{
  font-family:"Bitter", Georgia, serif;
  font-size:21px;
  font-weight:800;
  letter-spacing:-.005em;
}
.section__title--light{ color:var(--white); }
.section__sub{
  font-size:13px;
  line-height:1.5;
  color:var(--ink-2);
  margin-top:-6px;
}

.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.tile{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:16px 14px;
  min-height:82px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-shadow:var(--shadow-1);
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.tile:hover{ transform:translateY(-2px); border-color:var(--steel); box-shadow:var(--shadow-2); }
.tile:active{ transform:scale(.985); }
.tile__label{
  font-family:"Bitter", Georgia, serif;
  font-size:18px;
  font-weight:800;
}
.tile__go{
  margin-top:10px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--steel);
}

/* ============ 06 · PROVA SOCIAL ============ */
.proof{
  background:var(--navy);
  color:var(--white);
  border-radius:20px;
  padding:26px 22px 22px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.proof__txt{
  font-size:14px;
  line-height:1.6;
  color:#C9D5E6;
}
.proof__txt strong{ color:var(--white); font-weight:600; }

/* ============ 07 · LOCALIZAÇÃO ============ */
.addr{
  background:var(--white);
  border:1px solid var(--line);
  border-left:3px solid var(--navy);
  border-radius:var(--r-sm);
  padding:16px 18px;
}
.addr__line{ font-size:15px; font-weight:500; }
.addr__line--sub{
  margin-top:4px;
  font-size:12.5px;
  font-weight:400;
  color:var(--ink-2);
}
.addr__hours{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--bone-2);
  font-size:12.5px;
  color:var(--ink-2);
  display:flex;
  align-items:center;
  gap:8px;
}
.dot{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--wa);
  flex:0 0 auto;
}

/* Mapa — o iframe recebe o toque direto: nada de camada por cima */
.map{
  position:relative;
  height:230px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--bone-2);
  box-shadow:var(--shadow-1);
  isolation:isolate;            /* corrige o corte do raio no iOS */
  -webkit-transform:translateZ(0);
}
.map iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
  border-radius:var(--r-md);
}

/* ============ 08 · ENVIO ============ */
.ship{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:22px 0;
  display:flex;
  flex-direction:column;
  gap:10px;
  text-align:center;
}
.ship__kicker{
  font-family:"Bitter", Georgia, serif;
  font-size:18px;
  font-weight:800;
}
.ship__txt{
  font-size:13.5px;
  line-height:1.55;
  color:var(--ink-2);
  margin-bottom:4px;
}

/* ============ 09 · RODAPÉ ============ */
.foot{
  padding:30px var(--pad) calc(34px + env(safe-area-inset-bottom));
  text-align:center;
}
.social{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-bottom:20px;
}
.social a{
  width:46px; height:46px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--white);
  color:var(--navy);
  transition:background-color .16s ease, color .16s ease;
}
.social a:hover{ background:var(--navy); color:var(--white); }
.social svg{ width:20px; height:20px; }

.foot__brand{
  font-size:11px;
  font-weight:700;
  letter-spacing:.22em;
  color:var(--navy);
}
.foot__meta{
  margin-top:5px;
  font-size:11px;
  letter-spacing:.06em;
  color:var(--steel);
}

/* ============ MOVIMENTO ============
   A marca é alfaiataria: tecido assenta, não quica. Nada de mola, nada de
   elástico. Saída suave, distância curta, e só transform/opacity — as duas
   propriedades que a GPU resolve sem recalcular layout.
   Regra de corte: se a animação não ajuda a ler ou a decidir, ela não entra.
   ================================================== */

:root{ --ease:cubic-bezier(.22,.61,.36,1); }

/* ---- 1. Hero: entra no load, porque é a única parte que todo mundo vê ---- */
.js .hero__inner > *{
  animation:heroIn .55s var(--ease) both;
}
.js .mark          { animation-delay:.02s; }
.js .hero__name    { animation-delay:.12s; }
.js .hero__handle  { animation-delay:.18s; }
.js .hero__tagline { animation-delay:.24s; }
.js .hero__pitch   { animation-delay:.30s; }

.js .mark{ animation-name:markIn; }

@keyframes heroIn{
  from{ opacity:0; transform:translateY(12px); }
  to  { opacity:1; transform:none; }
}
@keyframes markIn{
  from{ opacity:0; transform:scale(.92); }
  to  { opacity:1; transform:none; }
}

/* ---- 2. Resto da página: entra quando o visitante chega, não no load ----
   O jeito antigo disparava tudo de uma vez com delay fixo: o bloco do mapa
   terminava de animar antes de alguém rolar até ele. Animação que ninguém vê
   é peso morto. Agora quem dispara é o IntersectionObserver. ---- */
.js .reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  will-change:opacity, transform;
}
.js .reveal.is-in{
  opacity:1;
  transform:none;
  will-change:auto;
}

/* ---- 3. Cascata onde a leitura é sequencial ----
   As três provas e as quatro categorias são listas: entram uma a uma, no
   ritmo de quem lê. Em bloco, viram um borrão só. ---- */
.js .stagger > li,
.js .stagger > .tile{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.js .stagger.is-in > li,
.js .stagger.is-in > .tile{
  opacity:1;
  transform:none;
}
.js .stagger.is-in > *:nth-child(1){ transition-delay:.10s; }
.js .stagger.is-in > *:nth-child(2){ transition-delay:.19s; }
.js .stagger.is-in > *:nth-child(3){ transition-delay:.28s; }
.js .stagger.is-in > *:nth-child(4){ transition-delay:.37s; }

/* ---- 4. CTA principal: brilho de tecido ----
   Uma faixa de luz atravessa o botão no mesmo ângulo da trama do hero.
   Não pisca, não pulsa, não muda de cor: é o reflexo passando num tecido bom.
   Roda só enquanto o botão está na tela (classe .sheen-live). ---- */
.btn--primary{ position:relative; overflow:hidden; }
.btn--primary > span{ position:relative; z-index:1; }
.btn--primary::after{
  content:"";
  position:absolute;
  top:-60%;
  bottom:-60%;
  left:0;
  width:40%;
  pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.21), transparent);
  transform:translateX(-160%) rotate(14deg);
}
.btn--primary.sheen-live::after{
  animation:sheen 7s linear 1.2s infinite;
}
@keyframes sheen{
  0%   { transform:translateX(-160%) rotate(14deg); }
  17%  { transform:translateX(460%)  rotate(14deg); }
  100% { transform:translateX(460%)  rotate(14deg); }
}

/* ---- 5. Cards de categoria: resposta ao toque ----
   No celular não existe hover. O :active carrega o mesmo destaque do :hover,
   senão o card fica mudo justo na hora do clique. A barra navy que cresce é
   a mesma marcação do card de endereço — detalhe do sistema, não enfeite. ---- */
.tile{ position:relative; overflow:hidden; }
.tile::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background:var(--navy);
  transform:scaleY(0);
  transform-origin:center top;
  transition:transform .3s var(--ease);
}
.tile:hover::before,
.tile:active::before,
.tile:focus-visible::before{ transform:scaleY(1); }

.tile__label{ transition:transform .3s var(--ease); }
.tile__go{ transition:transform .3s var(--ease), color .2s ease; }

.tile:hover .tile__label,
.tile:active .tile__label,
.tile:focus-visible .tile__label{ transform:translateX(5px); }

.tile:hover .tile__go,
.tile:active .tile__go,
.tile:focus-visible .tile__go{ transform:translateX(5px); color:var(--navy); }

.tile:active{ transform:scale(.98); }

/* ---- 6. Acessibilidade: quem pediu menos movimento recebe zero ----
   Sem este bloco o reveal deixaria a página em branco: opacity:0 e nada
   para trazer de volta. ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
  }
  .js .reveal,
  .js .stagger > li,
  .js .stagger > .tile,
  .js .hero__inner > *{
    opacity:1 !important;
    transform:none !important;
  }
}

/* Telas muito estreitas (360px) */
@media (max-width:370px){
  :root{ --pad:16px; }
  .btn__txt strong{ font-size:12.2px; letter-spacing:.03em; }
  .tile__label{ font-size:17px; }
}