/* Store and player. Builds on site.css (brand colors, buttons, forms). */
:root {
  --fundo: #ffffff;
  --texto: #1C1B22;
  --suave: #5f5b66;
  --linha: #e6e2ec;
  --lilas2: #F4F0FF;
  --escuro: #17161c;
}
body { background: var(--fundo); }
/* site.css boxes every <details>; the store uses them for menus, lists and FAQ instead. */
.cats, .faq details, .curriculo details, .pl-side details { background: transparent; border-radius: 0; padding: 0; margin: 0; border: 0; }
.faq details { border-bottom: 1px solid var(--linha); padding: 14px 0; }
.ic { flex: none; vertical-align: -0.18em; }
.lead { font-size: 1.12rem; color: var(--suave); }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; font-weight: 800; border-radius: 6px; padding: 3px 8px; background: #eee; color: var(--texto); text-decoration: none; letter-spacing: .02em; }
.tag-novo { background: var(--lima); }
.tag-breve { background: #FFE8C7; color: #7a4a00; }
.tag-gratis { background: var(--lilas2); color: var(--roxo); }
.stars { display: inline-flex; gap: 1px; color: #d8d3df; vertical-align: -2px; }
.stars .on { color: #E59819; }
.rate { display: inline-flex; align-items: center; gap: 4px; font-size: .9rem; }
.rate b { color: #9a5b00; }

/* Header */
.loja-top { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--linha); box-shadow: 0 1px 6px rgba(28, 27, 34, .05); }
.loja-top-in { max-width: 1240px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 14px; }
.loja-top .logo { font-size: 1.35rem; flex: none; }
.cats { position: relative; flex: none; }
.cats summary { list-style: none; cursor: pointer; font-weight: 600; font-size: .95rem; padding: 8px 6px; }
.cats summary::-webkit-details-marker { display: none; }
.cats-menu { position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid var(--linha); border-radius: 12px; box-shadow: 0 12px 30px rgba(28, 27, 34, .14); padding: 8px; min-width: 260px; }
.cats-menu a { display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--texto); }
.cats-menu a:hover { background: var(--lilas2); }
.busca { flex: 1; display: flex; align-items: center; gap: 8px; background: #f6f5f8; border: 1px solid var(--linha); border-radius: 99px; padding: 0 16px; min-width: 0; }
.busca input { border: 0; background: transparent; padding: 11px 0; font-size: .95rem; outline: none; box-shadow: none; margin: 0; width: 100%; min-width: 0; }
.busca:focus-within { border-color: var(--roxo2); background: #fff; }
.loja-nav { display: flex; align-items: center; gap: 16px; flex: none; }
.loja-nav a { color: var(--texto); text-decoration: none; font-weight: 600; font-size: .95rem; }
.cart-link { position: relative; display: inline-flex; }
.cart-count { position: absolute; top: -6px; right: -9px; background: var(--roxo); color: #fff; font-size: .7rem; font-weight: 800; border-radius: 99px; min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }
@media (max-width: 760px) {
  .loja-top-in { flex-wrap: wrap; gap: 8px 12px; }
  .busca { order: 5; flex-basis: 100%; }
  .cats summary { font-size: .9rem; }
  .hide-sm { display: none; }
  .loja-nav { margin-left: auto; gap: 14px; }
}

/* Hero */
.hero-loja { background: linear-gradient(135deg, #F4F0FF 0%, #fff 55%, #F7FDE6 100%); padding: 48px 0 40px; }
.hero-grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.15fr 1fr; } }
.hero-loja h1 { font-size: clamp(2.1rem, 5.5vw, 3.5rem); }
.busca-hero { background: #fff; border: 2px solid var(--texto); padding: 4px 4px 4px 18px; margin-top: 18px; max-width: 620px; }
.busca-hero input { font-size: 1.02rem; padding: 12px 0; }
.busca-hero .btn { box-shadow: none; padding: 12px 20px; border-radius: 99px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chips a { font-size: .85rem; text-decoration: none; color: var(--texto); background: #fff; border: 1px solid var(--linha); border-radius: 99px; padding: 5px 12px; }
.chips a:hover { border-color: var(--roxo2); }
.hero-mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; transform: rotate(-2deg); }
.hero-mosaico .capa { box-shadow: 0 14px 30px rgba(28, 27, 34, .18); }
.hero-mosaico .capa:nth-child(2) { transform: translateY(18px); }
.hero-mosaico .capa:nth-child(4) { transform: translateY(18px); }
@media (max-width: 899px) { .hero-mosaico { display: none; } }

/* Trust strip */
.trust-strip { padding: 18px 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); background: #fff; }
.trust-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .trust-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }
.trust-item { display: flex; gap: 12px; align-items: flex-start; }
.trust-item .ic { color: var(--roxo); margin-top: 2px; }
.trust-item b { display: block; font-size: .95rem; }
.trust-item span { font-size: .85rem; color: var(--suave); line-height: 1.4; display: block; }

/* Covers */
.capa { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, var(--c1, #3B1E8F), var(--c2, #6D4AFF)); color: #fff; display: block; }
.capa::before { content: ''; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; right: -18%; top: -38%; background: rgba(255, 255, 255, .10); }
.capa::after { content: ''; position: absolute; width: 38%; aspect-ratio: 1; border-radius: 50%; left: -10%; bottom: -30%; background: rgba(198, 244, 50, .22); }
.capa-ic { position: absolute; right: 7%; top: 12%; color: var(--lima); z-index: 1; }
.capa-ic .ic { width: 30%; min-width: 46px; height: auto; }
.capa-rot { position: absolute; left: 7%; bottom: 13%; right: 34%; z-index: 1; font-family: 'Bricolage Grotesque', Inter, sans-serif; font-weight: 800; font-size: clamp(1.1rem, 2.4vw, 1.55rem); line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.capa-cat { position: absolute; left: 7%; top: 10%; z-index: 1; font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.capa-big .capa-rot { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.capa-passe { --c1: #1C1B22; --c2: #3B1E8F; }

/* Course cards & rows */
.curso-card { display: flex; flex-direction: column; text-decoration: none; color: var(--texto); min-width: 0; }
.curso-card:hover h3 { color: var(--roxo); }
.curso-card:hover .capa { filter: brightness(1.06); }
.cc-body { padding: 10px 2px 0; }
.cc-body h3 { font-family: Inter, sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 0; line-height: 1.3; margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cc-autor { font-size: .8rem; color: var(--suave); margin: 0 0 4px; }
.cc-rate { margin-bottom: 2px; }
.cc-meta { font-size: .8rem; color: var(--suave); margin: 2px 0; }
.cc-preco { font-weight: 800; margin: 4px 0 0; }
.vitrine { padding: 30px 0 10px; }
.vitrine-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.vitrine-head h2 { margin: 0; font-size: clamp(1.35rem, 3vw, 1.7rem); }
.vitrine-head p { margin: 4px 0 0; }
.ver-todos { font-weight: 700; text-decoration: none; white-space: nowrap; font-size: .95rem; }
.carrossel { position: relative; }
.car-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
.car-track::-webkit-scrollbar { display: none; }
.car-track > * { scroll-snap-align: start; }
@media (min-width: 1000px) { .car-track { grid-auto-columns: calc((100% - 54px) / 4); } }
@media (max-width: 640px) { .car-track { grid-auto-columns: 72%; } }
.car-btn { position: absolute; top: 28%; z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--linha); background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); font-size: 1.6rem; line-height: 1; cursor: pointer; display: none; }
.car-btn.prev { left: -14px; }
.car-btn.next { right: -14px; }
@media (min-width: 1000px) { .carrossel.has-more .car-btn { display: block; } }
.grade-cursos { display: grid; gap: 22px 18px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* Categories */
.cats-sec { padding: 36px 0 6px; }
.cat-tiles { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .cat-tiles { grid-template-columns: repeat(3, 1fr); } }
.cat-tile { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 14px; text-decoration: none; color: var(--texto); border: 1px solid var(--linha); transition: transform .12s, box-shadow .12s; }
.cat-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(28, 27, 34, .08); }
.cat-tile b { font-family: 'Bricolage Grotesque', Inter, sans-serif; font-size: 1.25rem; }
.cat-tile span { font-size: .9rem; color: var(--suave); line-height: 1.45; }
.cat-tile em { font-style: normal; font-weight: 700; font-size: .85rem; color: var(--roxo); margin-top: 4px; }
.cat-tecnologia { background: linear-gradient(135deg, #F4F0FF, #fff); }
.cat-negocios { background: linear-gradient(135deg, #E9FBF3, #fff); }
.cat-carreira { background: linear-gradient(135deg, #FFF4E5, #fff); }

/* Pass */
.passe-banner, .passe-hero { background: var(--escuro); color: #fff; padding: 48px 0; margin-top: 34px; }
.passe-hero { margin-top: 0; padding: 56px 0; }
.passe-grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 860px) { .passe-grid { grid-template-columns: 1.4fr 1fr; } }
.passe-banner h2, .passe-hero h1 { color: #fff; }
.passe-hero .lead { color: #d9d6e0; }
ul.clean.light li { color: #eeeaf5; }
.passe-cta { background: #fff; color: var(--texto); border-radius: 16px; padding: 24px; }
.passe-preco { font-family: 'Bricolage Grotesque', Inter, sans-serif; font-weight: 800; font-size: 2.6rem; margin: 0; line-height: 1; }
.passe-preco span { font-size: 1rem; color: var(--suave); font-weight: 600; margin-left: 4px; }
.passe-mini { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; }
.passe-mini p { margin: 4px 0 0; color: #d9d6e0; }

/* How it works / transparency / FAQ */
.passos-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 18px; }
@media (min-width: 760px) { .passos-grid { grid-template-columns: repeat(4, 1fr); } }
.passo { border: 1px solid var(--linha); border-radius: 14px; padding: 20px; position: relative; }
.passo .ic { color: var(--roxo); display: block; margin-bottom: 10px; }
.passo b { display: block; margin-bottom: 4px; }
.passo p { margin: 0; font-size: .92rem; color: var(--suave); line-height: 1.5; }
.passo-n { position: absolute; top: 14px; right: 16px; font-weight: 800; color: #d8d3df; font-size: 1.4rem; }
.transparencia { background: var(--lilas2); }
.faq details { border-bottom: 1px solid var(--linha); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::after { content: '+'; font-size: 1.3rem; line-height: 1; color: var(--roxo); }
.faq details[open] summary::after { content: '–'; }
.faq summary::-webkit-details-marker { display: none; }
.faq p { margin: 10px 0 0; color: var(--suave); }

/* Listing */
.lista-head { padding: 26px 0 8px; background: #faf9fc; border-bottom: 1px solid var(--linha); }
.lista-head h1 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); }
.crumbs { font-size: .85rem; color: var(--suave); margin: 0 0 10px; }
.crumbs a { color: inherit; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 10px; }
.filtros a { text-decoration: none; color: var(--texto); border: 1px solid var(--linha); background: #fff; border-radius: 99px; padding: 7px 14px; font-size: .9rem; font-weight: 600; }
.filtros a.on { background: var(--texto); color: #fff; border-color: var(--texto); }

/* Course page */
.curso-hero { background: var(--escuro); color: #fff; padding: 30px 0 34px; }
.curso-hero .crumbs, .curso-hero .crumbs a { color: #c9b8ff; font-weight: 600; }
.curso-hero h1 { color: #fff; font-size: clamp(1.8rem, 4.2vw, 2.5rem); }
.curso-hero .lead { color: #e7e3ee; }
.curso-hero-grid { display: grid; }
@media (min-width: 1000px) { .curso-hero-txt { max-width: calc(100% - 380px); } }
.hero-badges { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hero-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; color: #d9d6e0; }
.curso-grid { display: grid; gap: 28px; }
@media (min-width: 1000px) { .curso-grid { grid-template-columns: 1fr 340px; } .curso-main { padding-top: 26px; } }
.curso-main h2 { font-size: 1.5rem; margin-top: 34px; }
.curso-side { display: none; }
@media (min-width: 1000px) {
  .curso-side { display: block; position: relative; }
  .curso-side .buy-box { position: sticky; top: 84px; margin-top: -250px; }
  .buy-mobile { display: none; }
}
.buy-mobile { margin-top: 18px; }
.buy-box { background: #fff; border: 1px solid var(--linha); border-radius: 14px; box-shadow: 0 12px 34px rgba(28, 27, 34, .14); overflow: hidden; }
.buy-box .capa { border-radius: 0; }
.buy-cover { position: relative; display: block; }
.play-over { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: rgba(23, 22, 28, .38); color: #fff; z-index: 2; }
.play-over em { font-style: normal; font-weight: 700; font-size: .95rem; }
.buy-in { padding: 18px 20px 20px; }
.buy-in .btn { margin-top: 10px; box-shadow: none; }
.buy-preco { font-family: 'Bricolage Grotesque', Inter, sans-serif; font-weight: 800; font-size: 2rem; margin: 0; }
.ou-passe { background: var(--lilas2); border-radius: 10px; padding: 12px 14px; margin-top: 14px; font-size: .9rem; }
.ou-passe p { margin: 0 0 4px; }
.ou-passe a { font-weight: 700; text-decoration: none; }
.inclui-tit { font-weight: 700; margin: 16px 0 6px; }
.inclui { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.inclui li { display: flex; gap: 8px; align-items: center; padding: 3px 0; }
.aprende { margin-top: 26px; }
.aprende h2 { margin-top: 0; }
.aprende-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px 22px; }
@media (min-width: 700px) { .aprende-list { grid-template-columns: 1fr 1fr; } }
.aprende-list li { display: flex; gap: 10px; font-size: .95rem; line-height: 1.45; }
.aprende-list .ic { color: var(--roxo); margin-top: 3px; }
.curriculo details { border: 1px solid var(--linha); border-top: 0; }
.curriculo details:first-of-type { border-top: 1px solid var(--linha); border-radius: 10px 10px 0 0; }
.curriculo details:last-of-type { border-radius: 0 0 10px 10px; }
.curriculo summary { cursor: pointer; display: flex; justify-content: space-between; gap: 10px; padding: 14px 16px; background: #f8f7fa; font-weight: 700; list-style: none; }
.curriculo summary::-webkit-details-marker { display: none; }
.curriculo ul { list-style: none; margin: 0; padding: 6px 16px 10px; }
.curriculo li { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: .93rem; flex-wrap: wrap; }
.curriculo li .dur { margin-left: auto; }
.curriculo li a { color: var(--roxo); }
.bullets { padding-left: 20px; }
.bullets li { margin: 4px 0; }
.descricao p { margin: 0 0 12px; }
.instrutor { display: flex; gap: 14px; align-items: flex-start; }
.inst-logo { width: 54px; height: 54px; border-radius: 50%; background: var(--roxo); color: var(--lima); font-family: 'Bricolage Grotesque', Inter, sans-serif; font-weight: 800; font-size: 1.6rem; display: flex; align-items: center; justify-content: center; flex: none; }
.reviews { display: grid; gap: 12px; }
@media (min-width: 700px) { .reviews { grid-template-columns: 1fr 1fr; } }
.avise input { margin: 8px 0 0; }

/* Cart & checkout */
.cart-grid, .checkout-grid { display: grid; gap: 22px; align-items: start; }
@media (min-width: 900px) { .cart-grid, .checkout-grid { grid-template-columns: 1fr 340px; } }
.cart-item { display: grid; grid-template-columns: 140px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--linha); }
.cart-item h3 { font-family: Inter, sans-serif; font-size: 1rem; margin: 0 0 4px; letter-spacing: 0; }
.cart-item button { background: none; border: 0; color: var(--roxo); cursor: pointer; padding: 0; font-weight: 600; font-size: .85rem; }
@media (max-width: 560px) { .cart-item { grid-template-columns: 96px 1fr; } .cart-item .ci-preco { grid-column: 2; } }
.ci-preco { font-weight: 800; }
.checkout-resumo { position: sticky; top: 84px; }
.garantias { list-style: none; padding: 0; margin: 14px 0 0; }
.garantias li { display: flex; gap: 8px; align-items: center; padding: 3px 0; color: var(--suave); }

/* Learning area */
.aprend-head { padding: 28px 0 6px; background: #faf9fc; border-bottom: 1px solid var(--linha); }
.passe-ativo { display: inline-flex; gap: 8px; align-items: center; background: var(--lima); border-radius: 99px; padding: 6px 14px; font-weight: 600; font-size: .9rem; }
.passe-ativo.off { background: #FFE8C7; }
.barra { height: 6px; background: #ece9f1; border-radius: 99px; overflow: hidden; margin: 8px 0 4px; }
.barra div { height: 100%; background: var(--roxo); border-radius: 99px; }

/* Player */
.player-body { background: #fff; }
.pl-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 16px; background: var(--escuro); color: #fff; padding: 10px 16px; }
.pl-top .logo { color: #fff; font-size: 1.2rem; }
.pl-curso { color: #fff; text-decoration: none; font-weight: 600; font-size: .95rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 1px solid #444; padding-left: 16px; }
.pl-prog { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--lima); font-weight: 700; }
.pl-sair { color: #fff; font-size: .9rem; font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) { .pl-curso { display: none; } .pl-top { justify-content: space-between; } }
.pl-grid { display: grid; }
@media (min-width: 1000px) { .pl-grid { grid-template-columns: 1fr 360px; } }
.pl-main { min-width: 0; }
.pl-stage { background: #f6f5f8; }
.pl-stage.is-video { background: #0d0c11; }
.pl-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--linha); }
.pl-bar h1 { font-size: 1.35rem; margin: 2px 0 0; }
.pl-bar p { margin: 0; }
.pl-acoes { display: flex; gap: 8px; align-items: center; }
.pl-acoes .btn { box-shadow: none; }
.pl-cta, .pl-cert { margin: 16px 20px 0; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.pl-cert { justify-content: flex-start; }
.pl-cert .ic { color: var(--roxo); }
.pl-cta p { margin: 4px 0 0; color: #d9d6e0; }
.pl-cta .row { display: flex; gap: 8px; flex-wrap: wrap; }
.pl-tabs { padding: 10px 20px 40px; }
.tab-btns { display: flex; gap: 4px; border-bottom: 1px solid var(--linha); margin-bottom: 16px; overflow-x: auto; }
.tab-btns button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 12px 12px 10px; font: 700 .92rem Inter, sans-serif; color: var(--suave); cursor: pointer; white-space: nowrap; }
.tab-btns button.on { color: var(--texto); border-bottom-color: var(--texto); }
.transcricao .trans-bloco { margin-bottom: 14px; }
.transcricao p { margin: 4px 0 0; color: #3b3842; }
.materiais { list-style: none; padding: 0; }
.materiais li { display: flex; gap: 8px; align-items: center; padding: 6px 0; }
.pl-side { border-left: 1px solid var(--linha); background: #fff; max-height: calc(100vh - 52px); overflow-y: auto; position: sticky; top: 52px; }
@media (max-width: 999px) { .pl-side { border-left: 0; border-top: 1px solid var(--linha); max-height: none; position: static; } }
.pl-side-head { padding: 14px 16px; border-bottom: 1px solid var(--linha); font-size: 1rem; }
.pl-side details { border-bottom: 1px solid var(--linha); }
.pl-side summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 10px; padding: 12px 16px; background: #f8f7fa; font-weight: 700; font-size: .92rem; }
.pl-side summary::-webkit-details-marker { display: none; }
.pl-side ul { list-style: none; margin: 0; padding: 0; }
.pl-side li > a, .pl-side li > span { display: flex; gap: 10px; padding: 10px 16px; text-decoration: none; color: var(--texto); font-size: .9rem; }
.pl-side li.atual > a { background: var(--lilas2); }
.pl-side li.trancada > span { color: #9a96a3; }
.pl-check { width: 18px; height: 18px; border: 1.5px solid #c9c4d2; border-radius: 4px; flex: none; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; }
.pl-side li.feita .pl-check { background: var(--roxo); border-color: var(--roxo); color: #fff; }
.pl-side li.trancada .pl-check { border: 0; }
.pl-l { display: flex; flex-direction: column; gap: 2px; }
.pl-vazio { padding: 60px 20px; text-align: center; }
.leitura { max-width: 760px; margin: 0 auto; padding: 28px 22px 36px; background: #fff; font-size: 1.05rem; }
.leitura h2 { font-size: 1.5rem; margin-top: 1.4em; }
.leitura blockquote { border-left: 4px solid var(--roxo2); margin: 16px 0; padding: 8px 16px; background: var(--lilas2); border-radius: 0 10px 10px 0; }
.leitura pre, .leitura code { background: #F7F4FF; border-radius: 8px; }
.leitura pre { padding: 12px 14px; white-space: pre-wrap; }


/* In-lesson quiz */
.quiz-aula { max-width: 760px; margin: 0 auto; padding: 26px 22px 30px; background: #fff; }
.qz-q { border: 1px solid var(--linha); border-radius: 12px; padding: 18px; margin-bottom: 14px; }
.qz-q h3 { font-family: Inter, sans-serif; font-size: 1.02rem; letter-spacing: 0; line-height: 1.4; }
.qz-op { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1.5px solid var(--linha); border-radius: 10px; margin-top: 8px; cursor: pointer; font-weight: 500; }
.qz-op input { margin-top: 4px; width: auto; }
.qz-op.certa { border-color: #4d7c0f; background: #F2FBDD; }
.qz-op.errada { border-color: #d9534f; background: #FFF0EC; }
.qz-exp { margin: 10px 0 0; font-size: .92rem; color: #3b3842; background: #f8f7fa; border-radius: 8px; padding: 10px 12px; }
.qz-res { font-weight: 700; }

/* Animated lesson (slides + narration), driven by public/js/player.js.
   .aa-slide holds the background; .aa-cam holds the content and is moved by the camera. */
.aula-anim { position: relative; max-width: 1100px; margin: 0 auto; outline: none; }
.aula-anim:fullscreen { background: #000; display: flex; flex-direction: column; justify-content: center; }
.aula-anim:fullscreen .aa-stage { max-height: calc(100vh - 60px); width: min(100%, calc((100vh - 60px) * 16 / 9)); margin: 0 auto; }
.aa-stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #fff; container-type: inline-size; user-select: none; }
.aa-slide { position: absolute; inset: 0; overflow: hidden; opacity: 0; font-size: 2.15cqw; line-height: 1.35; color: var(--texto); background: #fff; transition: opacity .5s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.aa-slide.tx0 { transform: translateX(7%); }
.aa-slide.tx1 { transform: scale(1.12); }
.aa-slide.tx2 { transform: translateY(7%); }
.aa-slide.on { opacity: 1; transform: none; z-index: 2; }
.aa-slide.sai { z-index: 1; }
.aa-slide.tx0.sai { transform: translateX(-7%); }
.aa-slide.tx1.sai { transform: scale(.94); }
.aa-slide.tx2.sai { transform: translateY(-6%); }
.aa-slide:not(.escuro):not(.roxo)::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: .9cqw; background: linear-gradient(var(--roxo), var(--roxo2)); z-index: 1; }
.aa-slide::after { content: 'quickcursos'; position: absolute; right: 2.4cqw; top: 2cqw; font: 800 1.2cqw 'Bricolage Grotesque', Inter, sans-serif; letter-spacing: -0.01em; opacity: .35; }
.aa-slide.escuro { background: linear-gradient(135deg, #1C1B22, #3B1E8F); color: #fff; }
.aa-slide.roxo { background: linear-gradient(135deg, #3B1E8F, #5B3FD0); color: #fff; }
.aa-slide.lilas { background: linear-gradient(135deg, #F4F0FF, #fff 70%); }
.aa-cam { position: absolute; inset: 0; padding: 5.5cqw 7cqw 7.5cqw; display: flex; flex-direction: column; justify-content: center; transform-origin: 50% 50%; will-change: transform; }
.aa-slide:not(.sem-masc) .aa-cam { padding-right: 22cqw; }
.aa-slide.denso:not(.sem-masc) .aa-cam { padding-right: 13cqw; }
.aa-slide.l-chat .aa-cam { justify-content: flex-start; padding-top: 6cqw; }
.aa-slide.l-planilha .aa-cam { padding-top: 3.6cqw; padding-bottom: 7cqw; }
.aa-slide.l-planilha h3 { font-size: 3cqw; margin-bottom: 1.4cqw; }
.aa-slide.l-celular .aa-cam, .aa-slide.l-janela .aa-cam { padding-top: 3.4cqw; padding-bottom: 8.4cqw; }
/* Soft colour blobs drifting behind the content keep still slides alive. */
.aa-blob { position: absolute; border-radius: 50%; pointer-events: none; animation: aaBlob 14s ease-in-out infinite alternate; }
.aa-blob.b1 { width: 34cqw; height: 34cqw; left: -10cqw; top: -14cqw; background: radial-gradient(circle, rgba(233, 225, 255, .9), transparent 68%); }
.aa-blob.b2 { width: 28cqw; height: 28cqw; right: 6cqw; bottom: -14cqw; background: radial-gradient(circle, rgba(198, 244, 50, .32), transparent 68%); animation-duration: 18s; }
.aa-blob.b3 { width: 44cqw; height: 44cqw; right: -12cqw; bottom: -20cqw; background: radial-gradient(circle, rgba(198, 244, 50, .16), transparent 68%); }
@keyframes aaBlob { to { transform: translate(5cqw, 4cqw) scale(1.15); } }
.aa-kicker { font-size: 1.4cqw; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--roxo2); margin-bottom: 1.2cqw; }
.escuro .aa-kicker, .roxo .aa-kicker { color: var(--lima); }
.aa-slide h2 { font-size: 4.6cqw; line-height: 1.08; margin: 0 0 2cqw; }
.aa-slide h3 { font-size: 3.4cqw; margin: 0 0 2.4cqw; }
.aa-slide:not(.escuro):not(.roxo) h3 { color: var(--roxo); }
.aa-sub { font-size: 2.3cqw; opacity: .85; max-width: 80%; }
.aa-slide.on .aa-kicker { animation: aaKick .5s both; }
.aa-slide.on .aa-sub { animation: aaSobe .6s .55s both; }
@keyframes aaKick { from { opacity: 0; transform: translateX(-2.5cqw); } }
@keyframes aaSobe { from { opacity: 0; transform: translateY(1.6cqw); } }
.aa-deco { position: absolute; right: -8cqw; top: -12cqw; width: 40cqw; height: 40cqw; border-radius: 50%; background: rgba(198, 244, 50, .22); animation: aaFlutua 9s ease-in-out infinite alternate; }
.aa-deco.d2 { right: auto; left: -6cqw; top: auto; bottom: -10cqw; width: 18cqw; height: 18cqw; background: none; border: 1.4cqw solid rgba(255, 255, 255, .08); animation-duration: 12s; }
@keyframes aaFlutua { to { transform: translate(-3cqw, 3cqw) scale(1.08); } }
/* Titles and highlights enter word by word. */
.kw { display: inline-block; }
.aa-slide.on .kw { animation: aaPalavra .55s cubic-bezier(.2, 1.3, .4, 1) both; animation-delay: calc(var(--i) * 60ms + 120ms); }
@keyframes aaPalavra { from { opacity: 0; transform: translateY(.8em) rotate(4deg) scale(.9); } }
.aa-destaque { font-family: 'Bricolage Grotesque', Inter, sans-serif; font-weight: 800; font-size: 6cqw; line-height: 1.05; letter-spacing: -0.02em; }
.aa-destaque em { font-style: normal; background: linear-gradient(var(--lima), var(--lima)) no-repeat 0 88% / 0% 42%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.aa-slide.on .aa-destaque em { animation: aaMarca .6s 1s cubic-bezier(.6, 0, .3, 1) forwards; }
@keyframes aaMarca { to { background-size: 100% 42%; } }
.roxo .aa-destaque em, .escuro .aa-destaque em, .escuro h2 em, .roxo h2 em { color: var(--lima); background: none; animation: none; }
/* Items revealed by the narration */
.aa-item { opacity: 0; transform: translateY(1.6cqw) scale(.97); transition: opacity .45s ease, transform .55s cubic-bezier(.2, 1.4, .4, 1); }
.aa-stage .aa-item.on { opacity: 1; transform: none; }
.aa-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.2cqw; }
.aa-lista li { display: flex; gap: 1.8cqw; align-items: flex-start; padding: .6cqw 1cqw; margin: 0 -1cqw; border-radius: 1.4cqw; transition: opacity .45s ease, transform .55s cubic-bezier(.2, 1.4, .4, 1), background .4s, box-shadow .4s; }
.aa-lista li.aa-item { transform: translateX(-3cqw); }
.aa-lista li.atual { background: #F4F0FF; box-shadow: 0 0 0 .25cqw #E2D9FF; }
.escuro .aa-lista li.atual, .roxo .aa-lista li.atual { background: rgba(255, 255, 255, .08); box-shadow: none; }
.aa-n { flex: none; width: 4cqw; height: 4cqw; border-radius: 1cqw; background: var(--roxo); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 2cqw; transition: transform .4s cubic-bezier(.3, 1.8, .5, 1), background .3s; }
.aa-lista li.atual .aa-n { transform: scale(1.12) rotate(-4deg); background: var(--roxo2); }
.escuro .aa-n, .roxo .aa-n { background: var(--lima); color: var(--texto); }
.aa-lista.mini { gap: .8cqw; font-size: 1.75cqw; }
.aa-lista.mini .aa-n { width: 3cqw; height: 3cqw; font-size: 1.5cqw; border-radius: .8cqw; }
.aa-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.aa-cols .aa-item:not(.on):first-child { transform: translateX(-4cqw); }
.aa-cols .aa-item:not(.on):last-child { transform: translateX(4cqw); }
.aa-col { position: relative; border-radius: 1.6cqw; padding: 2.6cqw; background: #f7f6fa; }
.aa-col.ruim { background: #FFF0EC; }
.aa-col.bom { background: #F2FBDD; }
.aa-col b { display: block; font-size: 2.4cqw; margin-bottom: 1.4cqw; }
.aa-col ul { margin: 0; padding-left: 2.4cqw; display: grid; gap: .8cqw; }
.aa-selo { position: absolute; top: -1.8cqw; right: -1.4cqw; width: 5cqw; height: 5cqw; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 2.6cqw; color: #fff; transform: scale(0) rotate(-40deg); transition: transform .5s .35s cubic-bezier(.3, 1.8, .5, 1); box-shadow: 0 .6cqw 1.2cqw rgba(0, 0, 0, .15); }
.ruim .aa-selo { background: #E5484D; }
.bom .aa-selo { background: #4d7c0f; }
.aa-item.on .aa-selo { transform: none; }
.aa-passos { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2cqw; }
.aa-passo { background: #f7f6fa; border-radius: 1.6cqw; padding: 2.4cqw; border-top: .7cqw solid var(--roxo); height: 100%; box-sizing: border-box; transition: transform .4s ease, box-shadow .4s ease, background .4s, border-color .4s; }
.aa-passo b { display: block; font-size: 1.6cqw; color: var(--roxo2); margin-bottom: .8cqw; }
.aa-passo-t { font-size: 1.6cqw; opacity: .8; margin-top: .6cqw; }
.aa-item.atual .aa-passo { transform: translateY(-.8cqw); background: #fff; border-top-color: var(--lima); box-shadow: 0 1.2cqw 2.6cqw rgba(59, 30, 143, .18); }
.aa-trilho { height: .6cqw; background: #ECE8F4; border-radius: 99px; margin-top: 2.2cqw; overflow: hidden; }
.aa-trilho i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--roxo2), var(--lima)); transition: width .7s ease; }
.aa-caixa { display: grid; background: #F7F4FF; border: .25cqw solid #d9cffb; border-radius: 1.6cqw; padding: 2.4cqw 2.8cqw; font-size: 2cqw; white-space: pre-wrap; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; line-height: 1.45; }
.aa-caixa > span { grid-area: 1 / 1; }
.aa-ghost { visibility: hidden; }
.aa-caixa-tit { display: flex; gap: 1cqw; align-items: center; font-weight: 800; font-size: 1.5cqw; color: var(--roxo2); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1cqw; }
/* Typing caret */
.aa-txt.dig::after { content: ''; display: inline-block; width: .12em; height: 1.05em; background: currentColor; margin-left: .08em; vertical-align: -.15em; animation: aaCaret .8s steps(1) infinite; }
@keyframes aaCaret { 50% { opacity: 0; } }
.aa-chat { display: grid; gap: 1.4cqw; align-content: start; }
.aa-msg { max-width: 78%; border-radius: 1.8cqw; padding: 1.4cqw 2cqw; font-size: 1.9cqw; line-height: 1.4; white-space: pre-wrap; transform-origin: bottom left; }
.aa-msg.voce { justify-self: end; background: var(--roxo); color: #fff; border-bottom-right-radius: .4cqw; transform-origin: bottom right; }
.aa-msg.auto { background: #1C1B22; }
.aa-msg.auto small::before { content: '⚡ '; }
.aa-msg.ia { justify-self: start; background: #f1eff5; border-bottom-left-radius: .4cqw; }
.aa-msg.aa-item { transform: translateY(1.4cqw) scale(.85); }
.aa-msg small { display: block; font-size: 1.2cqw; font-weight: 800; opacity: .7; margin-bottom: .4cqw; text-transform: uppercase; letter-spacing: .08em; }
.aa-dots { display: inline-flex; gap: .4cqw; padding: .4cqw 0; }
.aa-dots[hidden] { display: none; }
.aa-dots i { width: .8cqw; height: .8cqw; border-radius: 50%; background: currentColor; opacity: .45; animation: aaDots 1s infinite; }
.aa-dots i:nth-child(2) { animation-delay: .15s; }
.aa-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes aaDots { 30% { transform: translateY(-.4cqw); opacity: 1; } }
.aa-dica { display: flex; gap: 2cqw; align-items: center; background: #F2FBDD; border-radius: 2cqw; padding: 3cqw; font-size: 2.5cqw; }
.aa-dica .ic { width: 7cqw; height: 7cqw; color: #4d7c0f; animation: aaBalanca 2.4s ease-in-out infinite; }
@keyframes aaBalanca { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg) scale(1.06); } }
/* Simulated spreadsheet */
.aa-planilha { border: .2cqw solid #cfd6cf; border-radius: 1cqw; overflow: hidden; background: #fff; font-family: 'Segoe UI', Inter, sans-serif; box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .08); }
.aa-fx { display: flex; align-items: center; gap: 1.4cqw; padding: .9cqw 1.4cqw; border-bottom: .2cqw solid #cfd6cf; background: #f8faf8; min-height: 1.4em; }
.aa-fx b { color: #217346; font-style: italic; font-family: Georgia, serif; }
.aa-fx code { font-family: ui-monospace, Consolas, monospace; color: #1C1B22; }
.aa-grid { display: grid; }
.aa-grid > div { border-right: .15cqw solid #e2e7e2; border-bottom: .15cqw solid #e2e7e2; padding: .36em .7em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .25s, box-shadow .25s; }
.aa-grid .hd { background: #eef2ee; color: #5b6b5b; text-align: center; font-weight: 600; padding-left: .15em; padding-right: .15em; text-overflow: clip; }
.aa-grid .hd.filtrada { color: #1d5bd8; font-weight: 700; }
.aa-grid .cn { text-align: right; font-variant-numeric: tabular-nums; }
.aa-grid .neg { font-weight: 700; }
.aa-grid .mark { background: #E6F4EA; box-shadow: inset 0 0 0 .3cqw #217346; }
.aa-grid .mark.arrastando { background: #d3ecdb; }
.aa-grid .res { background: #FFF6CC; box-shadow: inset 0 0 0 .3cqw #E59819; font-weight: 700; }
.aa-grid .res.flash { animation: aaFlash .6s ease; }
@keyframes aaFlash { 35% { background: var(--lima); } }
/* Column chart: bars grow and their values count up */
.aa-grafico { background: #fff; border: .2cqw solid #e3e0ea; border-radius: 1.2cqw; padding: 2cqw 2.4cqw 1.6cqw; height: 30cqw; display: flex; flex-direction: column; }
.gr-tit { font-weight: 800; font-size: 2cqw; margin-bottom: 2.4cqw; color: var(--texto); display: flex; justify-content: space-between; align-items: center; gap: 2cqw; }
.gr-meta-leg { display: inline-flex; align-items: center; gap: .8cqw; font-size: 1.4cqw; font-weight: 700; color: #9a5b00; white-space: nowrap; }
.gr-meta-leg i { width: 3cqw; border-top: .3cqw dashed #E59819; }
.gr-area { position: relative; flex: 1; display: flex; align-items: flex-end; gap: 3cqw; padding: 0 2cqw 3.4cqw; border-bottom: .25cqw solid #9b96a6; }
.gr-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.aa-stage .gr-col.aa-item { opacity: 1; transform: none; }
.gr-bar { width: 72%; background: var(--roxo); border-radius: .6cqw .6cqw 0 0; position: relative; transition: height .8s cubic-bezier(.2, 1.1, .4, 1); }
.gr-col:not(.on) .gr-bar { height: 0 !important; }
.gr-col:not(.on) .gr-val, .gr-col:not(.on) .gr-cat { opacity: 0; }
.gr-bar.realce { background: var(--coral); }
.gr-val { position: absolute; top: -2.6cqw; left: 50%; transform: translateX(-50%); font-weight: 800; font-size: 1.7cqw; white-space: nowrap; color: var(--texto); transition: opacity .3s; }
.gr-cat { position: absolute; bottom: -3cqw; font-size: 1.6cqw; color: var(--suave); white-space: nowrap; transition: opacity .3s; }
.gr-meta { position: absolute; left: 0; right: 0; border-top: .3cqw dashed #E59819; z-index: 2; }
.aa-grafico.poluido .gr-tit { font-weight: 400; justify-content: center; color: #595959; font-family: Calibri, 'Segoe UI', sans-serif; }
.aa-grafico.poluido .gr-bar { background: linear-gradient(90deg, #4472C4, #8FAADC 45%, #2F5597); box-shadow: 1cqw -1cqw 0 #1f3864; border-radius: 0; }
.aa-grafico.poluido .gr-area { background: linear-gradient(#f2f2f2, #fff); }
.gr-grid { position: absolute; left: 0; right: 0; border-top: .2cqw solid #bfbfbf; }
.gr-leg { align-self: center; font-size: 1.4cqw; color: #595959; margin-top: .8cqw; display: flex; align-items: center; gap: .6cqw; }
.gr-leg i { width: 1.4cqw; height: 1.4cqw; background: #4472C4; display: inline-block; }
/* Phone and window mock-ups */
.ui-wrap { display: flex; align-items: center; gap: 4cqw; height: 100%; }
.ui-wrap.so { justify-content: center; }
.ui-lado { flex: 1; min-width: 0; }
.ui-lado h3 { margin-bottom: 1.6cqw; }
.ui-lado .aa-sub { font-size: 1.9cqw; max-width: none; margin: 0 0 1.6cqw; }
.ui-cel { position: relative; flex: none; height: 42.5cqw; aspect-ratio: 9 / 18.5; background: #17161c; border-radius: 3.6cqw; padding: .9cqw; box-sizing: border-box; box-shadow: 0 2cqw 4cqw rgba(28, 27, 34, .25), inset 0 0 0 .3cqw #3a3842; }
.ui-notch { position: absolute; top: 1.5cqw; left: 50%; transform: translateX(-50%); width: 6cqw; height: 1.3cqw; background: #17161c; border-radius: 99px; z-index: 3; }
.ui-telas { position: relative; height: 100%; overflow: hidden; border-radius: 2.8cqw; }
.ui-jan .ui-telas { flex: 1; height: auto; min-height: 0; border-radius: 0; }
.ui-tela.multi { position: absolute; inset: 0; transition: transform .5s cubic-bezier(.3, .9, .3, 1), opacity .5s; }
.ui-tela.multi.frente { transform: translateX(104%); }
.ui-tela.multi.atras { transform: translateX(-28%); opacity: .35; }
.ui-tela.multi.atual { z-index: 2; box-shadow: -1cqw 0 2cqw rgba(0, 0, 0, .12); }
.ui-dir.ui-toque { font-size: 1.7cqw; color: #1C1B22; }
.ui-tela { position: relative; height: 100%; background: #fff; border-radius: 2.8cqw; overflow: hidden; display: flex; flex-direction: column; font: 500 1.25cqw/1.35 Inter, sans-serif; color: #1C1B22; box-sizing: border-box; }
.ui-cel .ui-tela { padding-top: 3.2cqw; }
.ui-cel .ui-tela::before { content: '9:41'; position: absolute; top: 1cqw; left: 2.2cqw; font: 700 1.05cqw Inter, sans-serif; }
.ui-tela-in { position: relative; flex: none; padding: 0 1.2cqw 1.2cqw; display: flex; flex-direction: column; gap: 1cqw; }
.ui-fixo { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2cqw 1.2cqw 1.2cqw; background: linear-gradient(rgba(255, 255, 255, 0), #fff 35%); }
.ui-b { position: relative; }
.ui-b.aa-item { transform: translateY(1.2cqw) scale(.96); }
.ui-barra { display: flex; align-items: center; gap: .8cqw; font-size: 1.35cqw; padding: .3cqw 0 .7cqw; border-bottom: .1cqw solid #eee; }
.ui-volta { font-size: 2cqw; line-height: 1; }
.ui-dir { margin-left: auto; color: #888; }
.ui-perfil { display: flex; align-items: center; gap: 1.2cqw; }
.ui-av { flex: none; width: 5cqw; height: 5cqw; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.6cqw; background: #F4F0FF; box-shadow: 0 0 0 .3cqw #fff, 0 0 0 .55cqw #E1306C; }
.ui-nums { flex: 1; min-width: 0; display: flex; justify-content: space-between; gap: .4cqw; text-align: center; }
.ui-nums b { display: block; font-size: 1.3cqw; }
.ui-nums small { display: block; font-size: .78cqw; color: #666; white-space: nowrap; }
.ui-nome { display: block; font-size: 1.3cqw; margin-top: .6cqw; }
.ui-cat { display: block; color: #777; font-size: 1.05cqw; }
.ui-txt { margin: 0; font-size: 1.2cqw; }
.ui-txt.forte { font-weight: 800; font-size: 1.4cqw; }
.ui-txt.peq { font-size: 1.05cqw; color: #666; }
.ui-btn { text-align: center; font-weight: 700; font-size: 1.15cqw; padding: .7cqw 1cqw; border-radius: .9cqw; background: #EFEFEF; }
.ui-btn.azul { background: #0095F6; color: #fff; }
.ui-btn.roxo { background: var(--roxo2); color: #fff; }
.ui-btn.verde { background: #25D366; color: #fff; }
.ui-btn.lima { background: var(--lima); }
.ui-btns { display: flex; gap: .6cqw; }
.ui-btns > * { flex: 1; }
.ui-campo small { display: block; font-size: 1cqw; color: #777; margin-bottom: .3cqw; }
.ui-in { display: flex; align-items: center; gap: .6cqw; min-height: 3cqw; border: .15cqw solid #ddd; border-radius: 1.6cqw; padding: .5cqw 1.1cqw; font-size: 1.2cqw; background: #fff; box-sizing: border-box; }
.ui-in .aa-txt { white-space: pre-wrap; }
.ui-ph { color: #aaa; }
.ui-in:not(.vazio) .ui-ph { display: none; }
.ui-send { margin-left: auto; color: var(--roxo2); font-style: normal; font-size: 1.4cqw; }
.ui-dest { display: flex; gap: 1cqw; overflow: hidden; }
.ui-dest-i { text-align: center; width: 4.6cqw; flex: none; }
.ui-dest-i i { display: flex; align-items: center; justify-content: center; width: 4.2cqw; height: 4.2cqw; margin: 0 auto; border-radius: 50%; border: .2cqw solid #ddd; font-style: normal; font-size: 1.9cqw; background: #fafafa; }
.ui-dest-i small { display: block; font-size: .9cqw; margin-top: .3cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-grade { display: grid; gap: .25cqw; margin: 0 -1.2cqw; }
.ui-tile { aspect-ratio: 4 / 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3cqw; padding: .4cqw; text-align: center; font-size: .9cqw; font-weight: 700; line-height: 1.15; box-sizing: border-box; }
.ui-tile i { font-style: normal; font-size: 2.1cqw; }
.ui-msgs { gap: .8cqw; }
.ui-msgs .aa-msg { font-size: 1.2cqw; padding: .8cqw 1.1cqw; border-radius: 1.4cqw; max-width: 85%; }
.ui-msgs .aa-msg small { font-size: .8cqw; margin-bottom: .2cqw; }
.ui-lista { display: grid; }
.ui-row { display: flex; align-items: center; gap: 1cqw; padding: .7cqw .2cqw; border-bottom: .1cqw solid #f0f0f0; }
.ui-row i { font-style: normal; font-size: 1.7cqw; flex: none; width: 2.6cqw; text-align: center; }
.ui-row b { display: block; font-size: 1.2cqw; }
.ui-row small { display: block; font-size: 1cqw; color: #666; }
.ui-extra { margin-left: auto; font-size: 1cqw; color: #888; white-space: nowrap; }
.ui-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: .8cqw; }
.ui-num { background: #F7F5FB; border-radius: 1.2cqw; padding: 1cqw; }
.ui-num b { display: block; font-size: 2cqw; font-family: 'Bricolage Grotesque', Inter, sans-serif; }
.ui-num small { font-size: 1cqw; color: #666; }
.ui-num em { font-style: normal; font-size: 1cqw; font-weight: 800; margin-left: .4cqw; }
.ui-num em.alto { color: #2f7d32; }
.ui-num em.baixo { color: #c62828; }
.ui-img { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .8cqw; padding: 1.6cqw; font-weight: 800; font-size: 1.6cqw; line-height: 1.15; margin: 0 -1.2cqw; box-sizing: border-box; }
.ui-img i { font-style: normal; font-size: 5cqw; }
.ui-abas { display: flex; border-bottom: .1cqw solid #eee; margin: 0 -1.2cqw; }
.ui-abas span { flex: 1; text-align: center; padding: .6cqw; font-size: 1cqw; color: #999; font-weight: 700; }
.ui-abas span.on { color: #111; box-shadow: inset 0 -.2cqw 0 #111; }
.ui-aviso { background: #1C1B22; color: #fff; border-radius: 1cqw; padding: .8cqw 1.1cqw; font-size: 1.1cqw; font-weight: 600; box-shadow: 0 .6cqw 1.4cqw rgba(0, 0, 0, .2); }
.ui-jan { flex: 1; max-width: 70cqw; height: 42cqw; display: flex; flex-direction: column; background: #fff; border-radius: 1.4cqw; overflow: hidden; box-shadow: 0 2cqw 4cqw rgba(28, 27, 34, .2), 0 0 0 .15cqw #e3e0ea; }
.ui-jbar { flex: none; display: flex; align-items: center; gap: .6cqw; padding: .9cqw 1.2cqw; background: #F3F1F7; border-bottom: .15cqw solid #e3e0ea; }
.ui-jbar i { width: 1cqw; height: 1cqw; border-radius: 50%; background: #FF5F57; }
.ui-jbar i:nth-child(2) { background: #FEBC2E; }
.ui-jbar i:nth-child(3) { background: #28C840; }
.ui-jbar span { margin-left: 1cqw; font-size: 1.15cqw; color: #666; background: #fff; border-radius: 99px; padding: .25cqw 1.4cqw; flex: 1; max-width: 40cqw; }
.ui-jan .ui-tela { border-radius: 0; font-size: 1.45cqw; }
.ui-jan .ui-tela-in { padding: 1.6cqw 2.4cqw; gap: 1.2cqw; }
.ui-jan .ui-fixo { padding: 1.4cqw 2.4cqw 1.6cqw; }
.ui-jan .ui-txt { font-size: 1.5cqw; }
.ui-jan .ui-txt.forte { font-size: 1.8cqw; }
.ui-jan .ui-in { font-size: 1.45cqw; min-height: 3.8cqw; }
.ui-jan .ui-btn { font-size: 1.4cqw; }
.ui-jan .ui-msgs .aa-msg { font-size: 1.45cqw; max-width: 80%; }
.ui-jan .ui-row b { font-size: 1.45cqw; }
.ui-jan .ui-row small { font-size: 1.2cqw; }
.ui-jan .ui-img { aspect-ratio: auto; height: 17cqw; margin: 0; border-radius: 1cqw; font-size: 1.5cqw; }
.ui-jan .ui-img i { font-size: 4.4cqw; }
/* Pointer: arrow cursor or fingertip, with a click ripple */
.aa-ponteiro { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; opacity: 0; transition: opacity .3s; }
.aa-ponteiro.on { opacity: 1; }
.aa-ponteiro.seta::before { content: ''; position: absolute; left: -.45cqw; top: -.25cqw; width: 2.8cqw; height: 2.8cqw; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 9-6.5 1.6L9 19z' fill='white' stroke='%2317161c' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; filter: drop-shadow(0 .3cqw .4cqw rgba(0, 0, 0, .3)); transform-origin: 15% 10%; transition: transform .15s; }
.aa-ponteiro.seta.down::before { transform: scale(.86); }
.aa-ponteiro.dedo::before { content: ''; position: absolute; left: -1.6cqw; top: -1.6cqw; width: 3.2cqw; height: 3.2cqw; border-radius: 50%; background: rgba(28, 27, 34, .3); border: .25cqw solid rgba(255, 255, 255, .95); box-shadow: 0 .3cqw .8cqw rgba(0, 0, 0, .25); box-sizing: border-box; }
.aa-clique { position: absolute; left: -2.5cqw; top: -2.5cqw; width: 5cqw; height: 5cqw; border-radius: 50%; border: .35cqw solid var(--lima); background: rgba(198, 244, 50, .25); z-index: 5; pointer-events: none; box-sizing: border-box; }
.aa-clique:not(.on) { opacity: 0 !important; }
/* Floating labels pinned to what is being explained */
.aa-etq { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; }
.aa-etq span { position: absolute; left: 0; bottom: .9cqw; transform: translateX(-50%) scale(.5); opacity: 0; white-space: nowrap; background: #fff; color: #1C1B22; font: 800 1.2cqw Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: .55cqw 1.1cqw; border-radius: 99px; box-shadow: 0 .4cqw 1.2cqw rgba(28, 27, 34, .25); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), opacity .25s; }
.aa-etq span::before { content: ''; display: inline-block; width: .75cqw; height: .75cqw; border-radius: 50%; background: var(--roxo2); margin-right: .6cqw; vertical-align: .1cqw; }
.aa-etq span::after { content: ''; position: absolute; left: 50%; bottom: -.45cqw; width: .9cqw; height: .9cqw; background: #fff; transform: translateX(-50%) rotate(45deg); }
.aa-etq.on span { transform: translateX(-50%); opacity: 1; }
/* Quico */
.aa-masc { position: absolute; right: 1.4cqw; bottom: -.4cqw; height: 25cqw; aspect-ratio: 200 / 270; z-index: 4; pointer-events: none; transition: height .5s ease, transform .55s cubic-bezier(.3, 1.4, .5, 1), opacity .4s; }
.aa-masc.mini { height: 15cqw; right: .6cqw; }
.aa-masc.fora { transform: translateY(110%); opacity: 0; }
.aa-masc svg { width: 100%; height: 100%; overflow: visible; }
.aa-masc.claro svg { filter: drop-shadow(0 0 .5cqw rgba(255, 255, 255, .5)); }
.q-sombra { fill: #000; opacity: .12; }
.q-tronco { fill: url(#qcTr); stroke: #3B1E8F; stroke-width: 4; }
.q-selo { fill: #C6F432; stroke: #3B1E8F; stroke-width: 3; }
.q-q { fill: none; stroke: #3B1E8F; stroke-width: 4; stroke-linecap: round; }
.q-haste { stroke: #3B1E8F; stroke-width: 5; stroke-linecap: round; }
.q-antena { fill: #C6F432; stroke: #3B1E8F; stroke-width: 3; }
.q-orelha { fill: #C6F432; stroke: #3B1E8F; stroke-width: 3; }
.q-tela { fill: #17161c; }
.q-brilho { fill: #fff; opacity: .14; }
.q-on rect { fill: #C6F432; }
.q-of { fill: none; stroke: #C6F432; stroke-width: 6; stroke-linecap: round; display: none; }
.aa-masc.feliz .q-of { display: inline; }
.aa-masc.feliz .q-on { display: none; }
.q-olhos { transform-box: view-box; transform-origin: 100px 88px; }
.q-boche { fill: #FF8A6B; opacity: .5; }
.q-sorriso { fill: none; stroke: #C6F432; stroke-width: 5; stroke-linecap: round; }
.q-boca { fill: #C6F432; display: none; }
.aa-masc.falando .q-boca { display: inline; }
.aa-masc.falando .q-sorriso { display: none; }
.q-braco path { fill: none; stroke: #3B1E8F; stroke-width: 15; stroke-linecap: round; }
.q-braco circle { fill: #C6F432; stroke: #3B1E8F; stroke-width: 4; }
.q-be { transform-box: view-box; transform-origin: 64px 172px; }
.q-bd { transform-box: view-box; transform-origin: 136px 172px; }
/* Kinetic captions: short groups of words, the spoken one in lime */
.aa-legenda { position: absolute; left: 0; right: 0; bottom: 2.4cqw; z-index: 7; text-align: center; pointer-events: none; font: 900 3.2cqw/1.1 'Bricolage Grotesque', Inter, sans-serif; color: #fff; letter-spacing: -0.01em; text-shadow: 0 0 .5cqw #17161c, .22cqw .22cqw 0 #17161c, -.22cqw .22cqw 0 #17161c, .22cqw -.22cqw 0 #17161c, -.22cqw -.22cqw 0 #17161c, 0 .5cqw 0 #17161c; }
.aa-legenda .g { display: inline-block; animation: aaLeg .22s cubic-bezier(.3, 1.6, .5, 1); }
.aa-legenda .w { display: inline-block; margin: 0 .14em; transition: color .1s, transform .12s; }
.aa-legenda .w.on { color: var(--lima); transform: scale(1.1) rotate(-2deg); }
@keyframes aaLeg { from { transform: scale(.7); opacity: 0; } }
.aa-start { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4cqw; background: rgba(13, 12, 17, .45); color: #fff; border: 0; cursor: pointer; font: 700 2cqw Inter, sans-serif; }
.aa-start .ic { width: 9cqw; height: 9cqw; background: var(--lima); color: var(--texto); border-radius: 50%; padding: 2.2cqw 1.8cqw 2.2cqw 2.6cqw; }
.aa-controls { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #0d0c11; color: #fff; }
.aa-controls button { background: none; border: 0; color: #fff; cursor: pointer; font: 700 .85rem Inter, sans-serif; padding: 6px 8px; border-radius: 6px; display: inline-flex; align-items: center; gap: 4px; }
.aa-controls button:hover { background: rgba(255, 255, 255, .1); }
.aa-controls button.on { color: var(--lima); }
.aa-bar { flex: 1; height: 6px; background: #3a3842; border-radius: 99px; position: relative; cursor: pointer; }
.aa-bar > div { position: absolute; left: 0; top: 0; bottom: 0; background: var(--lima); border-radius: 99px; }
.aa-bar > i { position: absolute; top: -2px; bottom: -2px; width: 2px; background: rgba(255, 255, 255, .3); z-index: 1; pointer-events: none; }
.aa-time { font-size: .8rem; color: #c9c5d1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aa-aviso { font-size: .78rem; color: #9a96a3; padding: 6px 12px 10px; background: #0d0c11; margin: 0; }
@media (max-width: 560px) { .aa-controls { gap: 2px; padding: 6px 8px; } .aa-controls button { padding: 6px 5px; } .aa-time { font-size: .72rem; } }
@media (prefers-reduced-motion: reduce) { .aa-cam { transform: none !important; } .aa-slide, .aa-item, .kw, .aa-blob, .aa-deco { animation: none !important; transition: opacity .3s !important; } }