/* ==========================================================================
   KIT DO DONO DE ASSISTÊNCIA, Reparo Digital
   Design system compartilhado (hub, landing e os 10 módulos)
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root{
  /* Marca */
  --green:      #2FE889;
  --green-lt:   #5FF0A5;
  --green-dk:   #16C06B;
  --green-deep: #0B7F4A;

  /* Superfícies */
  --bg:         #06110E;
  --bg-2:       #071310;
  --surface:    #0B1A16;
  --surface-2:  #0F231D;
  --surface-3:  #143028;

  /* Texto */
  --text:       #E8F3EF;
  --muted:      #9DB0AB;
  --muted-2:    #7E938D;
  --faint:      #3B5750;

  /* Linhas e brilhos */
  --line:       rgba(47,232,137,.14);
  --line-soft:  rgba(232,243,239,.08);
  --glow:       0 0 0 1px rgba(47,232,137,.20), 0 8px 40px -12px rgba(47,232,137,.35);

  /* Sinal */
  --warn:       #FFC53D;
  --danger:     #FF6B5A;

  /* Métrica */
  --radius:     16px;
  --radius-lg:  24px;
  --maxw:       1120px;
  --measure:    68ch;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --- Reset -------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; }
img,svg,video{ display:block; max-width:100%; height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* --- Base --------------------------------------------------------------- */
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:17px;
  line-height:1.65;
  color:var(--text);
  background:var(--bg);
  font-feature-settings:'cv11','ss01';
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Fundo vivo: gradiente + malha técnica sutil (remete ao traço do logo) */
.bg-canvas{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 600px at 12% -5%, rgba(47,232,137,.10), transparent 60%),
    radial-gradient(700px 500px at 95% 8%, rgba(47,232,137,.06), transparent 55%),
    linear-gradient(140deg,#06110E 0%,#0A1714 46%,#071310 100%);
}
.bg-canvas::after{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(47,232,137,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(47,232,137,.05) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(1000px 700px at 50% 0%, #000 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(1000px 700px at 50% 0%, #000 0%, transparent 75%);
}

/* --- Tipografia --------------------------------------------------------- */
.display{
  font-weight:800; letter-spacing:-.035em; line-height:1.04;
  font-size:clamp(2.1rem,1.2rem + 4.4vw,4.5rem);
}
.h1{ font-weight:800; letter-spacing:-.03em; line-height:1.1; font-size:clamp(1.8rem,1.1rem + 3vw,3.1rem); }
.h2{ font-weight:800; letter-spacing:-.025em; line-height:1.15; font-size:clamp(1.5rem,1rem + 2vw,2.3rem); }
.h3{ font-weight:700; letter-spacing:-.02em; line-height:1.25; font-size:clamp(1.15rem,.95rem + .9vw,1.5rem); }
.lead{ font-size:clamp(1.05rem,.98rem + .45vw,1.3rem); color:var(--muted); max-width:var(--measure); }
.small{ font-size:.875rem; }
.mono{ font-family:ui-monospace,'SF Mono','Cascadia Code',Consolas,monospace; font-size:.9em; letter-spacing:-.01em; }
.grad{
  background:linear-gradient(96deg,var(--green-lt),var(--green) 45%,var(--green-dk));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.txt-muted{ color:var(--muted); }
.txt-green{ color:var(--green); }

/* --- Layout ------------------------------------------------------------- */
.wrap{ width:min(100% - 2.5rem, var(--maxw)); margin-inline:auto; }
.wrap-narrow{ width:min(100% - 2.5rem, 780px); margin-inline:auto; }
.section{ padding-block:clamp(3.5rem,2rem + 7vw,7rem); }
.stack > * + *{ margin-top:1.1rem; }
.stack-lg > * + *{ margin-top:2rem; }
.row{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }

/* --- Eyebrow / etiquetas ------------------------------------------------ */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green); padding:.42rem .85rem; border-radius:100px;
  background:rgba(47,232,137,.08); border:1px solid var(--line);
}
.eyebrow::before{
  content:''; width:6px; height:6px; border-radius:50%; background:var(--green);
  box-shadow:0 0 10px var(--green);
}

.tag{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:.28rem .6rem; border-radius:6px;
  background:var(--surface-3); color:var(--muted); border:1px solid var(--line-soft);
}
.tag--live{ background:rgba(47,232,137,.12); color:var(--green); border-color:var(--line); }

/* --- Botões ------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.7rem; border-radius:100px; border:1px solid transparent;
  font-weight:700; font-size:1rem; letter-spacing:-.01em; cursor:pointer;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  text-align:center;
}
.btn:focus-visible{ outline:3px solid var(--green-lt); outline-offset:3px; }
.btn--primary{
  background:linear-gradient(180deg,var(--green-lt),var(--green));
  color:#04120B;
  box-shadow:0 10px 30px -10px rgba(47,232,137,.6);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -12px rgba(47,232,137,.75); }
.btn--ghost{ background:transparent; border-color:var(--line); color:var(--text); }
.btn--ghost:hover{ background:rgba(47,232,137,.07); border-color:var(--green); }
.btn--block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none !important; }

/* --- Cartões ------------------------------------------------------------ */
.card{
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  padding:1.6rem;
  position:relative;
  transition:border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.card--hover:hover{ transform:translateY(-4px); border-color:var(--line); box-shadow:var(--glow); }

/* --- Formulário --------------------------------------------------------- */
.field{ display:block; }
.field > label{
  display:block; font-size:.82rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.5rem;
}
.input{
  width:100%; padding:.95rem 1.1rem; border-radius:12px;
  background:rgba(6,17,14,.7); border:1px solid var(--line-soft); color:var(--text);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.input::placeholder{ color:var(--faint); }
.input:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 4px rgba(47,232,137,.14); }
.input[aria-invalid="true"]{ border-color:var(--danger); }
.field-error{ display:none; color:var(--danger); font-size:.85rem; margin-top:.45rem; }
.field-error.is-visible{ display:block; }

/* --- Barra de progresso ------------------------------------------------- */
.progress{ height:6px; border-radius:100px; background:var(--surface-3); overflow:hidden; }
.progress > i{
  display:block; height:100%; width:0%; border-radius:100px;
  background:linear-gradient(90deg,var(--green-dk),var(--green-lt));
  transition:width .6s var(--ease);
}

/* --- Revelação no scroll ------------------------------------------------ */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* --- Rodapé ------------------------------------------------------------- */
.foot{ border-top:1px solid var(--line-soft); padding-block:2.5rem; color:var(--faint); font-size:.85rem; }

/* --- Acessibilidade ----------------------------------------------------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:.5rem; top:-4rem; z-index:99; padding:.7rem 1.1rem;
  background:var(--green); color:#04120B; border-radius:8px; font-weight:700;
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:.5rem; }

/* ==========================================================================
   IMPRESSÃO, cada módulo vira PDF a partir desta mesma página
   ========================================================================== */
@media print{
  @page{ size:A4; margin:16mm 14mm; }

  :root{ --text:#0F1D18; --muted:#4A5B55; --line:#D4E4DD; --line-soft:#E3EDE9; }

  .bg-canvas,.no-print,.btn,nav,.skip-link{ display:none !important; }

  body{ background:#fff; color:#0F1D18; font-size:11pt; line-height:1.5; }
  .wrap,.wrap-narrow{ width:100%; }
  .section{ padding-block:0; }

  .card{
    background:#fff; border:1px solid #D4E4DD; box-shadow:none;
    break-inside:avoid; page-break-inside:avoid; padding:12pt;
  }
  .grad{ -webkit-text-fill-color:#0B7F4A; color:#0B7F4A; }
  .txt-green{ color:#0B7F4A !important; }
  .eyebrow{ background:#EAF9F1; border-color:#BFE8D3; color:#0B7F4A; }
  .tag{ background:#EAF9F1; color:#0B7F4A; border-color:#BFE8D3; }

  h1,h2,h3,.h1,.h2,.h3,.display{ break-after:avoid; page-break-after:avoid; color:#08150F; }
  .reveal{ opacity:1 !important; transform:none !important; }
  a{ color:#0B7F4A; }
  .print-break{ break-before:page; page-break-before:always; }
}