/* ================================================================
   §01 HERO — BAKERVILLE EDITORIAL LAYOUT
   ================================================================ */
.hero-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: var(--surface-hero);
}

/* --- Background layers --- */
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg__base { position: absolute; inset: 0; }
.hero-bg__base::before,
.hero-bg__base::after { content: ''; position: absolute; inset: 0; }
.hero-bg__base::before {
  background: linear-gradient(135deg, #FF8C2E 0%, #F2701A 30%, #E85D0A 60%, #D44E08 100%);
  animation: hero-layer-a 12s ease-in-out infinite alternate;
}
.hero-bg__base::after {
  background: linear-gradient(160deg, #FFA040 0%, #F27D1A 35%, #E86520 65%, #D45510 100%);
  animation: hero-layer-b 12s ease-in-out infinite alternate;
}
@keyframes hero-layer-a {
  0% { opacity: 0.3; } 50% { opacity: 0; } 100% { opacity: 0.3; }
}
@keyframes hero-layer-b {
  0% { opacity: 0; } 50% { opacity: 0.3; } 100% { opacity: 0; }
}

/* --- Video background layer --- */
.hero-bg__video-wrap { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.hero-bg__video-wrap video { width: 100%; height: 100%; object-fit: cover; opacity: 0.75; }
.hero-bg__video-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(242, 112, 26, 0.45);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.hero-bg__noise {
  position: absolute; inset: 0; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px;
  pointer-events: none;
}
.hero-bg__glow {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,160,64,0.12) 40%, transparent 70%);
  animation: glow-pulse 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes glow-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50%      { transform: translate(-50%, -50%) scale(1.3); opacity: 0.6; }
}

/* --- Floating orbs --- */
.hero-orb {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(80px); animation: orb-float 10s ease-in-out infinite; z-index: 1;
}
.hero-orb--1 { width: 300px; height: 300px; background: rgba(255,160,50,0.15); top: 10%; left: -5%; animation-duration: 14s; }
.hero-orb--2 { width: 200px; height: 200px; background: rgba(255,200,100,0.12); bottom: 15%; right: -3%; animation-delay: 3s; animation-duration: 12s; }
.hero-orb--3 { width: 250px; height: 250px; background: rgba(255,140,46,0.1); top: 60%; left: 15%; animation-delay: 6s; animation-duration: 16s; }
@keyframes orb-float {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(30px, -40px); }
  50% { transform: translate(-20px, 20px); }
  75% { transform: translate(15px, 30px); }
}

/* --- Hero content layout --- */
.hero-content {
  position: relative; z-index: 10; width: 100%; max-width: 1440px;
  margin: 0 auto; padding: 100px var(--space-3xl) var(--space-2xl);
  min-height: 100vh; display: flex; flex-direction: row;
  align-items: stretch; justify-content: space-between; gap: var(--space-xl);
}

/* Sparkle decorator */
.hero-sparkle {
  display: block; margin: 0 auto var(--space-xl); opacity: 0;
  animation: sparkle-in 1s var(--ease-out-expo) 0.2s both;
}
@keyframes sparkle-in {
  from { opacity: 0; transform: rotate(-45deg) scale(0.5); }
  to   { opacity: 0.7; transform: rotate(0deg) scale(1); }
}

/* --- Headline ---
   09/09/2026: max-width reduzido de 55% para 48% e teto de fonte de 110px
   para 96px, para o título não competir tanto com a foto quanto antes.
   Título mais longo (3ª linha do slide "Feito por inteiro") recebe a classe
   .hero-headline--compact, aplicada por js/hero.js quando alguma linha do
   slide passa de 16 caracteres: evita que um texto futuro reative o mesmo
   estouro de linhas sem precisar mexer em CSS de novo. */
.hero-headline {
  position: relative; user-select: none; flex: 0 0 auto;
  max-width: 48%; align-self: center; z-index: 20;
  margin: 0; font-size: inherit; font-weight: inherit;
}
.hero-headline__line {
  display: block; font-family: var(--font-display); font-weight: 900;
  font-size: clamp(44px, 6.2vw, 96px); letter-spacing: -0.02em;
  line-height: 0.95; text-transform: uppercase; color: var(--color-off-white);
  text-shadow: 0 2px 20px rgba(26,10,8,0.3); opacity: 0; transform: translateY(60px);
}
.hero-headline--compact { max-width: 42%; }
.hero-headline--compact .hero-headline__line {
  font-size: clamp(36px, 4.8vw, 72px);
}

/* --- Secondary text (glassmorphism card) --- */
.hero-secondary {
  position: relative; flex: 0 1 260px; min-width: 220px; z-index: 20;
  opacity: 0; align-self: center;
  background: rgba(26,10,8,0.4); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); border-radius: var(--radius-lg);
  border: 1px solid rgba(251,245,239,0.08); padding: var(--space-lg);
}
.hero-secondary__label {
  font-family: var(--font-body); font-weight: 700; font-size: 0.75rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-off-white); margin-bottom: var(--space-sm);
}
.hero-secondary__text {
  font-family: var(--font-body); font-weight: 500; font-size: 0.9rem;
  line-height: 1.6; color: rgba(251,245,239,0.9); margin-bottom: var(--space-lg);
}
.hero-secondary__link {
  font-family: var(--font-body); font-weight: 700; font-size: 0.85rem;
  color: var(--color-off-white); text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 40px;
  position: relative; margin-bottom: var(--space-md);
}
.hero-secondary__link::after {
  content: ''; position: absolute; bottom: -2px; left: 0;
  width: 0; height: 1px; background: var(--color-off-white);
  transition: width var(--duration-normal) var(--ease-out-expo);
}
.hero-secondary__link:hover::after { width: 100%; }
.hero-secondary__link:hover { color: var(--color-warm-beige); }

/* --- Scroll indicator --- */
.hero-scroll {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  z-index: 20; display: flex; flex-direction: column; align-items: center;
  gap: var(--space-sm); opacity: 0; animation: scroll-bounce 2s ease-in-out infinite;
}
.hero-scroll__label {
  font-family: var(--font-body); font-weight: 700; font-size: 0.75rem;
  letter-spacing: 0.15em; text-transform: uppercase; color: rgba(251,245,239,0.4);
}
.hero-scroll__line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, rgba(251,245,239,0.4), transparent);
  animation: scroll-line-pulse 2s ease-in-out infinite;
}
@keyframes scroll-line-pulse {
  0%, 100% { opacity: 1; height: 40px; } 50% { opacity: 0.3; height: 20px; }
}
@keyframes scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* ================================================================
   §01 HERO — CARROSSEL DE BANNERS (v2)
   ================================================================ */
/* Base gradient fica atrás do carrossel (fallback) */
.hero-bg { z-index: 0; }

/* Camada de mídia em carrossel
   (.hero-section .hero-carousel: especificidade maior que .ta-carousel do ta-carousel.css,
   senão o position:relative do componente vence pela ordem e colapsa a altura pra 0) */
.hero-section .hero-carousel { position: absolute; inset: 0; z-index: 1; }
.hero-section .hero-carousel .ta-carousel__viewport { position: absolute; inset: 0; }
.hero-carousel .ta-carousel__slide { position: absolute; inset: 0; }
.hero-carousel .ta-carousel__slide img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

/* Overlay de legibilidade por slide (acima da imagem, abaixo dos controles).
   O H1 tem max-width:55%, então a faixa escura precisa chegar inteira até ali.
   Com os stops anteriores (0.45 em 38% → 0.12 em 62%) o alfa na borda direita do
   título caía para ~0.20 e o off-white media 1.77:1 a 2.13:1 sobre as fotos
   reais — as de banco de imagens que saíram eram escuras justo nessa faixa e
   escondiam o problema. Medido em canvas com o mesmo object-fit/object-position
   dos slides: agora fica acima de 4:1 mesmo sobre realce branco puro (mínimo
   WCAG AA para texto grande é 3:1). */
.hero-slide__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      rgba(26,10,8,0.82) 0%,
      rgba(26,10,8,0.72) 45%,
      rgba(26,10,8,0.38) 64%,
      rgba(26,10,8,0.08) 84%,
      transparent 100%),
    linear-gradient(0deg, rgba(26,10,8,0.35) 0%, transparent 42%);
}

/* Orbs acima da mídia (textura de marca) */
.hero-orb { z-index: 2; }

/* Controles do carrossel visíveis (setas nas laterais + dots com fundo pill) */
.hero-carousel .ta-carousel__arrow { top: 50%; transform: translateY(-50%); }
/* O deslocamento extra à direita abre espaço para o botão flutuante de
   WhatsApp (56px + 28px de margem, z-index 900): sem ele o último dot fica
   atrás do botão e some. No mobile o hero-responsive.css centraliza os dots,
   então lá não há colisão. */
.hero-carousel .ta-carousel__dots {
  left: auto; right: calc(var(--space-xl) + 76px); bottom: var(--space-xl); transform: none;
  gap: 4px; padding: 8px 12px; border-radius: var(--radius-pill);
  background: rgba(26,10,8,0.40);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* Overlay de conteúdo transparente a cliques (deixa os controles utilizáveis);
   reabilita nos elementos interativos */
.hero-content { pointer-events: none; }
.hero-content a,
.hero-content button,
.hero-secondary { pointer-events: auto; }

/* Slide "sem texto" (09/09/2026, rodada HERO/RECORTE/VARIEDADE): js/hero.js
   aplica esta classe no slide da Torta Tentação Preta inteira (5º slide, sem
   fato canônico honesto disponível para um texto de marca novo, ver
   comentário no array SLIDES). Oculta título + cartão com fade, deixando só
   a foto; desliga pointer-events do CTA escondido por baixo (a regra abaixo
   vem depois da reabilitação acima, então vence por ordem). */
.hero-content--empty {
  opacity: 0;
  transition: opacity var(--duration-normal, 0.3s) var(--ease-out-expo, ease);
}
.hero-content--empty a,
.hero-content--empty button,
.hero-content--empty .hero-secondary {
  pointer-events: none;
}

/* ================================================================
   COMPOSIÇÃO DA ABERTURA (correção 15/10/2026, substitui as regras por slide
   de 14/10 que usavam :has() para trocar --tl/--tt/--cl/--ct e espalhar título
   e cartão em cantos diferentes).

   Regra única (15/10/2026, direção de Pedro): título e cartão formam UMA coluna
   alinhada à esquerda (mesma referência horizontal --hx) e CENTRALIZADA
   VERTICALMENTE na área útil (viewport menos o cabeçalho fixo, --hdr), em
   todos os slides e em todos os breakpoints, paisagem e retrato. Referência
   histórica: 983fb22/40f0b9c (.hero-headline align-self:center numa área de
   100vh); aqui a centralização é feita no conjunto título + cartão, que agora
   fica à esquerda. Nada muda de lado quando o slide troca. A torta pode ficar
   parcialmente sob o texto (aceito); o recorte não persegue interseção zero. Por slide e por regime muda só o recorte da foto
   (object-position) e a força do degradê de contraste à esquerda.
   Sem espelhar, sem cópia desfocada, sem faixa de preenchimento.

   Dois regimes, escolhidos pela orientação da janela:
   - paisagem (desktop, notebook, celular deitado): coluna no canto superior
     esquerdo; as medidas escalam por --u (menor entre 1vw e 1.6vh) para a
     coluna não crescer mais que a foto em telas largas e baixas;
   - retrato (celular, tablet em pé): título no alto, cartão no rodapé, os dois
     à esquerda, e a fatia livre no meio.
   Cada slide recebe .hero-slide--N em hero.html (N = ordem no carrossel).
   Os seletores têm especificidade maior que a de hero-responsive.css, que
   carrega depois deste arquivo. ================================================================ */
.hero-section { --u: min(1vw, 1.6vh); --hx: max(72px, 6vw); --hdr: 77px; }

/* Foto: um único mecanismo de recorte. --px/--py (ou --y0 nos slides 2 a 4, em
   fração da altura da foto 2:3 escalada pela largura) vêm de cada slide. */
.hero-section .hero-carousel .hero-slide--full-photo .hero-slide__img {
  width: 100%; height: 100%; inset: 0; transform: none; object-fit: cover;
  object-position: var(--px, 50%) var(--py, 50%);
}

/* Camada de texto: coluna à esquerda, sem posicionamento por slide */
.hero-section .hero-content {
  position: absolute; inset: 0; width: auto; max-width: none; margin: 0; min-height: 0;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  box-sizing: border-box; padding: var(--hdr) 0 0 var(--hx);
}
.hero-section .hero-content .hero-headline {
  position: relative; flex: none; align-self: flex-start; width: auto; max-width: none;
  margin: 0; padding: 0; text-align: left;
}
.hero-section .hero-content .hero-headline .hero-headline__line {
  text-align: left; white-space: nowrap; line-height: 0.95;
  text-shadow: 0 1px 2px rgba(26,10,8,.55), 0 2px 18px rgba(26,10,8,.5);
}
.hero-section .hero-content .hero-secondary {
  position: relative; flex: none; align-self: flex-start; min-width: 0; max-width: none;
  margin: 0; text-align: left;
  background: rgba(26,10,8,.64); -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid rgba(251,245,239,.12);
}
.hero-section .hero-content .hero-secondary__text { margin-bottom: 0; }
.hero-section .hero-content .hero-secondary__link { margin-bottom: 0; }

/* Degradê de contraste: só à esquerda (onde ficam título e cartão) e uma leve
   sombra no topo para a navegação. --sh regula a força por foto. */
.hero-section .hero-slide--full-photo .hero-slide__overlay {
  background:
    linear-gradient(90deg,
      rgb(26 10 8 / calc(var(--sh, .6) * 1.1)) 0%,
      rgb(26 10 8 / calc(var(--sh, .6) * .95)) 20%,
      rgb(26 10 8 / calc(var(--sh, .6) * .5)) 33%,
      rgb(26 10 8 / calc(var(--sh, .6) * .14)) 45%,
      transparent 56%),
    linear-gradient(180deg, rgba(26,10,8,.4), transparent 14%),
    linear-gradient(0deg, rgba(26,10,8,.28), transparent 18%);
}

/* Fotos por slide (recorte e força do degradê) */
.hero-slide--1 { --sh: .7; }
.hero-slide--2 { --sh: .66; }
.hero-slide--3 { --sh: .8; }
.hero-slide--4 { --sh: .66; }

/* ---------- Paisagem ---------- */
@media (orientation: landscape) {
  /* Rodada 3 (15/10): o recorte vertical dos slides 1, 3 e 4 sai de uma fórmula
     em vez de um valor fixo, para a fatia aparecer o mais inteira possível em
     qualquer proporção de tela. Para cada foto:
       --ft / --fb = topo e base da fatia, em fração da altura da foto;
       --tm        = menor distância do topo da fatia ao topo da tela (fração da
                     altura da janela), que mantém o cartão e o título fora da
                     face da fatia;
       --s         = ampliação (só o slide 1, origem no canto superior esquerdo).
     A base da fatia sobe até caber na janela (1% de folga), mas nunca passa de
     --tm; se não couber (foto vertical 2:3 em tela 16:9 mostra só ~37% da altura
     do arquivo), a base é cortada em vez de o texto subir sobre a face. O
     resultado é limitado para a foto não abrir fresta. --ph = altura da foto
     escalada pela largura (4:3 -> 75vw; 2:3 -> 150vw). */
  .hero-slide--1 { --px: 50%; --s: 1.03; --ft: .19; --fb: .80; --tm: .19; --ph: 75vw; }
  .hero-slide--3 { --ft: .25; --fb: .555; --tm: .19; --ph: 150vw; }
  .hero-slide--4 { --ft: .31; --fb: .59;  --tm: .27; --ph: 150vw; }
  .hero-section .hero-carousel .hero-slide--1 .hero-slide__img { transform: scale(var(--s)); transform-origin: 0 0; }
  /* Slide 2 (calda): foto 2:3 escalada pela largura; --y0 = fração da altura
     da foto acima do topo da tela. Inalterado na rodada 3. */
  .hero-slide--2 { --y0: .352; }
  .hero-section .hero-carousel .hero-slide--full-photo:is(.hero-slide--1, .hero-slide--3, .hero-slide--4) .hero-slide__img {
    object-position: var(--px, 50%) min(0px, max(calc(100vh - var(--ph)),
      max(calc(var(--tm) * 100vh / var(--s, 1) - var(--ft) * var(--ph)),
          calc(.99 * 100vh / var(--s, 1) - var(--fb) * var(--ph)))));
  }
  .hero-section .hero-carousel .hero-slide--full-photo.hero-slide--2 .hero-slide__img {
    object-position: 50% calc(var(--y0) * -150vw);
  }
  .hero-section .hero-content {
    gap: calc(var(--u) * 1.8);
  }
  .hero-section .hero-content .hero-headline .hero-headline__line { font-size: max(26px, calc(var(--u) * 2.6)); }
  .hero-section .hero-content .hero-secondary {
    width: clamp(262px, calc(var(--u) * 19.5), 440px);
    padding: clamp(14px, calc(var(--u) * 1.2), 22px);
  }
  .hero-section .hero-content .hero-secondary__label { margin-bottom: 6px; }
  .hero-section .hero-content .hero-secondary__text { font-size: max(.875rem, var(--u)); line-height: 1.5; margin-bottom: 8px; }
}

/* Janelas de notebook (641 a 760px de altura): o texto ocupa uma fração maior
   da tela, então o topo da fatia do slide 4 desce um pouco mais. */
@media (orientation: landscape) and (min-height: 641px) and (max-height: 760px) {
  .hero-slide--4 { --tm: .30; }
}

/* Paisagem baixa (celular deitado, notebook com pouca altura): a janela mostra
   só uma faixa de ~30% da foto, então a coluna empilhada comeria o produto.
   Mesma coluna à esquerda, centralizada na área útil (compacta); o recorte
   desce até a fatia. */
@media (orientation: landscape) and (max-height: 640px) {
  /* Slide 1: sem ampliação (a fatia, 61% da altura da foto 4:3, já passa da
     janela de 600px); a fórmula só encosta o topo da fatia no topo da tela. */
  .hero-slide--1 { --s: 1; --tm: .03; }
  .hero-slide--2 { --y0: .46; }
  .hero-slide--3 { --y0: .245; }
  .hero-slide--4 { --y0: .31; }
  /* Slides 3 e 4: recorte fixo por --y0 (já mostra 94% a 100% da fatia) */
  .hero-section .hero-carousel .hero-slide--full-photo:is(.hero-slide--3, .hero-slide--4) .hero-slide__img {
    object-position: 50% calc(var(--y0) * -150vw);
  }
  /* celular deitado: a calda cai embaixo do título se o recorte subir demais */
  @media (max-width: 900px) {
    .hero-slide--2 { --y0: .46; }
    /* amplia a calda e a fatia para a direita do cartão do rodapé */
    .hero-section .hero-carousel .hero-slide--2 .hero-slide__img { transform: scale(1.3); transform-origin: 0 0; }
  }
  .hero-slide--3, .hero-slide--4 { --sh: .9; }
  .hero-section .hero-content .hero-secondary { padding: 10px 14px; }
  .hero-section .hero-content .hero-secondary__text { font-size: .875rem; line-height: 1.4; margin-bottom: 4px; }
  .hero-section .hero-content .hero-secondary__link { min-height: 30px; }
}

/* ---------- Retrato (celular e tablet em pé) ---------- */
@media (orientation: portrait) {
  /* 68px: a coluna fica à direita da seta anterior (16px + 48px), que está no centro vertical */
  .hero-section { --hx: 68px; }
  /* Foto do slide 1 em retrato: ver <source> em hero.html (derivado mobile). */
  .hero-slide--1 { --px: 50%; --py: 25%; }
  .hero-slide--2 { --px: 33.5%; --py: 100%; }
  .hero-slide--3 { --px: 51%; --py: 50%; }
  .hero-slide--4 { --px: 22.5%; --py: 50%; }
  .hero-section .hero-carousel .hero-slide--full-photo:is(.hero-slide--1, .hero-slide--2, .hero-slide--3, .hero-slide--4) .hero-slide__img {
    object-position: var(--px) var(--py);
  }
  /* Slides 2 e 4 em retrato: enquadramento por posicionamento explícito, ver
     "Tela aberta" mais abaixo (15/10/2026). A ampliação com origem herdada
     (transform-origin padrão) que existia aqui para o slide 2 foi removida. */
  .hero-section .hero-content { padding-right: 16px; }
  /* Contraste: a coluna ocupa quase toda a largura estreita da tela, então o
     degradê escuro é lateral (esquerda mais forte) e uma leve base no centro
     da coluna; sombra leve no topo para a navegação. */
  .hero-section .hero-slide--full-photo .hero-slide__overlay {
    background:
      linear-gradient(90deg,
        rgb(26 10 8 / calc(var(--sh, .6) * 1.1)) 0%,
        rgb(26 10 8 / calc(var(--sh, .6) * .85)) 55%,
        rgb(26 10 8 / calc(var(--sh, .6) * .3)) 100%),
      linear-gradient(180deg, rgba(26,10,8,.4), transparent 14%),
      linear-gradient(0deg, rgba(26,10,8,.28), transparent 18%);
  }
  .hero-section .hero-content .hero-headline .hero-headline__line { font-size: clamp(24px, 7.4vw, 44px); }
  .hero-section .hero-content .hero-secondary {
    width: min(calc(100vw - var(--hx) - 16px), 440px); padding: 8px 14px;
  }
  .hero-section .hero-content .hero-secondary__label { font-size: .64rem; margin-bottom: 3px; }
  .hero-section .hero-content .hero-secondary__text { font-size: .76rem; line-height: 1.4; margin-bottom: 4px; }
  .hero-section .hero-content .hero-secondary__link { font-size: .8rem; min-height: 28px; }
}

/* ================================================================
   TELA ABERTA, slides 2 (Lei Seca) e 4 (Pistache), revisão de 15/10/2026.
   A foto é a mesma do acervo (DSC03367 e DSC03284), só que numa tela maior:
   o miolo é o pixel original e as bordas são estendidas com os pixels da
   própria foto, fora de foco (derivados em assets/img/recorte-fatias-2026-10-15/,
   gerados por entregas/2026-10-16/revisao-imagens/_scripts/build-tela-aberta.py).
   Em vez de cover + recorte, a imagem é posicionada de forma explícita: o
   "assunto" (fatia inteira, com a calda no slide 2) é encaixado num retângulo
   livre da tela, fora do texto, do cartão, do cabeçalho, das setas e dos dots.
     --sx0/--sx1/--sy0/--sy1 = assunto, em fração do original (2:3);
     --pl/--pr/--pt/--pb     = bordas estendidas (L/R em fração da largura do
                               original, T/B em fração da altura);
     --fx0/--fx1/--fy0/--fy1 = retângulo livre na tela;
     --ax/--ay               = ancoragem do assunto dentro do retângulo.
   left/top têm clamp para a tela nunca abrir fresta, em qualquer proporção.
   Sem espelhar, sem faixa, sem cópia do produto, sem transform.
   ================================================================ */
.hero-slide--2, .hero-slide--4 {
  --ar: calc((var(--sx1) - var(--sx0)) * .66667 / (var(--sy1) - var(--sy0)));
  --fw: calc(var(--fx1) - var(--fx0));
  --fh: calc(var(--fy1) - var(--fy0));
  --sw: min(var(--fw), var(--fh) * var(--ar));
  --wo: calc(var(--sw) / (var(--sx1) - var(--sx0)));
  --sl: calc(var(--fx0) + (var(--fw) - var(--sw)) * var(--ax));
  --st: calc(var(--fy0) + (var(--fh) - var(--sw) / var(--ar)) * var(--ay));
  --cw: calc(var(--wo) * (1 + var(--pl) + var(--pr)));
  --ch: calc(var(--wo) * 1.5 * (1 + var(--pt) + var(--pb)));
}

/* Paisagem acima de 640px de altura: o texto fica à esquerda (--hx + 25*--u de
   largura), o assunto fica à direita dele. */
@media (orientation: landscape) and (min-height: 641px) {
  .hero-slide--2 { --sx0: .14; --sx1: .76; --sy0: .49; --sy1: .805; --pl: .45; --pr: .10; --pt: .03; --pb: .03; }
  .hero-slide--4 { --sx0: .13; --sx1: .70; --sy0: .32; --sy1: .585; --pl: .45; --pr: .20; --pt: .03; --pb: .03; }
  .hero-slide--2, .hero-slide--4 {
    --fx0: calc(var(--hx) + 25 * var(--u) + 36px);
    --fx1: calc(100vw - 84px);
    --fy0: 101px;
    --fy1: calc(100vh - 100px);
    --ax: .5; --ay: .5;
  }
  .hero-section .hero-carousel .hero-slide--full-photo:is(.hero-slide--2, .hero-slide--4) .hero-slide__img {
    inset: auto; transform: none; object-fit: fill; object-position: 0 0; max-width: none;
    width: var(--cw); height: var(--ch);
    left: clamp(calc(100% - var(--cw)), calc(var(--sl) - var(--wo) * (var(--pl) + var(--sx0))), 0px);
    top: clamp(calc(100% - var(--ch)), calc(var(--st) - var(--wo) * 1.5 * (var(--pt) + var(--sy0))), 0px);
  }
}

/* Retrato (celular e tablet em pé): o assunto ocupa a região livre ACIMA do
   texto (cabeçalho de 77px no topo, bloco de título + cartão centralizado na
   área útil, altura --ht medida para cada slide); o fundo continua por trás do
   texto porque a tela estendida desce até o rodapé. */
@media (orientation: portrait) {
  .hero-slide--2 { --sx0: .14; --sx1: .76; --sy0: .49; --sy1: .805; --pl: .20; --pr: .15; --pt: .02; --pb: .75; --ht: 190px; }
  .hero-slide--4 { --sx0: .13; --sx1: .70; --sy0: .32; --sy1: .585; --pl: .20; --pr: .60; --pt: .02; --pb: .75; --ht: 215px; }
  .hero-slide--2, .hero-slide--4 {
    --fx0: 10px;
    --fx1: calc(100vw - 10px);
    --fy0: 89px;
    --fy1: calc(77px + (100dvh - 77px - var(--ht)) / 2 - 14px);
    --ax: .5; --ay: .5;
  }
  .hero-section .hero-carousel .hero-slide--full-photo:is(.hero-slide--2, .hero-slide--4) .hero-slide__img {
    inset: auto; transform: none; object-fit: fill; object-position: 0 0; max-width: none;
    width: var(--cw); height: var(--ch);
    left: clamp(calc(100% - var(--cw)), calc(var(--sl) - var(--wo) * (var(--pl) + var(--sx0))), 0px);
    top: clamp(calc(100% - var(--ch)), calc(var(--st) - var(--wo) * 1.5 * (var(--pt) + var(--sy0))), 0px);
  }
}
/* Tablet em pé: o título cresce (clamp até 44px), o bloco de texto fica mais alto. */
@media (orientation: portrait) and (min-width: 600px) {
  .hero-slide--2 { --ht: 205px; }
  .hero-slide--4 { --ht: 245px; }
}