:root{
  --bg: #ffffff;
  --card: #eef1f4;            /* cinza claro dos botões */
  --card-hover: #e6eaee;
  --text-dark: #001B4D;       /* cor do texto dos links/botões */
  --muted: #5d636e;
  --radius: 14px;
  --shadow: 0 2px 2px rgba(0,0,0,.02), 0 8px 24px rgba(0,0,0,.06);

  /* Comprimentos e steps (ajuste se mudar os textos) */
  --w1: 28ch;  /* "MUITO MAIS QUE UM DIPLOMA" ~ 28 */
  --w2: 15ch;  /* "#VEMPRAUNISEP" ~ 15 */
  --wmax: 28ch;/* usar o maior valor acima */
  --s1: 28;
  --s2: 15;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: var(--bg);
  color: var(--text-dark);
  font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page{
  min-height:100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 28px 18px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  margin-top:6px;
  margin-bottom:8px;
}

.logo {
  width: 250px;
  height: auto;
  object-fit: contain;
  margin-bottom: 15px;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* === HEADLINE: digitar, pausar 2s, apagar, alternar (loop) === */
.headline{
  position: relative;
  display: block;
  width: var(--wmax);                    /* garante largura visível */
  margin: 4px auto 10px;                 /* centraliza o bloco */
  font-size: 16px;
  letter-spacing:.5px;
  text-align:center;
  white-space: nowrap;
  overflow: hidden;
  min-height: 1.4em;                     /* reserva altura p/ evitar “pulo” */
}

/* linhas a serem digitadas; empilhadas e centralizadas */
.typer{
  position:absolute;
  top:0;
  left:50%;
  transform: translateX(-50%);
  display:inline-block;                  /* permite animar width */
  width:0ch;                              /* começa “sem letras” */
  overflow:hidden;
  opacity:0;
  will-change: width, opacity;
}

/* frase 1: MUITO MAIS QUE UM DIPLOMA */
.text1{
  color: #fe0034;
  opacity:1;
  /* Duração total 12s: digita (3.6s), pausa (2s), apaga (~0.4s) -> troca */
  animation: typing1 12s steps(var(--s1), end) infinite;
}

/* frase 2: #VEMPRAUNISEP */
.text2{
  color: #fe0034;
  /* Começa após 50% do ciclo (após apagar a 1ª), digita (3.6s), pausa (2s), apaga (~0.4s) */
  animation: typing2 12s steps(var(--s2), end) infinite;
}

/* Ciclo total = 12s
   typing1:
     0%–30%:  digita até completo (3.6s)
     30%–46.666%: PAUSA 2s (exibe texto completo parado)
     46.666%–50%: apaga (~0.4s)
   typing2:
     50%–80%: digita até completo (3.6s)
     80%–96.666%: PAUSA 2s
     96.666%–100%: apaga (~0.4s) */
@keyframes typing1{
  0%      { width:0ch;              opacity:1; }
  30%     { width:var(--w1);        opacity:1; }  /* fim digitação */
  46.666% { width:var(--w1);        opacity:1; }  /* pausa 2s */
  50%     { width:0ch;              opacity:0; }  /* apaga */
  100%    { width:0ch;              opacity:0; }
}
@keyframes typing2{
  0%      { width:0ch;              opacity:0; }
  49%     { width:0ch;              opacity:0; }  /* espera 1ª apagar */
  50%     { width:0ch;              opacity:1; }  /* começa */
  80%     { width:var(--w2);        opacity:1; }  /* fim digitação */
  96.666% { width:var(--w2);        opacity:1; }  /* pausa 2s */
  100%    { width:0ch;              opacity:0; }  /* apaga */
}

/* === Lista de links === */
.links{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:25px;
}

/* Botão de link */
.link-item{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;       /* texto centralizado */
  gap:12px;
  width:100%;
  min-height:62px;
  padding: 18px;                /* sem kebab */
  text-decoration:none;
  color: var(--text-dark);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .06s ease, background-color .2s ease, box-shadow .2s ease, color .2s ease;
  font-weight: 700;
  letter-spacing:.4px;
  text-transform: uppercase;
  outline: none;
}

.link-item:hover{
  background: var(--card-hover);
  transform: translateY(-1px);
  color: #fe0034;               /* texto no hover */
}

.link-item:focus-visible{
  box-shadow: 0 0 0 3px rgba(0,27,77,.15), var(--shadow);
}

.link-item:active{ transform: translateY(0); }

.link-item .label{ text-align:center; }

/* === Redes sociais no rodapé === */
.social{
  display:flex;
  align-items:center;
  gap:22px;
  margin-top:auto;
}

.social-item{
  color: #fe0034;               /* cor padrão dos ícones */
  opacity:.9;
  display:inline-flex;
  transition: opacity .2s ease, transform .06s ease, color .2s ease;
}

.social-item:hover{
  opacity:1;
  transform: translateY(-1px);
  color: #001B4D;               /* cor no hover */
}

.copyright{
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  text-align:center;
  width:100%;
}

/* === Responsivo pequeno === */
@media (max-width: 380px){
  .headline{ font-size:18px }
  .link-item{ min-height:58px; }
}

/* === Acessibilidade === */
@media (prefers-reduced-motion: reduce){
  .typer{ animation: none; opacity: 1; width: auto; position: static; transform: none; }
  .text2{ display: none; }                     /* mostra só a primeira frase sem animação */
  .link-item, .social-item{ transition:none; }
}