/*
Theme Name: BeBalance
Version: 1.0.1
Text Domain: bebalance
*/

/* ---------- Base ---------- */
:root{
    --rosa:#e6b1c7;
    --rosa-escuro:#cc8bad;
    --rosa-50:#f8eef3;
    --roxo:#8e6f93;
    --grafite:#2a2a2a;
    --cinza:#6b6b6b;
    --cinza-2:#f5f5f7;
    --shadow: 0 10px 30px rgba(0,0,0,.08);
    --radius:24px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    color:var(--grafite);
    background:#fff;
    font-family:"Raleway", sans-serif;
    font-weight:400;
    line-height:1.7;
}
h1,h2,h3{font-family:"Playfair Display", serif; line-height:1.2; margin:0 0 .6em}
h1{font-size: clamp(28px, 4vw, 48px);}
h2{font-size: clamp(22px, 3vw, 32px);}
p{margin:.75em 0;font-family: "Raleway", sans-serif !important;}
img{max-width:100%; height:auto; display:block}
.container{max-width:1200px; margin:0 auto; padding:0 24px}
iframe {
    margin-bottom: -9px;
}
/* ---------- Buttons ---------- */
.btn{display:inline-block; padding:.9rem 1.4rem; border-radius:999px; text-decoration:none; transition:.2s;
    background:var(--rosa); color:#fff; border:2px solid var(--rosa); font-weight:600}
.btn:hover{filter:brightness(.95)}
.btn-outline{background:transparent; color:var(--rosa); border-color:var(--rosa)}
.btn-sm{padding:.55rem 1rem; font-size:.9rem}

/* ---------- Header ---------- */
.site-header{position:sticky; top:0; z-index:50; background:#fff; box-shadow:0 1px 0 #eee}
.header-bar{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; min-height:78px}
.menu{list-style:none; margin:0; padding:0; display:flex; gap:22px}
.menu a{color:var(--grafite); text-decoration:none; font-weight:500}
.menu a:hover{color:var(--rosa-escuro)}
.menu-primary{justify-content:flex-start}
.header-social{display:flex; gap:12px; justify-content:flex-end}
.header-social .social{color:var(--grafite); text-decoration:none; font-weight:500}
.site-logo img{height:54px; width:auto}

/* ---------- Footer ---------- */
.site-footer{margin-top:64px}
.footer-top{background:#f0e1e9}
.footer-inner{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; padding:28px 0}
.menu-footer{justify-content:center}
.footer-social{display:flex; gap:18px; justify-content:flex-end}
.footer-bottom{background:#e9d3dc; padding:14px 0}
.footer-bottom small{color:#404040}

/* ---------- Sections ---------- */
.section-pad{padding:72px 0}
.section-alt{background:var(--rosa-50)}
.section-title{color:#4b3c52; text-align:center; margin-bottom:28px}

/* ---------- HERO ---------- */
.hero .container{display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:center; padding:48px 24px}
.hero-sub{color:var(--cinza); font-weight:400; margin-top:8px}
.hero-media{position:relative}
.hero-img{border-radius:var(--radius); box-shadow:var(--shadow)}

/* ---------- Cards de Tratamentos ---------- */
.cards-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px}
.card-tratamento{background:#fff; border-radius:16px; box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column}
.card-tratamento .card-media img{width:100%; height:220px; object-fit:cover}
.card-tratamento .card-body{padding:18px}
.card-tratamento .card-title{margin:0 0 .25rem; font-size:1.05rem}
.card-excerpt{color:#555; font-size:.95rem; min-height:3.6em}
.card-link{text-decoration:none; color:inherit; display:flex; flex-direction:column; height:100%}
.card-tratamento .btn{align-self:flex-start; margin-top:8px}

/* ---------- Antes & Depois ---------- */
.antes-depois .swiper{border-radius:16px; overflow:hidden; box-shadow:var(--shadow)}
.swiper-button-prev, .swiper-button-next{color:#8c657a}

/* ---------- Sobre Nós ---------- */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center}
.sobre-media img{border-radius:16px; box-shadow:var(--shadow)}
.content p{margin:.6em 0}

/* ---------- Testemunhos ---------- */
.testemunhos .grid-2{grid-template-columns:1fr 1fr}
.testimonial-card{background:#fff; border-radius:16px; padding:20px; box-shadow:var(--shadow)}
.testimonial-card .stars{color:#f5a8c5; letter-spacing:2px; margin-bottom:8px}
.author{color:#777}

/* ---------- Page hero / slim ---------- */
.page-hero{background:#faf6f8; padding:36px 0}
.page-hero.slim{padding:24px 0}
.page-hero h1{margin:.2em 0}

/* ---------- Responsivo ---------- */
@media (max-width: 1100px){
    .cards-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width: 900px){
    .header-bar{grid-template-columns:1fr auto; grid-template-areas:"logo social" "nav nav"; row-gap:10px}
    .main-nav{grid-area:nav}
    .site-logo{grid-area:logo}
    .header-social{grid-area:social}
    .hero .container{grid-template-columns:1fr}
    .grid-2{grid-template-columns:1fr}
    .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 560px){
    .cards-grid{grid-template-columns:1fr}
}

/* ===== Cabeçalho centrado (igual ao mockup) ===== */
:root{
    --rosa:#e6b1c7; /* cor dos ícones */
    --txt:#555;     /* cor do menu */
}
.site-header.is-centered{background:#fff; border-bottom:1px solid #e9e9e9}
.header-centered{
    display:grid;
    grid-template-columns: 1fr auto 1fr; /* menu esq | logo | menu dir + redes */
    align-items:center;
    gap:24px;
    min-height:96px;
}

/* Menus (tipografia em caps com tracking) */
.menu-centered{display:flex; gap:48px; list-style:none; margin:0; padding:0}
.menu-centered a{
    text-decoration:none;
    color:var(--txt);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.14em;
    font-size:.94rem;
}
.menu-centered a:hover{color:#000}

/* Logo ao centro */
.site-logo{display:block; justify-self:center}
.site-logo img{height:82px; width:auto; display:block}
.logo-text{font-weight:700; font-size:1.25rem}

/* Bundle menu direito + redes */
.nav-right-wrap{display:flex; align-items:center; justify-content:flex-end; gap:18px}
.header-social{display:flex; gap:14px}
.header-social .social{
    color:var(--rosa);
    display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:28px;
}

/* Responsivo: empilhar em tablets/telemóveis mantendo a identidade */
@media (max-width: 980px){
    .header-centered{
        grid-template-columns: 1fr auto 1fr;
        row-gap:14px;
    }
    .menu-centered{gap:22px; font-size:.85rem}
    .site-logo img{height:68px}
}
@media (max-width: 760px){
    .header-centered{grid-template-columns:1fr auto 1fr}
    .menu-centered{display:none;} /* simplificação: esconde menus em mobile (podes trocar por mobile menu depois) */
    .nav-right-wrap{justify-content:flex-end}
}

.site-logo img {
    height: 205px;
    width: auto;
    display: block;
    margin: 0 auto;
    padding: 10px;
}

/* ===== Footer DEMO (igual ao screenshot) ===== */
.demo-footer {
    --lilas:#9c7896;        /* cor de fundo */
    --texto:#fff;
    background:var(--lilas);
    color:var(--texto);
}

.demo-footer .df-top { padding: 28px 0 22px; }
.demo-footer .df-bottom { padding: 14px 0 26px; text-align:center; opacity:.95; }

.demo-footer .df-row {
    display:flex; align-items:center; justify-content:space-between; gap:24px;
}

.df-left { flex:0 0 auto; }
.df-logo { height:140px !important; width:auto; display:block; }

.df-nav { flex:1 1 auto; display:flex; justify-content:center; }
.df-nav ul { list-style:none; margin:0; padding:0; display:flex; gap:42px; }
.df-nav a {
    color:#ffffff; text-decoration:none; font-weight:700;
    text-transform:uppercase; letter-spacing:.14em; font-size:.95rem;
}
.df-nav a:hover { opacity:.9; }

.df-right { flex:0 0 auto; display:flex; gap:14px; align-items:center; }
.df-social { color:#fff; display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center; }
.df-social:hover { opacity:.9; }

.demo-footer small { color:#fff; font-weight:500; }

/* Responsivo */
@media (max-width: 900px){
    .demo-footer .df-row { flex-wrap:wrap; justify-content:center; gap:18px; }
    .df-left, .df-right { order:0; }
    .df-nav { order:1; flex-basis:100%; }
    .df-nav ul { flex-wrap:wrap; gap:22px; justify-content:center; }
    .df-logo { height:68px; }
}

/* ===== Contacto (DEMO) ===== */
.contact-hero{background:#fff}
.contact-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start;
}
.contact-title{
    font-family: "Playfair", serif;
    font-style: italic;
    color: #A27AA0 !important;
    font-size: clamp(2.2rem, 4.5vw, 4rem);
    line-height: 1.08;
    letter-spacing: .3px;
    margin: 0 0 1rem 0;
}
.contact-info .info-block{display:flex; gap:14px; margin:18px 0}
.info-label{color:#DD93B5; text-transform:uppercase; letter-spacing:.16em; font-weight:700; margin-bottom:4px}
.contact-info a{color:#2a2a2a; text-decoration:none}
.contact-info a:hover{text-decoration:underline}

.contact-form{position:relative}
.contact-form-ui{display:grid; grid-template-columns:1fr 1fr; gap:14px 18px}
.contact-form-ui label{display:flex; flex-direction:column; gap:6px}
.contact-form-ui label.full{grid-column:1 / -1}
.contact-form-ui input,
.contact-form-ui textarea{
    border:2px solid #e9b9cd; border-radius:14px; padding:.8rem 1rem;
    font-family:inherit; font-size:1rem; outline:none; background:#fff;
}
.contact-form-ui input:focus,
.contact-form-ui textarea:focus{box-shadow:0 0 0 3px #f6e9f1}
.contact-submit{
    border-color:#DD93B5; color:#DD93B5; text-transform:uppercase; letter-spacing:.16em; font-weight:700;
    padding:.9rem 1.6rem; border-radius:999px;
}
.contact-deco{position:absolute; right:-8px; top:-28px; width:110px; opacity:.9; pointer-events:none}

.contact-map .map-embed{border-top:1px solid #eee; margin-top:24px}
@media (max-width: 900px){
    .contact-grid{grid-template-columns:1fr; gap:28px}
    .contact-form-ui{grid-template-columns:1fr}
    .contact-deco{display:none}
}



/* Content container + centrado */
.cta-wrap{
    width: min(1200px, 92vw);
    margin: 4rem auto 4rem;
    display: flex;
    justify-content: center;
}

/* Botão robusto (ignora floats/positions do tema) */
.cta-btn{
    position: static !important;
    float: none !important;
    display: inline-flex;
    align-items: center;
    gap: .6rem;

    font-family: "Raleway", sans-serif ;
    font-weight: 700;
    text-transform: uppercase;
    font-size: .875rem;
    letter-spacing: .05em;
    text-decoration: none;

    color: #DD93B5;
    border: 2px solid #DD93B5;
    border-radius: 999px;
    padding: .7rem 1.8rem;
    background: transparent;

    transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* mini setinha opcional via pseudo */
.cta-btn::after{
    content: "→";
    font-weight: 700;
    line-height: 1;
}

/* hover */
.cta-btn:hover{
    background: #DD93B5;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(193,121,155,.25);
    border-color: #DD93B5;;
}