/* ============================================
   UMA CONVERSA CONTIGO (GUIA GRATUITO) — PÁGINA DO FORMULÁRIO
   Ficheiro próprio, e não uma secção do styles.css, porque o styles.css
   fica um mês em cache: quem já visitou o site veria esta página sem estilos.
   ============================================ */

/* As imagens trazem width/height no HTML (reservam o espaço enquanto carregam) */
.guia-hero .hero-image img,
.guia-pages img,
.guia-author img {
    height: auto;
}

/* Hero: reutiliza .hero, .hero-container e .hero-content da homepage */
.guia-hero {
    min-height: auto;
    padding-bottom: var(--spacing-lg);
}

.guia-hero .hero-content h1 {
    margin-bottom: var(--spacing-xs);
}

.guia-hero .guia-tagline {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.4rem;
    color: var(--primary-hover);
}

.guia-hero .hero-image img {
    width: min(100%, 360px);
    margin: 0 auto;
    border-radius: 0;
    box-shadow: 0 24px 60px rgba(110, 80, 69, 0.28);
}

.guia-meta {
    display: block;
    margin-top: 0.9rem;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    color: var(--text-light);
}

/* Secções */
.guia-section {
    padding: var(--spacing-xl) 0;
}

.guia-section--white {
    background-color: var(--white);
}

.guia-section--sand {
    background-color: var(--bg-secondary);
}

.guia-narrow {
    max-width: 720px;
    margin: 0 auto;
}

/* Excerto */
.guia-excerpt p {
    margin-bottom: var(--spacing-sm);
    font-size: 1.1rem;
    line-height: 1.75;
}

.guia-excerpt p:first-child {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.5rem;
    line-height: 1.4;
    color: var(--primary-color);
}

.guia-excerpt cite {
    display: block;
    margin-top: var(--spacing-md);
    font-style: normal;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-light);
}

/* As três partes */
.guia-partes {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--spacing-lg);
    max-width: 1080px;
    margin: 0 auto;
}

.guia-partes li {
    padding: 1.6rem 0;
    border-top: 1px solid var(--accent-color);
}

.guia-partes .guia-parte {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-light);
}

.guia-partes h3 {
    margin: 0.3rem 0 0.8rem 0;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--primary-hover);
}

.guia-partes q {
    display: block;
    quotes: none;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--primary-color);
}

.guia-partes p {
    margin-top: 0.9rem;
    font-size: 0.95rem;
    color: var(--text-light);
}

/* Exercícios */
.guia-pages {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    max-width: 980px;
    margin: 0 auto;
}

.guia-pages img {
    width: 100%;
    box-shadow: 0 10px 30px rgba(110, 80, 69, 0.18);
}

.guia-pages figcaption {
    margin-top: 1rem;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.05rem;
    text-align: center;
    color: var(--primary-hover);
}

/* Formulário */
.guia-form-band {
    /* a navegação é fixa: sem isto o link "#receber" pára com o título tapado */
    scroll-margin-top: 80px;
    position: relative;
    overflow: hidden;
    padding: var(--spacing-xl) 0;
    background-color: var(--primary-color);
    text-align: center;
}

.guia-form-band .container {
    position: relative;
    z-index: 1;
}

.guia-form-band h2 {
    max-width: 760px;
    margin: 0 auto var(--spacing-lg) auto;
    font-size: 2.2rem;
    font-weight: 200;
    line-height: 1.3;
    color: var(--white);
}

.guia-card {
    max-width: 520px;
    margin: 0 auto;
    padding: 3rem 2.5rem;
    border-radius: 20px;
    background-color: var(--bg-color);
}

.guia-card .guia-label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-light);
}

.guia-card h3 {
    margin: 0.4rem 0 1.2rem 0;
    font-size: 1.8rem;
}

/* O formulário do MailerLite traz fundo e margens próprios: aqui fica sobre o cartão */
.guia-form .ml-form-embedContainer .ml-form-embedWrapper {
    background-color: transparent !important;
}

.guia-form .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody,
.guia-form .ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody {
    padding: 0 !important;
}

.guia-card .guia-note {
    margin-top: 1.2rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-light);
}

.guia-card .guia-note a {
    text-decoration: underline;
}

/* Quem escreve */
.guia-author {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--spacing-lg);
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
}

.guia-author img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 400px 400px 0 0;
}

.guia-author h2 {
    font-size: 2.2rem;
    margin-bottom: var(--spacing-sm);
}

.guia-author p {
    margin-bottom: var(--spacing-sm);
    color: var(--text-light);
}

.guia-author .guia-signature {
    margin-bottom: 0;
    font-size: 0.9rem;
    color: var(--text-main);
}

.guia-author .guia-signature strong {
    display: block;
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary-hover);
}

.guia-author .guia-signature a {
    text-decoration: underline;
}

/* Perguntas */
.guia-faq details {
    border-top: 1px solid var(--accent-color);
}

.guia-faq details:last-of-type {
    border-bottom: 1px solid var(--accent-color);
}

.guia-faq summary {
    padding: 1.2rem 0;
    font-size: 1.1rem;
    color: var(--primary-hover);
    cursor: pointer;
}

.guia-faq details p {
    padding-bottom: 1.2rem;
    color: var(--text-light);
}

.guia-disclaimer {
    margin-top: var(--spacing-md);
    font-size: 0.85rem;
    color: var(--text-light);
    text-align: center;
}

/* Instagram: reutiliza a secção da homepage; fundo areia para se separar das perguntas */
.guia-page .instagram-section {
    background-color: var(--bg-secondary);
}

.guia-page footer {
    margin-top: 0;
}

@media (max-width: 768px) {
    .guia-hero .guia-tagline {
        margin-left: auto;
        margin-right: auto;
    }

    /* quem chega pelo QR code vem do telemóvel: o botão tem de caber no primeiro
       ecrã, por isso a capa passa para depois do texto e fica mais pequena */
    .guia-hero .hero-image {
        order: 2;
    }

    .guia-hero .hero-image img {
        width: min(62%, 230px);
    }

    .guia-page .section-title {
        font-size: 2rem;
    }

    .guia-partes,
    .guia-author {
        grid-template-columns: 1fr;
    }

    /* no telemóvel mostra-se só o primeiro exercício por inteiro e os outros lado a lado */
    .guia-pages {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .guia-pages figure:first-child {
        grid-column: 1 / -1;
        max-width: 70%;
        margin: 0 auto;
    }

    .guia-pages figcaption {
        font-size: 0.95rem;
    }

    .guia-author {
        text-align: center;
    }

    .guia-author img {
        width: 60%;
        margin: 0 auto;
    }

    .guia-form-band h2 {
        font-size: 1.6rem;
    }

    /* em ecrãs estreitos os arcos passariam por cima da frase */
    .guia-form-band .graphic-arc {
        display: none;
    }

    .guia-card {
        padding: 2.2rem 1.5rem;
    }
}