/* =====================================================================
   Minha Caixa Criativa · Bruna Veiga Design

   1. Tokens          5. Nichos e cards
   2. Reset           6. Rodapé
   3. Base            7. Animação de entrada
   4. Layout          8. Movimento reduzido

   Breakpoint único: 37.5em (600px). Media queries não aceitam var(),
   então ele fica escrito direto: procure "37.5em" para mudar.
   Nenhuma regra usa !important.
===================================================================== */


/* ---------- 1. Tokens ---------- */
:root{
  color-scheme:dark;

  /* canais RGB, pra montar as transparências a partir de uma cor só */
  --rgb-lime:191 255 56;
  --rgb-white:241 241 239;
  --rgb-gray:161 161 160;

  /* cores */
  --color-bg:#090909;
  --color-surface:#101010;
  --color-surface-2:#161616;
  --color-lime:rgb(var(--rgb-lime));             /* #BFFF38 */
  --color-text-strong:rgb(var(--rgb-white));     /* #F1F1EF */
  --color-text:rgb(var(--rgb-gray));             /* #A1A1A0 */
  --color-text-subtle:#828281;  /* era #6E6E6D (3,6–3,9:1); este passa no WCAG AA (4,7–5,2:1) */
  --color-line:rgb(var(--rgb-white) / .075);
  --color-line-strong:rgb(var(--rgb-white) / .16);
  --color-track:rgb(var(--rgb-white) / .06);

  --lime-tint:rgb(var(--rgb-lime) / .05);        /* fundo do chip e dos ícones no hover */
  --lime-edge:rgb(var(--rgb-lime) / .3);         /* borda do chip */
  --lime-edge-hover:rgb(var(--rgb-lime) / .4);   /* bordas no hover */
  --lime-glow:rgb(var(--rgb-lime) / .5);

  /* tipografia */
  --font-sans:'Rethink Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --weight-regular:400;
  --weight-semibold:600;
  --weight-bold:700;

  --text-caps:.6875rem;                          /* 11px, rótulos em caixa alta */
  --text-xs:.8125rem;                            /* 13px */
  --text-sm:.90625rem;                           /* 14,5px */
  --text-base:1rem;                              /* 16px */
  --text-lead:clamp(1rem, 2.2vw, 1.1875rem);     /* 16 → 19px */
  --text-h2:clamp(1.375rem, 3.2vw, 1.875rem);    /* 22 → 30px */
  --text-h1:clamp(2.375rem, 7.4vw, 4.25rem);     /* 38 → 68px */
  --tracking-caps:.12em;

  /* espaçamento (escala de 4px) */
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.25rem;
  --space-6:1.5rem;
  --space-8:2rem;
  --space-10:2.5rem;
  --space-12:3rem;
  --space-16:4rem;
  --space-18:4.5rem;
  --space-28:7rem;
  --gutter:clamp(1.125rem, 4vw, 1.5rem);         /* margem lateral: 18px no celular, 24px no resto */

  /* medidas */
  --maxw:72.5rem;                                /* 1160px */
  --hero-maxw:51.25rem;                          /* 820px */
  --logo-h:1.625rem;
  --icon-box:2.25rem;
  --favicon:1.25rem;
  --arrow:1rem;
  --social:2.625rem;
  --social-icon:1.125rem;
  --card-min:16.25rem;                           /* 260px */
  --progress-h:3px;

  /* forma */
  --radius-sm:.1875rem;
  --radius-md:.5rem;
  --radius-pill:999px;
  --radius-circle:50%;
  --shadow-glow:0 0 .75rem var(--lime-glow);
  --focus-ring:2px solid var(--color-lime);

  /* movimento */
  --duration-fast:.2s;
  --duration-reveal:.5s;
  --ease-out:cubic-bezier(.2, .8, .2, 1);
  --reveal-step:40ms;
  --reveal-distance:.875rem;
  --hover-lift:-2px;

  --z-progress:60;

  /* seta ↗ dos cards, desenhada por máscara: uma regra em vez de 92 <svg> no HTML */
  --icon-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
}


/* ---------- 2. Reset ---------- */
*,
*::before,
*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

body,h1,h2,h3,p,ul{margin:0}

/* role="list" no HTML devolve a semântica de lista que o Safari tira quando some o marcador */
ul[role="list"]{padding:0;list-style:none}

img,
svg{display:block;max-width:100%}

button,
input,
select,
textarea{font:inherit;color:inherit}

a{color:inherit}

:focus-visible{outline:var(--focus-ring);outline-offset:2px}

/* alvo do "Voltar ao topo": recebe o foco pra quem usa teclado, mas não é clicável */
[tabindex="-1"]:focus{outline:none}


/* ---------- 3. Base ---------- */
html{scroll-behavior:smooth}

body{
  min-height:100vh;
  min-height:100dvh;
  font-family:var(--font-sans);
  font-size:var(--text-base);
  line-height:1.6;
  color:var(--color-text);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* os dois brilhos lime da marca; z-index -1 põe atrás de tudo sem precisar
   de position/z-index em cada bloco da página */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(90% 50% at 85% -10%, rgb(var(--rgb-lime) / .07), transparent 60%),
    radial-gradient(70% 40% at 0% 100%, rgb(var(--rgb-lime) / .035), transparent 65%);
}

h1,
h2,
h3{
  font-weight:var(--weight-semibold);
  color:var(--color-text-strong);
  overflow-wrap:break-word;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}


/* ---------- 4. Layout ---------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* barra de progresso: o JS só mexe em transform (GPU), nunca em width */
.progresso{
  position:fixed;
  inset:0 0 auto;
  z-index:var(--z-progress);
  height:var(--progress-h);
  background:var(--color-track);
  pointer-events:none;
}
.progresso span{
  display:block;
  height:100%;
  background:var(--color-lime);
  box-shadow:var(--shadow-glow);
  transform:scaleX(0);
  transform-origin:left center;
}

/* cabeçalho */
.marca{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding-top:var(--space-12);
}
.marca img{width:auto;height:var(--logo-h)}
.marca span{
  padding-left:var(--space-3);
  font-size:var(--text-caps);
  letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
  color:var(--color-text-subtle);
  border-left:1px solid var(--color-line-strong);
}

/* abertura */
.abertura{
  max-width:var(--hero-maxw);
  padding-block:var(--space-18) var(--space-4);
}

.chip{
  display:inline-block;
  margin-bottom:var(--space-6);
  padding:.4375rem .9375rem;                     /* 7px 15px: medida do chip da marca */
  font-size:var(--text-caps);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
  color:var(--color-lime);
  background:var(--lime-tint);
  border:1px solid var(--lime-edge);
  border-radius:var(--radius-pill);
}

h1{
  margin-bottom:var(--space-6);
  font-size:var(--text-h1);
  line-height:1.04;
  letter-spacing:-.025em;
}
h1 em{font-style:normal;color:var(--color-lime)}

.intro{max-width:56ch;font-size:var(--text-lead)}


/* ---------- 5. Nichos e cards ---------- */
.nicho{padding-block:var(--space-16) var(--space-2)}

.topo{
  margin-bottom:var(--space-6);
  padding-bottom:var(--space-4);
  font-size:var(--text-h2);
  line-height:1.2;
  letter-spacing:-.015em;
  border-bottom:1px solid var(--color-line);
}

.grade{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, var(--card-min)), 1fr));
  gap:var(--space-3);
}
/* o <li> é o item da grade (e quem anima na entrada); o card dentro dele
   é quem reage ao hover. Separados, um transform não anula o outro. */
.grade > li{display:grid}

.ferramenta{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:var(--space-5);
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  transition:
    background-color var(--duration-fast),
    border-color var(--duration-fast),
    transform var(--duration-fast);
}
.ferramenta:hover{
  background:var(--color-surface-2);
  border-color:var(--lime-edge-hover);
  transform:translateY(var(--hover-lift));
}

/* seta ↗ no canto */
.ferramenta::before{
  content:"";
  position:absolute;
  top:var(--space-5);
  right:var(--space-5);
  width:var(--arrow);
  height:var(--arrow);
  background:var(--color-text-subtle);
  -webkit-mask:var(--icon-arrow) center / contain no-repeat;
          mask:var(--icon-arrow) center / contain no-repeat;
  transition:background-color var(--duration-fast), transform var(--duration-fast);
}
.ferramenta:hover::before{
  background:var(--color-lime);
  transform:translate(2px, -2px);
}

.cabeca{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  margin-bottom:var(--space-3);
  padding-right:var(--space-6);                  /* espaço da seta */
}

/* inicial da ferramenta, com o favicon por cima; se o favicon falhar, fica a letra */
.icone{
  position:relative;
  display:grid;
  flex-shrink:0;
  place-items:center;
  width:var(--icon-box);
  height:var(--icon-box);
  overflow:hidden;
  font-size:.9375rem;
  font-weight:var(--weight-bold);
  color:var(--color-lime);
  background:var(--color-surface-2);
  border:1px solid var(--color-line-strong);
  border-radius:var(--radius-md);
}
.icone img{
  position:absolute;
  inset:0;
  width:var(--favicon);
  height:var(--favicon);
  margin:auto;
  border-radius:var(--radius-sm);
}

.nome{display:flex;flex-direction:column;min-width:0}

.ferramenta h3{
  font-size:var(--text-base);
  line-height:1.3;
  letter-spacing:-.005em;
}
.ferramenta h3 a{text-decoration:none}

/* o link cobre o card inteiro (o card todo continua clicável), mas o nome
   acessível do link fica só o nome da ferramenta */
.ferramenta h3 a::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:var(--radius-md);
}
.ferramenta h3 a:focus-visible{outline:none}
.ferramenta h3 a:focus-visible::after{outline:var(--focus-ring);outline-offset:2px}

.dominio{
  overflow:hidden;
  font-size:var(--text-xs);
  color:var(--color-text-subtle);
  white-space:nowrap;
  text-overflow:ellipsis;
}

.ferramenta p{font-size:var(--text-sm);line-height:1.55}


/* ---------- 6. Rodapé ---------- */
.rodape{
  margin-top:var(--space-28);
  border-top:1px solid var(--color-line);
}

/* três colunas (1fr auto 1fr) pra os ícones ficarem no centro de verdade,
   mesmo com o copyright e o "Voltar ao topo" tendo larguras diferentes */
.rodape-linha{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:var(--space-5);
  padding-block:var(--space-8) var(--space-10);
}

.copyright{font-size:var(--text-xs);color:var(--color-text-subtle)}

.redes{display:flex;gap:var(--space-3)}
.redes a{
  display:grid;
  place-items:center;
  width:var(--social);
  height:var(--social);
  color:var(--color-text);
  background:var(--color-surface);
  border:1px solid var(--color-line-strong);
  border-radius:var(--radius-circle);
  transition:
    color var(--duration-fast),
    background-color var(--duration-fast),
    border-color var(--duration-fast);
}
.redes a:hover{
  color:var(--color-lime);
  background:var(--lime-tint);
  border-color:var(--lime-edge-hover);
}
.redes svg{width:var(--social-icon);height:var(--social-icon)}

.voltar{
  justify-self:end;
  padding-block:var(--space-1);                  /* área de toque ≥ 24px (WCAG 2.5.8) */
  font-size:var(--text-xs);
  color:var(--color-text);
  text-decoration-color:rgb(var(--rgb-gray) / .5);
  text-underline-offset:.3em;
  transition:color var(--duration-fast), text-decoration-color var(--duration-fast);
}
.voltar:hover{color:var(--color-lime);text-decoration-color:currentColor}


/* ---------- 7. Animação de entrada ----------
   O JS só põe .rv se houver IntersectionObserver e a pessoa não tiver pedido
   "reduzir movimento". Esconder é instantâneo; só o aparecer (.in) tem transição,
   assim não há piscada se o script rodar depois da primeira pintura. */
@media (prefers-reduced-motion:no-preference){
  .rv:not(.in){
    opacity:0;
    transform:translateY(var(--reveal-distance));
  }
  .rv.in{
    transition:
      opacity var(--duration-reveal) ease,
      transform var(--duration-reveal) var(--ease-out);
    transition-delay:calc(var(--i, 0) * var(--reveal-step));
  }
}

/* cascata: cada card espera 40ms a mais que o anterior, até o 7º */
.grade > :nth-child(2){--i:1}
.grade > :nth-child(3){--i:2}
.grade > :nth-child(4){--i:3}
.grade > :nth-child(5){--i:4}
.grade > :nth-child(6){--i:5}
.grade > :nth-child(n+7){--i:6}


/* ---------- Responsivo (37.5em = 600px) ---------- */
@media (max-width:37.5em){
  .abertura{padding-block:var(--space-12) var(--space-2)}
  .nicho{padding-block:var(--space-12) var(--space-1)}
  .rodape{margin-top:var(--space-18)}
  .rodape-linha{
    grid-template-columns:1fr;
    justify-items:center;
    gap:var(--space-4);
    text-align:center;
  }
  .voltar{justify-self:center}
}


/* ---------- 8. Movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ferramenta:hover,
  .ferramenta:hover::before{transform:none}
}