/* ==========================================================================
   Acabamento profissional do site público (Hackathon Nossa Seguros)

   Carregado DEPOIS de style_1.css / acrescimo.css. Só acrescenta: não muda a
   estrutura, as cores nem as ilustrações do Webflow. A paleta da casa é
   mantida:
       azul   #033c77   (nav, rodapé, painéis)
       verde  #9bc31a   (destaques, contador)
   Regra de ouro: sem `transform` nos blocos animados pelo Webflow (o JS
   escreve transforms inline e entraria em conflito); aqui só se usam
   cores, sombras e transições.
   ========================================================================== */

:root {
    --nossa-azul: #033c77;
    --nossa-azul-escuro: #022a55;
    --nossa-verde: #9bc31a;
    --nossa-verde-escuro: #7ea212;
    --nossa-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---- Base ---------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
    /* Barra de rolagem discreta nas cores da casa */
    scrollbar-color: var(--nossa-azul) #eef2f7;
    scrollbar-width: thin;
}

body {
    /* Tipo de letra limpo e legível; cai para a pilha do sistema se a web
       font não carregar. Os títulos decorativos (Blatant) mantêm a sua
       família própria, definida por classe no CSS original. */
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--nossa-verde);
    color: #fff;
}

/* Texto corrido: respiro e medida confortáveis, sem alterar tamanhos. */
p {
    line-height: 1.65;
}

/* Títulos grandes: ligeiro aperto de letras, como nos sites institucionais. */
.heading-xlarge,
.heading-large {
    letter-spacing: -.01em;
}

/* ---- Navegação ----------------------------------------------------------- */
.nav_component {
    /* Profundidade suave: separa a barra do conteúdo ao rolar. */
    box-shadow: 0 2px 14px rgba(2, 42, 85, .28);
}

.nav_link,
.account-link {
    transition: background-color .25s var(--nossa-ease),
                background-image .25s var(--nossa-ease),
                color .25s var(--nossa-ease);
}

/* ---- Acessibilidade: foco visível na cor da casa ------------------------- */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.w-tab-link:focus-visible {
    outline: 2px solid var(--nossa-verde);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ---- Formulários (login, registo, contacto) ------------------------------ */
input,
select,
textarea {
    transition: border-color .2s var(--nossa-ease), box-shadow .2s var(--nossa-ease);
}

/* Foco verde da casa. Os campos Bootstrap (.form-control / .form-select),
   como os do modal "Meus dados", têm o seu próprio foco azul e ficam de fora. */
input:not(.form-control):not(.form-select):focus,
select:not(.form-control):not(.form-select):focus,
textarea:not(.form-control):not(.form-select):focus {
    border-color: var(--nossa-verde) !important;
    box-shadow: 0 0 0 3px rgba(155, 195, 26, .3);
}

/* ---- Rodapé -------------------------------------------------------------- */
/* Sobre o azul do rodapé o placeholder cinzento-escuro quase não se lia. */
.footer_component ::placeholder {
    color: rgba(255, 255, 255, .72);
    opacity: 1;
}

/* ---- Movimento reduzido: respeita a preferência do sistema --------------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* ==========================================================================
   Hero da página inicial: ilustração a traço do desafio ativo
   ========================================================================== */
.section-home-hero .home-hero-ilustracao {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(46%, 820px);
    height: 100%;
    z-index: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    pointer-events: none;
}

.section-home-hero .home-hero-ilustracao img,
.section-home-hero .home-hero-ilustracao svg {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: right bottom;
    opacity: .95;
}

/* O conteúdo (logótipo, título) fica sempre por cima do desenho. */
.section-home-hero .page-padding {
    position: relative;
    z-index: 1;
}

@media (max-width: 1199px) {
    .section-home-hero .home-hero-ilustracao {
        width: min(52%, 640px);
    }
    .section-home-hero .home-hero-ilustracao img,
    .section-home-hero .home-hero-ilustracao svg {
        opacity: .85;
    }
}

/* Telemóvel: o desenho passa a marca de água atrás do texto. */
@media (max-width: 767px) {
    .section-home-hero .home-hero-ilustracao {
        width: 100%;
        justify-content: center;
    }
    .section-home-hero .home-hero-ilustracao img,
    .section-home-hero .home-hero-ilustracao svg {
        opacity: .16;
        object-position: center bottom;
    }
}


/* --- Animação sutil da ilustração (rodas, plantas, folhas) ----------------- */
.home-hero-ilustracao-svg .ilu-anim {
    animation-duration: var(--dur, 6s);
    animation-delay: var(--atraso, 0s);
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

/* Roda: gira o aro, a velocidade constante. Origem no centro (já transladado). */
.home-hero-ilustracao-svg .ilu-giro {
    transform-origin: 0 0;
    animation-timing-function: linear;
}
.home-hero-ilustracao-svg .ilu-giro--anti { animation-name: ilu-giro-anti; }
.home-hero-ilustracao-svg .ilu-giro--horario { animation-name: ilu-giro-horario; }

/* Planta: oscila presa à raiz (a origem fica na base). */
.home-hero-ilustracao-svg .ilu-balanco { animation-name: ilu-balanco; }

/* Folha solta: sobe e desce com uma rotação leve. */
.home-hero-ilustracao-svg .ilu-flutuar { animation-name: ilu-flutuar; }

@keyframes ilu-giro-anti    { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes ilu-giro-horario { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@keyframes ilu-balanco {
    0%, 100% { transform: skewX(calc(var(--amp, 1) * -1deg)); }
    50%      { transform: skewX(calc(var(--amp, 1) * 1deg)); }
}

@keyframes ilu-flutuar {
    0%, 100% { transform: translate(0, 0) rotate(calc(var(--amp, 5) * -1deg)); }
    50%      { transform: translate(calc(var(--amp, 5) * .4px), calc(var(--amp, 5) * -1px)) rotate(calc(var(--amp, 5) * 1deg)); }
}

/* Fora do ecrã: em pausa. */
.home-hero-ilustracao.ilu-pausada .ilu-anim { animation-play-state: paused; }

/* Quem pediu menos movimento no sistema fica com o desenho parado. */
@media (prefers-reduced-motion: reduce) {
    .home-hero-ilustracao-svg .ilu-anim { animation: none !important; }
}

/* ---------- Barra verde: separador Organização / Apoio (canto inferior direito) ---------- */
.green-bar-timer { position: relative; }
.green-bar-timer.com-apoios { min-height: 240px; height: auto; padding-bottom: 66px; box-sizing: border-box; }

.barra-apoios {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 9px 22px 9px 34px;
    background: #0e2947;
    border-radius: 18px 0 0 0;
    box-shadow: -2px -2px 10px rgba(0, 0, 0, .12);
    max-width: 100%;
}
.barra-apoios-grupo {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.barra-apoios-rotulo {
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.barra-apoios-logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
.barra-apoios-logo img {
    display: block;
    height: 42px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    /* garante logótipo branco mesmo em ficheiros antigos/SVG (mantém a transparência) */
    filter: brightness(0) invert(1);
}
a.barra-apoios-logo { transition: opacity .2s ease; }
a.barra-apoios-logo:hover { opacity: .75; }

@media (max-width: 767px) {
    .barra-apoios {
        left: 0;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 18px;
        padding: 8px 12px;
        border-radius: 14px 14px 0 0;
    }
    .green-bar-timer.com-apoios { padding-bottom: 120px; min-height: 290px; }
    .barra-apoios-logo img { height: 32px; max-width: 100px; }
}

/* O selo fixo do Webflow repete a marca Nossa Seguros e tapava os logótipos da faixa de apoios. */
.w-webflow-badge { display: none !important; }

/* ---------- Satélite a traço branco em órbita por cima do trator ----------
   Duas oscilações sinusoidais desfasadas de um quarto de ciclo (X e Y) desenham uma
   elipse; a escala varia com Y (mais perto = maior) e o satélite inclina-se ao andar. */
.section-home-hero .home-hero-ilustracao .hero-satelite {
    --orbita: 12s; /* tempo de uma volta completa */
    position: absolute;
    left: 30%;
    top: 15%;
    width: clamp(96px, 9vw, 150px);
    pointer-events: none;
}
.hero-satelite-x,
.hero-satelite-y {
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: cubic-bezier(.37, 0, .63, 1); /* ease-in-out seno */
    animation-duration: calc(var(--orbita) / 2);
}
.hero-satelite-x { animation-name: satelite-x; }
.hero-satelite-y {
    animation-name: satelite-y;
    animation-delay: calc(var(--orbita) / -4);
}
.section-home-hero .home-hero-ilustracao .hero-satelite img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    opacity: 1;
    filter: drop-shadow(0 0 .6px #fff) drop-shadow(0 0 .6px #fff);
    animation: satelite-inclinar calc(var(--orbita) / 2) cubic-bezier(.37, 0, .63, 1) infinite alternate;
}
@keyframes satelite-x {
    from { transform: translateX(-130%); }
    to   { transform: translateX(130%); }
}
@keyframes satelite-y {
    from { transform: translateY(-55%) scale(.8); }
    to   { transform: translateY(55%) scale(1.12); }
}
@keyframes satelite-inclinar {
    from { transform: rotate(-9deg); }
    to   { transform: rotate(9deg); }
}
.home-hero-ilustracao.ilu-pausada .hero-satelite-x,
.home-hero-ilustracao.ilu-pausada .hero-satelite-y,
.home-hero-ilustracao.ilu-pausada .hero-satelite img { animation-play-state: paused; }
@media (max-width: 767px) {
    .section-home-hero .home-hero-ilustracao .hero-satelite { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-satelite-x,
    .hero-satelite-y,
    .section-home-hero .home-hero-ilustracao .hero-satelite img { animation: none; }
}

/* O selo fixo do Webflow repete a marca Nossa Seguros e tapava os logótipos da faixa de apoios. */
.w-webflow-badge { display: none !important; }

/* ---------- Satélite a traço branco por cima do trator ---------- */
.section-home-hero .home-hero-ilustracao .hero-satelite {
    position: absolute;
    left: 14%;
    top: 15%;
    width: clamp(96px, 9vw, 150px);
    pointer-events: none;
    animation: satelite-pairar 9s ease-in-out infinite;
}
.section-home-hero .home-hero-ilustracao .hero-satelite img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    opacity: 1;
    filter: drop-shadow(0 0 .6px #fff) drop-shadow(0 0 .6px #fff);
}
@keyframes satelite-pairar {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5px, -6px) rotate(2.5deg); }
}
.home-hero-ilustracao.ilu-pausada .hero-satelite { animation-play-state: paused; }
@media (max-width: 767px) {
    .section-home-hero .home-hero-ilustracao .hero-satelite { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .section-home-hero .home-hero-ilustracao .hero-satelite { animation: none; }
}