/* =====================================================================
 * CHAMADA DO CANAL DO WHATSAPP — Blog Canela RS
 * Criado em 23/09/2026. Revisado no mesmo dia duas vezes: para entrar
 * no rodapé dos artigos, e para dividir a linha com o banner de
 * descontos na home.
 *
 * Fica em themes/wc_blogcanelars/wc_css/ porque o index.php da raiz
 * carrega sozinho todo .css dessa pasta (linhas 231-236). Não precisa
 * declarar o arquivo em lugar nenhum.
 *
 * ---------------------------------------------------------------------
 * O QUE É
 *
 * Opção C do preview — cartão branco com filete verde na lateral — com
 * o anel pulsante da opção A em volta do ícone. O cartão claro não
 * briga com o banner de descontos ao lado, e o anel devolve o movimento
 * que o cartão claro não tinha. O olho é chamado pelo ponto verde, não
 * pela faixa inteira.
 *
 * ---------------------------------------------------------------------
 * AS TRÊS VARIANTES, E POR QUE ELAS PRECISAM DE CORTES DIFERENTES
 *
 * O mesmo cartão vive hoje em dois lugares de larguras bem diferentes,
 * e a largura disponível é o que decide se ele cabe em uma linha.
 * MEDIDO, não suposto:
 *
 *   --home    largura cheia (10 de 12 colunas). Sobra espaço: uma linha
 *             só a partir de 769px. Hoje não está em uso na home, que
 *             passou a usar --coluna, mas continua aqui porque é a
 *             forma certa para qualquer página de largura inteira.
 *
 *   --artigo  dentro da coluna de conteúdo, que é 8/12 e divide a tela
 *             com a barra lateral. Em 1024px isso dá 610px de cartão e
 *             sobram 266px para o texto, que quebrava em TRÊS linhas e
 *             encostava no botão. Linha só a partir de 1200px.
 *
 *   --coluna  dentro de uma coluna estreita, dividindo a linha com o
 *             banner de descontos. Nunca vira linha; estica na altura
 *             para acompanhar o vizinho.
 *
 * Por isso o arquivo é escrito ao contrário do intuitivo: EMPILHADO é o
 * padrão, e a linha única é a exceção, ligada por min-width. Uma regra
 * só não serviria para os três sem deixar algum deles apertado.
 *
 * ---------------------------------------------------------------------
 * REGRAS QUE VALEM AQUI (as mesmas de agosto)
 *
 * • Nenhum transform, filter ou will-change sobre TEXTO. Promover texto
 *   para camada de GPU derruba o antisserrilhado de subpixel e o
 *   desenho fica borrado. Foi o que aconteceu com os botões do site.
 *   O transform aqui só toca em dois elementos sem texto: o anel
 *   (::after do ícone) e a seta (svg).
 * • Quem pede menos animação no sistema recebe menos animação.
 * • Tudo com prefixo .wc-canal / .wc-dupla, para não encostar em nada
 *   do template.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * O ESPAÇO EM VOLTA, POR VARIANTE
 * ------------------------------------------------------------------- */

.wc-canal-bloco--home {
    padding-bottom: 10px;
}

/* No artigo o bloco entra logo abaixo da barra cinza de compartilhar,
   que não tem margem embaixo nenhuma (ver _cdn/widgets/share/
   share.wc.css) — sem este respiro o cartão cola nela. */
.wc-canal-bloco--artigo {
    margin-top: 24px;
    margin-bottom: 30px;
}

/* Na dupla quem cuida do espaçamento é a linha, não o bloco. Aqui só
   interessa esticar: o height:100% precisa de cadeia contínua, do
   .col do Bootstrap até o <a>, senão para no meio do caminho. */
.wc-canal-bloco--coluna,
.wc-canal-bloco--coluna .wc-canal {
    height: 100%;
}

/* ---------------------------------------------------------------------
 * O CARTÃO — forma empilhada, que é o padrão
 *
 * O elemento inteiro é o link. No celular isso importa mais do que
 * parece: a área de toque passa a ser o cartão todo, e não só o botão.
 * Por isso o "botão" lá dentro é um <span> — <a> dentro de <a> é HTML
 * inválido e o navegador desmonta a árvore.
 * ------------------------------------------------------------------- */
.wc-canal {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;

    padding: 18px;
    background: #fff;
    border: 1px solid #d3ecdd;
    border-left: 5px solid #25d366;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(60, 20, 45, .07);

    text-decoration: none;
    /* O template pinta <a> de roxo em vários lugares. Aqui cada parte
       tem a cor própria, então a herança é neutralizada na raiz. */
    color: inherit;

    transition: box-shadow .16s ease, border-color .16s ease;
}

.wc-canal:hover,
.wc-canal:focus {
    text-decoration: none;
    color: inherit;
    border-color: #a8dfc0;
    border-left-color: #25d366;
    box-shadow: 0 10px 24px rgba(60, 20, 45, .12);
}

.wc-canal:focus-visible {
    outline: 3px solid #128c7e;
    outline-offset: 3px;
}

/* ---------------------------------------------------------------------
 * O ÍCONE E O ANEL
 *
 * O anel é um ::after em absolute que nasce do tamanho exato do círculo
 * e cresce para fora até sumir. Não usa box-shadow animado de propósito:
 * animar box-shadow repinta a área inteira a cada quadro, enquanto
 * transform + opacity ficam na composição e não custam layout.
 *
 * pointer-events: none porque o anel passa por cima do ícone durante a
 * animação, e sem isso ele roubaria o clique em alguns navegadores.
 * ------------------------------------------------------------------- */
.wc-canal__ico {
    position: relative;
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #e9f9ef;

    display: flex;
    align-items: center;
    justify-content: center;
}

.wc-canal__ico svg {
    display: block;
    width: 28px;
    height: 28px;
    fill: #128c7e;
}

.wc-canal__ico::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, .8);
    pointer-events: none;
    animation: wc-canal-anel 2.6s ease-out infinite;
}

@keyframes wc-canal-anel {
      0% { transform: scale(1);    opacity: .8 }
     70% { transform: scale(1.45); opacity: 0  }
    100% { transform: scale(1.45); opacity: 0  }
}

/* ---------------------------------------------------------------------
 * O TEXTO
 *
 * A pergunta é o que para o olho; a explicação é o que convence. Por
 * isso a primeira linha é forte e roxa (a cor dos títulos do site) e a
 * segunda é cinza e menor.
 *
 * min-width: 0 no flex-item que contém texto é obrigatório quando o
 * cartão vira linha: sem ele o item não encolhe abaixo do conteúdo e
 * empurra o botão para fora.
 * ------------------------------------------------------------------- */
.wc-canal__txt {
    flex: 1 1 auto;
    min-width: 0;
}

.wc-canal__titulo {
    display: block;
    margin-bottom: 4px;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.25;
    color: #852b5b;
}

.wc-canal__linha {
    display: block;
    font-size: 12.5px;
    line-height: 18px;
    color: #7d7280;
}

/* ---------------------------------------------------------------------
 * O BOTÃO (um span, não um link — ver acima)
 * ------------------------------------------------------------------- */
.wc-canal__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;

    padding: 12px 22px;
    border-radius: 8px;
    background: #25d366;
    box-shadow: 0 5px 14px rgba(37, 211, 102, .3);

    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    /* Verde #25d366 com texto branco dá contraste 1.8:1 — ilegível.
       Com este verde-escuro quase preto dá 9.4:1. */
    color: #08381d;

    transition: box-shadow .16s ease, background-color .16s ease;
}

.wc-canal:hover .wc-canal__btn {
    background: #1fc25d;
    box-shadow: 0 8px 20px rgba(37, 211, 102, .42);
}

.wc-canal__btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: #08381d;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .16s ease;
}

/* A seta anda 3px quando o mouse chega. É um svg, não texto — pode
   receber transform sem borrar. */
.wc-canal:hover .wc-canal__btn svg {
    transform: translateX(3px);
}

/* =====================================================================
 * A LINHA ÚNICA
 *
 * As duas regras abaixo são idênticas de propósito. O que muda é só o
 * ponto em que cada uma acende, e por isso não dá para juntar: media
 * query não aceita var(), então a largura de corte precisa estar
 * escrita na própria regra. A variante --coluna não aparece aqui: ela
 * nunca vira linha.
 * ===================================================================== */

/* --- HOME: 10 colunas de 12, cabe a partir de 769px ------------------
 * 769 é o mesmo corte do menu do celular. Os dois precisam concordar;
 * se um virasse em 768 e o outro em 769 existiria uma largura com
 * comportamento misturado.
 * ------------------------------------------------------------------- */
@media (min-width: 769px) {
    .wc-canal-bloco--home .wc-canal {
        flex-direction: row;
        align-items: center;
        gap: 18px;
        padding: 20px 24px;
    }

    .wc-canal-bloco--home .wc-canal__btn      { width: auto; }
    .wc-canal-bloco--home .wc-canal__titulo   { font-size: 16.5px; }
    .wc-canal-bloco--home .wc-canal__linha    { font-size: 13.5px; line-height: 20px; }
}

/* --- ARTIGO: 8 colunas de 12, ao lado da barra lateral ---------------
 * Só a partir de 1200px (o ponto xl do Bootstrap, onde o container vai
 * a 1336px) a coluna de conteúdo passa de 700px e o texto cabe em duas
 * linhas ao lado do botão. Abaixo disso o empilhado é melhor — e o
 * botão de largura inteira ainda por cima acerta mais o dedo.
 * ------------------------------------------------------------------- */
@media (min-width: 1200px) {
    .wc-canal-bloco--artigo .wc-canal {
        flex-direction: row;
        align-items: center;
        gap: 18px;
        padding: 20px 24px;
    }

    .wc-canal-bloco--artigo .wc-canal__btn    { width: auto; }
    .wc-canal-bloco--artigo .wc-canal__titulo { font-size: 16.5px; }
    .wc-canal-bloco--artigo .wc-canal__linha  { font-size: 13.5px; line-height: 20px; }
}

/* =====================================================================
 * A DUPLA DA HOME — banner de descontos + canal na mesma linha
 *
 * ---------------------------------------------------------------------
 * A GEOMETRIA, QUE É O QUE MANDA AQUI
 *
 * O banner é uma imagem de 715 x 273 (proporção 2,62). Imagem tem
 * proporção fixa: se a coluna dela tem 712px, a altura é 272px e ponto
 * final. Não dá para "pedir" outra altura sem esticar ou cortar o
 * desenho — e cortar um banner que é todo texto está fora de questão.
 *
 * Esses 273px de altura são novos. O arquivo original tinha 300px, mas
 * 15px em cima e 12px embaixo eram TRANSPARENTES — margem sobrando na
 * exportação. O navegador reservava esses 27px e o cartão, alinhado
 * pela CAIXA da imagem, sobrava 27px além do desenho visível. Era a
 * altura a mais que aparecia na tela sem estar em lugar nenhum do CSS.
 * O arquivo desconto-capa-m-sem-borda.png é o mesmo desenho sem essa
 * margem; o original ficou na pasta, intocado.
 *
 * Então quem manda na altura da linha é o BANNER, e o cartão é que
 * acompanha. É o contrário do que parece: o cartão é o elemento
 * flexível, a imagem é a rígida.
 *
 * Isso funciona porque o .row do Bootstrap é flex com align-items:
 * stretch, então as duas colunas já saem da mesma altura. O que faltava
 * era a cadeia de height:100% para o esticão chegar até o <a>.
 *
 * ---------------------------------------------------------------------
 * POR QUE 1300px
 *
 * A tabela com a varredura está logo abaixo, junto da regra. Resumo:
 * abaixo de ~1280px o cartão é mais alto que o banner por mais que se
 * aperte, e aí quem sobra é o banner. Empilhado é melhor que torto.
 * ===================================================================== */

/* A imagem precisa acompanhar a coluna. Sem isto ela para nos 715px
   naturais e a dupla fica torta em qualquer largura diferente disso —
   inclusive no celular, onde era o desalinhamento que se via. */
.wc-dupla__banner img {
    display: block;
    width: 100%;
    height: auto;
}

/* --- EMPILHADO (até 1299px) ------------------------------------------
 *
 * O vão entre os dois eram cerca de 70px, somando o .mb-2 da imagem com
 * as folgas dos dois blocos. Caiu para 14px e ficou APERTADO demais: as
 * duas peças são brancas sobre o rosa, então 14px de fundo entre elas
 * lê como um fio, não como respiro. Subiu para 24px.
 *
 * 24 e não 40: os 40 de fora separam SEÇÕES, os 24 de dentro separam
 * duas peças que são um par. Se os três fossem iguais, o par se
 * desmancharia e viraria dois blocos soltos na página.
 *
 * As folgas de FORA também estavam tortas: 50px acima do banner e 90px
 * abaixo do cartão até o título PASSEIOS. Os 90 eram a soma de duas
 * coisas — os 50 de baixo do .space-small daqui mais os 40 de cima do
 * .space-medium do PASSEIOS.
 *
 * A saída é zerar a folga de baixo desta seção e deixar o PASSEIOS
 * mandar nela sozinho: sobram os 40px dele. Aí é só igualar a de cima em
 * 40 e as duas batem, sem encostar no .space-small nem no .space-medium,
 * que são classes do template usadas na página inteira.
 * ------------------------------------------------------------------- */
@media (max-width: 1299px) {
    .wc-dupla-secao {
        padding-top: 40px;
        padding-bottom: 0;
    }

    .wc-dupla__banner {
        margin-bottom: 24px;
    }
}

/* --- CELULAR: os dois cartões do mesmo tamanho -----------------------
 *
 * No celular o banner fica baixo — 137px numa tela de 390 — porque é uma
 * imagem larga (proporção 2,62) espremida numa coluna estreita. O cartão
 * empilhado media 225px, quase o dobro, e a dupla parecia desemparelhada.
 *
 * Duas mudanças resolvem:
 *
 * 1. O ícone sai da linha dele e vai para o lado do texto. Só isso corta
 *    64px (os 50 do ícone mais o vão). O layout vira grade de duas
 *    colunas com o botão atravessando embaixo — que é o mesmo desenho,
 *    só mais compacto.
 *
 * 2. aspect-ratio com a proporção EXATA do banner. Como os dois têm a
 *    mesma largura, a mesma proporção dá a mesma altura, em qualquer
 *    telefone, sem número mágico e sem medir nada em JavaScript.
 *
 * MEDIDO, e vale dizer onde não fecha: de 390px para cima bate exato. Em
 * 360px (telefone antigo) o texto do convite ocupa três linhas e o
 * conteúdo pede ~14px a mais do que a proporção reserva — o cartão passa
 * esses 14px do banner em vez de bater. Fechar isso ali exigiria encurtar
 * a frase, e a frase é sua. 14px contra os 88px de antes.
 *
 * Vale só até 767px. Acima disso o banner cresce muito (263px em 768,
 * 396px em 1299) e forçar o cartão a acompanhar deixaria um cartão
 * enorme e vazio — ali a diferença natural é bem menor e não incomoda.
 * ------------------------------------------------------------------- */
@media (max-width: 767px) {
    .wc-canal-bloco--coluna .wc-canal {
        /* grade em vez de coluna: ícone e texto lado a lado em cima,
           botão atravessando embaixo */
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "ico txt"
            "btn btn";
        align-items: center;
        column-gap: 12px;
        row-gap: 10px;

        height: auto;          /* vence o height:100% da variante */
        padding: 12px;
        aspect-ratio: 715 / 273;
    }

    .wc-canal-bloco--coluna .wc-canal__ico {
        grid-area: ico;
        width: 42px;
        height: 42px;
    }

    .wc-canal-bloco--coluna .wc-canal__ico svg {
        width: 24px;
        height: 24px;
    }

    .wc-canal-bloco--coluna .wc-canal__txt {
        grid-area: txt;
    }

    .wc-canal-bloco--coluna .wc-canal__titulo {
        font-size: 14.5px;
        margin-bottom: 2px;
    }

    .wc-canal-bloco--coluna .wc-canal__linha {
        font-size: 11.5px;
        line-height: 16px;
    }

    .wc-canal-bloco--coluna .wc-canal__btn {
        grid-area: btn;
        padding: 9px 16px;
        font-size: 12px;
    }
}

/* --- LADO A LADO (1300px para cima) ---------------------------------
 *
 * A divisão 8/4 não usa col-xl porque o ponto xl do Bootstrap é 1200px,
 * e 1200 não serve. MEDIDO, varrendo de 1200 a 1920 de 40 em 40:
 *
 *     1200px   banner 243px de altura   cartão precisa de 279   +36
 *     1240px   banner 252px             cartão precisa de 279   +27
 *     1280px   banner 260px             cartão precisa de 259    -1
 *     1320px   banner 269px             cartão precisa de 259   -10
 *     1360px+  banner 272px             cartão precisa de 259   -13
 *
 * Abaixo de ~1280 o cartão é mais alto que o banner por mais que se
 * aperte: a coluna dele fica com 303px, o título quebra em duas linhas
 * e o texto em três. Testei também 7/5 e 9/3 nessa largura — em 7/5 o
 * banner encolhe junto e continua perdendo; em 9/3 o cartão vai a
 * 376px. Não existe divisão que feche em 1200px.
 *
 * Então o corte é 1300px, com 13px de folga sobre o pior caso (1280).
 * Quem tem menos que isso vê os dois empilhados, que é um arranjo
 * inteiro e bonito, em vez de um lado a lado torto.
 * ------------------------------------------------------------------- */
@media (min-width: 1300px) {

    .wc-dupla__banner {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
        /* Rede de segurança: se algum dia o texto crescer e o cartão
           passar o banner, a imagem fica centralizada em vez de criar
           um degrau embaixo. */
        display: flex;
        align-items: center;
    }

    .wc-dupla__banner > a {
        width: 100%;
    }

    .wc-dupla__canal {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    /* O cartão fica com uns 13px de altura sobrando. Duas saídas foram
       desenhadas e comparadas lado a lado: espalhar (ícone em cima,
       botão no pé) abria um vão morto entre o texto e o botão e os três
       pedaços ficavam soltos. Agrupar no centro, com folga igual em
       cima e embaixo, faz o cartão ler como uma peça só.

       O flex: 0 0 auto no texto é o que permite isso. Com o
       flex: 1 1 auto que ele tem por padrão, o texto CRESCIA para
       ocupar a sobra e o justify-content não tinha efeito nenhum —
       item que estica não deixa nada para distribuir. */
    .wc-canal-bloco--coluna .wc-canal {
        justify-content: center;
        gap: 14px;
        padding: 18px 22px;
    }

    .wc-canal-bloco--coluna .wc-canal__txt {
        flex: 0 0 auto;
        width: 100%;
    }

    .wc-canal-bloco--coluna .wc-canal__titulo {
        font-size: 16.5px;
    }

    .wc-canal-bloco--coluna .wc-canal__linha {
        font-size: 13.5px;
        line-height: 20px;
    }
}

/* ---------------------------------------------------------------------
 * MENOS ANIMAÇÃO
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .wc-canal__ico::after {
        animation: none;
    }

    .wc-canal,
    .wc-canal__btn,
    .wc-canal__btn svg {
        transition: none;
    }
}