/* C13 · Auto Escola Universo · one version, phone first */
@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('BarlowSemiCondensed-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('NunitoSans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('NunitoSans-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --azul: #0b2265;
  --azul-2: #143383;
  --azul-fundo: #071747;
  --amarelo: #ffc20e;
  --amarelo-claro: #ffd65c;
  --tinta: #0e1a3a;
  --suave: #4a5470;
  --fundo: #f4f6fb;
  --linha: #6f7b9e;
  --linha-suave: #d5dbea;
  --raio: 14px;
  --display: 'Barlow Semi Condensed', 'Arial Narrow', Arial, sans-serif;
  --texto: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body { margin: 0; font-family: var(--texto); font-size: 1.0625rem; line-height: 1.55; color: var(--tinta); background: #fff; }
img,
video { display: block; max-width: 100%; height: auto; }
h1,
h2,
h3 { font-family: var(--display); font-weight: 700; line-height: 1.08; margin: 0; text-wrap: balance; overflow-wrap: anywhere; hyphens: auto; }
p,
ul,
ol,
figure,
address { margin: 0; }
address { font-style: normal; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--azul-2); outline-offset: 3px; }
.escuro :focus-visible { outline-color: var(--amarelo); }

.envolve { max-width: 72rem; margin: 0 auto; padding: 0 16px; }
@media (min-width: 48em) {
  .envolve { padding: 0 40px; }
}


/* The first screen */
.topo { background: var(--azul); color: #fff; padding: 20px 0 32px; }
.topo-grade { display: grid; gap: 24px; }
.topo-texto { min-width: 0; }
.logo { width: min(270px, 74vw); height: auto; }
.sobretitulo { font-weight: 700; font-size: 1rem; letter-spacing: .02em; }
.topo .sobretitulo { color: var(--amarelo-claro); margin-top: 14px; }
.marca { margin: 0; }
/* The slogan keeps the look it had as the h1; the h1 is now the logo (the business's name). */
.topo .slogan { font-family: var(--display); font-weight: 700; line-height: 1.08; text-wrap: balance; overflow-wrap: anywhere; hyphens: auto; font-size: clamp(2.125rem, 9vw, 3.75rem); text-transform: uppercase; margin-top: 8px; }
.topo-lead { margin-top: 12px; color: #e6ebf7; max-width: 34rem; }
/* The Google rating: four full stars and a fifth filled about 70 % (4,7), as Google draws it. */
.estrelas { display: inline-block; font-size: 1.25rem; line-height: 1; letter-spacing: 2px; color: var(--amarelo); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .estrela-parcial { letter-spacing: 0; background: linear-gradient(90deg, var(--amarelo) 0 65%, var(--estrela-vazia, rgba(255, 255, 255, .38)) 65%); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.topo-nota { margin-top: 14px; }
.topo-nota a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-height: 44px; color: #fff; text-decoration: none; }
.topo-nota-texto { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .55); text-underline-offset: 4px; }
.topo-nota strong { font-size: 1.1875rem; }
.topo-nota a:hover .topo-nota-texto { text-decoration-color: #fff; }
.botoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.botoes .botao { flex: 1 1 auto; }
.botao { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 22px; border: 2px solid var(--amarelo); border-radius: 12px; background: var(--amarelo); color: var(--azul); font-weight: 700; font-size: 1.0625rem; line-height: 1.2; text-align: center; text-decoration: none; }
.botao:hover { background: var(--amarelo-claro); border-color: var(--amarelo-claro); }
.botao-contorno { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .8); }
.botao-contorno:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.botao-azul { background: var(--azul); color: #fff; border-color: var(--azul); }
.botao-azul:hover { background: var(--azul-2); border-color: var(--azul-2); }
.topo-info { list-style: none; padding: 0; margin-top: 18px; display: grid; gap: 4px; color: #dfe5f5; }
.topo-foto img { width: 100%; aspect-ratio: 1120 / 960; object-fit: cover; border-radius: var(--raio); }
.junto { white-space: nowrap; }
@media (min-width: 60em) {
  .topo { padding: 36px 0 48px; }
  .topo-grade { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 48px; }
  .botoes .botao { flex: 0 1 auto; }
}

/* Sections */
.secao { padding: 40px 0; }
.secao-cinza { background: var(--fundo); }
.secao-azul { background: var(--azul); color: #fff; }
.secao h2,
.categorias h2,
.agenda h2 { font-size: clamp(1.875rem, 7vw, 2.75rem); text-transform: uppercase; color: var(--azul); }
.secao-azul h2 { color: #fff; }
.secao .sobretitulo,
.agenda .sobretitulo { color: var(--suave); margin-bottom: 6px; }
.secao-azul .sobretitulo { color: var(--amarelo-claro); }
.sub { margin-top: 10px; color: var(--suave); max-width: 40rem; }
.secao-azul .sub { color: #dfe5f5; }

/* Google reviews */
.avaliacoes { padding: 32px 0; background: var(--fundo); }
.aval-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; }
.avaliacoes h2 { font-size: clamp(1.5rem, 6vw, 2.25rem); text-transform: uppercase; color: var(--azul); }
.aval-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.aval-nota { font-family: var(--display); font-weight: 700; font-size: 2.25rem; line-height: 1; color: var(--azul); }
.avaliacoes .estrelas { --estrela-vazia: rgba(14, 26, 58, .22); font-size: 1.5rem; }
.aval-conta { font-weight: 700; color: var(--suave); }
.aval-lista { list-style: none; padding: 0; margin-top: 16px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.aval { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--linha-suave); border-top: 5px solid var(--amarelo); border-radius: var(--raio); background: #fff; }
.aval blockquote { margin: 0; overflow-wrap: anywhere; }
.aval-autor { margin-top: auto; font-weight: 700; color: var(--azul); }
.aval-fonte { margin-top: 12px; color: var(--suave); font-size: 1rem; }
.avaliacoes .acao { margin-top: 14px; }
.acao-dupla { display: flex; flex-wrap: wrap; gap: 10px; }
.acao-dupla .botao { flex: 1 1 auto; }
@media (min-width: 48em) {
  .acao-dupla .botao { flex: 0 1 auto; }
}
.botao-linha { background: transparent; color: var(--azul); border-color: var(--azul); }
.botao-linha:hover { background: rgba(11, 34, 101, .08); border-color: var(--azul); }
@media (min-width: 48em) {
  .avaliacoes { padding: 40px 0; }
  .aval-lista { gap: 18px; }
  .aval { padding: 20px; }
}

/* The fleet, by category */
.categorias { padding: 32px 0; background: var(--fundo); }
.categorias h2 { font-size: clamp(1.5rem, 6vw, 2.25rem); }
.cat-lista { list-style: none; padding: 0; margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 5.5rem), 1fr)); gap: 8px; }
.cat { position: relative; min-width: 0; background: #fff; border: 1px solid var(--linha-suave); border-radius: var(--raio); overflow: hidden; }
.cat a { display: block; color: inherit; text-decoration: none; }
.cat a::after { content: ''; position: absolute; inset: 0; }
.cat:has(a:focus-visible) { outline: 3px solid var(--azul-2); outline-offset: 2px; }
.cat img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.cat-onibus img { object-position: 46% 50%; }
.cat p { padding: 8px 10px 10px; font-weight: 700; overflow-wrap: anywhere; }
.cat-letra { display: block; font-family: var(--display); font-size: 1.75rem; line-height: 1; color: var(--azul); }
.cat-nota { margin-top: 12px; color: var(--suave); }
@media (min-width: 48em) {
  .cat-lista { gap: 18px; }
  .cat img { aspect-ratio: 4 / 3; }
  .cat p { padding: 12px 16px 14px; font-size: 1.125rem; }
}

/* The booking form */
.agenda { padding: 32px 0; background: #fff; }
.agenda-caixa { margin-top: 18px; display: grid; gap: 18px; }
.agenda-passos { display: grid; gap: 18px; min-width: 0; }
.passo { border: 0; padding: 0; margin: 0; min-width: 0; scroll-margin-top: 1rem; }
.passo legend,
.campo label { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.0625rem; margin-bottom: 8px; padding: 0; }
.passo-n { flex: none; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--azul); color: #fff; font-family: var(--display); font-size: 1rem; line-height: 1; }
.campo span:not(.passo-n) { font-weight: 700; }
.campo span.opcional { font-weight: 400; color: var(--suave); }
.nota { color: var(--suave); font-size: 1rem; margin: -4px 0 10px; }
/* Phones: compact chips (44 px targets, 16 px text); desktop keeps the roomier ones below. */
.chips { display: grid; gap: 6px; }
.chips-servicos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); }
.chips-dias { grid-template-columns: repeat(auto-fill, minmax(min(100%, 5.75rem), 1fr)); }
.chips-horas { grid-template-columns: repeat(auto-fill, minmax(min(100%, 3.25rem), 1fr)); }
.chip { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; padding: 8px 12px; border: 2px solid var(--linha); border-radius: 10px; background: #fff; color: var(--tinta); font-weight: 700; line-height: 1.2; text-align: center; cursor: pointer; }
.chips-dias .chip { padding: 8px 6px; }
.chips-horas .chip { padding: 8px 4px; }
@media (min-width: 48em) {
  .agenda { padding: 40px 0; }
  .agenda-caixa,
  .agenda-passos { gap: 22px; }
  .chips { gap: 8px; }
  .chip { min-height: 52px; padding: 10px 18px; }
  .chips-dias .chip,
  .chips-horas .chip { padding: 10px 12px; }
  .chips-dias { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
  .chips-horas { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .campo input { min-height: 52px; }
}
.chip input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span { overflow-wrap: anywhere; }
.chip:has(input:checked) { background: var(--azul); border-color: var(--azul); color: #fff; }
/* The ✓ of a chosen chip: a badge on the chip's corner, in the gap, so it never covers the label. */
.chip input:checked + span::after { content: '✓'; content: '✓' / ''; position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--amarelo); color: var(--azul); font-size: 1rem; line-height: 1; }
.chip:has(input:focus-visible) { outline: 3px solid var(--azul-2); outline-offset: 2px; }
.chip:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.chip input:disabled { cursor: not-allowed; }
.chip-ajuda { border-style: dashed; }
.campo input { width: 100%; min-height: 48px; padding: 10px 14px; border: 2px solid var(--linha); border-radius: 10px; background: #fff; color: var(--tinta); font: inherit; }
.envio { align-self: start; padding: 16px; border-left: 6px solid var(--amarelo); border-radius: var(--raio); background: var(--fundo); }
.envio-rotulo { font-weight: 700; color: var(--suave); }
.envio-texto { margin-top: 6px; overflow-wrap: anywhere; }
.botao-whats { width: 100%; margin-top: 14px; }
.envio .nota { margin: 10px 0 0; }
html:not(.js) .so-js { display: none; }
@media (min-width: 64em) {
  .chips-servicos { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); }
  .agenda-caixa { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: 40px; }
  .envio { position: sticky; top: 16px; }
}

/* Packages */
.pacotes { list-style: none; padding: 0; margin-top: 20px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.pacote { min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 2px solid var(--linha-suave); border-top: 6px solid var(--amarelo); border-radius: var(--raio); background: #fff; }
.pacote-n { font-family: var(--display); font-size: 1.5rem; line-height: 1; text-transform: uppercase; color: var(--azul); }
.pacote-n strong { font-size: 3rem; margin-right: 2px; }
.aviso { margin-top: 18px; padding: 14px 16px; border: 2px solid var(--linha-suave); border-radius: var(--raio); background: #fff; }
.valores { margin-top: 12px; font-weight: 700; }
.acao { margin-top: 20px; }

/* Services */
/* Eight cards: one column on phones, then two, then four (two even rows, no empty cell). */
.servicos { list-style: none; padding: 0; margin-top: 20px; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40em) {
  .servicos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .servicos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.servicos li { min-width: 0; padding: 14px 16px; border-left: 5px solid var(--azul); border-radius: var(--raio); background: var(--fundo); }
.servicos h3 { font-size: 1.375rem; text-transform: uppercase; color: var(--azul); overflow-wrap: anywhere; }
.servicos p { margin-top: 4px; color: var(--suave); }

/* EAD */
.ead-lista { list-style: none; padding: 0; margin-top: 20px; display: grid; gap: 0 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.ead-lista li { position: relative; min-width: 0; padding: 10px 0 10px 28px; border-bottom: 1px solid rgba(255, 255, 255, .22); overflow-wrap: anywhere; }
.ead-lista li::before { content: '✓'; content: '✓' / ''; position: absolute; left: 0; top: 10px; color: var(--amarelo); font-weight: 700; }

/* How to get there */
.chegar { display: grid; gap: 24px; margin-top: 20px; }
.chegar-video { width: 100%; max-width: 300px; margin: 0 auto; }
.chegar-video video { width: 100%; aspect-ratio: 464 / 832; border-radius: var(--raio); background: var(--azul); }
.chegar-video figcaption { margin-top: 8px; color: var(--suave); font-size: 1rem; text-align: center; }
.chegar-texto { min-width: 0; display: grid; gap: 18px; align-content: start; }
.referencia { font-weight: 700; }
.passos-chegar { padding-left: 1.4em; display: grid; gap: 10px; }
.passos-chegar li::marker { font-family: var(--display); font-weight: 700; color: var(--azul); }
.caixa { padding: 14px 16px; border-radius: var(--raio); background: var(--fundo); }
.rotulo { display: block; margin-bottom: 2px; font-weight: 700; color: var(--azul); }
.chegar-botoes { display: flex; flex-wrap: wrap; gap: 10px; }
.chegar-botoes .botao { flex: 1 1 auto; }
@media (min-width: 56em) {
  .chegar { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 40px; align-items: start; }
  .chegar-video { max-width: none; margin: 0; }
}

/* Closing and footer */
.fechamento { padding: 40px 0; background: var(--azul); color: #fff; text-align: center; }
.fechamento h2 { font-size: clamp(1.875rem, 7vw, 2.75rem); text-transform: uppercase; }
.fechamento .botao { margin-top: 18px; }
.rodape { padding: 28px 0 32px; background: var(--azul-fundo); color: #dfe5f5; font-size: 1rem; }
.rodape-grade { display: grid; gap: 6px; }
.rodape-grade > * { min-width: 0; overflow-wrap: anywhere; }
.rodape strong { color: #fff; }
.rodape a { display: inline-block; padding: 10px 0; color: #fff; }
.rodape-credito { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .22); }
.rodape-credito a { margin: -10px 0; }