/* =====================================================================
   Area Kids -- a vitrine infantil (/kids/index).
   Diferente de kids.css: aquele e o TEMA do Modo Kids, carregado so quando
   body.kids; este e a PAGINA, e entra tambem no ambiente adulto, porque e
   la que o pai escolhe o livro do filho. Os dois convivem sem se pisar --
   este so estiliza .kids-* da propria pagina.
   ===================================================================== */

.kids-area,
.kids-chamada {
    /* Cores do letreiro da arte, para o HTML nao destoar da ilustracao. */
    --k-azul:    #3f9be0;
    --k-amarelo: #ffd23f;
    --k-verde:   #8ec63f;
    --k-rosa:    #f2669b;
    --k-madeira: #a9743f;
    --k-creme:   #fff6e2;
    --k-ceu:     #8fd2f2;
    --k-grama:   #7fb541;
}

/* ---------------------------------------------------------------- hero */

.kids-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: min(76vh, 620px);
    /* O topo do site e `position: fixed`: a arte passa POR BAIXO dele (o
       header e um gradiente translucido, entao isso e proposital e bonito),
       mas o texto precisa comecar abaixo. Dai o padding, e nao um margin. */
    padding: calc(var(--topo-h) + 30px) clamp(16px, 4vw, 56px) 0;
    overflow: hidden;
    /* O gradiente e a rede de seguranca: enquanto a arte definitiva nao
       chega (ou se o arquivo sumir), a faixa continua sendo um prado, e
       nao um retangulo vazio. */
    background:
        linear-gradient(180deg, var(--k-ceu) 0%, #cfeaa8 58%, var(--k-grama) 100%);
}

/* O prado do lado do texto sai da PROPRIA arte, borrada e esticada por tras
   de tudo -- entao o campo da esquerda tem as flores e a luz da ilustracao,
   em vez de um degrade liso que denuncia onde a foto acaba. Fica sob a arte
   nitida por ordem de pintura: pseudo-elemento antes vem antes. */
.kids-hero::before {
    content: '';
    position: absolute;
    inset: -40px;
    background: url('../img/kids-hero.jpg') center / cover;
    filter: blur(34px) saturate(1.15) brightness(1.06);
}

.kids-hero-arte {
    position: absolute;
    inset: 0;
    background-image: url('../img/kids-hero.jpg');
    /* Altura cheia e largura natural, ancorado a direita -- e NAO `cover`.
       Com `cover`, uma faixa larga estica a arte ate os bichos ficarem
       gigantes e o campo da esquerda sair de quadro: o texto acabava por
       cima do cachorro, e nao ao lado dele. Assim a ilustracao mantem a
       proporcao, ocupa a direita e o prado desenhado preenche a esquerda. */
    background-size: auto 100%;
    background-position: right center;
    background-repeat: no-repeat;
    /* A borda esquerda da foto dissolve no gradiente do prado; sem isso a
       emenda entre foto e CSS aparece como um corte reto. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16%);
}

/* Veu so do lado do texto. Sem ele, texto escuro sobre nuvem clara some;
   com um veu de tela inteira, a ilustracao que o cliente aprovou escurece. */
.kids-hero-arte::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(255, 250, 235, .92) 0%,
        rgba(255, 250, 235, .74) 24%,
        rgba(255, 250, 235, .22) 40%,
        rgba(255, 250, 235, 0) 54%);
}

.kids-hero-conteudo {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    padding-bottom: 96px;
}

/* -------- letreiro na tabua de madeira -------- */

.kids-placa {
    display: inline-block;
    padding: 18px 34px 22px;
    border-radius: 16px;
    background:
        repeating-linear-gradient(180deg,
            rgba(0, 0, 0, .05) 0 2px, rgba(0, 0, 0, 0) 2px 26px),
        linear-gradient(160deg, #c08b52, var(--k-madeira) 60%, #8d5f30);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, .3),
        inset 0 -3px 0 rgba(0, 0, 0, .22),
        0 14px 30px rgba(90, 55, 20, .32);
    transform: rotate(-1.2deg);
}

.kids-placa .sobre {
    display: block;
    margin-bottom: -6px;
    font-size: clamp(24px, 3.4vw, 40px);
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--k-rosa);
    -webkit-text-stroke: 1px #fff;
    text-shadow: 0 3px 0 #fff, 0 5px 10px rgba(0, 0, 0, .25);
}

.kids-placa .kids {
    display: flex;
    gap: clamp(2px, .8vw, 8px);
    font-size: clamp(54px, 9vw, 104px);
    font-weight: 800;
    line-height: .95;
    letter-spacing: -2px;
}

/* Letras "infladas": cada uma ganha contorno creme grosso e um empilhamento
   de sombras que finge volume. E o mesmo efeito da arte, mas em TEXTO --
   entao ele traduz, seleciona, e fica nitido em qualquer densidade de tela. */
.kids-placa .kids span {
    color: var(--cor);
    -webkit-text-stroke: 7px var(--k-creme);
    paint-order: stroke fill;
    text-shadow:
        0 3px 0 rgba(0, 0, 0, .12),
        0 7px 0 rgba(0, 0, 0, .10),
        0 12px 18px rgba(0, 0, 0, .28);
    transform: rotate(var(--giro, 0deg));
}

.kids-placa .kids span:nth-child(1) { --cor: var(--k-azul);    --giro: -3deg; }
.kids-placa .kids span:nth-child(2) { --cor: var(--k-amarelo); --giro:  2deg; }
.kids-placa .kids span:nth-child(3) { --cor: var(--k-verde);   --giro: -2deg; }
.kids-placa .kids span:nth-child(4) { --cor: var(--k-rosa);    --giro:  3deg; }

/* -------- as duas fitas -------- */

.kids-fitas { margin: 14px 0 26px; }

.kids-fita {
    display: inline-block;
    padding: 8px 22px;
    border-radius: 8px;
    color: #fff;
    font-weight: 800;
    font-size: clamp(15px, 1.9vw, 22px);
    text-shadow: 0 2px 3px rgba(0, 0, 0, .3);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .2);
}

.kids-fita.azul { background: linear-gradient(180deg, #4aa8ea, #2a7fc0); transform: rotate(-1deg); }
.kids-fita.rosa { background: linear-gradient(180deg, #f57aa8, #d94a80); transform: rotate(1deg); margin-top: 6px; }

/* -------- balao de fala, sobre a arte -------- */

.kids-balao {
    position: absolute;
    z-index: 1;
    /* Abaixo do topo fixo, ou o balao nasce escondido atras do menu. */
    top: calc(var(--topo-h) + 26px);
    left: min(58%, 620px);
    max-width: 250px;
    padding: 16px 20px;
    border-radius: 26px;
    background: rgba(255, 255, 255, .9);
    color: #2f3b52;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.35;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
}

.kids-balao::after {
    content: '';
    position: absolute;
    left: 34px;
    bottom: -14px;
    border: 9px solid transparent;
    border-top-color: rgba(255, 255, 255, .9);
    border-right-width: 18px;
}

/* -------- chamada -------- */

.kids-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 30px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffe071, #f7c53c);
    color: #4a3208;
    font-weight: 800;
    font-size: clamp(16px, 2vw, 20px);
    box-shadow: 0 8px 0 #d9a41f, 0 16px 26px rgba(120, 80, 0, .3);
    transition: transform .15s, box-shadow .15s;
}

.kids-cta:hover {
    color: #4a3208;
    transform: translateY(-2px);
    box-shadow: 0 10px 0 #d9a41f, 0 20px 30px rgba(120, 80, 0, .34);
}

.kids-cta:active { transform: translateY(4px); box-shadow: 0 4px 0 #d9a41f; }
.kids-cta .bi-chevron-right { margin-left: 2px; font-size: 15px; }

/* -------- os tres selos do rodape do hero -------- */

.kids-selos {
    position: absolute;
    z-index: 1;
    left: clamp(16px, 4vw, 56px);
    right: clamp(16px, 4vw, 56px);
    bottom: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kids-selo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 220px;
    max-width: 320px;
    padding: 12px 18px;
    border-radius: 16px;
    background: rgba(18, 22, 40, .62);
    backdrop-filter: blur(7px);
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.25;
}

.kids-selo i { font-size: 22px; color: var(--cor, #fff); }

/* ------------------------------------------------------------- acervo */

.kids-acervo { padding-top: 34px; }

/* .cabecalho-secao reserva o topo fixo no seu padding, porque costuma abrir
   a pagina. Aqui ela vem no MEIO, depois do hero -- entao aquele respiro
   viraria um buraco. */
.kids-acervo .cabecalho-secao { padding: 30px clamp(16px, 4vw, 56px) 6px; }

/* Aviso de que o Modo Kids existe -- e o convite para entregar o aparelho.
   Fica DEPOIS do acervo: quem chegou aqui ja viu que ha o que ler. */
.kids-convite {
    margin: 10px clamp(16px, 4vw, 56px) 70px;
    padding: 26px clamp(18px, 3vw, 34px);
    border-radius: 22px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    background: linear-gradient(120deg, rgba(63, 155, 224, .16), rgba(242, 102, 155, .16));
    border: 1px solid var(--borda);
}

.kids-convite h3 { margin: 0 0 4px; font-size: 20px; }
.kids-convite p { margin: 0; color: var(--texto-2); font-size: 14.5px; max-width: 62ch; }
.kids-convite form { margin-left: auto; }

/* ================================================================
   A faixa Kids da HOME.

   Nao e uma fileira de cards a mais: e um cartaz, com a mesma arte e o
   mesmo letreiro da Area Kids. Fica ACIMA das quatro Areas da Vida porque
   Kids passou a ser o foco do produto -- quem abre a home ve primeiro o
   convite infantil e so depois a espinha dorsal adulta.
   ================================================================ */

.kids-chamada {
    position: relative;
    display: flex;
    align-items: center;
    gap: 26px;
    margin: 0 clamp(16px, 4vw, 56px) 40px;
    padding: 34px clamp(20px, 3vw, 40px);
    border-radius: 26px;
    overflow: hidden;
    min-height: 260px;
    background: linear-gradient(180deg, var(--k-ceu), #cfeaa8 60%, var(--k-grama));
    box-shadow: 0 18px 44px rgba(0, 0, 0, .42);
}

.kids-chamada-arte {
    position: absolute;
    inset: 0;
    /* 38% e nao `center`: a faixa e muito mais larga que alta, entao `cover`
       corta em cima e embaixo -- e o que importa guardar sao os rostos, que
       estao no terco superior. */
    background: url('../img/kids-hero.jpg') right 38% / cover no-repeat;
}

.kids-chamada-arte::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(255, 250, 235, .93) 0%,
        rgba(255, 250, 235, .72) 30%,
        rgba(255, 250, 235, .2) 52%,
        rgba(255, 250, 235, 0) 66%);
}

.kids-chamada-texto {
    position: relative;
    z-index: 1;
    width: min(470px, 100%);
}

/* Mesma placa do hero, em escala menor -- por variavel, e nao por regra
   duplicada, para o letreiro nunca divergir entre as duas telas. */
.kids-chamada .kids-placa { padding: 12px 24px 15px; }
.kids-chamada .kids-placa .sobre { font-size: clamp(17px, 2vw, 24px); }
.kids-chamada .kids-placa .kids { font-size: clamp(38px, 5.5vw, 62px); }
.kids-chamada .kids-placa .kids span { -webkit-text-stroke-width: 5px; }

.kids-chamada p {
    margin: 14px 0 18px;
    color: #33404f;
    font-weight: 600;
    font-size: clamp(14.5px, 1.6vw, 17px);
    max-width: 40ch;
    line-height: 1.45;
}

/* ------------------------------------------------------------ celular */

@media (max-width: 860px) {
    .kids-chamada {
        display: block;
        min-height: 0;
        padding: 0 0 24px;
        margin-bottom: 30px;
    }

    .kids-chamada-arte {
        position: relative;
        inset: auto;
        height: 40vw;
        min-height: 150px;
        max-height: 230px;
    }

    .kids-chamada-arte::after {
        background: linear-gradient(180deg,
            rgba(255, 250, 235, 0) 55%, rgba(255, 250, 235, .8) 100%);
    }

    .kids-chamada-texto {
        width: auto;
        margin-top: -14px;
        padding: 0 20px;
        text-align: center;
    }

    .kids-chamada .kids-placa .kids { justify-content: center; }
    .kids-chamada p { margin-left: auto; margin-right: auto; }
    .kids-chamada .kids-cta { width: 100%; justify-content: center; }

    .kids-hero {
        /* No celular o texto deixa de disputar espaco com a arte: ele fica
           embaixo, e a ilustracao ganha a faixa de cima inteira. */
        display: block;
        min-height: 0;
        padding-top: var(--topo-h);
    }

    .kids-hero-arte {
        position: relative;
        height: 42vw;
        min-height: 190px;
        max-height: 300px;
        inset: auto;
        margin: 0 calc(clamp(16px, 4vw, 56px) * -1);
        /* `cover` aqui, ao contrario do desktop: numa faixa baixa e estreita,
           a largura natural da arte nao chega na borda e sobrava o borrado do
           fundo de um lado so. Nao ha texto ao lado para proteger, entao
           encher e melhor -- e a mascara da esquerda perde o motivo. */
        background-size: cover;
        -webkit-mask-image: none;
        mask-image: none;
    }

    /* Veu vertical: some da esquerda (que ja nao tem texto) e vira uma
       transicao para o fundo da secao de baixo. */
    .kids-hero-arte::after {
        background: linear-gradient(180deg,
            rgba(255, 250, 235, 0) 60%, rgba(255, 250, 235, .55) 100%);
    }

    .kids-hero-conteudo {
        width: 100%;
        padding: 22px 0 26px;
        text-align: center;
    }

    .kids-placa { padding: 14px 22px 18px; }
    .kids-placa .kids { justify-content: center; }
    .kids-balao { display: none; }

    .kids-selos { position: static; padding: 0 0 26px; }
    .kids-selo { flex: 1 1 100%; max-width: none; background: rgba(18, 22, 40, .5); }

    .kids-convite form { margin-left: 0; width: 100%; }
    .kids-convite .bt { width: 100%; justify-content: center; }
}

/* Dentro do Modo Kids o fundo da pagina ja e claro: o veu creme do hero
   emenda com ele em vez de recortar um retangulo. E o topo infantil e
   `sticky` (ocupa espaco no fluxo), entao nao ha altura a reservar. */
body.kids .kids-hero { background: linear-gradient(180deg, var(--k-ceu), var(--bg)); padding-top: 30px; }
/* Sem topo fixo aqui, o balao nao precisa descer -- e descendo ele tapava
   justamente a cara do cachorro. */
body.kids .kids-balao { top: 26px; }
body.kids .kids-selo { background: rgba(60, 45, 90, .58); }
body.kids .kids-convite { display: none; }