/* Experiência
   Painel em tela cheia (sangra as bordas do .auvp-shell de propósito):
   uma foto por tópico, o título da dobra sobreposto à imagem e, embaixo,
   as abas — a ativa aberta com texto, as outras recolhidas. Clicar numa
   aba fecha a atual, abre a nova e troca a foto — tudo por :checked em
   radios. O passeio automático entre elas é do assets/js/auvp.js.

   O seletor dos radios é `.auvp-exp__panel input`, e não `.auvp-exp
   input`: essa classe não existe em elemento nenhum, então a regra não
   pegava e os quatro radios apareciam de verdade, como bolinhas soltas
   no canto do painel. */
.auvp-exp__panel input { position: absolute; opacity: 0; pointer-events: none; }
.auvp-exp__panel {
  position: relative;
  width: 100%;
  min-height: clamp(480px, 82vh, 760px);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  isolation: isolate;
}

.auvp-exp__media { position: absolute; inset: 0; z-index: 0; }
.auvp-exp__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
/* As quatro fotos da dobra. Vêm do Pexels por URL do CDN, montada a
   partir do id que está no fim do endereço da página da foto:

     página  pexels.com/pt-br/foto/…-14036272/
     CDN     images.pexels.com/photos/14036272/pexels-photo-14036272.jpeg?auto=compress&cs=tinysrgb&w=1600

   Se for trocar alguma, troque a linha, não acrescente outra: duas
   regras para o mesmo `--bg` e a última cala a primeira, em silêncio. */
.auvp-exp__bg--1 { background-image: url("https://images.pexels.com/photos/14036272/pexels-photo-14036272.jpeg?auto=compress&cs=tinysrgb&w=1600"); }  /* hospedagem */
.auvp-exp__bg--2 { background-image: url("https://images.pexels.com/photos/4246101/pexels-photo-4246101.jpeg?auto=compress&cs=tinysrgb&w=1600"); }    /* logística */
.auvp-exp__bg--3 { background-image: url("https://images.pexels.com/photos/7820326/pexels-photo-7820326.jpeg?auto=compress&cs=tinysrgb&w=1600"); }    /* concierge */
.auvp-exp__bg--4 { background-image: url("https://images.pexels.com/photos/7368308/pexels-photo-7368308.jpeg?auto=compress&cs=tinysrgb&w=1600"); }    /* agenda */

/* O quadro da dobra é largo e baixo; o `cover` corta em cima e embaixo.
   Como as malas ficam apoiadas no chão, o corte centralizado come justo
   a parte que interessa — daí o recorte puxado para baixo.

   Um botão só para ajustar: o segundo valor do background-position. 50%
   é o centro da foto; quanto maior, mais baixo o recorte desce. */
.auvp-exp__bg--2 { background-position: center 72%; }

.auvp-exp__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(28, 27, 24, 0.85) 0%, rgba(28, 27, 24, 0.4) 32%, rgba(28, 27, 24, 0.08) 58%, rgba(28, 27, 24, 0.2) 100%),
    linear-gradient(to right, rgba(28, 27, 24, 0.55) 0%, rgba(28, 27, 24, 0) 55%),
    rgba(0, 0, 0, 0.4);
}

.auvp-exp__intro {
  position: absolute;
  z-index: 2;
  top: clamp(2rem, 6vw, 4.5rem);
  left: clamp(1.25rem, 5vw, 5rem);
  right: clamp(1.25rem, 5vw, 5rem);
  color: var(--paper);
}
.auvp-exp__intro h2 {
  font-size: clamp(2.1rem, 4.4vw, 4rem);
  line-height: 1.08;
  max-width: 16ch;
}
.auvp-exp__intro h2 em { color: var(--paper); text-decoration: underline; text-decoration-color: var(--verde-60); text-underline-offset: 0.12em; }
.auvp-exp__cards {
  position: absolute;
  z-index: 2;
  left: clamp(1.25rem, 5vw, 5rem);
  right: clamp(1.25rem, 5vw, 5rem);
  bottom: clamp(1.5rem, 4vw, 3rem);
  display: flex;
  align-items: stretch;
  gap: 2px;
}
.auvp-exp__card {
  position: relative;
  cursor: pointer;
  flex: 1 1 0%;
  min-width: 0;
  min-height: clamp(90px, 12vw, 120px);
  padding: clamp(1rem, 1.6vw, 1.5rem);
  background: rgba(28, 27, 24, 0.38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--paper);
  display: grid;
  align-content: space-between;
  gap: 0.75rem;
  overflow: hidden;
  transition: flex-grow 0.6s var(--ease), background-color 0.5s var(--ease);
}
.auvp-exp__card:hover { background: rgba(28, 27, 24, 0.55); }
.auvp-exp__card-top { display: flex; align-items: center; gap: 0.75rem; }
.auvp-exp__card-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.auvp-exp__card-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s var(--ease); }
.auvp-exp__card-body > * { overflow: hidden; }
.auvp-exp__card-text { font-size: var(--fs-small); line-height: 1.6; color: rgba(247, 245, 241, 0.86); max-width: 42ch; }

/* estado ativo de cada aba */
#auvp-e1:checked ~ .auvp-exp__media .auvp-exp__bg--1,
#auvp-e2:checked ~ .auvp-exp__media .auvp-exp__bg--2,
#auvp-e3:checked ~ .auvp-exp__media .auvp-exp__bg--3,
#auvp-e4:checked ~ .auvp-exp__media .auvp-exp__bg--4 { opacity: 1; }

#auvp-e1:checked ~ .auvp-exp__cards .auvp-exp__card:nth-of-type(1),
#auvp-e2:checked ~ .auvp-exp__cards .auvp-exp__card:nth-of-type(2),
#auvp-e3:checked ~ .auvp-exp__cards .auvp-exp__card:nth-of-type(3),
#auvp-e4:checked ~ .auvp-exp__cards .auvp-exp__card:nth-of-type(4) {
  flex-grow: 2.6;
  background: var(--verde);
}
#auvp-e1:checked ~ .auvp-exp__cards .auvp-exp__card:nth-of-type(1) .auvp-exp__card-body,
#auvp-e2:checked ~ .auvp-exp__cards .auvp-exp__card:nth-of-type(2) .auvp-exp__card-body,
#auvp-e3:checked ~ .auvp-exp__cards .auvp-exp__card:nth-of-type(3) .auvp-exp__card-body,
#auvp-e4:checked ~ .auvp-exp__cards .auvp-exp__card:nth-of-type(4) .auvp-exp__card-body { grid-template-rows: 1fr; }

/* O passeio entre os tópicos é do assets/js/auvp.js: ele só marca o
   próximo radio a cada quatro segundos, e o desenho continua vindo das
   regras de estado acima, com as transições de sempre.

   Antes o passeio era uma animação por fora, e enquanto ela rodava o que
   estava na tela não era o estado marcado — daí o clique numa aba
   parecer não pegar, e o passeio morrer no primeiro clique. Agora clicar
   só troca o marcado, e a contagem recomeça dali. */

/* Até 900px as abas empilham — a 768 as quatro lado a lado já cortavam
   os títulos no meio ("LOGÍSTICA ORGANIZAD…"). E, empilhadas, elas não
   cabem mais penduradas no rodapé do painel: em tela pequena a fila
   passava por cima do título e furava a moldura por baixo. Então aqui o
   painel deixa de posicionar por cima e volta ao fluxo — a foto e o véu
   seguem no fundo, absolutos, e o painel cresce com o que tem dentro. */
@media (max-width: 900px) {
  .auvp-exp__panel {
    min-height: 0;
    display: grid;
    gap: clamp(1.5rem, 5vw, 2.5rem);
    padding: clamp(1.75rem, 6vw, 3rem) clamp(1.25rem, 5vw, 2rem);
  }
  .auvp-exp__intro { position: static; inset: auto; }
  .auvp-exp__cards {
    position: static;
    inset: auto;
    flex-direction: column;
  }
  /* Empilhadas, as abas crescem com o que têm dentro. Enquanto a base
     do flex era 0, o cartão aberto encolhia para a altura do título e
     comia o fim do texto — o `overflow: hidden` do painel fazia o resto,
     em silêncio. */
  .auvp-exp__card { min-height: auto; flex: 0 0 auto; }
}