/* IQHoney — VSL03/L5 (BuyGoods)
   Camada da mecânica de pitch, por cima do CSS clonado:
   1) a VSL é 9:16 (vertical) — o palco do vídeo é dimensionado pela ALTURA da
      viewport, senão um vertical em largura total estoura a tela;
   2) no pitch o botão aparece, a headline sai e o vídeo encolhe 30%, pra vídeo
      + CTA caberem juntos sem scroll (mesmo comportamento da PV do CardioFlush). */

/* ---- Palco da VSL (9:16) -------------------------------------------------- */

.page-content .video-section {
    display: flex;
    justify-content: center;
}

.page-content .video-section #video {
    /* O player define a própria altura a partir da largura, então quem limita a
       VSL vertical é a LARGURA: 9/16 da altura-teto (76% da viewport) — assim um
       9:16 nunca passa de 76svh e um 16:9 não deixa faixa vazia embaixo. */
    width: min(100%, calc(76svh * 9 / 16));
    margin: 0 auto;
    transition: width .45s ease;
}

/* ---- Pós-pitch: CTA ------------------------------------------------------- */

.cta-postpitch {
    padding: 14px 12px 22px;
    text-align: center;
}

.cta-postpitch__button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 620px;
    min-height: 74px;
    margin: 0 auto;
    padding: 14px 18px;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(180deg, #35d46f, #159c48);
    color: #fff;
    font-size: clamp(20px, 5.4vw, 30px);
    font-weight: 900;
    line-height: 1.12;
    text-align: center;
    text-decoration: none;
    text-wrap: balance;
    text-shadow: 0 2px 6px rgba(6, 68, 30, .35);
    animation: ctaPulse 1.5s ease-in-out infinite;
}

/* brilho é filho pra varrer o rótulo sem herdar o transform do pulse */

.cta-postpitch__button::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 42%;
    height: 100%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-18deg);
    animation: ctaSheen 3s ease-in-out infinite;
}

.cta-postpitch__button:hover,
.cta-postpitch__button:focus-visible {
    background: linear-gradient(180deg, #3ee07a, #17ac4f);
    color: #fff;
}

@keyframes ctaPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 10px 22px rgba(21, 156, 72, .3);
    }
    50% {
        transform: scale(1.035);
        box-shadow: 0 18px 38px rgba(53, 212, 111, .55);
    }
}

@keyframes ctaSheen {
    0% {
        left: -60%;
    }
    55%,
    100% {
        left: 125%;
    }
}

/* ---- Estado revelado (pitch) ---------------------------------------------- */

/* a headline levou o leitor até aqui; a partir do CTA ela só concorre */

body.is-revealed .a-i-e-cont {
    display: none;
}

/* No pitch a VSL encolhe pra caber junto do CTA — mas larga o suficiente pra não
   sobrar faixa nas laterais (igual à PV do CardioClear: ~300px, 270 em telas
   baixas). */

body.is-revealed .page-content .video-section #video {
    width: min(300px, 92%);
}

@media (max-width: 719px) and (max-height: 720px) {
    body.is-revealed .page-content .video-section #video {
        width: min(270px, 92%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cta-postpitch__button {
        animation: none;
        box-shadow: 0 12px 24px rgba(21, 156, 72, .35);
    }
    .cta-postpitch__button::after {
        display: none;
    }
    .page-content .video-section #video {
        transition: none;
    }
}

/* Os comentários levaram o leitor até o pitch (o script "Hide Comments after
   video" do original mirava #fb-comments, que esta página não tem). Fora da
   tela eles só empurrariam o CTA pra baixo da dobra. */

body.is-revealed .init-comments {
    display: none;
}

/* ---- Contador de estoque (abaixo do CTA) — igual à PV do CardioClear ------ *
   Fundo desta página é branco (skin CBS), então o número fica escuro pra
   contrastar (na CardioClear o fundo é preto e o número é branco). */

.cta-postpitch__stock {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 14px 0 0;
    color: #e11d1d;
    font-size: clamp(18px, 5vw, 24px);
    font-weight: 700;
    letter-spacing: .01em;
}

.cta-postpitch__stock strong {
    display: inline-block;
    min-width: 1.6em;
    color: #111;
    font-size: 1.12em;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.cta-postpitch__stock strong.is-dropping {
    animation: stockDrop .34s ease-out;
}

.cta-postpitch__stock-dot {
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #ef2626;
    box-shadow: 0 0 0 0 rgba(239, 38, 38, .7);
    animation: stockDot 1.6s ease-out infinite;
}

@keyframes stockDot {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 38, 38, .7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(239, 38, 38, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(239, 38, 38, 0);
    }
}

@keyframes stockDrop {
    0% {
        transform: translateY(-3px);
        color: #ef2626;
    }
    55% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(0);
        color: #111;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cta-postpitch__stock-dot,
    .cta-postpitch__stock strong.is-dropping {
        animation: none;
    }
}

/* ---- Mobile: menos espaçamento no topo + VSL cheia (igual usecardioclear) - *
   O "espaçamento em branco" lateral do vídeo vinha do padding do .page-content
   (24px). Aqui o topo (header→título→data) é comprimido pra VSL subir e a
   largura é liberada; o 9:16 passa a estourar a dobra de propósito — o autoscroll
   no 1º play centraliza. */

@media (max-width: 767px) {
    .a-i-e-cont {
        margin: 6px auto;
    }
    .a-i-e-cont .container {
        padding: 8px 12px 0;
    }
    .title {
        font-size: 21px !important;
        line-height: 1.22;
        margin: 0 0 8px;
    }
    .updated-date {
        font-size: 12px;
        margin-bottom: 10px;
    }
    /* A VSL preenche a largura (só o gutter de 24px do page-content sobra) em
       QUALQUER altura de tela. Sem o teto por altura (76svh) o vídeo não fica
       mais estreito em celular pequeno; o 9:16 estoura a dobra e o autoscroll no
       1º play centraliza. */
    .page-content .video-section #video {
        width: 100%;
    }
}

/* ---- Pós-pitch: encosta CTA no vídeo ------------------------------------- *
   O vão grande vídeo→CTA vinha do padding-bottom:40px da .news-page somado aos
   paddings do CTA. No estado revelado a gente fecha esses vãos pra vídeo + CTA
   + contador ficarem coladinhos (igual à PV do CardioClear). */

body.is-revealed .news-page {
    padding-bottom: 4px;
}

body.is-revealed .page-content {
    padding-bottom: 0;
}

body.is-revealed .cta-postpitch {
    padding: 6px 12px 14px;
}