/* ===== THEME TOKENS (dark como padrão) ===== */
:root{
  /* Fundo / superfícies */
  --fz-bg:        #0B0B10;
  --fz-surface:   #11121A;
  --fz-surface-2: #171826;
    /* Borda */
  --fz-border: rgba(255,255,255,.08);

  /* Texto */
  --fz-text:      #E9EBF4;
  --fz-text-dim:  #B6BBD0;

  /* Marca */
  --fz-primary:   #7A5FA7;

  /* Footer – Light */
  --footer-bg-1: #f6f7fb;
  --footer-bg-2: #eceff5;
  --footer-fg:   #1E2030;
  --footer-muted:#5c5f7a;
  --footer-link: #4B3AA9;
  --footer-link-hover:#38298F;
  --footer-border: rgba(16,16,24,.06);
  --footer-accent: rgba(107,79,199,.18); /* para glow suave */
  --fz-link:        #7154ee; /* bom contraste no dark */
  --fz-link-hover:  #4b3fa7;

  --bg:      var(--fz-bg);
  --card:    var(--fz-surface);
  --surface: var(--fz-surface);
  --text:    var(--fz-text);
  --muted:   var(--fz-text-dim);
  --primary: var(--fz-primary);
  --accent:  #5d29eb;               /* da paleta (Secundária) */
  --border:  var(--fz-border);
}

/* Light overrides */
body.light{
  --fz-bg:        #F8F9FC;
  --fz-surface:   #FFFFFF;
  --fz-surface-2: #F7F8FB;

  --fz-border:    #E0E3E8;

  --fz-text:      #3B3F56;
  --fz-text-dim:  #6B6F85;
}



html.dark{
  /* Footer – Dark */
  --footer-bg-1: #11121a;
  --footer-bg-2: #0b0c12;
  --footer-fg:   #eceaf7;
  --footer-muted:#a8acc4;
  --footer-link: #c8b6ff;
  --footer-link-hover:#e5ddff;
  --footer-border: rgba(255,255,255,.08);
  --footer-accent: rgba(123,95,231,.23);
}

html[data-theme="light"] {
  /* Cores mais escuras para melhor leitura no fundo claro */
  --footer-fg:           #222434;   /* texto principal */
  --footer-muted:        #353538;   /* textos secundários */
  --footer-link:         #3F2F8A;   /* roxo fechado (normal) */
  --footer-link-hover:   #241E55;   /* ainda mais escuro no hover */
  --footer-border:       rgba(16,16,24,.08);
  --footer-accent:       rgba(63,47,138,.12); /* brilho discreto */
  --fz-bg:              #F8F9FC;
    --fz-surface:   #FFFFFF;
  --fz-surface-2: #F7F8FB;
  --fz-border:    #E0E3E8;
  --fz-text:      #3B3F56;
  --fz-text-dim:  #6B6F85;
}
html { background: var(--fz-bg); }
body { background: transparent; }
/* Base */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html,body{ background:var(--fz-bg); color:var(--fz-text); }
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}

/* Header / Footer */
header{border-bottom:1px solid var(--fz-border);padding:14px 0}
footer{border-top:1px solid var(--fz-border);text-align:center;padding:28px 16px;font-size:.92rem;color:var(--fz-text-dim)}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}


/* ===== Header limpo ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--fz-border);
  background:linear-gradient(180deg, rgba(0,0,0,.64), rgba(0,0,0,.42));
}
body.light .site-header{
  border-bottom:1px solid #E0E3E8;
  background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.45));
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0}

/* calculadora de juros compostos objeto hidden*/
.hidden{ display:none !important; }
/* calculadora de juros compostos objeto hidden*/


/* Nav */
.nav{display:flex;align-items:center}
.nav-list{display:flex;gap:6px;list-style:none}
.nav-link{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 12px;border-radius:10px;line-height:1;color:inherit;
  border:1px solid transparent;
  transition:background .2s,border-color .2s, color .2s, box-shadow .2s;
}
.nav-link:hover{
  background:rgba(122,95,167,.12);
  border-color:rgba(122,95,167,.20);
}
body.light .nav-link:hover{
  background:rgba(122,95,167,.08);
  border-color:rgba(122,95,167,.25);
}

/* Ações à direita */
.nav-actions{display:flex;align-items:center;gap:10px}

/* ===== Configurações (sem JS) ===== */
.config{position:relative}
.config > summary.config-btn{
  list-style:none; display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:10px; cursor:pointer; user-select:none;
  border:1px solid var(--fz-border);
  background:transparent; color:inherit;
  transition:background .2s, border-color .2s, box-shadow .2s;
}
.config > summary::-webkit-details-marker{display:none}
.config > summary:hover{ border-color:rgba(122,95,167,.30); background:rgba(122,95,167,.10); }
body.light .config > summary:hover{ background:rgba(122,95,167,.08); }
.config[open] .config-panel{opacity:1; transform:translateY(0); pointer-events:auto}
.config-panel{
  position:absolute; top:calc(100% + 10px); right:0; width:260px;
  background:var(--fz-surface); border:1px solid var(--fz-border);
  border-radius:12px; padding:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.25);
  opacity:0; transform:translateY(6px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
body.light .config-panel{ background:#fff; border:1px solid #E0E3E8; box-shadow:0 10px 28px rgba(0,0,0,.08) }
.config-section + .config-section{margin-top:10px; padding-top:10px; border-top:1px solid var(--fz-border)}
body.light .config-section + .config-section{ border-top:1px solid #E0E3E8 }
.config-title{display:block; font:600 .88rem/1.2 Poppins,Inter,sans-serif; opacity:.9; margin:0 0 6px}
.config-item{ display:block; padding:10px 10px; border-radius:10px; text-decoration:none; color:inherit;
  border:1px solid transparent; transition:background .2s, border-color .2s; }
.config-item:hover{background:rgba(122,95,167,.12); border-color:rgba(122,95,167,.20)}
body.light .config-item:hover{background:rgba(122,95,167,.08); border-color:rgba(122,95,167,.25)}
.config-item[aria-disabled="true"]{opacity:.55; cursor:not-allowed}
.config-item[aria-current="true"], .config-item[aria-pressed="true"]{
  background: rgba(122,95,167,.18);
  border: 1px solid rgba(122,95,167,.45);
  border-radius: 10px;
}

/* Foco visível */
.nav-link:focus-visible, .config > summary:focus-visible, .config-item:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(143,203,255,.35);
}

/* ===== Botões (globais) ===== */
.btn{
  appearance:none; border:1px solid transparent; cursor:pointer;
  border-radius:12px; font:600 .95rem Poppins,Inter,sans-serif;
  padding:12px 18px; transition:transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  color: inherit; background: transparent;
}
.btn:active{transform:translateY(1px)}
.btn-small{padding:10px 14px;border-radius:10px;font-size:.92rem}

/* Botão padrão (dark) */
.btn-primary {
  background: linear-gradient(180deg, #5b2ea5 0%, #4f2e9b 100%);
  border: 1px solid rgba(122,95,167,.6);
  color: #fff; /* já força branco */
  box-shadow: 0 8px 24px rgba(122,95,167,.35), inset 0 1px 0 rgba(255,255,255,.08);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #6b3fc0 0%, #5b2ea5 100%);
  box-shadow: 0 10px 28px rgba(122,95,167,.45), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(143,203,255,.35), 0 10px 28px rgba(91,46,165,.45);
}

/* Variante para tema claro */
body.light .btn-primary,
html[data-theme="light"] .btn-primary {
  color: #fff; /* garante texto branco mesmo no light */
  background: linear-gradient(180deg, #7A5FA7 0%, #5b2ea5 100%); /* pode clarear o gradiente se quiser contraste */
  border: 1px solid rgba(122,95,167,.5);
}
body.light .btn-primary:hover,
html[data-theme="light"] .btn-primary:hover {
  background: linear-gradient(180deg, #8f6ee9 0%, #6b3fc0 100%);
}


.btn-outline,.btn-ghost{
  background: transparent; border:1px solid var(--fz-primary); color:var(--fz-primary);
}
.btn-outline:hover,.btn-ghost:hover{ background: rgba(122,95,167,.12) }
body.light .btn-outline, body.light .btn-ghost{ background:#fff; color:var(--fz-primary) }

/* ===== Seções / cartões ===== */
.section{padding:28px 0;border-top:1px solid var(--fz-border); background: var(--fz-bg);}
.card{ background:var(--fz-surface); border:1px solid var(--fz-border); border-radius:14px; padding:16px;
  display:flex; flex-direction:column; gap:10px; box-shadow:0 8px 24px rgba(0,0,0,.18) }
body.light .card{ background:#fff; border:1px solid #E0E3E8; box-shadow:0 2px 6px rgba(0,0,0,.06) }

/* Footer no light (garantido) */
body.light footer{ background:#FFFFFF; color:var(--fz-text-dim); border-top:1px solid #E0E3E8; }

/* Responsivo simples */
@media (max-width: 960px){
  .nav-list{gap:2px}
  .nav-link{padding:8px 10px}
}

/* ====== Footer ====== */
.site-footer{
  margin-top: 64px;
  padding: 48px 0 20px;
  color: var(--footer-fg);
  background:
    radial-gradient(1100px 280px at 50% -140px, var(--footer-accent), transparent 45%),
    linear-gradient(180deg, var(--footer-bg-1), var(--footer-bg-2));
  border-top: 1px solid var(--footer-border);
}

.footer-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.footer-grid{
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 32px;
}

.site-footer h4{
  margin: 0 0 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--footer-muted);
}

.site-footer p,
.site-footer li,
.site-footer small{
  color: var(--footer-muted);
}

.site-footer a{
  color: var(--footer-link);
  text-decoration: none;
  transition: color .18s ease, opacity .18s ease;
}
.site-footer a:hover{ color: var(--footer-link-hover); text-decoration: underline; }

.footer-brand{
  font-weight: 700;
  font-size: 18px;
  color: var(--footer-fg);
  text-decoration: none;
}

.footer-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.footer-bottom{
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px dashed var(--footer-border);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--footer-muted);
  flex-wrap: wrap;
}

/* responsivo */
@media (max-width: 920px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .footer-grid{ grid-template-columns: 1fr; }
}

/* ====== Footer ====== */
.site-footer{
  margin-top: 64px;
  padding: 48px 0 20px;
  color: var(--footer-fg);
  background:
    radial-gradient(1100px 280px at 50% -140px, var(--footer-accent), transparent 45%),
    linear-gradient(180deg, var(--footer-bg-1), var(--footer-bg-2));
  border-top: 1px solid var(--footer-border);
}

.footer-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.footer-grid{
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 32px;
}

.site-footer h4{
  margin: 0 0 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--footer-muted);
}

.site-footer p,
.site-footer li,
.site-footer small{
  color: var(--footer-muted);
}

.site-footer a{
  color: var(--footer-link);
  text-decoration: none;
  transition: color .18s ease, opacity .18s ease;
}
.site-footer a:hover{ color: var(--footer-link-hover); text-decoration: underline; }

.footer-brand{
  font-weight: 700;
  font-size: 18px;
  color: var(--footer-fg);
  text-decoration: none;
}

.footer-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.footer-bottom{
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed var(--footer-border);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--footer-muted);
  flex-wrap: wrap;
}

/* responsivo */
@media (max-width: 920px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .footer-grid{ grid-template-columns: 1fr; }
}

/* ====== Footer ====== */
.site-footer{
  margin-top: 64px;
  padding: 48px 0 20px;
  color: var(--footer-fg);
  background:
    radial-gradient(1100px 280px at 50% -140px, var(--footer-accent), transparent 45%),
    linear-gradient(180deg, var(--footer-bg-1), var(--footer-bg-2));
  border-top: 1px solid var(--footer-border);
}

.footer-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.footer-grid{
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 32px;
}

.site-footer h4{
  margin: 0 0 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--footer-muted);
}

.site-footer p,
.site-footer li,
.site-footer small{
  color: var(--footer-muted);
}

.site-footer a{
  color: var(--footer-link);
  text-decoration: none;
  transition: color .18s ease, opacity .18s ease;
}
.site-footer a:hover{ color: var(--footer-link-hover); text-decoration: underline; }

.footer-brand{
  font-weight: 700;
  font-size: 18px;
  color: var(--footer-fg);
  text-decoration: none;
}

.footer-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.footer-bottom{
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px dashed var(--footer-border);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--footer-muted);
  flex-wrap: wrap;
}

/* responsivo */
@media (max-width: 920px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .footer-grid{ grid-template-columns: 1fr; }
}

/* --- Fix: footer mais contrastado no tema claro --- */
:root{
  /* texto do footer (logo/títulos) mais escuro */
  --footer-fg:   #1F2133;
  /* textos secundários (descrição/mini) mais escuros */
  --footer-muted:#2e303b;

  /* links mais “roxos escuros” e com hover ainda mais fechado */
  --footer-link:       #3B2A8F;  /* roxo escuro */
  --footer-link-hover: #291E77;  /* roxo ainda mais fechado */

  /* borda um pouco mais visível no claro */
  --footer-border: rgba(16,16,24,.12);
}
/* Garante que o brand do rodapé siga a paleta dos links */
.site-footer .footer-brand {
  color: var(--footer-link);
  transition: color .18s ease;
}
.site-footer .footer-brand:hover {
  color: var(--footer-link-hover);
}

.footer-brand:hover{
  color: var(--footer-link-hover);
  text-decoration: underline;
}

/* === Marca (global) — mesmo visual da Home === */
.brand-text-only{
  font:700 1.85rem Poppins,Inter,sans-serif;
  letter-spacing:-.3px;
  color:#8f6ee9;
  text-decoration:none;
  transition:color .25s ease, text-shadow .35s ease;
  text-shadow:
    0 0 6px rgba(143,110,233,.45),
    0 0 14px rgba(143,110,233,.45),
    0 0 26px rgba(143,110,233,.35);
}
.brand-text-only:hover{
  color:#b8acda;
  text-shadow:
    0 0 8px rgba(169,142,242,.85),
    0 0 18px rgba(169,142,242,.65),
    0 0 32px rgba(169,142,242,.55);
}
/* Light: mantém a cor, remove o glow para não “estourar” no branco */
body.light .brand-text-only{
  color:#7A5FA7;
  text-shadow:none;
}

/* Layout base — disponível em todas as páginas */
.container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.legal p,
.legal li {
  color: var(--fz-text);
}

.legal time {
  color: var(--fz-text-dim);
  font-size: .95rem;
}

.legal a {
  color: var(--fz-link);
}
.legal a:hover {
  color: var(--fz-link-hover);
  text-decoration: underline;
}

/* === Página Sobre (escopo seguro) === */

body[data-page="sobre"] .container {
   max-width: clamp(960px, 84vw, 1200px);
  padding-inline: clamp(16px, 3vw, 32px);
  padding-block: 10px;
  
}

body[data-page="sobre"] .card.legal {
  border-radius: 12px;
  padding: 36px 42px 44px;         /* respiro maior dentro do card */
}

/* largura de leitura confortável do conteúdo */
body[data-page="sobre"] .content-narrow {
  max-width: 1200px;
  margin-inline: auto;
}

/* títulos e subtítulos com ritmo */
body[data-page="sobre"] .legal h1 {
  margin: 0 0 20px;
  line-height: 1.38;
}
body[data-page="sobre"] .legal h2 {
  margin: 2px 0 14px;             /* espaço abaixo do subtítulo */
  line-height: 1.35;
}

/* parágrafos e listas */
body[data-page="sobre"] .legal p {
  line-height: 1.9;                /* leitura solta */
  margin: 10px 0 24px;
}
body[data-page="sobre"] .legal ul {
  list-style: disc outside;
  padding-left: 1.85rem;           /* recuo bonito dos bullets */
  margin: 14px 0 24px;
}
body[data-page="sobre"] .legal li + li { margin-top: 10px; }

/* separador */
body[data-page="sobre"] .divider {
  height: 10px;
  background: var(--fz-border);
  margin: 2px 0 2px;
  opacity: .75;
}


/* espaço entre blocos internos (ex.: “Transparência” → “Outras ferramentas”) */
body[data-page="sobre"] .legal section + section { margin-top: 2px; }

/* links no bloco legal */
body[data-page="sobre"] .legal a {
  color: var(--fz-link);
  text-decoration: none;
}
body[data-page="sobre"] .legal a:hover {
  color: var(--fz-link-hover);
  text-decoration: underline;
}

/* === Fix faixa preta acima do rodapé === */
/* 1) Remover a margem externa e mover o respiro para dentro do footer */
.site-footer{
  /* antes: margin-top: 64px; padding: 48px 0 20px; */
  margin-top: 0;
  padding: calc(50px + 66px) 0 22px; /* preserva o mesmo "respiro" visual */
}

/* Zera margem externa e traz o respiro para dentro */
.site-footer {
  margin-top: 0 !important;
  padding: calc(48px + 64px) 0 20px; /* mantém o mesmo respiro visual */
  position: relative;
}

/* Padrão: 1 coluna (mobile) */
.form-grid { display:grid; grid-template-columns: 1fr; gap:12px; }
.form-grid .full { grid-column: 1 / -1; }

/* ≥ 768px: 2 colunas */
@media (min-width: 768px){
  .form-grid { grid-template-columns: 1fr 1fr; }
}

/* Inputs alinhados ao tema global */
.input, .textarea, .select{
  width:100%;
  padding:.7rem .8rem;
  border:1px solid var(--fz-border);
  border-radius:10px;
  background:var(--fz-surface);
  color:var(--fz-text);
}
.textarea{ min-height:140px; resize:vertical; }

/* ===== Pomodoro – Componentes essenciais ===== */
.timer{text-align:center;margin:16px 0}
.time{
  font-size:4rem; font-weight:700; letter-spacing:1px;
  will-change: transform;
}
.controls{display:flex;gap:10px;justify-content:center;margin-top:12px}


.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.grid.small{grid-template-columns:repeat(3,1fr)}
@media (max-width:640px){.grid,.grid.small{grid-template-columns:1fr}}

.field{display:flex;flex-direction:column;gap:6px}
.field input,.field select{
  padding:10px;border-radius:10px;border:1px solid var(--border);
  background:transparent;color:var(--text)
}

/* Presets / chips */
.chip{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:36px;padding:6px 12px;border-radius:999px;
  border:1px solid var(--border);background:transparent;color:var(--text);
  font-weight:600;cursor:pointer
}
.preset-row{display:flex;gap:8px;margin-top:6px}

/* Switch */
.switch{position:relative;width:44px;height:24px}
.switch input{display:none}
.switch span{
  position:absolute;inset:0;border-radius:999px;background:#d1d5db;border:1px solid var(--border)
}
.switch span::after{
  content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;
  transition:transform .2s ease; box-shadow:0 1px 3px rgba(0,0,0,.2)
}
.switch input:checked + span{background:var(--primary)}
.switch input:checked + span::after{transform:translateX(20px)}
.dark .switch span{background:#2a2a36}

/* Title bar / help */
.title-bar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.5rem}
.title-bar h1{margin:0;line-height:1.15}
.icon-btn{
  inline-size:28px;block-size:28px;border-radius:9999px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);display:inline-grid;place-items:center;
  font-weight:700;font-size:.95rem;opacity:.75;cursor:pointer;transition:opacity .2s,transform .12s ease
}
.icon-btn:hover{opacity:1;transform:translateY(-1px)}

/* Progress ring */
.ring-wrap{position:relative;display:inline-block}
.ring{
  --p:0deg; width:220px;height:220px;border-radius:50%;
  background:conic-gradient(var(--primary) var(--p), rgba(46,46,46,.08) 0);
  display:block; transition:background .3s linear;
}
.dark .ring{background:conic-gradient(var(--accent) var(--p), rgba(255,255,255,.1) 0)}
.ring.is-break{
  background:conic-gradient(#A89DF5 var(--p), rgba(0,0,0,.08) 0);
}
.dark .ring.is-break{
  background:conic-gradient(#A89DF5 var(--p), rgba(255,255,255,.1) 0);
}
.ring-wrap #time{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
@keyframes timerPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
#time.last-minute{animation:timerPulse 1s infinite;color:var(--primary)}

/* Modais (confirmação/atalhos) */
.modal.hidden{display:none}
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.65);
  display:flex;align-items:center;justify-content:center;z-index:2000
}
.modal-card{
  background:var(--surface);color:var(--text);
  border:1px solid var(--border);border-radius:14px;
  padding:20px;width:min(520px,92vw);box-shadow:0 14px 40px rgba(0,0,0,.55)
}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}

/* Acessibilidade */
.kbd{display:inline-block;padding:2px 6px;border:1px solid var(--border);border-radius:6px;
  font:400 .85em ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;background:var(--bg);color:var(--text);line-height:1.2}
.shortcut-list{list-style:none;padding:0;margin:.5rem 0 1rem;display:grid;gap:.45rem}
.shortcut-list li{display:flex;align-items:center;gap:.5rem}

/* Pequenos ajustes do cartão principal do Pomodoro */
main .card{
  max-width:100%;
  margin-inline:0;
  padding-inline:clamp(16px, 2.5vw, 32px);
}

/* ===== Tasks (scoped) ===== */
.tasks-card{ background:var(--fz-surface); border:1px solid var(--fz-border);
  border-radius:14px; padding:16px; margin-top:16px; box-shadow:0 8px 24px rgba(0,0,0,.18) }
.tasks-titlebar{ display:flex; flex-direction:column; gap:12px }
.tasks-h2{ font:600 1.25rem/1.2 Poppins,Inter,sans-serif }

.tasks-input-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.tasks-input{
  flex:1 1 380px; min-width:260px;
  padding:12px 14px; border-radius:10px; border:1px solid var(--fz-border);
  background:transparent; color:var(--fz-text);
}
.tasks-input::placeholder{ color:var(--fz-text-dim) }
.tasks-btn{ border:1px solid var(--fz-primary); color:#fff; cursor:pointer }
.tasks-btn--primary{
  background: linear-gradient(180deg, #5b2ea5 0%, #4f2e9b 100%);
  border: 1px solid rgba(122,95,167,.6);
  padding:12px 16px; border-radius:10px; font:600 .95rem Poppins,Inter,sans-serif;
}
html[data-theme="light"] .tasks-btn--primary{
  background: linear-gradient(180deg, #7A5FA7 0%, #5b2ea5 100%);
}

.tasks-note{ margin-top:6px; font-size:.92rem; color:var(--fz-text-dim) }
.tasks-note-muted{ opacity:.85 }

.tasks-empty{ margin-top:8px; }

.tasks-list{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px }
.task-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border:1px solid var(--fz-border); border-radius:10px; background:var(--fz-surface-2);
}
.task-item input[type="checkbox"]{ width:18px; height:18px; accent-color: var(--fz-primary); }
.task-text{ flex:1 1 auto; word-break:break-word }
.task-done .task-text{ text-decoration:line-through; opacity:.7 }
.task-actions{ display:flex; gap:6px }
.task-btn{
  border:1px solid var(--fz-border); background:transparent; color:var(--fz-text);
  padding:6px 10px; border-radius:8px; cursor:pointer;
}
.task-btn:hover{ border-color:var(--fz-primary) }

@media (max-width:520px){
  .tasks-input{ flex:1 1 100%; min-width:0 }
}

/* Neutro – Pausar */
.btn-neutral{
  background: var(--fz-surface-2);
  border: 1px solid var(--fz-border);
  color: var(--fz-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.btn-neutral:hover{
  background: color-mix(in srgb, var(--fz-surface-2) 85%, #fff 15%);
  border-color: rgba(122,95,167,.35);
}

/* Perigo – Zerar */
.btn-danger{
  background: transparent;
  border: 1px solid rgba(248,113,113,.55);
  color: #f87171;
}
.btn-danger:hover{
  background: rgba(248,113,113,.12);
  border-color: rgba(248,113,113,.75);
}

/* Pausar – brilho roxo suave */
.btn-neutral:hover {
  background: color-mix(in srgb, var(--fz-surface-2) 80%, #7A5FA7 20%);
  border-color: rgba(122,95,167,.55);
  box-shadow: 0 0 12px rgba(122,95,167,.25);
  transform: translateY(-1px);
}

/* Zerar – vermelho sutil */
.btn-danger:hover {
  background: rgba(248,113,113,.15);
  border-color: rgba(248,113,113,.75);
  color: #fff;
  box-shadow: 0 0 12px rgba(248,113,113,.25);
  transform: translateY(-1px);
}

/* Reset no active para suavizar o clique */
.btn-neutral:active,
.btn-danger:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ===== Pomodoro – Timer Pro v2 ===== */
.timer-wrap{ display:grid; place-items:center; margin: 18px 0 10px }

.timer-pro{
  --size: clamp(220px, 32vw, 340px);
  --p: 0deg;                                /* progresso (0→360) – JS atualiza */
  --ring: var(--fz-primary);                 /* cor padrão (foco) */
  --ring-track: rgba(255,255,255,.08);       /* trilha no dark */
  --ring-warning: #f59e0b;                   /* ≤ 60s (âmbar) */
  --ring-danger:  #ef4444;                   /* ≤ 30s (vermelho) */
  width: var(--size); aspect-ratio:1/1; position:relative;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.35));
}

/* Anel com espessura e trilha */
.timer-ring{
  position:absolute; inset:0; border-radius:50%;
  background: conic-gradient(var(--ring) var(--p), var(--ring-track) 0);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 58%, #000 59%);
          mask: radial-gradient(circle at 50% 50%, transparent 58%, #000 59%);
  transition: background .28s linear, box-shadow .28s ease;
}

/* Ticks discretos (a cada 5s) */
.timer-ticks{
  pointer-events:none; position:absolute; inset:0; border-radius:50%;
  background:
    conic-gradient(from -90deg, rgba(255,255,255,.12) 0 1deg, transparent 1deg 30deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 54%, #000 55%);
          mask: radial-gradient(circle at 50% 50%, transparent 54%, #000 55%);
  opacity:.55;
}

/* Vidro central */
.timer-core{
  position:absolute; inset:6%; border-radius:50%;
  background:
    radial-gradient(120% 85% at 50% 15%, rgba(255,255,255,.08), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.18));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 18px 40px rgba(0,0,0,.35),
    inset 0 -8px 24px rgba(0,0,0,.25),
    0 8px 24px rgba(0,0,0,.28);
  display:grid; place-items:center;
}

/* Tipografia proporcional e nítida */
#time{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 800; font-variant-numeric: tabular-nums;
  font-size: clamp(48px, 8.8vw, 108px);
  letter-spacing: .5px; color: #E9EBF4;
  text-shadow: 0 1px 0 rgba(255,255,255,.05), 0 12px 28px rgba(0,0,0,.45);
}

/* Estados visuais */
.timer-pro.is-running .timer-core{ animation: timerBreath 2.6s ease-in-out infinite }
@keyframes timerBreath{
  0%,100%{ box-shadow: inset 0 18px 40px rgba(0,0,0,.35), inset 0 -8px 24px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.28) }
  50%    { box-shadow: inset 0 18px 40px rgba(0,0,0,.35), inset 0 -8px 24px rgba(0,0,0,.25), 0 14px 36px rgba(0,0,0,.38) }
}
.timer-pro.is-warning { --ring: var(--ring-warning) } /* ≤60s */
.timer-pro.is-danger  { --ring: var(--ring-danger)  } /* ≤30s  */
#time.last-minute{ animation: timerPulse 1s infinite; color: var(--fz-primary) }
@keyframes timerPulse{ 0%,100%{ transform: scale(1) } 50%{ transform: scale(1.04) } }

/* Tema claro */
html[data-theme="light"] .timer-pro{ --ring-track:#E6E9F2 }
html[data-theme="light"] #time{ color:#3B3F56 }

/* Barra de “pílulas” (contador visual opcional, 12 segmentos = 5s cada) */
.timer-dots{
  margin-top: 14px; display:grid; grid-auto-flow:column; gap:6px; justify-content:center;
}
.timer-dot{
  width:18px; height:6px; border-radius:999px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.12);
  transition: background .2s, border-color .2s, transform .2s;
}
.timer-dot.is-on{
  background: var(--ring); border-color: color-mix(in srgb, var(--ring) 70%, #000 30%);
  transform: translateY(-1px);
}

/* ===== Timer Pro – refinamento sem ticker ===== */
.timer-wrap{ display:grid; place-items:center; gap:10px; margin:20px 0 12px }

.timer-pro{
  --size: clamp(240px, 36vw, 360px);
  --p: 0deg;
  --ring: var(--fz-primary);
  --ring-track: rgba(255,255,255,.08);
  --ring-warning:#f59e0b;  /* ≤60s */
  --ring-danger: #ef4444;  /* ≤30s */
  width:var(--size); aspect-ratio:1/1; position:relative;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.35));
}

/* anel com halo suave e espessura equilibrada */
.timer-ring{
  position:absolute; inset:0; border-radius:50%;
  background:
    conic-gradient(var(--ring) var(--p), var(--ring-track) 0);
  /* espessura do anel */
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 58%, #000 59%);
          mask: radial-gradient(circle at 50% 50%, transparent 58%, #000 59%);
  transition: background .28s linear, box-shadow .28s ease;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 8px 22px rgba(0,0,0,.28);
}

/* marcas de quartis (25/50/75) – discretas */
.timer-quartiles{
  position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:
    conic-gradient(from -90deg, rgba(255,255,255,.18) 0 1deg, transparent 1deg 90deg,
                               rgba(255,255,255,.18) 90deg 91deg, transparent 91deg 180deg,
                               rgba(255,255,255,.18) 180deg 181deg, transparent 181deg 270deg,
                               rgba(255,255,255,.18) 270deg 271deg, transparent 271deg 360deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 55%, #000 56%);
          mask: radial-gradient(circle at 50% 50%, transparent 55%, #000 56%);
  opacity:.5;
}

/* vidro central com reflexo */
.timer-core{
  position:absolute; inset:6%; border-radius:50%;
  background:
    radial-gradient(120% 85% at 50% 18%, rgba(255,255,255,.10), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.18));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 18px 40px rgba(0,0,0,.35),
    inset 0 -8px 24px rgba(0,0,0,.25),
    0 8px 24px rgba(0,0,0,.28);
  display:grid; place-items:center;
}

#time{
  font: 800 clamp(44px, 8vw, 96px)/1 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing:.5px;
  color:#E9EBF4;
  text-shadow: 0 1px 0 rgba(255,255,255,.05), 0 12px 28px rgba(0,0,0,.45);
}
/* estados */
.timer-pro.is-running .timer-core{ animation: timerBreath 2.6s ease-in-out infinite }
@keyframes timerBreath{
  0%,100%{ box-shadow: inset 0 18px 40px rgba(0,0,0,.35), inset 0 -8px 24px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.28) }
  50%    { box-shadow: inset 0 18px 40px rgba(0,0,0,.35), inset 0 -8px 24px rgba(0,0,0,.25), 0 14px 36px rgba(0,0,0,.38) }
}
.timer-pro.is-warning { --ring: var(--ring-warning) }
.timer-pro.is-danger  { --ring: var(--ring-danger)  }
#time.last-minute{ animation: timerPulse 1s infinite; color: var(--fz-primary) }
@keyframes timerPulse{ 0%,100%{ transform: scale(1) } 50%{ transform: scale(1.04) } }

/* tema claro */
html[data-theme="light"] .timer-pro{ --ring-track:#E6E9F2 }
html[data-theme="light"] #time{ color:#3B3F56 }

/* Pílula de modo (Foco/Pausa) */
.timer-mode{
  padding:6px 12px; border-radius:999px; font:600 .95rem/1.1 Poppins,Inter,sans-serif;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:#fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.22);
}
.timer-mode.is-break{
  background: rgba(16,185,129,.18);
  border-color: rgba(16,185,129,.35);
  color:#e9fff5;
}

/* =======================
   Timer – LIGHT THEME
   ======================= */
html[data-theme="light"] .timer-pro{
  --ring-track:#E2E6EF; /* trilha visível no claro */
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.08));
}

html[data-theme="light"] .timer-ring{
  box-shadow:
    0 0 0 1px rgba(0,0,0,.05),
    0 6px 14px rgba(0,0,0,.08);
}

html[data-theme="light"] .timer-quartiles{
  background:
    conic-gradient(from -90deg,
      rgba(0,0,0,.08) 0 1deg, transparent 1deg 90deg,
      rgba(0,0,0,.08) 90deg 91deg, transparent 91deg 180deg,
      rgba(0,0,0,.08) 180deg 181deg, transparent 181deg 270deg,
      rgba(0,0,0,.08) 270deg 271deg, transparent 271deg 360deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 55%, #000 56%);
          mask: radial-gradient(circle at 50% 50%, transparent 55%, #000 56%);
  opacity:.45;
}

html[data-theme="light"] .timer-core{
  background:
    radial-gradient(100% 85% at 50% 20%, #ffffff 0%, #f0f2f6 70%, #d9dce3 100%);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow:
    inset 0 10px 20px rgba(0,0,0,.08),
    inset 0 -6px 12px rgba(0,0,0,.06),
    0 6px 14px rgba(0,0,0,.08);
}

html[data-theme="light"] #time{
  background: linear-gradient(180deg, #3B3F56 0%, #7A5FA7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

/* Estados no light */
html[data-theme="light"] .timer-pro.is-warning{ --ring:#d97706 }
html[data-theme="light"] .timer-pro.is-danger { --ring:#dc2626 }

/* Pílula de modo */
html[data-theme="light"] .timer-mode{
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.10);
  color: #3B3F56;
  box-shadow: 0 4px 10px rgba(0,0,0,.06);
}
html[data-theme="light"] .timer-mode.is-break{
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.28);
  color: #166C56;
}












/* ===== Pomodoro – Settings Pro ===== */

/* container principal da seção */
.settings-card{
  background: var(--fz-surface);
  border: 1px solid var(--fz-border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
}

/* grid 3 colunas -> 2 -> 1 (responsivo) */
.settings-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px 16px;
}
@media (max-width: 1100px){
  .settings-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  .settings-grid{ grid-template-columns: 1fr; }
}

/* label + campo em pilha, com respiro */
.form-field{
  display: grid;
  gap: 8px;
}
.form-label{
  font: 600 .95rem/1.2 Poppins,Inter,sans-serif;
  color: var(--fz-text);
  opacity: .9;
}

/* inputs/select premium */
.input, .select{
  width: 100%;
  height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--fz-border);
  background: var(--fz-surface-2);
  color: var(--fz-text);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.input::placeholder{ color: var(--fz-text-dim); }
.input:focus, .select:focus{
  outline: none;
  border-color: rgba(122,95,167,.45);
  box-shadow: 0 0 0 3px rgba(122,95,167,.20);
}

/* seletor com “pill” e ícone de som alinhado */
.select-wrap{
  position: relative;
}
.select-wrap .select{
  padding-right: 42px;
}
.select-wrap .icon-right{
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1px solid var(--fz-border);
  border-radius: 10px;
  background: var(--fz-surface);
  opacity: .85;
}

/* chips (presets) */
.chips-row{ display: flex; gap: 10px; flex-wrap: wrap; }
.chip{
  height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--fz-border);
  background: var(--fz-surface-2);
  color: var(--fz-text);
  font: 600 .92rem Poppins,Inter,sans-serif;
  display: inline-grid; place-items: center; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .08s ease;
}
.chip:hover{ border-color: rgba(122,95,167,.45); }
.chip:active{ transform: translateY(1px); }
.chip.is-active{
  background: linear-gradient(180deg,#7A5FA7 0%, #5b2ea5 100%);
  color: #fff; border-color: rgba(122,95,167,.60);
  box-shadow: 0 6px 14px rgba(91,46,165,.28);
}

/* switch premium */
.switch{ position: relative; width: 46px; height: 26px; }
.switch input{ display:none; }
.switch .track{
  position:absolute; inset:0; border-radius:999px;
  background: var(--fz-surface-2);
  border:1px solid var(--fz-border);
  transition: background .2s, border-color .2s;
}
.switch .thumb{
  position:absolute; top:2px; left:2px; width:22px; height:22px;
  border-radius:50%; background:#fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  transition: transform .18s ease;
}
.dark .switch .thumb{ background:#1e1f27; }
.switch input:checked ~ .track{
  background: rgba(16,185,129,.18);
  border-color: rgba(16,185,129,.45);
}
.switch input:checked ~ .thumb{
  transform: translateX(20px);
}

/* botões secundários (reset/test) */
.btn-ghost{
  height: 40px; padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--fz-border);
  background: transparent; color: var(--fz-text);
  font: 600 .95rem Poppins,Inter,sans-serif; cursor:pointer;
  transition: border-color .15s, background .15s, transform .08s;
}
.btn-ghost:hover{
  border-color: rgba(122,95,167,.45);
  background: var(--fz-surface-2);
}
.btn-ghost:active{ transform: translateY(1px); }

/* rodapé: contadores de sessão */
.settings-footer{
  display:flex; justify-content:flex-end; align-items:center;
  gap: 18px; padding-top: 12px; color: var(--fz-text-dim);
  font: 600 .95rem/1.2 Poppins,Inter,sans-serif;
  border-top: 1px dashed var(--fz-border);
}

/* espaçamento na seção “Presets” + linha abaixo */
.settings-section{ margin-top: 8px; }
.settings-section + .settings-section{ margin-top: 16px; }

/* light tuning sutil */
html[data-theme="light"] .settings-card{
  background:#fff; box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
html[data-theme="light"] .input, html[data-theme="light"] .select{
  background:#fafbff; border-color:#E0E5EE;
}

/* ===== Settings Premium (usa tokens globais) ===== */

/* grid responsivo */
.grid{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:14px 16px; }
.grid.small{ grid-template-columns: 1fr 1fr 1fr; }
@media (max-width:1100px){ .grid{ grid-template-columns: 1fr 1fr; } .grid.small{ grid-template-columns: 1fr 1fr; } }
@media (max-width:720px){ .grid, .grid.small{ grid-template-columns: 1fr; } }

/* field */
.field{ display:grid; gap:8px; }
.field > span{ font:600 .95rem/1.2 Poppins,Inter,sans-serif; color:var(--fz-text); opacity:.9; }

/* inputs/select */
.field input[type="number"], .field select{
  width:100%; height:44px; padding:10px 12px;
  border-radius:12px; border:1px solid var(--fz-border);
  background:var(--fz-surface-2); color:var(--fz-text);
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.field input::placeholder{ color:var(--fz-text-dim); }
.field input:focus, .field select:focus{
  outline:none; border-color:rgba(122,95,167,.45); box-shadow:0 0 0 3px rgba(122,95,167,.20);
}

/* botão de som ao lado do label */
.sound-toggle{
  margin-left:8px; height:28px; min-width:28px; padding:0 8px;
  border-radius:10px; border:1px solid var(--fz-border);
  background:var(--fz-surface); color:var(--fz-text); cursor:pointer;
}
.sound-toggle[aria-pressed="false"]{ opacity:.6 }

/* chips (presets + actions) */
.preset-row{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{
  height:36px; padding:0 14px; border-radius:999px;
  border:1px solid var(--fz-border); background:var(--fz-surface-2);
  color:var(--fz-text); font:600 .92rem Poppins,Inter,sans-serif;
  display:inline-grid; place-items:center; cursor:pointer;
  transition:border-color .15s, background .15s, transform .08s, box-shadow .15s;
}
.chip:hover{ border-color:rgba(122,95,167,.45) }
.chip:active{ transform:translateY(1px) }
.chip.is-active{
  background:linear-gradient(180deg,#7A5FA7 0%, #5b2ea5 100%);
  color:#fff; border-color:rgba(122,95,167,.6);
  box-shadow:0 6px 14px rgba(91,46,165,.28);
}
.reset-chip{ background:transparent }

/* switch premium (verde-água quando ON) */
.switch{ position:relative; width:50px; height:28px; margin-right:10px; }
.switch input{ position:absolute; opacity:0; inset:0; }
.switch .track{
  position:absolute; inset:0; border-radius:999px;
  background:var(--fz-surface-2); border:1px solid var(--fz-border);
  transition: background .2s, border-color .2s;
}
.switch .thumb{
  position:absolute; top:2px; left:2px; width:24px; height:24px; border-radius:50%;
  background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.18); transition: transform .18s ease;
}
html[data-theme="dark"] .switch .thumb{ background:#1e1f27; }

.switch input:checked ~ .track{
  background: rgba(16,185,129,.18);             /* verde-água */
  border-color: rgba(16,185,129,.45);
}
.switch input:checked ~ .thumb{ transform: translateX(22px); }

/* status textual (visível em mobile) */
.switch-status{ margin-left:6px; font:600 .9rem/1 Poppins,Inter,sans-serif; color:var(--fz-text-dim); }
.switch-on  { color:#0ea5a3; }   /* tom esmeralda/água */
.switch-off { color:var(--fz-text-dim); }

/* options row */
.options-row{ display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap }

/* stats */
.stats{ display:flex; gap:18px; margin-top:10px; font:600 .95rem/1.2 Poppins,Inter,sans-serif; color:var(--fz-text-dim) }

/* light pequenos ajustes */
html[data-theme="light"] .field input[type="number"], html[data-theme="light"] .field select{
  background:#fafbff; border-color:#E0E5EE;
}

/* === Micro-interações Premium === */

/* Switch glow ao ligar */
.switch.on > .track {
  box-shadow: 0 0 6px 2px rgba(16,185,129,.35), inset 0 0 0 1px rgba(16,185,129,.55);
  transition: box-shadow .35s ease;
}

/* Chips: bounce sutil ao ativar */
.chip.is-active {
  animation: chipPop .25s ease;
}
@keyframes chipPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* Tooltip mini no hover de presets */
.chip.is-active::after {
  margin-left: 6px;
  font-size: .8rem;
  color: #fff;
}

/* Feedback do select Sound ao trocar */
.select.flash {
  animation: flashBorder .6s ease;
}
@keyframes flashBorder {
  0%   { box-shadow: 0 0 0 3px rgba(16,185,129,.35); }
  100% { box-shadow: none; }
}

/* Labels mais "dashboard pro" */
.field > span {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  opacity: .75;
}

/* Separadores visuais entre blocos */
.grid.small, .options-row {
  border-top: 1px dashed var(--fz-border);
  padding-top: 12px;
  margin-top: 12px;
}

#sound {
  width: 100%;
  height: 44px;          /* mesmo que os inputs */
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--fz-border);
  background: var(--fz-surface-2);
  color: var(--fz-text);
  appearance: none;
}

/* wrapper do campo de som */
#sound-label {
  display: flex;              /* só o texto "SOUND" */
  margin-bottom: 4px;
}

.sound-field {
  display: flex;
  align-items: center;
  gap: 6px;
}

#sound {
  flex: 4;
  height: 44px;                /* mesma altura dos inputs */
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--fz-border);
  background: var(--fz-surface-2);
  color: var(--fz-text);
  appearance: none;
}

/* Sobe a label SOUND */
#sound-label {
  margin-bottom: -10px;   /* padrão era ~6px */
  transform: translateY(-4px); /* sobe levemente */
}


/* Ajuste de posição do botão de som */
.sound-toggle {
  position: relative;
  top: -4px;        /* sobe um pouquinho */
}

/* se quiser ele exatamente no meio da label */
#sound-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.field > span{
  font-size:.85rem; letter-spacing:.35px; opacity:.78;
}

.grid, .grid.small{ gap:14px 18px }
.options-row{ margin-top: 18px }
.settings-footer{ padding-top: 14px }

.grid.small, .options-row{
  border-top:1px dashed color-mix(in oklab, var(--fz-border) 80%, transparent);
}

.chip.is-active{
  box-shadow: 0 8px 18px rgba(91,46,165,.30);
}
.chip:focus-visible{
  outline: none; box-shadow: 0 0 0 3px rgba(122,95,167,.25);
}

#reset-stats.btn-ghost, .btn-ghost.danger{
  border-color: color-mix(in oklab, var(--fz-border) 70%, #ef4444 30%);
}
#reset-stats.btn-ghost:hover{
  background: color-mix(in oklab, var(--fz-surface-2) 85%, #ef4444 15%);
}

.options-row{ gap:12px }
#auto-start-label{ cursor:pointer; user-select:none }
#auto-start-label:hover{ opacity:.9 }
#auto-start-label:active{ transform: translateY(1px) }

.settings-footer{ justify-content:flex-end }

.field input:focus, .field select:focus, .sound-toggle:focus-visible{
  outline:none; border-color:rgba(122,95,167,.50);
  box-shadow:0 0 0 3px rgba(122,95,167,.20);
}

html[data-theme="light"] .field input:hover, 
html[data-theme="light"] .field select:hover{
  background:#f4f6ff;
}

.field small{display:block;margin-top:4px;font-size:.8rem;opacity:.6}


.timer-actions{display:flex;gap:10px;justify-content:center}
.timer-actions .btn{min-width:92px;height:40px}

.timer-mode{position:absolute;top:-14px;left:50%;transform:translateX(-50%);
padding:6px 12px;border-radius:999px;border:1px solid var(--fz-border);
background:rgba(255,255,255,.06);backdrop-filter:saturate(140%) blur(4px);
font:600 .9rem Poppins,Inter;color:var(--fz-text)}
.timer-mode.is-break{background:rgba(16,185,129,.18);border-color:rgba(16,185,129,.35)}

.field input:invalid{border-color:#ef4444}
.field input:invalid:focus{box-shadow:0 0 0 3px rgba(239,68,68,.25)}

.field>span{color:color-mix(in oklab,var(--fz-text) 92%,transparent)}


/* ===== Tasks Kanban – visual apenas ===== */

/* grid das duas colunas */
.tasks-columns{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
}
@media (max-width: 900px){
  .tasks-columns{ grid-template-columns: 1fr; }
}

/* coluna/card */
.tasks-col{
  background: var(--fz-surface);
  border: 1px solid var(--fz-border);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.10);
}
body.light .tasks-col{
  background: #fff;
  border-color: #E0E3E8;            /* mantém contraste no light */
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* título + badge */
.tasks-col-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 8px;
}
.tasks-h3{ margin:0; font:600 1rem/1.2 Poppins,Inter,sans-serif }
.tasks-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 26px; height: 26px; padding: 0 8px;
  border-radius: 999px; font:600 .9rem/1 Poppins,Inter,sans-serif;
  background: rgba(122,95,167,.25);
  color:#fff; border:1px solid rgba(122,95,167,.45);
}
html[data-theme="light"] .tasks-badge{
  background: rgba(122,95,167,.15);
  color:#2b2250; border-color: rgba(122,95,167,.35);
}

/* lista + item */
.tasks-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
.tasks-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  background: var(--fz-surface-2);
  border:1px solid var(--fz-border);
  border-radius:10px;
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
.tasks-item:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  border-color: rgba(122,95,167,.35);
}
.tasks-item--done .tasks-body{ text-decoration: line-through; opacity:.75 }

.tasks-body{ flex: 1 1 auto; word-break: break-word }

/* botões de ação (apenas visual; não altera lógica) */
.tasks-actions{ display:flex; gap:6px }
.tasks-icon-btn{
  height:30px; min-width:30px; padding:0 10px;
  border-radius:8px; border:1px solid var(--fz-border);
  background:transparent; color:var(--fz-text); cursor:pointer;
  transition: border-color .15s ease, background .15s ease;
}
.tasks-icon-btn:hover{ border-color: var(--fz-primary) }
.tasks-icon-btn--danger:hover{
  background: rgba(255,86,86,.12); border-color: rgba(255,86,86,.4);
}

/* estados vazios e notas */
.tasks-empty{ margin-top:6px; color: var(--fz-text-dim) }
.tasks-note{ margin-top:6px; color: var(--fz-text-dim) }

/* ===== Ajuste Kanban – Destaques colunas ===== */
.tasks-col[data-col="todo"] .tasks-col-head{
  background: linear-gradient(135deg, #605fa7, #4B3FA7); /* roxo/azulado brand */
  color: #fff;
}
.tasks-col[data-col="done"] .tasks-col-head{
  background: linear-gradient(135deg, #10b981, #059669); /* verde suave */
  color: #fff;
}

/* Badge dentro do cabeçalho – contraste branco */
.tasks-col-head .tasks-badge{
  background: rgba(255,255,255,.2);
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
}

/* ===== Ajuste Botões de ação ===== */
.tasks-icon-btn[data-action="toggle"]{
  color: #10b981; /* verde */
  border-color: rgba(16,185,129,.4);
}
.tasks-icon-btn[data-action="toggle"]:hover{
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.6);
}

.tasks-icon-btn--danger{
  color: #f87171; /* vermelho já usado */
  border-color: rgba(248,113,113,.4);
}
.tasks-icon-btn--danger:hover{
  background: rgba(248,113,113,.15);
  border-color: rgba(248,113,113,.6);
}

/* ===== Kanban – ajustes de arredondamento ===== */
.tasks-col-head{
  border-radius: 14px;          /* mais arredondado */
  padding: 10px 14px;
  font-weight: 700;
}

/* Badge mais arredondado (pill look) */
.tasks-col-head .tasks-badge{
  border-radius: 999px;          /* totalmente circular */
  min-width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}


/* ===== Kanban – Premium Finish ===== */

/* Wrappers */
.kanban { display: grid; gap: 16px; }
@media (min-width: 880px){ .kanban { grid-template-columns: 1fr 1fr; } }

/* Colunas */
.kb-col {
  background: var(--fz-surface-2);
  border: 1px solid var(--fz-border);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  overflow: hidden;
}
.kb-col + .kb-col {}

/* Cabeçalho da coluna */
.kb-col__head{
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid color-mix(in oklab, var(--fz-border) 80%, transparent);
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--fz-primary) 10%, var(--fz-surface-2)) ,
                           color-mix(in oklab, var(--fz-primary) 3%, var(--fz-surface-2)));
}
.kb-col__title{
  font: 700 .98rem/1 Poppins,Inter; letter-spacing:.2px;
  color: var(--fz-text);
}
.kb-col__badge{
  min-width: 28px; height: 28px; border-radius: 999px;
  display: inline-grid; place-items: center;
  font: 700 .85rem/1 Inter;
  background: color-mix(in oklab, var(--fz-primary) 18%, #000);
  color: #fff; opacity: .95;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
/* variações por coluna */
.kb-col--todo .kb-col__head{ background: linear-gradient(180deg, #6f6bd5 0%, #5a55cc 100%); }
.kb-col--todo .kb-col__badge{ background: #455CE9; }
.kb-col--done .kb-col__head{ background: linear-gradient(180deg, #16c088 0%, #109f74 100%); }
.kb-col--done .kb-col__badge{ background: #0f8f68; }

/* Lista de cards */
.kb-col__list{ padding: 12px; display: grid; gap: 10px; }

/* Card */
.kb-card{
  background: var(--fz-surface);
  border: 1px solid var(--fz-border);
  border-radius: 12px;
  padding: 12px 12px 12px 14px;
  color: var(--fz-text);
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px;
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s;
}
.kb-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,.22);
  border-color: color-mix(in oklab, var(--fz-primary) 45%, var(--fz-border));
}
.kb-card__text{
  font: 600 .98rem/1.2 Inter,system-ui;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Ações do card */
.kb-actions{ display:flex; gap:8px; }
.kb-btn{
  width: 36px; height: 36px; border-radius: 10px;
  display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--fz-border); background: var(--fz-surface-2); color: var(--fz-text);
  transition: background .15s, border-color .15s, transform .06s, box-shadow .15s;
}
.kb-btn:active{ transform: translateY(1px) }
.kb-btn--done{ border-color: rgba(16,185,129,.45); box-shadow: inset 0 0 0 1px rgba(16,185,129,.25) }
.kb-btn--done:hover{ background: rgba(16,185,129,.16); }
.kb-btn--undo{ border-color: rgba(59,130,246,.45); box-shadow: inset 0 0 0 1px rgba(59,130,246,.25) }
.kb-btn--undo:hover{ background: rgba(59,130,246,.16); }
.kb-btn--del{ border-color: color-mix(in oklab, var(--fz-border) 70%, #ef4444 30%) }
.kb-btn--del:hover{ background: color-mix(in oklab, var(--fz-surface-2) 85%, #ef4444 15%) }

/* Placeholder ao arrastar */
.kb-card.placeholder{
  border-style: dashed; border-color: color-mix(in oklab, var(--fz-border) 60%, var(--fz-primary));
  background: repeating-linear-gradient( -45deg, color-mix(in oklab, var(--fz-surface-2) 90%, #fff 10%), 
                                         color-mix(in oklab, var(--fz-surface-2) 80%, #fff 10%) 8px );
  animation: kbPulse .9s infinite ease-in-out;
}
@keyframes kbPulse{ 0%{opacity:.75} 50%{opacity:1} 100%{opacity:.75} }

/* Empty state */
.kb-empty{
  padding: 14px; border:1px dashed var(--fz-border); border-radius: 12px; text-align:center;
  color: var(--fz-text-dim); background: color-mix(in oklab, var(--fz-surface) 92%, #fff 8%);
}

/* Input nova tarefa + botão Add */
.tasks-input{
  display:grid; grid-template-columns: 1fr auto; gap: 10px; align-items:center;
}
.tasks-input .hint{
  font: 600 .85rem/1 Poppins,Inter; color: var(--fz-text-dim);
}
#task-input{
  height: 44px; border-radius: 12px; border:1px solid var(--fz-border);
  background: var(--fz-surface-2); color: var(--fz-text); padding:0 12px;
  transition:border-color .2s, box-shadow .2s;
}
#task-input:focus{ outline:none; border-color: color-mix(in oklab, var(--fz-primary) 55%, var(--fz-border));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--fz-primary) 25%, transparent) }
#add-task{
  min-width: 74px; height: 44px; border-radius: 12px; border: 1px solid transparent;
  font: 700 .95rem/1 Inter; color:#fff;
  background: linear-gradient(180deg, var(--fz-primary), #5b2ea5);
  box-shadow: 0 12px 26px rgba(91,46,165,.28);
  transition: transform .06s, box-shadow .15s, filter .15s;
}
#add-task:hover{ filter:brightness(1.03) }
#add-task:active{ transform: translateY(1px) }

/* Limit de 15 tarefas mensagem */
.tasks-limit{ font:600 .9rem/1.2 Poppins,Inter; color:var(--fz-text-dim) }

/* Acessibilidade */
.kb-card:focus-within{ outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--fz-primary) 25%, transparent) }
.kb-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in oklab, var(--fz-primary) 25%, transparent) }

/* Mobile refinements */
@media (max-width:640px){
  .kb-col__head{ padding: 10px 12px }
  .kb-col__list{ padding: 10px }
  .kb-card{ grid-template-columns: 1fr auto; padding: 10px }
  .kb-btn{ width: 34px; height: 34px; border-radius: 10px }
}

/* ===== Kanban tweaks (incremental) ===== */
.tasks-columns{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:12px }
@media (max-width: 800px){ .tasks-columns{ grid-template-columns:1fr } }

.tasks-col{ background:var(--fz-surface); border:1px solid var(--fz-border); border-radius:14px; }
.tasks-col-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-bottom:1px solid var(--fz-border);
  border-radius:14px 14px 0 0;
}
.tasks-col[data-col="todo"] .tasks-col-head{
  background: linear-gradient(180deg, #4867f1 0%, #3357e6 100%);
  color:#fff;
}
.tasks-col[data-col="done"] .tasks-col-head{
  background: linear-gradient(180deg, #10b981 0%, #0ea371 100%);
  color:#fff;
}
.tasks-badge{
  display:inline-grid; place-items:center;
  min-width:28px; height:28px; padding:0 8px; border-radius:999px;
  font-weight:700; background:rgba(0,0,0,.15); color:#fff;
  border:1px solid rgba(255,255,255,.22);
}

.tasks-list{ padding:12px }
.tasks-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 12px; border:1px solid var(--fz-border); border-radius:12px;
  background:var(--fz-surface-2);
}
.tasks-item--done .tasks-body{ text-decoration:line-through; opacity:.75 }

.tasks-actions{ display:flex; gap:8px }
.tasks-icon-btn{
  inline-size:36px; block-size:36px; display:inline-grid; place-items:center;
  border-radius:10px; border:1px solid var(--fz-border); background:transparent; color:var(--fz-text);
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.tasks-icon-btn:hover{ transform:translateY(-1px); border-color:rgba(122,95,167,.45) }
.tasks-icon-btn--success{
  border-color: rgba(16,185,129,.55); color: #22c39a;
}
.tasks-icon-btn--success:hover{
  background: rgba(16,185,129,.14); box-shadow:0 0 12px rgba(16,185,129,.22)
}
.tasks-icon-btn--danger{
  border-color: rgba(248,113,113,.55); color:#f87171;
}
.tasks-icon-btn--danger:hover{
  background: rgba(248,113,113,.16); box-shadow:0 0 12px rgba(248,113,113,.25)
}

/* estado vazio */
.tasks-empty{
  padding:14px; text-align:center; color:var(--fz-text-dim);
  border:1px dashed var(--fz-border); border-radius:12px;
}

/* feedback do item em arraste */
.task-item.is-dragging {
  opacity: .6;
  transform: scale(.98);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}

/* alvo de drop (coluna) */
.tasks-col.drop-target {
  outline: 2px dashed rgba(122,95,167,.45);
  outline-offset: 6px;
  background: linear-gradient(180deg, rgba(122,95,167,.10), transparent);
}

/* posicionador ao arrastar entre cards */
.drop-placeholder {
  height: 44px;           /* altura próxima ao seu card */
  border-radius: 10px;
  border: 2px dashed rgba(255,255,255,.20);
  background: rgba(255,255,255,.06);
  margin: 8px 0;
}
body.light .drop-placeholder {
  border-color: rgba(0,0,0,.18);
  background: rgba(0,0,0,.04);
}
/* DnD — feedback suave */
.tasks-item[draggable="true"] { cursor: grab; }
.tasks-item.is-dragging { opacity: .65; cursor: grabbing; transform: scale(.995); }
.tasks-list.is-dragover,
.tasks-list.dragover { background: color-mix(in oklab, var(--fz-surface-2) 85%, #8a6eff 15%); }

/* borda/placeholder opcional */
.tasks-list.is-dragover { outline: 2px dashed color-mix(in oklab, #8a6eff 60%, #fff 40%); outline-offset: 4px; border-radius: 14px; }

/* ===== Tasks Kanban – visual apenas ===== */

/* === Vertical rhythm: espaçamento consistente entre blocos do <main> === */

/* Empilha os blocos com um gap único (não mexe no layout interno) */
main.container{
  display: grid;
  gap: 24px;                /* ajuste aqui (ex.: 28px) se quiser mais respiro */
}

/* Cards e a Tasks-Card não precisam ter margens; deixam o gap do grid trabalhar */
.card, .tasks-card{
  margin: 0;
}

/* A primeira tasks (MVP) não “puxa” margem extra por algum estilo herdado */
#tasks-mvp{ margin-top: 0; }

/* As sections de conteúdo ganham um pouco mais de respiro interno */
.section{ padding: 32px 0; }        /* antes era 28px — fica mais confortável */
@media (max-width: 680px){
  .section{ padding: 24px 0; }      /* em mobile um pouco mais compacto */
}

/* Título da área de tarefas com respiro controlado */
.tasks-titlebar{ margin-bottom: 12px; }

/* Linha sutil para separar os grupos de conteúdo, mantendo o ar premium */
.section{ border-top: 1px solid var(--fz-border); }  /* já existe, reforçamos a intenção */

/* já existe, mas reforçamos que ele esteja ativo */
#tasks-mvp { margin-bottom: 16px; } /* era 12px, +4px de respiro */

.section { padding: 28px 0; } /* mantém a régua vertical global já usada */

/* passinhos/steps com espaçamento previsível */
.how-steps { margin: .75rem 0 1rem; padding-left: 1.25rem; }
.how-steps li + li { margin-top: .25rem; }

/* h2/h3 com respiro */
#how-to-use h2, #about-pomodoro h2 { margin-bottom: .5rem; }
#how-to-use h3, #about-pomodoro h3 { margin-top: .75rem; margin-bottom: .25rem; }


/* ===== Listas dentro dos blocos de leitura ===== */
/* cobre: .section-info, .section .prose e .section-info.prose */
.section-info ul,
.section-info ol,
.section .prose ul,
.section .prose ol,
.section-info.prose ul,
.section-info.prose ol {
  margin: .5rem 0 1rem;
  padding-inline-start: 1.6rem;   /* recuo claro para bullets/números */
  list-style-position: outside;   /* evita bullet/número “colado” na borda */
}

/* respiro entre itens */
.section-info li + li,
.section .prose li + li,
.section-info.prose li + li {
  margin-top: .35rem;
  line-height: 1.55;
}

.section-info ul,
.section-info ol { padding-inline-start: 1.6rem !important; }

/* === Prose / artigos (hierarquia + respiro) === */
.article.prose{
  /* dá um respiro no topo do card de texto */
  padding-top: 22px;
}

/* separação vertical entre seções textuais */
.card.article.prose + .card.article.prose{
  margin-top: 22px;
}

/* títulos */
.article.prose h2{
  font: 600 clamp(1.25rem, 2.3vw, 1.55rem)/1.25 Poppins, Inter, sans-serif;
  margin: 0 0 10px;                 /* espaço abaixo do H2 */
}
.article.prose h3{
  font: 500 clamp(1.02rem, 2vw, 1.15rem)/1.3 Poppins, Inter, sans-serif;
  color: var(--fz-text-dim);
  margin: 20px 0 8px;               /* respiro acima/abaixo do H3 */
}

/* parágrafos */
.article.prose p{
  line-height: 1.75;
  margin: 6px 0 18px;
}

/* listas — recuo agradável e espaçamento entre itens */
.article.prose ul,
.article.prose ol{
  padding-left: 1.85rem;            /* <-- recuo “mais pra dentro” */
  margin: 8px 0 18px;
  list-style-position: outside;
}
.article.prose ol{ padding-left: 2rem; }  /* números ficam alinhados */
.article.prose li + li{ margin-top: 6px; } /* respiro entre bullets */

/* quando um subtítulo vem após um parágrafo/lista, dê respiro extra */
.article.prose p + h3,
.article.prose ul + h3,
.article.prose ol + h3{ margin-top: 22px; }

/* linha de leitura mais confortável em telas amplas */
@media (min-width: 980px){
  .article.prose{ padding-inline: clamp(16px, 3vw, 32px); }
}

/* === Listas (ul/ol) refinadas === */
.section-info ul,
.section-info ol,
.section .prose ul,
.section .prose ol,
.section-info.prose ul,
.section-info.prose ol {
  margin: 0.75rem 0 1.25rem;             /* mais respiro vertical */
  padding-inline-start: 2rem;            /* aumenta recuo → mais "premium" */
  list-style-position: outside;          /* mantém bullet/número fora do texto */
}

/* respiro entre itens individuais */
.section-info li + li,
.section .prose li + li,
.section-info.prose li + li {
  margin-top: 0.5rem;                    /* maior distância entre linhas */
  line-height: 1.6;                      /* leitura mais confortável */
}


.hero-illustration img.hero-img {
  max-width: 99%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.hero-illustration img {
  max-width: 80%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 12px; /* opcional: arredonda cantos */
  box-shadow: 0 4px 16px rgba(0,0,0,0.25); /* opcional: sombra suave */
}

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.hero-illustration{
  /* usa o mesmo raio dos seus cards */
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.20));
  padding: 0;              /* remove respiro interno */
  overflow: hidden;        /* imagem acompanha o raio */
  box-shadow: 0 6px 24px rgba(0,0,0,.35); /* opcional */
  aspect-ratio: 16/9;      /* “deitada” */
}

.hero-illustration .hero-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;       /* preenche sem distorcer */
}

/* se quiser ainda mais wide no desktop */
@media (min-width: 1024px){
  .hero-illustration{ aspect-ratio: 21/9; }
}

/* === Modal Newsletter (FlowZenHub) ====================================== */
/* Tokens de tema (dark como padrão) */
/* Tokens padrão (fallback caso nada seja setado) */
.nl-modal {
  --nl-bg: #17181d;
  --nl-fg: #E7E9EE;
  --nl-border: rgba(255,255,255,.10);
  --nl-shadow: 0 30px 80px rgba(0,0,0,.45);
  --nl-muted: rgba(231,233,238,.75);
  --nl-input-bg: #0f1014;
  --nl-input-fg: #E7E9EE;
  --nl-input-bd: #7A5FA7;
  --nl-btn: #7A5FA7;
  --nl-btn-hover: #6a529f;
  --nl-ok: #20c997;
  --nl-err: #ff6b6b;
}

/* Força tema escuro no modal quando .is-dark */
.nl-modal.is-dark{
  --nl-bg: #17181d;
  --nl-fg: #E7E9EE;
  --nl-border: rgba(255,255,255,.10);
  --nl-shadow: 0 30px 80px rgba(0,0,0,.45);
  --nl-muted: rgba(231,233,238,.75);
  --nl-input-bg: #0f1014;
  --nl-input-fg: #E7E9EE;
  --nl-input-bd: #7A5FA7;
  --nl-btn: #7A5FA7;
  --nl-btn-hover: #6a529f;
}

/* Força tema claro no modal quando .is-light */
.nl-modal.is-light{
  --nl-bg: #ffffff;
  --nl-fg: #3B3F56;
  --nl-border: rgba(0,0,0,.10);
  --nl-shadow: 0 24px 64px rgba(0,0,0,.12);
  --nl-muted: rgba(59,63,86,.70);
  --nl-input-bg: #ffffff;
  --nl-input-fg: #3B3F56;
  --nl-input-bd: #7A5FA7;
  --nl-btn: #7A5FA7;
  --nl-btn-hover: #5f4990;
}

/* Container/estado */
.nl-modal { position: fixed; inset: 0; z-index: 80; display: none; }
.nl-modal.is-open { display: block; }

.nl-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
}

/* Caixa do modal */
.nl-dialog{
  position: relative;
  width: min(560px, 92vw);
  margin: 8vh auto;
  padding: 22px 22px 16px;
  color: var(--nl-fg);
  background: var(--nl-bg);
  border-radius: 14px;
  box-shadow: var(--nl-shadow);
  /* anel gradiente sutil */
  border: 1px solid transparent;
  background-clip: padding-box, border-box;
  background-image:
    linear-gradient(var(--nl-bg), var(--nl-bg)),
    linear-gradient(135deg, rgba(122,95,167,.45), rgba(143,203,255,.25));
  animation: nl-pop .22s ease-out both;
}

@media (prefers-reduced-motion: reduce){
  .nl-dialog{ animation: none; }
}

@keyframes nl-pop{
  from{ transform: translateY(8px) scale(.98); opacity: 0; }
  to  { transform: none; opacity: 1; }
}

/* Header */
.nl-header h3{
  margin: 0 0 6px;
  font-family: Poppins, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: .2px;
}
.nl-sub{
  margin: 0 0 16px;
  color: var(--nl-muted);
}

/* Form */
.nl-form{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}
@media (max-width: 420px){
  .nl-form{ grid-template-columns: 1fr; }
}

.nl-form input{
  width: 100%; height: 46px; padding: 0 12px 0 14px;
  border-radius: 10px;
  border: 1px solid var(--nl-input-bd);
  background: var(--nl-input-bg);
  color: var(--nl-input-fg);
  font: 400 14px/1 Inter, system-ui, sans-serif;
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
.nl-form input::placeholder{ opacity: .75; }

.nl-form input:focus{
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--nl-btn) 25%, transparent),
    0 8px 24px rgba(0,0,0,.20);
  border-color: var(--nl-btn);
}

.nl-btn{
  height: 46px; padding: 0 18px;
  border: 0; border-radius: 10px;
  background: var(--nl-btn);
  color: #fff;
  font: 600 14px/1 Poppins, system-ui, sans-serif;
  cursor: pointer;
  transition: transform .05s ease, filter .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 6px 18px rgba(122,95,167,.22);
}
.nl-btn:hover{ background: var(--nl-btn-hover); filter: brightness(1.02); }
.nl-btn:active{ transform: translateY(1px); }

.nl-msg{
  grid-column: 1 / -1;
  margin: 2px 2px 0;
  font-size: 13px;
  min-height: 18px;
}
.nl-msg.ok{ color: var(--nl-ok); }
.nl-msg.err{ color: var(--nl-err); }

/* Close */
.nl-close{
  position: absolute; top: 8px; right: 8px;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--nl-border);
  color: inherit; cursor: pointer;
  display: grid; place-items: center;
  transition: background .2s ease, border-color .2s ease, transform .05s ease;
}
.nl-close:hover{
  background: color-mix(in oklab, var(--nl-btn) 18%, transparent);
  border-color: color-mix(in oklab, var(--nl-btn) 45%, var(--nl-border));
}
.nl-close:active{ transform: translateY(1px); }

/* Rodapé */
.nl-foot{ margin-top: 14px; text-align: center; color: var(--nl-muted); }

/* utilidade */
.sr-only{
  position: absolute !important; height: 1px; width: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap;
}