/* iah-skin.css — “skin” alinhado ao Houaiss.on
   Ajuste as variáveis abaixo para refletir exatamente o tema do Houaiss.on.
   Somente estilos de apresentação; não muda a estrutura de PHP/HTML existente.
*/
:root{
  /* === Tokens de cor === */
  --iah-primary: #F4A53A;            /* TODO: troque para o primário exato do Houaiss.on */
  --iah-primary-contrast: #ffffff;
  --iah-primary-2: color-mix(in oklab, var(--iah-primary) 85%, #000);
  --iah-bg: #ffffff;
  --iah-soft: #fafafa;
  --iah-text: #111827;            /* slate-900 */
  --iah-muted: #4b5563;           /* slate-600 */
  --iah-border: #e5e7eb;          /* slate-200 */
  --iah-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px -12px rgba(0,0,0,.15);

  /* === Espaçamentos (rem) === */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.25rem; --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem;

  /* === Raio e largura máxima === */
  --radius: 14px;
  --maxw: 1100px;
}

*{box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth}
body{
  margin:0; color:var(--iah-text); background:var(--iah-bg);
  font-family:system-ui,-apple-system,"Inter","Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.6;
}
img{max-width:100%;height:auto;vertical-align:middle}
a{color:var(--iah-primary);text-underline-offset:3px}
a:hover{text-decoration:underline}

/* === Layout utilitário === */
.section{max-width:var(--maxw); margin-inline:auto; padding:var(--sp-12) var(--sp-4)}
.section-narrow{max-width:820px}
.grid{display:grid;gap:var(--sp-6)}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
@media (min-width: 768px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(3,1fr)}
}

/* === Header fixo === */
.header{
  position:sticky; top:0; inset-inline:0; z-index:50;
  background:#fff; border-bottom:1px solid var(--iah-border); backdrop-filter:saturate(180%) blur(6px)
}
.header-inner{max-width:var(--maxw);margin:auto;display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-3) var(--sp-4)}
.brand{display:flex;align-items:center;gap:.75rem;font-weight:800}
.nav{margin-left:auto;display:flex;gap:.25rem;flex-wrap:wrap}
.nav a{padding:.6rem .8rem;border-radius:10px;text-decoration:none;color:inherit}
.nav a:hover{background:var(--iah-soft)}
.cta{display:flex;gap:.5rem;margin-left:.5rem}

/* === Botões === */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:600;padding:.875rem 1.1rem;border-radius:calc(var(--radius) - 4px);
  border:1px solid transparent;text-decoration:none;cursor:pointer;
  transition:transform .05s ease, filter .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--iah-primary);color:var(--iah-primary-contrast)}
.btn-primary:hover{filter:brightness(.96)}
.btn-outline{background:transparent;border-color:var(--iah-border);color:var(--iah-text)}
.btn-outline:hover{background:#f9fafb}

/* === Hero === */
.hero{background:linear-gradient(180deg,#fff,var(--iah-soft));padding:var(--sp-12) var(--sp-4)}
.hero-inner{max-width:var(--maxw);margin:auto;display:grid;gap:var(--sp-8)}
@media (min-width: 900px){.hero-inner{grid-template-columns:1.1fr .9fr;align-items:center}}
.hero h1{font-size:clamp(2rem,3.2vw,2.6rem);letter-spacing:-.01em;margin:.25rem 0 var(--sp-4)}
.hero p{color:var(--iah-muted);margin:0 0 var(--sp-6)}

/* === Cards === */
.card{
  background:#fff;border:1px solid var(--iah-border);border-radius:var(--radius);
  padding:var(--sp-8); box-shadow:var(--iah-shadow);
}
.card h3{margin:0 0 var(--sp-3)}
.card p{margin:0;color:var(--iah-muted)}

/* === Tabelas === */
.table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--iah-border);border-radius:12px;overflow:hidden}
.table th,.table td{padding:14px}
.table thead th{background:#f8fafc;text-align:left;font-weight:600}
.table tbody tr:nth-child(odd){background:#fcfcfd}

/* === Formulários === */
label{font-weight:600;display:block;margin-bottom:.5rem}
.input, textarea, select{
  width:100%;padding:.875rem 1rem;border:1px solid var(--iah-border);
  border-radius:10px;background:#fff;outline:none;
}
.input:focus, textarea:focus, select:focus{
  outline:3px solid color-mix(in oklab, var(--iah-primary) 25%, #fff)
}
.help{color:var(--iah-muted);font-size:.92rem}
.error{color:#b42318}

/* === FAQ / Acordeão simples sem JS (details/summary) === */
.faq{display:grid;gap:var(--sp-3)}
.faq details{
  border:1px solid var(--iah-border);border-radius:12px;padding:1rem;background:#fff
}
.faq summary{cursor:pointer;font-weight:700;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq p{color:var(--iah-muted)}

/* === Rodapé === */
.footer{background:#0b0b0b;color:#e5e7eb;margin-top:var(--sp-12)}
.footer a{color:#c7d2fe}
.footer-inner{max-width:var(--maxw);margin:auto;padding:var(--sp-10) var(--sp-4);display:grid;gap:var(--sp-6)}
@media (min-width: 900px){.footer-inner{grid-template-columns:2fr 1fr 1fr}}
.footer h4{margin:0 0 .5rem}

/* === Utilidades === */
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.muted{color:var(--iah-muted)}
.center{text-align:center}
.chips{display:flex;gap:.5rem;flex-wrap:wrap}
.chip{border:1px solid var(--iah-border);border-radius:999px;padding:.35rem .75rem;background:#fff}

.hide{display:none}