/*
Theme Name: Shippi
Theme URI: https://shippi.com.br
Author: DABS Design
Author URI: https://dabsdesign.com.br
Description: Tema do site institucional do Shippi, app de cálculo de frete na página do produto para lojas Shopify.
Version: 2.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: GPLv2 or later
Text Domain: shippi
*/

:root {
  --azul:        #1B4DC8;
  --azul-vivo:   #2A62E8;
  --azul-escuro: #0E2A6E;
  --azul-claro:  #EEF3FD;
  --acento:      #E5FF00;
  --tinta:       #101828;
  --tinta-2:     #16203A;
  --azul-noite:  #0B1F52;
  --cinza:       #5A6478;
  --cinza-claro: #9BA3B4;
  --linha:       #E4E9F2;
  --linha-esc:   rgba(255,255,255,.14);
  --papel:       #F7F8FB;
  --branco:      #FFFFFF;

  --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px;
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2.5rem; --s5: 4rem; --s6: 6.5rem;
  --larg: 1180px;
  --mola: cubic-bezier(.22,.9,.3,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0; color: var(--tinta); background: var(--branco);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
  outline: 3px solid var(--azul-vivo); outline-offset: 3px; border-radius: var(--r-sm);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.sp-pular { position:absolute; left:-9999px; background:var(--azul); color:var(--branco); padding:var(--s2) var(--s3); z-index:999; font-weight:600; }
.sp-pular:focus { left:0; top:0; }

.sp-wrap { width:100%; max-width:var(--larg); margin-inline:auto; padding-inline:clamp(1.25rem,5vw,2.5rem); }
.sp-estreito { max-width: 780px; }
.sp-centro { text-align:center; margin-inline:auto; }

/* ============================================================ tipografia */
h1,h2,h3 { margin:0 0 var(--s2); font-weight:700; line-height:1.08; letter-spacing:-.03em; }
h1 { font-size: clamp(2.5rem, 1.5rem + 4.2vw, 4.5rem); }
h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); }
h3 { font-size: 1.25rem; letter-spacing:-.015em; line-height:1.25; }
p { margin:0 0 var(--s2); }
.sp-lead { font-size: clamp(1.0625rem,1rem + .45vw,1.3125rem); line-height:1.55; color:var(--cinza); }
.sp-lead--esc { color: var(--cinza-claro); }

/* sobrancelha com marcadores, no ritmo do template de referência */
.sp-olho { display:flex; flex-wrap:wrap; gap:var(--s3); justify-content:center; margin:0 0 var(--s3); padding:0; list-style:none; }
.sp-olho li { display:flex; align-items:center; gap:.45rem; font-size:.8125rem; font-weight:500; color:var(--cinza-claro); }
.sp-olho li::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--azul-vivo); flex:none; }
.sp-olho--claro li { color:var(--cinza); }
.sp-olho--claro li::before { background:var(--azul); }

.sp-rotulo { font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--azul); margin:0 0 var(--s2); }
.sp-rotulo--esc { color:#8FB4FF; }

.sp-marca {
  background: linear-gradient(to top, rgba(27,77,200,.22) 0 .34em, transparent .34em);
  box-shadow: inset 0 -.34em 0 rgba(27,77,200,.22);
  padding-inline:.06em;
}
.sp-escuro .sp-marca, .sp-heroi .sp-marca {
  background: linear-gradient(to top, rgba(96,145,255,.3) 0 .34em, transparent .34em);
  box-shadow:none; color:#CFE0FF;
}

/* ============================================================ navegação */
.sp-topo {
  position:sticky; top:0; z-index:60; background:rgba(10,12,12,.86);
  backdrop-filter:saturate(1.6) blur(14px); border-bottom:1px solid var(--linha-esc);
}
.sp-topo__in { display:flex; align-items:center; gap:var(--s3); min-height:72px; }
.sp-topo__logo img { height:24px; width:auto; }
.sp-nav { display:flex; align-items:center; gap:var(--s3); margin-left:auto; }
.sp-nav__links { display:flex; gap:var(--s3); }
.sp-nav__links a {
  position:relative; color:#C9CFDB; text-decoration:none; font-size:.9375rem; font-weight:500;
  padding-block:.35rem; transition:color 160ms var(--mola);
}
.sp-nav__links a::after {
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--azul-vivo); transition:right 220ms var(--mola);
}
.sp-nav__links a:hover { color:var(--branco); }
.sp-nav__links a:hover::after { right:0; }
/* Em tela estreita os links viram uma faixa rolavel sob a logo,
   em vez de sumirem sem nenhum menu no lugar. */
@media (max-width:860px) {
  .sp-topo__in { flex-wrap:wrap; min-height:0; padding-block:.75rem; row-gap:.5rem; }
  .sp-nav { margin-left:auto; }
  .sp-nav__links {
    order:3; flex-basis:100%; gap:1.15rem; overflow-x:auto; padding-bottom:.35rem;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .sp-nav__links::-webkit-scrollbar { display:none; }
  .sp-nav__links a { white-space:nowrap; font-size:.875rem; }
  .sp-btn { padding:.65rem 1.1rem; font-size:.875rem; }
}

/* ============================================================ botões */
.sp-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font:inherit; font-weight:600; font-size:.9375rem; line-height:1;
  padding:.8rem 1.35rem; border-radius:999px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition: transform 180ms var(--mola), background-color 160ms var(--mola), border-color 160ms var(--mola), box-shadow 180ms var(--mola);
}
.sp-btn:active { transform:translateY(1px); }
.sp-btn--primario { background:var(--azul); color:var(--branco); box-shadow:0 1px 2px rgba(10,12,12,.2); }
.sp-btn--primario:hover { background:var(--azul-vivo); transform:translateY(-2px); box-shadow:0 10px 24px -10px rgba(42,98,232,.7); }
.sp-btn--volt { background:var(--azul); color:var(--branco); }
.sp-btn--volt:hover { background:var(--azul-vivo); transform:translateY(-2px); box-shadow:0 12px 28px -10px rgba(42,98,232,.75); }
.sp-btn--fantasma { background:transparent; color:#C9CFDB; border-color:var(--linha-esc); }
.sp-btn--fantasma:hover { color:var(--branco); border-color:rgba(255,255,255,.4); }
.sp-btn--contorno { background:var(--branco); color:var(--tinta); border-color:var(--linha); }
.sp-btn--contorno:hover { border-color:var(--azul); color:var(--azul); transform:translateY(-2px); }
.sp-btn--g { padding:1rem 1.75rem; font-size:1rem; }
.sp-btn .sp-seta { transition:transform 200ms var(--mola); }
.sp-btn:hover .sp-seta { transform:translateX(3px); }

/* ============================================================ bandas */
.sp-sec { padding-block: clamp(4rem,8vw,7rem); }
.sp-sec--papel { background:var(--papel); }
.sp-sec--azul  { background:var(--azul-claro); }
.sp-escuro { background:var(--tinta); color:var(--branco); }
.sp-escuro h1,.sp-escuro h2,.sp-escuro h3 { color:var(--branco); }
.sp-cab { max-width:720px; margin-bottom:var(--s5); }
.sp-cab--centro { margin-inline:auto; text-align:center; }

/* ============================================================ herói */
.sp-heroi { background:var(--tinta); color:var(--branco); padding-block: clamp(3rem,6vw,5rem) 0; position:relative; }
.sp-heroi h1 { max-width:16ch; margin-inline:auto; }
.sp-heroi .sp-lead { max-width:56ch; margin-inline:auto; color:var(--cinza-claro); }
.sp-heroi__acoes { display:flex; flex-wrap:wrap; gap:var(--s2); justify-content:center; margin-top:var(--s4); }
.sp-heroi__nota { margin-top:var(--s3); font-size:.875rem; color:#6E7686; }
.sp-heroi__palco { margin-top:clamp(2.5rem,5vw,4rem); position:relative; }
/* a demonstração encosta no fim da banda escura e invade a seção seguinte */
.sp-heroi__palco { position:relative; z-index:2; padding-bottom:clamp(2.5rem,5vw,4rem); }
.sp-sec--apos-palco { padding-top: clamp(3.5rem,7vw,6rem); }

/* ============================================================ moldura */
.sp-quadro {
  /* A moldura fica dentro da banda escura, entao precisa recuperar a cor do texto. */
  color:var(--tinta);
  border-radius:var(--r-xl); background:var(--branco); overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.65), 0 2px 0 rgba(255,255,255,.06) inset;
  max-width:980px; margin-inline:auto;
}
.sp-quadro--claro { border-color:var(--linha); box-shadow:0 2px 4px rgba(10,12,12,.04), 0 24px 50px -24px rgba(10,12,12,.22); }
.sp-quadro__barra { display:flex; align-items:center; gap:6px; padding:12px 16px; border-bottom:1px solid var(--linha); background:#FBFCFE; }
.sp-quadro__ponto { width:9px; height:9px; border-radius:50%; background:#DDE3EE; }
.sp-quadro__url { margin-left:10px; font-size:12px; color:var(--cinza); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

/* ============================================================ grade de pares */
.sp-par { display:grid; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
@media (min-width:900px){
  .sp-par { grid-template-columns:1fr 1fr; }
  .sp-par--inverso .sp-par__txt { order:2; }
}
.sp-par + .sp-par { margin-top:clamp(3rem,6vw,5rem); padding-top:clamp(3rem,6vw,5rem); border-top:1px solid var(--linha); }
.sp-escuro .sp-par + .sp-par { border-top-color:var(--linha-esc); }
.sp-passo__n {
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:50%; background:var(--azul); color:var(--branco);
  font-size:.9375rem; font-weight:700; margin-bottom:var(--s2);
}

/* ============================================================ listas */
.sp-lista { list-style:none; margin:0; padding:0; display:grid; gap:var(--s2); }
.sp-lista li { position:relative; padding-left:1.9rem; color:var(--cinza); }
.sp-lista li::before {
  content:""; position:absolute; left:0; top:.42em; width:16px; height:9px;
  border-left:2.5px solid var(--azul-vivo); border-bottom:2.5px solid var(--azul-vivo);
  transform:rotate(-45deg); border-radius:1px;
}
.sp-lista strong { color:var(--tinta); font-weight:600; }
.sp-escuro .sp-lista li { color:var(--cinza-claro); }
.sp-escuro .sp-lista strong { color:var(--branco); }

/* ============================================================ preço */
.sp-preco {
  max-width:480px; margin-inline:auto; border:1px solid var(--linha); border-radius:var(--r-lg);
  padding:clamp(1.75rem,4vw,2.5rem); background:var(--branco); text-align:left;
  box-shadow:0 2px 4px rgba(10,12,12,.03), 0 24px 48px -28px rgba(10,12,12,.28);
}
.sp-preco__selo { display:inline-block; background:var(--acento); color:var(--tinta); font-size:.8125rem; font-weight:700; padding:.35rem .7rem; border-radius:999px; margin-bottom:var(--s3); }
.sp-preco__valor { display:flex; align-items:baseline; gap:.4rem; }
.sp-preco__num { font-size:3.25rem; font-weight:700; letter-spacing:-.04em; line-height:1; }
.sp-preco__per { color:var(--cinza); font-size:1rem; }
.sp-preco__alt { color:var(--cinza); font-size:.9375rem; margin:.6rem 0 var(--s3); }

/* ============================================================ perguntas */
.sp-faq { display:grid; gap:var(--s2); max-width:820px; margin-inline:auto; }
.sp-faq details {
  border:1px solid var(--linha); border-radius:var(--r-md); background:var(--branco);
  transition:border-color 180ms var(--mola), box-shadow 180ms var(--mola);
}
.sp-faq details:hover { border-color:#C9D3E6; box-shadow:0 10px 24px -18px rgba(10,12,12,.4); }
.sp-faq details[open] { border-color:var(--azul); }
.sp-faq summary { cursor:pointer; list-style:none; padding:1.1rem 3rem 1.1rem 1.25rem; font-weight:600; font-size:1.0625rem; position:relative; }
.sp-faq summary::-webkit-details-marker { display:none; }
.sp-faq summary::after {
  content:""; position:absolute; right:1.25rem; top:50%; width:11px; height:11px;
  border-right:2px solid var(--azul); border-bottom:2px solid var(--azul);
  transform:translateY(-70%) rotate(45deg); transition:transform 220ms var(--mola);
}
.sp-faq details[open] summary::after { transform:translateY(-30%) rotate(-135deg); }
.sp-faq__corpo { padding:0 1.25rem 1.25rem; color:var(--cinza); max-width:70ch; }

/* ============================================================ rodapé */
.sp-rodape { background:var(--tinta); color:var(--cinza-claro); padding-block:var(--s6) var(--s4); font-size:.9375rem; }
.sp-rodape a { color:var(--branco); text-decoration:none; transition:color 160ms var(--mola); }
.sp-rodape a:hover { color:#8FB4FF; }
.sp-rodape__grade { display:grid; gap:var(--s4); }
@media (min-width:760px){ .sp-rodape__grade { grid-template-columns:2fr 1fr 1fr; } }
.sp-rodape h3 { font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--branco); margin-bottom:var(--s2); }
.sp-rodape ul { list-style:none; margin:0; padding:0; display:grid; gap:.65rem; }
.sp-rodape__fim { margin-top:var(--s5); padding-top:var(--s3); border-top:1px solid var(--linha-esc); font-size:.8125rem; color:#6E7686; }

/* ============================================================ conteúdo */
.sp-conteudo { max-width:72ch; }
.sp-conteudo h2 { margin-top:var(--s4); }
.sp-conteudo h3 { margin-top:var(--s3); }
.sp-conteudo p { color:var(--cinza); }
.sp-conteudo ul, .sp-conteudo ol { padding-left:1.25rem; color:var(--cinza); }
.sp-conteudo li { margin-bottom:.4rem; }
.sp-conteudo table { width:100%; border-collapse:collapse; margin:var(--s3) 0; font-size:.9375rem; }
.sp-conteudo th, .sp-conteudo td { text-align:left; padding:.75rem .6rem; border-bottom:1px solid var(--linha); vertical-align:top; }
.sp-conteudo th { font-weight:600; }

/* ===============================================================
   DEMONSTRAÇÃO DA CALCULADORA
   Não é imagem nem GIF: é a interface do widget em HTML e CSS.
   A animação existe para mostrar o produto funcionando. Quem pede
   menos movimento recebe o estado final, completo e parado.
================================================================ */
.sp-demo { --passo: 11s; container-type: inline-size; }
.sp-demo__pagina { display:grid; gap:clamp(1rem,2.4vw,1.6rem); padding:clamp(1rem,2.4vw,1.6rem); }
@container (min-width: 560px) { .sp-demo__pagina { grid-template-columns:.9fr 1fr; align-items:start; } }
@supports not (container-type: inline-size) {
  @media (min-width:860px){ .sp-demo__pagina { grid-template-columns:.9fr 1fr; align-items:start; } }
}

/* o produto no padrão das páginas institucionais: painel suave, sombra de estúdio */
.sp-demo__foto {
  aspect-ratio:1/1; max-height:360px; border-radius:var(--r-lg); background:#EDF1F9;
  display:grid; place-items:center; overflow:hidden; position:relative;
}
.sp-demo__foto svg { width:84%; height:auto; filter:drop-shadow(0 18px 22px rgba(10,12,12,.18)); }
.sp-demo__chip {
  position:absolute; background:var(--branco); border-radius:999px;
  box-shadow:0 8px 20px -8px rgba(10,12,12,.3); padding:.4rem .7rem;
  font-size:.6875rem; font-weight:600; display:flex; align-items:center; gap:.35rem;
}
.sp-demo__chip--1 { top:9%; right:7%; }
.sp-demo__chip--2 { bottom:9%; left:7%; }
.sp-demo__chip i { width:7px; height:7px; border-radius:50%; background:var(--azul); flex:none; }
.sp-demo__chip--2 i { background:#14A06B; }

.sp-demo__titulo { color:var(--tinta); font-size:1.0625rem; font-weight:600; margin:0 0 .2rem; letter-spacing:-.015em; }
.sp-demo__avaliacao { font-size:.75rem; color:var(--cinza); margin:0 0 .5rem; letter-spacing:.06em; }
.sp-demo__preco { color:var(--tinta); font-size:1.5rem; font-weight:700; letter-spacing:-.03em; margin:0 0 var(--s2); }
.sp-demo__comprar {
  display:block; width:100%; text-align:center; background:var(--tinta); color:var(--branco);
  border-radius:var(--r-sm); padding:.75rem 1rem; font-weight:600; font-size:.875rem; margin-bottom:var(--s3);
}

.sp-demo__bloco { border:1px solid var(--linha); border-radius:var(--r-md); padding:1rem; background:var(--branco); }
.sp-demo__rotulo { color:var(--tinta); font-size:.8125rem; font-weight:600; margin:0 0 .6rem; }
.sp-demo__linha { display:flex; gap:.5rem; }
.sp-demo__campo {
  color:var(--tinta); flex:1; border:1px solid var(--linha); border-radius:var(--r-sm); padding:.5rem .65rem;
  font-size:.875rem; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  min-height:38px; display:flex; align-items:center;
}
.sp-demo__btn { background:var(--azul); color:var(--branco); border-radius:var(--r-sm); padding:.5rem .95rem; font-weight:600; font-size:.8125rem; white-space:nowrap; display:flex; align-items:center; }
.sp-demo__cep { overflow:hidden; white-space:nowrap; }
.sp-demo__cep span { display:inline-block; opacity:0; }
.sp-demo__cursor { display:inline-block; width:1.5px; height:1em; background:var(--azul); margin-left:1px; vertical-align:-.12em; animation:sp-piscar 1s steps(1,end) infinite; }

.sp-demo__res { margin-top:.75rem; display:grid; gap:.4rem; }
.sp-demo__opcao { display:flex; align-items:center; justify-content:space-between; gap:var(--s2); border:1px solid var(--linha); border-radius:var(--r-sm); padding:.6rem .75rem; opacity:0; }
.sp-demo__opcao b { color:var(--tinta); display:block; font-size:.8125rem; font-weight:600; }
.sp-demo__opcao small { display:block; font-size:.75rem; color:var(--cinza); }
.sp-demo__valor { color:var(--tinta); font-size:.875rem; font-weight:700; white-space:nowrap; }
.sp-demo__valor--gratis { color:#14A06B; }
.sp-demo__carregando { display:flex; align-items:center; gap:.5rem; font-size:.8125rem; color:var(--cinza); opacity:0; }
.sp-demo__giro { width:13px; height:13px; border-radius:50%; border:2px solid var(--linha); border-top-color:var(--azul); animation:sp-girar .7s linear infinite; }

@keyframes sp-piscar { 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes sp-girar { to { transform:rotate(360deg) } }
.sp-demo__cep span { animation:sp-surgir var(--passo) steps(1,end) infinite; }
@keyframes sp-surgir { 0%{opacity:0} 12%,95%{opacity:1} 96%,100%{opacity:0} }
.sp-demo__cep span:nth-child(1){animation-delay:calc(var(--passo)*.02)}
.sp-demo__cep span:nth-child(2){animation-delay:calc(var(--passo)*.04)}
.sp-demo__cep span:nth-child(3){animation-delay:calc(var(--passo)*.06)}
.sp-demo__cep span:nth-child(4){animation-delay:calc(var(--passo)*.08)}
.sp-demo__cep span:nth-child(5){animation-delay:calc(var(--passo)*.10)}
.sp-demo__cep span:nth-child(6){animation-delay:calc(var(--passo)*.12)}
.sp-demo__cep span:nth-child(7){animation-delay:calc(var(--passo)*.14)}
.sp-demo__cep span:nth-child(8){animation-delay:calc(var(--passo)*.16)}
.sp-demo__cep span:nth-child(9){animation-delay:calc(var(--passo)*.18)}
.sp-demo__btn { animation:sp-pressionar var(--passo) ease-in-out infinite; }
@keyframes sp-pressionar { 0%,24%{background:var(--azul);transform:none} 27%{background:var(--azul-escuro);transform:scale(.97)} 30%,100%{background:var(--azul);transform:none} }
.sp-demo__carregando { animation:sp-carregar var(--passo) linear infinite; }
@keyframes sp-carregar { 0%,27%{opacity:0;height:0;margin-top:0} 30%,37%{opacity:1;height:auto;margin-top:.75rem} 40%,100%{opacity:0;height:0;margin-top:0} }
.sp-demo__opcao { animation:sp-entrar var(--passo) ease-out infinite; }
@keyframes sp-entrar { 0%,40%{opacity:0;transform:translateY(8px)} 46%,93%{opacity:1;transform:none} 97%,100%{opacity:0;transform:translateY(8px)} }
.sp-demo__opcao:nth-child(2){animation-delay:calc(var(--passo)*.025)}
.sp-demo__opcao:nth-child(3){animation-delay:calc(var(--passo)*.05)}

@media (prefers-reduced-motion: reduce) {
  .sp-demo__cep span,.sp-demo__btn,.sp-demo__opcao,.sp-demo__cursor,.sp-demo__giro { animation:none !important; }
  .sp-demo__cep span { opacity:1 }
  .sp-demo__opcao { opacity:1; transform:none }
  .sp-demo__carregando, .sp-demo__cursor { display:none }
}

/* ---- telas do app ---- */
.sp-tela { font-size:.8125rem; }
.sp-tela__barra { display:flex; align-items:center; gap:.5rem; padding:.75rem 1rem; border-bottom:1px solid var(--linha); background:#FBFCFE; font-weight:600; font-size:.75rem; color:var(--cinza); }
.sp-tela__corpo { padding:1.25rem; display:grid; gap:.75rem; }
.sp-tela__item { display:flex; align-items:center; gap:.6rem; border:1px solid var(--linha); border-radius:var(--r-sm); padding:.6rem .75rem; transition:border-color 180ms var(--mola), transform 180ms var(--mola); }
.sp-tela__item:hover { transform:translateX(3px); border-color:#C9D3E6; }
.sp-tela__item--ativo { border-color:var(--azul); box-shadow:0 0 0 3px rgba(27,77,200,.12); }
.sp-tela__arrasta { width:14px; height:14px; flex:none; border-radius:2px; background:repeating-linear-gradient(to bottom,var(--linha) 0 2px,transparent 2px 4px); }
.sp-tela__campo { border:1px solid var(--linha); border-radius:var(--r-sm); padding:.5rem .65rem; font-size:.8125rem; color:var(--cinza); background:var(--branco); }
.sp-tela__cores { display:flex; gap:.4rem; }
.sp-tela__cor { width:22px; height:22px; border-radius:6px; border:1px solid rgba(0,0,0,.1); }
.sp-tela__rot { font-size:.6875rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--cinza); margin:0 0 .3rem; }

/* a logo é azul; na barra escura ela vira branca sem precisar de um segundo arquivo */
.sp-logo-branca { filter: brightness(0) invert(1); }

/* ===============================================================
   MOVIMENTO NA ROLAGEM
   Usa animações guiadas pela rolagem do próprio CSS. Onde o
   navegador não suporta, o conteúdo simplesmente aparece normal,
   sem JavaScript e sem nada quebrado.
================================================================ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sp-reveal {
      animation: sp-revelar linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 32%;
    }
    @keyframes sp-revelar {
      from { opacity:0; transform:translateY(26px); }
      to   { opacity:1; transform:none; }
    }


    /* as capturas entram pelo lado que faz sentido no par */
    .sp-par__fig {
      animation: sp-deslizar linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 38%;
    }
    @keyframes sp-deslizar {
      from { opacity:0; transform:translateX(34px); }
      to   { opacity:1; transform:none; }
    }
    .sp-par--inverso .sp-par__fig { animation-name: sp-deslizar-esq; }
    @keyframes sp-deslizar-esq {
      from { opacity:0; transform:translateX(-34px); }
      to   { opacity:1; transform:none; }
    }

    /* a barra de progresso mostra o quanto falta da página */
    .sp-progresso {
      position:fixed; top:0; left:0; height:3px; width:100%;
      background:var(--azul-vivo); transform-origin:0 50%; z-index:70;
      animation: sp-progredir linear both;
      animation-timeline: scroll(root);
    }
    @keyframes sp-progredir { from { transform:scaleX(0) } to { transform:scaleX(1) } }
  }
}
.sp-progresso { display:none; }
@supports (animation-timeline: scroll(root)) {
  @media (prefers-reduced-motion: no-preference) { .sp-progresso { display:block; } }
}

/* ===============================================================
   MENU HAMBÚRGUER
   Um <details> nativo: abre e fecha pelo teclado, sem JavaScript.
================================================================ */
.sp-burger { display:none; margin-left:auto; position:relative; }
.sp-burger > summary {
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--r-md); border:1px solid var(--linha-esc);
}
.sp-burger > summary::-webkit-details-marker { display:none; }
.sp-burger__traco { position:relative; width:20px; height:2px; background:var(--branco); border-radius:2px; transition:background 160ms var(--mola); }
.sp-burger__traco::before, .sp-burger__traco::after {
  content:""; position:absolute; left:0; width:20px; height:2px; background:var(--branco); border-radius:2px;
  transition: transform 220ms var(--mola), top 220ms var(--mola);
}
.sp-burger__traco::before { top:-7px; }
.sp-burger__traco::after  { top:7px; }
.sp-burger[open] .sp-burger__traco { background:transparent; }
.sp-burger[open] .sp-burger__traco::before { top:0; transform:rotate(45deg); }
.sp-burger[open] .sp-burger__traco::after  { top:0; transform:rotate(-45deg); }

.sp-burger__painel {
  position:absolute; right:0; top:calc(100% + 10px); min-width:230px;
  background:var(--tinta-2); border:1px solid var(--linha-esc); border-radius:var(--r-lg);
  padding:.5rem; box-shadow:0 24px 50px -18px rgba(0,0,0,.7);
  display:grid; gap:.15rem;
}
.sp-burger__painel a { color:#D5DAE5; text-decoration:none; font-size:.9375rem; font-weight:500; padding:.7rem .85rem; border-radius:var(--r-sm); }
.sp-burger__painel a:hover { background:rgba(255,255,255,.07); color:var(--branco); }
.sp-burger__painel .sp-btn { margin-top:.4rem; }

@media (max-width:900px) {
  .sp-nav__links { display:none; }
  .sp-nav > .sp-btn { display:none; }
  .sp-burger { display:block; }
}

/* ===============================================================
   FOTO REAL DO PRODUTO NO MOCKUP
================================================================ */
.sp-demo__foto { background:#E7EEF7; }
.sp-demo__foto img { width:100%; height:100%; object-fit:cover; }

/* ===============================================================
   CAPTURAS REAIS
================================================================ */
.sp-par__fig { margin:0; }
.sp-captura { border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--linha); background:var(--branco); box-shadow:0 2px 4px rgba(16,24,40,.04), 0 24px 50px -26px rgba(16,24,40,.3); }
.sp-captura img { width:100%; }
.sp-legenda { margin-top:.75rem; font-size:.8125rem; color:var(--cinza); }

/* ===============================================================
   RODAPÉ: ASSINATURA DA DABS
================================================================ */
.sp-dabs { display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; margin-top:var(--s3); }
.sp-dabs img { height:22px; width:auto; filter:brightness(0) invert(1); opacity:.92; }
.sp-dabs span { font-size:.875rem; color:var(--cinza-claro); }

/* bloco final de contato com a agência */
.sp-agencia {
  border:1px solid var(--linha-esc); border-radius:var(--r-xl);
  padding:clamp(1.75rem,4vw,2.75rem); background:var(--tinta-2);
  display:grid; gap:var(--s3); align-items:center; margin-top:var(--s5);
}
@media (min-width:820px){ .sp-agencia { grid-template-columns:1fr auto; } }
.sp-agencia img { height:26px; width:auto; filter:brightness(0) invert(1); margin-bottom:.9rem; }
.sp-agencia h3 { color:var(--branco); margin-bottom:.4rem; }
.sp-agencia p { color:var(--cinza-claro); margin:0; max-width:52ch; }

/* ===============================================================
   EDITOR DE TEMA
   Recriação legível do editor da Shopify: lista de blocos à
   esquerda, prévia da página à direita, bloco do Shippi destacado.
================================================================ */
.sp-editor { container-type: inline-size; }
.sp-editor__corpo { display:grid; }
.sp-editor__mini { container-type: inline-size; }
@container (min-width: 460px) { .sp-editor__corpo { grid-template-columns:minmax(0,1fr) minmax(0,.9fr); } }
@supports not (container-type: inline-size) {
  @media (min-width:1100px){ .sp-editor__corpo { grid-template-columns:minmax(0,1fr) minmax(0,.9fr); } }
}

.sp-editor__painel { padding:1rem; border-right:1px solid var(--linha); background:#FCFDFF; }
.sp-editor__secao { font-size:.6875rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--cinza); margin:0 0 .6rem; }
.sp-editor__item {
  display:flex; align-items:center; gap:.5rem; font-size:.8125rem; color:var(--tinta);
  padding:.5rem .6rem; border-radius:var(--r-sm); border:1px solid transparent;
}
.sp-editor__item--pai { font-weight:600; }
.sp-editor__filho { margin-left:.9rem; }
.sp-editor__item--ativo {
  border-color:var(--azul); background:rgba(27,77,200,.06);
  box-shadow:0 0 0 3px rgba(27,77,200,.1); font-weight:600;
}
.sp-editor__pegar { width:11px; height:13px; flex:none; border-radius:2px; background:repeating-linear-gradient(to bottom, #C7D0E0 0 2px, transparent 2px 4px); }
.sp-editor__selo { margin-left:auto; font-size:.625rem; font-weight:700; letter-spacing:.04em; color:var(--azul); background:rgba(27,77,200,.1); padding:.15rem .4rem; border-radius:4px; }
.sp-editor__add { font-size:.8125rem; color:var(--azul); margin:.75rem 0 0 .9rem; font-weight:600; }

.sp-editor__previa { padding:1rem; background:#F1F4F9; display:grid; place-items:start stretch; }
.sp-editor__mini { background:var(--branco); border-radius:var(--r-sm); padding:.75rem; display:grid; gap:.75rem; }
@container (min-width: 620px) { .sp-editor__mini { grid-template-columns:.8fr 1fr; } }
.sp-editor__mini-foto { aspect-ratio:4/5; border-radius:6px; background:#DDE5F2; }
.sp-editor__mini-col { display:grid; gap:.45rem; align-content:start; }
.sp-editor__barra-txt { display:block; height:9px; border-radius:4px; background:#E7ECF5; }
.sp-editor__mini-btn { display:block; text-align:center; background:var(--tinta); color:var(--branco); font-size:.625rem; font-weight:600; padding:.4rem; border-radius:5px; margin:.2rem 0; }
.sp-editor__mini-shippi { border:1.5px solid var(--azul); border-radius:6px; padding:.45rem; background:rgba(27,77,200,.04); }
.sp-editor__mini-rot { display:block; font-size:.5625rem; font-weight:600; margin-bottom:.3rem; color:var(--tinta); }
.sp-editor__mini-linha { display:flex; gap:.25rem; }
.sp-editor__mini-campo { flex:1; border:1px solid var(--linha); border-radius:4px; padding:.25rem .3rem; font-size:.5625rem; color:var(--cinza); background:var(--branco); font-family:ui-monospace,Menlo,monospace; }
.sp-editor__mini-cta { background:var(--azul); color:var(--branco); border-radius:4px; padding:.25rem .4rem; font-size:.5625rem; font-weight:600; }
.sp-aviso {
  margin:0; padding:.55rem .7rem; border-radius:var(--r-sm);
  background:rgba(27,77,200,.07); border:1px solid rgba(27,77,200,.18);
  font-size:.75rem; color:var(--azul-escuro); font-weight:500;
}