/**
 * CSS ESPECÍFICO - PÁGINA INDEX
 * Dra. Liliane Zebral - Clínica Neurodesenvolvimento
 * 
 * Arquivo separado para segmentação de estilos por seção do index
 * Permite modificações pontuais em cada segmento sem afetar outras páginas
 */

/* ==================== ANIMACIONES DE PALABRAS FLUTUANTES ==================== */
/* Desde abajo hacia arriba */
@keyframes float-bottom-to-top {
    0% {
        opacity: 0;
        transform: translateY(100px) translateX(0);
    }
    5% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(-400px) translateX(60px);
    }
}

/* Desde izquierda hacia derecha */
@keyframes float-left-to-right {
    0% {
        opacity: 0;
        transform: translateX(-150px) translateY(0);
    }
    5% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(150px) translateY(-80px);
    }
}

/* Desde derecha hacia izquierda */
@keyframes float-right-to-left {
    0% {
        opacity: 0;
        transform: translateX(150px) translateY(0);
    }
    5% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(-150px) translateY(-80px);
    }
}

/* Desde arriba hacia abajo */
@keyframes float-top-to-bottom {
    0% {
        opacity: 0;
        transform: translateY(-100px) translateX(0);
    }
    5% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(150px) translateX(60px);
    }
}

.floating-word {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    bottom: -80px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 3.2rem;
    color: rgba(220, 80, 60, 0.35);
    position: absolute;
}

/* ==================== MOBILE: ADAPTAR PALABRAS FLOTANTES EN MÓVILES ==================== */
@media (max-width: 768px) {
    .floating-word {
        font-size: 1.2rem;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    /* Ajustar posiciones horizontales para móvil */
    .floating-word-1 { left: 15% !important; }
    .floating-word-4 { left: 45% !important; }
    .floating-word-7 { left: 75% !important; }
    .floating-word-10 { left: 95% !important; }
    .floating-word-17 { left: 30% !important; }
    .floating-word-18 { left: 60% !important; }
    .floating-word-19 { left: 85% !important; }
    .floating-word-20 { left: 100% !important; }
}

/* GRUPO 1: Desde abajo hacia arriba */
.floating-word-1 { animation: float-bottom-to-top 20s ease-in-out infinite; left: 12%; }
.floating-word-4 { animation: float-bottom-to-top 20s ease-in-out infinite 5s; left: 35%; }
.floating-word-7 { animation: float-bottom-to-top 20s ease-in-out infinite 10s; left: 58%; }
.floating-word-10 { animation: float-bottom-to-top 20s ease-in-out infinite 15s; left: 82%; }

/* GRUPO 2: Desde izquierda hacia derecha */
.floating-word-2 { animation: float-left-to-right 20s ease-in-out infinite 2.5s; top: 15%; left: -100px; }
.floating-word-5 { animation: float-left-to-right 20s ease-in-out infinite 7.5s; top: 35%; left: -100px; }
.floating-word-8 { animation: float-left-to-right 20s ease-in-out infinite 12.5s; top: 55%; left: -100px; }
.floating-word-11 { animation: float-left-to-right 20s ease-in-out infinite 17.5s; top: 75%; left: -100px; }

/* GRUPO 3: Desde derecha hacia izquierda */
.floating-word-3 { animation: float-right-to-left 20s ease-in-out infinite 1.25s; top: 25%; right: -100px; left: auto; }
.floating-word-6 { animation: float-right-to-left 20s ease-in-out infinite 6.25s; top: 45%; right: -100px; left: auto; }
.floating-word-9 { animation: float-right-to-left 20s ease-in-out infinite 11.25s; top: 65%; right: -100px; left: auto; }
.floating-word-12 { animation: float-right-to-left 20s ease-in-out infinite 16.25s; top: 85%; right: -100px; left: auto; }

/* GRUPO 4: Desde arriba hacia abajo */
.floating-word-13 { animation: float-top-to-bottom 20s ease-in-out infinite 3.75s; top: -80px; left: 18%; }
.floating-word-14 { animation: float-top-to-bottom 20s ease-in-out infinite 8.75s; top: -80px; left: 42%; }
.floating-word-15 { animation: float-top-to-bottom 20s ease-in-out infinite 13.75s; top: -80px; left: 68%; }
.floating-word-16 { animation: float-top-to-bottom 20s ease-in-out infinite 18.75s; top: -80px; left: 88%; }

/* GRUPO 1 CONTINUACIÓN: Desde abajo hacia arriba */
.floating-word-17 { animation: float-bottom-to-top 20s ease-in-out infinite 2.5s; left: 25%; }
.floating-word-18 { animation: float-bottom-to-top 20s ease-in-out infinite 7.5s; left: 48%; }
.floating-word-19 { animation: float-bottom-to-top 20s ease-in-out infinite 12.5s; left: 72%; }
.floating-word-20 { animation: float-bottom-to-top 20s ease-in-out infinite 17.5s; left: 90%; }

/* GRUPO 2 CONTINUACIÓN: Desde izquierda hacia derecha */
.floating-word-21 { animation: float-left-to-right 20s ease-in-out infinite 4.06s; top: 20%; left: -100px; }
.floating-word-22 { animation: float-left-to-right 20s ease-in-out infinite 9.06s; top: 40%; left: -100px; }
.floating-word-23 { animation: float-left-to-right 20s ease-in-out infinite 14.06s; top: 60%; left: -100px; }
.floating-word-24 { animation: float-left-to-right 20s ease-in-out infinite 19.06s; top: 80%; left: -100px; }

/* GRUPO 3 CONTINUACIÓN: Desde derecha hacia izquierda */
.floating-word-25 { animation: float-right-to-left 20s ease-in-out infinite 4.37s; top: 30%; right: -100px; left: auto; }
.floating-word-26 { animation: float-right-to-left 20s ease-in-out infinite 9.37s; top: 50%; right: -100px; left: auto; }
.floating-word-27 { animation: float-right-to-left 20s ease-in-out infinite 14.37s; top: 70%; right: -100px; left: auto; }
.floating-word-28 { animation: float-right-to-left 20s ease-in-out infinite 19.37s; top: 90%; right: -100px; left: auto; }

/* GRUPO 4 CONTINUACIÓN: Desde arriba hacia abajo */
.floating-word-29 { animation: float-top-to-bottom 20s ease-in-out infinite 5s; top: -80px; left: 28%; }
.floating-word-30 { animation: float-top-to-bottom 20s ease-in-out infinite 10s; top: -80px; left: 55%; }
.floating-word-31 { animation: float-top-to-bottom 20s ease-in-out infinite 15s; top: -80px; left: 78%; }
.floating-word-32 { animation: float-top-to-bottom 20s ease-in-out infinite 20s; top: -80px; left: 95%; }
.floating-word-33 { animation: float-bottom-to-top 20s ease-in-out infinite 18.75s; left: 40%; }

/* ==================== SEÇÃO HERO (INÍCIO) ==================== */
.hero {
    background: #e5c1b5;
    position: relative; 
}

.hero-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.hero-content {
    animation: fadeInDown 0.8s ease-out;
}

.hero-content h1 {
    color: var(--preto-suave);
    margin-bottom: 1.5rem;
}

.hero-content p {
    color: var(--cinza-escuro);
    font-size: 1.15rem;
    line-height: 1.8;
}

.hero-buttons {
    margin: 2.5rem 0;
}

.hero-buttons .btn {
    flex: 0 1 auto;
}

.hero-image-desktop {
    display: none;
}

.hero-image-mobile {
    display: block;
}

@media (min-width: 769px) {
    .hero-image-desktop {
        display: block !important;
    }
    
    .hero-image-mobile {
        display: none;
    }
}

@media (max-width: 768px) {
    .hero-buttons {
        flex-direction: column;
    }
    
    .hero-buttons .btn {
        width: 100%;
    }
}


/* ==================== MANIFESTO INSTITUCIONAL ==================== */
.manifesto {
    background: linear-gradient(135deg, #D4695E 0%, #C2574D 100%);
    color: white;
    padding: 3rem 0;
}

.manifesto h2 {
    color: white;
    margin-bottom: 2rem;
}

.manifesto blockquote {
    font-size: 1.2rem;
    font-style: italic;
    border-left: 4px solid white;
    padding-left: 2rem;
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.manifesto p {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.05rem;
}

.manifesto a {
    color: white;
    text-decoration: underline;
    font-weight: 600;
}

.manifesto a:hover {
    opacity: 0.8;
}


/* ==================== SEÇÃO "PARA QUEM EU TRABALHO" ==================== */
.para-quem-trabalho {
    padding: 4rem 0;
    background: white;
}

.para-quem-trabalho h2 {
    text-align: center;
    color: var(--vermelho-venoso);
    font-size: 2rem;
    margin-bottom: 1rem;
}

.para-quem-trabalho > p {
    text-align: center;
    color: var(--cinza-escuro);
    margin-bottom: 3rem;
}

.grid-segmentos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.segmento-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    border: 3px solid var(--vermelho-venoso);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    display: block;
}

.segmento-card:hover {
    box-shadow: 0 8px 20px rgba(233, 30, 99, 0.2);
    transform: translateY(-5px);
}

.segmento-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.segmento-card h3 {
    color: var(--vermelho-venoso);
    font-size: 1.2rem;
    margin: 0;
}

.segmento-card p {
    color: var(--cinza-escuro);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}


/* ==================== SEÇÃO FAMÍLIAS ==================== */
.secao-familias {
    background: linear-gradient(90deg, #e5c1b5 0%, #d7ccca 100%);
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}

.secao-familias h2 {
    text-align: center;
    color: #D4695E;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.secao-familias > div > p {
    text-align: center;
    color: var(--cinza-escuro);
    margin-bottom: 3rem;
}

.familias-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    max-width: 1000px;
    margin: 0 auto;
    align-items: center;
}

.familias-recurso {
    background: white;
    padding: 2rem;
    border-radius: 12px;
}

.familias-recurso h3 {
    color: #D4695E;
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
}

.familias-lista {
    list-style: none;
    padding: 0;
    color: var(--preto-suave);
}

.familias-lista li {
    padding: 0.8rem 0 0.8rem 1.5rem;
    border-bottom: 1px solid #eee;
    position: relative;
}

.familias-lista li:last-child {
    border-bottom: none;
}

.familias-lista li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #D4695E;
    font-weight: bold;
}

.familias-proximos-passos h3 {
    color: #D4695E;
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
}

.familias-proximos-passos p {
    color: var(--cinza-escuro);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.familias-alerta {
    background: #fff3e0;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    border-left: 4px solid #D4695E;
}

.familias-alerta p {
    margin: 0;
    color: var(--preto-suave);
    font-size: 0.95rem;
}

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


/* ==================== SEÇÃO SERVIÇOS ==================== */
.secao-servicos {
    padding: 4rem 0;
    background: #f9f9f9;
}

.secao-servicos h2 {
    text-align: center;
    margin-bottom: 3rem;
}

.servicos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.servico-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border-top: 4px solid var(--vermelho-venoso);
}

.servico-card:hover {
    box-shadow: 0 8px 20px rgba(233, 30, 99, 0.15);
    transform: translateY(-5px);
}

.servico-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.servico-card h3 {
    color: var(--preto-suave);
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
}

.servico-card p {
    color: var(--cinza-escuro);
    font-size: 0.95rem;
    line-height: 1.6;
}

.servico-card a {
    display: inline-block;
    margin-top: 1rem;
    color: var(--vermelho-venoso);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
}

.servico-card a:hover {
    text-decoration: underline;
}


/* ==================== BOTÃO TELECONSULTA DESTACADO ==================== */
.botao-teleconsulta {
    padding: 2rem 0;
    text-align: center;
    background: white;
}

.botao-teleconsulta .btn {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
}


/* ==================== SEÇÃO PALESTRAS ==================== */
.secao-palestras {
    padding: 4rem 0;
    background: #f9f9f9;
}

.secao-palestras h2 {
    text-align: center;
    margin-bottom: 3rem;
}

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

.palestras-conteudo h3 {
    color: var(--vermelho-venoso);
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.palestras-conteudo p {
    color: var(--cinza-escuro);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.palestras-lista {
    list-style: none;
    padding: 0;
}

.palestras-lista li {
    margin-bottom: 0.5rem;
    color: var(--cinza-escuro);
}

.palestras-imagem img {
    width: 100%;
    max-width: 100%;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

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


/* ==================== SEÇÃO SOBRE ==================== */
.secao-sobre {
    padding: 4rem 0;
    background: #f9f9f9;
}

.secao-sobre h2 {
    text-align: center;
    color: var(--vermelho-venoso);
    font-size: 2rem;
    margin-bottom: 3rem;
}

.sobre-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
    margin-bottom: 3rem;
}

.sobre-foto {
    text-align: center;
}

.sobre-foto img {
    width: 100%;
    max-width: 100%;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(233, 30, 99, 0.15);
    margin-bottom: 1.5rem;
}

.sobre-foto-legenda {
    background: #f9f9f9;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid var(--vermelho-venoso);
}

.sobre-foto-legenda h4 {
    color: var(--vermelho-venoso);
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.sobre-foto-legenda p {
    color: var(--cinza-escuro);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.sobre-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.sobre-card {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    border-top: 4px solid var(--vermelho-venoso);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sobre-card.missao {
    background: linear-gradient(135deg, #E91E63 0%, #C2185B 100%);
    color: white;
    border-top: none;
}

.sobre-card h3 {
    color: var(--vermelho-venoso);
    margin-top: 0;
    font-size: 1.1rem;
}

.sobre-card.missao h3 {
    color: white;
}

.sobre-card p {
    color: var(--cinza-escuro);
    line-height: 1.7;
    margin: 0;
    font-size: 0.95rem;
}

.sobre-card.missao p {
    color: rgba(255, 255, 255, 0.95);
}

.sobre-credibilidade {
    background: #f9f9f9;
    padding: 2.5rem 1.5rem;
    border-radius: 12px;
    border-left: 5px solid var(--vermelho-venoso);
    margin-top: 2rem;
}

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

.credibilidade-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.credibilidade-numero {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--vermelho-venoso);
    margin-bottom: 0.5rem;
}

.credibilidade-label {
    color: var(--cinza-escuro);
    font-size: 0.95rem;
}

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


/* ==================== SEÇÃO TESTES ==================== */
.secao-testes {
    padding: 4rem 0;
    background: white;
}

.secao-testes h2 {
    text-align: center;
    margin-bottom: 2.5rem;
}

.testes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.5rem;
}

.teste-card {
    background: white;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.teste-card:hover {
    box-shadow: 0 8px 20px rgba(233, 30, 99, 0.15);
    transform: translateY(-5px);
}

.teste-imagem {
    font-size: 3rem;
    text-align: center;
    padding: 1.5rem 0;
    background: white;
}

.teste-info {
    padding: 1.5rem;
    text-align: center;
}

.teste-nome {
    color: var(--preto-suave);
    font-size: 1rem;
    font-weight: 600;
    margin: 0.5rem 0;
}

.teste-descricao {
    color: var(--cinza-escuro);
    font-size: 0.85rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.teste-card .btn {
    width: 100%;
    padding: 0.6rem;
    font-size: 0.9rem;
}


/* ==================== SEÇÃO BLOG ==================== */
.secao-blog {
    padding: 4rem 0;
    background: #f9f9f9;
}

.secao-blog h2 {
    text-align: center;
    margin-bottom: 3rem;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.blog-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.blog-card:hover {
    box-shadow: 0 8px 20px rgba(233, 30, 99, 0.15);
    transform: translateY(-5px);
}

.blog-imagem {
    width: 100%;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, #D4695E 0%, #C2574D 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}

.blog-conteudo {
    padding: 1.5rem;
}

.blog-data {
    color: var(--vermelho-venoso);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.blog-titulo {
    color: var(--preto-suave);
    font-size: 1.1rem;
    margin: 0.5rem 0;
    line-height: 1.4;
}

.blog-excerpt {
    color: var(--cinza-escuro);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.blog-leitura {
    color: var(--vermelho-venoso);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
}

.blog-leitura:hover {
    text-decoration: underline;
}


/* ==================== SEÇÃO DEPOIMENTOS ==================== */
.secao-depoimentos {
    padding: 4rem 0;
    background: white;
}

.secao-depoimentos h2 {
    text-align: center;
    margin-bottom: 3rem;
}

.depoimentos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.depoimento-card {
    background: #f9f9f9;
    padding: 2rem;
    border-radius: 12px;
    border-left: 4px solid var(--vermelho-venoso);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.depoimento-card:hover {
    box-shadow: 0 8px 20px rgba(233, 30, 99, 0.1);
    transform: translateY(-3px);
}

.depoimento-estrelas {
    color: var(--vermelho-venoso);
    font-size: 1.2rem;
    margin-bottom: 1rem;
    letter-spacing: 3px;
}

.depoimento-texto {
    color: var(--preto-suave);
    font-style: italic;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.depoimento-autor {
    color: var(--cinza-escuro);
    font-weight: 600;
    font-size: 0.95rem;
}

.depoimento-profissao {
    color: var(--vermelho-venoso);
    font-size: 0.85rem;
}


/* ==================== SEÇÃO CTA FINAL ==================== */
.secao-cta-final {
    padding: 4rem 0;
    background: linear-gradient(135deg, #D4695E 0%, #C2574D 100%);
    color: white;
    text-align: center;
}

.secao-cta-final h2 {
    color: white;
    margin-bottom: 1.5rem;
    font-size: 2rem;
}

.secao-cta-final p {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.1rem;
    margin-bottom: 2rem;
    line-height: 1.7;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.secao-cta-final .btn {
    background: white;
    color: #D4695E;
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.secao-cta-final .btn:hover {
    background: #f0f0f0;
}


/* ==================== ANIMAÇÕES ==================== */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reveal {
    animation: fadeInUp 0.8s ease-out;
}

.reveal-fade {
    animation: fadeInDown 0.8s ease-out;
}


/* ==================== RESPONSIVO GERAL ==================== */
@media (max-width: 1024px) {
    .secao-sobre h2,
    .secao-palestras h2,
    .para-quem-trabalho h2 {
        font-size: 1.8rem;
    }
}

@media (max-width: 768px) {
    .secao-palestras,
    .secao-blog,
    .secao-depoimentos {
        padding: 2.5rem 0;
    }
    
    .credibilidade-grid {
        grid-template-columns: 1fr;
    }
}