/* tutorial.css
   Carrossel com profundidade / blur lateral.
   Complementa base.css (usa variáveis de tema).
*/

/* ===== HERO ===== */
/* ===== HERO (TÍTULO) ===== */
.tutorial-hero {
    text-align: center;
    margin: 36px auto 18px; /* Centraliza a margem */
    padding: 0 20px; /* Garante que não encoste nas bordas em telas pequenas */
}

.tutorial-hero h1 {
    font-size: 2.6rem;
    font-weight: 900;
    color: var(--text-color);
    margin: 0;
    line-height: 1.2;
    
    /* --- A "CAIXINHA" --- */
     background-color: rgba(118, 206, 191, 0.616);
    border: 6px solid #1c6348; /* Usa a cor de fundo dos cards ou branco */
    display: inline-block; /* Faz a caixa ter o tamanho do texto (mais padding) */
    padding: 20px 40px;    /* Espaço interno: 20px em cima/baixo, 40px nos lados */
    border-radius: 20px;   /* Arredonda os cantos */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /* Sombra suave para destacar do fundo */
    border: 12px solid rgba(0, 0, 0, 0.05); /* Borda bem sutil opcional */
    max-width: 1050px;      /* Limite de largura para não ficar gigante */
    width: fit-content;    /* Garante que se ajuste ao conteúdo */
}

/* Ajuste para celular para a caixa não estourar a tela */
@media (max-width: 600px) {
    .tutorial-hero h1 {
        font-size: 1.8rem;
        padding: 15px 20px;
        width: 100%; /* No celular ocupa a largura disponível */
    }
}

/* ===== DEPTH CAROUSEL (3-LAYER) ===== */
.depth-carousel-section {
    width: 100%;
    /* CORREÇÃO AQUI: Alinhamento em coluna para as bolinhas ficarem embaixo */
    display: flex;
    flex-direction: column; 
    align-items: center; 
    
    margin-top: 24px;
    margin-bottom: 40px;
}

.depth-carousel-wrapper {
    width: 100%;
    max-width: 1150px;
    position: relative;
    padding: 16px 8px;
    box-sizing: border-box;
}

/* Viewport: área visível do carrossel */
.depth-viewport {
    position: relative;
    width: 100%;
    height: 420px;            /* grande como no print */
    margin: 0 auto;
    overflow: visible;        /* permitimos slides laterais visíveis */
    pointer-events: none;
}

/* Slide base */
.depth-slide {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center center;
    transition: transform 520ms cubic-bezier(.2,.9,.2,1),
                filter 420ms ease,
                left 520ms cubic-bezier(.2,.9,.2,1),
                opacity 420ms ease;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(5,50,50,0.12);
    overflow: hidden;
    cursor: pointer;
    pointer-events: auto; /* ativado apenas nos slides visíveis */
    will-change: transform, left, filter, opacity;
    background: var(--card-bg);
}

/* Imagem do slide */
.depth-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ESTADO: slide central (ativo) */
.depth-slide.active {
    width: 66%;
    height: 100%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    z-index: 30;
    filter: none;
    opacity: 1;
}

/* ESTADO: slide esquerdo (prev) */
.depth-slide.prev {
    width: 28%;
    height: 84%;
    left: 20%;
    transform: translate(-50%, -50%) scale(0.92);
    z-index: 20;
    filter: blur(5px) saturate(0.9) brightness(0.96);
    opacity: 0.82;
    box-shadow: 0 10px 30px rgba(5,50,50,0.08);
}

/* ESTADO: slide direito (next) */
.depth-slide.next {
    width: 28%;
    height: 84%;
    left: 80%;
    transform: translate(-50%, -50%) scale(0.92);
    z-index: 20;
    filter: blur(5px) saturate(0.9) brightness(0.96);
    opacity: 0.82;
    box-shadow: 0 10px 30px rgba(5,50,50,0.08);
}

/* slides fora do alcance ficam escondidos / atrás */
.depth-slide.out {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    z-index: 5;
    left: 50%;
    filter: blur(8px) brightness(0.85);
    pointer-events: none;
}

/* ===== NAV SETAS ===== */
.depth-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 6px 20px rgba(5,50,50,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    color: var(--text-color);
    font-size: 1.2rem;
    transition: transform 160ms ease, background 160ms ease;
}
.depth-arrow:hover { transform: translateY(-50%) scale(1.05); background: white; }

.depth-arrow.left { left: 10px; }
.depth-arrow.right { right: 10px; }

/* Pagination simples (dots) */
.depth-pagination {
    text-align: center;
    margin-top: 12px;
    width: 100%; /* Garante largura total para centralizar */
}
.depth-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 6px 4px;
    border-radius: 50%;
    background: rgba(10,72,73,0.15);
    transition: background 220ms ease, transform 220ms ease;
    cursor: pointer; /* Adicionado cursor pointer */
}
.depth-dot.active { background: #0a4849; transform: scale(1.15); }

/* ===== RESPONSIVO ===== */
@media (max-width: 992px) {
    .depth-viewport { height: 340px; }
    .tutorial-hero h1 { font-size: 2rem; }
    .depth-arrow { width: 46px; height: 46px; }
}

@media (max-width: 600px) {
    .depth-viewport { height: 260px; }
    .depth-slide.active { width: 86%; height: 100%; }
    .depth-slide.prev, .depth-slide.next { left: 12%; width: 30%; height: 78%; }
    .depth-arrow.left { left: 6px; }
    .depth-arrow.right { right: 6px; }
}

/* ===== FAQ ===== */
.faq-section {
    margin-top: 48px;
    width: 100%;
    max-width: 1150px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 48px;
}
.faq-section h2 {
    font-size: 2rem;
    color: var(--text-color);
    margin: 0 0 18px 0;
}
.faq-item { margin-bottom: 14px; }
.faq-question {
    width: 100%;
    background: #c9ece6;
    border: 2px solid #94c8c3;
    border-radius: 12px;
    padding: 16px;
    font-size: 1.03rem;
    font-weight: 800;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.faq-answer {
    display: none;
    background: #eaf7f5;
    padding: 14px;
    border-radius: 0 0 12px 12px;
    border: 2px solid #94c8c3;
    border-top: none;
}
.faq-question.active i { transform: rotate(180deg); }
/* ========================================
   MOBILE: manter 2 atrás e 1 principal
   (max-width: 600px)
======================================== */

@media (max-width: 600px) {

    /* ===== HERO ===== */
    .tutorial-hero h1 {
        font-size: 1.5rem;
        padding: 12px 14px;
        border-width: 8px;
        width: 95%;
        max-width: 95%;
        line-height: 1.35;
    }

    /* ===== CARROSSEL ===== */
    .depth-carousel-section {
        padding: 0 8px;
        margin-top: 10px;
        margin-bottom: 25px;
    }

    .depth-carousel-wrapper {
        max-width: 100%;
        padding: 0;
    }

    .depth-viewport {
        height: 240px; /* Altura ideal p/ caber tudo */
        overflow: visible;
    }

    /* SLIDE CENTRAL (principal) */
    .depth-slide.active {
        width: 88%;
        height: 100%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1);
        z-index: 30;
        border-radius: 14px;
        opacity: 1;
    }

    /* SLIDE ATRÁS ESQUERDA */
    .depth-slide.prev {
        width: 38%;
        height: 78%;
        left: 10%; /* Bem visível */
        transform: translate(-50%, -50%) scale(0.82);
        opacity: 0.75;
        filter: blur(4px) brightness(0.94);
        z-index: 15;
    }

    /* SLIDE ATRÁS DIREITA */
    .depth-slide.next {
        width: 38%;
        height: 78%;
        left: 90%; /* Bem visível */
        transform: translate(-50%, -50%) scale(0.82);
        opacity: 0.75;
        filter: blur(4px) brightness(0.94);
        z-index: 15;
    }

    /* Setas */
    .depth-arrow {
        width: 38px;
        height: 38px;
        font-size: 0.9rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .depth-arrow.left { left: -2px; }
    .depth-arrow.right { right: -2px; }

    /* Paginação */
    .depth-pagination {
        margin-top: 14px;
        text-align: center;
        width: 100%;
        display: block;
        clear: both;
    }

    .depth-dot {
        width: 8px;
        height: 8px;
        margin: 4px 3px;
    }

    /* FAQ */
    .faq-section {
        padding: 0 12px 40px;
        margin-top: 25px;
    }
}
/* =========================================
   MODO ESCURO - TUTORIAL (OFICIAL R.U.M.O)
   ========================================= */

/* 1. Redefinição das Variáveis Globais */
body.dark-mode {
    --bg-color: #053536;
    --header-bg: #0e3b3b;
    --text-color: #cce5e2;
    --card-bg: #2c4c4c;
    --card-border: #4a6a6a;
    --card-hub-bg: #2a5a5a;
    --card-hub-border: #1a4a4a;
    --form-input-bg: #1e3b3b;
    --form-input-border: #6a8a8a;
    --border-color: #0e3b3b;
    
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* 2. Ajuste do Título HERO (Caixinha) */
body.dark-mode .tutorial-hero h1 {
    /* Fundo mais escuro para destacar o texto */
    background-color: var(--card-hub-bg); 
    border-color: var(--card-hub-border);
    color: #ffffff; /* Texto branco puro para contraste */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

/* 3. Ajuste do Carrossel */
/* Os slides já usam var(--card-bg), então só precisamos ajustar as setas */
body.dark-mode .depth-arrow {
    background: var(--card-bg);
    color: var(--text-color);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

body.dark-mode .depth-arrow:hover {
    background: var(--card-hub-border);
    color: #fff;
}

/* Bolinhas da paginação */
body.dark-mode .depth-dot {
    background: rgba(204, 229, 226, 0.2); /* Cor clara transparente */
}
body.dark-mode .depth-dot.active {
    background: #76cebf; /* Verde destaque da marca */
    box-shadow: 0 0 8px rgba(118, 206, 191, 0.6);
}

/* 4. Ajuste do FAQ (Perguntas e Respostas) */
/* Atualmente elas têm cores fixas (#c9ece6), precisamos forçar o dark mode */

body.dark-mode .faq-question {
    background-color: var(--card-hub-bg);
    border-color: var(--card-hub-border);
    color: #fff;
}

body.dark-mode .faq-answer {
    background-color: var(--form-input-bg); /* Um tom diferente para a resposta */
    border-color: var(--card-hub-border);
    color: var(--text-color);
}

body.dark-mode .faq-section h2 {
    color: var(--text-color);
}

/* Ícone da seta do FAQ */
body.dark-mode .faq-question i {
    color: #76cebf;
}
/* Escurecer as ondas no modo noturno */
body.dark-mode .ondacima,
body.dark-mode .ondabaixo {
    filter: brightness(0.2) sepia(1) hue-rotate(120deg) saturate(3);
    /* Isso tinge a imagem branca para um tom esverdeado escuro */
    opacity: 0.8;
}