/* ============================================================
   HOME
   ============================================================ */

/* --- Hero (split: marketing message left · cinematic image right) --- */
.hero { position: relative; isolation: isolate; background: var(--color-surface-dark); color: #fff; overflow: hidden; min-height: clamp(540px, 80vh, 720px); display: flex; align-items: center; }

/* Background image is pulled to the right so the vehicles/machine stay in frame.
   A light brightness/contrast lift gives the scene more life without washing it out. */
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; filter: brightness(1.05) contrast(1.05) saturate(1.06); transform: scale(1.02); animation: hero-zoom 18s ease-out forwards; }

/* Cinematic overlay, layered top→bottom:
   1. soft green glow lower-left for depth + brand tone
   2. a localized dark "pool" behind the text — cleans the left area for
      readability without darkening the bright right side of the image
   3. gentle top vignette to deepen the sky and frame the header
   4. light floor so the section meets the content below
   5. the key horizontal wash — strong on the left, fully clear by ~84% so
      the van and machinery on the right/center stay bright. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(130% 95% at 0% 100%, rgba(109,192,60,0.12) 0%, transparent 46%),
    radial-gradient(72% 128% at 14% 48%, rgba(8,8,8,0.52) 0%, rgba(8,8,8,0) 62%),
    linear-gradient(180deg, rgba(8,8,8,0.40) 0%, rgba(8,8,8,0) 22%),
    linear-gradient(0deg, rgba(17,17,17,0.92) 0%, rgba(17,17,17,0.34) 9%, rgba(17,17,17,0) 26%),
    linear-gradient(90deg,
      rgba(8,8,8,0.92) 0%,
      rgba(9,9,9,0.80) 26%,
      rgba(12,12,12,0.46) 46%,
      rgba(14,14,14,0.14) 66%,
      rgba(17,17,17,0) 84%);
}

.hero__inner { position: relative; width: 100%; padding-block: clamp(3.5rem, 7vw, 6rem); }
.hero__content { max-width: 560px; }
.hero__eyebrow { color: var(--color-brand); margin-bottom: var(--space-5); }
.hero__title { color: #fff; font-size: clamp(2.25rem, 4.6vw, 3.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 var(--space-6); text-shadow: 0 2px 24px rgba(0,0,0,0.5); }
.hero__title-row { display: block; }
.hero__title .text-brand { color: var(--color-brand); }
.hero__sub { font-size: var(--fs-lg); color: rgba(255,255,255,0.88); max-width: 42ch; line-height: 1.62; text-shadow: 0 1px 12px rgba(0,0,0,0.4); }
/* Subtítulo: versão completa no desktop/tablet, versão curta apenas no telemóvel (ver media query ≤560px) */
.hero__sub--compact { display: none; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }
.hero__actions .btn--primary { box-shadow: 0 10px 30px rgba(109,192,60,0.32); }
/* Secondary CTA: translucent dark glass with a crisp white border for visibility */
.hero__actions .btn--ghost { background: rgba(17,17,17,0.38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.7); }
.hero__actions .btn--ghost:hover { background: rgba(17,17,17,0.55); box-shadow: inset 0 0 0 1.5px #fff; }
.hero__loc { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-6); font-size: var(--fs-sm); font-weight: 500; color: rgba(255,255,255,0.62); letter-spacing: 0.01em; }
.hero__loc svg { width: 17px; height: 17px; color: var(--color-brand); flex: none; }

/* Subtle one-shot reveal of the text block (respects reduced-motion below) */
.hero__content > * { animation: hero-rise 700ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero__content > *:nth-child(2) { animation-delay: 80ms; }
.hero__content > *:nth-child(3) { animation-delay: 160ms; }
.hero__content > *:nth-child(4) { animation-delay: 240ms; }
.hero__content > *:nth-child(5) { animation-delay: 320ms; }
/* O 6.º filho existe porque há duas variantes do subtítulo (uma fica oculta por
   viewport); manter o stagger crescente para a morada animar por último. */
.hero__content > *:nth-child(6) { animation-delay: 400ms; }

@keyframes hero-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes hero-zoom { to { transform: scale(1); } }

/* Desktop — pull the hero text a touch further left so it feels intentional
   and left-weighted rather than floating mid-frame. We only consume the extra
   outer space that wide viewports create beyond the container: on standard
   screens the shift is ~0 (so the text still lines up with the header logo),
   and it grows on wider screens but is capped at 6rem and always leaves a
   generous safe margin — it never pins to the viewport edge. */
@media (min-width: 1024px) {
  .hero__content {
    margin-left: calc(-1 * clamp(0rem, (100vw - var(--container)) / 2 - var(--gutter) - 2rem, 6rem));
  }
}

/* Tablet — keep the split feel but tighten the column; overlay stays controlled
   so the machinery on the right remains visible. */
@media (max-width: 900px) {
  .hero { min-height: clamp(500px, 78vh, 660px); }
  .hero__bg img { object-position: 66% center; }
  .hero::before {
    background:
      radial-gradient(130% 95% at 0% 100%, rgba(109,192,60,0.12) 0%, transparent 46%),
      radial-gradient(78% 128% at 12% 48%, rgba(8,8,8,0.50) 0%, rgba(8,8,8,0) 62%),
      linear-gradient(180deg, rgba(8,8,8,0.40) 0%, rgba(8,8,8,0) 22%),
      linear-gradient(0deg, rgba(17,17,17,0.92) 0%, rgba(17,17,17,0.34) 9%, rgba(17,17,17,0) 26%),
      linear-gradient(90deg,
        rgba(8,8,8,0.93) 0%,
        rgba(10,10,10,0.76) 36%,
        rgba(13,13,13,0.44) 60%,
        rgba(16,16,16,0.16) 82%,
        rgba(17,17,17,0) 100%);
  }
  .hero__content { max-width: 480px; }
}

/* Phone — stack cleanly: vertical overlay, image kept in frame, full-width CTAs.
   Headline is dialled back so it no longer dominates the whole screen. */
@media (max-width: 560px) {
  .hero { min-height: 76vh; align-items: flex-end; }
  .hero__bg img { object-position: 62% center; }
  /* Overlay mais "diurno": pool escuro concentrado em baixo (atrás do texto) e
     muito leve no topo/meio, para a imagem respirar e ganhar vida. O texto
     mantém-se legível graças ao gradiente forte na base + text-shadow. */
  .hero::before {
    background:
      radial-gradient(125% 78% at 0% 100%, rgba(109,192,60,0.16) 0%, transparent 55%),
      linear-gradient(180deg,
        rgba(8,8,8,0.34) 0%,
        rgba(8,8,8,0.08) 24%,
        rgba(8,8,8,0.06) 46%,
        rgba(10,10,10,0.52) 72%,
        rgba(17,17,17,0.92) 100%);
  }
  .hero__inner { padding-block: clamp(3rem, 12vw, 4.5rem) var(--space-12); }
  .hero__content { max-width: 100%; }

  /* Troca para o subtítulo curto apenas no telemóvel */
  .hero__sub--full { display: none; }
  .hero__sub--compact { display: block; }

  /* Eyebrow escondido no telemóvel: cai frequentemente sobre o céu azul e
     perde legibilidade. Mantém-se no desktop/tablet. */
  .hero__eyebrow { display: none; }
  .hero__title { font-size: clamp(1.9rem, 7.6vw, 2.4rem); line-height: 1.16; margin-bottom: var(--space-5); }
  .hero__sub { font-size: var(--fs-base); line-height: 1.6; }
  .hero__loc { margin-top: var(--space-8); }

  /* Botões: lado a lado em ecrãs normais, quebrando só em ecrãs muito pequenos.
     - flex-wrap (herdado) deixa o secundário descer para baixo quando não há
       espaço para os dois; padding reduzido faz os dois caberem lado a lado nos
       telemóveis normais (~360px+).
     - Primário dominante: cresce e ocupa o espaço livre (sombra mais contida).
     - Secundário discreto: largura só do conteúdo, mais transparente, fonte/altura
       menores. Ambos a 48px — fáceis de tocar. */
  .hero__actions { gap: var(--space-3); margin-top: var(--space-8); }
  .hero__actions .btn { height: 48px; justify-content: center; }
  .hero__actions .btn--primary {
    flex: 1 1 auto;
    padding-inline: var(--space-5);
    box-shadow: 0 6px 18px rgba(109,192,60,0.28);
  }
  .hero__actions .btn--ghost {
    flex: 0 1 auto;
    padding-inline: var(--space-4);
    font-size: var(--fs-sm);
    background: rgba(17,17,17,0.22);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg img { animation: none; transform: none; }
  .hero__content > * { animation: none; }
}

/* --- Stats bar ---
   Top eases out of the hero's dark floor (#111) into the stats surface (#1E1E1E)
   so the two sections read as one deliberate transition rather than a hard seam.
   A touch more top padding keeps the first row of numbers off the join. */
.stats-bar { background: linear-gradient(180deg, var(--color-surface-dark) 0%, var(--color-surface-mid) 24%); padding-block: clamp(3rem, 6vw, 4.5rem); }
.stats-bar__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); text-align: center; }
.stats-bar__grid .stat { padding-block: var(--space-4); }
@media (max-width: 560px) {
  /* Mais separação visual face à hero; a transição fica a cargo do degradê
     da .stats-bar, sem linha-de-corte (que entrava em conflito com a fusão). */
  .stats-bar { padding-block: var(--space-12) var(--space-10); }
  /* 3 stats compactos lado a lado em vez de 3 linhas altas */
  .stats-bar__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    padding-top: var(--space-6);
  }
  .stats-bar__grid .stat { padding-block: var(--space-2); }
  .stats-bar .stat__num { font-size: 1.5rem; }
  .stats-bar .stat__label { font-size: 0.6875rem; letter-spacing: 0.04em; line-height: 1.35; margin-top: var(--space-1); }
}

/* --- Vehicle types tabs --- */
.vtabs__nav { display: inline-flex; gap: var(--space-2); padding: var(--space-2); background: var(--color-white); border: 1px solid var(--color-border); border-radius: 999px; margin-bottom: var(--space-10); }
.vtabs__btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); border-radius: 999px; font-weight: 600; font-size: var(--fs-sm); color: var(--color-text-secondary); transition: background var(--t-fast), color var(--t-fast); }
.vtabs__btn svg { width: 20px; height: 20px; }
.vtabs__btn[aria-selected="true"] { background: var(--color-brand); color: #fff; }
.vtabs__panel { display: none; }
.vtabs__panel.is-active { display: block; animation: fade 350ms ease; }
.vtabs__panel ul { columns: 2; column-gap: var(--space-10); }
.vtabs__panel li { break-inside: avoid; display: flex; gap: var(--space-3); padding-block: var(--space-3); border-bottom: 1px solid var(--color-border); }
.vtabs__panel li svg { width: 20px; height: 20px; color: var(--color-brand); flex: none; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.vtabs__chev { display: none; }
@media (max-width: 620px) {
  .vtabs__nav { display: flex; flex-direction: column; border-radius: var(--radius); }
  .vtabs__btn { justify-content: flex-start; border-radius: var(--radius-sm); }
  .vtabs__panel ul { columns: 1; }
}
/* Phone: accordion affordance — chevron rotates when the panel is open */
@media (max-width: 560px) {
  .vtabs__chev { display: block; margin-left: auto; transition: transform var(--t-base); }
  .vtabs__btn[aria-selected="true"] .vtabs__chev { transform: rotate(180deg); }
  /* Sem painel aberto, encosta os botões à secção seguinte */
  .vtabs__nav:not(:has([aria-selected="true"])) { margin-bottom: 0; }
}

/* --- Process steps --- */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); counter-reset: step; }
.process__step { position: relative; padding-top: var(--space-4); }
.process__num { font-size: var(--fs-sm); font-weight: 700; color: var(--color-brand); letter-spacing: 0.1em; }
.process__icon { width: 60px; height: 60px; border-radius: var(--radius); background: rgba(255,255,255,0.06); display: grid; place-items: center; margin: var(--space-4) 0; }
.process__icon svg { width: 28px; height: 28px; color: var(--color-brand); }
.process__title { color: #fff; font-size: var(--fs-lg); font-weight: 600; }
.process__step:not(:last-child)::before { content: ""; position: absolute; top: 64px; left: 70px; right: -12px; height: 1px; background: var(--color-border-dark); }
@media (max-width: 820px) { .process { grid-template-columns: repeat(2, 1fr); } .process__step::before { display: none; } }

/* --- Free inspection band --- */
.inspect { background: linear-gradient(120deg, var(--color-brand) 0%, var(--color-brand-dark) 100%); color: #fff; border-radius: var(--radius-lg); padding: clamp(2.5rem, 5vw, 4rem); display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; }
.inspect__title { color: #fff; font-size: var(--fs-3xl); font-weight: 800; max-width: 18ch; }
.inspect p { color: rgba(255,255,255,0.92); margin-top: var(--space-3); max-width: 46ch; }
.inspect .btn--dark { flex: none; }

/* --- Values mini --- */
.values { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.value { display: flex; gap: var(--space-4); align-items: flex-start; }
.value__icon { flex: none; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--color-brand-soft); color: var(--color-brand-dark); display: grid; place-items: center; }
.value__icon svg { width: 22px; height: 22px; }
.value strong { display: block; }
.about-snippet__media img { border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 4/3; object-fit: cover; object-position: center 25%; width: 100%; }

/* --- Testimonials --- */
.testimonial { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-8); height: 100%; display: flex; flex-direction: column; }
.testimonial__stars { display: flex; gap: 2px; color: var(--color-brand); margin-bottom: var(--space-4); }
.testimonial__stars svg { width: 18px; height: 18px; }
.testimonial__quote { font-size: var(--fs-base); color: var(--color-text-secondary); line-height: 1.7; flex: 1; }
.testimonial__author { margin-top: var(--space-6); display: flex; align-items: center; gap: var(--space-3); }
.testimonial__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--color-brand); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.testimonial__name { font-weight: 600; color: var(--color-text-primary); font-size: var(--fs-sm); }
.testimonial__loc { font-size: var(--fs-xs); color: var(--color-text-muted); }

/* --- Brand strip --- */
.brands { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(2rem,5vw,4rem); }
.brands img { height: 56px; width: auto; opacity: 0.55; filter: grayscale(1); transition: opacity var(--t-base), filter var(--t-base); }
.brands img:hover { opacity: 1; filter: none; }

/* --- FAQ accordion --- */
.faq { max-width: 820px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-6) 0; text-align: left; font-size: var(--fs-lg); font-weight: 600; color: var(--color-text-primary); }
.faq__q svg { width: 22px; height: 22px; color: var(--color-brand-dark); flex: none; transition: transform var(--t-base); }
.faq__q[aria-expanded="true"] svg { transform: rotate(45deg); }
.faq__a { overflow: hidden; max-height: 0; transition: max-height var(--t-base); }
.faq__a-inner { padding-bottom: var(--space-6); color: var(--color-text-secondary); font-size: var(--fs-base); line-height: 1.7; }

/* --- Map + contact --- */
.contact-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.contact-split__info { background: var(--color-surface-dark); color: #fff; padding: clamp(2rem,4vw,3.5rem); }
.contact-split__info h2 { color: #fff; }
.contact-split__list { margin-top: var(--space-8); }
.contact-split__list li { display: flex; gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid var(--color-border-dark); }
.contact-split__list svg { width: 22px; height: 22px; color: var(--color-brand); flex: none; }
.contact-split__list a, .contact-split__list span { color: rgba(255,255,255,0.85); }
.contact-split__list a:hover { color: var(--color-brand); }
.contact-split__map iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }
@media (max-width: 820px) { .contact-split { grid-template-columns: 1fr; } }

/* ============================================================
   MOBILE (phone ≤560px) — carousels, collapsible values, spacing
   Tudo aqui é exclusivo do telemóvel. Desktop/tablet não é afetado.
   ============================================================ */

/* --- Hidden on desktop/tablet, shown only on phone --- */
.values-toggle { display: none; }
.carousel-dots { display: none; }

@media (max-width: 560px) {
  /* Reduz o scroll geral apertando o espaçamento vertical das secções */
  :root { --section-y: 3.25rem; }
  .section-header { margin-bottom: var(--space-8); }

  /* --- Carrosséis (serviços + testemunhos) --- */
  [data-carousel] {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Bleed até às margens do ecrã para dar sensação nativa */
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    /* Espaço para a sombra do hover/translate não cortar */
    padding-block: var(--space-2);
  }
  [data-carousel]::-webkit-scrollbar { display: none; }
  [data-carousel] > * {
    flex: 0 0 80%;          /* mostra um "espreitar" do card seguinte */
    scroll-snap-align: start;
  }
  /* Garante que os cards do carrossel ficam sempre visíveis (a animação
     reveal é uma cortesia de desktop e não deve deixar cards em branco) */
  [data-carousel] > .reveal { opacity: 1; transform: none; }

  /* --- Dots de paginação (gerados por JS) --- */
  .carousel-dots {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-6);
  }
  .carousel-dots button {
    width: 8px; height: 8px; border-radius: 999px;
    background: var(--color-border);
    transition: background var(--t-fast), width var(--t-fast);
  }
  .carousel-dots button[aria-current="true"] {
    background: var(--color-brand);
    width: 22px;
  }

  /* --- Valores colapsáveis --- */
  .values-toggle {
    display: inline-flex; align-items: center; justify-content: space-between;
    gap: var(--space-3); width: 100%;
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    font-weight: 600; font-size: var(--fs-base);
    color: var(--color-text-primary);
  }
  .values-toggle svg {
    width: 20px; height: 20px; flex: none;
    color: var(--color-brand-dark);
    transition: transform var(--t-base);
  }
  .values-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

  .values {
    grid-template-columns: 1fr;   /* uma coluna no telemóvel */
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    transition: max-height var(--t-base) ease, margin-top var(--t-base) ease;
  }
  .values.is-open {
    max-height: 1400px;
    margin-top: var(--space-6);
  }
}