/* ==========================================================
   Hub de Artefatos . Renan Mota
   Porte fiel do handoff do Claude Design para HTML/CSS/JS puro.
   O layout vive em estilo inline gerado pelo app.js (como no
   original). Aqui ficam: variaveis, reset, keyframes e todos os
   estados de interacao, que no Design eram atributos
   style-hover / style-focus / style-active.
   ========================================================== */

:root {
  --accent: #FF3D00;
  --accent-soft: #FF8A5C;
  --blur: 28px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; padding: 0; background: #08070A; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: #F6F2EE;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-soft); }

input, button, textarea { font-family: inherit; }
input::placeholder { color: rgba(246,242,238,.34); }
input:focus { outline: none; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- keyframes ---------- */

@keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,106,26,.35), 0 10px 34px -8px rgba(255,106,26,.5); }
  50%      { box-shadow: 0 0 0 1px rgba(255,106,26,.6),  0 14px 46px -6px rgba(255,106,26,.85); }
}
@keyframes drift  { 0%,100% { transform: translate3d(0,0,0) scale(1); }    50% { transform: translate3d(4%,-6%,0) scale(1.12); } }
@keyframes drift2 { 0%,100% { transform: translate3d(0,0,0) scale(1.05); } 50% { transform: translate3d(-6%,5%,0) scale(.95); } }
@keyframes spin    { from { transform: rotate(0deg); }  to { transform: rotate(360deg); } }
@keyframes spinRev { from { transform: rotate(0deg); }  to { transform: rotate(-360deg); } }
@keyframes corePulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.22); opacity: .82; } }

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- casca e fundo ---------- */

.shell { position: relative; min-height: 100vh; width: 100%; overflow-x: clip; background: #08070A; }
.root  { position: relative; z-index: 1; min-height: 100vh; }

.bg-layer { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.bg-layer canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.bg-veil { position: absolute; inset: 0; background: radial-gradient(100% 70% at 50% 0%, rgba(255,255,255,.05) 0%, rgba(0,0,0,0) 60%); }

.orb { position: absolute; border-radius: 50%; }
.orb-a {
  top: -30%; left: -12%; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(circle, rgba(255,106,26,.26) 0%, rgba(255,106,26,0) 68%);
  filter: blur(30px); animation: drift 18s ease-in-out infinite;
}
.orb-b {
  bottom: -40%; right: -14%; width: 66vw; height: 66vw; max-width: 1000px; max-height: 1000px;
  background: radial-gradient(circle, rgba(255,80,10,.18) 0%, rgba(255,80,10,0) 70%);
  filter: blur(40px); animation: drift2 24s ease-in-out infinite;
}

.rise { animation: riseIn .45s cubic-bezier(.2,.8,.2,1) both; }
.rise-slow { animation: riseIn .5s cubic-bezier(.2,.8,.2,1) both; }

/* ---------- estados de interacao ----------
   No handoff isto vinha como style-hover / style-focus /
   style-active, que so o runtime do Design entende.        */

.i-field:focus {
  border-color: rgba(255,61,0,.65);
  box-shadow: 0 0 0 4px rgba(255,61,0,.14);
  background: rgba(255,255,255,.075);
}

.i-search:focus {
  border-color: rgba(255,106,26,.6);
  box-shadow: 0 0 0 4px rgba(255,106,26,.13);
}

.i-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(255,61,0,.6), 0 20px 50px -8px rgba(255,61,0,1);
}
.i-primary:active { transform: translateY(0) scale(.985); }

.i-link:hover { color: var(--accent); }

.i-linkaccent:hover { color: var(--accent-soft); text-shadow: 0 0 14px rgba(255,106,26,.8); }

.i-ghost:hover {
  border-color: rgba(255,106,26,.5);
  color: var(--accent);
  background: rgba(255,106,26,.08);
}

.i-pass:hover { border-color: rgba(255,61,0,.5); color: var(--accent); }

.i-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,61,0,.42);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,1), 0 0 38px -8px rgba(255,61,0,.45), inset 0 1px 0 rgba(255,255,255,.16);
}

.i-tile:hover { border-color: rgba(255,106,26,.42); transform: translateY(-3px); }

.i-case:hover { border-color: rgba(255,106,26,.4); background: rgba(255,106,26,.06); transform: translateY(-3px); }

.i-outline:hover { background: rgba(255,106,26,.08); color: var(--accent-soft) !important; }

.i-cta-primary:hover {
  background: rgba(255,106,26,.28);
  border-color: rgba(255,106,26,.8);
  color: #fff;
  box-shadow: 0 0 26px -6px rgba(255,106,26,.9);
}

#captura-email:focus {
  outline: none;
  border-color: rgba(255,106,26,.6);
  box-shadow: 0 0 0 3px rgba(255,106,26,.16);
}

.i-copy:hover {
  background: rgba(255,106,26,.26);
  border-color: rgba(255,106,26,.75);
  color: #fff;
  box-shadow: 0 0 22px -4px rgba(255,106,26,.9);
}

.i-check:hover { background: rgba(255,255,255,.045); }

.i-extlink:hover { border-color: rgba(255,106,26,.45); background: rgba(255,106,26,.07); color: #fff; }

.i-clear:hover { color: var(--accent-soft); }

/* ---------- image-slot ---------- */

.image-slot {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  cursor: pointer;
  overflow: hidden;
  transition: background .2s, box-shadow .2s;
}
.image-slot:hover { background: linear-gradient(150deg, rgba(255,106,26,.09), rgba(255,255,255,.02)); }
.image-slot.is-over { box-shadow: inset 0 0 0 2px var(--accent); }
.image-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-slot .hint {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 14px; text-align: center;
  font-size: 12px; line-height: 1.45; color: rgba(246,242,238,.34);
}
.image-slot .hint .ico { font-size: 20px; opacity: .5; }
.image-slot.filled .hint { display: none; }
.image-slot .clear {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  height: 26px; padding: 0 10px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,.16); background: rgba(8,7,10,.72);
  color: rgba(246,242,238,.7); font-size: 11px; font-weight: 600; cursor: pointer;
  display: none; backdrop-filter: blur(10px);
}
.image-slot.filled:hover .clear { display: block; }

/* ---------- responsivo ----------
   O handoff era a versao Desktop. Abaixo de 900px as duas
   colunas viram uma so pra a pagina nunca rolar na horizontal. */

/* So aparece no mobile: o botao de voltar e o indice fechado que
   substituem a coluna lateral. */
.d-mob { display: none !important; }

@media (max-width: 900px) {
  .r-split { grid-template-columns: 1fr !important; }
  .r-pad   { padding: 28px 20px !important; }
  .r-detail { grid-template-columns: 1fr !important; gap: 28px !important; }
  .r-h1    { font-size: 38px !important; }
  .r-h2    { font-size: 34px !important; }
  .r-grid3 { grid-template-columns: 1fr !important; }
  .r-grid2 { grid-template-columns: 1fr !important; }
  .r-topbar { flex-wrap: wrap !important; padding: 12px 18px !important; }
  .r-cards { grid-template-columns: 1fr !important; }

  /* A lateral custava 936px de rolagem antes do titulo do guia, mais
     de uma tela inteira. No desktop ela fica ao lado e nao custa
     nada; aqui ela sai e o indice volta fechado, dentro do texto. */
  .r-side { display: none !important; }
  .d-mob  { display: flex !important; }
  details.d-mob { display: block !important; }

  /* O mapa comia metade da tela do celular */
  .r-graph { height: 300px !important; }
}

details.d-mob > summary { list-style: none; display: block; }
details.d-mob > summary::-webkit-details-marker { display: none; }
details.d-mob > summary::marker { content: ''; }
details.d-mob > summary::after { content: ' ▾'; }
details.d-mob[open] > summary::after { content: ' ▴'; }