/* Ferramentas de criação: leitura em português e acesso aos projetos oficiais. */
.tools-section{margin:20px auto 40px;background:#f4f1e9;color:#121313;border-radius:24px;padding-top:56px;padding-bottom:56px}
.tools-heading{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:end;margin-bottom:36px}
.tools-heading h2{margin:0;font-size:clamp(34px,4.1vw,56px);line-height:1;letter-spacing:-.045em;max-width:650px}
.tools-heading>p{color:#55584f;max-width:460px;font-size:16px;line-height:1.65;margin:0}
.tools-heading>p strong{color:#121313;font-weight:700}
.tools-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.tool-card{min-width:0;display:flex;flex-direction:column;overflow:hidden;background:#fffdf7;border:1px solid #d4d3ca;border-radius:16px}
.tool-visual{position:relative;height:236px;padding:23px 28px;background:#121313;color:#f4f1e9;overflow:hidden}
.tool-visual-caption,.tool-export{position:relative;font:11px/1.5 var(--ods-mono);color:#c2c9d2}
.tool-visual-react{background:#142435}
.tool-frames{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:23px 0 16px}
.tool-frames>span{display:grid;place-items:center;align-content:center;gap:7px;height:86px;border:1px solid #709dc077;border-radius:8px;font-size:12px;background:#22384d}
.tool-frames b{font-size:29px;line-height:1;letter-spacing:-.07em}
.tool-frames svg{width:30px;height:30px;color:#aedcff}
.tool-timeline{position:relative;display:grid;grid-template-columns:1.3fr 1fr 1.2fr;gap:4px;height:10px;margin-bottom:17px}
.tool-timeline span{background:#72b8f3;border-radius:2px}.tool-timeline span:nth-child(2){background:#aedcff}.tool-timeline span:nth-child(3){background:#48647d}
.tool-timeline i{position:absolute;top:-8px;bottom:-8px;left:57%;width:2px;background:#f4f1e9}
.tool-visual-html{background:#20241e}
.tool-composition{position:relative;height:130px;margin:15px 0 10px;border:1px solid #697254;border-radius:8px;padding:14px 18px;background:#343d28}
.tool-composition-code{position:absolute;right:17px;top:13px;font:12px var(--ods-mono);color:#b5c587}
.tool-composition-title{display:block;color:#f4ff71;font-size:28px;line-height:1;letter-spacing:-.04em;font-weight:700;margin-bottom:12px}
.tool-composition-chip{font:10px var(--ods-mono);color:#e1e7d4}
.tool-body{padding:28px;display:flex;flex-direction:column;flex:1}
.tool-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.tool-title-row h3{font-size:32px;letter-spacing:-.04em;line-height:1.1;margin:0}
.tool-title-row>span{font:11px/1.5 var(--ods-mono);border:1px solid #d4d3ca;border-radius:999px;padding:5px 10px;color:#55584f;white-space:nowrap}
.tool-description{font-size:15px;line-height:1.65;color:#55584f;margin:0 0 22px}
.tool-use{padding-top:20px;border-top:1px solid #dfded5}
.tool-use h4{font-size:14px;margin:0 0 7px}
.tool-use>p{font-size:14px;line-height:1.65;color:#55584f;margin:0}
.tool-benefits{list-style:none;margin:19px 0 24px;padding:0;display:grid;gap:9px;font-size:14px;line-height:1.5}
.tool-benefits li{position:relative;padding-left:22px}
.tool-benefits li::before{content:"✓";position:absolute;left:0;top:0;color:#597000}
.tool-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:auto}
.tool-actions>a{display:flex;justify-content:space-between;min-width:0;font-family:var(--ods-sans);font-size:14px;line-height:1.4;--bg:#121313;--lime:#f4ff71}
.tool-actions .button-dark{background:#121313;color:#f4f1e9}
.tool-actions .button-primary{background:#f4ff71;color:#121313}
/* "Como começar": a linha é uma faixa escura com um feixe de luz correndo pela
   borda, um halo e um ponto pulsando, para a pessoa notar que ali abre o passo
   a passo. Depois de aberta, sossega. Pedido do dono (09/10). */
@property --feixe{syntax:'<angle>';inherits:false;initial-value:0deg}
.tool-start{margin-top:24px;border-top:1px solid #dfded5;padding-top:18px}
.tool-start>summary{position:relative;isolation:isolate;display:flex;align-items:center;gap:12px;padding:13px 13px 13px 16px;border-radius:12px;background:#121313;color:#f4f1e9;font-size:14px;line-height:1.5;font-weight:700;cursor:pointer;list-style:none;animation:feixe-halo 2.6s ease-in-out infinite}
.tool-start>summary:hover{background:#1f201f}
.tool-start>summary::-webkit-details-marker{display:none}
.tool-start>summary::before{content:'';position:absolute;inset:-2px;z-index:-1;border-radius:14px;padding:2px;pointer-events:none;
  background:conic-gradient(from var(--feixe),rgba(244,255,113,0) 0deg,rgba(244,255,113,0) 235deg,#c9d63a 300deg,#f4ff71 335deg,#fff 350deg,rgba(244,255,113,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:feixe-gira 3.2s linear infinite}
.tool-start-luz{flex:none;width:8px;height:8px;border-radius:50%;background:#f4ff71;animation:feixe-ponto 1.8s ease-out infinite}
/* O "+" é desenhado com duas barras: aberta, a vertical some e fica "–". */
.tool-start>summary>span{position:relative;margin-left:auto;flex:none;width:30px;height:30px;border-radius:2px;background:#f4ff71;font-size:0}
.tool-start>summary>span::before,.tool-start>summary>span::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:#121313;transition:transform .2s ease}
.tool-start>summary>span::after{transform:rotate(90deg)}
.tool-start[open]>summary>span::after{transform:rotate(90deg) scaleX(0)}
.tool-start[open]>summary,.tool-start[open] .tool-start-luz{animation:none}
.tool-start[open]>summary::before{animation:none;background:rgba(201,214,58,.55)}
.tool-start>summary:focus-visible{outline:2px solid #899a00;outline-offset:5px}
@keyframes feixe-gira{to{--feixe:360deg}}
@keyframes feixe-halo{0%,100%{box-shadow:0 0 0 0 rgba(137,154,0,0),0 0 0 0 rgba(137,154,0,0)}50%{box-shadow:0 0 0 5px rgba(137,154,0,.2),0 12px 28px -12px rgba(137,154,0,.6)}}
@keyframes feixe-ponto{0%{box-shadow:0 0 0 0 rgba(244,255,113,.7)}100%{box-shadow:0 0 0 9px rgba(244,255,113,0)}}
@media(prefers-reduced-motion:reduce){.tool-start>summary,.tool-start>summary::before,.tool-start-luz{animation:none}.tool-start>summary::before{background:rgba(201,214,58,.7)}.tool-start>summary>span::before,.tool-start>summary>span::after{transition:none}}
.tool-start>ol{padding-left:23px;display:grid;gap:15px;font-size:14px;line-height:1.65;color:#55584f}
.tool-start li strong{color:#121313}
.tool-start li a,.tool-docs{color:#121313;text-decoration:underline;text-underline-offset:4px}
.tool-start code{display:block;margin-top:10px;padding:12px;background:#eeeee5;border:1px solid #dfded5;border-radius:6px;font:12px/1.5 var(--ods-mono);color:#121313;overflow-wrap:anywhere}
.tool-docs{display:inline-block;font-size:13px;margin-top:3px}
.tools-download-note{display:flex;align-items:flex-start;gap:13px;margin:25px 0 36px;padding:18px 22px;background:#e8e8dc;border-radius:10px}
.tools-download-note>svg{flex-shrink:0;width:21px;height:21px;margin-top:2px}
.tools-download-note p{margin:0;font-size:14px;line-height:1.65;color:#55584f}
.tools-download-note p strong{color:#121313}
.tools-workflow{border-top:1px solid #c8cabd;padding-top:26px}
.tools-workflow h3{font-size:23px;line-height:1.2;letter-spacing:-.025em;margin:0 0 23px}
.tools-workflow ol{counter-reset:tool-step;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.tools-workflow li{counter-increment:tool-step;position:relative;padding-left:33px;font-size:14px;line-height:1.5}
.tools-workflow li::before{content:counter(tool-step);position:absolute;left:0;top:0;width:23px;height:23px;display:grid;place-items:center;background:#121313;color:#f4ff71;border-radius:50%;font:11px var(--ods-mono)}
.tools-workflow strong,.tools-workflow span{display:block}
.tools-workflow span{font-size:13px;color:#55584f;margin-top:5px}
@media(max-width:1500px){.tools-section{max-width:calc(100% - 48px)}}
@media(max-width:1000px){.tools-heading{grid-template-columns:1fr;gap:22px}.tools-heading>p{max-width:650px}.tools-workflow ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.tools-section{max-width:calc(100% - 28px);padding:35px 20px;margin-top:0;border-radius:18px}.tools-grid{grid-template-columns:1fr;gap:20px}.tool-body{padding:23px}.tool-visual{padding:22px}.tools-heading h2{font-size:36px}.tools-heading h2 br{display:none}.tool-actions{gap:8px}.tool-title-row h3{font-size:30px}.tools-download-note{padding:16px}.tools-workflow ol{grid-template-columns:1fr;gap:19px}}
@media(max-width:390px){.tool-body{padding:20px}.tool-actions{grid-template-columns:1fr}}

/* Componente GitHub enviado: borda arco-íris e brilho, com link real ao repositório. */
.tool-card{box-shadow:0 12px 30px #12131308;transition:border-color .2s,box-shadow .2s}
.tool-card:hover{border-color:#aaa99e;box-shadow:0 16px 40px #12131312}
.tool-title-row>span{background:#f2f4f7}
.tool-card:nth-child(2) .tool-title-row>span{background:#f0f4e7}
.tool-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.tool-actions>*{flex:1 1 175px;min-width:0}
.tool-actions .button-primary{min-height:48px;justify-content:space-between;white-space:nowrap}
.tool-github-mount{display:flex;align-items:center}
.github-rainbow{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:48px;padding:10px 13px;border:1.3px solid transparent!important;border-radius:6px!important;color:#121313!important;font:700 14px/1.3 var(--ods-sans);white-space:nowrap;text-decoration:none;background:linear-gradient(#fffdf7,#fffdf7) padding-box,linear-gradient(#fffdf780,#fffdf700) border-box,linear-gradient(90deg,#ff4242,#a5ff42,#428aff,#42dfff,#ad42ff,#ff4242) border-box;background-size:100% 100%,100% 100%,200% 100%;animation:github-rainbow 6s linear infinite;transition:transform .2s,box-shadow .2s}
.github-rainbow::before{content:"";position:absolute;z-index:-1;bottom:-5px;left:20%;width:60%;height:10px;border-radius:50%;background:linear-gradient(90deg,#ff4242,#a5ff42,#428aff,#42dfff,#ad42ff);background-size:200%;animation:github-glow 6s linear infinite;filter:blur(9px);opacity:.6;pointer-events:none}
.github-rainbow:hover{transform:translateY(-2px);box-shadow:0 5px 16px #12131314}
.github-rainbow:active{transform:scale(.98)}
.github-rainbow:focus-visible{outline:2px solid #6556ce;outline-offset:5px}
.github-rainbow .github-icon{width:18px;height:18px;flex-shrink:0}
.github-rainbow .github-star{width:14px;height:14px;color:#696b63;transition:color .2s,fill .2s}
.github-rainbow:hover .github-star{color:#bb8d00;fill:#ffdc60}
.github-rainbow .github-external{width:16px;height:16px;margin-left:auto}
@keyframes github-rainbow{to{background-position:0 0,0 0,200% 0}}
@keyframes github-glow{to{background-position:200% 0}}
@media(max-width:760px){.tool-visual{height:210px}.tool-frames{margin-top:14px}.tool-frames>span{height:78px}.tools-heading>p{font-size:15px}.tool-actions>*{flex-basis:170px}}
@media(prefers-reduced-motion:reduce){.github-rainbow,.github-rainbow::before{animation:none}.github-rainbow,.tool-card{transition:none}}

/* Capas fornecidas pelo usuário, com AVIF em dois tamanhos. */
.tool-cover{width:100%;aspect-ratio:1200/630;background:#fff;overflow:hidden;border-bottom:1px solid #d4d3ca}
.tool-cover-hyperframes{background:#080c0b}
.tool-cover>img{display:block;width:100%;height:100%;object-fit:contain}