/* =========================================================
   Rarinfra - tema v2 "Dossiê"
   Índice lateral (lombada), pastas com aba, ficha técnica.
   ========================================================= */
:root{
    /* Identidade sempre escura (azul-marinho), independente do sistema do visitante. */
    color-scheme:dark;
    --blue:#4F8EDB;        /* azul de marca, clareado para fundo escuro */
    --blue-deep:#8DB8EE;   /* links e hover */
    --blue-mid:#7FAEE8;
    --btn:#2F6FC6;         /* fundo de botão: contraste AA com texto branco */
    --btn-hover:#255CA8;
    --amber:#F2B04A;       /* âmbar, contraponto quente */
    --amber-ink:#F2B04A;
    --ink:#E4E8EE;
    --ink-soft:#A3ADBA;
    --line:#243448;
    --bg:#0C1522;
    --bg-alt:#101C2C;
    --card:#13233A;
    --bg-deep:#060E19;     /* azul-marinho mais fundo para blocos de contraste */
    --tab-ink:#06101C;     /* texto sobre abas e marcadores azuis */
    --radius:3px;
    --display:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
    --body:'Open Sans',Arial,sans-serif;
    --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:var(--body); font-size:15.5px; line-height:1.65;
  }
  h1,h2,h3,h4{
    font-family:var(--display); font-weight:600; text-wrap:balance;
    margin:0; letter-spacing:0.005em; text-transform:uppercase; color:var(--ink);
  }
  .mono{font-family:var(--mono); letter-spacing:0.02em;}
  .wrap{max-width:1120px; margin:0 auto; padding:0 32px;}
  a{color:inherit;}

  /* ---------- HEADER ---------- */
  header{
    position:sticky; top:0; z-index:50; background:rgba(12,21,34,0.94);
    backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
  }
  .nav{
    max-width:1320px; display:flex; align-items:center; justify-content:space-between;
    gap:28px; padding:14px 32px;
  }
  .logo{
    font-family:var(--display); font-size:24px; font-weight:700; line-height:1.1;
    text-transform:uppercase; letter-spacing:0.04em; min-width:0;
  }
  .logo .dot{color:var(--blue);}
  .logo small{
    display:block; font-family:var(--mono); font-size:9.5px; font-weight:400;
    letter-spacing:0.14em; color:var(--ink-soft);
  }
  .nav-links{display:flex; gap:22px; font-size:13px; font-weight:600; align-items:center; flex-shrink:0;}
  .nav-links a{text-decoration:none; color:var(--ink-soft); transition:color .2s; white-space:nowrap;}
  .nav-links a:hover{color:var(--blue-deep);}
  .nav-cta{
    font-size:13px; font-weight:600; padding:10px 18px; background:var(--btn);
    border-radius:var(--radius); text-decoration:none; color:#fff;
    transition:background .2s; white-space:nowrap; flex-shrink:0;
  }
  .nav-cta:hover{background:var(--btn-hover);}

  /* ---------- BOTÕES ---------- */
  .btn{
    display:inline-block; font-size:13.5px; font-weight:700; padding:13px 24px;
    border-radius:var(--radius); text-decoration:none; white-space:nowrap;
    border:1px solid transparent; transition:background .2s, border-color .2s, color .2s;
  }
  .btn-primary{background:var(--btn); color:#fff;}
  .btn-primary:hover{background:var(--btn-hover); color:#fff;}
  .btn-ghost{border-color:var(--ink-soft); color:var(--ink);}
  .btn-ghost:hover{border-color:var(--blue-deep); color:var(--blue-deep);}

  /* ---------- ESTRUTURA: LOMBADA + CONTEÚDO ---------- */
  .shell{max-width:1320px; margin:0 auto; display:grid; grid-template-columns:200px minmax(0,1fr);}
  .shell .wrap{max-width:1080px; margin:0; padding:0 56px;}
  .shell-main{min-width:0;}
  .spine{
    position:sticky; top:72px; align-self:start; height:calc(100vh - 72px);
    padding:40px 0 24px 32px; border-right:1px solid var(--line);
  }
  .spine-label{
    font-family:var(--mono); font-size:10px; letter-spacing:0.16em; color:var(--ink-soft);
    text-transform:uppercase; margin-bottom:18px;
  }
  .spine ol{list-style:none; margin:0; padding:0; display:grid; gap:2px;}
  .spine .grp{
    font-family:var(--mono); font-size:9.5px; letter-spacing:0.16em; color:var(--amber-ink);
    text-transform:uppercase; margin:14px 0 4px;
  }
  .spine a{
    display:grid; grid-template-columns:52px 1fr; gap:6px; padding:7px 12px 7px 0;
    text-decoration:none; font-size:13px; color:var(--ink-soft);
    border-right:3px solid transparent; margin-right:-2px;
  }
  .spine a .c{font-family:var(--mono); font-size:10.5px; letter-spacing:0.04em; padding-top:2px;}
  .spine a:hover{color:var(--ink);}
  .spine a.on{color:var(--blue-deep); font-weight:600; border-right-color:var(--blue);}

  /* ---------- HERO ---------- */
  .hero{padding:72px 0 64px; border-bottom:1px solid var(--line); background:var(--bg-alt);}
  .hero-grid{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr); gap:48px; align-items:start;}
  .case-tag{
    display:inline-flex; align-items:center; gap:10px; margin-bottom:26px;
    font-family:var(--mono); font-size:11.5px; letter-spacing:0.1em; color:var(--blue-deep);
    border:1px solid var(--line); background:var(--card); padding:6px 12px; border-radius:var(--radius);
  }
  .case-tag::before{content:''; width:6px; height:6px; background:var(--amber); border-radius:50%;}
  .hero h1{font-size:clamp(34px,5.2vw,58px); line-height:1.04;}
  .redact{
    display:inline-block; padding:0 6px; background:var(--ink); color:var(--ink); border-radius:2px;
    transition:background .5s ease-out, color .5s ease-out;
  }
  .redact.revealed{background:transparent; color:var(--blue-mid);}
  .hero p.lede{margin:24px 0 0; max-width:560px; font-size:17px; color:var(--ink-soft);}
  .hero-ctas{margin-top:34px; display:flex; gap:12px; flex-wrap:wrap;}

  .sheet{
    background:var(--card); border:1px solid var(--line); border-top:3px solid var(--blue);
    border-radius:var(--radius); font-family:var(--mono); font-size:12px;
  }
  .sheet-h{
    display:flex; justify-content:space-between; padding:12px 18px; border-bottom:1px dashed var(--line);
    color:var(--ink-soft); letter-spacing:0.08em; font-size:10.5px; text-transform:uppercase;
  }
  .sheet-h b{color:var(--amber-ink); font-weight:500;}
  .sheet dl{margin:0; padding:6px 18px 12px;}
  .sheet dl div{
    display:grid; grid-template-columns:1fr auto; gap:12px; padding:10px 0;
    border-bottom:1px solid var(--line); align-items:baseline;
  }
  .sheet dl div:last-child{border-bottom:none;}
  .sheet dt{color:var(--ink-soft); font-size:11.5px; letter-spacing:0.04em;}
  .sheet dd{
    margin:0; font-family:var(--display); font-weight:600; font-size:26px; line-height:1;
    color:var(--ink); font-variant-numeric:tabular-nums;
  }
  .sheet-f{padding:10px 18px; border-top:1px dashed var(--line); font-size:10.5px; color:var(--ink-soft); letter-spacing:0.04em;}

  /* ---------- SEÇÕES ---------- */
  .section{padding:80px 0; border-bottom:1px solid var(--line); scroll-margin-top:64px;}
  .section.tinted{background:var(--bg-alt);}
  .sec-head{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:end;}
  .eyebrow{
    font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--blue-mid); display:flex; gap:12px; margin-bottom:10px;
  }
  .eyebrow i{font-style:normal; color:var(--amber-ink);}
  .section h2{font-size:clamp(32px,4vw,44px); line-height:1.05;}
  .section .intro{color:var(--ink-soft); max-width:640px; margin:14px 0 0;}
  .ext{font-size:13px; font-weight:700; color:var(--blue-deep); text-decoration:none; white-space:nowrap;}
  .ext:hover{text-decoration:underline;}

  /* ---------- PASTAS COM ABA ---------- */
  .folders{margin-top:58px; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:40px 22px;}
  .folder{
    position:relative; background:var(--card); border:1px solid var(--line); border-top:3px solid var(--blue);
    border-radius:0 var(--radius) var(--radius) var(--radius); padding:26px 26px 24px;
    display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s;
  }
  .folder::before{
    content:attr(data-code); position:absolute; top:-25px; left:-1px; height:22px;
    padding:3px 22px 0 12px; background:var(--blue); color:var(--tab-ink);
    font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; white-space:nowrap;
    clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 100%, 0 100%);
  }
  .folder:hover{transform:translateY(-3px); box-shadow:0 12px 28px -14px rgba(0,0,0,0.6);}
  .status{
    font-family:var(--mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--blue-mid); margin-bottom:14px;
  }
  .status.warm{color:var(--amber-ink);}
  .folder h3{font-size:22px; margin-bottom:10px;}
  .folder p{color:var(--ink-soft); font-size:14.5px; margin:0 0 18px;}
  .folder ul{list-style:none; padding:0; margin:0 0 22px; font-size:13.8px;}
  .folder li{padding:8px 0; border-top:1px solid var(--line); display:flex; gap:10px;}
  .folder li:first-child{border-top:none;}
  .folder li::before{content:'▸'; color:var(--blue); flex-shrink:0;}
  .folder .ext{margin-top:auto;}

  /* ---------- PROVA / PORTE / NOTAS ---------- */
  .proof{margin-top:36px; display:grid; grid-template-columns:repeat(3,1fr); background:var(--bg-deep); border-radius:var(--radius);}
  .proof div{padding:22px 24px; border-right:1px solid rgba(255,255,255,0.1);}
  .proof div:last-child{border-right:none;}
  .proof .k{font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em; color:var(--amber); margin-bottom:6px;}
  .proof .v{color:#fff; font-size:15px;}

  .sizing{
    margin-top:32px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px; align-items:center;
    border:1px solid var(--line); background:var(--card); padding:20px 24px; border-radius:var(--radius);
  }
  .sizing .k{font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft);}
  .bar{display:grid; grid-template-columns:repeat(6,1fr); border:1px solid var(--line);}
  .bar span{
    font-family:var(--mono); font-size:12px; text-align:center; padding:8px 4px;
    border-right:1px solid var(--line); font-variant-numeric:tabular-nums;
  }
  .bar span:last-child{border-right:none;}
  .note{
    margin:32px 0 0; padding:18px 22px; border-left:3px solid var(--blue); background:var(--card);
    color:var(--ink-soft); font-size:14px; border-radius:0 var(--radius) var(--radius) 0;
  }
  .section.tinted .note{background:var(--bg);}
  .section:not(.tinted) .note{background:var(--bg-alt);}

  /* ---------- PENTEST: LINHA DO TEMPO ---------- */
  .steps{margin-top:52px; display:grid; grid-template-columns:repeat(3,1fr);}
  .step{position:relative; padding-right:28px;}
  .step::before{content:''; position:absolute; top:13px; left:28px; right:0; height:2px; background:var(--line);}
  .step:last-child::before{display:none;}
  .step .dot{
    position:relative; z-index:1; width:28px; height:28px; border-radius:50%; background:var(--blue); color:var(--tab-ink);
    font-family:var(--mono); font-size:11px; display:grid; place-items:center; margin-bottom:18px;
  }
  .step .status{margin-bottom:6px;}
  .step h3{font-size:22px; margin-bottom:8px;}
  .step p{color:var(--ink-soft); font-size:14.5px; margin:0 0 12px;}
  .step ul{list-style:none; margin:0; padding:0; font-size:13.5px;}
  .step li{padding:5px 0; display:flex; gap:10px;}
  .step li::before{content:'▸'; color:var(--blue); flex-shrink:0;}

  /* ---------- LIMITES DE ESCOPO ---------- */
  .scope{
    margin-top:36px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:24px; align-items:start;
    border:1px dashed var(--amber); background:var(--card); padding:22px 24px; border-radius:var(--radius);
  }
  .stamp{
    font-family:var(--mono); font-size:10.5px; letter-spacing:0.16em; color:var(--amber-ink);
    border:2px solid var(--amber); padding:8px 12px; text-transform:uppercase;
    transform:rotate(-3deg); text-align:center; line-height:1.4;
  }
  .scope p{margin:0; font-size:14px; color:var(--ink-soft);}
  .scope p + p{margin-top:8px;}
  .scope strong{color:var(--ink);}

  /* ---------- ANEXO: SOLUÇÕES DE TI ---------- */
  .annex{margin-top:44px; border:1px solid var(--line); background:var(--card); border-radius:var(--radius);}
  .annex-row{
    display:grid; grid-template-columns:220px minmax(0,1fr) minmax(0,1fr); gap:24px;
    padding:18px 24px; border-bottom:1px solid var(--line); align-items:baseline;
  }
  .annex-row:last-child{border-bottom:none;}
  .annex-row.head{
    font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--ink-soft); padding-top:12px; padding-bottom:12px; background:var(--bg-alt);
  }
  .annex-row h3{font-size:19px;}
  .annex-row .brands{font-family:var(--mono); font-size:12.5px; color:var(--blue-deep);}
  .annex-row p{margin:0; font-size:14px; color:var(--ink-soft);}

  /* ---------- SOBRE ---------- */
  .about-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:56px; margin-top:36px;}
  .about-grid > p{margin:0; font-size:17px; color:var(--ink-soft);}
  .principles{list-style:none; margin:0; padding:0;}
  .principles li{display:grid; grid-template-columns:48px 1fr; gap:12px; padding:18px 0; border-top:1px solid var(--line);}
  .principles li:first-child{border-top:none; padding-top:0;}
  .principles .num{font-family:var(--mono); font-size:12px; color:var(--amber-ink); padding-top:4px;}
  .principles h3{font-size:19px; margin-bottom:4px;}
  .principles span{font-size:14px; color:var(--ink-soft);}

  /* ---------- CONTATO ---------- */
  .contact-panel{
    margin-top:40px; display:grid; grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr);
    border:1px solid var(--line); background:var(--card); border-radius:var(--radius);
  }
  .contact-info{
    background:var(--bg-deep); color:#fff; padding:32px 30px; display:grid; gap:22px;
    align-content:start; border-radius:var(--radius) 0 0 var(--radius);
  }
  .contact-info .k{font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em; color:var(--amber); margin-bottom:4px;}
  .contact-info .v{font-size:15px;}
  .contact-info a{color:#fff;}
  .contact-form{padding:30px; display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  .contact-form .field{display:grid; gap:6px;}
  .contact-form .field.full, .contact-form button, .contact-form .form-privacy{grid-column:1/-1;}
  .field label{
    font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft);
  }
  .field input, .field select, .field textarea{
    width:100%; background:var(--bg); border:1px solid var(--line); color:var(--ink);
    padding:11px 12px; border-radius:var(--radius); font-family:var(--body); font-size:14.5px;
  }
  .field textarea{resize:vertical; min-height:110px;}
  .field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--blue); border-color:transparent;}

  /* ---------- RODAPÉ ---------- */
  footer{padding:34px 0; background:var(--bg-alt); border-top:1px solid var(--line);}
  .foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;}
  .foot-row .mono{color:var(--ink-soft); font-size:11.5px; letter-spacing:0.06em;}

/* ---------- ACESSIBILIDADE E FORMULÁRIO (adições do tema WP) ---------- */
.screen-reader-text{
  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:focus{
  position:fixed; top:10px; left:10px; z-index:999; width:auto; height:auto;
  clip:auto; background:var(--btn); color:#fff; padding:12px 18px; border-radius:2px;
}

/* Foco visível em toda navegação por teclado */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--amber); outline-offset:2px;
}

/* Honeypot: fora da tela, nunca visível nem focável */
.hp-field{
  position:absolute !important; left:-9999px !important;
  width:1px; height:1px; overflow:hidden;
}

/* Mensagens de retorno do formulário */
.form-alert{
  margin-top:24px; padding:14px 18px; border-radius:2px; font-size:14.5px;
  border-left:3px solid;
}
.form-alert--ok{background:rgba(79,142,219,0.12); border-color:var(--blue); color:var(--blue-deep);}
.form-alert--erro{background:rgba(240,163,44,0.10); border-color:var(--amber); color:var(--amber-ink);}

.form-privacy{
  margin:0; font-size:11.5px; color:var(--ink-soft); line-height:1.5;
}

/* Botão flutuante de WhatsApp */
.whats-float{
  position:fixed; right:20px; bottom:20px; z-index:80;
  width:54px; height:54px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,0.22);
  transition:transform .18s;
}
.whats-float:hover{transform:scale(1.06);}

/* Logo personalizada enviada pelo Personalizador */
.custom-logo{max-height:52px; width:auto; display:block;}
a.logo{text-decoration:none; color:var(--ink);}

/* ---------- RESPONSIVO ---------- */
@media (max-width:1180px){
  .nav-links{gap:16px; font-size:12.5px;}
  .logo{font-size:21px;}
}
@media (max-width:1100px){
  .shell{grid-template-columns:minmax(0,1fr);}
  .spine{display:none;}
  .shell .wrap{margin:0 auto; padding:0 32px;}
}
@media (max-width:980px){
  .nav-links{display:none;}
}
@media (max-width:820px){
  .hero-grid, .about-grid, .contact-panel{grid-template-columns:minmax(0,1fr);}
  .contact-info{border-radius:var(--radius) var(--radius) 0 0;}
  .steps{grid-template-columns:minmax(0,1fr); gap:32px;}
  .step::before{display:none;}
  .proof{grid-template-columns:minmax(0,1fr);}
  .proof div{border-right:none; border-bottom:1px solid rgba(255,255,255,0.1);}
  .annex-row{grid-template-columns:minmax(0,1fr); gap:6px;}
  .annex-row.head{display:none;}
  .sizing, .sec-head{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:560px){
  .nav{padding:12px 16px;}
  .nav-cta{display:none;}
  .wrap, .shell .wrap{padding:0 16px;}
  .section{padding:60px 0;}
  .contact-form{grid-template-columns:minmax(0,1fr); padding:22px 18px;}
  .bar{grid-template-columns:repeat(3,1fr);}
  .bar span:nth-child(3){border-right:none;}
  .bar span:nth-child(-n+3){border-bottom:1px solid var(--line);}
  .scope{grid-template-columns:minmax(0,1fr);}
  .stamp{justify-self:start;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .redact, .whats-float, .folder{transition:none;}
  .folder:hover{transform:none;}
}