/* ============================================================
   CSS da página /personalizacao — ARQUIVO ATIVO, carregado via
   <link> direto do personalizacao-nova.html a partir de:
     https://www.lojadacamisa.com/site/landing_pages/personalizacao/personalizacao.css
   Suba este arquivo exatamente nesse caminho sempre que editar.
   O HTML não precisa ser recolado na Tray só por causa de ajuste
   de estilo — só este .css muda.
   Usa as variáveis --font_family, --color_primary_medium etc. que
   a própria Tray expõe globalmente, então fica sempre igual ao
   resto do tema mesmo se as cores do tema mudarem no futuro.
============================================================= */
.lp-perso{
  --radius-btn: var(--border_radius_buttons, 20px);
  --radius-img: var(--border_radius_images, 4px);
  --preto: var(--color_primary_medium, #000);
  --texto: var(--color_font_medium, #333);
  --laranja: var(--color_secondary_medium, #ed8701);
  --cinza-bg: var(--color_footer_bg, #f4f4f4);
  --cinza-borda: var(--color_gray_medium, #eaeaea);
  --zap-bg: var(--button_whats_color_bg, #f3fbf3);
  --zap-txt: var(--button_whats_color_txt, #13b918);
  --zap-borda: var(--button_whats_color_border, #13b918);
  --zap-hover-bg: var(--button_whats_color_hover_bg, #13b918);
  --zap-hover-txt: var(--button_whats_color_hover_txt, #fff);
  font-family: var(--font_family, inherit);
  color: var(--texto);
  max-width: 1180px;
  margin: 0 auto;
  box-sizing: border-box;
}
.lp-perso *{box-sizing:border-box;}
.lp-perso img{max-width:100%;display:block;}
.lp-perso section{padding:56px 20px;}
.lp-perso h1,.lp-perso h2,.lp-perso h3{font-family:var(--font_family_title,var(--font_family,inherit));margin:0 0 14px;line-height:1.2;color:var(--preto);}
.lp-perso h1{font-size:clamp(28px,4.2vw,42px);font-weight:800;}
.lp-perso h2{font-size:clamp(22px,3vw,30px);font-weight:800;text-align:center;}
.lp-perso p{margin:0 0 12px;line-height:1.6;}
.lp-perso .lp-kicker{display:inline-block;color:var(--laranja);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:13px;margin-bottom:10px;}
.lp-perso .lp-sub{text-align:center;max-width:560px;margin:-6px auto 0;color:#666;font-size:15px;}

/* Botão principal (cheio) */
.lp-cta{display:inline-flex;align-items:center;gap:10px;background:var(--zap-txt);color:#fff;font-weight:700;text-decoration:none;padding:15px 30px;border-radius:var(--radius-btn);font-size:16px;box-shadow:0 8px 20px -8px var(--zap-txt);transition:transform .15s,box-shadow .15s;}
.lp-cta:hover{transform:translateY(-2px);box-shadow:0 10px 24px -6px var(--zap-txt);}
.lp-cta svg{width:20px;height:20px;flex:0 0 auto;}

/* Botão secundário (contorno, igual ao whats do resto do site) */
.lp-cta--outline{background:var(--zap-bg);color:var(--zap-txt);border:1px solid var(--zap-borda);box-shadow:none;}
.lp-cta--outline:hover{background:var(--zap-hover-bg);color:var(--zap-hover-txt);border-color:var(--zap-hover-txt);}

/* HERO - uma foto de fundo única (não mais "painel preto + painel de
   foto" separados) com gradiente escurecendo a esquerda pra o texto
   ficar legível. Mesmo padrão visual dos cards de categoria, só que
   em vez do gradiente vir de baixo, vem da esquerda (desktop) ou de
   baixo (mobile, onde o texto fica ancorado embaixo da foto). */
.lp-hero{position:relative;border-radius:16px;overflow:hidden;margin:24px 20px 0;width:calc(100% - 40px);min-height:420px;display:flex;align-items:center;background-color:#1a1a1a;}
.lp-hero__img{position:absolute;inset:0;z-index:0;}
.lp-hero__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.lp-hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.72) 32%,rgba(0,0,0,.32) 58%,rgba(0,0,0,0) 82%);}
.lp-hero__text{position:relative;z-index:2;padding:48px 40px;color:#fff;max-width:560px;}
.lp-hero__text .lp-kicker{color:var(--laranja);}
.lp-hero__text h1{color:#fff;}
.lp-hero__text p{color:#e6e6e6;font-size:17px;max-width:480px;}
.lp-hero__sub{margin-top:18px;font-size:14px;color:#c9c9c9;display:flex;gap:16px;flex-wrap:wrap;}
.lp-hero__sub span{display:flex;align-items:center;gap:6px;}
.lp-hero__sub svg{width:15px;height:15px;color:var(--laranja);}

/* STEPS - 4 etapas (não 5): encaixa em 2x2 no mobile sem sobrar
   card órfão numa terceira linha. */
.lp-steps{background:var(--cinza-bg);border-radius:16px;margin:56px 20px 0;padding:48px 30px;overflow:hidden;}
.lp-steps__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:32px;position:relative;}
.lp-step{text-align:center;padding:0 12px;position:relative;animation:lp-step-in .6s cubic-bezier(.2,.8,.2,1) both;}
.lp-step:nth-child(1){animation-delay:.05s}
.lp-step:nth-child(2){animation-delay:.18s}
.lp-step:nth-child(3){animation-delay:.31s}
.lp-step:nth-child(4){animation-delay:.44s}
.lp-step__icon{width:56px;height:56px;border-radius:50%;background:#fff;color:var(--laranja);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;box-shadow:0 4px 14px -4px rgba(0,0,0,.15);position:relative;z-index:1;transition:transform .25s,box-shadow .25s;}
.lp-step:hover .lp-step__icon{transform:scale(1.12) rotate(-4deg);}
.lp-step__icon svg{width:26px;height:26px;position:relative;z-index:1;}
.lp-step strong{display:block;font-size:15px;margin-bottom:4px;color:var(--preto);}
.lp-step p{font-size:14px;color:#666;margin:0;}
/* trilho neutro (sempre visível, de fundo) */
.lp-steps__grid::before{content:"";position:absolute;top:28px;left:12.5%;right:12.5%;height:2px;background:var(--cinza-borda);z-index:0;}
/* trilho laranja (preenche conforme cada etapa "completa") */
.lp-steps__grid::after{content:"";position:absolute;top:28px;left:12.5%;width:75%;height:2px;background:var(--laranja);z-index:0;transform-origin:left;transform:scaleX(0);animation:lp-line-fill 8s ease-in-out infinite;}
/* cada ícone fica marcado (preenchido) quando a linha o alcança */
.lp-step:nth-child(1) .lp-step__icon{animation:lp-fill-1 8s ease-in-out infinite;}
.lp-step:nth-child(2) .lp-step__icon{animation:lp-fill-2 8s ease-in-out infinite;}
.lp-step:nth-child(3) .lp-step__icon{animation:lp-fill-3 8s ease-in-out infinite;}
.lp-step:nth-child(4) .lp-step__icon{animation:lp-fill-4 8s ease-in-out infinite;}
@keyframes lp-step-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes lp-line-fill{
  0%,3%{transform:scaleX(0)}
  30%{transform:scaleX(.333)}
  57%{transform:scaleX(.667)}
  84%,90%{transform:scaleX(1)}
  97%,100%{transform:scaleX(0)}
}
@keyframes lp-fill-1{
  0%,2%{background:#fff;color:var(--laranja);box-shadow:0 4px 14px -4px rgba(0,0,0,.15)}
  4%,90%{background:var(--laranja);color:#fff;box-shadow:0 6px 18px -4px rgba(237,135,1,.55)}
  95%,100%{background:#fff;color:var(--laranja);box-shadow:0 4px 14px -4px rgba(0,0,0,.15)}
}
@keyframes lp-fill-2{
  0%,28%{background:#fff;color:var(--laranja);box-shadow:0 4px 14px -4px rgba(0,0,0,.15)}
  30%,90%{background:var(--laranja);color:#fff;box-shadow:0 6px 18px -4px rgba(237,135,1,.55)}
  95%,100%{background:#fff;color:var(--laranja);box-shadow:0 4px 14px -4px rgba(0,0,0,.15)}
}
@keyframes lp-fill-3{
  0%,55%{background:#fff;color:var(--laranja);box-shadow:0 4px 14px -4px rgba(0,0,0,.15)}
  57%,90%{background:var(--laranja);color:#fff;box-shadow:0 6px 18px -4px rgba(237,135,1,.55)}
  95%,100%{background:#fff;color:var(--laranja);box-shadow:0 4px 14px -4px rgba(0,0,0,.15)}
}
@keyframes lp-fill-4{
  0%,82%{background:#fff;color:var(--laranja);box-shadow:0 4px 14px -4px rgba(0,0,0,.15)}
  84%,93%{background:var(--laranja);color:#fff;box-shadow:0 6px 18px -4px rgba(237,135,1,.55)}
  95%,100%{background:#fff;color:var(--laranja);box-shadow:0 4px 14px -4px rgba(0,0,0,.15)}
}
@media (max-width:820px){.lp-steps__grid{grid-template-columns:repeat(2,1fr);gap:28px 12px;}.lp-steps__grid::before,.lp-steps__grid::after{display:none;}}
@media (prefers-reduced-motion:reduce){.lp-step{animation:none;opacity:1;transform:none}.lp-step__icon{animation:none!important;background:#fff!important;color:var(--laranja)!important;box-shadow:0 4px 14px -4px rgba(0,0,0,.15)!important}.lp-steps__grid::after{animation:none;transform:scaleX(1)}}

/* CATEGORIAS - cards com foto real (agora um <img loading="lazy">, não
   background-image, pra habilitar lazy loading nativo do navegador).
   Texto fica em overlay legível por cima, não "preso" na imagem como
   nos banners antigos. Enquanto uma foto não carrega/não existe, o
   fundo escuro sólido (--preto) do card aparece como fallback. */
.lp-cat__grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;grid-auto-flow:dense;gap:14px;margin-top:32px;}
.lp-cat{position:relative;border-radius:16px;overflow:hidden;text-decoration:none;display:block;background-color:var(--preto);box-shadow:0 2px 10px -6px rgba(0,0,0,.25);transition:transform .25s,box-shadow .25s;}
.lp-cat:hover{transform:translateY(-4px);box-shadow:0 16px 28px -12px rgba(0,0,0,.35);}
.lp-cat__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.lp-cat:hover .lp-cat__photo{transform:scale(1.08);}
.lp-cat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.8) 100%);pointer-events:none;}
.lp-cat__badge{position:absolute;top:14px;left:14px;width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.95);color:var(--laranja);display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,.2);}
.lp-cat__badge svg{width:18px;height:18px;}
.lp-cat__body{position:absolute;left:16px;right:46px;bottom:16px;z-index:2;}
.lp-cat__label{font-size:15px;font-weight:800;color:#fff;display:block;line-height:1.25;text-shadow:0 1px 6px rgba(0,0,0,.35);}
.lp-cat__desc{font-size:13px;color:rgba(255,255,255,.82);margin-top:2px;}
.lp-cat__arrow{position:absolute;right:14px;bottom:16px;color:#fff;opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .2s;z-index:2;}
.lp-cat:hover .lp-cat__arrow{opacity:1;transform:translateX(0);}
.lp-cat__arrow svg{width:16px;height:16px;}

.lp-cat--featured{grid-column:span 2;grid-row:span 2;}
.lp-cat--featured .lp-cat__badge{width:44px;height:44px;top:20px;left:20px;}
.lp-cat--featured .lp-cat__badge svg{width:22px;height:22px;}
.lp-cat--featured .lp-cat__body{left:24px;right:60px;bottom:24px;}
.lp-cat--featured .lp-cat__label{font-size:21px;}
.lp-cat--featured .lp-cat__desc{font-size:14.5px;}
.lp-cat--featured .lp-cat__arrow{right:20px;bottom:24px;}
.lp-cat--wide{grid-column:span 4;grid-row:span 1;}
@media (max-width:900px){.lp-cat__grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:220px;}.lp-cat--featured{grid-row:span 2;}.lp-cat--wide{grid-column:span 2;grid-row:span 1;}}
@media (max-width:520px){
  .lp-cat__grid{grid-template-columns:1fr;grid-auto-rows:190px;}
  .lp-cat--featured,.lp-cat--wide{grid-column:span 1;grid-row:span 1;}
  /* nesse tamanho o card "em destaque" fica do mesmo tamanho físico
     de um card normal, então a tipografia grande dele não cabe mais
     — volta pro mesmo padrão dos cards comuns */
  .lp-cat--featured .lp-cat__badge{width:36px;height:36px;top:14px;left:14px;}
  .lp-cat--featured .lp-cat__badge svg{width:18px;height:18px;}
  .lp-cat--featured .lp-cat__body{left:16px;right:46px;bottom:16px;}
  .lp-cat--featured .lp-cat__label{font-size:15px;}
  .lp-cat--featured .lp-cat__desc{font-size:13px;}
  .lp-cat--featured .lp-cat__arrow{right:14px;bottom:16px;}
}

/* MODELOS */
.lp-modelos__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:32px;}
.lp-modelo{position:relative;border:1px solid var(--cinza-borda);border-radius:12px;padding:22px;text-decoration:none;color:var(--texto);transition:border-color .15s,box-shadow .15s,transform .15s;background:#fff;}
@media (max-width:600px){
  .lp-modelos__grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .lp-modelo{padding:14px;}
  .lp-modelo__icon{width:32px;height:32px;margin-bottom:10px;}
  .lp-modelo__icon svg{width:16px;height:16px;}
  .lp-modelo strong{font-size:14px;}
}
.lp-modelo:hover{border-color:var(--laranja);box-shadow:0 10px 24px -10px rgba(0,0,0,.2);transform:translateY(-3px);}
.lp-modelo__icon{width:40px;height:40px;border-radius:10px;background:var(--cinza-bg);color:var(--laranja);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.lp-modelo__icon svg{width:20px;height:20px;}
.lp-modelo__tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.05em;color:var(--laranja);margin-bottom:8px;text-transform:uppercase;}
.lp-modelo strong{display:block;font-size:16px;margin-bottom:4px;color:var(--preto);}
.lp-modelo span{font-size:14px;color:#777;}
.lp-modelo__arrow{position:absolute;right:18px;bottom:18px;color:var(--laranja);opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .2s;}
.lp-modelo:hover .lp-modelo__arrow{opacity:1;transform:translateX(0);}
.lp-modelo__arrow svg{width:16px;height:16px;}

/* SOBRE / trust bar - cards informativos (não clicáveis: sem hover
   de "botão", o destaque vem da cor do ícone, não de uma interação) */
.lp-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px;}
.lp-trust__item{background:#fff;border:1px solid var(--cinza-borda);border-radius:14px;padding:28px 20px;text-align:center;}
.lp-trust__icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:#fff;box-shadow:0 10px 22px -10px rgba(0,0,0,.35);}
.lp-trust__icon svg{width:28px;height:28px;}
.lp-trust__item--craft .lp-trust__icon{background:linear-gradient(135deg,#ffb347,var(--laranja));}
.lp-trust__item--gift .lp-trust__icon{background:linear-gradient(135deg,#60a5fa,#2563eb);}
.lp-trust__item--whats .lp-trust__icon{background:linear-gradient(135deg,#25d366,var(--zap-txt));}
.lp-trust__item--ship .lp-trust__icon{background:linear-gradient(135deg,#3a3a3a,var(--preto));}
.lp-trust__title{font-weight:800;font-size:15.5px;color:var(--preto);margin-bottom:5px;}
.lp-trust__desc{font-size:13.5px;color:#777;line-height:1.45;}
@media (max-width:820px){.lp-trust{grid-template-columns:repeat(2,1fr);}}
@media (max-width:420px){.lp-trust{grid-template-columns:1fr;}}

/* FAQ */
.lp-faq{max-width:760px;margin:0 auto;}
.lp-faq details{border-bottom:1px solid var(--cinza-borda);padding:16px 0;}
.lp-faq summary{cursor:pointer;font-weight:700;font-size:15px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--preto);}
.lp-faq summary::-webkit-details-marker{display:none;}
.lp-faq summary::after{content:"+";font-size:22px;color:var(--laranja);flex:0 0 auto;font-weight:400;display:inline-block;transition:transform .2s;}
.lp-faq details[open] summary::after{transform:rotate(45deg);}
.lp-faq p{margin-top:10px;font-size:15.5px;color:#666;}

/* CTA final */
.lp-final{text-align:center;background:var(--preto);border-radius:16px;margin:0 20px;padding:56px 24px;color:#fff;}
.lp-final h2{color:#fff;}
.lp-final p{color:#ccc;}

/* WhatsApp flutuante */
.lp-whats-float{position:fixed;right:18px;bottom:18px;background:var(--zap-txt);color:#fff;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 6px 18px -4px rgba(0,0,0,.35);z-index:500;transition:transform .15s;}
.lp-whats-float:hover{transform:scale(1.08);}
.lp-whats-float svg{width:28px;height:28px;}

@media (max-width:600px){
  .lp-hero{margin:16px 12px 0;width:calc(100% - 24px);min-height:520px;align-items:flex-end;}
  .lp-hero::before{background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.25) 35%,rgba(0,0,0,.75) 60%,rgba(0,0,0,.93) 100%);}
  .lp-hero__text{padding:28px 24px 32px;text-align:left;max-width:100%;}
  .lp-perso section{padding:40px 16px;}
  .lp-cat__grid{grid-template-columns:repeat(2,1fr);}
}