/* ═══════════════════════════════════════════════════════════
   REDESIGN — camada gelo
   Carrega depois de base.css. Não reescreve o layout:
   troca superfícies claras e cria o ritmo escuro/gelo.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. seções em gelo ─────────────────────────────────────
   O site era escuro do topo ao rodapé. Alternar dá o mesmo
   ritmo do carrossel: denso, respiro, denso.            */

.ii-gelo{
  background: var(--ii-gelo);
  color: var(--ii-gelo-texto);
  position: relative;
}
.ii-gelo-claro{ background: var(--ii-gelo-claro); color: var(--ii-gelo-texto) }

/* O CSS do site pinta o fundo por ID: `#quem-somos{background:#0E0E10}`.
   Seletor de ID (1,0,0) vence classe (0,1,0), então a faixa de gelo
   ficava coberta. Aqui a seção fica transparente e quem pinta é o
   invólucro. É o único ponto do arquivo que precisa de !important. */
.ii-gelo > section,
.ii-gelo-claro > section,
.ii-gelo > section::before,
.ii-gelo-claro > section::before{
  background-color: transparent !important;
}
/* as manchas de luz e a grade só fazem sentido no escuro */
.ii-gelo > section::after,
.ii-gelo-claro > section::after{ opacity:.06 !important }

/* dentro do gelo, tudo que era claro precisa inverter */
.ii-gelo h1, .ii-gelo h2, .ii-gelo h3, .ii-gelo h4,
.ii-gelo-claro h1, .ii-gelo-claro h2, .ii-gelo-claro h3, .ii-gelo-claro h4{
  color: var(--ii-gelo-texto);
}
.ii-gelo p, .ii-gelo li, .ii-gelo-claro p, .ii-gelo-claro li{ color: var(--ii-gelo-texto-2) }
.ii-gelo .text-white, .ii-gelo-claro .text-white{ color: var(--ii-gelo-texto) !important }
.ii-gelo .text-white\/60, .ii-gelo .text-white\/70, .ii-gelo .text-white\/80,
.ii-gelo-claro .text-white\/60, .ii-gelo-claro .text-white\/70, .ii-gelo-claro .text-white\/80{
  color: var(--ii-gelo-texto-2) !important;
}
.ii-gelo .border-white\/5, .ii-gelo .border-white\/10,
.ii-gelo-claro .border-white\/5, .ii-gelo-claro .border-white\/10{
  border-color: var(--ii-gelo-borda) !important;
}
.ii-gelo .bg-white\/5, .ii-gelo-claro .bg-white\/5{ background: #fff !important }

/* Contraste. O cinza do tema escuro (#8D8D97) sobre gelo (#F1F4F7)
   dá cerca de 2,9:1 e reprova no AA. O #5C666F dá ~5,3:1 e passa.
   Vale para .text-muted e para os utilitários de cinza claro. */
.ii-gelo .text-muted, .ii-gelo-claro .text-muted,
.ii-gelo .text-gray-400, .ii-gelo-claro .text-gray-400,
.ii-gelo .text-gray-500, .ii-gelo-claro .text-gray-500,
.ii-gelo .text-neutral-400, .ii-gelo-claro .text-neutral-400{
  color: var(--ii-gelo-texto-2) !important;
}
/* links dentro do gelo precisam parecer link */
.ii-gelo a:not(.btn-primary):not(.ii-proj):not(.footer-social),
.ii-gelo-claro a:not(.btn-primary):not(.ii-proj):not(.footer-social){
  color: var(--ii-gelo-texto);
}
.ii-gelo a:hover:not(.btn-primary):not(.ii-proj),
.ii-gelo-claro a:hover:not(.btn-primary):not(.ii-proj){ color: var(--ii-ambar) }

/* cartões em gelo: sombra sutil no lugar da borda translúcida */
.ii-gelo .ii-card, .ii-gelo-claro .ii-card{
  background:#fff;
  border: 1px solid var(--ii-gelo-borda);
  box-shadow: 0 0 0 1px rgba(16,19,22,.02), 0 12px 28px -20px rgba(16,19,22,.35);
}

/* a costura entre uma faixa escura e uma de gelo.
   sem isso o corte fica seco demais. */
.ii-costura{ position:relative }
.ii-costura::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--ii-ambar) 22%, var(--ii-ambar) 78%, transparent);
  opacity:.5;
}

/* ── 2. rótulo de seção (o "eyebrow" do sistema editorial) ── */
.ii-rotulo{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family: var(--ii-mono);
  font-size:.8125rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color: var(--ii-texto-2);
  margin-bottom:1rem;
}
.ii-rotulo::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background: var(--ii-ambar); flex:none;
}
.ii-gelo .ii-rotulo, .ii-gelo-claro .ii-rotulo{ color: var(--ii-gelo-texto-2) }

/* ── 3. portfólio ──────────────────────────────────────────
   As capturas agora são WebP com srcset. A moldura ganha
   contorno âmbar no hover, igual ao "parece caro" do post. */
.ii-proj{ display:block; text-decoration:none; color:inherit }
.ii-proj__moldura{
  position:relative; overflow:hidden; border-radius:12px;
  background: var(--ii-grafite);
  border:1px solid var(--ii-borda);
  aspect-ratio: 3 / 2;
  transition: border-color .25s ease, transform .25s ease;
}
.ii-gelo .ii-proj__moldura{ border-color: var(--ii-gelo-borda) }
.ii-proj__moldura img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.ii-proj:hover .ii-proj__moldura{ border-color: var(--ii-ambar); transform: translateY(-3px) }
.ii-proj:hover .ii-proj__moldura img{ transform: scale(1.035) }
.ii-proj__nome{ font-family: var(--ii-display); font-weight:600; font-size:1.0625rem; margin-top:.9rem }
.ii-proj__tipo{
  font-family: var(--ii-mono); font-size:.75rem; letter-spacing:.1em;
  text-transform:uppercase; color: var(--ii-texto-2); margin-top:.2rem; display:block;
}
.ii-gelo .ii-proj__tipo{ color: var(--ii-gelo-texto-2) }

/* ── 4. notícias ───────────────────────────────────────────
   O blog é o motor de SEO. Precisa parecer publicação,
   não "seção de novidades" esquecida.                    */
.ii-post{ padding-bottom:1.75rem; border-bottom:1px solid var(--ii-gelo-borda) }
.ii-post__meta{
  font-family: var(--ii-mono); font-size:.75rem; letter-spacing:.1em;
  text-transform:uppercase; color: var(--ii-gelo-texto-2);
  display:flex; gap:.75rem; align-items:center;
}
.ii-post__meta span::before{ content:"·"; margin-right:.75rem; opacity:.5 }
.ii-post__meta span:first-child::before{ content:none; margin:0 }
.ii-post__titulo{
  font-family: var(--ii-display); font-weight:600;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height:1.22;
  letter-spacing:-.02em; margin:.6rem 0 .5rem; text-wrap: balance;
}
.ii-post__titulo a{ color:inherit; text-decoration:none;
  background-image: linear-gradient(var(--ii-ambar), var(--ii-ambar));
  background-size: 0 2px; background-repeat:no-repeat; background-position: 0 100%;
  transition: background-size .3s ease; }
.ii-post__titulo a:hover{ background-size: 100% 2px }
.ii-post__resumo{ color: var(--ii-gelo-texto-2); line-height:1.62; max-width:66ch }

/* corpo do artigo: medida de leitura, que é onde o SEO mora */
.ii-artigo{ max-width: 68ch; margin-inline:auto }
.ii-artigo > * + *{ margin-top:1.35rem }
.ii-artigo h2{
  font-family: var(--ii-display); font-weight:600;
  font-size: clamp(1.4rem, 3vw, 1.9rem); line-height:1.24; letter-spacing:-.02em;
  margin-top:2.75rem; text-wrap: balance;
}
.ii-artigo h3{ font-family: var(--ii-display); font-weight:600; font-size:1.2rem; margin-top:2rem }
.ii-artigo p, .ii-artigo li{ line-height:1.72; color: var(--ii-gelo-texto-2) }
.ii-artigo strong{ color: var(--ii-gelo-texto); font-weight:600 }
.ii-artigo ul, .ii-artigo ol{ padding-left:1.3rem }
.ii-artigo li + li{ margin-top:.5rem }
.ii-artigo a{ color: var(--ii-gelo-texto); text-decoration:underline; text-decoration-color: var(--ii-ambar); text-underline-offset:3px }
.ii-artigo blockquote{
  border-left:3px solid var(--ii-ambar); padding-left:1.25rem;
  font-size:1.0625rem; color: var(--ii-gelo-texto);
}
.ii-artigo figure img{ border-radius:10px; width:100%; height:auto }
.ii-artigo figcaption{
  font-family: var(--ii-mono); font-size:.75rem; letter-spacing:.06em;
  color: var(--ii-gelo-texto-2); margin-top:.5rem;
}
.ii-artigo code{
  font-family: var(--ii-mono); font-size:.875em;
  background:#fff; border:1px solid var(--ii-gelo-borda);
  padding:.1em .35em; border-radius:4px;
}

/* ── 5. migalhas (BreadcrumbList também vai no JSON-LD) ──── */
.ii-migalhas{
  font-family: var(--ii-mono); font-size:.75rem; letter-spacing:.08em;
  text-transform:uppercase; color: var(--ii-gelo-texto-2);
}
.ii-migalhas a{ color:inherit; text-decoration:none }
.ii-migalhas a:hover{ color: var(--ii-ambar) }
.ii-migalhas li{ display:inline }
.ii-migalhas li + li::before{ content:"›"; margin:0 .5rem; opacity:.6 }

/* ── 6. acessibilidade e movimento ────────────────────────── */
.ii-pular{
  position:absolute; left:-9999px; top:0; z-index:999;
  background: var(--ii-ambar); color: var(--ii-preto);
  padding:.7rem 1.1rem; font-weight:600; border-radius:0 0 6px 0;
}
.ii-pular:focus{ left:0 }
:where(a,button,input,textarea,select):focus-visible{
  outline:2px solid var(--ii-ambar); outline-offset:2px; border-radius:3px;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important }
}

/* ── 7. imagens: nunca estourar ────────────────────────────
   Cuidado aqui: `img[width][height]{height:auto}` tem
   especificidade 0,1,1 e vence as classes de altura do
   Tailwind (0,1,0). Isso estoura logo e ícone. Por isso o
   reset é só de largura, e só onde não há classe de altura. */
img{ max-width:100% }
img:not([class*="h-"]):not([class*="size-"]){ height:auto }