:root{
      --preto-abissal:#0A0A0A;
      --texto-primario:#E0E0E0;
      --vermelho-panico:#C62828; /* cor pedida para DETIC */
      --verde-sintetico:#00FF00;
      --ciano-espasmodico:#00FFFF;
      --magenta-estilhacado:#FF00FF;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      background:var(--preto-abissal);
      color:var(--texto-primario);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
      letter-spacing:0.2px;
      background-image:
        radial-gradient(transparent 0 1px),
        radial-gradient(transparent 0 1px);
      background-size: 3px 3px, 5px 5px;
      background-position: 0 0, 1px 1px;
    }

    /* Utilidades */
    .hidden{ display:none !important; }

    /* ===== Camada 1 (splash) ===== */
    .layer1{
      position: fixed; inset: 0;
      display: flex; flex-direction: column; gap: 18px;
      align-items: center; justify-content: center;
      background: var(--preto-abissal);
      z-index: 1000;
      padding: 5vw;
      text-align: center;
    }
    .layer1 .glitch-line{
      font-size: clamp(16px,2.2vw,22px);
      opacity: .95;
      letter-spacing: .5px;
      animation: blink 1.2s steps(2, start) infinite;
    }
    @keyframes blink{
      0%,40%{ opacity:.95 }
      50%   { opacity:.20 }
      90%,100%{ opacity:.95 }
    }

    /* ===== Camada 2 (site) ===== */
    .wrap{
      max-width: 1400px;
      padding: 6rem 5vw 4rem;
    }

    /* Conteúdo principal continua alinhado à esquerda */
    .left-col{
      transform: translateX(-1.5%) rotate(-0.1deg);
    }
    .row:nth-child(2){transform: translateX(3%) rotate(0.2deg);}
    .row:nth-child(3){transform: translateX(-3%) rotate(-0.15deg);}

    .badge{
      display:inline-block; font-size:12px; letter-spacing:2px; text-transform:uppercase;
      border:1px solid var(--texto-primario); padding:4px 8px; opacity:.7; margin-bottom:16px;
    }

    /* 404 com glitch (conteúdo original) */
    .e404{
      position:relative;
      font-size: clamp(64px, 14vw, 220px);
      font-weight: 900; line-height:.8;
      color: var(--vermelho-panico);
      text-shadow: 0 0 1px rgba(198,40,40,0.6), 0 0 18px rgba(198,40,40,0.25);
      letter-spacing: -6px;
    }
    .e404::before, .e404::after{
      content: attr(data-text);
      position:absolute; left:0; top:0;
      mix-blend-mode: difference; opacity:.65; pointer-events:none;
    }
    .e404::before{ color: var(--ciano-espasmodico); transform: translate(2px, -1px); }
    .e404::after { color: var(--magenta-estilhacado); transform: translate(-2px, 1px); }
    @keyframes jitter {
      0%,100%{ transform: translate(0,0); }
      20%{ transform: translate(-1px,0.5px); }
      40%{ transform: translate(1px,-0.5px); }
      60%{ transform: translate(-0.5px,-1px); }
      80%{ transform: translate(0.5px,1px); }
    }
    .e404, .e404::before, .e404::after{ animation: jitter 1.8s infinite steps(2,end); }

    h1{
      font-size: clamp(22px, 2.8vw, 40px);
      text-transform: uppercase; margin: 18px 0 6px 0; letter-spacing: 1.5px;
    }
    .sub{
      font-size: clamp(14px, 1.4vw, 18px); opacity:.85; text-transform: uppercase; letter-spacing:1px; margin-bottom: 28px;
    }
    .body{ max-width: 68ch; font-size: 15px; line-height: 1.4; margin-top: 18px; }

    .cmd{
      display:inline-flex; align-items:center; gap:12px;
      margin-top:28px; padding:10px 14px;
      border:1px solid var(--verde-sintetico);
      background: rgba(0,0,0,.35);
      text-decoration:none; color: var(--verde-sintetico);
      font-weight:700; letter-spacing:.5px; font-family:inherit; font-size:inherit; cursor:pointer;
      box-shadow: 0 0 12px rgba(0,255,0,0.15);
      transform: translateX(-2%);
      transition: opacity .4s ease, visibility .4s ease;
    }
    .cmd .caret{ width:10px; height:14px; background: var(--verde-sintetico); display:inline-block; }
    .cmd.disabled{
      opacity:0; visibility:hidden; pointer-events:none;
    }
    .cmd.enabled{
      opacity:1; visibility:visible; pointer-events:auto;
    }

    .disclaimer{ margin-top: 40px; font-size: 12px; opacity: .6; max-width: 80ch; }
    a, button{ border-radius:0 }

    /* ===== Marca DETIC abaixo, alinhada à esquerda ===== */
    .brand-block{
      margin-top: clamp(24px, 6vh, 64px);
      /* altura visual para caber a marca grande */
      min-height: 40vh;
    }
    .brand-wrap{
      position: relative;
      display:flex; align-items:flex-end; justify-content:flex-start; /* canto inferior esquerdo do bloco */
      width:100%; height:100%;
      overflow:hidden;
      padding-right: 2vw; /* respiro à direita, evita corte em escala alta */
    }
    .brand{
      display:flex; gap: clamp(8px, 1.5vw, 18px);
      line-height: .8;
      user-select:none;
      transform-origin: 0% 100%; /* bottom-left para manter ancoragem à esquerda */
      will-change: transform;
    }
    .brand-letter{
      color: var(--vermelho-panico);
      font-weight: 900;
      /* tamanho base; o JS ajusta escala para ~90% da largura/altura disponíveis */
      font-size: 160px;
      letter-spacing: -6px;
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: drop-shadow(0 0 12px rgba(198,40,40,0.15));
      transition: opacity .4s ease, transform .6s cubic-bezier(.2,.7,.2,1);
    }
    .brand-letter.on{
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .is-playing .brand-letter:not(.on){
      opacity:0;
      transform:translateY(12px) scale(0.98);
    }
    .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;
    }
    @media(max-width:600px){
      .brand-letter{font-size:clamp(48px,15vw,90px)}
    }
    .skip{
      padding:8px 12px;border:1px solid var(--texto-primario);
      color:var(--texto-primario);background:transparent;
      font:inherit;font-size:12px;cursor:pointer;opacity:.8;
    }
    .cmd:focus-visible,.skip:focus-visible{
      outline:2px solid var(--ciano-espasmodico);outline-offset:6px;
    }
    .wrap:focus{outline:none}
    @media(prefers-reduced-motion:reduce){
      *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
      .brand-letter{opacity:1!important;transform:none!important}
    }