/* Homepage: sugestoes de estudo da Voxi de convidado e apresentacao de app no
   telemovel (html.site-app, ver app.js). Nenhuma regra muda o layout com o
   foco (:focus, :focus-within): o toque tem de cair onde o dedo esta'. */

/* ===== Sugestoes de estudo e ligacoes que pedem login ===== */
.voxi-aulas { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.voxi-aulas h3 { margin: 0 0 4px; font-size: 0.95em; font-weight: 600; color: var(--navy); }
.voxi-aula { margin-top: 10px; padding: 14px; border: 1px solid #dfe7f5; border-radius: 12px; background: #f9fbff; }
.voxi-aula-top { display: flex; justify-content: space-between; gap: 12px; font-size: 0.72em; color: #405866; }
.voxi-aula-curso { color: #244f9d; font-weight: 600; }
.voxi-aula h4 { margin: 6px 0 2px; font-size: 0.98em; line-height: 1.4; color: var(--navy); }
.voxi-panel .voxi-aula p { margin: 3px 0; font-size: 0.82em; color: #405866; }
.voxi-aula-entrar { display: inline-block; margin-top: 8px; font-size: 0.85em; font-weight: 600; color: #244f9d; text-decoration: underline; }
.voxi-login-tag { font-size: 0.8em; color: #405866; }
.voxi-panel .voxi-proxima { margin-top: 12px; font-size: 0.82em; }

/* ===== Telemovel: apresentacao de app ===== */
.site-tabbar, .site-app-biblioteca { display: none; }
html.site-app { --site-tab-h: 62px; --site-top-h: 64px; }
html.site-app body { background: #fff; padding-bottom: calc(var(--site-tab-h) + env(safe-area-inset-bottom, 0px)); }
html.site-app .menu-toggle,
html.site-app .site-nav,
html.site-app .site-header-inner > .btn-entrar { display: none !important; }
html.site-app .site-header-inner { justify-content: center; }
html.site-app:not([data-site-tab="cursos"]) .promo,
html.site-app:not([data-site-tab="cursos"]) .site-footer { display: none !important; }

/* Voxi: so' a conversa, com a caixa de escrita por cima da barra */
html.site-app[data-site-tab="voxi"] #conteudo > :not(.voxi-hero) { display: none !important; }
html.site-app .voxi-hero {
  min-height: calc(100vh - var(--site-top-h) - var(--site-tab-h));
  min-height: calc(100dvh - var(--site-top-h) - var(--site-tab-h));
  justify-content: flex-start; padding: 20px 16px 12px;
}
html.site-app .hero-actions, html.site-app .hero-stats { display: none; }
/* O logotipo fica so' na barra de cima; a capa ao centro do espaco livre */
html.site-app .hero-eyebrow .voxi-logo { display: none; }
html.site-app .hero-eyebrow { margin: auto 0 14px; font-size: 0.68rem; }
html.site-app .voxi-sub { margin: 14px auto 0; font-size: 0.98rem; line-height: 1.6; }
html.site-app .voxi-box { display: flex; flex-direction: column; flex: 0 0 auto; margin-top: auto; padding-top: 24px; }
html.site-app .voxi-panel { order: 1; margin: 0 0 12px; padding: 18px 16px; box-shadow: none; }
/* Caixa de escrita como a do Claude/ChatGPT: a frase em cima, o enviar redondo
   no canto de baixo; toda a caixa abre o teclado (app.js). 16px no campo: o
   iPhone nao faz zoom ao tocar (mudaria o layout com o foco). */
html.site-app .voxi-input-wrap {
  order: 2; position: sticky; z-index: 5;
  bottom: calc(var(--site-tab-h) + env(safe-area-inset-bottom, 0px) + 8px);
  display: grid; grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "campo campo" ". enviar";
  align-items: end; gap: 4px 8px; padding: 14px 10px 10px 18px; border-radius: 24px;
  box-shadow: 0 8px 28px rgba(21, 43, 59, 0.09); cursor: text;
}
html.site-app .voxi-input-wrap svg.lupa { display: none; }
html.site-app #voxi-input { grid-area: campo; font-size: 16px; line-height: 1.5; padding: 4px 0 8px; }
/* O campo e' uma caixa de varias linhas que cresce com o texto (site.js): sem pega de redimensionar. */
textarea#voxi-input { resize: none; }
/* Mesma posicao do texto que o <input> de antes (centrado nos 44px minimos): 8 + 24 + 12. */
html.site-app textarea#voxi-input { padding: 8px 0 12px; }
html.site-app .voxi-send { grid-area: enviar; width: 44px; min-width: 44px; min-height: 44px; padding: 0; border-radius: 50%; }
html.site-app .voxi-send span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.site-app .voxi-send svg { width: 20px; height: 20px; }
html.site-app .voxi-note { order: 3; margin-top: 8px; font-size: 0.7rem; line-height: 1.5; }
/* Depois da primeira pergunta a capa sai e fica a conversa */
html.site-app .voxi-hero:has(.voxi-panel.show) :is(.hero-eyebrow, .voxi-title, .voxi-sub) { display: none; }

/* Cursos: as 3 categorias no topo (cabem no ecra), depois o resto da pagina com
   os parceiros no fim. A lista longa do percurso (com a PE) fica de fora. */
html.site-app[data-site-tab="cursos"] .voxi-hero,
html.site-app[data-site-tab="cursos"] #percurso { display: none !important; }
.site-app-cursos { display: none; }
html.site-app[data-site-tab="cursos"] .site-app-cursos { display: block; order: -1; padding: 22px 16px 8px; }
.site-app-cursos h2 { margin: 0 0 12px; font-size: 1.35rem; color: var(--navy); }
.site-app-curso {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
  margin-top: 10px; padding: 14px 16px; border: 1px solid #dfe7f5; border-radius: 16px; background: #f9fbff;
  color: var(--navy); text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.site-app-curso-fase { grid-column: 1; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #236274; }
.site-app-curso strong { grid-column: 1; margin-top: 2px; font-size: 1.15rem; line-height: 1.3; }
.site-app-curso-texto { grid-column: 1; margin-top: 2px; font-size: 0.82rem; line-height: 1.45; color: #405866; }
.site-app-curso-seta { grid-column: 2; grid-row: 1 / span 3; font-size: 1.2rem; color: #244f9d; }
html.site-app[data-site-tab="cursos"] #conteudo { display: flex; flex-direction: column; }
html.site-app[data-site-tab="cursos"] #conteudo > .partners-top { order: 1; }
html.site-app[data-site-tab="cursos"] #conteudo > .posic,
html.site-app[data-site-tab="cursos"] #conteudo > .premios { order: 2; }

/* Lingua: o seletor sai do menu (escondido) para a barra de cima */
html.site-app .site-header-inner { position: relative; }
html.site-app .site-header-inner > .lang-drop { position: absolute; right: 12px; top: 0; bottom: 0; display: flex; align-items: center; }
html.site-app .site-header-inner > .lang-drop > button,
html.site-app .site-header-inner > .lang-drop > button:hover { width: auto; background: transparent; color: var(--navy); -webkit-tap-highlight-color: transparent; }
html.site-app .site-header-inner > .lang-drop .nav-drop-menu {
  position: absolute; top: calc(100% - 4px); right: 0; left: auto; display: none; min-width: 190px; padding: 8px;
  background: #fff; border: 1px solid var(--border-soft); border-radius: 12px; box-shadow: var(--shadow-lg);
}
html.site-app .site-header-inner > .lang-drop.open .nav-drop-menu { display: block; }

/* Biblioteca: fechada sem sessao, nada e' listado */
html.site-app[data-site-tab="biblioteca"] #conteudo > :not(.site-app-biblioteca) { display: none !important; }
html.site-app[data-site-tab="biblioteca"] .site-app-biblioteca {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  min-height: calc(100vh - var(--site-top-h) - var(--site-tab-h));
  min-height: calc(100dvh - var(--site-top-h) - var(--site-tab-h));
  padding: 40px 24px; text-align: center;
}
.site-app-biblioteca h2 { margin: 0; font-size: 1.4rem; color: var(--navy); }
.site-app-biblioteca p { max-width: 320px; margin: 0 0 8px; color: #405866; line-height: 1.6; }
.site-app-biblioteca .btn-primary, .site-app-biblioteca .btn-ghost { width: 100%; max-width: 320px; justify-content: center; }
.site-app-bib-icone { display: flex; padding: 14px; border-radius: 18px; background: #e8eefd; color: #244f9d; }
.site-app-bib-icone svg { width: 30px; height: 30px; fill: currentColor; }

/* Barra de separadores (igual a' da app) */
html.site-app .site-tabbar {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
  height: calc(var(--site-tab-h) + env(safe-area-inset-bottom, 0px));
  padding: 0 4px env(safe-area-inset-bottom, 0px);
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
}
.site-tab {
  appearance: none; -webkit-appearance: none; background: none; border: 0; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 0; min-height: var(--site-tab-h); padding: 8px 2px 6px;
  color: #405866; font: 500 10.5px/1.1 'Poppins', system-ui, sans-serif; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.site-tab-icon { display: flex; padding: 3px 12px; border-radius: 12px; }
.site-tab-icon svg { width: 22px; height: 22px; fill: currentColor; }
.site-tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-tab.active { color: #244f9d; font-weight: 600; }
.site-tab.active .site-tab-icon { background: #e8eefd; }

/* ===== Paginas de pais (/es/, /fr/, ...): Voxi | Historico | Entrar =====
   Outra estrutura (main.voxi-hero, textarea, exemplos, voxi-intl.css); o mesmo
   desenho da PT. O rodape (texto PRR) fica visivel no fim da pagina da Voxi. */
.site-app-historico { display: none; }
html.site-app body.voxi-intl .site-header-inner { min-height: 64px; padding: 8px 16px; justify-content: center; }
html.site-app body.voxi-intl .voxi-hero {
  display: flex; flex-direction: column;
  min-height: calc(100vh - var(--site-top-h) - var(--site-tab-h));
  min-height: calc(100dvh - var(--site-top-h) - var(--site-tab-h));
  padding: 20px 16px 12px;
}
html.site-app body.voxi-intl .vx-eyebrow { margin: auto 0 14px; font-size: 11px; }
html.site-app body.voxi-intl .vx-eyebrow img { display: none; }
html.site-app body.voxi-intl .voxi-sub { margin: 0 auto; font-size: 15px; line-height: 1.6; }
html.site-app body.voxi-intl .voxi-box { display: flex; flex-direction: column; margin-top: auto; padding-top: 24px; }
html.site-app body.voxi-intl .voxi-panel { order: 1; margin: 0 0 12px; padding: 18px 16px; }
html.site-app body.voxi-intl .vx-examples { order: 2; margin: 0 0 12px; }
html.site-app body.voxi-intl .voxi-input-wrap {
  order: 3; position: sticky; z-index: 5;
  bottom: calc(var(--site-tab-h) + env(safe-area-inset-bottom, 0px) + 8px);
  display: grid; grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "campo campo" ". enviar";
  align-items: end; gap: 4px 8px; padding: 12px 10px 10px 18px; border-radius: 24px; cursor: text;
}
html.site-app body.voxi-intl .vx-search-icon { display: none; }
html.site-app body.voxi-intl #voxi-input { grid-area: campo; font-size: 16px; height: auto; min-height: 44px; padding: 6px 0; }
html.site-app body.voxi-intl .voxi-send { grid-area: enviar; width: 44px; min-width: 44px; min-height: 44px; padding: 0; gap: 0; border-radius: 50%; font-size: 0; }
html.site-app body.voxi-intl .voxi-send svg { width: 20px; height: 20px; }
html.site-app body.voxi-intl .voxi-note { order: 4; margin-top: 8px; font-size: 10.5px; line-height: 1.5; }
html.site-app body.voxi-intl .vx-privacy { order: 5; }
html.site-app body.voxi-intl .voxi-hero:has(.voxi-panel.show) :is(.vx-eyebrow, .voxi-title, .voxi-sub, .vx-examples) { display: none; }
html.site-app[data-pais][data-site-tab="voxi"] .site-footer { display: block !important; }

/* Historico: so' neste browser; nada sai do dispositivo */
html.site-app[data-pais][data-site-tab="historico"] :is(.voxi-hero, .vx-partners) { display: none !important; }
html.site-app[data-pais][data-site-tab="historico"] .site-app-historico {
  display: block; padding: 22px 16px 24px;
  min-height: calc(100vh - var(--site-top-h) - var(--site-tab-h));
  min-height: calc(100dvh - var(--site-top-h) - var(--site-tab-h));
}
.site-app-historico h2 { margin: 0 0 12px; font-size: 1.35rem; color: var(--vx-ink, #152b3b); }
.vx-hist-item { margin-top: 10px; border: 1px solid var(--vx-line, #dfe7f5); border-radius: 16px; background: #fff; }
.vx-hist-item summary { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.vx-hist-item summary::-webkit-details-marker { display: none; }
.vx-hist-q { font-weight: 600; color: var(--vx-ink, #152b3b); overflow-wrap: anywhere; }
.vx-hist-t { font-size: 12px; color: var(--vx-muted, #4b6170); }
.vx-hist-item .voxi-a { padding: 0 16px 14px; font-size: 14px; }
.vx-hist-vazio { margin: 24px 0; color: var(--vx-muted, #4b6170); line-height: 1.6; }
.vx-hist-apagar { margin-top: 16px; }