/* Tecela AI — base do site. A identidade entra pelos tokens em :root (cores, fontes, raio).
   Direção D "Ameixa" (decisão do fundador, 2026-09-25): Plum #381932 · Milk #FFF3E6 · acento âmbar contido #C9862D. */
:root{
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Plus Jakarta Sans", var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --bg:#FFF3E6; --bg-2:#FFF9F2; --fg:#2A1426; --fg-2:#5A4256; --muted:#7E6A7A;
  --border:#EAD9CF; --accent:#381932; --accent-fg:#FFF3E6; --accent-2:#C9862D; --accent-2-ink:#A46A1E;
  --danger:#A90E02;
  --radius:12px; --radius-sm:8px; --maxw:1120px; --gutter:16px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#23101F; --bg-2:#2E1729; --fg:#F6ECE4; --fg-2:#D9C8D3; --muted:#A894A5;
    --border:#442A3F; --accent:#F0C9A8; --accent-fg:#23101F; --accent-2:#E0A755; --accent-2-ink:#E0A755;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#23101F; --bg-2:#2E1729; --fg:#F6ECE4; --fg-2:#D9C8D3; --muted:#A894A5;
  --border:#442A3F; --accent:#F0C9A8; --accent-fg:#23101F; --accent-2:#E0A755; --accent-2-ink:#E0A755;
  color-scheme: dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} }
body{margin:0; background:var(--bg); color:var(--fg); font:16px/1.6 var(--font-sans); overflow-x:hidden}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--font-display); line-height:1.15; letter-spacing:-.01em; margin:0 0 .5em; font-weight:650}
h1{font-size:clamp(2rem, 4.5vw, 3.25rem)}
h2{font-size:clamp(1.5rem, 3vw, 2.125rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em}
.container{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter)}
.container.center{text-align:center}
.narrow{max-width:640px; margin:0 auto}
.skip-link{position:absolute; left:-999px; top:8px; background:var(--accent); color:var(--accent-fg); padding:8px 12px; border-radius:var(--radius-sm); z-index:100}
.skip-link:focus{left:8px}

/* Header */
.site-header{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--border)}
.site-header .container{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; position:relative}
.brand{display:inline-flex; align-items:center; gap:10px; color:var(--accent)}
.brand:hover{text-decoration:none}
.brand .logo-mark{height:26px; width:26px; flex:0 0 auto}
.wordmark{display:inline-block; height:20px; width:auto; color:var(--accent)}
.wordmark svg{height:20px; width:auto; display:block}
.site-footer .wordmark{height:18px}
.nav{display:flex; align-items:center; gap:4px}
.nav a{color:var(--fg-2); padding:8px 12px; border-radius:var(--radius-sm); font-weight:500}
.nav a:hover,.nav a[aria-current="page"]{color:var(--fg); background:var(--bg-2); text-decoration:none}
.nav a.btn-primary,.nav a.btn-primary:hover{color:var(--accent-fg); background:var(--accent)}
.nav .btn{margin-left:8px}
.header-tools{display:flex; align-items:center; gap:8px}
.menu-btn{display:none; background:none; border:1px solid var(--border); color:var(--fg); border-radius:var(--radius-sm); padding:8px 10px; cursor:pointer; font:inherit}
.theme-btn{background:none; border:1px solid var(--border); color:var(--fg); border-radius:999px; width:36px; height:36px; cursor:pointer; display:inline-grid; place-items:center; font:inherit}

/* Ícone do botão de tema: lua no claro, sol no escuro */
.theme-btn .icon-sun{display:none}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .theme-btn .icon-moon{display:none} :root:not([data-theme="light"]) .theme-btn .icon-sun{display:block} }
:root[data-theme="dark"] .theme-btn .icon-moon{display:none}
:root[data-theme="dark"] .theme-btn .icon-sun{display:block}
:root[data-theme="light"] .theme-btn .icon-moon{display:block}
:root[data-theme="light"] .theme-btn .icon-sun{display:none}

@media (max-width: 860px){
  .menu-btn{display:inline-flex}
  .nav{display:none; position:absolute; left:0; right:0; top:64px; flex-direction:column; align-items:stretch; background:var(--bg); border-bottom:1px solid var(--border); padding:8px var(--gutter) 16px}
  .nav.is-open{display:flex}
  .nav a{padding:12px}
  .nav .btn{margin:8px 0 0}
}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; border-radius:var(--radius-sm); font-weight:600; border:1px solid transparent; cursor:pointer; line-height:1.2; font:inherit; transition:transform .12s ease, background .12s ease}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn:disabled{opacity:.6; cursor:default; transform:none}
.btn-primary{background:var(--accent); color:var(--accent-fg)}
.btn-secondary{background:transparent; color:var(--fg); border-color:var(--border)}
.btn-secondary:hover{background:var(--bg-2)}

/* Sections */
.section{padding:clamp(48px, 8vw, 96px) 0}
.section.alt{background:var(--bg-2)}
.eyebrow{display:inline-block; font-size:.8125rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:12px}
.lead{font-size:1.125rem; color:var(--fg-2); max-width:62ch}
.hero{padding:clamp(56px, 10vw, 128px) 0 clamp(40px, 6vw, 72px)}
.hero h1{max-width:20ch}
.hero .lead{margin-top:16px}
.hero .actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.grid{display:grid; gap:20px}
.grid-2{grid-template-columns:repeat(2, minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4, minmax(0,1fr))}
@media (max-width: 900px){ .grid-3,.grid-4{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width: 600px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} }
.card{background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:24px}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}
.steps{counter-reset:step; display:grid; gap:16px}
.step{display:grid; grid-template-columns:44px 1fr; gap:16px; align-items:start}
.step::before{counter-increment:step; content:counter(step, decimal-leading-zero); font-family:var(--font-mono); color:var(--accent); font-weight:700; padding-top:4px}
.badge{display:inline-block; font-size:.75rem; font-weight:600; padding:4px 8px; border-radius:999px; border:1px solid var(--border); color:var(--fg-2); background:var(--bg-2)}
.founder{display:grid; grid-template-columns:minmax(200px, 280px) 1fr; gap:32px; align-items:start}
.founder img{border-radius:var(--radius); border:1px solid var(--border)}
@media (max-width: 720px){ .founder{grid-template-columns:1fr} .founder img{max-width:240px} }

/* Prose (artigos, políticas) */
.prose{max-width:72ch}
.prose h2{margin-top:2em}
.prose h3{margin-top:1.5em}
.prose ul,.prose ol{padding-left:1.25em}
.prose li{margin:.25em 0}
.prose blockquote{margin:1.5em 0; padding:0 0 0 1em; border-left:3px solid var(--accent); color:var(--fg-2)}
.prose code{font-family:var(--font-mono); font-size:.9em; background:var(--bg-2); padding:.1em .35em; border-radius:4px}
.prose pre{background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px; overflow:auto}
.prose pre code{background:none; padding:0}
.prose table{border-collapse:collapse; width:100%; font-size:.95em}
.prose th,.prose td{border:1px solid var(--border); padding:8px 10px; text-align:left; vertical-align:top}
.meta{color:var(--muted); font-size:.9375rem}
.post-list{display:grid; gap:16px}
.post-list article{border-top:1px solid var(--border); padding-top:16px}
.post-list h3{margin:0 0 4px}
.post .tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:24px}
.cta-row{margin:24px 0 0}
.prose .cta-row{margin-top:32px}

/* Form */
.form{display:grid; gap:16px; max-width:640px; position:relative}
.field{display:grid; gap:6px}
.field label{font-weight:600}
.field input,.field textarea{width:100%; font:inherit; color:var(--fg); background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px}
.field textarea{min-height:140px; resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.field .hint{color:var(--muted); font-size:.875rem}
.field.error input,.field.error textarea{border-color:var(--danger)}
.field .error-msg{color:var(--danger); font-size:.875rem; display:none}
.field.error .error-msg{display:block}
.check{display:flex; gap:10px; align-items:flex-start; font-size:.95rem; color:var(--fg-2)}
.check input{margin-top:4px; width:auto; flex:0 0 auto}
.hp{position:absolute; left:-9999px; opacity:0; height:0; width:0}
.form-status{padding:12px 14px; border-radius:var(--radius-sm); border:1px solid var(--border); display:none}
.form-status.ok{display:block; border-color:color-mix(in srgb, var(--accent) 40%, var(--border))}
.form-status.fail{display:block; border-color:var(--danger)}

/* Footer */
.site-footer{border-top:1px solid var(--border); padding:40px 0 32px; color:var(--fg-2); font-size:.9375rem}
.site-footer .cols{display:grid; grid-template-columns:2fr 1fr 1fr; gap:24px}
@media (max-width: 720px){ .site-footer .cols{grid-template-columns:1fr} }
.site-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.site-footer a{color:var(--fg-2)}
.site-footer .legal{margin-top:24px; padding-top:16px; border-top:1px solid var(--border); color:var(--muted); font-size:.875rem; display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:space-between}