
/* heroSettle: começa mais alto e assenta → a foto cobre o vão da base da wave em telas quadradas */
.home-hero { position: relative; min-height: calc(var(--ovl) + 380px); animation: heroSettle 1.1s cubic-bezier(.22,1,.36,1) both; }
@keyframes heroSettle { from { min-height: calc(var(--ovl) + 380px + 1rem); } to { min-height: calc(var(--ovl) + 380px); } }   /* 1rem (era 5): CLS verde estável mantendo o assentar */
/* fotos z0 (atrás da wave = glassy), textos z3 */
.home-hero__photos, .home-hero__texts { position: absolute; inset: 0; }
.home-hero__photos { z-index: 0; }
.home-hero__texts { z-index: 3; }
.home-hero.is-carousel .home-hero__texts { touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.home-hero.is-carousel.is-dragging .home-hero__texts { cursor: grabbing; }
.home-hero__photo, .home-hero__text { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
.home-hero__photo.is-active, .home-hero__text.is-active { opacity: 1; }
.home-hero__photo { overflow: hidden; }
.home-hero__text { display: flex; align-items: center; }
.home-hero__sub { margin: 1.375rem 0 0; max-width: 33.75rem; color: rgba(255,255,255,.92); font: 400 var(--fs-body)/1.5 var(--esp-font); }

.home-hero__photo .esp-hero__bg img { transform-origin: 50% 50%; }

.home-hero__dots { position: absolute; left: 0; right: 0; bottom: 3rem; z-index: 4; display: flex; justify-content: center; gap: 0.5rem; }
.home-hero__dots[hidden] { display: none; }
.home-hero__dot { position: relative; width: 0.75rem; height: 0.75rem; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.4); cursor: pointer; overflow: hidden; transition: width .35s ease, background .2s ease; }
.home-hero__dot:hover { background: rgba(255,255,255,.7); }
.home-hero__dot.is-active { width: 2.5rem; background: rgba(255,255,255,.32); }
.home-hero__dot.is-active::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #fff; transform-origin: left; transform: scaleX(0); animation: heroDotFill 6s linear forwards; }
@keyframes heroDotFill { to { transform: scaleX(1); } }
.home-hero.is-paused .home-hero__dot.is-active::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .home-hero { animation: none; }
  .home-hero__dot.is-active::after { animation: none; }
}

/* gradiente começa abaixo do vale (100% - --ovl) → zona da curva fica transparente e mostra a foto (glassy) */
.home-blue {
  position: relative; z-index: 2;
  margin-top: calc(-1 * var(--ovl)); padding-top: calc(var(--ovl) + 52px);
  padding-bottom: calc(var(--w2h) * 0.5 + 4vw);
}
/* ::before mascarado → borda inferior ondulada (wave2), sem bloco azul reto cobrir a curva */
.home-blue::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--wave1) top center / 100% auto no-repeat,
              var(--esp-grad-hero) bottom center / 100% calc(100% - var(--ovl) + 1px) no-repeat;
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--w2h) + 0.5vw) no-repeat,
                var(--wave2) bottom / 100% var(--w2h) no-repeat;
          mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--w2h) + 0.5vw) no-repeat,
                var(--wave2) bottom / 100% var(--w2h) no-repeat;
}
.home-blue + .home-feature { background: #fff; position: relative; }
.home-blue + .home-feature > .home-outline {
  position: absolute; z-index: 0; left: 0; right: 0; bottom: -11vw;
  height: 24vw; pointer-events: none;
}
.home-outline__svg { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; display: block; overflow: visible; }
.home-outline__line { fill: none; stroke: var(--esp-cyan); stroke-width: 1; }
.home-blue + .home-feature > .esp-container { position: relative; z-index: 4; }

/* barra fixa na base, dismissível (home.js); sobe com .is-in */
.home-specialist {
  position: fixed; left: 50%; bottom: 1.5rem; z-index: 380;
  transform: translateX(-50%) translateY(150%); opacity: 0;
  transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .4s ease;
  width: min(62rem, calc(100vw - 2 * var(--esp-gutter)));
  display: flex; align-items: center; gap: 1.75rem;
  background: var(--esp-gray-dark);
  border-radius: var(--esp-radius-xl); padding: 1.25rem 5.25rem; box-shadow: var(--esp-sh-drop);
}
.home-specialist.is-in { transform: translateX(-50%) translateY(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .home-specialist { transition: none; } }
.home-specialist[hidden] { display: none; }
.home-specialist__icon { display: inline-flex; align-items: center; flex: 0 0 auto; }
.home-specialist__icon img { height: 3.25rem; width: auto; display: block; }
.home-specialist__text { margin: 0; flex: 0 1 auto; max-width: 30rem; color: #fff; font: 700 var(--fs-h3)/1.2 var(--esp-font); }
.home-specialist__cta { flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--esp-gray); font: 700 var(--fs-sm)/1 var(--esp-font);
  border-radius: var(--esp-radius-pill); padding: 0.875rem 1.5rem; transition: background .2s ease; }
.home-specialist__cta:hover { background: var(--esp-blue-mist); }
/* X absoluto: não afeta o padding do CTA */
.home-specialist__close { position: absolute; top: 0.75rem; right: 0.875rem; background: none; border: 0; cursor: pointer; padding: 0.375rem; line-height: 0; }
.home-specialist__close img { width: 1rem; height: 1rem; display: block; }

.home-intro { padding-top: 3rem; }
.home-intro__text { margin: 0 auto; max-width: 51.25rem; text-align: center; color: #fff; font: 300 var(--fs-lead)/1.5 var(--esp-font); }
.home-intro__text strong { font-weight: 700; }

.home-cats { padding: 3.125rem 0 var(--esp-sec-y); color: #fff; }
/* colunas = 12rem (foto); space-between em 62rem (largura do modal) alinha as bordas externas */
.home-cats__grid { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, 12rem); justify-content: space-between; max-width: 62rem; row-gap: 3rem; }
.home-cats__action { display: flex; justify-content: center; margin-top: 3.25rem; }

.home-feature { background: #fff; padding: var(--esp-sec-y) 0; }
.home-feature__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.75rem; align-items: center; }
.home-blue + .home-feature .home-feature__grid { grid-template-columns: 1fr 1.45fr; align-items: center; }
/* overlap da wave2 PROPORCIONAL a --w2h; fatores calibrados em 28.18vw (media ×0.71, texto ×0.78) */
.home-blue + .home-feature .home-feature__media { position: relative; z-index: 3; margin-top: calc(var(--w2h) * -0.71); }
.home-blue + .home-feature .home-feature__txt { margin-top: calc(var(--w2h) * -0.78); }
.home-feature__grid--rev .home-feature__media { order: -1; }
.home-feature__txt .esp-btn { margin-top: 1.625rem; }

.home-feature--alt .home-feature__grid { grid-template-columns: 1.45fr 1fr; align-items: center; }
.home-feature--alt .home-feature__media { position: relative; z-index: 1; }
.home-feature--alt .home-feature__txt { margin-top: -2.1vw; }

/* wave-section-1 no topo (transparente acima da curva); --evwave-y = encaixe animado por scroll (GSAP) */
.home-events {
  position: relative;
  margin-top: -14vw;
  pointer-events: none;   /* área transparente da wave não captura clique; reativado no container */
  --evwave-y: 0px;
  background-image: url("../assets/wave-section-1.svg"), var(--esp-grad-section);
  background-repeat: no-repeat, no-repeat;
  background-position: center var(--evwave-y), center bottom;
  background-size: 100% auto, 100% calc(100% - 33vw);
  padding: 21vw 0 var(--esp-sec-y);
}
.home-events .esp-container { pointer-events: auto; }
.home-events__title { margin: 0.75rem 0 2.5rem; color: #fff; font: 300 var(--fs-h2)/1 var(--esp-font); }
.home-events__title strong { font-weight: 700;}
.home-events__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 1.75rem 1.375rem; }
.home-event { display: flex; flex-direction: column; }
.home-event__date { display: flex; align-items: center; gap: 0.5625rem; color: #fff; font: 800 var(--fs-sm)/1 var(--esp-font); margin-bottom: 0.75rem; }
.home-event__date::before { content: ""; flex: 0 0 auto; width: 0.25rem; height: 1.0625rem; border-radius: 1rem; background: var(--esp-yellow); }
.home-event__card { flex: 1; display: flex; flex-direction: column; background: rgba(255,255,255,.12); border-radius: var(--esp-shape-event); padding: 1.5rem 1.5rem 1.625rem;
  position: relative; color: inherit; text-decoration: none; transition: background .25s ease; }
.home-event__card:hover, .home-event__card:focus-visible { background: rgba(255,255,255,.2); }
.home-event__name { margin: 0 0 0.75rem; color: #fff; font: 800 var(--fs-body)/1.2 var(--esp-font); }
.home-event__loc { color: rgba(255,255,255,.9); font: 400 var(--fs-sm)/1.2 var(--esp-font); font-style: italic; }
.home-event__role { color: var(--esp-yellow); font: 700 var(--fs-sm)/1.2 var(--esp-font); margin-top: 0.5rem; margin-bottom: 1.75rem; }
.home-event__go { display: inline-flex; align-items: center; gap: 0.5rem;
  border: 0.0625rem solid rgba(255,255,255,.55); border-radius: var(--esp-radius-pill); padding: 0.5625rem 1.125rem;
  color: #fff; font: 700 var(--fs-sm)/1 var(--esp-font); }
.home-event__go::before { content: ""; flex: 0 0 auto; width: 0.875rem; height: 0.875rem; background: url("../assets/icon-link-white.svg") center/contain no-repeat; }
/* desktop: pílula escondida, aparece CENTRADA no hover/foco do card (conteúdo esmaece por trás) */
@media (hover: hover) {
  .home-event__go { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.9); opacity: 0;
    pointer-events: none; white-space: nowrap; transition: opacity .25s ease, transform .3s cubic-bezier(.22,1,.36,1); }
  .home-event__card > :not(.home-event__go) { transition: opacity .25s ease; }
  .home-event__card:hover .home-event__go, .home-event__card:focus-visible .home-event__go { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .home-event__card:hover > :not(.home-event__go), .home-event__card:focus-visible > :not(.home-event__go) { opacity: .25; }
}
/* touch: sem hover — pílula fica estática na base do card (mesmo lugar do layout aprovado) */
@media (hover: none) {
  .home-event__go { align-self: flex-start; margin-top: auto; }
}

/* mesmo gradiente da seção de eventos → casa sem emenda na vertical */
.home-assoc { background: var(--esp-grad-section); padding: 0 0 var(--esp-sec-y); }
.home-assoc__card { background: #fff; border-radius: var(--esp-shape-assoc); padding: 3rem 3.25rem; }
.home-assoc__logos { list-style: none; margin: 2.5rem 0 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 2.5rem; }
.home-assoc__logo { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; }
.home-assoc__logo img { width: auto; max-width: 100%; height: auto; display: block; }   /* width:auto: senão o attr width + max-height esmagam a proporção no mobile */

@media (max-width: 980px) {
  .home-cats__grid { grid-template-columns: repeat(2, 1fr); column-gap: 2.5rem; max-width: none; justify-content: normal; }
  .home-feature__grid,
  .home-blue + .home-feature .home-feature__grid,
  .home-feature--alt .home-feature__grid { grid-template-columns: 1fr; gap: 2rem; }
  .home-feature__grid--rev .home-feature__media { order: 0; }
  .home-feature__media { width: 100%; max-width: 30rem; margin-inline: auto; }   /* empilhada, a foto não vira full-width */
  .home-blue + .home-feature .home-feature__media,
  .home-blue + .home-feature .home-feature__txt,
  .home-feature--alt .home-feature__txt { margin-top: 0; }
  .home-events__grid { grid-template-columns: repeat(2, 1fr); }
  .home-assoc__logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.25rem 2rem; justify-items: center; align-items: center; }
  .home-assoc__logo img { max-height: 2.75rem; max-width: 100%; }
}
@media (max-width: 600px) {
  .home-hero { min-height: 30rem; }
  .home-cats__grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; }
  .home-blue + .home-feature { padding-top: 1rem; }
  /* CTA longo: trava pela viewport (quebra o ciclo container↔botão) e quebra linha */
  .home-cats__action .esp-btn { max-width: calc(100vw - 3rem); height: auto; min-height: 3.125rem; padding: 0.75rem 1.25rem; line-height: 1.2; text-align: left; white-space: normal; }
  .home-events { padding-top: 32vw; }
  .home-events__grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .home-assoc__logos { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
  .home-assoc__logo img { max-height: 2.5rem; }
  .home-assoc__card { padding: 2rem 1.5rem; }
  .home-specialist { flex-wrap: wrap; align-items: center; gap: 0.75rem 0.875rem; bottom: 0.75rem; padding: 1.125rem 1.25rem 1.25rem; }
  .home-specialist__icon img { height: 2.5rem; }
  .home-specialist__text { flex: 1 1 auto; max-width: none; font: 700 var(--fs-body)/1.2 var(--esp-font); }
  .home-specialist__cta { flex: 0 0 100%; margin-left: 0; margin-top: 0.125rem; }
  .home-specialist__close { top: 0.5rem; right: 0.625rem; }
}
