/* ============================================================================
   Let's Go! English Course — camada base (Tailwind compilado)
   ----------------------------------------------------------------------------
   Este arquivo é a saída do Tailwind: reset + tokens da marca + as classes
   utilitárias que o index.html realmente usa. Nada aqui é decorativo — o visual
   da página mora em style.css.

   Para regenerar com o compilador oficial:  npm run build:css
   (a fonte fica em src/input.css)
   ========================================================================= */


/* ─────────────────────────────────────────────────────────── 1. FONTES
   Subconjunto latino, hospedado aqui mesmo: zero requisição a terceiros e
   nada de bloqueio de renderização vindo do Google Fonts.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-ExtraBold.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}


/* ──────────────────────────────────────────────────── 2. TOKENS DA MARCA
   Exatamente os valores do manual de identidade. Não invente cor: use estas.
   ------------------------------------------------------------------------ */
:root {
  /* paleta principal (editorial) */
  --off-white:      #F8F7F4;   /* fundo                        */
  --azul-marinho:   #1D3557;   /* títulos                      */
  --azul-medio:     #3A5F8A;   /* subtítulos / ícones / links  */
  --azul-petroleo:  #234E70;   /* gráficos / elementos         */
  --vermelho-escuro:#8B1E2D;   /* destaques / chamadas         */
  --bordeaux:       #6E1C2A;   /* botões / ênfase (hover)      */
  --vermelho-claro: #B83B4D;   /* caixas / ícones / elementos  */

  /* paleta secundária */
  --azul-aco:       #5B7EA4;
  --branco:         #FFFFFF;

  /* neutros */
  --cinza-escuro:   #3D3D3D;   /* texto principal   */
  --cinza-medio:    #707070;   /* texto secundário  */
  --cinza-claro:    #D9D9D9;   /* linhas / boxes    */

  /* tipografia */
  --fonte-titulo: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --fonte-texto:  "Inter", ui-sans-serif, system-ui, sans-serif;

  /* ritmo e forma */
  --raio:      14px;
  --raio-lg:   22px;
  --sombra:    0 1px 2px rgba(29, 53, 87, .04), 0 8px 24px -12px rgba(29, 53, 87, .16);
  --sombra-lg: 0 2px 4px rgba(29, 53, 87, .05), 0 24px 48px -20px rgba(29, 53, 87, .28);
  --transicao: 220ms cubic-bezier(.22, .61, .36, 1);
  --largura:   1180px;
}


/* ────────────────────────────────────────────────────────── 3. PREFLIGHT
   Reset enxuto — o mesmo que o Tailwind aplica, só com o que a página usa.
   ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; border: 0 solid var(--cinza-claro); }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  tab-size: 4;
}

body { line-height: 1.6; -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; text-wrap: balance; }

p, li { text-wrap: pretty; }

ul, ol { list-style: none; padding: 0; }

a { color: inherit; text-decoration: none; }

img, svg, picture, video { display: block; max-width: 100%; }
img, video { height: auto; }

button, input, select, textarea {
  font: inherit; color: inherit; background: transparent;
}
button { cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--azul-medio);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--vermelho-claro); color: #fff; }

/* quem pediu menos movimento no sistema não recebe animação nenhuma */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ──────────────────────────────────────────────────────── 4. UTILITÁRIOS
   Só as classes presentes no HTML. Mesmos nomes do Tailwind — se um dia você
   rodar o compilador oficial, a saída é equivalente.
   ------------------------------------------------------------------------ */

/* layout */
.block          { display: block; }
.hidden         { display: none; }
.flex           { display: flex; }
.grid           { display: grid; }
.flex-col       { flex-direction: column; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.justify-between{ justify-content: space-between; }
.justify-center { justify-content: center; }
.w-full         { width: 100%; }

/* espaçamento */
.gap-4  { gap: 1rem; }
.gap-6  { gap: 1.5rem; }
.gap-14 { gap: 3.5rem; }
.py-5   { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.mt-4   { margin-top: 1rem; }
.mt-5   { margin-top: 1.25rem; }
.mt-8   { margin-top: 2rem; }
.mt-10  { margin-top: 2.5rem; }

/* tipografia e cor */
.font-body      { font-family: var(--fonte-texto); }
.text-gray-dark { color: var(--cinza-escuro); }
.text-red-light { color: var(--vermelho-claro); }
.bg-off-white   { background-color: var(--off-white); }
.antialiased    { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* contêiner central */
.container {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* ≥ 640px — tablet em pé */
@media (min-width: 640px) {
  .sm\:inline-flex  { display: inline-flex; }
  .sm\:flex-row     { flex-direction: row; }
  .sm\:items-center { align-items: center; }
  .sm\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .container        { padding-inline: 2rem; }
}

/* ≥ 1024px — desktop */
@media (min-width: 1024px) {
  .lg\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lg\:col-span-5   { grid-column: span 5 / span 5; }
  .lg\:col-span-7   { grid-column: span 7 / span 7; }
  .lg\:items-center { align-items: center; }
  .lg\:items-start  { align-items: start; }
  .lg\:gap-20       { gap: 5rem; }
  .container        { padding-inline: 2.5rem; }
}