@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

/* ---- Base (padrão visual GeniusDesign Tools / Migrabox / Crossref) ---- */
html, body { min-height: 100vh; background: #f8f8f8; font-family: 'Nunito', sans-serif !important; }
body {
    min-height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: linear-gradient(#e8ffff 1%, #f8f8f8);
    background-size: 100% 447px;
    background-repeat: no-repeat;
    border-top: 5px solid #009999;
    margin: 0;
}
.content { flex: 1 0 auto; }

.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6,
.uk-heading-large, .uk-heading-medium, .uk-heading-small,
h1, h2, h3, h4, h5, h6 { font-family: 'Nunito', sans-serif !important; }

h1, .uk-h2 { font-weight: 900; color: #262d57; }

.uk-link, a { color: #009999; }
.uk-link:hover, a:hover { color: #006666; }

/* ---- Botões ---- */
.uk-button { font-family: 'Nunito', sans-serif; font-weight: 700; text-transform: none; border-radius: 4px; }
.uk-button-primary { background-color: #262d57 !important; }
.uk-button-primary:hover { background-color: #009999 !important; }

/* ---- Cabeçalho ---- */
.site-header { margin-top: 40px; margin-bottom: 24px; }

/* ---- Seletor de idioma ---- */
.lang-current { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid #e5e5e5; border-radius: 6px; padding: 6px 10px; font-family: 'Nunito', sans-serif; font-size: .85rem; font-weight: 700; color: #262d57; cursor: pointer; }
.lang-current:hover { color: #009999; border-color: #009999; }
.lang-current img, .lang-item img { border-radius: 2px; display: block; }
.lang-dropdown { min-width: 160px; padding: 12px; }
.lang-item { display: flex !important; align-items: center; gap: 8px; }
.lang-item:hover { color: #009999; }

/* ---- Barra de compartilhamento ---- */
.share-bar { gap: 8px; }
.share-bar .uk-icon-button { width: 32px; height: 32px; background: #fff; border: 1px solid #e5e5e5; color: #666; }
.share-bar .uk-icon-button:hover { background: #009999; border-color: #009999; color: #fff; }

/* ---- Hero ---- */
.hero { margin-bottom: 8px; }
.hero-intro { color: #55606b; font-size: 1.05rem; margin: 12px auto 0; max-width: 620px; }
.tools-count { display: inline-block; margin-top: 14px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #009999; background: #e8ffff; border-radius: 20px; padding: 5px 14px; }

/* ---- Card de ferramenta (largura cheia: imagem à esquerda, texto à direita) ---- */
.tool-item { border: 1px solid #e5e5e5; border-radius: 8px; box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.tool-item:hover { border-color: #009999; box-shadow: 0 10px 26px rgba(0, 128, 128, .12); transform: translateY(-2px); }

.tool-item-media { display: flex; align-items: center; justify-content: center; width: 220px; min-height: 116px; padding: 16px; background: #f6fbfb; border: 1px solid #eceff1; border-radius: 8px; }
.tool-item-media img { max-width: 100%; max-height: 76px; height: auto; display: block; }

.tool-item-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.tool-item-title { font-size: 1.35rem; font-weight: 800; color: #262d57; margin: 0; }
.tool-item-title a { color: inherit; text-decoration: none; }
.tool-item-title a:hover { color: #009999; }
.tool-item-tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #009999; background: #e8ffff; border-radius: 4px; padding: 3px 8px; }
.tool-item-free { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #1f7a5a; background: #eafaf3; border-radius: 4px; padding: 3px 8px; }

.tool-item-desc { color: #55606b; font-size: .95rem; line-height: 1.55; margin: 0 0 16px; }
.tool-item-actions { gap: 16px; row-gap: 12px; }

/* Empilhado no mobile: a imagem ocupa a largura toda acima do texto. */
@media (max-width: 639px) {
    .tool-item-media { width: 100%; min-height: 96px; }
    .tool-item-title { font-size: 1.2rem; }
    .tool-item-actions { gap: 12px; }
}

/* ---- Chamada final ---- */
.cta-card { background: #143939; color: #fff; border-radius: 8px; }
.cta-card h2 { color: #fff !important; }
.cta-card p { color: rgba(255,255,255,.75); max-width: 560px; margin-left: auto; margin-right: auto; }
.cta-card .uk-button-primary { background-color: #009999 !important; }
.cta-card .uk-button-primary:hover { background-color: #00b3b3 !important; }

/* ---- Rodapé ---- */
.site-footer { background: #143939; margin-top: auto; text-align: left; }
.site-footer .uk-grid a { color: rgba(255,255,255,.72); font-size: 14px; }
.site-footer .uk-grid a:hover { color: #fff; text-decoration: none; }
.site-footer .footer-title { color: #fff; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: 8px; }
.site-footer .footer-about { color: rgba(255,255,255,.72); font-size: 14px; }
.site-footer .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.55); font-size: 13px; }
.site-footer .footer-bottom a { color: rgba(255,255,255,.75); }
.site-footer .footer-bottom a:hover { color: #fff; }