/*
Theme Name: Terapeuta Isabella Bergamo
Author: Isabella Bergamo
Description: Tema WordPress moderno para terapeuta holística com design verde e bege, estilo moderno e minimalista. Desenvolvido com base nos designs do Canva.
Version: 2.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: terapeuta-holistica
*/

/* ============================================
   GOOGLE FONTS
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Lato:wght@300;400;500;600;700&display=swap');

@font-face {
    font-family: 'Lovelace';
    src: url('fonts/Lovelace.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ============================================
   CSS VARIABLES (Cores e Configurações)
   ============================================ */
:root {
    /* Cores Base */
    --background: hsl(30, 20%, 90%);
    --foreground: hsl(25, 22%, 28%);
    --card: hsl(30, 20%, 96%);
    --card-foreground: hsl(25, 22%, 28%);
    
    /* Cores Customizadas */
    --cream: hsl(30, 20%, 90%);
    --cream-light: hsl(30, 20%, 96%);
    --brown: hsl(25, 22%, 28%);
    --brown-light: hsl(25, 18%, 40%);
    --taupe: hsl(30, 18%, 82%);
    --taupe-dark: hsl(30, 15%, 70%);
    --olive: hsl(45, 20%, 45%);
    --gold: hsl(38, 40%, 55%);
    --whatsapp: hsl(142, 70%, 45%);
    
    /* Fontes */
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* Sombras */
    --shadow-soft: 0 4px 20px -4px hsl(25 22% 28% / 0.1);
    --shadow-card: 0 8px 30px -8px hsl(25 22% 28% / 0.12);
    --shadow-elevated: 0 12px 40px -12px hsl(25 22% 28% / 0.15);
    
    /* Border Radius */
    --radius: 1rem;
    
    /* Container */
    --container-max-width: 1400px;
    --container-padding: 2rem;
}

/* ============================================
   RESET E BASE
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background-color: var(--background);
    color: var(--foreground);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 500;
    line-height: 1.2;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

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

/* ============================================
   CONTAINER
   ============================================ */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* ============================================
   1. ESTRUTURA DO HEADER (FIXO E TRANSPARENTE)
   ============================================ */
.header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    
    /* Fundo Bege Transparente com Desfoque */
    background-color: rgba(240, 235, 230, 0.85); 
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px);
    
    z-index: 1000;
    box-shadow: 0 4px 20px -4px rgba(89, 74, 66, 0.1);
    padding: 10px 0;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem; /* Espaço nas laterais */
    width: 100%;
}

.header-nav {
    display: flex;
    justify-content: space-between; /* Logo na esquerda, Menu na direita */
    align-items: center;
}

/* ============================================
   2. LOGO: O EFEITO DO "G" (AJUSTE AGRESSIVO)
   ============================================ */
.logo-container {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center; 
    color: var(--text-sec, #5A4A42);
    margin: 0;
    flex-shrink: 0; /* Garante que a logo não amasse */
	position: relative;
	left: -30px;
}

.logo-title {
    font-family: 'Lovelace', serif;
    /* Fonte escala suavemente entre 2rem e 2.8rem */
    font-size: clamp(2rem, 4.5vw, 2.8rem); 
    
    /* IMPORTANTE: Linha apertada para o texto de cima descer */
    line-height: 0.75; 
    
    font-weight: 500;
    text-align: center;
    letter-spacing: 1px;
    z-index: 10; /* Fica POR CIMA do subtítulo */
    color: var(--foreground, #333);
    margin: 0;
    position: relative;
}

.logo-subtitle {
    display: flex;           
    justify-content: center;
    
    /* 1. ABRIR MAIS: Aumente para empurrar "NEURO..." para a direita */
    gap: 3em;             
    
    /* 2. DESCER O TEXTO: Diminua o negativo (estava -0.85em, subiu demais) */
    margin-top: -0.35em; 
    
    font-family: var(--font-body); 
    font-size: clamp(0.6rem, 1.2vw, 0.75rem);
    font-weight: 600;        
    text-transform: uppercase;
    letter-spacing: 2px;     
    color: hsl(25, 15%, 45%);
    z-index: 1; 
    position: relative;
	left: 8px;
}

/* ============================================
   3. MENU DESKTOP (LINKS DO LADO DIREITO)
   ============================================ */
.header-menu-desktop {
    display: flex; /* Traz de volta o menu lado a lado */
    list-style: none; /* Remove as bolinhas da lista */
    gap: 30px;
    margin: 0;
    padding: 0;
}

.header-menu-desktop li a {
    text-decoration: none;
    color: var(--text-sec, #5A4A42);
    font-weight: 500;
    font-size: 1rem;
    transition: color 0.3s;
}

.header-menu-desktop li a:hover {
    color: var(--accent, #AC9F86);
}

/* Esconde o botão e o menu mobile em telas grandes */
.header-menu-toggle, 
.header-menu-mobile {
    display: none;
}

@media (min-width: 1024px) {
	.logo-container{
		position: relative;
		left: -30px;
	}
	
/* ============================================
   4. RESPONSIVIDADE (ABAIXO DE 1024px)
   ============================================ */
/* Define quando o menu vira hambúrguer (Tablets e Celulares) */
@media (max-width: 1024px) {

    /* Esconde o menu de texto */
    .header-menu-desktop { 
        display: none; 
    }

    /* Mostra o botão hambúrguer */
    .header-menu-toggle {
        display: flex;
        background: none;
        border: none;
        font-size: 1.8rem;
        cursor: pointer;
        color: var(--foreground);
    }

    /* Menu Gaveta (quando aberto) */
    .header-menu-mobile {
        /* display: block é controlado via JS (classe .active), aqui deixamos a base */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #F0EBE6;
        padding: 20px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    
    .header-menu-mobile ul {
        list-style: none;
        padding: 0;
        text-align: center;
    }
    
    .header-menu-mobile li {
        margin-bottom: 1rem;
    }
}

/* ============================================
   5. AJUSTE FINO PARA NOTEBOOKS (1366px)
   ============================================ */
/* Aqui corrigimos o "G" especificamente para telas médias */
@media (min-width: 1025px) and (max-width: 1400px) {
    .header-container {
        padding: 0 1.5rem;
    }
    
    /* Ajuste para o G encaixar na fonte levemente menor */
    .logo-subtitle {
        gap: 2.4em;       /* Um pouco menos aberto */
        margin-top: -0.8em; /* Um pouco menos agressivo na subida */
    }
    
    /* Menu com fonte levemente menor para caber */
    .header-menu-desktop {
        gap: 20px;
    }
    .header-menu-desktop li a {
        font-size: 0.95rem;
    }
}
/* ============================================
   HERO SECTION
   ============================================ */
.hero-section {
    min-height: 100vh;
    padding-top: 7rem;
    padding-bottom: 4rem;
    display: flex;
    align-items: center;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}

.hero-content {
    order: 2;
}

.hero-title {
    font-family: 'Lovelace', var(--font-heading);
    padding-left: 4rem;
    font-size: 1.5rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: var(--foreground);
}

.hero-description {
    margin-bottom: 2rem;
}

.hero-description p {
    margin-bottom: 1rem;
    color: hsl(25, 22%, 28%, 0.9);
    font-size: 1rem;
    line-height: 1.75;
    padding-left: 4rem;
}

.hero-description strong {
    font-weight: 600;
    color: var(--foreground);
}

.btn-agendar {
    display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1.2;
    background-color: var(--taupe-dark);
    color: var(--cream-light);
    padding: 1rem 2rem;
    border-radius: var(--radius);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-card);
    margin-left: 4rem;
}

.btn-agendar:hover {
    background-color: var(--taupe);
    box-shadow: var(--shadow-elevated);
    transform: translateY(-2px);
}

.hero-image-wrapper {
    order: 1;
    display: flex;
    justify-content: center;
}

.hero-image {
    object-fit: fill;
    width: 100%;
    max-width: 90rem;
    height: 50rem;
    border-radius: 1.5rem;
    padding: 0;
}

@media (min-width: 1366px) {
    .hero-section {
        padding-top: 0;
        padding-bottom: 0;
        height: 100vh;
        overflow: hidden;
    }
    
    .hero-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
    
    .hero-content {
        order: 1;
    }
    
    .hero-image-wrapper {
        order: 2;
        justify-content: flex-end;
    }
    
    .hero-title {
        font-size: 3rem;
    }
    
    .hero-description p {
        font-size: 1.125rem;
    }
}

@media (min-width: 1280px) {
    .hero-title {
        font-size: 3.5rem;
    }
}

/* ============================================
   ABOUT SECTION
   ============================================ */
.about-section {
    padding: 4rem 0;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

.about-photo {
    display: flex;
    justify-content: center;
}

.photo-frame {
    margin: 0 auto;
    width: 20rem;
    height: 28rem;
    border-radius: 0.5rem;
    overflow: hidden;
}

.about-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.about-content {
    text-align: center;
}

.section-title-large {
    font-size: 1.875rem;
    margin-bottom: 0.5rem;
    color: var(--foreground);
    text-align: center;
    margin-left: -18.5rem;
}

.section-subtitle-italic {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.25rem;
    color: hsl(25, 15%, 45%);
    margin-bottom: 2rem;
    text-align: center;
    margin-right: 18.5rem;
}

.about-text {
    margin-right: 18.5rem;
    text-align: center;
    font-size: large;
}

.about-text p {
    margin-bottom: 1.5rem;
    color: hsl(25, 22%, 28%, 0.9);
    line-height: 1.75;
}

.about-text strong {
    font-weight: 800;
    color: var(--foreground);
}

@media (min-width: 1024px) {
    .about-section {
        padding: 6rem 0;
    }
    
    .about-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
    
    .about-photo {
        justify-content: flex-start;
    }
    
    .photo-frame {
        width: 28rem;
        height: 36rem;
    }
    
    .about-content {
        text-align: left;
    }
    
    .section-title-large {
        font-size: 3rem;
    }
    
    .section-subtitle-italic {
        font-size: 1.5rem;
    }
}

@media (min-width: 1280px) {
    .section-title-large {
        font-size: 3.5rem;
    }
}

/* ============================================
   THERAPY SECTION
   ============================================ */
.therapy-section {
    position: relative;
    padding: 4rem 0;
    background-color: hsl(30, 18%, 82%, 0.3);
    overflow: hidden;
    z-index: 1;
}

.therapy-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('img/fundo-ther.png'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.68; 
    
    z-index: -1;
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
    margin-left: 19.850rem;
}

.therapy-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
}

.therapy-cards,
.therapy-text {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    font-size: 18px;
}

.card-bege {
    background-color: var(--card);
    border-radius: 1.5rem;
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
}

.card-bege p {
    color: hsl(25, 22%, 28%, 0.9);
    line-height: 1.75;
    
}

.card-bege strong {
    font-weight: 600;
    color: var(--foreground);
}

.therapy-services {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.service-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.service-bullet {
    width: 1rem;
    height: 1rem;
    background-color: var(--brown);
    border-radius: 50%;
    flex-shrink: 0;
}

.service-item span {
    color: var(--foreground);
    font-weight: 500;
    font-size: 0.875rem;
    white-space: nowrap;
}

@media (min-width: 1024px) {
    .therapy-section {
        padding: 6rem 0;
    }
    
    .therapy-grid {
        grid-template-columns: 1fr 1fr auto; /* Mantém a estrutura */
        gap: 2rem;
    }
    
    .therapy-services {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 2rem;
        gap: 3.5rem; /* Aumentei o espaço vertical entre os itens (Era padrão) */
        padding: 2rem;
    }
    
    .service-bullet {
        width: 3rem;  
        height: 3rem; 
    }

    .service-item {
        position: relative;
        gap: 1.2rem; /* Afasta um pouco mais o texto da bolinha */
    }
    
    /* Aumentando a Linha Conectora */
    .service-item:not(:last-child)::after {
        content: '';
        position: absolute;
        
        /* Ajuste de Posição para a nova bolinha maior */
        top: 3rem;    /* Começa logo abaixo da bolinha */
        left: 1.5rem;  /* Centraliza na bolinha (metade de 1.5rem menos metade da linha) */
        
        width: 4px;     /* Linha um pouco mais grossa (Era 2px) */
        height: 4.5rem; /* Linha mais comprida para conectar no próximo item */
        background-color: var(--brown);
    }
    
    /* Aumentando o Texto */
    .service-item span {
        font-size: 1.50rem; /* Aumentei para ~20px (Era 1rem/16px) */
        font-weight: 450;   /* Deixei um pouco mais negrito para destacar */
    }
}

/* ADOLESCENT SECTION */
.adolescent-section {
    padding: 0;
    background-color: transparent;
}

.adolescent-image {
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.adolescent-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.adolescent-content {
    width: 100%;
    background-image: linear-gradient(hsla(30, 18%, 82%, 0.7), hsla(30, 18%, 82%, 0.7)), url('img/card-texture.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0 0 1.5rem 1.5rem;
    padding: 2rem 0;
    margin-top: -1px;
}

.adolescent-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
}

.adolescent-title-wrapper {
    display: flex;
    align-items: center;
}

.adolescent-title {
    font-family: 'Lovelace', var(--font-heading);
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--foreground);
    margin-top: 4rem;
    text-align: center;
}

.adolescent-text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: #F0EBE6;
    border-radius: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    font-size: 18px;
}

.adolescent-text p {
    color: hsl(25, 22%, 28%, 0.9);
    line-height: 1.75;
    margin: 0;
    font-weight: 500;
}

.adolescent-text strong {
    font-weight: 600;
    color: var(--foreground);
}

@media (min-width: 768px) {
    .adolescent-image {
        height: 350px;
    }
    
    .adolescent-content {
        padding: 2.5rem 0;
    }
}

@media (min-width: 1024px) {
    .adolescent-image {
        height: 400px;
    }
    
    .adolescent-content {
        padding: 3rem 0;
    }
    
    .adolescent-grid {
        grid-template-columns: 1fr 2fr;
        gap: 3rem;
    }
    
    .adolescent-title {
        font-size: 2.25rem;
    }
    
    .adolescent-text {
        padding: 2.5rem;
    }
}

@media (min-width: 1280px) {
    .adolescent-image {
        height: 450px;
    }
    
    .adolescent-title {
        font-size: 2.5rem;
    }
    
    .adolescent-text {
        padding: 3rem;
    }
}

/* ============================================
   NEUROPSYCH SECTION
   ============================================ */

.section-title-large2{
    font-size: 2.875rem;
    margin-bottom: 0.5rem;
    color: var(--foreground);
}

.neuropsych-section {
    padding: 4rem 0;
    background-color: hsl(30, 18%, 82%, 0.3);
}

.neuropsych-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}

.neuropsych-intro {
    color: hsl(25, 22%, 28%, 0.9);
    line-height: 1.75;
    margin-bottom: 2rem;
}

.neuropsych-intro strong {
    font-weight: 600;
    color: var(--foreground);
}

.neuropsych-card {
    margin-top: 2rem;
    background-color: #F0EBE6;
}

.card-subtitle {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--foreground);
    margin-bottom: 1.5rem;
}

.symptoms-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.symptoms-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.check-icon {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background-color: var(--olive);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.125rem;
    position: relative;
}

.check-icon::after {
    content: '✓';
    color: var(--cream-light);
    font-size: 0.75rem;
    font-weight: bold;
}

.symptoms-list span {
    color: hsl(25, 22%, 28%, 0.9);
}

.neuropsych-image-wrapper {
    display: flex;
    justify-content: center;
}

.neuropsych-frame {
    position: relative;
    width: 18rem;
    height: 25rem;
}

.neuropsych-image {
    position: absolute;
    inset: 0.5rem;
    width: calc(100% - 1rem);
    height: calc(100% - 1rem);
    border-radius: 2.5rem;
    object-fit: center top;
}

@media (min-width: 1024px) {
    .neuropsych-section {
        padding: 6rem 0;
    }
    
    .neuropsych-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
    
    .neuropsych-image-wrapper {
        justify-content: flex-end;
    }
    
    .neuropsych-frame {
        width: 36rem;
        height: 40rem;
        margin-top: 2rem;
    }
    
    .card-subtitle {
        font-size: 1.5rem;
    }
}

/* ============================================
   APPOINTMENTS SECTION
   ============================================ */
.appointments-section {
    padding: 4rem 0;
}

.appointments-intro {
    color: hsl(25, 22%, 28%, 0.9);
    max-width: 48rem;
    margin: 0 auto;
    line-height: 1.75;
    margin-right: 21.5rem;
}

.appointments-intro strong {
    font-weight: 600;
    color: var(--foreground);
}

.appointments-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 64rem;
    margin: 3rem auto 0;
}

.appointment-card {
    background-color: #F0EBE6;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: var(--shadow-card);
    text-align: center;
}

.appointment-title {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.5rem;
    color: var(--foreground);
    margin-bottom: 1rem;
    text-transform: lowercase;
}

.appointment-text {
    color: hsl(25, 22%, 28%, 0.9);
    line-height: 1.75;
    margin-bottom: 1.5rem;
}

.appointment-subtitle {
    color: hsl(25, 15%, 45%);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.appointment-icon {
    display: flex;
    justify-content: center;
}

.google-meet-icon,
.location-icon {
    width: 2rem;
    height: 2rem;
    color: var(--foreground);
}



@media (min-width: 768px) {
    .appointments-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

@media (min-width: 1024px) {
    .appointments-section {
        padding: 6rem 0;
    }
    
    .appointment-title {
        font-size: 1.875rem;
    }
}

.appointments-section {
    position: relative;
    overflow: hidden; 
}

.floral-appointment {
    position: absolute;
    top: -9rem;  
	left: 20.5rem;
    width: 76rem;     
    max-width: 100%;   
    z-index: 0;       
    opacity: 0.7;     
}

.floral-appointment img {
    width: 100%;
    height: auto;
    display: block;
}

.appointments-section .container {
    position: relative;
    z-index: 2; 
}


@media (max-width: 768px) {
    .floral-appointment {
        width: 100%;
        opacity: 0.15; 
    }
}

/* ============================================
   TESTIMONIALS SECTION
   ============================================ */
.testimonials-section {
    padding: 4rem 0;
    background-color: hsl(30, 18%, 82%, 0.3);
    position: relative;
    overflow: hidden;
}



.testimonials-title {
    font-size: 1.875rem;
    line-height: 1.2;
    margin-bottom: 2rem;
    color: var(--foreground);
}

.testimonials-title strong {
    font-weight: 600;
}

.testimonials-title em {
    font-style: italic;
}

.testimonial-card-main {
    background-color: var(--card);
    border-radius: 1.5rem;
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
}

.testimonial-rating {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.rating-score {
    font-size: 1.875rem;
    font-weight: bold;
    color: var(--foreground);
}

.rating-divider {
    color: hsl(25, 15%, 45%);
}

.stars {
    display: flex;
    gap: 0.125rem;
    margin-left: 0.5rem;
}

.stars span {
    color: var(--gold);
    font-size: 1.25rem;
}

.testimonial-recommend {
    color: var(--olive);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.testimonials-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.testimonial-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.testimonial-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--taupe);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.875rem;
}

.testimonial-info {
    flex: 1;
}

.testimonial-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.testimonial-author {
    font-weight: 500;
    color: var(--foreground);
}

.testimonial-date {
    font-size: 0.75rem;
    color: hsl(25, 15%, 45%);
}

.testimonial-text {
    color: hsl(25, 22%, 28%, 0.8);
    font-size: 0.875rem;
}

.testimonial-source {
    display: inline-block;
    color: var(--olive);
    font-size: 0.875rem;
    margin-top: 1rem;
}

.testimonial-source:hover {
    text-decoration: underline;
}

.testimonials-side {
    display: none;
    position: relative;
}

.testimonial-card-side {
    background-color: var(--card);
    border-radius: 1.5rem;
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
	margin-top: 1.5rem;
	margin-right: 16rem;
}

.floral-decoration {
    position: absolute;
    right: -12rem;
    top: -3rem;
    width: 50rem;
    height: auto;
    opacity: 1;
	z-index: -1;
}

.floral-decoration img {
    width: 100%;
    height: auto;
}

@media (min-width: 1024px) {
    .testimonials-section {
        padding: 6rem 0;
    }
    
    .testimonials-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
    
    .testimonials-title {
        font-size: 3rem;
    }
    
    .testimonials-side {
        display: block;
    }
}

@media (min-width: 1280px) {
    .testimonials-title {
        font-size: 3.5rem;
    }
}

/* ============================================
   FOOTER / CONTACT SECTION
   ============================================ */
.contact-footer {
    background-color: var(--brown);
    color: var(--cream-light);
    padding: 4rem 0;
    position: relative;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

.footer-title {
    font-family: var(--font-heading);
    font-size: 1.875rem;
    color: var(--cream-light);
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.footer-title-line {
    width: 4px;
    height: 2.5rem;
    background-color: var(--cream-light);
}

.footer-contacts {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--cream-light);
    transition: opacity 0.3s ease;
}

.footer-contact-item:hover {
    opacity: 0.8;
}

.footer-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.footer-map {
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: var(--shadow-elevated);
    height: 16rem;
}

.footer-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.back-to-top {
    position: absolute;
    left: 2rem;
    bottom: 5rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--taupe-dark);
    border: none;
    color: var(--cream-light);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: var(--shadow-card);
    opacity: 0;
    pointer-events: none;
}

.back-to-top:hover {
    background-color: var(--taupe);
}

.back-to-top svg {
    width: 1.25rem;
    height: 1.25rem;
}

.footer-social {
    position: fixed;
    bottom: 1.5rem;
    right: 6rem;
    z-index: 40;
    display: flex;
    gap: 0.75rem;
}

.social-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-elevated);
    transition: transform 0.3s ease;
}

.social-icon:hover {
    transform: scale(1.1);
}

.social-icon svg {
    width: 1.75rem;
    height: 1.75rem;
    fill: var(--cream-light);
}

.social-icon.instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.footer-copyright {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(30, 20%, 96%, 0.2);
}

.footer-copyright p {
    color: hsl(30, 20%, 96%, 0.6);
    font-size: 0.875rem;
}

@media (min-width: 1024px) {
    .contact-footer {
        padding: 5rem 0;
    }
    
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
    
    .footer-title {
        font-size: 2.25rem;
    }
    
    .footer-map {
        height: 20rem;
    }
}

/* ============================================
   WHATSAPP BUTTON
   ============================================ */
.whatsapp-button {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 50;
    width: 3.5rem;
    height: 3.5rem;
    background-color: var(--whatsapp);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-elevated);
    transition: transform 0.3s ease;
}

.whatsapp-button:hover {
    transform: scale(1.1);
}

.whatsapp-button svg {
    width: 1.75rem;
    height: 1.75rem;
    fill: var(--cream-light);
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-in-right {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fade-in {
    animation: fade-in 0.6s ease-out forwards;
}

.animate-slide-in-right {
    animation: slide-in-right 0.6s ease-out forwards;
}

/* ============================================
   UTILITIES
   ============================================ */
.text-center {
    text-align: center;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-8 {
    margin-bottom: 2rem;
}

.mt-4 {
    margin-top: 1rem;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
    .footer-social {
        display: none;
    }
    
    .back-to-top {
        left: 1rem;
        bottom: 4rem;
    }
}

/* ==========================================================================
   CORREÇÃO RESPONSIVA INTELIGENTE
   Aplica ajustes APENAS em telas menores que 1600px (Notebooks, Tablets).
   Na sua tela (1920px+), o layout original será preservado.
   ========================================================================== */

@media (max-width: 1600px) {
    /* --- 2. HERO SECTION --- */
    .hero-section {
        /* Altura automática evita cortes em telas baixas (1366x768) */
        height: auto; 
        padding-bottom: 4rem;
        min-height: 100vh;
    }

    .hero-title {
        padding-left: 0;
		padding-top: 1.750rem;
        font-size: 2.5rem; /* Fonte menor para caber em telas menores */
        text-align: center; /* Centraliza visualmente se necessário */
    }

    .hero-image {
    object-fit: fill;
    width: 100%;
    max-width: 90rem;
    height: 45rem;
    border-radius: 1.5rem;
    padding: 0;
}

    .hero-description p, 
    .btn-agendar {
        padding-left: 0;
        margin-left: 0;
        text-align: center; /* Opcional: centraliza texto no mobile/tablet */
    }

    /* Centraliza o botão */
    .btn-agendar {
        display: table; /* Truque para centralizar margin auto */
        margin: 0 auto;
        padding-left: 1.5rem;
    }

    /* --- 3. SEÇÃO SOBRE (Isabella) --- */
    /* Remove a margem negativa de -18.5rem que joga o texto para fora em notebooks */
    .section-title-large {
        margin-left: 0;
        text-align: center;
        font-size: 2.5rem;
    }

    .section-subtitle-italic {
        margin-right: 0;
        text-align: center;
    }

    .about-text {
        margin-right: 0;
        padding: 0 2rem; /* Adiciona respiro lateral */
    }

    .about-grid {
        gap: 2rem; /* Diminui o espaço entre foto e texto */
    }

    /* --- 4. SEÇÃO TERAPIA --- */
    .section-header {
        margin-left: 0;
        text-align: center;
    }

    .therapy-services {
        padding-left: 0;
    
    }

    /* Ajuste da linha conectora para não quebrar em layouts apertados */
    .service-item:not(:last-child)::after {
        left: 1.4rem; /* Ajuste fino da linha vertical */
    }

    .appointments-intro{
        padding-left: 8rem;
    }

    /* --- 5. BACKGROUNDS E FLORAIS --- */
    /* Garante que o floral não cubra o texto em telas apertadas */
    .floral-appointment {
        left: auto;
        right: -5rem;
        top: 0;
        width: 50%;
        opacity: 0.4; /* Deixa mais transparente para não atrapalhar leitura */
    }
}

/* ==========================================================================
   AJUSTE DE SEGURANÇA GERAL (Para todas as telas)
   Isso garante que nada crie barra de rolagem horizontal indesejada
   ========================================================================== */
html, body {
    overflow-x: hidden;
    width: 100%;
}

img {
    max-width: 100%;
    height: auto;
}
	
	/* =================================================================
   SALVA-VIDAS PARA NOTEBOOKS (Resoluções médias + Zoom do Windows)
   Aplica correções apenas entre 1024px e 1440px
   ================================================================= */
@media (min-width: 1024px) and (max-width: 1440px) {
    
    /* 1. AJUSTA O CONTAINER GERAL */
    .header-container, 
    .hero-grid,
    .about-grid {
        max-width: 100%;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /* 2. HERO SECTION (Onde está o maior problema do print) */
    .hero-section {
        min-height: auto; /* Remove altura forçada que corta conteúdo */
        padding-top: 8rem; /* Espaço para o header não cobrir o texto */
        padding-bottom: 4rem;
        height: auto;
    }

    .hero-grid {
        /* Mantém duas colunas, mas ajusta proporção se necessário */
        display: grid;
        grid-template-columns: 1fr 1fr; 
        gap: 2rem; /* Diminui o buraco entre texto e foto */
        align-items: center;
    }

    /* Reduz a fonte gigante do título para caber na tela */
    .hero-title {
        font-size: 2.5rem; 
        line-height: 1.1;
    }
    
    .hero-description p {
        font-size: 1rem;
    }

    /* SEGURA A IMAGEM PARA NÃO ESTOURAR */
    .hero-image-wrapper {
        height: auto;
        display: flex;
        justify-content: center;
    }

    .hero-image {
        width: 100%;
        height: auto; /* Deixa a altura automática para não distorcer */
        max-height: 500px; /* Trava a altura máxima para não cobrir tudo */
        object-fit: cover;
        border-radius: 1.5rem; /* Garante que as bordas fiquem bonitas */
    }

    /* 3. SEÇÃO SOBRE (Para garantir que não quebre depois) */
    .section-title-large {
        font-size: 2.2rem;
        margin-left: 0; /* Remove margens negativas perigosas */
    }
    
    .about-text {
        padding-right: 0;
    }
}