/* ============================================================================
 * PÁGINA INICIAL DE ASSISTÊNCIA (index.html)
 * ----------------------------------------------------------------------------
 * Só o que é próprio desta página. Cores, espaços e raios vêm de tokens.css;
 * as únicas cores escritas à mão são as que têm de bater certo com a
 * fotografia do banner (mesma regra dos banners com foto em style.css).
 * ========================================================================== */

/* As ligações "Como funciona" / "Em que ajudamos" param por baixo do cabeçalho fixo. */
#como-funciona, #equipamentos { scroll-margin-top: calc(var(--header-h) + var(--s4)); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* == Banner de entrada ===================================================== */

.ah-wrap { padding-top: var(--s6); }

.ah {
  --ah-base: #930101;
  --ah-foto-pc: image-set(url("../img/banners/apoio-desktop.webp") type("image/webp"), url("../img/banners/apoio-desktop.jpg") type("image/jpeg"));
  --ah-foto-tel: image-set(url("../img/banners/apoio-mobile.webp") type("image/webp"), url("../img/banners/apoio-mobile.jpg") type("image/jpeg"));
  --ah-topo-tel: linear-gradient(90deg, rgb(158,2,3) 0%, rgb(190,10,9) 50%, rgb(240,32,28) 100%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-lg);
  color: #fff;
  /* Telemóvel: texto em cima, fotografia vertical em baixo. */
  background: var(--ah-foto-tel) center bottom / 100% auto no-repeat, var(--ah-topo-tel);
  padding: var(--s8) var(--s5) 78vw;
}
@media (min-width: 768px) {
  .ah {
    /* Computador e tablet: fotografia larga encostada em baixo, a toda a
       largura — a técnica ocupa sempre a metade direita e o texto a esquerda,
       em qualquer largura de ecrã. Quando o texto pede mais altura do que a
       foto tem, o espaço por cima é preenchido com o mesmo degradê da linha de
       cima da fotografia (sem "degrau" visível). */
    --ah-topo-pc: linear-gradient(90deg, rgb(147,1,1) 0%, rgb(147,1,1) 20%, rgb(156,2,2) 30%, rgb(168,2,2) 40%, rgb(189,2,2) 50%, rgb(216,2,1) 60%, rgb(229,13,8) 70%, rgb(245,41,30) 80%, rgb(245,38,28) 90%, rgb(253,71,58) 100%);
    background: var(--ah-foto-pc) right bottom / 100% auto no-repeat, var(--ah-topo-pc);
    /* Altura mínima = a altura da fotografia (proporção 12:5 da largura do banner);
       cresce se o texto precisar de mais. */
    min-height: calc((min(100vw, var(--page)) - 2 * var(--page-pad)) * 5 / 12);
    display: flex;
    align-items: center;
    padding: var(--s9) var(--s8);
  }
}
@media (min-width: 1100px) {
  .ah { padding: var(--s10) var(--s9); }
}

.ah-texto { max-width: 560px; }
@media (min-width: 768px) { .ah-texto { max-width: min(560px, 47%); } }

.ah .eyebrow { background: rgba(255,255,255,0.16); color: #fff; }

.ah h1 {
  font-size: var(--fs-3xl);
  font-weight: 750;
  color: #fff;
  margin: var(--s4) 0;
  max-width: 17ch;
  text-shadow: 0 2px 20px rgba(0,0,0,0.2);
}
.ah-sub {
  font-size: var(--fs-lg);
  color: rgba(255,255,255,0.9);
  max-width: 46ch;
  margin: 0 0 var(--s6);
}
/* Tablet e portáteis pequenos: a coluna do texto é estreita, a letra desce um degrau. */
@media (min-width: 768px) and (max-width: 1099px) {
  .ah h1 { font-size: var(--fs-2xl); }
  .ah-sub { font-size: var(--fs-md); }
}

.ah-acoes { display: flex; gap: var(--s3); flex-wrap: wrap; }
.ah .btn-claro { background: #fff; color: var(--brand); box-shadow: var(--sh-md); }
.ah .btn-claro:hover { background: var(--brand-tint); }
.ah .btn-contorno { border-color: rgba(255,255,255,0.45); color: #fff; }
.ah .btn-contorno:hover { border-color: #fff; background: rgba(255,255,255,0.1); }
@media (max-width: 479px) {
  .ah-acoes .btn { width: 100%; }
}

.ah-factos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  margin: var(--s6) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: rgba(255,255,255,0.92);
}
.ah-factos li { display: inline-flex; align-items: center; gap: var(--s2); }

/* == Equipamentos ========================================================== */

.equip-grid {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 600px) { .equip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); } }
@media (min-width: 900px) { .equip-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .equip-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.equip-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s5) var(--s4);
  min-width: 0;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base), border-color var(--t-base);
}
.equip-card:hover, .equip-card:focus-visible { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--brand); }
.equip-icon {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--brand-tint);
  color: var(--brand);
  display: grid; place-items: center;
  margin-bottom: var(--s2);
}
.equip-nome { font-weight: 700; letter-spacing: var(--track-tight); }
.equip-desc { font-size: var(--fs-sm); color: var(--ink-3); line-height: var(--lh-snug); }

.equip-outro {
  margin: var(--s5) 0 0;
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s3);
}

/* == Como funciona ========================================================= */

.passos {
  display: grid;
  gap: var(--s4);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 800px) { .passos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } }

.passo {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s6);
}
.passo-num {
  width: 36px; height: 36px;
  border-radius: var(--r-full);
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  display: grid; place-items: center;
  margin-bottom: var(--s4);
}
.passo h3 { font-size: var(--fs-lg); margin: 0 0 var(--s2); }
.passo p { margin: 0; color: var(--ink-3); }

/* == Chamada final ========================================================= */

.chamada {
  background: var(--brand-tint);
  border: 1px solid var(--brand-soft);
  border-radius: var(--r-2xl);
  padding: var(--s8) var(--s6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
}
.chamada h2 { font-size: var(--fs-2xl); margin: 0 0 var(--s2); }
.chamada p { margin: 0; color: var(--ink-2); max-width: 52ch; }
@media (max-width: 479px) { .chamada .btn { width: 100%; } }

/* A faixa de garantias fica colada à chamada final, sem o espaço extra do rodapé. */
.inicio-assistencia + #footer-slot .site-footer { margin-top: 0; }