/* ================================================================
   EnP Design System 2026 — Tokens Institucional Claro
   Arquivo centralizado · fonte única de verdade

   Organização segue a spec do Design System EnP v2.0.0
   Modo ativo: Institucional Claro (fundo Frost)
   ================================================================ */

/* ================================ */
/* 0. Reset & Utilitários            */
/* ================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

:root{

  /* ================================ */
  /* §1 Tipografia                     */
  /* ================================ */
  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,"Helvetica Neue",arial,sans-serif;

  /* §1 Escala tipográfica responsiva — mobile-first (< 768px) */
  --fs-display:36px;
  --fs-h1:36px;
  --fs-h2:32px;
  --fs-h3:24px;
  --fs-h4:20px;
  --fs-lead:16px;
  --fs-body:16px;
  --fs-small:12px;

  --lh-h1:1.05;
  --lh-h2:1.1;
  --lh-h3:1.2;
  --lh-h4:1.3;
  --ls-h1:-0.025em;
  --ls-h2:-0.025em;
  --ls-h3:-0.02em;
  --ls-h4:-0.01em;

  /* ================================ */
  /* §2.1 Paleta institucional         */
  /* ================================ */
  --frost:#F4F7FB;
  --pure-white:#FFFFFF;
  --deep-slate:#313642;
  --button-blue:#1076DD;
  --sky-blue:#31B3F9;
  --lightning-lime:#CDFF07;

  /* §2.3 Extensão */
  --nature-green:#00CD4B;
  --dawn-orange:#FF7A27;
  --lightning-yellow:#F4DC18;
  --sunset-pink:#C3355D;

  /* §2.4 Gray Scale */
  --gray-80:#303339;
  --gray-60:#5C6167;
  --gray-40:#979BA1;
  --gray-20:#BDC0C6;
  --gray-10:#EFF1F4;

  /* §2.5 Opacidade */
  --midnight-30:rgba(13,27,46,0.30);
  --midnight-55:rgba(13,27,46,0.55);
  --midnight-70:rgba(13,27,46,0.70);
  --midnight-80:rgba(13,27,46,0.80);
  --white-10:rgba(255,255,255,0.10);
  --white-20:rgba(255,255,255,0.20);
  --white-40:rgba(255,255,255,0.40);
  --slate-20:rgba(49,54,66,0.20);
  --slate-40:rgba(49,54,66,0.40);

  /* ================================ */
  /* §4 Espaçamento (base 4px)         */
  /* ================================ */
  --sp-2:8px;
  --sp-4:16px;
  --sp-6:24px;
  --sp-8:32px;
  --sp-10:40px;
  --sp-12:48px;
  --sp-15:60px;
  --sp-16:64px;
  --sp-20:80px;

  /* ================================ */
  /* §5 Border radius                  */
  /* ================================ */
  --radius-sm:3px;
  --radius-md:6px;
  --radius-input:8px;
  --radius-lg:16px;
  --radius-full:32px;
  --radius-ultra:48px;
  --radius-pill:100px;

  /* ================================ */
  /* §6 Sombras — Light mode           */
  /* ================================ */
  --shadow-card:0 24px 48px -12px rgba(50,50,93,0.1),0 18px 36px -18px rgba(0,0,0,0.1),0 -12px 36px -8px rgba(0,0,0,0.02);
  --shadow-soft:0 10px 30px rgba(0,0,0,0.05);
  --shadow-sticky:4px 0 6px -2px rgba(0,0,0,0.08),6px 0 12px -4px rgba(0,0,0,0.05);

  /* ================================ */
  /* §15a Semântica — Inst. Claro       */
  /* ================================ */

  /* Superfícies */
  --page-bg:var(--frost);
  --card-bg:var(--pure-white);
  --card-inner:var(--gray-10);

  /* Texto */
  --heading:var(--deep-slate);
  --body-text:var(--gray-60);
  --text-secondary:var(--gray-40);
  --link-color:var(--button-blue);
  --link-hover:var(--deep-slate);

  /* Divisores & bordas */
  --divider:var(--gray-20);

  /* ================================ */
  /* §8 CTA — Primário (Inst. Claro)   */
  /* ================================ */
  --cta-primary-bg:var(--button-blue);
  --cta-primary-text:var(--pure-white);
  --cta-hover-bg:var(--pure-white);
  --cta-hover-text:var(--button-blue);
  --cta-hover-border:var(--button-blue);
  --cta-active-bg:#0A5BB5;
  --cta-active-text:var(--pure-white);
  --cta-disabled-bg:#d5d7d9;
  --cta-disabled-text:#494B4D;

  /* §8 CTA — Secundário (outline) */
  --cta-secondary-text:var(--button-blue);
  --cta-secondary-border:var(--button-blue);
  --cta-secondary-hover-bg:var(--button-blue);
  --cta-secondary-hover-text:var(--pure-white);
  --cta-secondary-active-bg:#0A5BB5;
  --cta-secondary-disabled-text:var(--gray-40);
  --cta-secondary-disabled-border:var(--gray-20);

  /* §8 CTA — Ghost */
  --cta-ghost-text:var(--button-blue);
  --cta-ghost-hover:var(--deep-slate);
  --cta-ghost-disabled:var(--gray-40);

  /* ================================ */
  /* §9 Input — Institucional Claro    */
  /* ================================ */
  --input-bg:var(--pure-white);
  --input-border:var(--gray-20);
  --input-border-focus:var(--button-blue);
  --input-border-error:var(--sunset-pink);
  --input-border-success:var(--nature-green);
  --input-label:var(--deep-slate);
  --input-label-focus:var(--button-blue);
  --input-label-error:var(--sunset-pink);
  --input-placeholder:var(--gray-40);
  --input-disabled-bg:var(--gray-10);
  --input-disabled-border:var(--gray-20);

  /* ================================ */
  /* §8 Feedback global                */
  /* ================================ */
  --feedback-success-bg:var(--nature-green);
  --feedback-success-text:#0D1B2E;
  --feedback-error-bg:var(--sunset-pink);
  --feedback-error-text:var(--pure-white);
  --feedback-warning-bg:var(--dawn-orange);
  --feedback-warning-text:#0D1B2E;
  --feedback-info-bg:var(--sky-blue);
  --feedback-info-text:#0D1B2E;

  /* Accent contextual (atalho) */
  --accent:var(--button-blue);
  --accent-text:var(--pure-white);
}

/* ================================ */
/* §1 Tipografia — Base global       */
/* ================================ */
html{
  font-family:var(--font);
  background:var(--page-bg);
  color:var(--body-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

body{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:var(--sp-6) var(--sp-4);
  gap:var(--sp-8);
  overflow-x:hidden;
}
@media(min-width:768px){
  body{padding:var(--sp-10) var(--sp-8)}
  :root{
    --fs-display:70px;
    --fs-h1:58px;
    --fs-h2:42px;
    --fs-h3:30px;
    --fs-h4:22px;
    --fs-lead:18px;
  }
}

/* ================================ */
/* INDEX — navegação por wireframes  */
/* ================================ */
.index{
  width:100%;
  max-width:800px;
  background:var(--card-bg);
  border-radius:var(--radius-lg);
  padding:var(--sp-6);
  box-shadow:var(--shadow-card);
}
.index h2{
  font-size:var(--fs-h3);font-weight:600;
  color:var(--heading);
  letter-spacing:var(--ls-h3);line-height:var(--lh-h3);
  margin-bottom:var(--sp-4);
}
.index-grid{display:flex;flex-direction:column;gap:4px}
.index-link{
  display:flex;align-items:center;gap:var(--sp-2);
  padding:12px;border-radius:var(--radius-md);
  text-decoration:none;color:var(--heading);
  font-size:16px;font-weight:600;
  transition:all ease-in-out 0.15s;
}
.index-link:hover{background:var(--gray-10);color:var(--button-blue)}
.index-rank{
  width:24px;height:24px;border-radius:50%;
  background:var(--accent);color:var(--accent-text);
  font-size:12px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.index-score{
  margin-left:auto;font-size:12px;font-weight:600;
  color:var(--text-secondary);letter-spacing:0.1em;
  text-transform:uppercase;
}
.index-name{flex:1}

/* ================================ */
/* WIREFRAME CARD — container doc    */
/* ================================ */
.wireframe{
  width:100vw;
  margin-left:calc(-50vw + 50%);
  scroll-margin-top:24px;
  margin-top:var(--sp-10);
}
.wf-header{
  background:var(--gray-10);
  padding:var(--sp-4) max(var(--sp-6), calc((100% - 1200px) / 2));
  display:flex;align-items:center;justify-content:space-between;
}
.wf-tag{
  font-size:12px;font-weight:600;
  color:var(--accent);
  text-transform:uppercase;letter-spacing:0.10em;
}
.wf-score{
  font-size:12px;font-weight:600;
  color:var(--accent-text);
  background:var(--accent);
  padding:4px var(--sp-2);
  border-radius:var(--radius-pill);
}
.wireframe > section{
  background:var(--card-bg);
  padding-top:100px;
  padding-bottom:100px;
  padding-left:max(var(--sp-6), calc((100% - 1200px) / 2));
  padding-right:max(var(--sp-6), calc((100% - 1200px) / 2));
}
.wf-footer{
  background:var(--gray-10);
  padding:var(--sp-4) max(var(--sp-6), calc((100% - 1200px) / 2));
}
.wf-footer p{font-size:12px;color:var(--gray-60);line-height:1.5;font-weight:400}
.wf-footer strong{font-weight:600;color:var(--deep-slate)}


/* ================================ */
/* CONTEXT TABLES — header/meta      */
/* ================================ */
.ctx{
  width:100%;
  max-width:800px;
  background:var(--card-bg);
  border-radius:var(--radius-lg);
  padding:var(--sp-6);
  box-shadow:var(--shadow-card);
  overflow:hidden;
}
.ctx .ctx-title{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-1)}
.ctx .ctx-title img{width:28px;height:28px;flex-shrink:0}
.ctx h1{font-size:var(--fs-h4);font-weight:600;color:var(--heading);line-height:var(--lh-h4);letter-spacing:var(--ls-h4)}
.ctx h2{font-size:16px;font-weight:400;color:var(--text-secondary);margin-bottom:var(--sp-4)}
.ctx>p{font-size:16px;color:var(--text-secondary);margin-bottom:var(--sp-4);line-height:1.5}
.ctx h3{font-size:12px;font-weight:600;color:var(--accent);margin-bottom:var(--sp-2);margin-top:var(--sp-4);text-transform:uppercase;letter-spacing:0.10em}
.ctx h3:first-of-type{margin-top:0}
.ctx table{width:100%;border-collapse:collapse;font-size:12px;table-layout:auto}
.ctx th{
  text-align:left;padding:8px;font-weight:600;
  color:var(--heading);border-bottom:1px solid var(--divider);
}
.ctx td{
  padding:8px;color:var(--body-text);
  border-bottom:1px solid var(--divider);
  line-height:1.4;word-break:break-word;
}
.ctx td:first-child{font-weight:600;color:var(--body-text);min-width:90px}
.ctx tr:last-child td{border-bottom:none}
.ctx .token{
  display:inline-block;width:12px;height:12px;
  border-radius:3px;vertical-align:middle;
  margin-right:4px;flex-shrink:0;
  border:1px solid var(--divider);
}

/* ================================ */
/* §8 Botões — Institucional Claro   */
/* ================================ */
.btn-group{display:flex;gap:var(--sp-2);flex-wrap:wrap}

.btn{
  font-family:var(--font);
  font-size:16px;font-weight:600;
  padding:12px 24px;
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--sp-2);white-space:nowrap;
  transition:all ease-in-out 0.15s;
  outline:none;min-height:44px;
  text-decoration:none;text-align:center;
  position:relative;
}

.btn-primary{
  background:var(--cta-primary-bg);
  color:var(--cta-primary-text);
  flex:1;
}
.btn-primary:hover{
  background:var(--cta-hover-bg);
  color:var(--cta-hover-text);
  border-color:var(--cta-hover-border);
}
.btn-primary:active{
  background:var(--cta-active-bg);
  color:var(--cta-active-text);
  transform:scale(0.98);
}
.btn-primary:focus-visible{box-shadow:0 0 0 3px rgba(16,118,221,0.4)}
.btn-primary:disabled{
  background:var(--cta-disabled-bg);
  color:var(--cta-disabled-text);
  cursor:not-allowed;
}

.btn-secondary{
  background:transparent;
  color:var(--cta-secondary-text);
  border:1px solid var(--cta-secondary-border);
  flex:1;
}
.btn-secondary:hover{
  background:var(--cta-secondary-hover-bg);
  color:var(--cta-secondary-hover-text);
  border-color:var(--cta-secondary-hover-bg);
}
.btn-secondary:active{
  background:var(--cta-secondary-active-bg);
  color:var(--pure-white);
  border-color:var(--cta-secondary-active-bg);
  transform:scale(0.98);
}
.btn-secondary:focus-visible{box-shadow:0 0 0 3px rgba(16,118,221,0.4)}
.btn-secondary:disabled{
  background:transparent;
  color:var(--cta-secondary-disabled-text);
  border-color:var(--cta-secondary-disabled-border);
  cursor:not-allowed;
}

.btn-ghost{
  background:transparent;border:none;padding:0;
  font-size:16px;font-weight:600;
  color:var(--cta-ghost-text);
  text-decoration:none;
  transition:all ease-in-out 0.15s;
}
.btn-ghost:hover{
  color:var(--cta-ghost-hover);
  text-decoration:underline;
  text-underline-offset:4px;
}
.btn-ghost:disabled{color:var(--cta-ghost-disabled);cursor:not-allowed}

/* ================================ */
/* Badges                            */
/* ================================ */
.badge{
  font-size:12px;font-weight:600;padding:4px 12px;
  border-radius:var(--radius-full);letter-spacing:0.10em;text-transform:uppercase;
}
.badge--success{background:rgba(0,205,75,0.15);color:var(--nature-green);border:1px solid rgba(0,205,75,0.3)}
.badge--warning{background:rgba(255,122,39,0.15);color:var(--dawn-orange);border:1px solid rgba(255,122,39,0.3)}
.badge--info{background:rgba(49,179,249,0.15);color:var(--sky-blue);border:1px solid rgba(49,179,249,0.3)}
.badge--accent{background:rgba(16,118,221,0.15);color:var(--button-blue);border:1px solid rgba(16,118,221,0.3)}

/* ================================ */
/* Stars & Reviews                   */
/* ================================ */
.stars{display:flex;gap:2px;margin-bottom:var(--sp-1)}
.star{width:16px;height:16px;color:var(--lightning-yellow)}
.review-text{font-size:12px;color:var(--text-secondary);font-weight:400}

/* ================================ */
/* Avatar Stack                      */
/* ================================ */
.avatar-stack{display:flex}
.avatar{
  width:32px;height:32px;border-radius:50%;
  border:2px solid var(--pure-white);
  margin-left:-8px;
}
.avatar:first-child{margin-left:0}
.avatar:nth-child(1){background:linear-gradient(135deg,var(--sky-blue),var(--button-blue))}
.avatar:nth-child(2){background:linear-gradient(135deg,var(--dawn-orange),var(--sunset-pink))}
.avatar:nth-child(3){background:linear-gradient(135deg,var(--nature-green),var(--sky-blue))}
.avatar:nth-child(4){background:linear-gradient(135deg,var(--lightning-yellow),var(--dawn-orange))}
.avatar-count{
  font-size:12px;font-weight:600;
  color:var(--body-text);
  margin-left:var(--sp-2);
  align-self:center;
}

/* ================================ */
/* Trust Logos                       */
/* ================================ */
.logo-placeholder{
  width:56px;height:24px;
  background:var(--gray-10);
  border-radius:var(--radius-sm);
}

/* ================================ */
/* Media Placeholder                 */
/* ================================ */
.media-placeholder{
  width:100%;aspect-ratio:16/9;
  background:linear-gradient(135deg,var(--gray-10),var(--gray-20));
  border-radius:var(--radius-lg);
  display:flex;align-items:center;justify-content:center;
}
.media-placeholder span{font-size:12px;color:var(--text-secondary);font-weight:600;letter-spacing:0.10em;text-transform:uppercase}

/* ================================ */
/* §9 Input Fields                   */
/* ================================ */
.input-field{
  width:100%;
  padding:12px 16px;
  border:1px solid var(--input-border);
  border-radius:var(--radius-input);
  font-family:var(--font);
  font-size:14px;font-weight:400;
  background:var(--input-bg);
  color:var(--heading);
  outline:none;min-height:44px;
  transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
.input-field::placeholder{color:var(--input-placeholder)}
.input-field:focus{
  border-color:var(--input-border-focus);
  border-width:2px;
  box-shadow:0 0 0 3px rgba(16,118,221,0.2);
}
.input-field--error{border-color:var(--input-border-error);border-width:2px}
.input-field--success{border-color:var(--input-border-success);border-width:2px}
.input-field:disabled{
  background:var(--input-disabled-bg);
  border-color:var(--input-disabled-border);
  cursor:not-allowed;
}
textarea.input-field{min-height:100px;resize:vertical}

/* ================================ */
/* Glass Card — modo claro           */
/* ================================ */
.glass{
  background:var(--slate-20);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:var(--radius-lg);
}

/* ================================ */
/* §16 Ícones — NimbusIcons direto   */
/* ================================ */

/* ================================ */
/* Divider                           */
/* ================================ */
.divider{
  width:100%;height:1px;
  background:var(--divider);
  margin:var(--sp-4) 0;
}

/* ================================ */
/* Topbar — nav fixa wireframes     */
/* ================================ */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:9999;
  background:rgba(255,255,255,0.85);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--divider);
  height:44px;display:flex;align-items:center;justify-content:center;
}
.topbar__link{
  display:flex;align-items:center;gap:8px;
  text-decoration:none;color:var(--heading);
  font-size:14px;font-weight:600;font-family:var(--font);
  transition:opacity 0.2s;
}
.topbar__link:hover{opacity:0.7}
.topbar__link img{width:20px;height:20px}
body:has(.topbar){padding-top:44px}