/* ============================================================
   ACEDE — base de desenho partilhada
   ------------------------------------------------------------
   Carregado depois do custom.css. Define os tokens e as peças
   repetidas por todas as secções refeitas, para cada view não
   voltar a declarar as mesmas cores e medidas.

   O movimento (entradas, scroll, botões magnéticos) vem de
   public/js/acede.js, carregado no header.

   Prefixo .ac- para não colidir com o CSS do template.
   ============================================================ */

:root {
    /* Verdes — os mesmos do template */
    --ac-ink:    #102302;   /* verde quase preto, cor principal     */
    --ac-ink-2:  #1b3307;   /* um tom acima, para estados           */
    --ac-green:  #35a15f;   /* verde vivo (--dark-color do template) */
    --ac-sage:   #92a15f;   /* verde da marca (--accent-color)       */
    --ac-sage-d: #7d8b4e;   /* verde da marca para texto sobre claro */

    /* Neutros */
    --ac-bone:   #f2f1ed;   /* fundo claro — o mesmo em todas as secções */
    --ac-sand:   #e4e1d6;
    --ac-line:   #dcd9cf;
    --ac-line-d: rgba(242, 241, 237, .14);
    --ac-muted:  #6f7468;
    --ac-muted-d: rgba(242, 241, 237, .72);

    /* Gradientes do template. O verde vivo e o da marca sozinhos não
       combinam; em degradé um passa para o outro e já ligam.
       Usar só onde é preciso destaque: palavra do título, botão
       principal, // dos sobrescritos, anéis dos números. */
    --ac-grad:      linear-gradient(to right, var(--ac-green) 0%, var(--ac-sage) 50%, var(--ac-green) 100%);
    --ac-grad-text: linear-gradient(267.43deg, var(--ac-sage) 4.95%, var(--ac-green) 97.92%);
    --ac-grad-line: linear-gradient(90deg, var(--ac-green), var(--ac-sage));

    --ac-pad-y:   96px;
    --ac-pad-y-s: 68px;

    --ac-radius:   20px;
    --ac-radius-s: 14px;
    --ac-radius-l: 28px;

    --ac-ease: cubic-bezier(.22, .68, .35, 1);
}

/* ── Estrutura ──────────────────────────────────────────────── */

.ac-wrap {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Todas as secções claras têm exactamente o mesmo fundo: a página
   lê-se como uma folha contínua e os painéis escuros parecem pousados
   por cima dela. */
.ac-section { padding: var(--ac-pad-y) 0; background: var(--ac-bone); color: var(--ac-ink); }
/* Elementos que entram de lado (data-reveal="right") não podem criar
   scroll horizontal antes de aparecerem. clip (e não hidden) para não
   estragar o position: sticky do FAQ. */
.ac-section, .ac-float-outer { overflow-x: clip; }
.ac-section--tight { padding: var(--ac-pad-y-s) 0; }

/* Painel escuro flutuante — não encosta às margens, cantos redondos */
.ac-float-outer { background: var(--ac-bone); padding: 40px 24px; }
.ac-float {
    position: relative;
    max-width: 1300px;
    margin: 0 auto;
    border-radius: var(--ac-radius-l);
    overflow: hidden;
    background: var(--ac-ink);
    color: var(--ac-bone);
    /* sobe e cresce ligeiramente ao entrar no ecrã (--p vem do JS) */
    transform: scale(calc(.955 + .045 * min(1, var(--p, 1) * 2.4)));
    transform-origin: center top;
    will-change: transform;
}
@media (max-width: 560px) {
    .ac-float-outer { padding: 24px 16px; }
    .ac-float { border-radius: 20px; }
}

/* ── Títulos ────────────────────────────────────────────────── */

.ac-h2 {
    font-size: clamp(28px, 3.6vw, 42px);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -.022em;
    margin: 0 0 14px;
    color: var(--ac-ink);
}
.ac-on-dark .ac-h2 { color: #fff; }

/* Palavra em destaque: degradé recortado no texto, como no template */
.ac-grad-text,
.ac-h2 > span,
.ac-h2 > em {
    font-style: normal;
    font-weight: 700;
    background-image: var(--ac-grad-text);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.ac-lead {
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--ac-muted);
    margin: 0;
    max-width: 68ch;
}
.ac-on-dark .ac-lead { color: var(--ac-muted-d); }

/* ── Sobrescrito: // TÍTULO ─────────────────────────────────── */
.ac-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ac-ink);
    margin: 0 0 20px;
}
.ac-eyebrow::before {
    content: '//';
    font-weight: 800;
    letter-spacing: -.08em;
    background-image: var(--ac-grad-text);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ac-on-dark .ac-eyebrow { color: var(--ac-bone); }

/* ── Cartão ─────────────────────────────────────────────────── */

.ac-card {
    background: #fff;
    border: 1px solid var(--ac-line);
    border-radius: var(--ac-radius);
    padding: 32px 30px;
    min-width: 0;
}
.ac-on-dark .ac-card {
    background: rgba(242, 241, 237, .05);
    border-color: rgba(242, 241, 237, .12);
}

/* Visto num disco — verde escuro, para não somar mais um verde claro */
.ac-tick {
    flex: 0 0 auto;
    width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ac-ink); color: #fff;
    margin-top: 1px;
}
.ac-tick svg { width: 12px; height: 12px; }

/* ── Botões ─────────────────────────────────────────────────────
   - o degradé desliza ao passar o rato (como o btn-default)
   - a seta sobe na diagonal
   - um brilho atravessa o botão
   - o JS acrescenta o efeito magnético (--mx / --my)
   ─────────────────────────────────────────────────────────────── */
.ac-btn {
    --lift: 0px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: inherit;
    font-size: 15.5px;
    font-weight: 700;
    text-decoration: none;
    border: 1.5px solid transparent;
    border-radius: 999px;
    padding: 15px 30px;
    cursor: pointer;
    transform: translate(var(--mx, 0px), calc(var(--my, 0px) + var(--lift)));
    transition: transform .35s var(--ac-ease), background-position .55s ease,
                color .25s, border-color .25s, box-shadow .35s;
}
.ac-btn:hover { --lift: -2px; }
.ac-btn:focus-visible { outline: 3px solid var(--ac-sage); outline-offset: 3px; }

/* Seta — desenhada em CSS para não ter de mexer no HTML de cada botão */
.ac-btn--accent::after,
.ac-btn--solid::after {
    content: '';
    width: 13px; height: 13px; flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .35s var(--ac-ease);
}
.ac-btn:hover::after { transform: translate(3px, -3px); }

/* Brilho que atravessa */
.ac-btn--accent::before,
.ac-btn--solid::before {
    content: '';
    position: absolute; z-index: -1;
    top: 0; bottom: 0; left: -60%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
    transform: skewX(-20deg);
    transition: left .7s ease;
}
.ac-btn:hover::before { left: 120%; }

.ac-btn--accent {
    color: #fff;
    background-image: var(--ac-grad);
    background-size: 200% auto;
    background-position: left center;
}
.ac-btn--accent:hover {
    color: #fff;
    background-position: right center;
    box-shadow: 0 12px 26px -12px rgba(53, 161, 95, .65);
}

.ac-btn--solid { background: var(--ac-ink); color: var(--ac-bone); }
.ac-btn--solid:hover { color: #fff; box-shadow: 0 12px 26px -14px rgba(16, 35, 2, .8); }

.ac-btn--ghost  { background: transparent; border-color: var(--ac-line); color: var(--ac-ink); }
.ac-btn--ghost:hover { border-color: var(--ac-ink); color: var(--ac-ink); }
.ac-on-dark .ac-btn--ghost { border-color: rgba(242, 241, 237, .34); color: var(--ac-bone); }
.ac-on-dark .ac-btn--ghost:hover { border-color: #fff; color: #fff; }

/* ── Grelha ─────────────────────────────────────────────────── */
/* minmax(0,1fr) em vez de 1fr: senão conteúdo comprido estica a
   coluna e os cartões da direita saem do container.             */

.ac-grid { display: grid; gap: 24px; }
.ac-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ac-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ac-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1040px) {
    .ac-grid--3, .ac-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    .ac-grid--2, .ac-grid--3, .ac-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ── Entradas ao entrar no ecrã ─────────────────────────────────
   O JS põe .is-in. Variantes com data-reveal:
     (nenhum)  sobe            left / right  vem do lado
     scale     cresce          mask          sobe de dentro de uma máscara (títulos)
     wipe      a imagem destapa-se da esquerda para a direita
   Usa as propriedades translate/scale (e não transform) para não
   colidir com os efeitos de hover e o íman dos botões, que usam
   transform. Só esconde com html.ac-js, para o conteúdo nunca ficar
   invisível sem JS.
   ─────────────────────────────────────────────────────────────── */
.ac-js .ac-reveal {
    opacity: 0;
    translate: 0 22px;
    transition: opacity .7s var(--ac-ease), translate .8s var(--ac-ease),
                scale .8s var(--ac-ease), clip-path 1s var(--ac-ease);
    transition-delay: var(--ac-delay, 0s);
}
.ac-js .ac-reveal[data-reveal="left"]  { translate: -34px 0; }
.ac-js .ac-reveal[data-reveal="right"] { translate: 34px 0; }
.ac-js .ac-reveal[data-reveal="scale"] { translate: none; scale: .92; }
.ac-js .ac-reveal[data-reveal="mask"]  { translate: 0 36px; clip-path: inset(0 0 100% 0); }
.ac-js .ac-reveal[data-reveal="wipe"]  {
    opacity: 1; translate: none;
    clip-path: inset(0 100% 0 0 round var(--ac-radius));
    transition-duration: .7s, .8s, .8s, 1.2s;
}

.ac-js .ac-reveal.is-in { opacity: 1; translate: none; scale: none; }
.ac-js .ac-reveal[data-reveal="mask"].is-in { clip-path: inset(-10% -4% -18% -4%); }
.ac-js .ac-reveal[data-reveal="wipe"].is-in { clip-path: inset(0 0 0 0 round var(--ac-radius)); }

/* ── Movimento reduzido ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ac-js .ac-reveal,
    .ac-js .ac-reveal[data-reveal] { opacity: 1; translate: none; scale: none; clip-path: none; transition: none; }
    .ac-btn, .ac-btn::after, .ac-btn::before { transition: none; }
    .ac-btn { transform: none; }
    .ac-float { transform: none; }
}