/* Estilos específicos da Home. Usa apenas tokens do design system (design-tokens.css). */

.skip-link { position: absolute; left: var(--primitive-spacing-4); top: -4rem; z-index: var(--primitive-z-toast); background: var(--color-accent); color: var(--color-accent-foreground); padding: var(--primitive-spacing-2) var(--primitive-spacing-4); border-radius: var(--primitive-radius-md); font-weight: 600; }
.skip-link:focus { top: var(--primitive-spacing-4); }

section[id], header[id] { scroll-margin-top: var(--nav-height); }

/* ===== Navegação ===== */
.nav__toggle { display: none; background: transparent; border: 1.5px solid var(--nav-border); border-radius: var(--primitive-radius-md); width: 2.75rem; height: 2.75rem; cursor: pointer; align-items: center; justify-content: center; color: var(--nav-fg-hover); }
.nav__bars, .nav__bars::before, .nav__bars::after { display: block; width: 1.25rem; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--primitive-duration-normal) var(--primitive-easing-standard); }
.nav__bars { position: relative; }
.nav__bars::before, .nav__bars::after { content: ""; position: absolute; left: 0; }
.nav__bars::before { top: -6px; }
.nav__bars::after { top: 6px; }
.nav__toggle[aria-expanded="true"] .nav__bars { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__bars::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 62rem) {
  .nav__inner { flex-wrap: wrap; padding-block: var(--primitive-spacing-2); }
  .nav__toggle { display: inline-flex; }
  .nav__links { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: var(--primitive-spacing-4); }
  .nav__links.is-open { display: flex; }
  .nav__links a:not(.btn) { padding: var(--primitive-spacing-3) 0; border-bottom: 1px solid var(--nav-border); font-size: var(--primitive-font-size-base); }
  .nav__links .btn { margin-top: var(--primitive-spacing-4); }
}

.nav__brand { font-size: var(--primitive-font-size-base); letter-spacing: 0; text-transform: none; transition: color var(--primitive-duration-fast) var(--primitive-easing-standard); }
.nav__brand:hover, .nav__brand:focus-visible { color: var(--color-inverse-accent); }
.nav__links a:not(.btn) { display: inline-flex; flex-direction: column; align-items: center; }
.nav__links a:not(.btn)::after { content: attr(data-text); font-weight: var(--primitive-font-weight-bold); height: 0; overflow: hidden; visibility: hidden; user-select: none; pointer-events: none; }
.nav__links a:not(.btn):hover, .nav__links a:not(.btn):focus-visible { font-weight: var(--primitive-font-weight-bold); }
@media (max-width: 62rem) { .nav__links a:not(.btn) { align-items: flex-start; } }

.icon { flex: none; }

/* ===== Hero ===== */
/* Hero da Home: foto (WebP) como fundo, com degradê marinho à esquerda para garantir a leitura do texto */
.hero--home {
  background-color: var(--hero-bg);
  background-image:
    linear-gradient(90deg, rgb(14 23 48 / 0.96) 0%, rgb(20 33 61 / 0.9) 34%, rgb(20 33 61 / 0.35) 62%, rgb(20 33 61 / 0) 100%),
    url("../assets/img/eL_Hero_Image.webp");
  background-size: cover, cover;
  background-position: center, 70% center;
  background-repeat: no-repeat;
  min-height: 34rem;
  display: flex;
  align-items: center;
  padding-block: var(--primitive-spacing-16);
}
.hero--home .container { width: 100%; }
.hero__content { max-width: 40rem; }
.hero h1 { font-size: var(--type-h1-size); line-height: var(--type-h1-line-height); font-weight: var(--type-h1-weight); letter-spacing: var(--type-h1-tracking); margin-bottom: var(--primitive-spacing-5); }
.hero__micro { margin: var(--primitive-spacing-4) 0 0; font-size: var(--type-small-size); color: var(--hero-lead-fg); max-width: 32rem; }
.hero__actions--center { justify-content: center; }
.hero--cta { padding-block: var(--primitive-spacing-20); text-align: center; }
.hero--cta h2 { color: var(--hero-fg); font-size: var(--type-h1-size); line-height: var(--type-h1-line-height); letter-spacing: var(--type-h1-tracking); max-width: 24ch; margin-inline: auto; }
.cta-final .t-lead { margin-inline: auto; }


@media (max-width: 52rem) {
  .hero--home {
    min-height: 0;
    align-items: flex-start;
    padding-block: var(--primitive-spacing-10) 18rem;
    background-image:
      linear-gradient(180deg, rgb(14 23 48 / 0.97) 0%, rgb(20 33 61 / 0.9) 52%, rgb(20 33 61 / 0) 78%),
      url("../assets/img/eL_Hero_Image-960.webp");
    background-size: cover, auto 17rem;
    background-position: center, 68% 100%;
  }
  .hero__actions .btn { width: 100%; font-size: var(--button-md-font-size); }
}

/* ===== Seções ===== */
.section--alt { background: var(--color-surface-alt); }
.section--white { background: var(--color-surface); }
.container--narrow { max-width: 52rem; }
.section__head { margin-bottom: var(--primitive-spacing-10); max-width: 44rem; }
.section__head h2 { margin-bottom: 0; }
.section__cta { display: flex; justify-content: center; margin-top: var(--primitive-spacing-10); }
@media (max-width: 40rem) { .section { padding-block: var(--primitive-spacing-12); } .section__cta .btn { width: 100%; } }

.grid-3 { display: grid; gap: var(--primitive-spacing-5); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.grid-4 { display: grid; gap: var(--primitive-spacing-5); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 62rem) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .grid-4 { grid-template-columns: 1fr; } }
.grid-2 { display: grid; gap: var(--primitive-spacing-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }


/* ===== Cabeçalho de seção com texto de apoio ===== */
.section__lead { margin: var(--primitive-spacing-4) 0 0; font-size: var(--type-lead-size); line-height: var(--type-lead-line-height); color: var(--color-foreground-muted); }
.section__head--wide, .section__head--wide .section__lead { max-width: none; }


/* ===== Sobre ===== */
.about { display: grid; gap: var(--primitive-spacing-12); grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; }
.about__photo { margin: 0; }
.about__photo img { display: block; width: 100%; height: auto; border-radius: var(--primitive-radius-xl); box-shadow: var(--primitive-shadow-lg); }
.about__text .t-lead { color: var(--color-foreground); }
.about__text p { max-width: 38rem; }
@media (max-width: 52rem) { .about { grid-template-columns: 1fr; gap: var(--primitive-spacing-8); } }

/* ===== Clientes ===== */
.clients { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--primitive-spacing-5); grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.clients > li { display: flex; flex-direction: column; }
.clients h3 { font-size: var(--primitive-font-size-lg); }
.tags { list-style: none; margin: auto 0 0; padding: var(--primitive-spacing-4) 0 0; display: flex; flex-wrap: wrap; gap: var(--primitive-spacing-2); }
.clients p { margin: 0 0 var(--primitive-spacing-4); color: var(--color-foreground-muted); }
.clients .tags { margin-top: auto; padding-top: 0; }

/* ===== FAQ ===== */
.faq { display: grid; gap: var(--primitive-spacing-3); }
.faq details { background: var(--color-surface); border: 1px solid var(--card-border); border-radius: var(--primitive-radius-md); }
.faq summary { list-style: none; cursor: pointer; padding: var(--primitive-spacing-4) var(--primitive-spacing-5); padding-right: 3.25rem; position: relative; font-family: var(--font-heading); font-weight: 700; color: var(--color-heading); line-height: 1.4; min-height: 3.25rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: var(--primitive-spacing-5); top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 600; color: var(--color-secondary); transition: transform var(--primitive-duration-normal) var(--primitive-easing-standard); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details[open] summary { border-bottom: 1px solid var(--color-border); }
.faq details p { margin: 0; padding: var(--primitive-spacing-4) var(--primitive-spacing-5) var(--primitive-spacing-5); max-width: none; }

/* ===== Rodapé ===== */
.site-footer { background: var(--footer-bg); color: var(--footer-fg); padding-block: var(--primitive-spacing-12) calc(var(--fab-size) + var(--primitive-spacing-8)); font-size: var(--type-small-size); }
.site-footer a { color: var(--footer-fg); }
.site-footer a:hover { color: var(--footer-heading-fg); }
.footer__inner { display: flex; flex-wrap: wrap; gap: var(--primitive-spacing-8); justify-content: space-between; align-items: flex-start; }
.footer__brand { display: inline-flex; align-items: center; gap: var(--primitive-spacing-3); text-decoration: none; font-family: var(--font-heading); font-weight: 800; font-size: var(--primitive-font-size-base); color: var(--footer-heading-fg) !important; margin-bottom: var(--primitive-spacing-2); }
.footer__brand img { height: 2rem; width: auto; }
.footer__right { display: grid; gap: var(--primitive-spacing-4); justify-items: end; }
@media (max-width: 40rem) { .footer__right { justify-items: start; } }
.social { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--primitive-spacing-3); }
.social a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--primitive-radius-full); border: 1px solid var(--footer-border); color: var(--footer-heading-fg); transition: background-color var(--primitive-duration-normal) var(--primitive-easing-standard), color var(--primitive-duration-normal) var(--primitive-easing-standard); }
.social a:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-foreground); }
.social__icon { width: 1.25rem; height: 1.25rem; }
.footer__inner p { margin: 0; max-width: 28rem; }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--primitive-spacing-3) var(--primitive-spacing-6); }
.footer__legal { margin-top: var(--primitive-spacing-8); padding-top: var(--primitive-spacing-5); border-top: 1px solid var(--footer-border); font-size: var(--type-caption-size); }

/* ===== Botão flutuante de WhatsApp ===== */
.fab { position: fixed; right: var(--primitive-spacing-4); bottom: var(--primitive-spacing-4); z-index: var(--primitive-z-sticky); display: inline-flex; align-items: center; gap: var(--primitive-spacing-2); min-height: var(--fab-size); min-width: var(--fab-size); justify-content: center; padding-inline: var(--primitive-spacing-4); border-radius: var(--primitive-radius-full); background: var(--fab-bg); color: var(--fab-fg); box-shadow: var(--fab-shadow); text-decoration: none; font-family: var(--font-heading); font-weight: 700; transition: background-color var(--primitive-duration-normal) var(--primitive-easing-standard), transform var(--primitive-duration-normal) var(--primitive-easing-standard); }
.fab:hover { background: var(--fab-hover-bg); color: var(--fab-fg); }
/* Só com mouse (hover + ponteiro preciso); no celular fica estático */
@media (hover: hover) and (pointer: fine) { .fab:hover { transform: scale(1.05); } }
.fab .icon { width: 1.6rem; height: 1.6rem; }
.fab :focus-visible, .fab:focus-visible { outline-color: var(--fab-fg); }
@media (max-width: 40rem) { .fab { padding-inline: 0; width: var(--fab-size); } .fab__label { display: none; } }
@media print { .fab, .nav { display: none; } }