/* ==========================================
   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);

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

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

    --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
   ========================================== */

.app-container.modelo01 {
    --cor-predominante: #1B3B22;
    --cor-texto-escura: #1B3B22;
}

.app-container.modelo02 {
    --cor-predominante: #809758;
    --cor-texto-escura: #809758;
}

.app-container.modelo03 {
    --cor-predominante: #669887;
    --cor-texto-escura: #669887;
}

.app-container.modelo04 {
    --cor-predominante: #1B3B22;
    --cor-texto-escura: #1B3B22;
    --cor-texto-barra: #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;
}

.app-container.modelo05 {
    --cor-predominante: #809758;
    --cor-texto-escura: #809758;
}

.app-container.modelo06 {
    --cor-predominante: #669887;
    --cor-texto-escura: #669887;
}

/* ==========================================
   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: 380px;
    height: 870px;
    padding: 20px;
    padding-bottom: 90px; /* espaço pro botão flutuante */
    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{
    width:100%;
    display:flex;
    justify-content:center;
    margin:18px 0 20px 0;
}

.header-centro{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    width:fit-content;
    margin:0 auto;
}

.logo-container{
    width:98px;
    height:98px;
    flex-shrink:0;
    display:flex;
    justify-content:center;
    align-items:center;
}

.app-logo{
    width:100%;
    height:100%;
    object-fit:contain;
}

.header-text{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.linha-nome{
    display:block;
    width:100%;
    font-family:'Playfair Display',serif;
    font-size:34px;
    font-weight:500;
    color:#FFF;
    line-height:1.0;
    text-align:center;
}

.linha-sobrenome{
    display:block;
    width:100%;
    font-family:'Playfair Display',serif;
    font-size:30px;
    font-weight:500;
    color:#FFF;
    line-height:1.0;
    text-align:center;
}

.header-text h2{
    margin-top:6px;
    width:100%;
    text-align:center;
    font-family:'Montserrat',sans-serif;
    font-size:13px;
    font-weight:300;
    letter-spacing:2px;
    text-transform:uppercase;
    color:rgba(255,255,255,.75);
}

/* ==========================================
   BARRA DOURADA
   ========================================== */

.destaque-bar {
    background: var(--barra-bg);
    border: var(--barra-border);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    box-shadow: var(--barra-shadow);
    margin-bottom: 20px;
}

.destaque-bar span {
    font-family: 'Playfair Display', serif;
    font-style: var(--barra-font-style);
    color: var(--cor-texto-barra);
    font-size: 16px;
    font-weight: 600;
}

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

.main-banner {
    background-color: #FFFFFF;
    width: 100%;
    flex: 1;
    border-radius: 22px;
    padding: 22px;
    overflow-y: auto;
    margin-bottom: 20px;
    box-shadow: inset 0px 2px 8px rgba(0,0,0,0.10);
    color: #333333;
    line-height: 1.6;
    font-size: 14px;
    position: relative;

    display: flex;              /* permite empurrar o botão pro fundo */
    flex-direction: column;     /* organização vertical */
}

.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: 12px;
    margin-bottom: 16px;
}

.btn-3d {
    background-color: #FFFFFF;
    color: var(--cor-texto-escura);
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    padding: 15px 6px;
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.15;
    border: 1px solid #e2e2e2;
    border-bottom: 4px solid #cccccc;
    box-shadow: 0px 5px 6px rgba(0,0,0,0.25);
    transition: all 0.08s ease;
}

.btn-3d:active {
    transform: translateY(3px);
    border-bottom: 1px solid #cccccc;
}

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

.app-footer {
    display: flex;
    justify-content: center;
    width: 100%;
}

.btn-whatsapp-img {
    width: 68%;
    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;
}

/* ==========================================
   BOTÃO BAIXAR APP — FLUTUANTE NO RODAPÉ
   ========================================== */

#banner-instalar{
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;

    width: 240px;
    padding: 12px 18px;

    background: #d50000;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    text-align: center;

    border-radius: 14px;
    border: 3px solid #ffffff;
    box-shadow: 0 6px 14px rgba(0,0,0,.35);

    cursor: pointer;
    transition: 0.25s;
}

#banner-instalar:hover{
    background: #b00000;
}

/* ==========================================
   BOTÃO VOLTAR — FIXO NO RODAPÉ DA CAIXA CENTRAL
   ========================================== */

/* ==========================================
   BOTÃO VOLTAR — SEMPRE NO RODAPÉ DA CAIXA CENTRAL
   ========================================== */

/* ==========================================
   BOTÃO VOLTAR — FLUTUANTE, DISCRETO, À ESQUERDA
   ========================================== */

.btn-voltar-home {
    /* empurra pro fundo da caixa central */
    margin-top: auto;

    /* gruda no fundo em páginas longas */
    position: sticky;
    bottom: 0;

    /* posiciona à ESQUERDA (não centralizado) */
    align-self: flex-start;
    margin-left: 2px;
    margin-bottom: 0;

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

    background: #ffffff;
    color: #2e7d32;
    text-decoration: none;

    font-family: 'Montserrat', sans-serif;
    font-size: 9px;        /* era 12px, ficou menor */
    font-weight: 600;

    padding: 2px 8px;      /* era 6px 16px, mais enxuto */
    border-radius: 12px;    /* era 20px, menos arredondado */

    border: 1px solid rgba(46, 125, 50, 0.25);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);

    width: fit-content;

    cursor: pointer;
    transition: all 0.15s ease;

    z-index: 10;
}

.btn-voltar-home:hover {
    background: #2e7d32;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.btn-voltar-home:active {
    transform: scale(0.95);
}

/* ==========================================
   BIO — BLINDAGEM CONTRA O CSS GLOBAL
   ========================================== */

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

.bio-container .avatar-wrapper {
    margin: 15px auto;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #2e7d32;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    flex-shrink: 0;
}

.bio-container .avatar-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 10%;
    display: block;
}

/* REDES SOCIAIS — SÓ ÍCONES GRANDES, SEM CÍRCULO */
.bio-container .redes-sociais-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    margin: 18px 0 22px 0;
    flex-wrap: wrap;
}

.bio-container .rede-social-link {
    width: auto;
    height: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    transition: transform 0.2s ease;
    text-decoration: none;
}

.bio-container .rede-social-link:hover {
    transform: scale(1.12);
}

.bio-container .rede-social-link img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    display: block;
}

/* ÍCONES NATURAIS */
.bio-container .arabescos-box {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 12px 0 18px 0;
    flex-wrap: wrap;
}

.bio-container .arabesco-item {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2e7d32;
    font-size: 22px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* CARDS */
.bio-container .bio-card {
    margin-bottom: 15px;
    background: #ffffff;
    border-radius: 18px;
    padding: 22px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.bio-container .bio-titulo {
    text-align: center;
    margin-bottom: 10px;
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    color: var(--cor-texto-escura, #1B3B22);
}

/* TEXTO */
.bio-container .texto-biografia {
    font-size: 14px;
    line-height: 1.45;
    color: #333;
    text-align: justify;
    margin: 0;
    padding: 0;
}

.bio-container .texto-biografia p {
    margin: 0 0 6px 0;
    padding: 0;
}

.bio-container .texto-biografia p:last-child {
    margin-bottom: 0;
}

/* CARDS DE DESTAQUE */
.bio-container .destaques-grid-novo {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.bio-container .destaque-card-novo {
    background: #ffffff;
    border-radius: 18px;
    padding: 22px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.bio-container .destaque-circulo-icone {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2e7d32;
    font-size: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    margin-bottom: 14px;
}

.bio-container .destaque-card-titulo {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 700;
    color: #2e7d32;
    margin-bottom: 10px;
    line-height: 1.3;
}

.bio-container .destaque-card-texto {
    font-size: 14px;
    line-height: 1.6;
    color: #444444;
    text-align: center;
    margin: 0;
}

/* ==========================================
   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;
    }
}