/* Faculdade Catuaí — institucional editorial.
   Vinho é massa, laranja é ação, e o ângulo é medido do swoosh da marca. */

:root {
  --vinho: #B81828;
  --vinho-fundo: #7A0F1B;
  --laranja: #F88000;
  --laranja-claro: #FFA733;
  --tinta: #14100F;
  --papel: #FAF7F4;

  --angulo: 22.02deg;        /* <angle> — para rotate e skew */
  --angulo-num: 22.02; /* unitless — para matemática de % */
  --medida: 64ch;
  --gutter: clamp(1.25rem, 5vw, 5rem);

  color-scheme: light;
}

@font-face {
  font-family: "Archivo";
  src: url("/assets/archivo-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fraunces-display.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Display";
  src: url("/assets/archivo-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 clamp(1.0625rem, 0.4vw + 1rem, 1.125rem)/1.65 "Archivo",
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, dt {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

p { margin: 0 0 1rem; max-width: min(var(--medida), 100%); }
img { max-width: 100%; height: auto; }
address, dd, dt, li { overflow-wrap: break-word; }

.pular {
  position: absolute; left: -9999px;
  background: var(--tinta); color: #fff; padding: .75rem 1rem; z-index: 100;
}
.pular:focus { left: 1rem; top: 1rem; }

/* ---------- ação ---------- */

.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .75rem 1.5rem;
  font-family: "Archivo Display", Arial, sans-serif;
  font-size: 1rem; font-weight: 900; text-transform: uppercase;
  letter-spacing: .01em; text-decoration: none; text-align: center;
  white-space: normal; overflow-wrap: break-word; max-width: 100%;
  border: 2px solid transparent; cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
}

/* Laranja é ação. O texto é --tinta: branco sobre laranja é 2,60:1 e reprova. */
.botao--zap {
  background: var(--laranja);
  color: var(--tinta);
  box-shadow: 5px 5px 0 var(--tinta);
}
.botao--zap:hover, .botao--zap:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--tinta);
}

.botao--grande { font-size: 1.0625rem; padding: 1rem 2rem; background: var(--laranja); color: var(--tinta); box-shadow: 5px 5px 0 var(--tinta); }
.botao--grande:hover, .botao--grande:focus-visible { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--tinta); }

.botao--vazado {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.5);
}
.botao--vazado:hover, .botao--vazado:focus-visible { border-color: #fff; }

:focus-visible {
  outline: 3px solid var(--laranja);
  outline-offset: 3px;
}

/* ---------- aviso (barra do topo) ----------
   Compacta de propósito: chama para o WhatsApp sem virar muro.
   Texto --tinta sobre --laranja: 7,27:1. */

.aviso {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: .75rem 1.75rem;
  padding: clamp(1.1rem, 2.2vw, 1.6rem) var(--gutter);
  background: var(--laranja);
  color: var(--tinta);
  border-bottom: 4px solid var(--tinta);
}
.aviso__texto {
  margin: 0; max-width: 100%; overflow-wrap: break-word;
  font-family: "Archivo Display", Arial, sans-serif; text-transform: uppercase;
  font-size: clamp(1rem, .8vw + .85rem, 1.25rem);
  font-weight: 900; letter-spacing: -0.012em; text-align: center;
}
.aviso__acao {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .45rem 1.1rem;
  background: var(--tinta); color: var(--laranja);
  font-weight: 500; font-size: .9375rem; text-decoration: none;
  border: 2px solid var(--tinta);
  transition: transform .16s ease;
}
.aviso__acao:hover, .aviso__acao:focus-visible { transform: translateY(-2px); }

/* ---------- nota ----------
   Comunicado formal, com cara de papel timbrado: fundo claro sobre o
   vinho, régua grossa à esquerda e selo em caixa alta. Fica logo depois
   do hero para ser lida sem empilhar avisos no topo. */

.nota-secao {
  background: var(--vinho);
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
}
/* nota e hero são ambos vinho: sem isto os dois respiros se somam e
   abrem um vazio no meio da mesma superfície. */
.nota-secao + .hero {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}
.nota {
  max-width: 62rem; margin-inline: auto;
  background: var(--papel);
  border-left: 10px solid var(--laranja);
  box-shadow: 10px 10px 0 rgba(20, 16, 15, .35);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.nota__selo {
  margin: 0 0 .9rem; max-width: none;
  font-family: "Archivo Display", Arial, sans-serif;
  font-size: .75rem; font-weight: 900;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--vinho);
}
.nota__selo::after {
  content: ""; display: block; width: 48px; height: 3px;
  background: var(--laranja); margin-top: .6rem;
  transform: skewX(calc(var(--angulo) * -1));
}
.nota__texto {
  margin: 0 0 .9rem; max-width: 58ch;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.125rem, 1.9vw, 1.5rem);
  font-weight: 600; line-height: 1.28; letter-spacing: -0.012em;
}
.nota__destaque {
  margin: 0 0 1.5rem; max-width: 58ch;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  font-weight: 500; line-height: 1.5;
}
.nota .botao { align-self: flex-start; }

/* ---------- topo ---------- */

.topo {
  position: sticky; top: 0; z-index: 50;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .75rem 1rem;
  padding: .9rem var(--gutter);
  background: var(--vinho-fundo);
  transition: padding .2s ease, box-shadow .2s ease;
}
.topo[data-condensado] {
  padding-block: .5rem;
  box-shadow: 0 2px 0 var(--laranja);
}
.topo__marca img { display: block; width: auto; height: clamp(30px, 3.2vw, 46px); }
.topo__acoes { display: flex; align-items: center; gap: 1rem; }
.tel {
  color: #fff; text-decoration: none; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.tel:hover { text-decoration: underline; }

/* ---------- hero ----------
   Assimétrico: texto à esquerda em 7 de 12 colunas, swoosh ocupando o resto.
   A 80vh o arco inteiro cabe no quadro e a marca se lê como marca — medido:
   a 140vh só um fragmento entrava e virava mancha. */

.hero {
  position: relative; overflow: hidden;
  background: var(--vinho);
  color: #fff;
  padding: clamp(3.5rem, 9vw, 8rem) var(--gutter) clamp(4rem, 10vw, 9rem);
}
/* Grão: o vinho chapado fica plano. */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero > * { position: relative; z-index: 1; max-width: min(58ch, 100%); }

.hero__swoosh {
  position: absolute; z-index: 0;
  right: -6vw; top: 50%;
  height: 80vh; width: auto; max-width: none;
  transform: translateY(-50%) rotate(calc(var(--angulo) * -0.25));
  opacity: .10;
  pointer-events: none;
}

.olho {
  font-family: "Archivo Display", Arial, sans-serif;
  text-transform: uppercase;
  font-size: .8125rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--laranja-claro);
  margin: 0 0 1.25rem;
}
.olho::after {
  content: ""; display: block; width: 84px; height: 3px;
  background: var(--laranja); margin-top: .85rem;
  transform: skewX(calc(var(--angulo) * -1));
}

.hero h1 { font-size: clamp(1.75rem, 5.6vw, 3.9rem); }
.hero__linha {
  font-size: clamp(1.0625rem, 1.4vw, 1.3125rem);
  margin: 1.5rem 0 2.25rem;
  color: rgba(255,255,255,.94);
}
.hero__acoes { display: flex; flex-wrap: wrap; gap: 1rem; max-width: none; }

@media (prefers-reduced-motion: no-preference) {
  .hero .olho, .hero h1, .hero__linha, .hero__acoes {
    animation: sobe .7s cubic-bezier(.2,.7,.3,1) backwards;
  }
  .hero .olho      { animation-delay: .05s; }
  .hero h1         { animation-delay: .14s; }
  .hero__linha     { animation-delay: .24s; }
  .hero__acoes     { animation-delay: .34s; }
  @keyframes sobe {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---------- seções e a diagonal da marca ---------- */

section { padding: clamp(3.5rem, 8vw, 6.5rem) var(--gutter); }
section h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  margin-bottom: 2.5rem;
}
section h2::after {
  content: ""; display: block; width: 64px; height: 4px;
  background: var(--laranja); margin-top: 1rem;
  transform: skewX(calc(var(--angulo) * -1));
}

/* ---------- cursos ---------- */

.cursos { background: var(--papel); }
.grade {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.carta {
  display: flex; flex-direction: column; gap: .6rem;
  background: #fff;
  border: 2px solid var(--tinta);
  box-shadow: 6px 6px 0 var(--laranja);
  padding: 1.75rem 1.5rem;
  transition: transform .16s ease, box-shadow .16s ease;
}
.carta:hover, .carta:focus-within {
  transform: translate(-3px, -3px);
  box-shadow: 10px 10px 0 var(--laranja);
}
.carta__grau {
  font-size: .75rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--vinho); font-weight: 500; margin: 0;
}
.carta__nome { font-size: 1.4375rem; }
.carta__resumo { font-size: .9375rem; line-height: 1.55; flex: 1; margin: 0; }
.carta .botao { align-self: flex-start; font-size: .8125rem; padding: .7rem 1.1rem; }
.cursos__pos { margin-top: 2.5rem; font-size: .9375rem; }

/* ---------- por que ----------
   A diagonal do swoosh vira a transição de seção. --angulo-num é unitless
   porque <angle> vezes % não tem tipo em CSS: o navegador descartaria a
   declaração inteira, em silêncio. */

.porque {
  background: var(--vinho-fundo); color: #fff;
  clip-path: polygon(0 calc(var(--angulo-num) * 0.35 * 1%), 100% 0, 100% 100%, 0 100%);
  margin-top: -2px;
}
.porque h2 { color: #fff; }
.numeros {
  display: grid; gap: 2.5rem; margin: 0 0 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.numeros dt {
  font-size: clamp(1.75rem, 3.8vw, 2.75rem);
  color: var(--laranja-claro);
  font-variant-numeric: tabular-nums;
}
.numeros dd { margin: .5rem 0 0; font-size: .9375rem; color: rgba(255,255,255,.9); }

/* ---------- perguntas frequentes ----------
   Texto de verdade na página: o Google mostra estas perguntas direto no
   resultado, e elas respondem quem procura diploma e histórico. */

.faq { background: var(--papel); }
.perguntas { margin: 0 0 2.5rem; display: grid; gap: 0; }
.pergunta {
  border-top: 2px solid var(--tinta);
  padding: 1.5rem 0;
}
.pergunta:last-child { border-bottom: 2px solid var(--tinta); }
.pergunta dt {
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  margin-bottom: .6rem;
}
.pergunta dd {
  margin: 0; max-width: var(--medida);
  font-size: 1rem; line-height: 1.65;
}

.porque__texto {
  max-width: var(--medida);
  color: rgba(255,255,255,.9);
  margin-bottom: 2rem;
}

/* ---------- onde ---------- */

.onde address { font-style: normal; font-size: 1.125rem; margin-bottom: .5rem; }
.onde__mapa {
  display: inline-block; margin: 1.5rem 1rem 1.5rem 0;
  color: var(--vinho); font-weight: 500;
}

/* ---------- rodapé ---------- */

.rodape {
  background: var(--vinho-fundo); color: #fff;
  padding: clamp(3rem, 6vw, 4.5rem) var(--gutter);
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.rodape img { width: auto; height: 44px; }
.rodape a { color: #fff; }
.rodape address { font-style: normal; font-size: .9375rem; margin-top: .5rem; }
.rodape__legal {
  grid-column: 1 / -1; font-size: .8125rem; color: rgba(255,255,255,.72);
  border-top: 1px solid rgba(255,255,255,.22); padding-top: 1.5rem; max-width: none;
}

/* ---------- flutuante ---------- */

.flutuante {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60;
  display: grid; place-items: center;
  width: 56px; height: 56px;
  background: var(--laranja); color: var(--tinta);
  border: 2px solid var(--tinta);
  box-shadow: 4px 4px 0 var(--tinta);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.flutuante:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--tinta); }
.flutuante[data-oculto] { opacity: 0; visibility: hidden; transform: translateY(8px); }

/* ---------- celular ---------- */

@media (max-width: 560px) {
  .aviso { padding-inline: 1.1rem; text-align: center; }
  .topo { padding-inline: 1.1rem; }
  .topo .tel { display: none; }          /* o telefone continua no rodapé */
  .hero__swoosh { right: -30vw; height: 60vh; opacity: .08; }
  .hero__acoes .botao { width: 100%; }
  .porque { clip-path: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}