/* ==========================================================================
   MOBILE STYLESHEET - SCREEN AND (MAX-WIDTH: 768PX)
   ========================================================================== */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative !important;
}
/* ==========================================================================
   CONTAINER FLUIDO - LARGURA TOTAL NO MOBILE
   ========================================================================== */
.container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 15px !important;
}

/* ==========================================================================
   SEÇÕES - PADDING REDUZIDO E OTIMIZADO
   ========================================================================== */
.faq-section {
    padding: 40px 15px !important;
}

.depoimentos-section {
    padding: 40px 15px 30px !important;
}

.experiencias-section {
    padding: 40px 15px !important;
}

.mentorship-section {
    padding: 40px 15px !important;
}

.yoga-to-mind-section {
    padding: 40px 15px !important;
}

.familia-section {
    padding: 40px 15px !important;
}

/* ==========================================================================
   EXPERIÊNCIAS - CARDS 100% LARGURA EMPILHADOS
   ========================================================================== */
.experiencias-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
}

.experiencia-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 1.5rem !important;
    padding: 2rem 15px !important;
}

/* ==========================================================================
   DEPOIMENTOS - CARROSSEL OTIMIZADO PARA MOBILE
   ========================================================================== */
.depoimento-card {
    width: calc((100vw - 180px) * 0.6) !important; /* Reduzido em 20% */
    max-width: none !important;
    margin: 0 !important;
    padding: 1.5rem !important; /* Padding reduzido */
    border-radius: 12px !important;
    background: var(--bg-cream) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
    height: auto !important;
    max-height: none !important; /* Remover limite de altura */
    overflow-y: visible !important; /* Remover scroll interno */
    box-sizing: border-box !important;
}

.depoimentos-track {
    display: flex !important;
    flex-direction: row !important;
    gap: 0 !important; /* Sem espaços laterais */
    transition: transform 0.3s ease !important;
    padding: 0 !important;
}

.depoimentos-slide {
    display: flex !important;
    min-width: 100% !important;
    padding: 0 2px!important; /* Espaço para setas */
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    align-items: flex-start !important;
    margin: 0 !important; /* Remover margens laterais */
}

/* Botões visíveis APENAS na seção de depoimentos */
.depoimentos-section .carousel-btn {
    display: flex !important;
    position: absolute !important; /* Mudar para absolute */
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: var(--primary-gold) !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    width: 32px !important; /* Botões 20% menores */
    height: 32px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    z-index: 100 !important; /* Z-index menor, apenas na seção */
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3) !important;
}

.depoimentos-section .carousel-btn-prev {
    left: 20px !important;
}

.depoimentos-section .carousel-btn-next {
    right: 20px !important;
}

/* Esconder botões fora da seção de depoimentos */
.carousel-btn:not(.depoimentos-section .carousel-btn) {
    display: none !important;
}

/* Ajustar posição do carrossel */
.depoimentos-carousel {
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

/* Container dos slides */
.depoimentos-slider {
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    max-width: 100% !important;
}

/* Indicadores visíveis e funcionais */
.carousel-indicators {
    display: flex !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    margin-top: 1rem !important;
    padding: 0 90px !important; /* Espaço consistente com slides */
}

.indicator {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(197, 143, 74, 0.3) !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.indicator.active {
    background: var(--primary-gold) !important;
    transform: scale(1.2) !important;
}

/* Ajustar texto dos depoimentos para melhor leitura */
.depoimento-text {
    font-size: 12px !important; /* Fonte reduzida em 20% */
    line-height: 1.5 !important;
    color: var(--text-dark) !important;
    margin-bottom: 1rem !important;
}

/* Ajustar header do depoimento */
.depoimento-header {
    margin-bottom: 1.2rem !important;
}

.client-name {
    font-size: 15px !important; /* Fonte reduzida em 20% */
    margin-bottom: 0.5rem !important;
}

/* Ajustar foto do cliente */
.client-photo {
    width: 50px !important; /* Fotos reduzidas em 20% */
    height: 50px !important;
}

.client-photo .photo-circle-img {
    width: 50px !important;
    height: 50px !important;
}

/* Ajustar rating */
.rating {
    margin-top: 0.3rem !important;
}

.star {
    font-size: 12px !important; /* Estrelas reduzidas em 20% */
}

/* ==========================================================================
   FOTOS DE CLIENTES - TAMANHO AJUSTADO PARA MOBILE
   ========================================================================== */
.client-photo {
    width: 50px !important; /* Mantendo tamanho ajustado */
    height: 50px !important;
}

.client-photo .photo-circle-img {
    width: 50px !important;
    height: 50px !important;
}

/* ==========================================================================
   TIPOGRAFIA - TAMANHO OTIMIZADO PARA LEGIBILIDADE
   ========================================================================== */
.depoimento-text {
    font-size: 14px !important; /* Mantendo tamanho ajustado */
    line-height: 1.5 !important;
    color: var(--text-dark) !important;
}

.experiencia-descricao {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

.faq-question-text {
    font-size: 16px !important;
}

/* ==========================================================================
   ELEMENTOS OCULTOS NO MOBILE
   ========================================================================== */
.hero-visual {
    display: none !important;
}

.sobre-mentora-photo {
    display: none !important;
}

.familia-section {
    display: none !important;
}

.yoga-photos-left .photo-placeholder,
.yoga-photos-right .photo-placeholder {
    display: none !important;
}

/* ==========================================================================
   MENU MOBILE - ESPAÇAMENTO OTIMIZADO
   ========================================================================== */
.nav-menu li {
    margin: 0 !important;
}

.nav-menu li a {
    padding: 0.8rem 1.5rem !important;
    border-radius: 25px !important;
    background: transparent !important;
    color: var(--text-dark) !important;
    margin: 0.5rem 0 !important;
    font-weight: 600 !important;
}

.nav-menu li:last-child a {
    background: var(--primary-gold) !important;
    font-size: 1.1rem !important;
    padding: 1rem 2rem !important;
    color: white !important;
}

/* ==========================================================================
   TÍTULOS - TAMANHO REDUZIDO
   ========================================================================== */
.hero-welcome-text {
    font-size: 1.4rem !important;
    line-height: 1.5 !important;
}

.experiencias-title {
    font-size: 2rem !important;
}

.faq-title {
    font-size: 2rem !important;
}

/* ==========================================================================
   YOGA TO MIND - LAYOUT OTIMIZADO
   ========================================================================== */
.yoga-photos-left,
.yoga-photos-right {
    order: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
    width: 100% !important;
}

.yoga-to-mind-content {
    order: 1 !important;
    padding: 0 !important;
}

/* ==========================================================================
   FOOTER - LAYOUT CENTRALIZADO
   ========================================================================== */
.footer-links {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
}

.social-links {
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

/* ==========================================================================
   RESPONSIVIDADE DE VÍDEOS E IMAGENS
   ========================================================================== */
iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

.video-card iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 200px !important;
}

.aspect-video {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 200px !important;
}

/* ==========================================================================
   SOBRE MENTORA - TEXTO OTIMIZADO
   ========================================================================== */
.sobre-mentora-text {
    padding: 1.5rem !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    width: 100% !important;
    text-align: center !important; /* Centralizar texto */
}

/* ==========================================================================
   SOBRE MENTORA - LAYOUT PARA MOBILE COM FLEXBOX
   ========================================================================== */
.sobre-mentora-content {
    display: flex !important; /* Usar flexbox para controle */
    flex-direction: column !important; /* Direção vertical */
    align-items: center !important; /* Centralizar conteúdo */
    gap: 2rem !important; /* Espaço entre texto e vídeo */
    width: 100% !important; /* Largura total */
}

.sobre-mentora-photo {
    display: flex !important; /* Mostrar vídeo no mobile */
    justify-content: center !important; /* Centralizar vídeo */
    order: 2 !important; /* Vídeo depois do texto */
    width: 100% !important; /* Largura total do container */
    max-width: 100% !important; /* Sem limite de largura */
}

/* ==========================================================================
   CARROSSEL - BOTÕES OCULTOS E INDICADORES
   ========================================================================== */
.carousel-btn {
    display: flex !important; /* Já configurado acima, mantido por compatibilidade */
}

.carousel-indicators {
    display: flex !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    margin-top: 1rem !important;
}

.indicator {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(197, 143, 74, 0.3) !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.indicator.active {
    background: var(--primary-gold) !important;
    transform: scale(1.2) !important;
}

/* ==========================================================================
   GRID LAYOUTS - COLUNA ÚNICA
   ========================================================================== */
.hero-content {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
}

.yoga-to-mind-layout {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
}

.familia-content {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
}

.mentorship-content {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 2rem !important;
}

.footer-content {
    display: grid !important;
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 2rem !important;
    margin-bottom: 2rem !important;
}

.video-grid {
    grid-template-columns: 1fr !important;
}

/* ==========================================================================
   VÍDEOS - CORREÇÃO ESTRUTURAL DE ASPECT RATIO
   ========================================================================== */

/* Container do vídeo do Sobre a Mentora */
.sobre-mentora-photo iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}

/* Container do vídeo do Sobre a Mentora */
.sobre-mentora-photo .aspect-video-short {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    aspect-ratio: 9 / 16 !important; /* Melhor para Shorts */
}

/* Garantir que o iframe do YouTube ocupe o container */
.sobre-mentora-photo iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}

/* ==========================================================================
   YOGA TO MIND - FOTOS LADO A LADO PARA MOBILE
   ========================================================================== */

/* Container principal das fotos */
.yoga-to-mind-layout {
    display: flex !important;
    flex-direction: column !important; /* Direção vertical */
    align-items: center !important; /* Centralizar */
    gap: 1.5rem !important; /* Espaço entre elementos */
}

/* Layout das fotos - 2x2 grid */
.yoga-photos-left {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* 2 colunas */
    gap: 1rem !important; /* Espaço entre fotos */
    order: 1 !important; /* Fotos antes do texto */
}

.yoga-photos-right {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* 2 colunas */
    gap: 1rem !important; /* Espaço entre fotos */
    order: 3 !important; /* Fotos depois do texto */
}

/* Fotos em formato de grade 2x2 */
.yoga-to-mind-section .photo-circle-img {
    width: 80px !important; /* Tamanho adequado para mobile */
    height: 80px !important;
    border-radius: 50%;
    object-fit: cover;
}

/* Forçar exibição das fotos */
.yoga-to-mind-section .photo-placeholder {
    display: flex !important; /* Garantir que apareçam */
    justify-content: center !important; /* Centralizar */
    align-items: center !important; /* Centralizar */
    width: 100% !important; /* Largura total */
    height: 80px !important; /* Altura fixa */
}