/* ==========================================================================
   Hover próximo da cor principal (#87e64b)
   ========================================================================== */
:root {
    --fb-primary: #87e64b;
    --fb-primary-hover: #7dd642;
    /* ~6% mais escuro que a principal */
}

.hover\:bg-primary-700:hover,
.hover\:bg-primary-600:hover {
    background-color: var(--fb-primary-hover) !important;
}

/* Sombra verde dos botões no hover no mesmo tom */
.hover\:shadow-primary-600\/30:hover {
    --tw-shadow-color: rgba(135, 230, 75, 0.3) !important;
}

/* ==========================================================================
   landing.css — ajustes da landing page (sem alterar o CSS do template)
   ========================================================================== */

/* Navegação suave entre secções, sem ficar escondida atrás do menu fixo */
html {
    scroll-behavior: smooth;
}

section[id] {
    scroll-margin-top: 5.5rem;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Partículas de energia no hero */
#hero .hero-particles {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#hero>.container {
    position: relative;
    z-index: 1;
}

/* --------------------------------------------------------------------------
   Menu: igual ao hero no topo; fundo atual só depois de fazer scroll
   -------------------------------------------------------------------------- */

/* Menu transparente enquanto está no topo da página */
[data-header]:not(.is-scrolled) {
    background-color: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

[data-header] {
    transition: background-color 0.35s ease, border-color 0.35s ease,
        backdrop-filter 0.35s ease, box-shadow 0.35s ease;
}

/* O hero sobe para trás do menu (altura do menu: 4rem; 5rem em ecrãs grandes) */
#hero {
    margin-top: -4rem;
    padding-top: 4rem;
}

@media (min-width: 1024px) {
    #hero {
        margin-top: -5rem;
        padding-top: 5rem;
    }
}

/* ==========================================================================
   Texto preto sobre a cor principal (verde claro)
   ========================================================================== */

/* Botões, badges, número dos passos, botão "voltar ao topo", etc. */
.bg-primary-500:not(section),
.bg-primary-600:not(section),
.bg-primary-700:not(section),
.hover\:bg-primary-700:hover,
.focus\:bg-primary-600:focus {
    color: #000 !important;
}

/* Secções com fundo verde (Impact e "Ready to Go Solar?") no modo claro */
html:not(.dark) section.bg-primary-600,
html:not(.dark) section.bg-primary-600 .text-white,
html:not(.dark) section.bg-primary-600 .text-primary-100 {
    color: #000 !important;
}

/* Botão branco e botão com contorno dentro dessas secções */
html:not(.dark) section.bg-primary-600 .bg-white {
    color: #000 !important;
}

html:not(.dark) section.bg-primary-600 .border-white\/30 {
    border-color: rgba(0, 0, 0, 0.25) !important;
}

/* ==========================================================================
   Cantos arredondados: 8px em todo o site
   ========================================================================== */
.rounded,
.rounded-sm,
.rounded-md,
.rounded-lg,
.rounded-xl,
.rounded-2xl,
.rounded-3xl,
input,
select,
textarea,
button:not(.rounded-full) {
    border-radius: 6px !important;
}

/* Título do hero: a frase animada nunca quebra de linha */
#hero [data-typewriter] {
    white-space: nowrap;
}

/* Em telemóveis estreitos, o título encolhe um pouco para caber */
@media (max-width: 480px) {
    #hero h1 {
        font-size: 2rem;
    }
}


/* Spinner do carregamento: manter sempre um anel perfeito */
#preloader>div {
    flex: none;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
}

.rounded-full:not(.h-2):not(.w-2):not(.animate-spin):not(.animate-ping) {
    border-radius: 6px !important;
}

/* Submenu "Produtos": abre também com o teclado (Tab) */
[data-header] .group:focus-within>.invisible {
    visibility: visible;
    opacity: 1;
}

/* ==========================================================================
   Hero: imagem da fieldbox no lado direito
   ========================================================================== */
.hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
    padding-bottom: 2.5rem;
    /* espaço para a sombra no chão */
}

/* Computador: a caixa encosta à direita */
@media (min-width: 1024px) {
    .hero-visual {
        justify-content: flex-end;
    }
}

/* Camada que inclina em 3D com o rato (js/hero-tilt.js) */
.hero-visual picture {
    position: relative;
    z-index: 1;
    display: block;
    width: min(100%, 420px);
    transform-style: preserve-3d;
    will-change: transform;
}

.hero-visual img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.35));
    animation: hero-box-float 6s ease-in-out infinite;
}

/* Sombra no chão: encolhe e clareia quando a caixa sobe */
.hero-visual::after {
    content: "";
    position: absolute;
    bottom: 0.75rem;
    width: min(80%, 340px);
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 70%);
    filter: blur(4px);
    animation: hero-box-shadow 6s ease-in-out infinite;
    pointer-events: none;
}

@media (min-width: 1024px) {
    .hero-visual::after {
        right: calc(min(100%, 420px) / 2 - min(80%, 340px) / 2 + 0.5rem);
    }
}

html:not(.dark) .hero-visual::after {
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0) 70%);
}

@keyframes hero-box-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-16px);
    }
}

@keyframes hero-box-shadow {

    0%,
    100% {
        transform: scaleX(1);
        opacity: 1;
    }

    50% {
        transform: scaleX(0.82);
        opacity: 0.6;
    }
}

@media (prefers-reduced-motion: reduce) {

    .hero-visual img,
    .hero-visual::after {
        animation: none;
    }
}

/* Telemóvel/tablet: por baixo do texto, centrada e mais pequena */
@media (max-width: 1023px) {
    .hero-visual picture {
        width: min(75%, 320px);
    }

    .hero-visual::after {
        width: min(60%, 260px);
    }
}

/* ==========================================================================
   Hero: a fieldbox "a andar" no lado direito
   - entra a rolar pela direita quando a página abre
   - depois fica a "circular": pequenos solavancos da estrada + linhas de velocidade
   - inclina em 3D com o rato (js/hero-tilt.js)
   ========================================================================== */
.hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
    padding-bottom: 2.5rem;
}

@media (min-width: 1024px) {
    .hero-visual {
        justify-content: flex-end;
    }
}

/* Conjunto que se desloca: caixa + sombra + linhas de velocidade */
.hero-visual__drive {
    position: relative;
    width: min(100%, 420px);
    animation: hero-drive-in 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s both;
}

/* Camada que inclina com o rato */
.hero-visual picture {
    position: relative;
    z-index: 1;
    display: block;
    transform-style: preserve-3d;
    will-change: transform;
}

/* Solavancos da estrada */
.hero-visual img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.35));
    transform-origin: 50% 90%;
    animation: hero-road 0.9s linear infinite;
}

/* Sombra no chão */
.hero-visual__drive::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -1.25rem;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 70%);
    filter: blur(4px);
    animation: hero-road-shadow 0.9s linear infinite;
    pointer-events: none;
}

html:not(.dark) .hero-visual__drive::after {
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0) 70%);
}

/* Linhas de velocidade atrás da caixa (neutras, sem cor) */
.hero-visual__speed {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.hero-visual__speed i {
    position: absolute;
    left: 88%;
    width: 45%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(170, 180, 195, 0.8), rgba(160, 170, 185, 0));
    opacity: 0;
    animation: hero-speed 1.2s linear infinite;
}

html:not(.dark) .hero-visual__speed i {
    background: linear-gradient(90deg, rgba(60, 70, 85, 0.5), rgba(60, 70, 85, 0));
}

.hero-visual__speed i:nth-child(1) {
    top: 42%;
    animation-delay: 0s;
}

.hero-visual__speed i:nth-child(2) {
    top: 58%;
    animation-delay: 0.4s;
    width: 35%;
}

.hero-visual__speed i:nth-child(3) {
    top: 74%;
    animation-delay: 0.8s;
}

.hero-visual__speed i:nth-child(4) {
    top: 88%;
    animation-delay: 0.2s;
    width: 28%;
}

/* ---- Animações ---- */
@keyframes hero-drive-in {
    0% {
        transform: translateX(120%) rotate(-2deg);
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    75% {
        transform: translateX(-3%) rotate(1deg);
    }

    100% {
        transform: translateX(0) rotate(0);
        opacity: 1;
    }
}

@keyframes hero-road {

    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    20% {
        transform: translateY(-3px) rotate(-0.4deg);
    }

    40% {
        transform: translateY(0) rotate(0);
    }

    60% {
        transform: translateY(-1.5px) rotate(0.3deg);
    }

    80% {
        transform: translateY(0) rotate(0);
    }
}

@keyframes hero-road-shadow {

    0%,
    100% {
        transform: scaleX(1);
        opacity: 1;
    }

    20% {
        transform: scaleX(0.96);
        opacity: 0.85;
    }

    60% {
        transform: scaleX(0.98);
        opacity: 0.92;
    }
}

@keyframes hero-speed {
    0% {
        transform: translateX(-15%) scaleX(0.3);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        transform: translateX(70%) scaleX(1);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    .hero-visual__drive,
    .hero-visual img,
    .hero-visual__drive::after {
        animation: none;
    }

    .hero-visual__speed {
        display: none;
    }
}

/* Telemóvel/tablet: por baixo do texto, centrada e mais pequena */
@media (max-width: 1023px) {
    .hero-visual__drive {
        width: min(75%, 320px);
    }
}

/* ==========================================================================
   Secção "Quem somos" — clean, dentro das margens do site
   ========================================================================== */
.fb-about__grid {
    display: grid;
    gap: 2.5rem;
    margin-top: 3.5rem;
}

@media (min-width: 1024px) {
    .fb-about__grid {
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 4rem;
    }
}

/* Imagem: tamanho contido, respeita as margens */
.fb-about__media {
    position: relative;
    aspect-ratio: 4 / 3;
    max-height: 320px;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.fb-about__media img {
    position: absolute;
    left: 0;
    top: -8%;
    display: block;
    width: 100%;
    height: 50%;
    object-fit: cover;
    will-change: transform;
}

/* Texto */
.fb-about__text>p {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.75;
    color: #4b5563;
}

.dark .fb-about__text>p {
    color: #9ca3af;
}

.fb-about__facts {
    margin: 1.75rem 0 0;
}

.fb-about__facts>div {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 1rem;
    padding: 0.85rem 0;
    border-top: 1px solid rgba(17, 24, 39, 0.1);
}

.dark .fb-about__facts>div {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.fb-about__facts dt {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #4d8f25;
}

.dark .fb-about__facts dt {
    color: #87e64b;
}

.fb-about__facts dd {
    margin: 0;
    color: #374151;
}

.dark .fb-about__facts dd {
    color: #d1d5db;
}

/* Link com linha */
.fb-link {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: 1.5rem;
    font-weight: 600;
    color: #111827;
}

.dark .fb-link {
    color: #ffffff;
}

.fb-link::before {
    content: "";
    width: 2.5rem;
    height: 2px;
    background: #87e64b;
    transition: width 0.3s ease;
}

.fb-link:hover::before {
    width: 4rem;
}

@media (max-width: 639px) {
    .fb-about__facts>div {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }
}

/* ==========================================================================
   Efeitos de entrada ao fazer scroll (js/reveal.js)
   ========================================================================== */
.fb-js .fb-reveal {
    opacity: 0;
    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.fb-js .fb-reveal--up {
    transform: translateY(40px);
    transition-delay: 0.3s;
}

/* A imagem é revelada da direita para a esquerda */
.fb-js .fb-reveal--wipe {
    opacity: 1;
}

.fb-js .fb-reveal--wipe>img {
    clip-path: inset(0 0 0 100%);
    transition: clip-path 1.3s cubic-bezier(0.7, 0, 0.2, 1) 0.1s;
}

.fb-js .fb-reveal--wipe.is-visible>img {
    clip-path: inset(0 0 0 0);
}

.fb-js .fb-reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {

    .fb-js .fb-reveal,
    .fb-js .fb-reveal--wipe>img {
        opacity: 1;
        transform: none;
        clip-path: none;
        transition: none;
    }
}

/* ==========================================================================
   Cores das secções (modo escuro)
   Cada secção com a sua cor sólida, alternando tons claros e escuros
   da mesma família para separar bem as secções.
   ========================================================================== */
.dark {
    --sec-stats: #030712;
    /* verde-acinzentado      */
    --sec-about: #0a120f;
    /* verde-noite (escuro)   */
    --sec-services: #111a24;
    /* azul-ardósia           */
    --sec-products: #0b1511;
    /* verde profundo         */
    --sec-impact: #14301b;
    /* verde marca (destaque) */
    --sec-financing: #0f1620;
    /* azul-noite             */
    --sec-process: #0b120f;
    /* verde-noite            */
    --sec-testimonials: #121b22;
    /* ardósia                */
    --sec-cta: #16331d;
    /* verde marca (destaque) */
    --sec-faq: #111a20;
    /* ardósia escura         */
    --sec-contact: #0a120f;
    /* verde-noite            */
}

/* Onda por baixo do hero com a cor da secção seguinte */
.dark #hero+div {
    color: var(--sec-stats) !important;
}

.dark #stats {
    background: var(--sec-stats) !important;
}

.dark #about {
    background: var(--sec-about) !important;
}

.dark #services {
    background: var(--sec-services) !important;
}

.dark #products {
    background: var(--sec-products) !important;
}

.dark #impact {
    background: var(--sec-impact) !important;
}

.dark #financing {
    background: var(--sec-financing) !important;
}

.dark #process {
    background: var(--sec-process) !important;
}

.dark #testimonials {
    background: var(--sec-testimonials) !important;
}

.dark section.bg-primary-600:not(#impact) {
    background: var(--sec-cta) !important;
}

.dark #faq {
    background: var(--sec-faq) !important;
}

.dark #contact {
    background: var(--sec-contact) !important;
}

/* ==========================================================================
   Títulos das secções alinhados à esquerda (todas as secções)
   ========================================================================== */
main section .max-w-3xl.text-center {
    margin-left: 0;
    margin-right: auto;
    text-align: left;
}

/* Faixa "Ready to Go Solar?" (texto, parágrafo e botões) */
main section .container.text-center {
    text-align: left;
}

main section .container.text-center>p.mx-auto {
    margin-left: 0;
}

main section .container.text-center>.justify-center {
    justify-content: flex-start;
}


.fb-about__media img {
    position: absolute;
    left: 0;
    top: -4%;
    display: block;
    width: 100%;
    height: 108%;
    /* menos zoom (antes: 116%) */
    object-fit: cover;
    object-position: 70% 60%;
    /* foca a caixa, que está à direita na foto */
    will-change: transform;
}

.text-uppercase {
    text-transform: uppercase !important;
}

/* ==========================================================================
   Título do hero em maiúsculas: tamanho e espaçamento
   ========================================================================== */
#hero h1 {
    font-size: clamp(2.1rem, 4.1vw, 3.1rem) !important;
    line-height: 1.12 !important;
    letter-spacing: 0.01em;
}

/* Espaço extra entre a primeira linha e a linha animada */
#hero h1 [data-typewriter] {
    display: inline-block;
    margin-top: 0.15em;
}

/* Telemóveis estreitos */
@media (max-width: 480px) {
    #hero h1 {
        font-size: 1.65rem !important;
    }
}

/* ==========================================================================
   "Quem somos": texto longo organizado + imagem fixa ao lado
   ========================================================================== */
@media (min-width: 1024px) {
    .fb-about__grid {
        grid-template-columns: 5fr 6fr;
        align-items: start;
    }

    /* A imagem acompanha a leitura enquanto o texto passa */
    .fb-about__media {
        position: sticky;
        top: 7rem;
    }
}

.fb-about__media {
    aspect-ratio: 4 / 5;
    max-height: none;
}

/* Parágrafos com espaço entre eles */
.fb-about__text>p {
    margin: 0 0 1.1rem;
}

/* Frase de abertura em destaque */
.fb-about__text>p.fb-about__lead {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.45;
    color: #111827;
}

.dark .fb-about__text>p.fb-about__lead {
    color: #ffffff;
}

/* Frase final com barra verde */
.fb-about__text>p.fb-about__quote {
    margin-top: 1.75rem;
    padding-left: 1rem;
    border-left: 3px solid #87e64b;
    font-size: 1.15rem;
    font-weight: 600;
    color: #111827;
}

.dark .fb-about__text>p.fb-about__quote {
    color: #ffffff;
}

/* Missão / Visão / Compromisso: rótulo em cima, texto por baixo */
.fb-about__facts>div {
    grid-template-columns: 1fr;
    gap: 0.4rem;
    padding: 1.1rem 0;
}

.fb-about__facts dd {
    line-height: 1.65;
    color: #4b5563;
}

.dark .fb-about__facts dd {
    color: #9ca3af;
}

.fb-about__facts dd strong {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 600;
    color: #111827;
}

.dark .fb-about__facts dd strong {
    color: #ffffff;
}

/* ==========================================================================
   Manifesto: "Onde não há tomada, há FieldBox."
   ========================================================================== */
.fb-quote {
    position: relative;
    overflow: hidden;
    padding: 7rem 0;
    background: #f4faf0;
}

/* Modo escuro: mesma cor do fim de "Quem somos" e do início de "Serviços" */
.dark .fb-quote {
    background: var(--s2, #0a1a14) !important;
}

/* Símbolo da marca gigante e quase invisível, a rodar devagar */
.fb-quote__icon {
    position: absolute;
    right: -4rem;
    top: 50%;
    width: clamp(16rem, 32vw, 28rem);
    height: auto;
    opacity: 0.06;
    transform: translateY(-50%);
    animation: fb-quote-spin 60s linear infinite;
    pointer-events: none;
    user-select: none;
}

@keyframes fb-quote-spin {
    from {
        transform: translateY(-50%) rotate(0deg);
    }

    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

.fb-quote__inner {
    position: relative;
    z-index: 1;
    max-width: 56rem;
    margin: 0;
}

/* Aspas grandes decorativas */
.fb-quote__mark {
    position: absolute;
    left: -0.6rem;
    top: -5rem;
    font-size: 12rem;
    font-weight: 800;
    line-height: 1;
    color: #87e64b;
    opacity: 0.18;
    pointer-events: none;
    user-select: none;
}

.fb-quote blockquote {
    margin: 0;
}

.fb-quote__main {
    margin: 0;
    font-size: clamp(2rem, 4.5vw, 3.75rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #111827;
}

.fb-quote__main span {
    color: #4d8f25;
}

.dark .fb-quote__main {
    color: #ffffff;
}

.dark .fb-quote__main span {
    color: #87e64b;
}

.fb-quote__sub {
    max-width: 46rem;
    margin: 1.25rem 0 0;
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    line-height: 1.5;
    color: #4b5563;
}

.dark .fb-quote__sub {
    color: #9ca3af;
}

.fb-quote figcaption {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: 2.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6b7280;
}

.fb-quote figcaption::before {
    content: "";
    width: 2.5rem;
    height: 2px;
    background: #87e64b;
}

/* Entrada escalonada: frase principal, subtítulo, assinatura */
.fb-js .fb-quote .fb-reveal {
    transition-delay: 0s;
}

.fb-js .fb-quote .fb-quote__sub.fb-reveal {
    transition-delay: 0.2s;
}

.fb-js .fb-quote figcaption.fb-reveal {
    transition-delay: 0.4s;
}

@media (prefers-reduced-motion: reduce) {
    .fb-quote__icon {
        animation: none;
    }
}

@media (max-width: 767px) {
    .fb-quote {
        padding: 5rem 0;
    }

    .fb-quote__mark {
        top: -3.5rem;
        font-size: 8rem;
    }
}

/* ==========================================================================
   "Quem somos": novo texto + manifesto integrado
   ========================================================================== */
@media (min-width: 1024px) {
    .fb-about__grid {
        align-items: center;
    }

    /* Texto mais curto: a imagem já não precisa de ficar fixa */
    .fb-about__media {
        position: relative;
        top: auto;
    }
}

/* "Solar. Móvel. Pronta para trabalhar." */
.fb-about__text>p.fb-about__tagline {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #4d8f25;
}

.dark .fb-about__text>p.fb-about__tagline {
    color: #87e64b;
}

/* Manifesto */
.fb-about__manifesto {
    margin: 1.5rem 0 0;
    padding-left: 1.25rem;
    border-left: 3px solid #87e64b;
}

.fb-about__manifesto-main {
    margin: 0;
    font-size: clamp(1.6rem, 2.6vw, 2.25rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: #111827;
}

.fb-about__manifesto-main span {
    color: #4d8f25;
}

.dark .fb-about__manifesto-main {
    color: #ffffff;
}

.dark .fb-about__manifesto-main span {
    color: #87e64b;
}

.fb-about__manifesto-sub {
    margin: 0.75rem 0 0;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #4b5563;
}

.dark .fb-about__manifesto-sub {
    color: #9ca3af;
}

/* Missão / Visão / Compromisso curtos: rótulo à esquerda, texto à direita */
.fb-about__facts {
    margin-top: 2.25rem;
}

.fb-about__facts>div {
    grid-template-columns: 8rem 1fr;
    gap: 1rem;
    padding: 1rem 0;
}

.fb-about__facts dd {
    font-weight: 500;
    color: #111827;
}

.dark .fb-about__facts dd {
    color: #e5e7eb;
}

@media (max-width: 639px) {
    .fb-about__facts>div {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}

/* ==========================================================================
   Produtos: texto justificado e cartões alinhados
   ========================================================================== */

/* Descrição justificada */
#products .p-6>p.mt-2 {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* Cartões com a mesma altura e os indicadores sempre alinhados em baixo */
#products .group {
    display: flex;
    flex-direction: column;
}

#products .group>.p-6 {
    display: flex;
    flex: 1;
    flex-direction: column;
}

#products .group>.p-6>.grid {
    margin-top: auto;
    padding-top: 1.25rem;
}

/* Valores dos indicadores cabem sempre (ex.: "Personalizada") */
#products .grid-cols-3>div {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

#products .grid-cols-3 .font-bold {
    font-size: clamp(0.72rem, 1vw, 0.875rem);
    overflow-wrap: anywhere;
}

/* ==========================================================================
   Produtos — cartões sem imagem, focados nas especificações
   ========================================================================== */
.fb-prods {
    display: grid;
    gap: 1.5rem;
    margin-top: 3.5rem;
}

@media (min-width: 1024px) {
    .fb-prods {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
    }
}

.fb-js .fb-reveal.fb-prods {
    opacity: 1;
    transform: none;
}

/* ---------- Cartão ---------- */
.fb-prod {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.fb-prod:hover {
    transform: translateY(-4px);
    border-color: #b9dea0;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

.dark .fb-prod {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: none;
}

.dark .fb-prod:hover {
    border-color: rgba(135, 230, 75, 0.45);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

/* Destaque (Custom) */
.fb-prod--featured {
    border-color: #87e64b;
    background: linear-gradient(180deg, rgba(135, 230, 75, 0.1), rgba(135, 230, 75, 0) 40%), #ffffff;
}

.dark .fb-prod--featured {
    border-color: rgba(135, 230, 75, 0.6);
    background: linear-gradient(180deg, rgba(135, 230, 75, 0.12), rgba(135, 230, 75, 0.02) 45%);
}

/* Etiqueta no canto */
.fb-prod__badge {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px !important;
    background: rgba(135, 230, 75, 0.15);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #3f7a1e;
}

.dark .fb-prod__badge {
    color: #87e64b;
}

.fb-prod--featured .fb-prod__badge {
    background: #87e64b;
    color: #000 !important;
}

/* ---------- Cabeçalho ---------- */
.fb-prod__eyebrow {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #6b7280;
}

.fb-prod__name {
    margin: 0.1rem 0 0;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #111827;
}

.dark .fb-prod__name {
    color: #ffffff;
}

.fb-prod__tagline {
    margin: 0.5rem 0 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #3f7a1e;
}

.dark .fb-prod__tagline {
    color: #87e64b;
}

/* ---------- Capacidade + barra ---------- */
.fb-prod__capacity {
    margin-top: 1.75rem;
    padding: 1.25rem;
    border-radius: 8px;
    background: #f6f8f5;
}

.dark .fb-prod__capacity {
    background: rgba(255, 255, 255, 0.04);
}

.fb-prod__capacity-value {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

.fb-prod__capacity-value small {
    font-size: 1rem;
    font-weight: 700;
    color: #6b7280;
}

.dark .fb-prod__capacity-value {
    color: #ffffff;
}

.fb-prod__capacity-label {
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: #6b7280;
}

.fb-prod__bar {
    position: relative;
    height: 6px;
    margin-top: 1rem;
    border-radius: 6px !important;
    background: rgba(17, 24, 39, 0.08);
    overflow: hidden;
}

.dark .fb-prod__bar {
    background: rgba(255, 255, 255, 0.08);
}

/* A barra enche-se quando a secção aparece */
.fb-prod__bar span {
    display: block;
    width: var(--fill, 100%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #5fbf2c, #87e64b);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s;
}

.fb-prods.is-visible .fb-prod__bar span,
html:not(.fb-js) .fb-prod__bar span {
    transform: scaleX(1);
}

/* Custom: barra com faixas em movimento ("configurável") */
.fb-prod__bar--custom span {
    background: repeating-linear-gradient(-45deg, #87e64b 0 10px, #b8f28f 10px 20px);
    background-size: 200% 100%;
    animation: fb-prod-stripes 2.5s linear infinite;
}

@keyframes fb-prod-stripes {
    to {
        background-position: -56px 0;
    }
}

/* ---------- Texto e especificações ---------- */
.fb-prod__desc {
    margin: 1.25rem 0 0;
    font-size: 0.925rem;
    line-height: 1.65;
    color: #4b5563;
}

.dark .fb-prod__desc {
    color: #9ca3af;
}

.fb-prod__specs {
    margin: 1.25rem 0 0;
}

.fb-prod__specs>div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0;
    border-top: 1px solid #eef0ec;
    font-size: 0.9rem;
}

.dark .fb-prod__specs>div {
    border-top-color: rgba(255, 255, 255, 0.07);
}

.fb-prod__specs dt {
    flex: none;
    white-space: nowrap;
    color: #6b7280;
}

.fb-prod__specs dd {
    margin: 0;
    font-weight: 700;
    text-align: right;
    color: #111827;
}

.dark .fb-prod__specs dd {
    color: #ffffff;
}

/* ---------- Botão ---------- */
.fb-prod__cta {
    display: block;
    margin-top: auto;
    padding: 0.8rem 1rem;
    border: 1px solid #87e64b;
    border-radius: 8px !important;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: #3f7a1e;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* O botão fica sempre alinhado no fundo do cartão */
.fb-prod__specs+.fb-prod__cta {
    margin-top: 1.5rem;
}

.fb-prod {
    gap: 0;
}

.fb-prod__specs {
    flex: 1;
}

.dark .fb-prod__cta {
    color: #87e64b;
}

.fb-prod__cta:hover {
    background: rgba(135, 230, 75, 0.12);
}

.fb-prod__cta--solid {
    background: #87e64b;
    color: #000 !important;
}

.fb-prod__cta--solid:hover {
    background: #7dd642;
}

.fb-prods__note {
    margin: 1.5rem 0 0;
    font-size: 0.8rem;
    color: #6b7280;
}

@media (prefers-reduced-motion: reduce) {
    .fb-prod__bar span {
        transform: none;
        transition: none;
    }

    .fb-prod__bar--custom span {
        animation: none;
    }
}

/* ---------- Telemóvel ---------- */
@media (max-width: 767px) {
    .fb-prods {
        margin-top: 2rem;
        gap: 1rem;
    }

    .fb-prod {
        padding: 1.5rem 1.25rem;
    }

    .fb-prod__name {
        font-size: 1.65rem;
    }

    .fb-prod__capacity {
        margin-top: 1.25rem;
        padding: 1rem;
    }

    .fb-prod__capacity-value {
        font-size: 1.85rem;
    }

    .fb-prod__desc {
        font-size: 0.9rem;
    }
}


/* ==========================================================================
   Processo animado v2 — a energia percorre o processo do 01 ao 04
   - linha de energia que se enche e depois tem uma "faísca" a circular
   - cada passo acende quando a energia chega (círculo + texto)
   - no telemóvel vira uma linha do tempo vertical
   Ativado pelo js/reveal.js (classe .is-visible).
   ========================================================================== */
.fb-process {
    position: relative;
    --fb-step: 0.75s;
    /* tempo entre passos */
    --fb-start: 0.25s;
    /* atraso inicial */
    --fb-green: #87e64b;
}

.fb-js .fb-reveal.fb-process {
    opacity: 1;
    transform: none;
}

/* ---------- Linha de energia (computador: horizontal) ---------- */
.fb-process__track {
    position: absolute;
    pointer-events: none;
    border-radius: 3px;
    background: rgba(135, 230, 75, 0.15);
}

.fb-process__track span {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #5fbf2c, var(--fb-green) 60%, #d4f7b8);
    box-shadow: 0 0 14px rgba(135, 230, 75, 0.55);
    transform: scaleX(0);
    transform-origin: left center;
}

/* Faísca que circula depois de a linha encher */
.fb-process__track::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 10px 3px rgba(135, 230, 75, 0.9), 0 0 24px 6px rgba(135, 230, 75, 0.45);
    opacity: 0;
}

@media (min-width: 1024px) {
    .fb-process__track {
        top: calc(1.5rem - 1.5px);
        left: calc(12.5% - 0.75rem);
        right: calc(12.5% - 0.75rem);
        height: 3px;
    }

    .fb-process.is-visible .fb-process__track span {
        transform: scaleX(1);
        transition: transform calc(var(--fb-step) * 3) cubic-bezier(0.65, 0, 0.35, 1) var(--fb-start);
    }

    .fb-process.is-visible .fb-process__track::after {
        animation: fb-spark-x 2.6s cubic-bezier(0.45, 0, 0.55, 1) calc(var(--fb-start) + var(--fb-step) * 3 + 0.4s) infinite;
    }
}

@keyframes fb-spark-x {
    0% {
        left: 0;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        left: 100%;
        opacity: 0;
    }
}

/* ---------- Passos ---------- */
.fb-process__step {
    position: relative;
}

/* Número */
.fb-process__num {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1.1rem;
    border: 2px solid rgba(135, 230, 75, 0.3);
    border-radius: 50%;
    background: #ffffff;
    color: #9ca3af;
    font-size: 1.05rem;
    font-weight: 700;
}

.dark .fb-process__num {
    background: #0b120f;
    color: #6b7280;
}

/* Onda que "explode" uma vez quando o passo acende */
.fb-process__num::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid var(--fb-green);
    opacity: 0;
    pointer-events: none;
}

/* Texto do passo: começa escondido */
.fb-process__step> :not(.fb-process__num) {
    opacity: 0;
    transform: translateY(14px);
}

/* ---------- Estado aceso (só existe com a secção visível) ---------- */
.fb-process.is-visible .fb-process__num {
    border-color: var(--fb-green);
    background: var(--fb-green);
    color: #000;
    box-shadow: 0 0 0 6px rgba(135, 230, 75, 0.12), 0 0 26px rgba(135, 230, 75, 0.45);
    animation: fb-num-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.fb-process.is-visible .fb-process__num::after {
    animation: fb-num-burst 0.9s ease-out both;
}

.fb-process.is-visible .fb-process__step> :not(.fb-process__num) {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes fb-num-pop {
    0% {
        transform: scale(0.85);
    }

    60% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes fb-num-burst {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

/* ---------- Sequência: cada passo acende quando a energia chega ----------
   (nth-of-type começa em 2 porque a linha é o 1.º div do grupo) */
.fb-process__step:nth-of-type(2) {
    --d: var(--fb-start);
}

.fb-process__step:nth-of-type(3) {
    --d: calc(var(--fb-start) + var(--fb-step));
}

.fb-process__step:nth-of-type(4) {
    --d: calc(var(--fb-start) + var(--fb-step) * 2);
}

.fb-process__step:nth-of-type(5) {
    --d: calc(var(--fb-start) + var(--fb-step) * 3);
}

.fb-process.is-visible .fb-process__step .fb-process__num,
.fb-process.is-visible .fb-process__step .fb-process__num::after {
    animation-delay: var(--d);
    transition-delay: var(--d);
}

.fb-process.is-visible .fb-process__step> :nth-child(2) {
    transition-delay: calc(var(--d) + 0.15s);
}

.fb-process.is-visible .fb-process__step> :nth-child(3) {
    transition-delay: calc(var(--d) + 0.25s);
}

.fb-process.is-visible .fb-process__step> :nth-child(4) {
    transition-delay: calc(var(--d) + 0.35s);
}

/* Passar o rato: o número brilha mais */
.fb-process__step:hover .fb-process__num {
    box-shadow: 0 0 0 8px rgba(135, 230, 75, 0.18), 0 0 36px rgba(135, 230, 75, 0.6);
}

/* ---------- Telemóvel e tablet: linha do tempo vertical ---------- */
@media (max-width: 1023px) {
    .fb-process {
        grid-template-columns: 1fr !important;
        gap: 2.25rem !important;
    }

    .fb-process__track {
        top: 1.5rem;
        bottom: 1.5rem;
        left: calc(1.5rem - 1.5px);
        width: 3px;
    }

    .fb-process__track span {
        transform: scaleY(0);
        transform-origin: center top;
        background: linear-gradient(180deg, #5fbf2c, var(--fb-green) 60%, #d4f7b8);
    }

    .fb-process.is-visible .fb-process__track span {
        transform: scaleY(1);
        transition: transform calc(var(--fb-step) * 3) cubic-bezier(0.65, 0, 0.35, 1) var(--fb-start);
    }

    .fb-process__track::after {
        top: 0;
        left: 50%;
        margin: -5px 0 0 -5px;
    }

    .fb-process.is-visible .fb-process__track::after {
        animation: fb-spark-y 2.6s cubic-bezier(0.45, 0, 0.55, 1) calc(var(--fb-start) + var(--fb-step) * 3 + 0.4s) infinite;
    }

    .fb-process__step {
        padding-left: 4.5rem;
        text-align: left !important;
    }

    .fb-process__num {
        position: absolute;
        left: 0;
        top: 0;
        margin: 0;
    }
}

@keyframes fb-spark-y {
    0% {
        top: 0;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

/* ---------- Sem JavaScript ou "reduzir movimento": tudo aceso, sem animação ---------- */
html:not(.fb-js) .fb-process__step>* {
    opacity: 1;
    transform: none;
}

html:not(.fb-js) .fb-process__num {
    border-color: var(--fb-green);
    background: var(--fb-green);
    color: #000;
}

html:not(.fb-js) .fb-process__track span {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {

    .fb-process__step>*,
    .fb-process__num,
    .fb-process__track span {
        animation: none !important;
        transition: none !important;
    }

    .fb-process__track::after,
    .fb-process__num::after {
        display: none;
    }
}

/* ==========================================================================
   Faixa final (CTA): texto + fieldbox a flutuar
   ========================================================================== */
.fb-cta {
    position: relative;
    overflow: hidden;
}

/* Brilho suave por trás da imagem */
.fb-cta::before {
    content: "";
    position: absolute;
    right: -10%;
    top: 50%;
    width: 55%;
    aspect-ratio: 1;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 65%);
    pointer-events: none;
}

.dark .fb-cta::before {
    background: radial-gradient(circle, rgba(135, 230, 75, 0.18) 0%, rgba(135, 230, 75, 0) 65%);
}

/* Símbolo da marca gigante e quase invisível */
.fb-cta__mark {
    position: absolute;
    left: -6rem;
    bottom: -6rem;
    width: 22rem;
    height: auto;
    opacity: 0.06;
    pointer-events: none;
    user-select: none;
}

.fb-cta .container {
    position: relative;
    z-index: 1;
}

/* Garantias com visto */
.fb-cta__points {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.fb-cta__points li {
    position: relative;
    padding-left: 1.6rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

.fb-cta__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background: #87e64b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 65% no-repeat;
}

html:not(.dark) .fb-cta__points li {
    color: #000;
}

html:not(.dark) .fb-cta__points li::before {
    background-color: #000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2387e64b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}

/* Imagem da fieldbox a flutuar */
.fb-cta__visual {
    display: flex;
    justify-content: center;
}

.fb-cta__visual img {
    width: min(100%, 340px);
    height: auto;
    filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.35));
    animation: fb-cta-float 6s ease-in-up infinite;
    animation-timing-function: ease-in-out;
}

@keyframes fb-cta-float {

    0%,
    100% {
        transform: translateY(0) rotate(-1deg);
    }

    50% {
        transform: translateY(-14px) rotate(1deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fb-cta__visual img {
        animation: none;
    }
}

@media (max-width: 1023px) {
    .fb-cta__visual img {
        width: min(70%, 260px);
    }
}

/* ==========================================================================
   Faixa final: a fieldbox "a andar" (mesmo efeito do hero)
   A caixa só entra a rolar quando a secção aparece no ecrã.
   ========================================================================== */
.fb-js .fb-cta .hero-visual.fb-reveal {
    opacity: 1;
    /* o contentor fica visível; quem anima é a caixa */
    transform: none;
}

/* Um pouco mais pequena que no hero */
.fb-cta .hero-visual__drive {
    width: min(100%, 360px);
}

/* Antes de aparecer: fora do ecrã, à direita, e sem animações a correr */
.fb-js .fb-cta .hero-visual__drive {
    animation: none;
    opacity: 0;
    transform: translateX(120%);
}

.fb-js .fb-cta .hero-visual__drive img,
.fb-js .fb-cta .hero-visual__drive::after,
.fb-js .fb-cta .hero-visual__speed i {
    animation-play-state: paused;
}

/* Quando aparece: entra a rolar e começa a "circular" */
.fb-js .fb-cta .hero-visual.is-visible .hero-visual__drive {
    animation: hero-drive-in 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
}

.fb-js .fb-cta .hero-visual.is-visible .hero-visual__drive img,
.fb-js .fb-cta .hero-visual.is-visible .hero-visual__drive::after,
.fb-js .fb-cta .hero-visual.is-visible .hero-visual__speed i {
    animation-play-state: running;
}

/* Telemóvel/tablet: centrada por baixo do texto */
@media (max-width: 1023px) {
    .fb-cta .hero-visual__drive {
        width: min(70%, 280px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fb-js .fb-cta .hero-visual__drive {
        opacity: 1;
        transform: none;
        animation: none !important;
    }
}

/* Faixa final: coluna do texto mais larga */
@media (min-width: 1024px) {
    .fb-cta .grid {
        grid-template-columns: 1.5fr 1fr;
        gap: 3rem;
    }
}

/* ==========================================================================
   FAQ: duas colunas (título à esquerda, perguntas à direita)
   ========================================================================== */
@media (min-width: 1024px) {
    #faq .container {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 4rem;
        align-items: start;
    }

    /* O título acompanha o scroll enquanto se leem as perguntas */
    #faq .container>.max-w-3xl {
        position: sticky;
        top: 7rem;
        margin: 0;
    }

    #faq .container>.mt-12 {
        max-width: none;
        margin-top: 0;
    }
}

/* Bloco "Ainda tem dúvidas?" */
.fb-faq__help {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(17, 24, 39, 0.1);
}

.dark .fb-faq__help {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.fb-faq__help-title {
    margin: 0;
    font-weight: 700;
    color: #111827;
}

.dark .fb-faq__help-title {
    color: #ffffff;
}

.fb-faq__help-text {
    margin: 0.4rem 0 0;
    font-size: 0.95rem;
    color: #4b5563;
}

.dark .fb-faq__help-text {
    color: #9ca3af;
}

.fb-faq__help .fb-link {
    margin-top: 1rem;
}

/* Perguntas um pouco maiores e mais legíveis */
#faq [data-faq-toggle] {
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}

#faq [data-faq-toggle]>span {
    font-size: 1rem;
    line-height: 1.45;
    padding-right: 1rem;
}

#faq [data-faq-toggle]+div p {
    font-size: 0.95rem;
    line-height: 1.7;
}

/* Ícone "+" a verde ao passar o rato */
#faq [data-faq-toggle]:hover [data-faq-icon] {
    color: #87e64b;
}

/* ==========================================================================
   Contacto: duas colunas (informação à esquerda, formulário à direita)
   ========================================================================== */
@media (min-width: 1024px) {
    #contact .container {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 4rem;
        align-items: start;
    }

    #contact .container>.max-w-3xl {
        position: sticky;
        top: 7rem;
        margin: 0;
    }

    #contact .container>.mt-12 {
        max-width: none;
        margin-top: 0;
    }
}

/* Lista de contactos */
.fb-contact__info {
    margin: 2.25rem 0 0;
    padding: 0;
    list-style: none;
}

.fb-contact__info li {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid rgba(17, 24, 39, 0.1);
    font-size: 0.95rem;
    line-height: 1.6;
    color: #4b5563;
}

.dark .fb-contact__info li {
    border-top-color: rgba(255, 255, 255, 0.08);
    color: #9ca3af;
}

.fb-contact__icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 8px;
    background: rgba(135, 230, 75, 0.15);
    color: #4d8f25;
}

.dark .fb-contact__icon {
    color: #87e64b;
}

.fb-contact__icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.fb-contact__label {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #111827;
}

.dark .fb-contact__label {
    color: #ffffff;
}

.fb-contact__info a {
    color: inherit;
    transition: color 0.2s ease;
}

.fb-contact__info a:hover {
    color: #87e64b;
}

/* Formulário dentro de um cartão */
.fb-contact__form {
    padding: 2rem;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
}

.dark .fb-contact__form {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(17, 24, 39, 0.6);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.fb-contact__note {
    margin: 0;
    text-align: center;
    font-size: 0.85rem;
    color: #6b7280;
}

@media (max-width: 639px) {
    .fb-contact__form {
        padding: 1.5rem 1.25rem;
    }
}

/* ==========================================================================
   Modo claro: verdes mais confortáveis (o modo escuro não muda)
   ========================================================================== */
html:not(.dark) {
    --fb-green-soft: #eef7e8;
    /* fundo verde suave para secções      */
    --fb-green-line: #d7ebc9;
    /* bordas/detalhes sobre o verde suave */
    --fb-green-text: #3f7a1e;
    /* verde escuro para texto e ícones    */
    --fb-green-tint: rgba(63, 122, 30, 0.1);
}

/* ==========================================================================
   Impacto Ambiental — texto à esquerda, 4 cartões de números à direita
   ========================================================================== */
.fb-impact {
    position: relative;
    overflow: hidden;
}

/* Fundo: grelha fina + brilho suave (dá profundidade sem distrair) */
.fb-impact::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse at 70% 50%, #000 0%, transparent 70%);
    mask-image: radial-gradient(ellipse at 70% 50%, #000 0%, transparent 70%);
    pointer-events: none;
}

.fb-impact::after {
    content: "";
    position: absolute;
    right: -10%;
    top: -20%;
    width: 60%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(135, 230, 75, 0.18) 0%, rgba(135, 230, 75, 0) 65%);
    pointer-events: none;
}

html:not(.dark) .fb-impact::before {
    background-image:
        linear-gradient(rgba(63, 122, 30, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(63, 122, 30, 0.08) 1px, transparent 1px);
}

.fb-impact .container {
    position: relative;
    z-index: 1;
}

.fb-impact__grid {
    display: grid;
    gap: 3rem;
}

@media (min-width: 1024px) {
    .fb-impact__grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        align-items: center;
        gap: 4.5rem;
    }
}

/* ---------- Texto ---------- */
.fb-impact__badge {
    display: inline-flex;
    margin-bottom: 1.25rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.12);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #d9f5c4;
}

.fb-impact__title {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.1rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.fb-impact__title span {
    color: #87e64b;
}

.fb-impact__text {
    margin: 1.25rem 0 0;
    max-width: 30rem;
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.78);
}

.fb-impact__quote {
    margin: 2rem 0 0;
    padding-left: 1rem;
    border-left: 3px solid #87e64b;
}

.fb-impact__quote p {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.4;
    color: #ffffff;
}

.fb-impact__quote cite {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #87e64b;
}

/* ---------- Cartões ---------- */
.fb-impact__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.fb-impact__card {
    position: relative;
    padding: 1.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.fb-impact__card:hover {
    transform: translateY(-4px);
    border-color: rgba(135, 230, 75, 0.5);
    background: rgba(135, 230, 75, 0.06);
}

/* Linha verde no topo do cartão ao passar o rato */
.fb-impact__card::before {
    content: "";
    position: absolute;
    left: 1.75rem;
    right: 1.75rem;
    top: -1px;
    height: 2px;
    background: #87e64b;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

.fb-impact__card:hover::before {
    transform: scaleX(1);
}

.fb-impact__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1.25rem;
    border-radius: 8px;
    background: rgba(135, 230, 75, 0.15);
    color: #87e64b;
}

.fb-impact__icon svg {
    width: 1.4rem;
    height: 1.4rem;
}

.fb-impact__value {
    font-size: clamp(2rem, 3.2vw, 2.75rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

.fb-impact__label {
    margin-top: 0.6rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
}

.fb-impact__desc {
    margin: 0.4rem 0 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.65);
}

/* ---------- Modo claro ---------- */
html:not(.dark) .fb-impact__badge {
    background: rgba(63, 122, 30, 0.12);
    color: #3f7a1e;
}

html:not(.dark) .fb-impact__title,
html:not(.dark) .fb-impact__quote p,
html:not(.dark) .fb-impact__value,
html:not(.dark) .fb-impact__label {
    color: #111827 !important;
}

html:not(.dark) .fb-impact__title span,
html:not(.dark) .fb-impact__quote cite,
html:not(.dark) .fb-impact__icon {
    color: #3f7a1e !important;
}

html:not(.dark) .fb-impact__text {
    color: #4b5563 !important;
}

html:not(.dark) .fb-impact__desc {
    color: #6b7280 !important;
}

html:not(.dark) .fb-impact__card {
    border-color: #d7ebc9;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(63, 122, 30, 0.08);
}

html:not(.dark) .fb-impact__card:hover {
    border-color: #87e64b;
}

html:not(.dark) .fb-impact__icon {
    background: rgba(63, 122, 30, 0.1);
}

/* ---------- Telemóvel ---------- */
@media (max-width: 767px) {
    .fb-impact__grid {
        gap: 2rem;
    }

    .fb-impact__title {
        font-size: 1.85rem;
    }

    .fb-impact__text {
        font-size: 0.95rem;
    }

    .fb-impact__cards {
        gap: 0.75rem;
    }

    .fb-impact__card {
        padding: 1.1rem;
    }

    .fb-impact__card::before {
        left: 1.1rem;
        right: 1.1rem;
    }

    .fb-impact__icon {
        width: 2.25rem;
        height: 2.25rem;
        margin-bottom: 0.85rem;
    }

    .fb-impact__icon svg {
        width: 1.15rem;
        height: 1.15rem;
    }

    .fb-impact__value {
        font-size: 1.6rem;
    }

    .fb-impact__label {
        font-size: 0.82rem;
        line-height: 1.3;
    }

    .fb-impact__desc {
        display: none;
        /* no telemóvel fica só o essencial */
    }

    .fb-impact__quote {
        margin-top: 1.5rem;
    }

    .fb-impact__quote p {
        font-size: 1rem;
    }
}


/* ==========================================================================
   Seletor de idioma PT / EN
   ========================================================================== */
.fb-lang {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid rgba(17, 24, 39, 0.12);
    border-radius: 6px;
}

.dark .fb-lang {
    border-color: rgba(255, 255, 255, 0.12);
}

.fb-lang button {
    padding: 0.3rem 0.55rem;
    border: 0;
    border-radius: 2px !important;
    background: transparent;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.fb-lang button:hover {
    color: #111827;
}

.dark .fb-lang button:hover {
    color: #ffffff;
}

.fb-lang button.is-active {
    background: #87e64b;
    color: #000;
}

/* ==========================================================================
   Logótipo do cabeçalho (substitui a regra antiga .h-8 / .h-10)
   ========================================================================== */
[data-header] a[href="#hero"] img {
    width: 140px;
    height: auto;
}

/* Seletor dentro do menu de telemóvel */
.fb-lang-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0 1rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(17, 24, 39, 0.08);
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
}

.dark .fb-lang-menu {
    border-bottom-color: rgba(255, 255, 255, 0.08);
    color: #d1d5db;
}

/* ==========================================================================
   Telemóvel (até 767px): layout mais leve e legível
   ========================================================================== */
@media (max-width: 767px) {

    /* ---------- Cabeçalho ---------- */
    [data-header] .container {
        gap: 0.5rem;
    }

    [data-header] a[href="#hero"] img {
        width: 108px;
    }

    [data-header] .flex.items-center.gap-4 {
        gap: 0.4rem;
    }

    /* No cabeçalho fica só o menu; o idioma passa para dentro do menu */
    [data-header] .flex.items-center.gap-4>.fb-lang {
        display: none;
    }

    [data-header] [data-dark-toggle],
    [data-header] [data-mobile-toggle] {
        padding: 0.45rem;
    }

    .fb-lang button {
        min-width: 2.5rem;
        min-height: 2.1rem;
        /* área de toque confortável */
        font-size: 0.8rem;
    }

    /* ---------- Espaçamento geral das secções ---------- */
    main section.py-20,
    main section.py-16 {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }

    main section .mt-16 {
        margin-top: 2.5rem;
    }

    main section .mt-12 {
        margin-top: 2rem;
    }

    /* ---------- Títulos e textos ---------- */
    main section h2.text-3xl {
        font-size: 1.65rem;
        line-height: 1.2;
    }

    main section p.text-lg {
        font-size: 1rem;
        line-height: 1.65;
    }

    main section .text-2xl {
        font-size: 1.3rem;
        line-height: 1.3;
    }

    main section .text-xl {
        font-size: 1.1rem;
    }

    /* ---------- Hero ---------- */
    #hero>.container {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    #hero h1 {
        font-size: 1.85rem !important;
        line-height: 1.15 !important;
    }

    /* A frase animada pode ir para 2 linhas, sem fazer "saltar" a página */
    #hero [data-typewriter] {
        display: block;
        white-space: normal;
        min-height: 2.3em;
    }

    #hero p.text-lg {
        margin-top: 1rem;
    }

    /* Botões ocupam a largura toda */
    #hero .mt-8.flex a {
        width: 100%;
    }

    /* Os três destaques do hero em colunas compactas */
    #hero .mt-8.flex.gap-8 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
        margin-top: 1.75rem;
    }

    #hero .mt-8.flex.gap-8 .text-2xl {
        font-size: 1.05rem;
    }

    #hero .mt-8.flex.gap-8 .text-xs {
        font-size: 0.7rem;
        line-height: 1.35;
    }

    /* Imagem da fieldbox mais pequena */
    #hero .hero-visual__drive {
        width: min(62%, 230px);
    }

    /* ---------- Destaques abaixo do hero ---------- */
    #stats .text-3xl {
        font-size: 1.3rem;
    }

    #stats .text-sm {
        font-size: 0.8rem;
    }

    /* ---------- Cartões ---------- */
    main section .p-8 {
        padding: 1.5rem;
    }

    main section .p-6 {
        padding: 1.25rem;
    }

    /* ---------- Impacto ---------- */
    #impact .text-4xl {
        font-size: 1.9rem;
    }

    #impact .h-16.w-16 {
        width: 3.25rem;
        height: 3.25rem;
    }

    /* ---------- Faixa final ---------- */
    .fb-cta .hero-visual__drive {
        width: min(60%, 220px);
    }

    .fb-cta__points {
        flex-direction: column;
        gap: 0.6rem;
    }

    /* ---------- FAQ e contacto ---------- */
    #faq [data-faq-toggle]>span {
        font-size: 0.95rem;
    }

    #faq [data-faq-toggle] {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .fb-contact__info li {
        font-size: 0.9rem;
    }

    /* ---------- Barra fixa de contacto e botão "voltar ao topo" ---------- */
    body {
        padding-bottom: 4.75rem;
        /* o fim da página não fica escondido pela barra fixa */
    }

    #back-to-top {
        bottom: 5.5rem !important;
        /* fica acima da barra fixa */
        right: 1rem !important;
        width: 2.75rem !important;
        height: 2.75rem !important;
    }
}

/* ==========================================================================
   Formas de aquisição — cartões no mesmo estilo dos Produtos
   ========================================================================== */
.fb-buys {
    display: grid;
    gap: 1.5rem;
    margin-top: 3.5rem;
}

@media (min-width: 1024px) {
    .fb-buys {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.fb-buy {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.fb-buy:hover {
    transform: translateY(-4px);
    border-color: #b9dea0;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

.dark .fb-buy {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.dark .fb-buy:hover {
    border-color: rgba(135, 230, 75, 0.45);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

/* Destaque: Personalizada */
.fb-buy--featured {
    border-color: #87e64b;
    background: linear-gradient(180deg, rgba(135, 230, 75, 0.1), rgba(135, 230, 75, 0) 40%), #ffffff;
}

.dark .fb-buy--featured {
    border-color: rgba(135, 230, 75, 0.6);
    background: linear-gradient(180deg, rgba(135, 230, 75, 0.12), rgba(135, 230, 75, 0.02) 45%);
}

.fb-buy__badge {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px !important;
    background: #87e64b;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #000;
}

/* Ícone e nome da modalidade */
.fb-buy__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 8px;
    background: rgba(135, 230, 75, 0.15);
    color: #3f7a1e;
}

.dark .fb-buy__icon {
    color: #87e64b;
}

.fb-buy__icon svg {
    width: 1.4rem;
    height: 1.4rem;
}

.fb-buy__label {
    margin-top: 1.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #3f7a1e;
}

.dark .fb-buy__label {
    color: #87e64b;
}

.fb-buy__title {
    margin: 0.35rem 0 0;
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: #111827;
}

.dark .fb-buy__title {
    color: #ffffff;
}

.fb-buy__desc {
    margin: 0.75rem 0 0;
    font-size: 0.925rem;
    line-height: 1.65;
    color: #4b5563;
}

.dark .fb-buy__desc {
    color: #9ca3af;
}

/* Lista com vistos */
.fb-buy__list {
    flex: 1;
    margin: 1.5rem 0 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid #eef0ec;
    list-style: none;
}

.dark .fb-buy__list {
    border-top-color: rgba(255, 255, 255, 0.07);
}

.fb-buy__list li {
    position: relative;
    margin-bottom: 0.75rem;
    padding-left: 1.75rem;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #374151;
}

.dark .fb-buy__list li {
    color: #d1d5db;
}

.fb-buy__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.1em;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50% !important;
    background: rgba(135, 230, 75, 0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f7a1e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 62% no-repeat;
}

.dark .fb-buy__list li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2387e64b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}

/* Botões */
.fb-buy__cta {
    display: block;
    margin-top: 1.25rem;
    padding: 0.8rem 1rem;
    border: 1px solid #87e64b;
    border-radius: 8px !important;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: #3f7a1e;
    transition: background-color 0.2s ease;
}

.dark .fb-buy__cta {
    color: #87e64b;
}

.fb-buy__cta:hover {
    background: rgba(135, 230, 75, 0.12);
}

.fb-buy__cta--solid {
    background: #87e64b;
    color: #000 !important;
}

.fb-buy__cta--solid:hover {
    background: #7dd642;
}

/* Faixa "Precisa de algo diferente?" */
.fb-buy__banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    margin-top: 2.5rem;
    padding: 1.75rem 2rem;
    border: 1px dashed #b9dea0;
    border-radius: 8px;
    background: rgba(135, 230, 75, 0.06);
}

.dark .fb-buy__banner {
    border-color: rgba(135, 230, 75, 0.35);
}

.fb-buy__banner>div {
    flex: 1 1 26rem;
}

.fb-buy__banner-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 800;
    color: #111827;
}

.dark .fb-buy__banner-title {
    color: #ffffff;
}

.fb-buy__banner-text {
    margin: 0.35rem 0 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #4b5563;
}

.dark .fb-buy__banner-text {
    color: #9ca3af;
}

.fb-buy__banner .fb-buy__cta {
    flex: none;
    margin-top: 0;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Telemóvel */
@media (max-width: 767px) {
    .fb-buys {
        margin-top: 2rem;
        gap: 1rem;
    }

    .fb-buy {
        padding: 1.5rem 1.25rem;
    }

    .fb-buy__title {
        font-size: 1.25rem;
    }

    .fb-buy__banner {
        padding: 1.5rem 1.25rem;
    }

    .fb-buy__banner .fb-buy__cta {
        width: 100%;
    }
}

/* ==========================================================================
   Serviços — cartões no mesmo estilo de Produtos e Formas de aquisição
   ========================================================================== */
.fb-svcs {
    display: grid;
    gap: 1.25rem;
    margin-top: 3.5rem;
}

@media (min-width: 640px) {
    .fb-svcs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .fb-svcs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

.fb-svc {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.dark .fb-svc {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

/* Linha verde que cresce no topo ao passar o rato */
.fb-svc::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: #87e64b;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.fb-svc:hover {
    transform: translateY(-4px);
    border-color: #b9dea0;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

.dark .fb-svc:hover {
    border-color: rgba(135, 230, 75, 0.45);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.fb-svc:hover::before {
    transform: scaleX(1);
}

/* Destaque: Personalizada */
.fb-svc--featured {
    border-color: #87e64b;
    background: linear-gradient(180deg, rgba(135, 230, 75, 0.1), rgba(135, 230, 75, 0) 45%), #ffffff;
}

.dark .fb-svc--featured {
    border-color: rgba(135, 230, 75, 0.6);
    background: linear-gradient(180deg, rgba(135, 230, 75, 0.12), rgba(135, 230, 75, 0.02) 50%);
}

/* Ícone + número */
.fb-svc__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.fb-svc__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 8px;
    background: rgba(135, 230, 75, 0.15);
    color: #3f7a1e;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dark .fb-svc__icon {
    color: #87e64b;
}

.fb-svc__icon svg {
    width: 1.4rem;
    height: 1.4rem;
}

.fb-svc:hover .fb-svc__icon {
    background: #87e64b;
    color: #000;
}

.fb-svc__num {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #d1d5db;
}

.dark .fb-svc__num {
    color: rgba(255, 255, 255, 0.2);
}

/* Texto */
.fb-svc__title {
    margin: 1.25rem 0 0;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.3;
    color: #111827;
}

.dark .fb-svc__title {
    color: #ffffff;
}

.fb-svc__desc {
    flex: 1;
    margin: 0.6rem 0 0;
    font-size: 0.925rem;
    line-height: 1.65;
    color: #4b5563;
}

.dark .fb-svc__desc {
    color: #9ca3af;
}

/* Etiquetas de utilização */
.fb-svc__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 1.1rem 0 0;
    padding: 0;
    list-style: none;
}

.fb-svc__tags li {
    padding: 0.2rem 0.6rem;
    border: 1px solid #e5e7eb;
    border-radius: 999px !important;
    font-size: 0.75rem;
    font-weight: 500;
    color: #4b5563;
}

.dark .fb-svc__tags li {
    border-color: rgba(255, 255, 255, 0.1);
    color: #d1d5db;
}

/* Link */
.fb-svc__link {
    align-self: flex-start;
    margin-top: 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #3f7a1e;
    transition: gap 0.2s ease, color 0.2s ease;
}

.dark .fb-svc__link {
    color: #87e64b;
}

.fb-svc__link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Frase de fecho */
.fb-svcs__closing {
    margin-top: 3.5rem;
}

.fb-svcs__closing-title {
    margin: 0;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #111827;
}

.dark .fb-svcs__closing-title {
    color: #ffffff;
}

.fb-svcs__closing-title span {
    color: #3f7a1e;
}

.dark .fb-svcs__closing-title span {
    color: #87e64b;
}

/* Telemóvel */
@media (max-width: 767px) {
    .fb-svcs {
        margin-top: 2rem;
        gap: 0.9rem;
    }

    .fb-svc {
        padding: 1.4rem 1.25rem;
    }

    .fb-svc__title {
        margin-top: 1rem;
        font-size: 1.1rem;
    }

    .fb-svcs__closing {
        margin-top: 2.5rem;
    }
}

/* ==========================================================================
   Porquê fieldbox — vantagens à esquerda, comparação com gerador à direita
   ========================================================================== */
.fb-why {
    display: grid;
    gap: 3rem;
    margin-top: 3.5rem;
}

@media (min-width: 1024px) {
    .fb-why {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        align-items: start;
        gap: 4rem;
    }
}

/* ---------- Vantagens (sem caixas, para não repetir os cartões dos Serviços) ---------- */
.fb-why__list {
    display: grid;
    gap: 2rem 2.5rem;
}

@media (min-width: 640px) {
    .fb-why__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.fb-why__item {
    display: flex;
    gap: 1rem;
}

.fb-why__icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 8px;
    background: rgba(135, 230, 75, 0.15);
    color: #3f7a1e;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dark .fb-why__icon {
    color: #87e64b;
}

.fb-why__icon svg {
    width: 1.35rem;
    height: 1.35rem;
}

.fb-why__item:hover .fb-why__icon {
    background: #87e64b;
    color: #000;
}

.fb-why__item-title {
    margin: 0.15rem 0 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
}

.dark .fb-why__item-title {
    color: #ffffff;
}

.fb-why__item-text {
    margin: 0.4rem 0 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #4b5563;
}

.dark .fb-why__item-text {
    color: #9ca3af;
}

/* ---------- Comparação ---------- */
.fb-vs {
    padding: 1.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
}

.dark .fb-vs {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: none;
}

@media (min-width: 1024px) {
    .fb-vs {
        position: sticky;
        top: 7rem;
    }
}

.fb-vs__title {
    margin: 0 0 1.25rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: #111827;
}

.fb-vs__title span {
    margin: 0 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #9ca3af;
}

.dark .fb-vs__title {
    color: #ffffff;
}

.fb-vs__row {
    display: grid;
    grid-template-columns: 0.9fr 1fr 1fr;
    gap: 0.75rem;
    padding: 0.8rem 0;
    border-top: 1px solid #eef0ec;
    font-size: 0.85rem;
    line-height: 1.4;
}

.dark .fb-vs__row {
    border-top-color: rgba(255, 255, 255, 0.07);
}

.fb-vs__row--head {
    border-top: 0;
    padding-top: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fb-vs__topic {
    font-weight: 600;
    color: #111827;
}

.dark .fb-vs__topic {
    color: #e5e7eb;
}

/* Coluna do gerador: cinzenta, com "x" */
.fb-vs__bad {
    position: relative;
    color: #6b7280;
}

.fb-vs__good {
    position: relative;
    font-weight: 600;
    color: #3f7a1e;
}

.dark .fb-vs__good {
    color: #87e64b;
}

.fb-vs__row:not(.fb-vs__row--head) .fb-vs__bad,
.fb-vs__row:not(.fb-vs__row--head) .fb-vs__good {
    padding-left: 1.3rem;
}

.fb-vs__row:not(.fb-vs__row--head) .fb-vs__bad::before,
.fb-vs__row:not(.fb-vs__row--head) .fb-vs__good::before {
    position: absolute;
    left: 0;
    top: 0.05em;
    font-weight: 800;
}

.fb-vs__row:not(.fb-vs__row--head) .fb-vs__bad::before {
    content: "✕";
    color: #d1d5db;
}

.dark .fb-vs__row:not(.fb-vs__row--head) .fb-vs__bad::before {
    color: rgba(255, 255, 255, 0.25);
}

.fb-vs__row:not(.fb-vs__row--head) .fb-vs__good::before {
    content: "✓";
    color: #87e64b;
}

.fb-vs__cta {
    display: block;
    margin-top: 1.25rem;
    padding: 0.85rem 1rem;
    border-radius: 8px !important;
    background: #87e64b;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: #000 !important;
    transition: background-color 0.2s ease;
}

.fb-vs__cta:hover {
    background: #7dd642;
}

/* ---------- Telemóvel ---------- */
@media (max-width: 767px) {
    .fb-why {
        margin-top: 2rem;
        gap: 2.25rem;
    }

    .fb-why__list {
        gap: 1.5rem;
    }

    .fb-vs {
        padding: 1.25rem 1rem;
    }

    .fb-vs__row {
        grid-template-columns: 0.8fr 1fr 1fr;
        gap: 0.5rem;
        font-size: 0.78rem;
    }

    .fb-vs__row:not(.fb-vs__row--head) .fb-vs__bad,
    .fb-vs__row:not(.fb-vs__row--head) .fb-vs__good {
        padding-left: 1rem;
    }
}

/* ==========================================================================
   Hero — telemóvel (versão 2)
   Ordem: caixa → etiqueta → título → texto → botões → destaques
   ========================================================================== */
@media (max-width: 767px) {

    #hero>.container {
        padding-top: 1.25rem !important;
        padding-bottom: 2.75rem !important;
    }

    /* A grelha passa a coluna única, com a imagem primeiro */
    #hero .grid {
        display: flex !important;
        flex-direction: column;
        gap: 1rem !important;
    }

    #hero .hero-visual {
        order: -1;
        justify-content: center !important;
        margin: 0;
    }

    #hero .hero-visual__drive {
        width: min(44%, 170px) !important;
    }

    /* Linhas de velocidade mais curtas para caberem no ecrã */
    #hero .hero-visual__speed i {
        width: 30px !important;
    }

    /* Texto centrado */
    #hero .grid>div:not(.hero-visual) {
        text-align: center;
    }

    /* Etiqueta "energy on the move" */
    #hero .grid>div:not(.hero-visual)>.inline-flex:first-child {
        margin-bottom: 1rem;
        font-size: 0.8rem;
    }

    /* Título */
    #hero h1 {
        font-size: 1.75rem !important;
        line-height: 1.15 !important;
        letter-spacing: 0.005em;
    }

    #hero [data-typewriter] {
        display: block;
        white-space: normal;
        min-height: 2.3em;
        /* reserva 2 linhas: a página não "salta" */
    }

    /* Parágrafo */
    #hero h1+p {
        max-width: 26rem;
        margin: 0.9rem auto 0 !important;
        font-size: 0.98rem !important;
        line-height: 1.6;
    }

    /* Botões: largura total, um por baixo do outro */
    #hero .mt-8.flex.flex-col {
        margin-top: 1.5rem !important;
        gap: 0.65rem !important;
    }

    #hero .mt-8.flex.flex-col a {
        width: 100%;
        padding-top: 0.85rem;
        padding-bottom: 0.85rem;
        font-size: 0.98rem;
    }

    /* "Proposta gratuita e sem compromisso" */
    #hero .mt-8.flex.flex-col+p {
        margin-top: 0.85rem !important;
        font-size: 0.8rem !important;
    }

    /* Três destaques em "chips" lado a lado */
    #hero .mt-8.flex.gap-8 {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem !important;
        margin-top: 1.5rem !important;
    }

    #hero .mt-8.flex.gap-8>div {
        padding: 0.7rem 0.35rem;
        border: 1px solid rgba(17, 24, 39, 0.08);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.6);
        text-align: center;
    }

    .dark #hero .mt-8.flex.gap-8>div {
        border-color: rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.03);
    }

    #hero .mt-8.flex.gap-8 .text-2xl {
        font-size: 1rem !important;
        line-height: 1.2;
    }

    #hero .mt-8.flex.gap-8 .text-xs {
        margin-top: 0.2rem;
        font-size: 0.66rem !important;
        line-height: 1.3;
    }
}

/* Ecrãs muito estreitos (ex.: iPhone SE) */
@media (max-width: 380px) {
    #hero h1 {
        font-size: 1.55rem !important;
    }

    #hero .hero-visual__drive {
        width: min(40%, 140px) !important;
    }
}

/* ==========================================================================
   Quem somos: imagem horizontal, do tamanho certo para a foto
   ========================================================================== */
.fb-about__media {
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    max-height: none !important;
}

.fb-about__media img {
    top: -3% !important;
    height: 106% !important;
    object-position: 30% 65% !important;
    /* foca a caixa e os painéis */
}

@media (min-width: 1024px) {
    .fb-about__grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 4rem !important;
    }

    /* A imagem deixa de ficar fixa: acompanha o texto normalmente */
    .fb-about__media {
        position: relative !important;
        top: auto !important;
    }
}

@media (max-width: 767px) {
    .fb-about__media {
        aspect-ratio: 16 / 10 !important;
    }
}

/* ==========================================================================
   Quem somos: cabeçalho com a mesma largura da imagem
   + correção da coluna de texto que saía do ecrã
   ========================================================================== */

/* Anula margens antigas da imagem (versão "até à borda") */
.fb-about__media {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 8px !important;
}

.fb-about__grid {
    margin-top: 2.5rem !important;
}

.fb-about__text {
    min-width: 0;
}

@media (min-width: 1024px) {

    /* Cabeçalho alinhado com a largura da coluna da imagem
	   (a imagem ocupa 1.1 de 2.1 partes da largura, menos o espaço entre colunas) */
    #about .container>.max-w-3xl {
        max-width: calc((100% - 4rem) * 1.1 / 2.1) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #about .container>.max-w-3xl h2 {
        font-size: clamp(2rem, 3.2vw, 2.75rem);
        line-height: 1.12;
    }

    /* Texto do lado direito centrado verticalmente com a imagem */
    .fb-about__grid {
        align-items: center !important;
    }
}

/* Quem somos: imagem um pouco mais alta */
.fb-about__media {
    aspect-ratio: 5 / 4 !important;
}

/* ==========================================================================
   Formulário de contacto: mensagens de estado, erros e campo anti-spam
   (colar no final do public/css/landing.css)
   ========================================================================== */
.fb-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.fb-form-status p {
    margin: 0;
    padding: 0.9rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.5;
}

.fb-form-status__ok {
    border: 1px solid #87e64b;
    background: rgba(135, 230, 75, 0.12);
    color: #2f5f16;
}

.dark .fb-form-status__ok {
    color: #c8f5a8;
}

.fb-form-status__error {
    border: 1px solid #f87171;
    background: rgba(248, 113, 113, 0.1);
    color: #b91c1c;
}

.dark .fb-form-status__error {
    color: #fca5a5;
}

.fb-field-error {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    color: #dc2626;
}

.dark .fb-field-error {
    color: #f87171;
}

.fb-contact__form [aria-invalid="true"] {
    border-color: #f87171 !important;
}

.fb-contact__form button[type="submit"]:disabled {
    opacity: 0.7;
    cursor: wait;
}

/* ==========================================================================
   Formulário de contacto: espaçamento entre etiquetas, campos e botão
   ========================================================================== */

/* Espaço entre cada bloco do formulário */
.fb-contact__form>*+* {
    margin-top: 1.5rem !important;
}

/* Linhas com dois campos lado a lado */
.fb-contact__form .grid {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .fb-contact__form .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Etiqueta → campo */
.fb-contact__form label {
    display: block;
    line-height: 1.4;
}

.fb-contact__form label+input,
.fb-contact__form label+select,
.fb-contact__form label+textarea {
    margin-top: 0.55rem !important;
}

/* Campos um pouco mais altos e confortáveis */
.fb-contact__form input:not([type="checkbox"]),
.fb-contact__form select,
.fb-contact__form textarea {
    padding: 0.85rem 1rem !important;
    font-size: 0.975rem;
}

/* Mensagem de erro por baixo do campo */
.fb-contact__form .fb-field-error {
    margin-top: 0.4rem;
}

/* Caixa de consentimento: afastada do campo de cima e do botão */
.fb-contact__form .fb-consent {
    margin-top: 1.75rem !important;
}

/* Botão */
.fb-contact__form button[type="submit"] {
    margin-top: 1.75rem !important;
    padding-top: 0.95rem !important;
    padding-bottom: 0.95rem !important;
}

.fb-contact__form .fb-contact__note {
    margin-top: 0.9rem !important;
}

/* O campo anti-spam escondido não ocupa espaço */
.fb-contact__form>.fb-hp {
    margin: 0 !important;
}

/* Telemóvel */
@media (max-width: 639px) {
    .fb-contact__form>*+* {
        margin-top: 1.25rem !important;
    }

    .fb-contact__form .grid {
        gap: 1.25rem;
    }

    .fb-contact__form input:not([type="checkbox"]),
    .fb-contact__form select,
    .fb-contact__form textarea {
        font-size: 16px;
        /* evita o zoom automático do iPhone ao tocar no campo */
    }
}

/* ==========================================================================
   Conversa por WhatsApp (botão flutuante + janela)
   ========================================================================== */
.fb-wa {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 55;
    font-family: inherit;
}

/* Botão redondo */
.fb-wa__button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border: 0;
    border-radius: 50% !important;
    background: #25d366;
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fb-wa__button:hover {
    transform: scale(1.06);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
}

/* Anel a pulsar suavemente para chamar a atenção */
.fb-wa__button::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #25d366;
    animation: fb-wa-pulse 2.6s ease-out infinite;
    pointer-events: none;
}

@keyframes fb-wa-pulse {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }

    70%,
    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

.fb-wa.is-open .fb-wa__button::after {
    animation: none;
}

/* Balão de convite */
.fb-wa__hint {
    position: absolute;
    right: 4.25rem;
    bottom: 0.65rem;
    padding: 0.6rem 0.9rem;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    color: #111827;
    animation: fb-wa-in 0.35s ease;
}

.dark .fb-wa__hint {
    background: #17231d;
    color: #ffffff;
}

/* Janela */
.fb-wa__panel {
    position: absolute;
    right: 0;
    bottom: 4.5rem;
    width: min(22rem, calc(100vw - 2rem));
    overflow: hidden;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
    animation: fb-wa-in 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.dark .fb-wa__panel {
    background: #0f1813;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

@keyframes fb-wa-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fb-wa__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    background: #0b120f;
    color: #ffffff;
}

.fb-wa__avatar {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: #25d366;
}

.fb-wa__avatar svg {
    width: 1.4rem;
    height: 1.4rem;
}

.fb-wa__name {
    margin: 0;
    font-weight: 700;
    color: #87e64b;
}

.fb-wa__status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.1rem 0 0;
    font-size: 0.78rem;
    color: #c9d3cd;
}

.fb-wa__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #25d366;
}

.fb-wa__close {
    margin-left: auto;
    padding: 0.35rem;
    border: 0;
    background: transparent;
    color: #c9d3cd;
    cursor: pointer;
}

.fb-wa__close:hover {
    color: #ffffff;
}

/* Conversa */
.fb-wa__body {
    padding: 1.25rem 1.1rem;
    background: #ece5dd;
}

.dark .fb-wa__body {
    background: #0b1511;
}

.fb-wa__bubble {
    max-width: 85%;
    padding: 0.7rem 0.9rem;
    border-radius: 0 10px 10px 10px;
    background: #ffffff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
    font-size: 0.9rem;
    line-height: 1.45;
    color: #111827;
}

.dark .fb-wa__bubble {
    background: #17231d;
    color: #e5e7eb;
}

.fb-wa__bubble p {
    margin: 0;
}

.fb-wa__bubble p+p {
    margin-top: 0.25rem;
}

/* Botão "Iniciar conversa" */
.fb-wa__start {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    margin: 0.9rem 1.1rem 1.1rem;
    padding: 0.8rem 1rem;
    border-radius: 8px !important;
    background: #25d366;
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff !important;
    transition: background-color 0.2s ease;
}

.fb-wa__start,
.fb-wa__start:hover {
    text-decoration: none !important;
}

.fb-wa__start:hover {
    background: #1ebe5a;
}

.fb-wa__start svg {
    width: 1.2rem;
    height: 1.2rem;
}

/* O botão "voltar ao topo" sobe para não ficar por baixo do WhatsApp */
#back-to-top {
    bottom: 6rem !important;
}

/* Telemóvel: acima da barra fixa de contacto */
@media (max-width: 1023px) {
    .fb-wa {
        right: 1rem;
        bottom: 5.25rem;
    }

    .fb-wa__hint {
        display: none;
    }

    #back-to-top {
        right: auto !important;
        left: 1rem !important;
        bottom: 5.5rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fb-wa__button::after {
        animation: none;
    }
}

/* ==========================================================================
   fieldbox.energy — hero sem brilho + telemóvel (versão 3, final)
   SUBSTITUI todo o bloco da versão 3 que está no fim do public/css/landing.css.
   A opacidade das linhas do hero muda-se no home.blade.php (data-particles-opacity).
   ========================================================================== */

/* ---------- 1. Hero: sem as manchas de brilho; ficam só as linhas e os pontos ---------- */
#hero [data-parallax] {
    display: none !important;
}

/* ---------- 2. Telemóvel ---------- */
@media (max-width: 767px) {

    /* Cabeçalhos de secção */
    main>section .max-w-3xl.text-center h2 {
        font-size: 1.6rem !important;
        line-height: 1.2 !important;
    }

    main>section .max-w-3xl.text-center>p {
        margin-top: 0.75rem !important;
        font-size: 0.98rem !important;
        line-height: 1.6 !important;
    }

    /* ----- Cartões que deslizam para o lado (Serviços, Produtos, Formas de aquisição) ----- */
    .fb-svcs,
    .fb-prods,
    .fb-buys {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 0.85rem !important;
        margin-left: -1rem !important;
        margin-right: -1rem !important;
        padding: 0.5rem 1rem 1.25rem !important;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 1rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .fb-svcs::-webkit-scrollbar,
    .fb-prods::-webkit-scrollbar,
    .fb-buys::-webkit-scrollbar {
        display: none;
    }

    .fb-svcs>*,
    .fb-prods>*,
    .fb-buys>* {
        flex: 0 0 84% !important;
        max-width: 84% !important;
        margin: 0 !important;
        scroll-snap-align: start;
    }

    /* Espaço no fim, para o último cartão não colar à margem */
    .fb-svcs::after,
    .fb-prods::after,
    .fb-buys::after {
        content: "";
        flex: 0 0 0.15rem;
    }

    /* No telemóvel o cartão não "salta" ao tocar (evita ser cortado no carrossel) */
    .fb-svc:hover,
    .fb-prod:hover,
    .fb-buy:hover {
        transform: none;
    }

    .fb-svcs__closing,
    .fb-prods__note {
        margin-top: 0.5rem !important;
    }

    /* ----- Quem somos ----- */
    .fb-about__grid {
        gap: 1.5rem !important;
    }

    .fb-about__text p {
        font-size: 0.98rem;
        line-height: 1.65;
    }

    /* ----- Porquê fieldbox ----- */
    .fb-why {
        gap: 2rem !important;
    }

    .fb-why__list {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* ----- Chamada final: sem repetir a imagem do hero ----- */
    #cta .hero-visual {
        display: none !important;
    }

    #cta h2 {
        font-size: 1.7rem !important;
        line-height: 1.2 !important;
    }

    #cta .flex-col a {
        width: 100%;
    }

    /* ----- Perguntas frequentes ----- */
    #faq [data-faq-toggle] {
        padding: 0.95rem 1rem !important;
    }

    #faq [data-faq-toggle]>span {
        font-size: 0.92rem !important;
        line-height: 1.4;
    }

    .fb-faq__help {
        margin-top: 1.5rem !important;
    }

    /* ----- Contacto: cada informação num cartão compacto ----- */
    .fb-contact__info li {
        margin-bottom: 0.65rem;
        padding: 0.9rem 1rem;
        border: 1px solid rgba(17, 24, 39, 0.08);
        border-radius: 8px;
        font-size: 0.9rem;
    }

    .dark .fb-contact__info li {
        border-color: rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.02);
    }

    /* ----- Toques fáceis (44 px), sem mudar o formato dos botões ----- */
    .fb-svc__link,
    .fb-link {
        min-height: 44px;
        align-items: center;
    }

    .fb-svc__link {
        display: inline-flex;
    }

    .fb-prod__cta,
    .fb-buy__cta,
    .fb-vs__cta {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Ecrãs muito estreitos (iPhone SE, 375 px ou menos) */
@media (max-width: 380px) {

    .fb-svcs>*,
    .fb-prods>*,
    .fb-buys>* {
        flex-basis: 88% !important;
        max-width: 88% !important;
    }

    .fb-impact__value {
        font-size: 1.3rem !important;
    }
}

/* Menu: página atual (ex.: Lista de espera) — cor do hover e um traço verde por baixo */
[data-header] nav a[aria-current="page"] {
    position: relative;
    font-weight: 600;
}

[data-header] nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.45rem;
    height: 2px;
    border-radius: 2px;
    background: #87e64b;
}

[data-mobile-menu] a[aria-current="page"] {
    color: #3f7a1e;
    font-weight: 700;
}

.dark [data-mobile-menu] a[aria-current="page"] {
    color: #9cf063;
}

[data-header] [data-mobile-menu] a[aria-current="page"]::after {
    content: none;
}