:root {
--aia-cyan: #00b8d4;
--aia-cyan-dark: #0891b2;
--aia-blue: #0f4c75;
--aia-blue-dark: #073b5f;
--aia-green: #05c46b;
/* Gradiente da marca: vai no botao do banner (.ad-cta) e nas abas do
menu (.nav a), que passaram a usar a mesma tarja. */
--aia-grad-start: #2deacb;
--aia-grad-end: #005e94;
--aia-gradient: linear-gradient(135deg, var(--aia-grad-start), var(--aia-grad-end));
/* Barra de 44px, como a da Apple (simbolo de 20px + 12px em cima e em
baixo). O hero e as secoes descontam --header-h da altura da tela,
entao acompanham este valor sozinhos. */
--header-logo-h: 31px; /* 1.3x o simbolo de 24px */
--header-pad-y: 12.5px; /* 56px (eram 44px): cabem Login e Cadastre-se no tamanho cheio (38px) */
/* tipografia da Home: serifada de exibicao + sans geometrica */
--font-display: "Fraunces", Georgia, "Times New Roman", serif;
--font-text: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
--ink: #0b2a3f;
--ink-teal: #0f5e72;
--grad-cta: linear-gradient(90deg, #0b4f6c 0%, #138a8a 55%, #2ddbb0 100%);
--header-h: calc(var(--header-logo-h) + var(--header-pad-y) * 2);
--white: #ffffff;
--text: #0f172a;
--muted: #64748b;
--soft: #f8fafc;
--bg: #f5fbfd;
--border: rgba(15, 23, 42, 0.08);
--shadow-soft: 0 18px 50px rgba(15, 23, 42, 0.08);
--shadow-medium: 0 24px 70px rgba(15, 23, 42, 0.12);
--shadow-strong: 0 34px 100px rgba(15, 23, 42, 0.18);
--shadow-cyan: 0 18px 44px rgba(0, 184, 212, 0.26);
--radius-xl: 40px;
--radius-lg: 32px;
--radius-md: 22px;
--radius-sm: 14px;
/* MOVIMENTO
Mola criticamente amortecida (damping 1.0, response 0.4s, como a
Apple usa): sai rapido e assenta sem quicar. --ease-bounce (damping
0.8) e so para o que o usuario "solta" -- nunca para algo que apenas
aparece. Os valores do linear() sao a curva da mola amostrada; o
cubic-bezier e o fallback para navegador sem linear(). */
--ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
--ease-bounce: cubic-bezier(0.34, 1.3, 0.64, 1);
--dur-spring: 600ms;
--dur-press: 90ms;
/* So propriedades baratas (transform/opacity/cor/sombra). O antigo
`all 0.3s ease` animava tambem largura, padding e layout. */
--transition:
transform var(--dur-spring) var(--ease-spring),
box-shadow var(--dur-spring) var(--ease-spring),
opacity 240ms ease,
background-color 200ms ease,
border-color 200ms ease,
color 200ms ease;
}
@supports (transition-timing-function: linear(0, 1)) {
:root {
--ease-spring: linear(0, 0.06, 0.186, 0.329, 0.466, 0.584, 0.682, 0.76, 0.821, 0.868, 0.903, 0.929, 0.949, 0.963, 0.973, 0.981, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 1);
--ease-bounce: linear(0, 0.049, 0.163, 0.304, 0.448, 0.581, 0.695, 0.788, 0.861, 0.916, 0.955, 0.982, 0.999, 1.008, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1.001, 1);
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* rolagem suave so para quem nao pediu menos movimento */
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
/* O header e sticky. Sem isto, clicar num item do menu leva o topo da secao
para y=0 -- ou seja, para TRAS do header: a altura inteira dele fica por
cima do inicio da secao e sobra aparecendo o fim da secao anterior.
O valor sai de --header-h em vez de ser fixo: era 104px cravado para o
header de 88px e, quando o header cresceu, a parada nao acompanhou --
toda secao passou a ficar 77px atras dele (o topo do banner e o titulo
"Primeira Unidade" sumiam pelo mesmo motivo). Assim nao desencontra mais. */
#feed,
#cursos,
#unidades,
#resultados {
scroll-margin-top: calc(var(--header-h) + 16px);
}
/* O hero ja comeca por baixo do header: "Home" leva ao topo da pagina. */
#home {
scroll-margin-top: 0;
}
/* FONTES (servidas de /images/fonts: o modo landing do nginx so libera
/images/ alem dos 3 arquivos da pagina; e fonte propria evita mandar o IP
de cada visitante ao Google). Fraunces tem eixo de tamanho optico: o
titulo grande ganha contraste fino, o texto pequeno fica mais robusto.
So o subconjunto latino -- cobre todos os acentos do portugues. */
@font-face {
font-family: "Fraunces";
font-style: normal;
font-weight: 500 800;
font-display: swap;
src: url("../images/fonts/fraunces-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("../images/fonts/manrope-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body {
min-height: 100vh;
font-family: var(--font-text);
font-optical-sizing: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
line-height: 1.5;
color: var(--text);
background:
radial-gradient(circle at 8% 8%, rgba(0, 184, 212, 0.14), transparent 30%),
linear-gradient(180deg, #ffffff 0%, #f5fbfd 52%, #eef8fb 100%);
overflow-x: hidden;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
display: block;
}
/* O `display: block` acima e regra de autor e vence o `[hidden] { display: none }`
do navegador -- sem isto, qualquer ![]()
continua aparecendo (como icone
de imagem quebrada, quando ainda nao tem src). */
img[hidden] {
display: none;
}
button,
a,
input,
select,
textarea,
.card,
.unit-card,
.contact-card,
.commercial-card {
transition: var(--transition);
}
/* Toque: sem o flash cinza do WebKit e sem a espera de ~300ms do
duplo-toque -- a resposta ao dedo tem que ser imediata. */
a,
button,
.unit-photo {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
/* HEADER
Copia da barra global da Apple: faixa fina de 44px, todos os itens numa
linha central de 1024px com espaco igual entre eles (simbolo da marca na
ponta esquerda, como a maca), texto de 12px. Em vez do branco translucido
da Apple, a faixa e o azul-petroleo do "Plataforma" (--ink), translucida
com desfoque -- o conteudo passa por baixo -- e todo o texto em branco. */
.header {
position: sticky;
top: 0;
z-index: 1000;
width: 100%;
height: var(--header-h);
background: rgba(11, 42, 63, 0.92);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
}
.logo {
display: flex;
align-items: center;
height: 100%;
}
.logo img {
height: var(--header-logo-h);
width: auto;
object-fit: contain;
}
/* MENU
Como na Apple: links de texto, branco a 80%, branco cheio no hover e na
secao que esta na tela (aria-current, posto pelo JS). */
.nav {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1024px;
height: 100%;
margin: 0 auto;
padding: 0 22px;
}
.nav a {
display: flex;
align-items: center;
height: 100%;
padding: 0 8px;
color: rgba(255, 255, 255, 0.8);
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
font-size: 13px;
font-weight: 400;
letter-spacing: -0.01em;
white-space: nowrap;
transition: color 320ms cubic-bezier(0.4, 0, 0.6, 1);
}
.nav a[aria-current] {
color: #fff;
}
/* Hover so com mouse de verdade: no toque o :hover "gruda" depois do tap.
O "afundar" do clique esta no bloco RESPOSTA AO TOQUE, no fim do arquivo. */
@media (hover: hover) and (pointer: fine) {
.nav a:hover {
color: #fff;
}
}
.auth {
display: flex;
align-items: center;
gap: 12px;
}
.auth a {
min-height: 44px;
padding: 0 20px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.88rem;
font-weight: 650;
}
.login {
color: var(--aia-cyan-dark);
border: 1px solid rgba(0, 184, 212, 0.42);
background: rgba(255, 255, 255, 0.76);
}
.signup {
color: #fff;
background: linear-gradient(135deg, var(--aia-cyan), var(--aia-cyan-dark));
box-shadow: var(--shadow-cyan);
}
.login:hover,
.signup:hover {
transform: translateY(-4px);
}
/* HERO */
/* O hero E o banner que alterna -- nao ha mais cartao externo em volta dele.
A altura vem da tela: descontamos o header (sticky, logo acima) e as
margens, e a largura sai dessa altura pela proporcao 2:1 das imagens de
propaganda (1774x887). Assim o banner aparece inteiro em qualquer monitor,
sem cortar nem sobrar tarja branca -- inclusive em telas baixas, onde ele
simplesmente encolhe mantendo a proporcao. */
.hero {
--hero-gap: clamp(14px, 2.6vh, 34px);
--hero-max-h: calc(100vh - var(--header-h) - var(--hero-gap) * 2);
width: min(1380px, calc(100% - 48px), calc(var(--hero-max-h) * 2));
aspect-ratio: 2 / 1;
margin: var(--hero-gap) auto 0;
padding: 0;
border: 0;
background: none;
box-shadow: none;
display: block;
overflow: visible;
}
.hero-text {
position: relative;
z-index: 3;
}
.hero-logo-premium {
width: clamp(118px, 12vw, 176px);
height: auto;
object-fit: contain;
margin-bottom: 22px;
filter: drop-shadow(0 16px 28px rgba(15, 23, 42, 0.10));
}
.hero-badge {
display: inline-flex;
width: fit-content;
margin-bottom: 20px;
padding: 9px 15px;
border-radius: 999px;
background: rgba(236, 254, 255, 0.92);
color: var(--aia-cyan-dark);
border: 1px solid rgba(0, 184, 212, 0.18);
font-size: 0.76rem;
font-weight: 950;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.hero-text h1 {
max-width: 680px;
min-height: 1.85em;
font-size: clamp(2.75rem, 5.5vw, 5.9rem);
line-height: 0.94;
letter-spacing: -0.075em;
font-weight: 950;
color: var(--text);
margin-bottom: 24px;
}
.hero-text p {
max-width: 560px;
min-height: 5.2em;
color: var(--muted);
font-size: clamp(1rem, 1.4vw, 1.16rem);
line-height: 1.72;
font-weight: 650;
}
.buttons {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 14px;
margin-top: 34px;
}
.btn {
min-height: 54px;
padding: 0 28px;
border-radius: 999px;
border: 0;
font-size: 0.96rem;
font-weight: 950;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn.primary {
color: #fff;
background: linear-gradient(135deg, var(--aia-cyan), var(--aia-cyan-dark));
box-shadow: var(--shadow-cyan);
}
.btn.outline {
color: var(--aia-cyan-dark);
background: rgba(255, 255, 255, 0.88);
border: 1px solid rgba(0, 184, 212, 0.36);
}
.btn:hover {
transform: translateY(-4px);
}
/* CARROSSEL LIMPO */
.carousel {
position: relative;
z-index: 3;
height: 100%; /* preenche o .hero, que ja tem a proporcao/altura certas */
min-height: 0; /* era 470px: fixava altura e furava telas baixas */
/* referencia das medidas em cqw do conteudo do slide */
container-type: inline-size;
border-radius: 32px;
overflow: hidden;
background: #fff;
box-shadow:
0 34px 90px rgba(15, 23, 42, 0.24),
0 10px 24px rgba(15, 23, 42, 0.12);
isolation: isolate;
}
.carousel::before,
.carousel::after,
.ad-slide::after {
display: none !important;
content: none !important;
}
.carousel-loading {
width: 100%;
min-height: 470px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
color: var(--aia-blue);
font-weight: 600;
background: #fff;
}
/* SIMBOLO DA MARCA COMO MASCARA
aia-symbol.webp e o "A" branco com fundo transparente. Usado como mascara,
ele vira uma forma que aceita qualquer pintura por baixo -- o gradiente da
marca aqui, branco no bloco de Contato. Um arquivo so, qualquer cor. */
.loader-dot,
.commercial-card::after,
.result-box::before {
-webkit-mask: url("../images/aia-symbol.webp") center / contain no-repeat;
mask: url("../images/aia-symbol.webp") center / contain no-repeat;
}
/* O carregamento do banner e o simbolo "respirando", nao um spinner
generico. Ritmo de 1.4s -- longe dos ~5s de oscilacao lenta que enjoam. */
.loader-dot {
width: 58px;
height: 54px;
background: var(--aia-gradient);
animation: aiaBreath 1.4s ease-in-out infinite;
}
@keyframes aiaBreath {
0%, 100% { opacity: 0.45; transform: scale(0.92); }
50% { opacity: 1; transform: scale(1); }
}
.ad-slide {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.55s ease, transform 0.55s ease;
transform: scale(1.018);
background: #fff;
}
.ad-slide.active {
opacity: 1;
pointer-events: auto;
transform: scale(1);
}
/* A arte enviada e so o FUNDO. Como nao ha mais texto impresso nela, cover e
seguro: preenche o cartao inteiro sem tarja, e um corte eventual nas bordas
nao come palavra nenhuma. */
.ad-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Sem arte enviada, o fundo e o proprio gradiente da marca. */
.ad-slide.sem-arte {
background:
radial-gradient(circle at 82% 118%, rgba(0, 184, 212, 0.22), transparent 46%),
radial-gradient(circle at 12% -10%, rgba(0, 184, 212, 0.10), transparent 40%),
url("../images/aia-humps.webp") center / cover no-repeat,
#fff;
}
/* O texto acompanha o tamanho do banner: as medidas estao em cqw (1% da
largura do carrossel), entao a proporcao entre logo, titulo e subtitulo
fica identica em qualquer tela -- como era na imagem achatada, mas nitido
em qualquer zoom e legivel por leitor de tela. */
.ad-content {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.8cqw;
padding: 2.4cqw 8cqw calc(1.2cqw + 32px);
text-align: center;
}
.ad-logo {
height: 14.7cqw; /* = 22cqw do Logo_att.png, que tinha margem transparente */
width: auto;
max-width: 84%;
object-fit: contain;
margin-bottom: 0;
}
.ad-title {
font-size: 4.1cqw;
line-height: 1.1;
letter-spacing: -0.022em;
font-weight: 800;
color: var(--aia-blue);
text-wrap: balance;
margin: 0;
}
.ad-hl {
color: var(--aia-cyan);
}
.ad-divider {
display: block;
width: 7cqw;
height: 0.42cqw;
min-height: 2px;
border-radius: 999px;
background: var(--aia-cyan);
}
.ad-subtitle {
max-width: 72%;
font-size: max(1.85cqw, 0.9rem); /* piso: no tablet o cqw dava ~12px */
line-height: 1.5;
font-weight: 500;
color: var(--aia-blue);
text-wrap: balance;
margin: 0;
}
.ad-cta {
margin-top: 0.8cqw;
padding: 1.1cqw 2.6cqw;
border-radius: 999px;
font-size: 1.7cqw;
font-weight: 650;
color: #fff;
background: var(--aia-gradient);
box-shadow: var(--shadow-cyan);
}
@media (hover: hover) and (pointer: fine) {
.ad-cta:hover {
transform: translateY(-2px);
}
}
/* .is-logo saiu junto com o slide-imagem: quando nao ha arte, quem cuida do
fundo agora e .ad-slide.sem-arte (gradiente), e o logo e um elemento do
conteudo, nao a imagem inteira do slide. */
.prev,
.next {
width: 50px;
height: 50px;
border-radius: 50%;
border: 0;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(14px);
color: var(--aia-blue);
font-size: 1.35rem;
font-weight: 600;
cursor: pointer;
position: absolute;
top: 50%;
z-index: 12;
transform: translateY(-50%);
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
}
.prev {
left: 20px;
}
.next {
right: 20px;
}
@media (hover: hover) and (pointer: fine) {
.prev:hover,
.next:hover {
background: #fff;
transform: translateY(-50%) scale(1.05);
}
}
.carousel-dots {
position: absolute;
left: 50%;
bottom: 22px;
z-index: 12;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 8px;
}
.carousel-dot {
width: 8px;
height: 8px;
border-radius: 999px;
border: 0;
background: rgba(15, 23, 42, 0.24);
cursor: pointer;
}
.carousel-dot.active {
width: 28px;
background: var(--aia-cyan-dark);
}
/* HOME (hero novo)
Ocupa a largura toda, logo abaixo da faixa do header. */
.home-hero {
position: relative;
overflow: hidden;
isolation: isolate;
padding: clamp(48px, 8vh, 96px) clamp(18px, 6vw, 112px);
min-height: clamp(600px, calc(88svh - var(--header-h)), 860px);
display: flex;
align-items: center;
background:
linear-gradient(180deg, rgba(244, 245, 247, 0.2), rgba(244, 245, 247, 0) 40%),
url("../images/aia-humps.webp") center / cover no-repeat,
#f1f2f4;
border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.home-hero-inner {
position: relative;
z-index: 2;
width: min(1380px, 100%);
margin: 0 auto;
}
.home-hero-inner > * {
max-width: 640px;
}
.home-eyebrow {
display: inline-flex;
padding: 7px 16px;
border-radius: 999px;
background: rgba(45, 234, 203, 0.16);
color: var(--ink);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* Serifada grande: tracking negativo e entrelinha justa, como pede o corpo
de exibicao; o eixo optico da Fraunces afina os contrastes sozinho. Tres
linhas, cada uma num tom -- do azul-tinta ao gradiente da marca. */
.home-title {
margin: 26px 0 26px;
font-family: var(--font-display);
font-optical-sizing: auto;
font-size: clamp(3rem, 6.2vw, 5.6rem);
font-weight: 700;
line-height: 0.98;
letter-spacing: -0.028em;
color: var(--ink);
}
.home-title span {
display: block;
}
.home-title .t2 {
color: var(--ink-teal);
}
.home-title .t3 {
width: fit-content;
background: linear-gradient(90deg, #0f8a8f 0%, #19b3a0 45%, #2ddbb0 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
padding-bottom: 0.06em; /* o clip de texto cortava a perna do "g" */
}
.home-lead {
color: #4a5868;
font-size: clamp(1.05rem, 1.25vw, 1.2rem);
font-weight: 400;
line-height: 1.62;
max-width: 34em;
}
.home-actions {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: 16px;
margin-top: 40px;
}
.btn-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 56px;
padding: 0 30px;
border-radius: 999px;
font-size: 1rem;
font-weight: 700;
letter-spacing: -0.005em;
white-space: nowrap;
}
.btn-primary {
color: #fff;
background: var(--grad-cta);
box-shadow: 0 18px 40px rgba(11, 79, 108, 0.24);
}
.btn-secondary {
color: var(--ink);
background: #fff;
border: 1px solid rgba(15, 23, 42, 0.12);
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}
@media (hover: hover) and (pointer: fine) {
.btn-secondary:hover {
transform: translateY(-2px);
border-color: rgba(15, 94, 114, 0.35);
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
}
}
/* Agende uma visita: ainda nao existe, entao nao finge que existe -- sem
cursor de clique, sem hover, sem afundar; o "em breve" pequeno embaixo
explica. */
.home-visit {
display: grid;
justify-items: center;
gap: 6px;
}
.btn-primary.is-soon {
cursor: default;
user-select: none;
}
.home-visit small {
color: #6b7785;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* A onda da marca atravessa a direita do hero e sai pela borda. Ela "se
desenha" da esquerda para a direita ao entrar na tela (clip-path) e se
apaga no sentido inverso ao sair; o JS ainda a move devagar com a
rolagem (data-parallax). */
.home-wave {
position: absolute;
z-index: 1;
/* Horizontal, na metade direita: comeca logo depois da coluna de texto
e o fim da onda (que ja vem esmaecido no arquivo) encosta na borda.
Centrada na altura do hero: margin-top = -metade da altura. */
left: max(46%, 640px);
top: 52%;
width: 58vw;
aspect-ratio: 2400 / 580;
margin-top: calc(58vw * 580 / 2400 / -2);
pointer-events: none;
}
.home-wave img {
width: 100%;
height: auto;
will-change: transform;
}
.home-wave-clip {
display: block;
}
.js-reveal .home-wave[data-reveal] {
opacity: 1;
translate: none;
scale: none;
transition: none;
}
.js-reveal .home-wave[data-reveal] .home-wave-clip {
clip-path: inset(-30% 100% -30% 0);
transition: clip-path 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.1s;
}
.js-reveal .home-wave[data-reveal].is-visible .home-wave-clip {
clip-path: inset(-30% -5% -30% 0);
}
/* FEED: a frase de abertura e o banner das propagandas */
/* mesma margem lateral do hero: a frase comeca na mesma linha do titulo */
.updates-band {
width: min(1380px, calc(100% - 2 * clamp(18px, 6vw, 112px)));
margin: 0 auto;
padding: clamp(56px, 8vh, 88px) 0 0;
}
/* "Aia Feed": a mesma voz do titulo do hero -- serifada, grande, "Aia" em
tinta e "Feed" no gradiente de "Integrada." */
.feed-title {
margin: 0;
font-family: var(--font-display);
font-optical-sizing: auto;
font-size: clamp(3rem, 6.2vw, 5.6rem);
font-weight: 700;
line-height: 0.98;
letter-spacing: -0.028em;
color: var(--ink);
}
.feed-title span {
display: inline-block;
background: linear-gradient(90deg, #0f8a8f 0%, #19b3a0 45%, #2ddbb0 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
padding-bottom: 0.06em;
}
.updates-band .hero {
width: min(100%, calc(var(--hero-max-h) * 2));
margin-top: clamp(28px, 4vh, 44px);
}
/* Os titulos de secao usam a mesma serifada do hero: a pagina fala com uma
voz so. */
.section-header h2,
.units-header h2,
.result-content h2 {
font-family: var(--font-display);
font-optical-sizing: auto;
font-weight: 700;
}
@media (max-width: 900px) {
.home-hero {
min-height: auto;
align-items: flex-start;
padding-bottom: clamp(180px, 42vw, 300px); /* lugar para a onda embaixo */
}
.home-wave {
left: 0;
top: auto;
bottom: 40px;
margin-top: 0;
width: 118%;
}
}
@media (max-width: 720px) {
.home-actions {
flex-direction: column;
align-items: stretch;
}
.home-visit,
.btn-pill {
width: 100%;
}
.updates-band {
width: calc(100% - 36px);
}
}
/* FEATURES */
.features {
/* mesma largura do banner (.hero) para os blocos alinharem na vertical;
3 colunas porque sao 3 cards -- com repeat(4) sobrava uma coluna vazia
a direita desde que o card do catalogo saiu. */
width: min(1380px, calc(100% - 48px));
margin: 38px auto 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.card {
min-height: 134px;
padding: 24px;
border-radius: 28px;
background: #fff;
border: 1px solid rgba(15, 23, 42, 0.07);
box-shadow: var(--shadow-soft);
display: flex;
align-items: flex-end;
position: relative;
overflow: hidden;
}
.card::after {
content: "";
position: absolute;
right: -34px;
top: -42px;
width: 128px;
height: 128px;
border-radius: 42% 58% 48% 52%;
opacity: 0.22;
transform: rotate(18deg);
}
.card.pink::after {
background: #ff4fa3;
}
.card.yellow::after {
background: #facc15;
}
.card.green::after {
background: var(--aia-green);
}
.card.blue::after {
background: var(--aia-cyan);
}
.card div {
position: relative;
z-index: 2;
}
.card h3 {
color: var(--text);
font-size: 1.05rem;
font-weight: 950;
line-height: 1.25;
letter-spacing: -0.025em;
margin-bottom: 8px;
}
.card p {
color: var(--muted);
font-size: 0.9rem;
font-weight: 650;
line-height: 1.45;
}
.card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-medium);
}
/* SEÇÕES */
/* 1380px = a mesma largura do .hero e do .features. Antes estas secoes eram
1220px e ficavam visivelmente mais estreitas que o banner e os 3 cards;
agora a pagina inteira alinha na mesma coluna. */
.apple-section,
.units-section,
.results-section,
.footer {
width: min(1380px, calc(100% - 48px));
}
/* Sobre e Contato ficam da mesma altura do banner da Home, para que cada
item do menu mostre uma secao inteira e nada da vizinha.
A conta e a MESMA do .hero: largura = min(1380px, tela - 48px, altura
disponivel x 2) e altura = largura / 2 (a proporcao 2:1 do banner), com
teto na altura util da tela. Por isso as tres acompanham juntas quando a
janela muda. */
.apple-section,
.results-section {
--sec-gap: clamp(14px, 2.6vh, 34px);
--sec-max-h: calc(100vh - var(--header-h) - var(--sec-gap) * 2);
min-height: min(calc(min(1380px, 100vw - 48px) / 2), var(--sec-max-h));
display: flex;
flex-direction: column;
justify-content: center;
}
.apple-section {
margin: 96px auto 0;
padding: clamp(34px, 5vw, 68px);
border-radius: var(--radius-xl);
/* as curvas brancas (aia-humps) dao volume ao painel sem disputar com o
texto: o veu branco por cima segura o contraste */
background:
linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
url("../images/aia-humps.webp") center / cover no-repeat,
#fff;
border: 1px solid rgba(255, 255, 255, 0.95);
box-shadow: var(--shadow-soft);
}
.section-header,
.units-header {
max-width: 760px;
margin-bottom: 42px;
}
.section-header {
/* 760px (herdado) quebrava tanto o titulo quanto a frase em duas linhas
depois que o corpo cresceu; com 1120px cada um cabe numa linha so em
tela cheia e continua quebrando sozinho em telas menores. */
max-width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.section-header span,
.units-header span {
display: inline-flex;
margin-bottom: 14px;
padding: 8px 14px;
border-radius: 999px;
background: #ecfeff;
color: var(--aia-cyan-dark);
border: 1px solid rgba(0, 184, 212, 0.16);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.section-header h2,
.units-header h2 {
font-size: clamp(2rem, 3.9vw, 3.9rem);
line-height: 1.05;
letter-spacing: -0.03em;
font-weight: 800;
margin-bottom: 18px;
}
/* "Na [logo] voce vive..." -- o logo entra no meio da frase, entao acompanha
o tamanho da linha (em, nao px) e senta na linha de base do texto. */
/* Corpo maximo sem a frase cair para a segunda linha. Medido no proprio
navegador com o container em 1242px (secao de 1380px): a quebra acontece
em 2.367rem, entao o teto fica em 2.25rem -- ~5% de folga para diferenca
de renderizacao de fonte entre maquinas. O termo em vw encolhe o texto
junto com a tela, mantendo a linha unica nas larguras menores.
O logo e medido em `em`, entao acompanha sozinho. */
/* Mesmo corpo da .units-lead (chamada de "Ambiente Escolar") de proposito:
as duas sao a frase de abertura da sua secao e agora leem no mesmo tamanho.
Se mexer numa, mexa na outra. */
.section-lead {
font-size: clamp(1.05rem, 1.65vw, 1.6rem) !important;
line-height: 1.55;
}
/* Medidas para o aia-logo.webp (recortado rente). Equivalem as do
Logo_att.png -- 1.45em de altura, -0.42em de base, 0.14em de margem --
descontada a margem transparente que aquele arquivo tinha. */
.inline-logo {
display: inline-block;
height: 0.97em;
width: auto;
margin: 0 0.32em;
vertical-align: -0.13em;
}
/* "Aia News": o logo e a palavra News formam uma marca so, entao nunca podem
ser separados por uma quebra de linha.
Os resets abaixo sao necessarios: `.section-header span` estiliza QUALQUER
span da secao como aquela pilula (a antiga "Vitrine Premium") -- sem eles o
lockup aparece dentro de uma capsula, em caixa alta e corpo miudo. */
.section-header .inline-brand,
.units-header .inline-brand {
white-space: nowrap;
font-weight: 950;
color: var(--aia-cyan-dark);
display: inline;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
font-size: inherit;
letter-spacing: inherit;
text-transform: none;
}
.inline-brand .inline-logo {
margin-right: 0.05em;
}
.section-header p,
.units-header p {
color: var(--muted);
font-size: clamp(1rem, 1.5vw, 1.14rem);
line-height: 1.6;
font-weight: 450;
}
/* Frase da Nova Unidade: corpo maior e numa linha so. O .units-header herda
max-width 760px, que quebraria a frase em tres linhas neste tamanho. */
.units-header {
max-width: 100%;
}
/* Sem `text-wrap: nowrap` de proposito: nesta largura a frase ja cabe numa
linha sozinha, e forcar a linha unica a empurraria para fora da tela no
celular (onde o body corta o excedente com overflow-x: hidden). */
.units-lead {
font-size: clamp(1.05rem, 1.65vw, 1.6rem) !important;
line-height: 1.4;
}
/* auto-fit em vez de repeat(3): com 4 cartoes, tres colunas fixas deixariam
o quarto sozinho numa segunda linha. Assim os cartoes se acomodam na
largura disponivel e quebram sem buraco na grade. */
.commercial-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
gap: 22px;
}
.units-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.commercial-card,
.unit-card {
min-height: 300px;
padding: 30px;
border-radius: 32px;
background: #fff;
border: 1px solid rgba(15, 23, 42, 0.07);
box-shadow: var(--shadow-soft);
position: relative;
overflow: hidden;
}
/* Antes era align-items: flex-end -- o conteudo colava na base do cartao e,
como os textos tem alturas diferentes, cada etiqueta parava numa altura
diferente. Agora o bloco ocupa o cartao inteiro: etiqueta e titulo comecam
no topo (todas as etiquetas na mesma linha) e a descricao e empurrada para
a base, entao as duas pontas alinham. */
.commercial-card {
display: flex;
align-items: stretch;
}
.commercial-card > div {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* O titulo reserva sempre duas linhas: "Plataforma Digital" ocupa uma so, e
sem isso a descricao dele comecava mais alta que a dos vizinhos. Com a
altura reservada, etiqueta, titulo e descricao comecam todos na mesma
linha nos quatro cartoes. */
.commercial-card h3 {
min-height: 2.24em; /* 2 linhas x line-height 1.12 */
}
.unit-card::after {
content: "";
position: absolute;
right: -46px;
top: -46px;
width: 150px;
height: 150px;
border-radius: 50%;
background: rgba(0, 184, 212, 0.13);
}
/* No lugar da bolha generica, o simbolo da marca no canto, cortado pela
borda do cartao (a mascara esta junto do .loader-dot). */
.commercial-card::after {
content: "";
position: absolute;
right: -38px;
top: -30px;
width: 170px;
height: 157px;
background: var(--aia-gradient);
opacity: 0.12;
transition: var(--transition);
pointer-events: none;
}
.commercial-card div,
.unit-card h3,
.unit-card p,
.unit-card button {
position: relative;
z-index: 2;
font-weight: 650;
}
.commercial-card span {
display: inline-flex;
margin-bottom: 12px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(0, 184, 212, 0.10);
color: var(--aia-cyan-dark);
font-size: 0.73rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.commercial-card h3,
.unit-card h3 {
font-size: 1.55rem;
line-height: 1.12;
letter-spacing: -0.022em;
font-weight: 750;
margin-bottom: 14px;
}
.commercial-card p,
.unit-card p {
color: var(--muted);
font-size: 1rem;
line-height: 1.6;
font-weight: 450;
}
@media (hover: hover) and (pointer: fine) {
.commercial-card:hover,
.unit-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-medium);
}
/* o simbolo da marca no canto "acompanha" o cartao que sobe */
.commercial-card:hover::after {
opacity: 0.2;
transform: translate(-8px, 6px) rotate(-8deg) scale(1.06);
}
}
.units-section {
margin: 96px auto 0;
}
/* O alfinete de mapa (📍) saiu junto com as unidades por cidade: os cards
agora sao fotos do projeto, nao pontos no mapa para escolher. */
.unit-card button {
margin-top: 22px;
min-height: 48px;
padding: 0 18px;
border-radius: 999px;
border: 0;
background: linear-gradient(135deg, var(--aia-cyan), var(--aia-cyan-dark));
color: #fff;
font-size: 0.9rem;
font-weight: 950;
cursor: pointer;
box-shadow: var(--shadow-cyan);
}
.unit-card button:hover {
transform: translateY(-4px);
}
/* CTA */
.results-section {
margin: 96px auto;
}
.result-box {
padding: clamp(38px, 7vw, 86px);
border-radius: var(--radius-xl);
background:
radial-gradient(circle at 80% 20%, rgba(0, 184, 212, 0.34), transparent 30%),
linear-gradient(135deg, #07111f, #0f172a 48%, #073b5f);
color: #fff;
box-shadow: var(--shadow-strong);
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 36px;
align-items: center;
position: relative;
overflow: hidden;
isolation: isolate;
}
/* A fita da marca entra pelo canto de baixo, sobre o azul escuro -- e o
fundo para o qual ela foi desenhada. */
.result-box::after {
content: "";
position: absolute;
left: -8%;
bottom: -34%;
width: min(46%, 560px);
aspect-ratio: 1200 / 1388;
background: url("../images/aia-ribbon.webp") center / contain no-repeat;
opacity: 0.26;
transform: rotate(-8deg);
z-index: -1;
pointer-events: none;
}
/* E o "A" branco, grande e quase transparente, atras do formulario. */
.result-box::before {
content: "";
position: absolute;
right: -4%;
top: -12%;
width: min(52%, 620px);
aspect-ratio: 600 / 553;
background: #fff;
opacity: 0.05;
z-index: -1;
pointer-events: none;
}
/* Size container for the heading below, which is set in cqw (1% of this
column's width) so "Pronto para comecar" always fills the column on one line. */
.result-content {
container-type: inline-size;
}
/* Direct child only: this styles the "Contato rapido" tag. As a descendant
selector it also turned any inside the paragraph into a pill, which
uppercased the address and pushed it onto a third line. */
.result-content > span {
display: inline-flex;
margin-bottom: 16px;
padding: 9px 15px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* Two fixed lines -- "Pronto para comecar" / "com o [logo]?" -- sized to the
column. "Pronto para comecar" measures 9.04em wide (weight 800, -0.035em), so 100 / 9.04 = 11.06cqw would
fill the column exactly; 10.6cqw leaves ~4% to spare because the font stack is
system fonts and widths differ by platform. nowrap keeps it at two lines even if
a font runs wide: it spills into the 36px column gap instead of wrapping to a
third line. The previous clamp stays inside min() as a ceiling: below 1181px the
layout stacks and the column becomes the whole card, where cqw alone would have
made the heading BIGGER than before (59px -> 81.6px at 1180px). It may only
shrink. */
.result-content h2 {
font-size: min(clamp(2.2rem, 5vw, 5.1rem), 10.6cqw);
white-space: nowrap;
line-height: 1;
letter-spacing: -0.035em;
font-weight: 800;
margin-bottom: 20px;
}
/* Extra room above the "Endereco" tag, on top of the heading's own 20px margin,
so the address reads as a separate block from the heading. */
.result-content .address-tag {
margin-top: 24px;
}
.result-content p {
color: rgba(255, 255, 255, 0.76);
font-size: clamp(1rem, 1.5vw, 1.16rem);
line-height: 1.65;
font-weight: 450;
}
/* The address wraps on phones, and browsers treat a hyphen as a break
opportunity, so the postal code could split as "17017-" / "339". Keeping
city, state and postal code in one unbreakable run forces any wrap to land
before it, after "Jardim America,". Desktop is unaffected: it fits on one line. */
.result-content .nowrap {
white-space: nowrap;
}
.lead-form-card {
padding: 26px;
border-radius: 30px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.18);
backdrop-filter: blur(18px);
}
.lead-form-card h3 {
font-size: 1.5rem;
font-weight: 750;
margin-bottom: 8px;
letter-spacing: -0.015em;
}
.lead-form-card p {
color: rgba(255, 255, 255, 0.72);
font-size: 0.95rem;
line-height: 1.55;
margin-bottom: 20px;
}
.lead-form {
display: grid;
gap: 12px;
}
.lead-form label {
display: grid;
gap: 7px;
color: rgba(255, 255, 255, 0.88);
font-size: 0.82rem;
font-weight: 600;
}
.lead-form input,
.lead-form select {
width: 100%;
min-height: 50px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.22);
background: rgba(255, 255, 255, 0.92);
color: var(--text);
padding: 0 15px;
font-size: 0.95rem;
font-weight: 500;
outline: none;
}
.lead-form button {
width: 100%;
min-height: 54px;
border: 0;
border-radius: 999px;
background: #fff;
color: var(--aia-blue-dark);
font-size: 0.96rem;
font-weight: 650;
cursor: pointer;
}
.lead-feedback {
margin-top: 12px;
color: #67e8f9;
font-size: 0.9rem;
font-weight: 600;
}
/* FOOTER */
/* O cartao "Nova Unidade / Conhecer" saiu do rodape: sobra a marca sozinha,
entao ela deixa de ser uma coluna de grade e passa a ocupar a faixa toda. */
.footer {
margin: 0 auto 34px;
padding: 40px clamp(28px, 4vw, 54px);
border-radius: 32px;
background: rgba(255, 255, 255, 0.84);
box-shadow: var(--shadow-soft);
display: block;
}
/* logo a esquerda, centralizado verticalmente com a frase ao lado */
.footer-brand {
display: flex;
align-items: center;
gap: clamp(20px, 3vw, 40px);
}
.footer-brand img {
height: clamp(43px, 4.7vw, 70px); /* = clamp(64px, 7vw, 104px) do Logo_att.png */
width: auto;
flex-shrink: 0;
margin-bottom: 0;
}
.footer-brand p {
color: var(--muted);
font-size: clamp(1.05rem, 1.7vw, 1.6rem);
line-height: 1.45;
font-weight: 450;
}
.footer-legal {
margin: 18px 0 0;
font-size: 0.95rem;
}
.footer-legal a {
color: var(--aia-cyan-dark);
}
.footer-contact-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.contact-card {
padding: 18px;
border-radius: 22px;
background: #f8fafc;
border: 1px solid rgba(15, 23, 42, 0.07);
}
.contact-card span {
display: block;
color: var(--muted);
font-size: 0.74rem;
font-weight: 900;
text-transform: uppercase;
margin-bottom: 8px;
}
.contact-card strong {
display: block;
margin-bottom: 12px;
}
.contact-card button {
border: 0;
background: transparent;
color: var(--aia-cyan-dark);
font-size: 0.88rem;
font-weight: 950;
cursor: pointer;
}
.contact-card:hover {
transform: translateY(-4px);
background: #ecfeff;
}
/* FLOATING */
.aia-floating-contact {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 999;
min-height: 58px;
padding: 0 22px;
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, #05c46b, #00b894);
color: #fff;
font-size: 0.94rem;
font-weight: 950;
box-shadow: 0 20px 46px rgba(5, 196, 107, 0.34);
animation: aiaPulseContact 2.3s infinite;
}
.aia-floating-contact-icon {
width: 34px;
height: 34px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.18);
}
@keyframes aiaPulseContact {
0% {
box-shadow: 0 0 0 0 rgba(5, 196, 107, 0.42), 0 20px 46px rgba(5, 196, 107, 0.34);
}
70% {
box-shadow: 0 0 0 16px rgba(5, 196, 107, 0), 0 20px 46px rgba(5, 196, 107, 0.34);
}
100% {
box-shadow: 0 0 0 0 rgba(5, 196, 107, 0), 0 20px 46px rgba(5, 196, 107, 0.34);
}
}
/* RESPONSIVO */
/* Como na Apple, a barra so encolhe abaixo de 834px: sobram o simbolo a
esquerda e o atalho de Contato a direita. */
@media (max-width: 833px) {
.nav a:not([href="#resultados"]) {
display: none;
}
}
@media (max-width: 1180px) {
/* .hero saiu daqui: nao e mais grid de 2 colunas, e sim o proprio banner */
.result-box,
.footer {
grid-template-columns: 1fr;
}
/* Com 3 cards, repeat(2, 1fr) deixava um orfao sozinho na segunda linha.
auto-fit mantem os 3 lado a lado enquanto couberem (>=240px cada) e so
entao quebra -- sem buraco na grade. */
.features {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.commercial-grid,
.units-grid,
.footer-contact-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
:root {
--header-pad-y: 10.5px; /* 52px no celular: os botoes de 38px com folga */
}
.nav {
padding: 0 16px;
}
.login {
display: none;
}
.auth a {
min-height: 38px;
padding: 0 12px;
font-size: 0.78rem;
}
.hero {
width: min(calc(100% - 28px), calc(var(--hero-max-h) * 2));
}
.hero-text h1 {
font-size: 2.55rem;
min-height: auto;
}
.hero-text p {
min-height: auto;
}
.buttons {
flex-direction: column;
align-items: stretch;
}
.btn {
width: 100%;
}
.carousel {
border-radius: 26px;
}
/* No celular o Feed vira um cartao em pe: na faixa 2:1 (~170px de altura)
o texto em cqw encolhia para ~6px. Aqui as medidas sao fixas e legiveis.
Setas fora: o dedo arrasta e os pontos mostram onde se esta. */
.updates-band .hero {
width: 100%;
aspect-ratio: auto;
height: clamp(430px, 118vw, 520px);
}
.ad-content {
gap: 10px;
padding: 28px 24px 52px;
}
.ad-logo {
height: 60px;
}
.ad-title {
font-size: clamp(1.45rem, 7vw, 1.85rem);
}
.ad-divider {
width: 44px;
height: 3px;
}
.ad-subtitle {
max-width: 100%;
font-size: 0.97rem;
line-height: 1.55;
}
.ad-cta {
margin-top: 6px;
padding: 11px 22px;
font-size: 0.95rem;
}
.carousel .prev,
.carousel .next {
display: none;
}
.features,
.apple-section,
.units-section,
.results-section,
.footer {
width: calc(100% - 28px);
}
.features {
grid-template-columns: 1fr;
}
.aia-floating-contact {
right: 16px;
bottom: 16px;
min-height: 54px;
padding: 0 16px;
}
.aia-floating-contact-text {
display: none;
}
}
/* NOVA UNIDADE - fotos do novo espaco (reaproveita .unit-card) */
/* VITRINE DAS FOTOS DA NOVA UNIDADE
As tres fotos alternam como um banner: a atual grande no centro, a anterior
e a proxima menores nas laterais. O palco e mais largo que alto porque a
foto central ocupa so parte da largura -- em 16/9 cheio sobraria uma faixa
vazia acima e abaixo. */
.units-showcase {
position: relative;
width: 100%;
aspect-ratio: 2.55;
margin-top: 34px;
overflow: hidden; /* corta as pontas das fotas laterais nas bordas */
}
/* --lado-escala e o tamanho dos vizinhos; --lado-desloc e a distancia deles,
em % da largura da PROPRIA foto. */
.unit-photo {
--lado-escala: 0.56;
--lado-desloc: 78%;
position: absolute;
top: 50%;
left: 50%;
width: 60%;
aspect-ratio: 16 / 9; /* a proporcao dos arquivos (1100x619): cover nao corta */
padding: 0;
border-radius: 30px;
overflow: hidden;
background: #fff;
box-shadow:
0 24px 60px rgba(15, 23, 42, 0.20),
0 8px 20px rgba(15, 23, 42, 0.10);
opacity: 0;
pointer-events: none;
z-index: 1;
transform: translate(-50%, -50%) scale(var(--lado-escala));
/* mola: uma troca no meio de outra parte de onde a foto ESTA, sem pulo */
transition:
transform 700ms var(--ease-spring),
opacity 400ms ease;
}
.unit-photo.active {
opacity: 1;
pointer-events: auto;
z-index: 3;
transform: translate(-50%, -50%) scale(1);
}
.unit-photo.is-prev,
.unit-photo.is-next {
opacity: 0.62;
pointer-events: auto;
cursor: pointer;
z-index: 2;
}
.unit-photo.is-prev {
transform:
translate(calc(-50% - var(--lado-desloc)), -50%)
scale(var(--lado-escala));
}
.unit-photo.is-next {
transform:
translate(calc(-50% + var(--lado-desloc)), -50%)
scale(var(--lado-escala));
}
@media (hover: hover) and (pointer: fine) {
.unit-photo.is-prev:hover,
.unit-photo.is-next:hover {
opacity: 0.9;
}
}
/* :not([hidden]) e obrigatorio -- uma regra `display` aqui venceria o
`[hidden] { display: none }` do navegador e uma foto ainda sem arquivo
apareceria como icone de imagem quebrada. */
.unit-photo img:not([hidden]) {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* setas e marcadores */
.unit-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 4;
width: 50px;
height: 50px;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.94);
color: var(--aia-blue);
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
box-shadow: var(--shadow-soft);
display: flex;
align-items: center;
justify-content: center;
}
.unit-prev { left: 12px; }
.unit-next { right: 12px; }
@media (hover: hover) and (pointer: fine) {
.unit-nav:hover {
background: #fff;
color: var(--aia-cyan-dark);
transform: translateY(-50%) scale(1.05);
}
}
.unit-dots {
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50%);
z-index: 4;
display: flex;
align-items: center;
gap: 8px;
}
.unit-dot {
width: 9px;
height: 9px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(15, 23, 42, 0.22);
cursor: pointer;
}
.unit-dot.active {
width: 26px;
background: var(--aia-cyan);
}
/* ANIMACAO DE ENTRADA POR ROLAGEM
O estado inicial (invisivel) so vale sob .js-reveal, classe que o proprio
JS poe no . Se o JS falhar ou nao rodar, nada fica escondido -- o
conteudo aparece normalmente. Quem pede menos movimento no sistema
operacional tambem nao entra aqui (o JS nem liga o observer).
Reversivel: o JS tira .is-visible quando o bloco sai da tela e marca por
onde ele saiu (data-reveal-from) -- na volta ele entra por esse lado.
Usa `translate` e `scale`, propriedades separadas do `transform`: o hover
e o toque (que usam transform) continuam imediatos, sem o atraso da
cascata. --reveal-delay escalona os itens de um mesmo bloco. */
.js-reveal [data-reveal] {
--reveal-y: 28px;
opacity: 0;
translate: 0 var(--reveal-y);
scale: 0.985;
transition:
var(--transition),
opacity 0.5s ease var(--reveal-delay, 0s),
translate 850ms var(--ease-spring) var(--reveal-delay, 0s),
scale 850ms var(--ease-spring) var(--reveal-delay, 0s);
}
.js-reveal [data-reveal][data-reveal-from="above"] {
--reveal-y: -28px;
}
.js-reveal [data-reveal].is-visible {
opacity: 1;
translate: 0 0;
scale: 1;
}
/* cascata: os cards de um mesmo bloco entram em sequencia, nao todos juntos */
.js-reveal .commercial-grid > [data-reveal]:nth-child(2) { --reveal-delay: 0.08s; }
.js-reveal .commercial-grid > [data-reveal]:nth-child(3) { --reveal-delay: 0.16s; }
.js-reveal .commercial-grid > [data-reveal]:nth-child(4) { --reveal-delay: 0.24s; }
/* FITAS DECORATIVAS
A fita da marca (aia-ribbon.webp) solta no fundo da pagina, nas laterais,
atras do conteudo. O JS move cada uma devagar conforme a rolagem (paralaxe,
so transform); com "reduzir movimento" elas ficam paradas. */
/* As fitas saem pelas bordas de proposito. `clip` (e nao `hidden`) corta o
excedente sem criar area rolavel: nem o trackpad nem o scrollBy conseguem
arrastar a pagina para o lado. */
main {
position: relative;
isolation: isolate;
overflow-x: clip;
}
.aia-decor {
position: absolute;
z-index: -1;
pointer-events: none;
width: clamp(360px, 34vw, 640px);
aspect-ratio: 1200 / 1388;
}
.aia-decor img {
width: 100%;
height: auto;
opacity: 0.22;
will-change: transform;
}
.aia-decor-a {
top: -40px;
left: calc(-1 * clamp(180px, 16vw, 320px));
}
.aia-decor-b {
top: 34%;
right: calc(-1 * clamp(160px, 14vw, 300px));
}
.aia-decor-b {
transform: scaleX(-1); /* espelhada: entra pela direita (o JS mexe so na img) */
}
.aia-decor-c {
bottom: 4%;
left: calc(-1 * clamp(200px, 18vw, 340px));
}
/* No celular nao ha lateral livre: a fita passaria por tras do texto. Fica
uma so, menor e mais apagada, saindo da borda. */
@media (max-width: 720px) {
.aia-decor {
width: 260px;
}
.aia-decor img {
opacity: 0.12;
}
.aia-decor-a {
left: -170px;
}
.aia-decor-b,
.aia-decor-c {
display: none;
}
}
/* RESPOSTA AO TOQUE
Tudo que e clicavel afunda um pouco no instante do clique (pointer-down,
via :active), com 90ms -- e na soltura volta pela mola das transicoes
acima. Fica no fim do arquivo para vencer os :hover. */
.nav a:active,
.btn-secondary:active,
.ad-cta:active,
.lead-form button:active,
.unit-card button:active {
transform: scale(0.96);
transition-duration: var(--dur-press);
transition-timing-function: ease-out;
}
.commercial-card:active {
transform: scale(0.985);
transition-duration: var(--dur-press);
transition-timing-function: ease-out;
}
.prev:active,
.next:active,
.unit-nav:active {
transform: translateY(-50%) scale(0.9);
transition-duration: var(--dur-press);
transition-timing-function: ease-out;
}
.carousel-dot:active,
.unit-dot:active {
transform: scale(0.8);
transition-duration: var(--dur-press);
}
.lead-form button {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
@media (hover: hover) and (pointer: fine) {
.lead-form button:hover {
transform: translateY(-2px);
box-shadow: 0 16px 38px rgba(0, 0, 0, 0.26);
}
.lead-form button:active {
transform: scale(0.96);
}
}
/* Os campos tinham `outline: none` e nenhum estado de foco: quem navega pelo
teclado nao via onde estava. O anel aparece na hora, como o toque. */
.lead-form input:focus-visible,
.lead-form select:focus-visible {
border-color: var(--aia-grad-start);
box-shadow: 0 0 0 4px rgba(45, 234, 203, 0.35);
}
a:focus-visible,
button:focus-visible {
outline: 3px solid var(--aia-grad-start);
outline-offset: 3px;
}
/* CARROSSEIS FLUIDOS (.is-fluid, posto pelo JS)
A posicao dos slides e das fotos agora e da mola em JS, quadro a quadro;
as transicoes CSS antigas brigariam com ela, entao saem. Sem JS, nada
disto vale e o CSS antigo continua de pe. */
.carousel.is-fluid,
.units-showcase.is-fluid {
touch-action: pan-y; /* horizontal e nosso; vertical rola a pagina */
-webkit-user-select: none;
user-select: none;
cursor: grab;
}
.is-fluid.is-dragging {
cursor: grabbing;
}
.is-fluid img {
-webkit-user-drag: none;
}
.carousel.is-fluid .ad-slide {
opacity: 1;
transform: none;
transition: none;
will-change: transform;
}
.carousel.is-fluid .ad-content,
.carousel.is-fluid .ad-bg {
will-change: transform, opacity;
}
.units-showcase.is-fluid .unit-photo {
transition: none;
will-change: transform, opacity;
}
.carousel:focus-visible,
.units-showcase:focus-visible {
outline: 3px solid var(--aia-grad-start);
outline-offset: 4px;
}
/* ACESSIBILIDADE: as tres preferencias do sistema, cada uma independente */
@media (prefers-reduced-motion: reduce) {
.loader-dot {
animation: none;
}
.aia-decor img {
will-change: auto;
}
}
/* menos transparencia: o vidro vira superficie solida, sem desfoque */
@media (prefers-reduced-transparency: reduce) {
.header {
background: var(--ink);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.lead-form-card {
background: #12304a;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.prev,
.next,
.unit-nav {
background: #fff;
backdrop-filter: none;
}
}
/* mais contraste: fundos solidos, bordas definidas, texto mais escuro */
@media (prefers-contrast: more) {
:root {
--muted: #334155;
}
.header {
background: var(--ink);
border-bottom: 2px solid #fff;
}
.nav a {
color: #fff;
}
.commercial-card,
.apple-section,
.footer {
border: 2px solid var(--text);
}
.lead-form-card {
background: #0b2236;
border: 2px solid #fff;
}
.result-content p,
.lead-form-card p {
color: #fff;
}
.aia-decor,
.result-box::before,
.result-box::after,
.commercial-card::after {
display: none;
}
}
/* ENTRAR
A folha de acesso (