@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/figtree-variavel.woff2") format("woff2");
}

/* medidas em cqw = px da arte (836 de largura) / 8,36 */
:root {
  --azul: #0040f6;
  --azul-2: #1e40e8;
  --azul-escuro: #0a39b0;
  --azul-claro: #e2eafd;
  --lima: #d8f507;
  --marinho: #0a1440;
  --texto: #10183a;
  --texto-2: #4b5170;
  --fundo: #f2f5f9;
  --fonte: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--azul);
  color: var(--texto);
  font-family: var(--fonte);
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

.pagina {
  container-type: inline-size;
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--fundo);
  box-shadow: 0 0 60px rgba(0, 0, 0, .3);
}

/* topo */
.topo {
  position: relative;
  aspect-ratio: 836 / 578;
  overflow: hidden;
  background: var(--azul) url("../img/colegio-haya-linktree-topo.webp") right top / cover no-repeat;
  color: #fff;
}

.topo__texto {
  position: relative;
  height: 100%;
  padding: 5cqw 0 0 6.2cqw;
}

.topo__logo {
  width: 25cqw;
  height: auto;
  margin: 0 0 0 1.2cqw;
}

.topo__titulo {
  margin: 10cqw 0 0;
  font-size: 8.1cqw;
  font-weight: 900;
  line-height: .96;
  letter-spacing: -.03em;
}

.topo__titulo span {
  display: block;
  color: var(--lima);
}

.topo__sub {
  margin: 3.6cqw 0 0;
  font-size: 3.45cqw;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.topo__selo {
  display: inline-flex;
  align-items: center;
  gap: 1cqw;
  margin: 3.6cqw 0 0;
  padding: 1.1cqw 2.6cqw 1.1cqw 1.9cqw;
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 99px;
  font-size: 1.75cqw;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.topo__selo svg {
  width: 2.6cqw;
  height: 2.6cqw;
  fill: var(--lima);
}

.topo__selo i {
  font-style: normal;
  color: var(--lima);
}

/* links */
.links {
  flex: 1;
  padding: 4.2cqw 7.4cqw 4.4cqw;
  background: linear-gradient(180deg, #f6f8fb 0%, var(--fundo) 100%);
}

.links__titulo {
  margin: 0 0 0 4.6cqw;
  font-size: 8.9cqw;
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.03em;
  color: var(--marinho);
}

.links__linha {
  display: block;
}

.links__linha--azul {
  color: var(--azul-2);
}

.links__risco {
  display: inline-block;
  width: .62em;
  height: .46em;
  margin: 0 0 .44em .02em;
  vertical-align: bottom;
  fill: none;
  stroke: var(--lima);
  stroke-width: 5;
  stroke-linecap: round;
}

.links__sub {
  margin: 1.8cqw 0 3.2cqw 4.6cqw;
  font-size: 3cqw;
  font-weight: 500;
  line-height: 1.3;
  color: var(--texto);
}

.links__lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.3cqw;
  margin: 0;
  padding: 0;
  list-style: none;
}

.link {
  display: flex;
  align-items: center;
  gap: 5.4cqw;
  min-height: 12cqw;
  padding: 1.5cqw 5.4cqw 1.5cqw 4.2cqw;
  border-radius: 2.2cqw;
  background: #fff;
  text-decoration: none;
  box-shadow: 0 1.4cqw 3.6cqw -1.8cqw rgba(20, 40, 110, .18);
  transition: transform .2s, box-shadow .2s;
}

.link:hover,
.link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 2.6cqw 5cqw -2.4cqw rgba(20, 40, 110, .32);
}

.link:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
}

.link__ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 9cqw;
  height: 9cqw;
  border-radius: 1.8cqw;
  background: var(--azul-claro);
  color: var(--azul-2);
}

.link__ico svg {
  width: 5.4cqw;
  height: 5.4cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.link__ico .grande {
  width: 6.4cqw;
  height: 6.4cqw;
}

.link__ico .cheio,
.link__ico .ponto {
  fill: currentColor;
  stroke: none;
}

.link__txt {
  flex: 1;
  min-width: 0;
}

.link__txt strong {
  display: block;
  font-size: 3.7cqw;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--marinho);
}

.link__txt span {
  display: block;
  margin-top: .4cqw;
  font-size: 2.8cqw;
  font-weight: 500;
  line-height: 1.3;
  color: var(--texto-2);
}

.link__seta {
  flex: 0 0 auto;
  width: 4cqw;
  height: 4cqw;
  fill: none;
  stroke: var(--azul-2);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* destaque lima (agendar visita) */
.link--destaque {
  background: var(--lima);
  box-shadow: 0 2cqw 4.4cqw -2.4cqw rgba(150, 175, 0, .75);
}

.link--destaque .link__ico {
  background: var(--azul-escuro);
  color: var(--lima);
}

.link--destaque .link__txt span {
  color: var(--marinho);
}

.link--destaque .link__seta {
  stroke: var(--azul-escuro);
}

/* rodapé */
.rodape {
  padding: 3.6cqw 4cqw 4.8cqw;
  background: var(--azul) url("../img/colegio-haya-linktree-rodape.webp") center / cover no-repeat;
  color: #fff;
  text-align: center;
}

.rodape__frase {
  margin: 0;
  font-size: 4.9cqw;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.025em;
}

.rodape__frase span {
  display: block;
  color: var(--lima);
}

.rodape__traco {
  display: block;
  width: 10.2cqw;
  height: 1.3cqw;
  margin: .9cqw auto 0;
  fill: none;
  stroke: var(--lima);
  stroke-width: 5;
  stroke-linecap: round;
}

.rodape__site {
  display: inline-block;
  margin-top: 2.6cqw;
  font-size: 2.4cqw;
  font-weight: 700;
  letter-spacing: .3em;
  text-decoration: none;
}

.rodape__site:hover,
.rodape__site:focus-visible {
  color: var(--lima);
}

/* entrada */
@media (prefers-reduced-motion: no-preference) {
  .topo__texto > *,
  .links__titulo,
  .links__sub,
  .links__lista li {
    animation: subir .6s cubic-bezier(.2, .8, .2, 1) both;
  }

  .topo__titulo { animation-delay: .08s; }
  .topo__sub { animation-delay: .16s; }
  .topo__selo { animation-delay: .24s; }
  .links__titulo { animation-delay: .2s; }
  .links__sub { animation-delay: .24s; }
  .links__lista li:nth-child(1) { animation-delay: .28s; }
  .links__lista li:nth-child(2) { animation-delay: .33s; }
  .links__lista li:nth-child(3) { animation-delay: .38s; }
  .links__lista li:nth-child(4) { animation-delay: .43s; }
  .links__lista li:nth-child(5) { animation-delay: .48s; }
  .links__lista li:nth-child(6) { animation-delay: .53s; }
  .links__lista li:nth-child(7) { animation-delay: .58s; }
}

@keyframes subir {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

.gtm-noscript {
  display: none;
  visibility: hidden;
}