/* ============================================================
   RESPONSIVO — BASE UNIVERSAL PARA O SITE INTEIRO
   (aplica em TODAS as seções)
============================================================ */

@media (max-width: 768px) {

    /* ===== RESET GLOBAL ===== */
    body {
        overflow-x: hidden;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    section {
        padding-left: 10px;
        padding-right: 10px;
    }

    h2.secao-titulo {
        font-size: 32px !important;
        text-align: center;
        line-height: 1.2;
        margin-bottom: 10px;
    }

    .linha-decorativa {
        max-width: 220px;
        margin: 15px auto 25px auto;
        display: block;
    }

    /* ===== BOTÕES ===== */
    .botao-iniciar {
        width: 240px !important;
        margin: 20px auto 0 auto;
    }

    .bloco-botao {
        text-align: center;
        margin-top: 10px;
    }

    /* ===== AJUSTE FINO DA LARGURA (GORDINHO MAS SEM COLAR) ===== */

    /* 1. Reduz a margem do container geral (que estava travando em 40px) */
    .conteudo-principal {
        padding-left: 5px !important;   /* <--- Aqui define a distância da borda */
        padding-right: 5px !important;  /* Só 5px de respiro (bem pouquinho) */
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* 2. Zera o padding da section pra não somar espaço à toa */
    section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 3. O quadro ocupa 100% desse espaço (vai ficar com 5px de borda livre) */
    [class*="quadro-"] {
        width: 100% !important;
        max-width: none !important;     /* Destrava a largura */
        padding: 25px 15px !important;  /* Espaço interno do texto */
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    /* ===== TEXTOS ===== */
    [class*="texto-"] p {
        font-size: 18px !important;
        line-height: 1.5 !important;
        margin-bottom: 14px;
    }

    /* ===== IMAGENS DAS SEÇÕES ===== */
    [class*="foto-"] img {
        width: 100% !important;
        max-width: 420px !important;
        margin: 20px auto !important;
        display: block !important;
    }

    /* ===================== HERO / CABEÇALHO (O QUE TÁ FALTANDO) ===================== */

    /* 1. Tira a altura fixa e o fundo do Desktop */
    .hero {
        height: auto !important;
        min-height: auto !important;
        background: none !important; 
        padding: 0 !important;
    }

    /* 2. ESSA É A CHAVE: Some com toda a estrutura do Desktop (Colunas, Título, Selo) */
    .hero-inner {
        display: none !important; 
    }

    /* 3. Força a imagem Mobile a aparecer */
    .hero-mobile {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }
    
    /* 4. Garante que a faixa de características suma */
    .faixa-caracteristicas {
        display: none !important;
    }

    /* ============================================================ */

    /* ============================================================
       AJUSTES ESPECÍFICOS POR SEÇÃO (VAZIO POR ENQUANTO)
       A GENTE VAI PREENCHER AQUI UM POR UM
    ============================================================= */

    /* — Diário — */
    /* (vamos completar quando chegarmos nessa seção) */
    /* ===================== DIÁRIO — MOBILE ===================== */
    /* 1) Esconde os restos brancos do desktop (os ícones fantasmas) */
    #diario .carac-item,
    #diario .faixa-caracteristicas,
    .faixa-caracteristicas {
        display: none !important;
    }

    /* 2) Sobe o quadro creme */
    #diario .quadro-diario {
    transform: translateY(-80px) !important;
    padding: 25px 20px !important;
    width: 100% !important;          /* ← largura total */
    max-width: 100% !important;      /* ← tira a limitação */
    box-sizing: border-box !important;
    }

    /* ===================== LINHA DECORATIVA — DIÁRIO (MOBILE) ===================== */

    /* força a linha a aumentar ignorando o desktop */
    #diario .linha-decorativa {
        display: block !important;
        width: 85% !important;          /* ← largura proporcional */
        max-width: 360px !important;    /* ← tamanho real da imagem */
        margin: 10px auto 20px auto !important;
        transform: none !important;     /* remove offsets do desktop */
        opacity: 1 !important;
    }

    #diario .linha-decorativa {
    max-width: 400px !important;   /* largura maior */
    width: 90% !important;         /* ocupa mais espaço sem distorcer */
    margin-top: 5px !important;
    margin-bottom: 20px !important;
}

    /* 3) Ajusta o título */
    #diario .secao-titulo {
        font-size: 34px !important;
        transform: translateY(0) !important;
        margin-bottom: 20px !important;
    }

    /* 4) Ajusta a linha decorativa */
    #diario .linha-decorativa {
        transform: translateY(0) !important;
        margin-top: 0 !important;
        margin-bottom: 20px !important;
        max-width: 220px !important;
    }

    /* 5) Texto de cima */
    #diario .texto-diario-top {
        transform: translateY(0) !important;
        margin-top: -10px !important;
        margin-bottom: 25px !important;
        padding: 0 5px !important;
    }

    /* 6) Bloco marrom (logo + flipbook) */
    #diario .bloco-marrom {
        transform: translateY(0) !important;
        padding: 20px 10px !important;
        margin-bottom: 25px !important;
    }

    #diario .logo-diario {
        width: 140px !important;
        margin-bottom: 20px !important;
    }

    #diario .video-flip {
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    /* 7) Texto de baixo */
    #diario .texto-diario-bottom {
        transform: translateY(0) !important;
        margin-bottom: 35px !important;
        padding: 0 5px !important;
    }

    /* 8) Botão final */
    #diario .botao-iniciar {
        transform: translateY(0) !important;
        width: 240px !important;
        margin: 10px auto 0 auto !important;
    }

    /* — Vídeo — */
    /* (vamos completar quando chegarmos nessa seção) */
    /* ===================== VÍDEO — MOBILE ===================== */

    /* desce só o conteúdo interno, sem mexer no quadro creme */
    #video .quadro-video > * {
        transform: translateY(25px) !important;
    }

    /* pequenos ajustes para manter alinhamento */
    #video .secao-titulo {
        margin-top: 15px !important;
    }

    #video .linha-decorativa {
        margin-top: 10px !important;
    }

    /* ===================== VÍDEO — FIX DO BOTÃO (MOBILE) ===================== */

    /* Isso aqui diz: "No celular, se o vídeo estiver tocando (.playing), 
       MANTENHA O BOTÃO INVISÍVEL, mesmo que o dedo esteja em cima (hover)." 
    */
    .video-moldura:hover .play-btn.playing {
        opacity: 0 !important;
    }
    
    /* — Autora — */
    /* (vamos completar quando chegarmos nessa seção) */
    /* ===================== AUTORA — MOBILE ===================== */
    #autora .quadro-autora {
        transform: translateY(-140px) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 30px !important;
        padding-top: 20px !important;
    }

    #autora .foto-autora img {
        width: 80% !important;
        max-width: 360px !important;
        margin: 0 auto 10px auto !important;
        display: block !important;
        margin-top: 0px !important;
    }

    #autora .texto-autora-top {
        width: 100% !important;
        text-align: left !important;   /* ← alinhado à esquerda */
        padding: 0 10px !important;    /* ← margem interna para não colar na borda */
        margin-top: -120px !important;
        margin-bottom: 60px !important;
    }

    #autora .texto-autora-top p {
        font-size: 18px !important;
        line-height: 1.5 !important;
        margin-bottom: 14px !important;
    }

    #autora .bloco-botao {
        width: 100% !important;
        text-align: center !important;
        margin-top: 10px !important;
    }

    #autora .botao-iniciar {
        width: 240px !important;
        margin: 0 auto !important;
    }



    /* — Etapas — */
    /* (vamos completar quando chegarmos nessa seção) */
    /* ===================== ETAPAS — MOBILE ===================== */
    #etapas .quadro-etapas {
        transform: translateY( -320px ) !important;
    }

    #etapas .secao-titulo,
    #etapas .linha-decorativa {
        transform: translateY(-200px) !important;   /* ↓ desce só o título e a linha */
    }

    #etapas .texto-etapas-top {
        width: 100% !important;
        text-align: left !important;   /* ← alinhado à esquerda */
        padding: 0 10px !important;    /* ← margem interna para não colar na borda */
        margin-top: -50px !important;
    }
    
    #etapas .bloco-paginas,
    #etapas .foto-etapas,
    #etapas .imagens-etapas {
        transform: translateY(40px) !important;   /* ↓ desce só as imagens */
    }

    /* — Reflexão — */
    /* (vamos completar quando chegarmos nessa seção) */
    /* ===================== REFLEXÃO — MOBILE ===================== */
    #reflexao .quadro-reflexao {
        transform: translateY(-460px) !important;   /* ↓ desce o quadro creme todo */
    }

    #reflexao .secao-titulo,
    #reflexao .linha-decorativa {
        transform: translateY(-380px) !important;   /* ↓ desce só o título e o ornamento */
    }

    #reflexao .texto-reflexao-top {
        width: 100% !important;
        text-align: left !important;   /* ← alinhado à esquerda */
        padding: 0 10px !important;    /* ← margem interna para não colar na borda */
        margin-top: -30px !important;
    }

    /* — Virtudes — */
    /* (vamos completar quando chegarmos nessa seção) */
    #virtudes .quadro-virtudes {
        transform: translateY(-600px) !important;   /* ↓ desce o quadro creme todo */
    }

    #virtudes .secao-titulo,
    #virtudes .linha-decorativa {
        transform: translateY(-520px) !important;   /* ↓ desce só o título e o ornamento */
    }

    #virtudes .texto-virtudes-top {
        width: 100% !important;
        text-align: left !important;   /* ← alinhado à esquerda */
        padding: 0 10px !important;    /* ← margem interna para não colar na borda */
        margin-top: -30px !important;
    }

    /* — Balanço — */
    /* (vamos completar quando chegarmos nessa seção) */
        #balanco .quadro-balanco {
        transform: translateY(-740px) !important;   /* ↓ desce o quadro creme todo */
    }

    #balanco .secao-titulo,
    #balanco .linha-decorativa {
        transform: translateY(-660px) !important;   /* ↓ desce só o título e o ornamento */
    }

    #balanco .texto-balanco-top {
        width: 100% !important;
        text-align: left !important;   /* ← alinhado à esquerda */
        padding: 0 10px !important;    /* ← margem interna para não colar na borda */
        margin-top: -30px !important;
    }

    /* — Humor — */
    /* (vamos completar quando chegarmos nessa seção) */
    #humor .quadro-humor {
        transform: translateY(-880px) !important;   /* ↓ desce o quadro creme todo */
    }

    #humor .secao-titulo,
    #humor .linha-decorativa {
        transform: translateY(-800px) !important;   /* ↓ desce só o título e o ornamento */
    }

    #humor .texto-humor-top {
        width: 100% !important;
        text-align: left !important;   /* ← alinhado à esquerda */
        padding: 0 10px !important;    /* ← margem interna para não colar na borda */
        margin-top: -30px !important;
    }

    /* — Memento Mori — */
    /* (vamos completar quando chegarmos nessa seção) */
        #memento .quadro-memento {
        transform: translateY(-1020px) !important;   /* ↓ desce o quadro creme todo */
    }

    #memento .secao-titulo,
    #memento .linha-decorativa {
        transform: translateY(-940px) !important;   /* ↓ desce só o título e o ornamento */
    }

    #memento .texto-memento-top {
        width: 100% !important;
        text-align: left !important;   /* ← alinhado à esquerda */
        padding: 0 10px !important;    /* ← margem interna para não colar na borda */
        margin-top: -30px !important;
    }

    /* — Para Quem — */
    /* (vamos completar quando chegarmos nessa seção) */

    #para_quem .quadro-para_quem {
        transform: translateY(-1200px) !important;   /* ↓ desce o quadro creme todo */
    }

    #para_quem .secao-titulo,
    #para_quem .linha-decorativa {
        transform: translateY(-1080px) !important;   /* ↓ desce só o título e o ornamento */
    }

    #para_quem .texto-para_quem-top {
        width: 100% !important;
        text-align: left !important;   /* ← alinhado à esquerda */
        padding: 0 10px !important;    /* ← margem interna para não colar na borda */
        margin-top: 0px !important;
    }

    #para_quem .foto-para_quem {
        float: none !important;
        margin: 120px auto 0 auto !important;
        text-align: center !important;
    }

    #para_quem .foto-para_quem img {
        display: block !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    /* — Por Que — */
    /* (vamos completar quando chegarmos nessa seção) */
    #por_que .quadro-por_que {
        transform: translateY(-1340px) !important;  /* se estiver bom assim, mantém */
        overflow: visible !important;               /* <<< libera o botão pra aparecer inteiro */
        padding-bottom: 60px !important;            /* dá um respiro a mais embaixo (se quiser) */
    }


    #por_que .secao-titulo,
    #memento .linha-decorativa {
        transform: translateY(-1260px) !important;   /* ↓ desce só o título e o ornamento */
    }

    #por_que .texto-por_que-top {
        width: 100% !important;
        text-align: left !important;   /* ← alinhado à esquerda */
        padding: 0 10px !important;    /* ← margem interna para não colar na borda */
        margin-top: 0px !important;
    }  
      

    /* — Última  — */
    /* (vamos completar quando chegarmos nessa seção) */
    /* — Última  — (MOBILE) */
    #ultima .quadro-ultima {
        transform: translateY(-1560px) !important;   /* mantém a posição geral do quadro */

        /* padding separado p/ você controlar melhor */
        padding-top: 250px !important;     /* NÃO mexe aqui */
        padding-right: 20px !important;
        padding-bottom: 400px !important;  /* <<< AQUI você aumenta o creme pra baixo */
        padding-left: 20px !important;

        text-align: center !important;
        overflow: visible !important;
    }

    #ultima .secao-titulo,
    #ultima .linha-decorativa {
        transform: translateY(-1400px) !important;
    }

    #ultima .texto-ultima-top {
        transform: translateY(-70px) !important;
        text-align: center !important;
        padding: 0 10px !important;
    }

    /* bloco de oferta vira UMA imagem só no mobile */
    #ultima .bloco-oferta {
        display: block !important;
        margin: -100px auto 40px auto !important;
        max-width: 565px !important;
        width: 100% !important;
        padding: 0 !important;

        background-image: url("../img/valor_mobile.png");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        aspect-ratio: 1469 / 529;
    }

    /* esconde os elementos internos (preço, texto, logo) só no mobile */
    #ultima .oferta-valor,
    #ultima .oferta-info {
        display: none !important;
    }

    /* — Última — MOBILE: selo + texto de garantia (mantém onde já estão) */
    #ultima .bloco-selo {
        margin-top: -1890px !important;   /* deixa como você já ajustou */
        margin-bottom: 0 !important;
        text-align: center !important;
        position: relative !important;
        z-index: 5 !important;
    }

    #ultima .texto-garantia {
        margin-top: 10px !important;
        max-width: 90% !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        text-align: center !important;
        position: relative !important;
        z-index: 5 !important;
    }


        /* — Pergaminho — */
    /* ===================== PERGAMINHO / CONTATO — MOBILE ===================== */

    /* controla a posição VERTICAL do pergaminho em relação à Última */
    .secao-pergaminho {
        margin-top: -450px !important;     /* sobe/desce o bloco todo */
        margin-bottom: 0 !important;
    }

    /* Pergaminho desenhado lá em cima */
    #pergaminho .bloco-pergaminho {
        text-align: center !important;
        margin-bottom: 25px !important;
    }

    #pergaminho .imagem-pergaminho {
        display: block !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    /* Container geral do contato: EMPILHADO */
    #pergaminho .pergaminho-contato {
        margin-top: 0 !important;
    }

    #pergaminho .contato-container {
        display: flex !important;
        flex-direction: column !important;   /* tudo um embaixo do outro */
        gap: 20px !important;
        align-items: stretch !important;
    }

    #pergaminho .contato-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;

    /* CENTRALIZA O BLOCO INTEIRO NA PÁGINA */
    width: fit-content !important;
    margin: 0 auto !important;

    /* sobe um pouco */
    margin-top: -40px !important;

    align-items: flex-start !important;  /* mantém o layout do texto igual ao desktop */
}

    /* Mata as posições ABSOLUTAS do desktop só aqui */
    #pergaminho .contato-social,
    #pergaminho .contato-logo,
    #pergaminho .contato-form-wrapper {
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
    }

    /* Lista de contatos (email / amazon / insta) em coluna normal */
    #pergaminho .contato-social {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        align-items: flex-start !important;
    }

    #pergaminho .contato-social-item {
        justify-content: flex-start !important;
        display: flex !important; /* Garante que os outros apareçam */
    }

    /* === AQUI ESTÁ A CORREÇÃO === */
    /* Caça o item que tem o link de email e esconde o bloco todo */
    #pergaminho .contato-social-item:has(a[href^="mailto"]) {
        display: none !important;
    }

    /* PLANO B (Segurança extra): Se o comando de cima falhar, 
       esconde o link e a imagem do email na força bruta */
    #pergaminho a[href^="mailto"], 
    #pergaminho img[src*="email"] {
        display: none !important;
    }

    /* Logo centralizado */
    #pergaminho .contato-logo img {
        display: block !important;
        max-width: 220px !important;
        margin: 0 auto !important;
        height: auto !important;
    }

    /* Formulário ocupa toda a largura */
    #pergaminho .contato-form-wrapper {
        margin-top: 10px !important;
    }

    #pergaminho .contato-form-wrapper form {
        width: 100% !important;
    }

    #pergaminho .form-group input[type="text"],
    #pergaminho .form-group input[type="email"],
    #pergaminho .form-group textarea {
        font-size: 16px !important;
    }

    /* Checkbox e texto alinhados direitinho */
    #pergaminho .form-group-checkbox {
        align-items: flex-start !important;
    }

    /* Rodapé "Aurora Estoica 2025" centralizado lá embaixo */
    #pergaminho .rodape-credito {
        margin-top: -20px !important;
        text-align: center !important;
    }

    #pergaminho .texto-credito {
        font-size: 14px !important;
    }

    /* esconde linha decorativa no mobile */
    .linha-decorativa {
        display: none !important;
    }

} /* ← ESTE é o ÚNICO } que fecha o @media (max-width: 768px) lá de cima */