/* ============================================================================
   HERO — Anthares 44 (Home) · reprodução fiel de Referencia.png
   Fundo branco acetinado (seda 3D via SVG) + brilhos azul/rosa perolados.
   Badge → título (cinza + trecho preto) → subtítulo → prompt box → 4 cards.
   Fonte arredondada (Poppins) no título, como na referência. Escopo 100% em .ah*.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

.ah {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Altura de UMA TELA e conteúdo centrado verticalmente (justify-content:
       center acima). Antes a altura vinha só do conteúdo, com padding-top de
       até 200px: o texto colava no topo e sobrava um vão grande embaixo — que
       ficou ainda mais evidente quando o card da .agx passou a crescer a partir
       do centro do seu pin de 100vh.
       O padding-top continua existindo para o texto nunca encostar na navbar,
       que é position:absolute e NÃO ocupa espaço no fluxo. */
    /* 76vh e nao 100vh: com a tela inteira, centralizar o texto deixava ~40vh
       VAZIOS abaixo dele antes do card. 76vh mantem o texto no meio da area
       visivel e corta boa parte desse vao. */
    min-height: 76vh;
    min-height: 76svh;                           /* mobile: ignora a barra do browser */
    padding: clamp(80px, 11vh, 120px) clamp(20px, 4vw, 56px) clamp(40px, 5vh, 72px);
    background: var(--page-background);          /* EXATAMENTE a cor da navbar → bloco contínuo, sem transição */
    color: #16171b;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
}

/* Fundo do Hero: 100% limpo e uniforme (cor da navbar). Sem camadas de fundo
   (seda/ondas/brilhos/gradientes/véu/etc.) — removidas por completo. */

/* ================================ CENTRO ================================= */
.ah__center {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1180px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ------------------------------- título ---------------------------------- */
.ah__title {
    margin: 0 auto;                                 /* primeiro elemento do .ah__center */
    max-width: 1060px;
    font-family: 'Poppins', 'Inter', sans-serif;   /* arredondada, como a referência */
    font-weight: 600;
    /* Teto 3.7rem (~59px): aumentamos a fonte E alargamos a coluna p/ 1060px
       juntos — a linha 1 (pior caso ~956px em Poppins 600 a 3.7rem) segue em
       UMA linha nos 3 idiomas, com folga. */
    font-size: clamp(2.2rem, 4.6vw, 3.7rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-transform: lowercase;                     /* novo estilo (ref): tudo minúsculo */
    opacity: 0;
    animation: ah-rise 1s cubic-bezier(.22,.61,.36,1) .16s forwards;
}
/* i18n: traduções mais LONGAS não podem estourar a linha e quebrar o formato
   das pílulas. O i18n troca html[lang] → reduzimos o corpo por idioma quando
   preciso (italiano é ~40% mais longo que o português). Cada frase segue em
   UMA linha, com as pílulas intactas. */
html[lang="it"] .ah__title { font-size: clamp(1.5rem, 3.05vw, 2.35rem); }
/* Italiano: primeira letra do título em MAIÚSCULA ("Tutto…"), resto minúsculo. */
html[lang="it"] .ah__title-soft::first-letter { text-transform: uppercase; }
.ah__title { text-wrap: balance; }               /* se ainda quebrar, quebra bonito */
/* Duas frases, ambas escuras como na referência: L1 grande, L2 (menor) logo
   abaixo. O nome "soft/strong" ficou historico — nao ha mais contraste de cor. */
.ah__title-soft { display: block; color: #101114; }
.ah__title-strong {
    display: block;
    margin-top: .28em;
    font-size: .62em;                               /* ~30px no desktop, abaixo da L1 */
    color: #101114;
    font-weight: 600;
}

/* Palavras em destaque — pílulas coloridas (estilo "Drops"): lavanda + lima
   da marca. A palavra dentro muda com o idioma (o i18n traduz o texto). */
.ah-hl {
    border-radius: .3em;
    padding: .02em .28em;
    margin: 0 .02em;
    white-space: nowrap;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.ah-hl--lav  { background: #E7E7EA; color: #3F3F46; }
.ah-hl--lime { background: #2563EB; color: #fff; }   /* "ecossistema" — azul */

/* ---- adesivos decorativos (cursor + pílula), estilo colaborativo ----------
   Cada CURSOR é girado para APONTAR ao texto (centro do hero). A pílula fica
   só levemente inclinada. Float leve no item inteiro. */
.ah__deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ah__deco-item {
    position: absolute; width: clamp(58px, 6.5vw, 92px);
    animation: ah-deco-float 7s ease-in-out infinite;
}
.ah__deco-pill {
    width: 100%; height: auto; display: block;
    filter: drop-shadow(0 8px 16px rgba(15,16,18,.07));
}
.ah__deco-cursor {
    position: absolute; width: 38%; height: auto;
    transform-origin: center;
    filter: drop-shadow(0 3px 6px rgba(15,16,18,.10));
}
/* A — topo-esquerda: cursor AFASTADO no canto inferior-direito, apontando p/ o texto */
.ah__deco--a { color: #3B82F6; top: 14%; left: 6%; }
.ah__deco--a .ah__deco-pill   { transform: rotate(-8deg); }
.ah__deco--a .ah__deco-cursor { bottom: -62%; right: -40%; transform: rotate(180deg); }
/* B — direita: cursor AFASTADO à esquerda da pílula, apontando p/ o texto */
.ah__deco--b { color: #9CA3AF; top: 28%; right: 7%; animation-duration: 8.5s; animation-delay: .4s; }
.ah__deco--b .ah__deco-pill   { transform: rotate(7deg); }
.ah__deco--b .ah__deco-cursor { left: -60%; top: 20%; transform: rotate(-45deg); }
/* C — baixo-esquerda: cursor AFASTADO no topo-direito, apontando p/ o texto */
.ah__deco--c { color: #17181C; bottom: 15%; left: 12%; animation-duration: 9s; animation-delay: .8s; }
.ah__deco--c .ah__deco-pill   { transform: rotate(6deg); }
.ah__deco--c .ah__deco-cursor { top: -60%; right: -38%; transform: rotate(90deg); }
@keyframes ah-deco-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
@media (max-width: 900px) { .ah__deco { display: none; } }        /* mobile: sem adesivos */
@media (prefers-reduced-motion: reduce) { .ah__deco-item { animation: none; } }

/* ------------------------------ subtítulo -------------------------------- */
.ah__sub {
    margin: clamp(20px, 2.4vw, 32px) auto 0;
    max-width: 680px;
    font-size: clamp(1.05rem, 1.5vw, 1.28rem);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.004em;
    color: #6a6d76;
    opacity: 0;
    animation: ah-rise 1s cubic-bezier(.22,.61,.36,1) .28s forwards;
}

/* ============================== ANIMAÇÕES ================================= */
@keyframes ah-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* =============================== RESPONSIVO ============================== */
@media (max-width: 600px) {
    .ah { padding-top: clamp(96px, 15vh, 130px); }
    .ah__title { font-size: clamp(2.3rem, 9.5vw, 3.3rem); }
    .ah__sub { font-size: 1.05rem; max-width: 92%; }
}

@media (prefers-reduced-motion: reduce) {
    .ah__title, .ah__sub { opacity: 1 !important; animation: none !important; }
}