/* =========================================================================
   LP de Case — Red Bull na Confenar
   Reaproveita o sistema de style.css (botões, modal, carrossel, lightbox).
   Classes próprias com prefixo .cl-  (case landing).
   ========================================================================= */

/* ---------- HERO ---------- */
.cl-hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--branco);
  background: var(--roxo-escuro);
  overflow: hidden;
  padding-block: 90px 110px;
}
.cl-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.cl-hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(120% 100% at 50% 30%, rgba(60,18,78,.6) 0%, rgba(60,18,78,.82) 65%, rgba(20,6,30,.94) 100%);
}
.cl-hero__inner { position: relative; z-index: 2; max-width: 900px; margin-inline: auto; }
.cl-hero__logo { width: clamp(112px, 15vw, 150px); height: auto; margin: 0 auto 30px; filter: drop-shadow(0 6px 18px rgba(0,0,0,.4)); }
.cl-hero__eyebrow {
  font-size: .82rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--amarelo); margin: 0 0 16px;
}
.cl-hero__title { font-size: clamp(2.4rem, 6.5vw, 4.6rem); margin: 0 0 22px; text-wrap: balance; }
.cl-hero__subtitle { font-size: clamp(1.05rem, 2.1vw, 1.32rem); color: rgba(255,255,255,.9); max-width: 800px; margin: 0 auto 32px; }

/* ---------- Bloco de intro (desafio + solução) ---------- */
.cl-intro { background: var(--branco); padding-block: clamp(64px, 9vw, 104px); }
.cl-intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 980px; margin-inline: auto; align-items: stretch; }
.cl-card { border-radius: var(--raio); padding: 36px 34px; box-shadow: var(--sombra); }
.cl-card--challenge { background: var(--fundo-suave); border-top: 5px solid var(--roxo); }
.cl-card--solution { background: var(--roxo); border-top: 5px solid var(--amarelo); }
.cl-card__label { display: inline-block; font-size: .8rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 16px; }
.cl-card--challenge .cl-card__label { color: var(--roxo); }
.cl-card--solution .cl-card__label { color: var(--amarelo); }
.cl-card p { font-size: 1.1rem; line-height: 1.6; margin: 0; }
.cl-card--challenge p { color: var(--tinta-suave); }
.cl-card--solution p { color: rgba(255,255,255,.92); }

/* ---------- Frase de destaque ---------- */
.cl-quote { background: var(--amarelo); padding-block: clamp(56px, 8vw, 92px); }
.cl-quote p {
  max-width: 840px; margin: 0 auto; text-align: center;
  color: var(--roxo); font-weight: 800; line-height: 1.25;
  font-size: clamp(1.4rem, 3.4vw, 2.2rem);
}

/* ---------- Ativações (zig-zag) ---------- */
.cl-activations { background: var(--branco); padding-block: clamp(64px, 9vw, 104px); }
.cl-activations__head { text-align: center; max-width: 840px; margin: 0 auto 56px; }
.cl-activations__head h2 { color: var(--roxo); font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
.cl-activations__head p { color: var(--tinta-suave); font-size: 1.08rem; margin: 14px 0 0; }

.cl-activation { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: center; }
.cl-activation + .cl-activation { margin-top: 72px; }
.cl-activation--rev .cl-activation__media { order: -1; }
.cl-activation__eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--roxo);
  background: rgba(102,36,128,.1); padding: 5px 12px; border-radius: 999px; margin-bottom: 14px;
}
.cl-activation__title { color: var(--roxo); font-size: clamp(1.4rem, 2.8vw, 2rem); margin-bottom: 12px; }
.cl-activation__content p { color: var(--tinta-suave); font-size: 1.08rem; margin: 0; }
.cl-activation__media {
  aspect-ratio: 4 / 3; border-radius: var(--raio); overflow: hidden;
  box-shadow: var(--sombra); background: var(--roxo-escuro);
}
.cl-activation__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Galeria (usa .case-carousel + lightbox do style.css) ---------- */
.cl-gallery { background: var(--roxo); padding-block: clamp(64px, 9vw, 104px); }
.cl-gallery__head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.cl-gallery__head h2 { color: var(--branco); font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.cl-gallery .case-carousel { max-width: 900px; margin-inline: auto; }
.cl-gallery .case-carousel__slide { aspect-ratio: 16 / 9; }
.cl-gallery .case-carousel__dot { background: rgba(255,255,255,.35); }
.cl-gallery .case-carousel__dot.is-active { background: var(--amarelo); }

/* ---------- Resultado ---------- */
.cl-results { background: var(--roxo); padding-block: clamp(64px, 9vw, 104px); }
.cl-results__inner { max-width: 960px; margin-inline: auto; text-align: center; }
.cl-results__eyebrow { display: inline-block; font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--amarelo); margin-bottom: 14px; }
.cl-results__title { color: var(--branco); font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin-bottom: 18px; }
.cl-results__text { color: rgba(255,255,255,.88); font-size: 1.12rem; max-width: 680px; margin: 0 auto 40px; }
.cl-results__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cl-outcome { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: var(--raio); padding: 26px 24px; text-align: left; }
.cl-outcome h3 { color: var(--amarelo); font-size: 1.16rem; margin-bottom: 8px; }
.cl-outcome p { color: rgba(255,255,255,.85); font-size: .98rem; margin: 0; }

/* ---------- CTA final ---------- */
.cl-cta { background: var(--amarelo); color: var(--roxo); padding-block: clamp(70px, 10vw, 116px); text-align: center; }
.cl-cta__inner { max-width: 780px; margin-inline: auto; }
.cl-cta__title { color: var(--roxo); font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: 16px; }
.cl-cta__title strong { color: var(--roxo); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.cl-cta__text { color: var(--roxo); font-size: 1.12rem; margin: 0 auto 30px; }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
  .cl-intro__grid { grid-template-columns: 1fr; gap: 32px; }
  .cl-activation { grid-template-columns: 1fr; gap: 26px; }
  .cl-activation__media, .cl-activation--rev .cl-activation__media { order: -1; } /* imagem sempre acima no mobile */
  .cl-results__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .cl-hero { text-align: left; }
  .cl-hero__inner { margin-inline: 0; }
  .cl-hero__logo { margin-left: 0; }
  .cl-hero__title { text-wrap: wrap; }
  .cl-hero__subtitle { margin-inline: 0; }
  .cl-activations__head, .cl-gallery__head, .cl-results__inner { text-align: left; }
  /* Seções de fundo amarelo (frase de destaque e CTA final) à esquerda no mobile */
  .cl-quote p { text-align: left; }
  .cl-cta { text-align: left; }
  .cl-cta__text { margin-inline: 0; }
}