/* Promoção Samsung Health · Setembro em Movimento
   Estilos compartilhados por todas as telas. Extraído do protótipo. */

@font-face{font-family:'SamsungOne';src:url('../../assets/fonts/SamsungOne-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'SamsungOne';src:url('../../assets/fonts/SamsungOne-700.ttf') format('truetype');font-weight:500 700;font-display:swap}
@font-face{font-family:'SamsungSharpSans';src:url('../../assets/fonts/SamsungSharpSans-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
html{background:#fff}
body{margin:0;background:#fff;font-family:'SamsungOne',system-ui,sans-serif;color:#1a1a1a;-webkit-font-smoothing:antialiased}
a{color:#0392e4}a:hover{color:#0281c9}
*{box-sizing:border-box}
.lp-root{container-type:inline-size;container-name:lp}
@container lp (max-width:720px){.passos-grid{grid-template-columns:repeat(4,1fr) !important;gap:6px !important}}
@container lp (max-width:760px){.insta-grid{grid-template-columns:1fr !important}}
@container lp (max-width:640px){
  .hdr-nav{display:none !important}
  .hdr-menu{display:flex !important}
  .hero-grid{grid-template-columns:1fr !important}
  .hero-h1{font-size:clamp(36px,10cqw,48px) !important;text-wrap:balance !important}
  .hero-sub{font-size:clamp(16px,4.4cqw,19px) !important;font-weight:600 !important}
  .hero-p{font-size:clamp(14px,3.7cqw,15.5px) !important}
  .tt-sec,.tt-mod{font-size:clamp(24px,6.6cqw,30px) !important;line-height:1.16 !important}
  .lp-root p,.mod-txt>div[style*="font: 400"]{font-size:15px !important}
  .hdr-compacta{padding:11px 14px !important;gap:10px !important;justify-content:space-between !important}
  .hdr-acoes{display:none !important}
  .hdr-menu{display:flex !important;padding:14px 16px !important;margin-left:auto !important}
  .menu-acoes{display:flex !important}
  .rodape-links{gap:0 !important}
  .rodape-links>div[style*="cursor: pointer"],.rodape-links>div[style*="cursor:pointer"]{padding:14px 0 !important;border-bottom:1px solid rgba(26,26,26,.06) !important}
  .rodape-links>div:first-child{padding-bottom:8px !important}
  .mod-scrim{background:linear-gradient(180deg,rgba(8,10,12,.94) 0%,rgba(8,10,12,.84) 42%,rgba(8,10,12,.5) 72%,rgba(8,10,12,.28) 100%) !important}
  .mod-txt{align-items:flex-start !important;text-align:left !important;justify-content:flex-start !important;padding-top:clamp(28px,7cqw,40px) !important}
  .mod-txt>div[style*="justify-content:flex-end"],.mod-txt>div[style*="justify-content: flex-end"]{justify-content:flex-start !important}
  .mod-foto{align-items:flex-start !important;min-height:clamp(430px,116cqw,560px) !important}
  .premios-grid{display:flex !important;grid-template-columns:none !important;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:14px;gap:12px !important;margin:0 -14px !important;padding:2px 14px 12px !important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .premios-grid::-webkit-scrollbar{display:none}
  .premios-bullets{display:flex !important}
  .premios-grid>div{flex:0 0 82% !important;scroll-snap-align:start;transform:none !important;opacity:1 !important}
  .num-grid{column-gap:10px !important}
  .num-grid [data-contador]{font-size:clamp(38px,11cqw,54px) !important}
  .num-grid [data-sinal]{font-size:clamp(20px,6cqw,28px) !important}
  .num-grid [data-contador="8"]{padding:10px 16px !important}
}
@container lp (max-width:640px){
  .passos-grid{grid-template-columns:repeat(4,1fr) !important;gap:5px !important}
  .passos-grid>div{gap:9px !important;min-width:0 !important;overflow-wrap:anywhere}
  .passos-grid>div>div:first-child{width:clamp(44px,12.4cqw,58px) !important;height:clamp(44px,12.4cqw,58px) !important;font-size:clamp(17px,4.6cqw,21px) !important}
  .passos-grid>div>div:nth-child(2){font-size:clamp(9.5px,2.6cqw,11.5px) !important;line-height:1.3 !important;max-width:none !important;width:100% !important}
  .passos-grid>div>div:nth-child(3){display:none !important}
}
[data-contador]{transition:transform .5s ease}
[style*="font: 500 12px"]>span[style*="cursor: pointer"]{transition:color .2s ease}
[style*="font: 500 12px"]>span[style*="cursor: pointer"]:hover{color:#0281c9}
[style*="cursor: pointer"] img[src*="logo.png"]{transition:opacity .2s ease}
[style*="cursor: pointer"]:hover>img[src*="logo.png"]{opacity:.75}
@media print{[data-anima]>*,[data-anima-item]{animation:none !important;opacity:1 !important;transform:none !important}}
@media (prefers-reduced-motion:reduce){[data-anima]>*,[data-anima-item]{animation:none !important;opacity:1 !important;transform:none !important}}

/* --- adições do fatiamento --- */
[data-ir],[data-secao],[data-acao],[data-faq]{cursor:pointer}
[data-ir]:focus-visible,[data-secao]:focus-visible,[data-acao]:focus-visible,[data-faq]:focus-visible{outline:2px solid #0392e4;outline-offset:3px;border-radius:6px}
main{display:block}

[id^="sec-"],[id^="reg-"]{scroll-margin-top:72px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* ==================================================================
   Controles de formulário
   Anexado por ferramentas/formularios.py. Reproduz exatamente o visual
   das caixas decorativas do protótipo, e acrescenta o que um campo real
   precisa e um <div> não tinha: foco visível, placeholder e estado de erro.
   ================================================================== */

.rotulo{
  display:block;
  font:600 9.5px 'SamsungOne',system-ui,sans-serif;
  letter-spacing:.14em;color:#8a8a8a;margin-bottom:7px;
}

.campo{
  display:block;width:100%;height:48px;
  border:1px solid rgba(26,26,26,.13);border-radius:16px;background:#fbfdfe;
  padding:0 16px;
  font:400 14px 'SamsungOne',system-ui,sans-serif;color:#1a1a1a;
  outline:none;-webkit-appearance:none;appearance:none;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.campo::placeholder{color:#b4bcc2}
.campo:hover{border-color:rgba(26,26,26,.24)}
.campo:focus{border-color:#0392e4;box-shadow:0 0 0 3px rgba(3,146,228,.14)}
.campo:disabled{background:#f0f2f4;color:#a8b0b6;cursor:not-allowed}

/* Safari em iOS aplica estilo próprio em date; isto normaliza a altura. */
.campo[type=date]{line-height:46px;min-height:48px}

.campo-alto{height:auto;min-height:140px;padding:14px 16px;line-height:1.6;resize:vertical}

.campo-select{
  cursor:pointer;padding-right:42px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%238a8a8a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
}
.campo-select:invalid{color:#b4bcc2}

/* O input de arquivo continua existindo e sendo enviado no submit; quem
   aparece é a área tracejada, que é o <label> dele. Não usamos display:none
   porque isso o tira da ordem de tabulação e do alcance do teclado. */
.campo-arquivo{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.campo-arquivo:focus-visible + label{outline:2px solid #0392e4;outline-offset:3px}
.arquivo-nome:not(:empty){
  display:block;margin-top:10px;
  font:600 11.5px 'SamsungOne',system-ui,sans-serif;color:#0392e4;
  word-break:break-all;
}

/* O checkbox de aceite é real e é enviado no POST; quem aparece é o
   quadrado desenhado ao lado. Não usamos display:none porque isso o
   tiraria da ordem de tabulação e do alcance do teclado. */
.aceite-input{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.aceite-input:focus-visible + div{outline:2px solid #0392e4;outline-offset:2px}

/* Erro. A mensagem só ocupa espaço quando tem texto. */
.campo-invalido{border-color:#d64545;background:#fefafa}
.campo-invalido:focus{border-color:#d64545;box-shadow:0 0 0 3px rgba(214,69,69,.14)}
.erro-campo{
  font:500 11.5px/1.5 'SamsungOne',system-ui,sans-serif;color:#d64545;margin-top:6px;
}
.erro-campo:empty{display:none}

/* ------------------------------------------- esquema de cor da página */

/* O layout existe só em claro: fundo branco, texto escuro, azul da marca.
   Sem esta declaração, o Samsung Internet e o Chrome no Android aplicam o
   "modo escuro automático" — invertem as cores por conta própria e o
   resultado é o cinza chapado que a promoção não tem. `only light` é o
   opt-out documentado: diz ao navegador que a página não tem versão escura
   e que ele não deve inventar uma.

   Se um dia existir tema escuro de verdade, isto vira `light dark` e o CSS
   ganha as variantes — não se resolve deixando o navegador adivinhar. */
:root { color-scheme: only light; }