/* ==========================================
   1. CONFIGURAÇÕES GERAIS E VARIÁVEIS
========================================== */

:root {

    --cor-predominante: #1B3B22;

    --cor-branca: #FFFFFF;

    --cor-texto-escura: #1B3B22;

    --cor-sombra-escura: rgba(0, 0, 0, 0.30);

    /* DOURADO */
    --degrau-ouro-1: #c5a059;
    --degrau-ouro-2: #947436;
    --borda-ouro: #735926;

    --cor-texto-barra: #1a1a1a;

    /* BARRA */
    --barra-bg:
        linear-gradient(
            145deg,
            var(--degrau-ouro-1),
            var(--degrau-ouro-2)
        );

    --barra-border:
        1px solid var(--borda-ouro);

    --barra-shadow:
        inset 0px 1px 2px rgba(255,255,255,0.2),
        0px 4px 6px rgba(0,0,0,0.30);

    --barra-font-style: italic;
}

/* ==========================================
   2. MODELOS DE CORES
========================================== */

/* MODELO 01: Verde escuro + Barra Dourada */
.app-container.modelo01 {
    --cor-predominante: #1B3B22;
    --cor-texto-escura: #1B3B22;
    --barra-bg: linear-gradient(145deg, #c5a059, #947436);
    --barra-border: 1px solid #735926;
    --barra-shadow: inset 0px 1px 2px rgba(255,255,255,0.2), 0px 4px 6px rgba(0,0,0,0.30);
    --barra-font-style: italic;
    --cor-texto-barra: #1a1a1a;
}

/* MODELO 02: Verde claro + Barra Dourada */
.app-container.modelo02 {
    --cor-predominante: #809758;
    --cor-texto-escura: #2d4a22;
    --barra-bg: linear-gradient(145deg, #c5a059, #947436);
    --barra-border: 1px solid #735926;
    --barra-shadow: inset 0px 1px 2px rgba(255,255,255,0.2), 0px 4px 6px rgba(0,0,0,0.30);
    --barra-font-style: italic;
    --cor-texto-barra: #1a1a1a;
}

/* MODELO 03: Azul claro + Barra Dourada */
.app-container.modelo03 {
    --cor-predominante: #4A90E2;
    --cor-texto-escura: #1a4d8c;
    --barra-bg: linear-gradient(145deg, #c5a059, #947436);
    --barra-border: 1px solid #735926;
    --barra-shadow: inset 0px 1px 2px rgba(255,255,255,0.2), 0px 4px 6px rgba(0,0,0,0.30);
    --barra-font-style: italic;
    --cor-texto-barra: #1a1a1a;
}

/* MODELO 04: Verde escuro + Barra Branca */
.app-container.modelo04 {
    --cor-predominante: #1B3B22;
    --cor-texto-escura: #1B3B22;
    --barra-bg: #FFFFFF;
    --barra-border: 1px solid rgba(0,0,0,0.10);
    --barra-shadow: 0px 4px 6px rgba(0,0,0,0.30);
    --barra-font-style: normal;
    --cor-texto-barra: #1B3B22;
}

/* MODELO 05: Verde claro + Barra Branca */
.app-container.modelo05 {
    --cor-predominante: #809758;
    --cor-texto-escura: #2d4a22;
    --barra-bg: #FFFFFF;
    --barra-border: 1px solid rgba(0,0,0,0.10);
    --barra-shadow: 0px 4px 6px rgba(0,0,0,0.30);
    --barra-font-style: normal;
    --cor-texto-barra: #2d4a22;
}

/* MODELO 06: Azul claro + Barra Branca */
.app-container.modelo06 {
    --cor-predominante: #4A90E2;
    --cor-texto-escura: #1a4d8c;
    --barra-bg: #FFFFFF;
    --barra-border: 1px solid rgba(0,0,0,0.10);
    --barra-shadow: 0px 4px 6px rgba(0,0,0,0.30);
    --barra-font-style: normal;
    --cor-texto-barra: #1a4d8c;
}

/* ==========================================
   RESET
========================================== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;
}

/* ==========================================
   BODY
========================================== */

body {

    background-color: #f0f2f5;

    font-family: 'Montserrat', sans-serif;

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 100vh;

    padding: 15px;
}

/* ==========================================
   APP CONTAINER
========================================== */

.app-container {

    background-color: var(--cor-predominante);

    width: 100%;

    max-width: 390px;

    height: 840px;

    padding: 20px 24px 25px 24px;

    display: flex;

    flex-direction: column;

    box-shadow:
        0 20px 40px rgba(0,0,0,0.40);

    position: relative;

    overflow: hidden;

    border-radius: 24px;

    transition: background-color 0.3s ease;
}

/* ==========================================
   CABEÇALHO
========================================== */

.app-header {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 12px;

    width: fit-content;

    margin: 15px auto 18px auto;
}

/* ==========================================
   LOGO
========================================== */

.logo-container {

    width: 120px;

    height: 120px;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-shrink: 0;
}

.app-logo {

    width: 100%;

    height: 100%;

    object-fit: contain;
}

/* ==========================================
   TEXTO CABEÇALHO
========================================== */

.header-text {

    display: flex;

    flex-direction: column;

    justify-content: center;

    text-align: center;
}

.header-text h1 {

    font-family: 'Playfair Display', serif;

    color: #FFFFFF;

    font-size: 32px;

    line-height: 1.05;

    font-weight: 500;

    word-break: break-word;

    margin: 0;
}

.header-text h2 {

    font-family: 'Montserrat', sans-serif;

    color: rgba(255,255,255,0.75);

    font-size: 13px;

    font-weight: 300;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin-top: 4px;

    text-align: center;
}

/* ==========================================
   LINHAS DO NOME
========================================== */

.linha-nome {

    display: block;

    width: 100%;

    text-align: center;

    line-height: 1.0;
}

.linha-sobrenome {

    display: block;

    width: 100%;

    text-align: center;

    line-height: 1.0;
}
/* ==========================================
  /* ==========================================
BARRA DOURADA
========================================== */

.destaque-bar {

    background: var(--barra-bg);

    border: var(--barra-border);

    border-radius: 18px;

    padding: 2px 12px;

    text-align: center;

    box-shadow: var(--barra-shadow);

    margin-top: 12px;

    margin-bottom: 18px;

    width: 88%;

    margin-left: auto;

    margin-right: auto;
}

.destaque-bar span {

    font-family: 'Playfair Display', serif;

    font-style: var(--barra-font-style);

    color: var(--cor-texto-barra);

    font-size: 18px;

    font-weight: 600;
}

/* ==========================================
  /* ==========================================
CAIXA CENTRAL
========================================== */

/* ==========================================
CAIXA CENTRAL
========================================== */

.main-banner {

    background-color: #FFFFFF;

    width: 100%;

    flex: 1;

    border-radius: 20px;

    padding: 12px;

    overflow-y: auto;

    margin-bottom: 14px;

    min-height: 185px;

    box-shadow:
        inset 0px 1px 5px rgba(0,0,0,0.07);

    color: #333333;

    line-height: 1.5;

    font-size: 14px;
}

/* ESPAÇAMENTO ENTRE AS MEDITAÇÕES */

.dia-card {

    margin-bottom: 50px;
}

.dia-card:last-child {

    margin-bottom: 0;
}

/* CONTROLE DE IMAGENS DENTRO DO CONTEÚDO */

.conteudo-texto img {

    max-width: 100%;

    height: auto;

    display: block;

    margin: 20px auto;

    border-radius: 12px;
}

/* ==========================================
   IMAGENS DOS ITENS
========================================== */

.item-imagem {

    width: 100%;

    max-width: 280px;

    display: block;

    margin: 0 auto 15px auto;

    border-radius: 14px;

    object-fit: cover;

    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* ==========================================
   HOME INTERNA
========================================== */

.home-area {

    width: 100%;
}

.titulo-home {

    font-family: 'Playfair Display', serif;

    color: var(--cor-texto-escura);

    font-size: 30px;

    margin-bottom: 18px;

    font-weight: 600;

    line-height: 1.2;
}

.texto-home {

    color: #444444;

    font-size: 16px;

    line-height: 1.8;
}

/* ==========================================
   TÍTULOS GERAIS
========================================== */

.main-banner h3 {

    font-family: 'Playfair Display', serif;

    color: var(--cor-texto-escura);

    font-size: 22px;

    margin-bottom: 12px;

    font-weight: 600;
}

.main-banner p {

    color: #444444;

    line-height: 1.7;
}

/* ==========================================
   BOTÕES
========================================== */

.buttons-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 8px;

    margin-bottom: 12px;

    width: 100%;
}

.btn-3d {

    background-color: #FFFFFF;

    color: var(--cor-texto-escura);

    text-decoration: none;

    font-family: 'Montserrat', sans-serif;

    font-size: 13px;

    font-weight: 700;

    text-align: center;

    padding: 8px 6px;

    border-radius: 12px;

    display: flex;

    justify-content: center;

    align-items: center;

    line-height: 1.15;

    min-height: 58px;

    height: auto;

    word-break: break-word;

    border:
        1px solid #e2e2e2;

    border-bottom:
        3px solid #cccccc;

    box-shadow:
        0px 3px 4px rgba(0,0,0,0.18);

    transition:
        all 0.08s ease;
}

.btn-3d:active {

    transform: translateY(2px);

    border-bottom:
        1px solid #cccccc;
}

/* ==========================================
   CARDS DOS ITENS
========================================== */

.cha-item {

    background: #fafafa;

    border-radius: 16px;

    padding: 18px;

    margin-bottom: 18px;

    border: 1px solid rgba(0,0,0,0.06);

    box-shadow:
        0 3px 8px rgba(0,0,0,0.04);
}

/* NOME ITEM */

.cha-nome {

    font-size: 20px;

    font-weight: 700;

    color: var(--cor-texto-escura);

    margin-bottom: 10px;
}

/* BENEFÍCIO */

.cha-beneficio {

    font-size: 15px;

    color: #3f6b43;

    margin-bottom: 8px;

    line-height: 1.5;
}

/* PREPARO / ORIENTAÇÃO */

.cha-preparo {

    font-size: 15px;

    color: #555555;

    line-height: 1.6;
}

/* ==========================================
   WHATSAPP
========================================== */

.app-footer {

    display: flex;

    justify-content: center;

    width: 100%;
}

.btn-whatsapp-img {

    width: 180px;

    display: block;

    transition: transform 0.08s ease;
}

.btn-whatsapp-img img {

    width: 100%;

    display: block;
}

.btn-whatsapp-img:active {

    transform: scale(0.96);
}

/* ==========================================
   ROLAGEM
========================================== */

.main-banner::-webkit-scrollbar {

    width: 6px;
}

.main-banner::-webkit-scrollbar-thumb {

    background: rgba(0,0,0,0.20);

    border-radius: 10px;
}

/* ==========================================
   RESPONSIVO
========================================== */

@media (max-width: 480px) {

    body {

        padding: 0;
    }

    .app-container {

        width: 100vw;

        height: 100vh;

        max-width: 100%;

        border-radius: 0;
    }

    .header-text h1 {

        font-size: 34px;
    }

    .logo-container {

        width: 95px;

        height: 95px;
    }

    .btn-3d {

        font-size: 14px;

        padding: 13px 5px;
    }

    .titulo-home {

        font-size: 26px;
    }

    .texto-home {

        font-size: 15px;
    }
}
   /* ==========================================
   CARDS GERAIS
========================================== */
/* ==========================================
   CONTAINER DOS PROTOCOLOS
========================================== */

.protocolos-container {

    width: 100%;

    padding-bottom: 30px;
}

/* ==========================================
   CABEÇALHO DOS PROTOCOLOS
========================================== */

.protocolos-header {

    margin-bottom: 28px;

    text-align: center;
}

.protocolos-paciente-nome {

    font-family: 'Playfair Display', serif;

    font-size: 30px;

    line-height: 1.3;

    color: var(--cor-texto-escura);

    margin-bottom: 10px;
}

.protocolos-data {

    font-size: 16px;

    color: #777;

    font-style: italic;
}

/* ==========================================
   CARDS GERAIS
========================================== */

.protocolo-card {

    background: #ffffff;

    border-radius: 24px;

    padding: 28px;

    margin-bottom: 28px;

    border: 1px solid rgba(0,0,0,0.05);

    box-shadow:
        0 10px 24px rgba(0,0,0,0.06);

    overflow: hidden;
}

/* ==========================================
   TÍTULO DOS CARDS
========================================== */

.protocolo-card-titulo {

    font-family: 'Playfair Display', serif;

    font-size: 28px;

    font-weight: 700;

    color: var(--cor-texto-escura);

    margin-bottom: 22px;

    line-height: 1.3;
}

/* ==========================================
   TEXOS DOS PROTOCOLOS
========================================== */

.protocolo-card-descricao {

    font-size: 18px;

    color: #444;

    line-height: 2;

    white-space: pre-line;
}

/* ==========================================
   IMAGENS DOS PROTOCOLOS
========================================== */

.item-imagem {

    width: 100%;

    max-width: 100%;

    display: block;

    margin: 0 auto 25px auto;

    border-radius: 18px;

    object-fit: cover;

    box-shadow:
        0 8px 20px rgba(0,0,0,0.12);
}

/* ==========================================
   CARDS DOS ITENS
========================================== */

.cha-item {

    background: #fafafa;

    border-radius: 20px;

    padding: 24px;

    margin-bottom: 24px;

    border: 1px solid rgba(0,0,0,0.05);

    box-shadow:
        0 6px 18px rgba(0,0,0,0.04);
}

/* ==========================================
   NOME DO ITEM
========================================== */

.cha-nome {

    font-size: 24px;

    font-weight: 700;

    color: var(--cor-texto-escura);

    margin-bottom: 14px;
}

/* ==========================================
   BENEFÍCIO
========================================== */

.cha-beneficio {

    font-size: 17px;

    color: #3f6b43;

    margin-bottom: 14px;

    line-height: 1.8;
}

/* ==========================================
   ORIENTAÇÃO
========================================== */

.cha-preparo {

    font-size: 18px;

    color: #555;

    line-height: 2;
}

/* ==========================================
   BOTÃO LINK
========================================== */

.btn-link-item {

    display: inline-block;

    margin-top: 20px;

    padding: 14px 22px;

    background: var(--barra-bg);

    border: var(--barra-border);

    border-radius: 14px;

    color: var(--cor-texto-barra);

    text-decoration: none;

    font-weight: 700;

    font-size: 16px;

    box-shadow: var(--barra-shadow);

    transition:
        transform 0.08s ease;
}

.btn-link-item:active {

    transform: scale(0.96);
}

/* ==========================================
   OBSERVAÇÕES
========================================== */

.observacao {

    background:
        linear-gradient(
            180deg,
            #fffdf7,
            #fff8ea
        );
}

/* ==========================================
   RESPONSIVO
========================================== */

@media (max-width: 480px) {

    .protocolo-card {

        padding: 22px;
    }

    .protocolo-card-titulo {

        font-size: 24px;
    }

    .protocolo-card-descricao {

        font-size: 17px;
    }

    .protocolos-paciente-nome {

        font-size: 26px;
    }

}