/* converterem — shared.css da rede.
   :root + componentes EXTRAÍDOS do HTML canônico docs/ux/converterem-v5-memphis.html
   (referência canônica; em divergência, o HTML manda). As views EJS só montam markup e
   injetam dados — zero CSS por página (CLAUDE_CONVERTEREM_UX.md §6/§11).
   Acréscimos da rede (não presentes no canônico de culinária, definidos no doc UX §2/§6/§9):
   tokens --error/--error-soft, .notice (aviso de segurança), .field.has-error (estado),
   .btn (ação secundária, ex.: Trocar) e .prose (conteúdo editorial/institucional md→HTML). */

:root{
  --bg:#fbf8f0; --paper:#fff; --ink:#22202c; --muted:#6a6776; --line:#ece8dd;
  --coral:#ff6a5c; --sun:#ffc83d; --teal:#15bcab; --lilac:#7c5cf0; --ink2:#22202c;
  --error:#d92d3c; --error-soft:#fdecee;
  --font:'Outfit',system-ui,sans-serif;
  --wrap:1180px; --r:18px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--font)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 18px}
a{color:var(--lilac);text-decoration:none;font-weight:600}
a:hover{color:var(--coral)}
:focus-visible{outline:3px solid var(--lilac);outline-offset:3px}

.net{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.net .wrap{display:flex;align-items:center;gap:16px;height:62px}
.brand{font:800 24px/1 var(--font);letter-spacing:-.02em;color:var(--ink)}
.brand .dot{color:var(--coral)}
.net nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1;justify-content:flex-end}
.net nav::-webkit-scrollbar{display:none}
.net nav a{font:600 14px/1 var(--font);color:var(--muted);padding:7px 12px;border-radius:999px;white-space:nowrap}
.net nav a:hover{color:var(--ink);background:var(--sun)}
.net nav a[aria-current=page]{color:#fff;background:var(--lilac)}

.layout{padding:28px 0 10px}
.crumb{font-size:13px;color:var(--muted);margin-bottom:18px;font-weight:500}
.crumb a{color:var(--muted)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:700 12px/1 var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--ink);background:var(--sun);padding:8px 14px;border-radius:999px}
.eyebrow::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--coral)}
h1{font:800 clamp(30px,7vw,52px)/1.02 var(--font);letter-spacing:-.02em;margin:16px 0 .25em;max-width:16ch}
.lede{font-size:18px;color:#4a4856;margin:0 0 24px;max-width:55ch}
.lede strong{color:var(--ink);font-weight:600}
h2{font:700 clamp(22px,4.5vw,28px)/1.15 var(--font);letter-spacing:-.01em;margin:0 0 .5em}
section{margin:0 0 36px}

/* ornamento utilitário: blob/círculo decorativo */
.tool{background:var(--paper);border-radius:var(--r);padding:22px;position:relative;box-shadow:0 14px 40px -22px rgba(34,32,44,.45);overflow:hidden}
.tool::before{content:"";position:absolute;top:-46px;right:-46px;width:130px;height:130px;border-radius:50%;background:var(--teal);opacity:.16}
.tool::after{content:"";position:absolute;left:-30px;bottom:-30px;width:90px;height:90px;background:var(--sun);opacity:.18;border-radius:50% 50% 50% 0}
.fields{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;position:relative;z-index:1}
.field{flex:1;min-width:130px}.field.qtd{flex:0 0 92px;min-width:92px}
label{display:block;font:600 12px/1 var(--font);color:var(--muted);margin-bottom:6px}
select,input{width:100%;min-height:46px;padding:0 12px;background:var(--bg);color:var(--ink);border:2px solid var(--line);border-radius:12px;font:500 15px/1 var(--font)}
select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236a6776' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
select:focus,input:focus{outline:none;border-color:var(--lilac);box-shadow:0 0 0 4px rgba(124,92,240,.16)}

/* BOX DE CÁLCULO — selo colorido + ornamento, protagonista */
.result{margin-top:18px;background:var(--ink);color:#fff;border-radius:var(--r);padding:22px 24px;position:relative;overflow:hidden;z-index:1}
.result::before{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,var(--coral),var(--lilac))}
.result::after{content:"";position:absolute;right:90px;bottom:-26px;width:64px;height:64px;background:var(--teal);border-radius:50%;opacity:.8}
.res-label{font:600 13px/1.3 var(--font);opacity:.78;position:relative;z-index:1}
.res-value{font:800 clamp(42px,12vw,72px)/.95 var(--font);letter-spacing:-.03em;margin:6px 0 3px;font-variant-numeric:tabular-nums;position:relative;z-index:1}
.res-value .res-unit{font-size:.4em;color:var(--sun)}
.res-sub{font:500 12px/1.3 var(--font);opacity:.72;position:relative;z-index:1}

.qa p{margin:0;max-width:60ch;color:#4a4856}.qa strong{color:var(--lilac);font-weight:600}

.tbl-wrap{overflow-x:auto;border-radius:var(--r);background:var(--paper);box-shadow:0 12px 34px -24px rgba(34,32,44,.4)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
thead th{font:700 11px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--teal)}
tbody tr:last-child td{border-bottom:0}tbody tr:nth-child(even){background:#fbfaf6}
td.val{font-weight:700;font-variant-numeric:tabular-nums;color:var(--lilac);white-space:nowrap;text-align:right}
table th:last-child{text-align:right}

.ad-slot{height:0;overflow:hidden}
.ad-slot.is-live{height:auto;overflow:visible;margin:36px 0}
.ad-tag{font:600 10px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.ad-slot.is-live .ad-frame{background:var(--paper);border:2px dashed var(--line);border-radius:var(--r);padding:16px;text-align:center;color:var(--muted);font-size:13px}

.context{background:var(--lilac);color:#fff;border-radius:var(--r);padding:22px 24px;position:relative;overflow:hidden}
.context::after{content:"";position:absolute;right:-24px;bottom:-24px;width:110px;height:110px;border:14px solid rgba(255,255,255,.16);border-radius:50%}
.context h2{margin-top:0;color:#fff;position:relative;z-index:1}.context p{margin:0;max-width:62ch;position:relative;z-index:1}
.context a{color:#fff;text-decoration:underline}.context strong{color:var(--sun);font-weight:700}

.faq details{background:var(--paper);border-radius:14px;margin-bottom:10px;box-shadow:0 8px 24px -20px rgba(34,32,44,.5)}
.faq summary{list-style:none;cursor:pointer;padding:15px 44px 15px 16px;position:relative;font:600 15px/1.3 var(--font)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:16px;top:18px;width:10px;height:10px;border-right:2.5px solid var(--coral);border-bottom:2.5px solid var(--coral);transform:rotate(45deg);transition:.15s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .ans{padding:0 16px 15px;max-width:60ch;color:#4a4856}

.eeat{background:var(--paper);border-left:6px solid var(--teal);border-radius:0 14px 14px 0;padding:13px 18px;font-size:14px;color:#43504a}
.eeat a{color:var(--teal)}

.xgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.xcard{display:block;background:var(--paper);border-radius:14px;padding:16px;color:var(--ink);box-shadow:0 10px 28px -22px rgba(34,32,44,.5);position:relative;border-top:5px solid var(--coral);transition:transform .14s}
.xcard:nth-child(2){border-top-color:var(--teal)}.xcard:nth-child(3){border-top-color:var(--sun)}.xcard:nth-child(4){border-top-color:var(--lilac)}
.xcard:hover{transform:translateY(-3px)}
.xcard b{display:block;font:700 16px/1.2 var(--font)}
.xcard span{font-size:13px;color:var(--muted)}

aside{margin-top:36px}
aside .sticky{display:flex;flex-direction:column;gap:16px}
.side-card{background:var(--paper);border-radius:var(--r);padding:18px;box-shadow:0 10px 28px -22px rgba(34,32,44,.5)}
.side-card h3{font:700 13px/1 var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--lilac);margin:0 0 12px}
.kv{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.kv:last-child{border-bottom:0}.kv .k{color:var(--muted)}.kv .v{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.side-links a{display:block;padding:8px 0;border-bottom:1px solid var(--line);color:var(--ink);font-size:14px}
.side-links a:last-child{border-bottom:0}.side-links a:hover{color:var(--coral)}
.side-ad{display:none}.side-ad .ad-frame{background:var(--bg);border:2px dashed var(--line);border-radius:14px;padding:24px 10px;text-align:center;color:var(--muted);font-size:12px}

footer{background:var(--ink);color:#fff;margin-top:14px;padding:36px 0 26px;position:relative;overflow:hidden}
footer::before{content:"";position:absolute;left:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:var(--lilac);opacity:.25}
.foot-top{display:flex;flex-wrap:wrap;gap:24px 44px;margin-bottom:24px;position:relative;z-index:1}
.foot-brand{flex:1;min-width:230px}.foot-brand .brand{color:#fff}.foot-brand p{color:#b6b3c2;font-size:13px;max-width:38ch;margin:8px 0 0}
.foot-col h3{font:700 11px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--sun);margin:0 0 12px}
.foot-col a{display:block;color:#fff;padding:4px 0;font-size:14px}.foot-col a:hover{color:var(--sun)}
.seal{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--font);color:var(--ink);background:var(--teal);border-radius:999px;padding:7px 14px}
.foot-legal{border-top:1px solid #3a3848;padding-top:16px;color:#9a97a6;font-size:12px;display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:space-between;align-items:center;position:relative;z-index:1}

@media(min-width:960px){
  .layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:start}
  aside{margin-top:0}aside .sticky{position:sticky;top:80px}.side-ad{display:block}
}
@media(min-width:640px){.foot-cols{display:flex;gap:48px}}

/* ===== Acréscimos da rede (não no canônico de culinária — ver cabeçalho) ===== */

/* Ação secundária (ex.: botão "Trocar" a direção do conversor). NUNCA um "Calcular":
   o cálculo é ao vivo (CLAUDE_CONVERTEREM_UX.md §11). */
.btn{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--font);color:var(--ink);background:var(--paper);border:2px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;transition:.14s}
.btn:hover{border-color:var(--lilac);color:var(--lilac);transform:translateY(-1px)}
.btn-swap{position:relative;z-index:1;margin-top:14px}

/* Caixa de aviso/segurança (páginas técnicas, ex.: bitola). Vermelho próprio (--error),
   NUNCA o coral decorativo (§6). Vem ANTES do resultado. */
.notice{background:var(--error-soft);border-left:5px solid var(--error);border-radius:0 14px 14px 0;padding:13px 18px;color:var(--ink);font-size:14px;margin-bottom:18px}
.notice strong{color:var(--error)}

/* Estado de erro de validação (só onde o input pode ser inválido — §9). */
.field.has-error input,.field.has-error select{border-color:var(--error)}
.error-msg{color:var(--error);font:600 13px/1.3 var(--font);margin-top:6px}

/* Notas e texto secundário (corpo segue em --ink; estes são apoio). */
.muted{color:var(--muted);font-size:14px}
.nota{color:var(--muted);font-size:13px;margin-top:10px;max-width:62ch}

/* Conteúdo editorial/institucional (markdown → HTML). Corpo em --ink (§2). */
.prose{max-width:64ch}
.prose h2{font:700 clamp(22px,4.5vw,28px)/1.15 var(--font);letter-spacing:-.01em;margin:1.5em 0 .5em}
.prose h3{font:700 17px/1.3 var(--font);margin:1.3em 0 .4em}
.prose p,.prose li{color:var(--ink)}
.prose p{margin:0 0 1em}
.prose ul,.prose ol{margin:0 0 1em;padding-left:1.3em}.prose li{margin:.35em 0}
.prose strong{font-weight:600}
.prose table{margin:1.2em 0}

/* Formulário "fale conosco" (/contato/) — card Memphis sem ornamento. Inputs herdam o estilo
   global de select/input; textarea + estados próprios. Honeypot escondido fora da tela. */
.fc-form{background:var(--paper);border-radius:var(--r);padding:22px;box-shadow:0 14px 40px -22px rgba(34,32,44,.45)}
.fc-form h2{margin-top:0}
.fc-field{margin-bottom:14px}
.fc-form textarea{width:100%;min-height:120px;background:var(--bg);color:var(--ink);border:2px solid var(--line);border-radius:12px;font:500 15px/1.6 var(--font);padding:10px 12px;resize:vertical}
.fc-form textarea:focus{outline:none;border-color:var(--lilac);box-shadow:0 0 0 4px rgba(124,92,240,.16)}
.fc-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fc-status{margin:12px 0 0;font-weight:600;font-size:14px;min-height:1.2em}
.fc-status.ok{color:var(--teal)}
.fc-status.err{color:var(--error)}

/* Vitrine de widgets embedáveis (/widgets/): prévia ao vivo lado a lado com o código p/ copiar.
   O widget em si traz CSS próprio escopado (.cvw); aqui é só o layout da página. */
.wdg{margin:28px 0}
.wdg h2{margin-bottom:.2em}
.wdg-demo{display:grid;gap:20px;margin-top:14px}
.wdg-cap{display:block;font:600 11px/1 var(--font);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:8px}
.wdg-code pre{background:var(--ink);color:#f4f2ee;border-radius:14px;padding:14px 16px;overflow:auto;margin:0}
.wdg-code code{font:500 13px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-all}
@media(min-width:720px){.wdg-demo{grid-template-columns:minmax(0,420px) minmax(0,1fr);align-items:start}}