/* ==========================================================================
   Páginas de obra (Devocional Fortalecer, Experiência do Lar…): sistema comum
   - Estrutura igual à home: margem lateral 10% (20px até 991px), Montserrat, botão/link do topo da home.
   - Escala de espaçamento (--s-*), ritmo dos títulos (.of-head), grelhas alinhadas.
   - Cores por livro: os valores abaixo são os do Fortalecer; cada livro redefine-os num tema
     (ex.: .of-tema-lar em obra-lar.css). Só o conteúdo muda; header e footer são os do site.
   Todas as classes usam o prefixo "of-" (obra) para não colidir com editora.css.
   ========================================================================== */

.of-page {
    --mag: #BE4189; --mag-2: #9C2F6E; --mag-3: #7A2356;
    --rosa: #F6E3EE; --rosa-2: #EDCFE0;
    --verde: #3F6B55;
    --tinta: #2B1F27; --tinta-suave: #6B5A65;
    --fg: var(--tinta); --muted: var(--tinta-suave);
    --line: rgba(124, 35, 86, .16);
    --bg: #FFFFFF; --card: #FFFFFF;
    --soft: #FBF4F8; --accent-text: var(--mag-2);
    --ok: #2F7A4E; --err: #A8412F;
    /* Cores com função (o tema de cada livro redefine-as) */
    --hero-bg: var(--mag); --hero-fg: #fff; --hero-linha: rgba(255,255,255,.35);
    --hero-deco: rgba(255,255,255,.14); --hero-deco-2: rgba(255,255,255,.04); --hero-deco-3: rgba(255,255,255,.03);
    --btn-bg: #fff; --btn-fg: var(--mag-3); --btn-hover: #FCEFF6; --btn-sombra: rgba(60,0,35,.5);
    --link: #fff; --link-hover: #F6C9E1;
    /* Texto de apoio do topo. No rosa forte só o branco puro passa o contraste AA (4,9:1; com 85–90% cai para 3,9–4,3),
       por isso aqui a diferença entre níveis vem do tamanho e do peso, não da cor. O Lar usa o seu cinzento. */
    --hero-suave: #fff;
    /* Escala de espaçamento (usar sempre estes valores fora do topo) */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;
    --col-gap: clamp(32px, 6vw, 80px); /* entre as 2 colunas de qualquer secção */
    --sec: clamp(56px, 8vw, 96px);     /* espaço vertical de cada secção */
    /* Tipografia igual à da home: Montserrat em tudo (vem do editora.css, --font-sans) */
    --display: var(--font-sans);
    --body: var(--font-sans);

    background: var(--bg);
    color: var(--fg);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.65;
}

.of-page *, .of-page *::before, .of-page *::after { box-sizing: border-box; }
.of-page [hidden] { display: none !important; }

/* Repõe o que o editora.css define globalmente para h2/h3 */
.of-page h1, .of-page h2, .of-page h3 {
    font-family: var(--display);
    font-weight: 700;          /* como os títulos da home */
    line-height: 1.1;
    margin: 0;
    text-align: left;
    color: inherit;
    text-wrap: balance;
    text-transform: none;      /* a home não força maiúsculas nos títulos */
    letter-spacing: normal;
}
.of-page h1, .of-page h2, .of-page h3 { overflow-wrap: break-word; } /* palavras longas nunca empurram a coluna */
.of-page p { margin: 0; }
:where(.of-page) a { color: inherit; } /* :where() = especificidade 0, para não sobrepor classes do site (ex.: .link-how-it-works) */
.of-page button, .of-page input, .of-page select, .of-page textarea { font: inherit; color: inherit; }
.of-page :focus-visible { outline: 2px solid var(--mag); outline-offset: 3px; }

/* Âncoras não ficam escondidas por baixo do header fixo */
.of-page section, .of-page [id] { scroll-margin-top: 100px; }

/* Margem lateral única para todas as secções = a do topo (igual ao topo da home): 10%, e 20px até 991px */
.of-wrap { margin: 0 auto; padding-inline: 10%; }
@media (max-width: 991px) { .of-wrap { padding-inline: 20px; } }

/* Ritmo vertical comum: subtítulo pequeno → título 12px (.of-head); título → conteúdo 32px */
.of-wrap > .of-head + * { margin-top: var(--s-6) !important; }
.of-eyebrow { font-family: var(--display); font-size: .82rem; letter-spacing: .24em; text-transform: uppercase; color: var(--accent-text); font-weight: 500; }
.of-tnum { font-variant-numeric: tabular-nums lining-nums; }

/* Botões */
.of-btn {   /* mesmo aspeto do botão dos formulários (.sl-botao): letra, cantos retos e sombra */
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
    font-family: var(--font-sans); font-size: .85rem; font-weight: 700; line-height: normal; letter-spacing: 1.5px; text-transform: uppercase;
    padding: 16px 24px; border-radius: 0; border: 1px solid transparent; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    cursor: pointer; text-decoration: none;
    transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.of-page .of-btn-mag { background: var(--mag); color: #fff; }
.of-page .of-btn-mag:hover { background: var(--mag-2); }
.of-btn[disabled] { opacity: .6; cursor: wait; }

/* --------------------------------------------------------------------------
   Topo
   -------------------------------------------------------------------------- */
.of-hero { background: var(--hero-bg); color: var(--hero-fg); position: relative; overflow: hidden; }
.of-hero::after {
    content: ""; position: absolute; right: -120px; bottom: -140px; width: 520px; height: 520px;
    border-radius: 50%; border: 1px solid var(--hero-deco);
    box-shadow: 0 0 0 60px var(--hero-deco-2), 0 0 0 140px var(--hero-deco-3);
    pointer-events: none;
}
/* Grelha do topo: ocupa o primeiro ecrã inteiro, com o conteúdo centrado na vertical
   ≥901px: [texto, preço e botões | capa]
   ≤900px: uma coluna — texto, preço, capa (a capa fica depois da informação de compra)
   Header: barra de 69px com o logo pequeno (desktop); ~70px no mobile */
/* Estrutura igual ao topo da home (editora.css: .hero-content-wrapper / .hero-text-box):
   margem lateral 10%, título com margem 20px, texto 1.2rem/1.8 até 580px, 30px até à oferta */
.of-hero > .of-wrap {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr);
    grid-template-areas:
        "texto  capa"
        "compra capa";
    column-gap: var(--col-gap);
    row-gap: 0;
    align-items: center;
    align-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: 104px;    /* barra (69px) + respiro */
    padding-bottom: 40px;
}
.of-hero-texto { grid-area: texto; align-self: end; }
.of-buybox { grid-area: compra; align-self: start; }
.of-cover-wrap { grid-area: capa; }

.of-kicker { font-family: var(--display); font-size: .9rem; font-weight: 500; letter-spacing: 4px; text-transform: uppercase; color: var(--hero-suave); }
.of-hero h1 { font-size: 4rem; line-height: 1.1; margin: 20px 0 6px !important; overflow-wrap: anywhere; font-weight: 700; letter-spacing: normal; color: var(--hero-fg); }
/* Hierarquia do topo: 1 título · 2 subtítulo · 3 texto de apoio · depois a oferta/ação.
   Cada nível claramente menor do que o anterior; duas cores só (--hero-fg e --hero-suave), sem opacidades. */
.of-sub { font-style: italic; font-size: 1.5rem; line-height: 1.45; margin-bottom: 20px !important; }
.of-pitch { font-size: 1.05rem; line-height: 1.6; max-width: 580px; margin-bottom: 30px !important; color: var(--hero-suave); }

/* Oferta: preço + nota curta ao lado; depois o mesmo par botão + link da home */
.of-buybox { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.of-buybox .hero-cta-row { margin-bottom: 0; } /* na home a margem separa a linha de estatísticas, que aqui não existe */
.of-buybox .hero-cta-row { flex-wrap: wrap; row-gap: 18px; } /* coluna estreita: o link desce em vez de partir o botão */
.of-page .btn-premium-gold { white-space: nowrap; }
@media (max-width: 991px) { .of-page .btn-premium-gold { white-space: normal; } } /* botão em largura total: o texto pode partir */
.of-price { display: flex; align-items: center; gap: 16px; }
.of-price-valor { font-family: var(--display); font-size: 2.6rem; font-weight: 500; line-height: 1; }
.of-price-nota { font-size: .82rem; line-height: 1.45; color: var(--hero-suave); padding-left: 16px; border-left: 1px solid var(--hero-linha); }
/* O botão e o link usam .btn-premium-gold e .link-how-it-works do editora.css, iguais aos da home */
.of-page .link-how-it-works, .of-page .btn-premium-gold { line-height: normal; } /* a página usa 1.65 no texto corrido; na home estes ficam com 'normal' */
/* Mesma estrutura da home, com as cores rosa do livro (em vez do verde do site) */
.of-page .btn-premium-gold { background-color: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 15px 30px -10px var(--btn-sombra); }
.of-page .btn-premium-gold:hover { background-color: var(--btn-hover); border-color: var(--btn-hover); color: var(--btn-fg); }
.of-page .link-how-it-works { color: var(--link); }
.of-page .of-hero .link-how-it-works { font-size: .95rem; }   /* o link não pesa mais do que o botão */
.of-page .link-how-it-works:hover { color: var(--link-hover); }

/* A capa acompanha a altura do ecrã, para caber sempre no primeiro ecrã (proporção ≈1:1,5 + diário) */
.of-cover-wrap {
    justify-self: center; position: relative;
    width: min(330px, 100%, calc((100vh - 170px) / 1.62));
    width: min(330px, 100%, calc((100svh - 170px) / 1.62));
}
.of-cover-wrap img { max-width: none; height: auto; }
.of-c { width: 100%; display: block; border-radius: 2px; box-shadow: 0 30px 60px -20px rgba(40,0,25,.6), 0 2px 0 rgba(255,255,255,.1) inset; transform: rotate(-2deg); }
.of-d { position: absolute; width: 52%; right: -14%; bottom: -6%; border: 4px solid #fff; border-radius: 2px; box-shadow: 0 18px 40px -14px rgba(40,0,25,.6); transform: rotate(6deg); }
.of-tag { position: absolute; z-index: 2; left: -10px; top: 18px; background: #fff; color: var(--mag-3); font-family: var(--display); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; padding: 6px 10px; transform: rotate(-2deg); }

/* Ecrãs baixos (ex.: portátil 1366×768 com a barra do browser ≈ 560–650px úteis): só encurta os espaços */
@media (min-width: 561px) and (max-height: 700px) {
    .of-hero > .of-wrap { padding-top: 92px; padding-bottom: 24px; }
    .of-hero h1 { font-size: 3.6rem; margin: 12px 0 4px !important; }
    .of-sub { font-size: 1.3rem; margin-bottom: 12px !important; }
    .of-pitch { font-size: 1rem; margin-bottom: 20px !important; }
    .of-buybox { gap: 20px; }
    .of-price-valor { font-size: 2.3rem; }
}
@media (min-width: 561px) and (max-height: 560px) {
    .of-hero > .of-wrap { padding-top: 86px; padding-bottom: 16px; }
    .of-hero h1 { font-size: 3.2rem; margin: 8px 0 2px !important; }
    .of-sub { margin-bottom: 8px !important; }
    .of-pitch { margin-bottom: 14px !important; }
    .of-buybox { gap: 14px; }
}

/* Header mobile (≤1100px): barra de ~70px com o logo pequeno */
@media (max-width: 1100px) {
    .of-hero > .of-wrap { padding-top: 104px; }
    .of-cover-wrap {
        width: min(280px, 100%, calc((100vh - 180px) / 1.62));
        width: min(280px, 100%, calc((100svh - 180px) / 1.62));
    }
}
@media (min-width: 561px) and (max-width: 1100px) and (max-height: 700px) {
    .of-hero > .of-wrap { padding-top: 92px; }
}

/* ≤991px: como o topo da home — uma coluna, texto centrado, margem lateral de 20px,
   botão em largura total e o link por baixo (regras da home para .hero-cta-row/.btn-premium-gold) */
@media (max-width: 991px) {
    .of-hero > .of-wrap {
        grid-template-columns: minmax(0,1fr);
        grid-template-areas: "texto" "capa" "compra";   /* primeiro o livro, depois a ação (como se lê: o quê → ver → agir) */
        text-align: center;
    }
    .of-page .of-hero h1 { text-align: center; } /* os títulos da página estão forçados à esquerda */
    .of-hero .of-pitch { font-size: 1rem; margin-left: auto; margin-right: auto; } /* .of-hero: vence o .of-page p { margin: 0 } */
    .of-buybox { align-items: center; width: 100%; }
    .of-buybox .hero-cta-row { width: 100%; }
    .of-price { justify-content: center; text-align: left; }
    .of-cover-wrap { width: min(240px, 66%); margin: 0 0 var(--s-6); } /* em cima: os 30px do texto; em baixo 32px até à oferta */
    .of-cover-wrap:has(.of-d) { margin-bottom: calc(var(--s-6) + var(--s-5)); } /* o diário sai ~24px por baixo da capa: os 32px contam a partir dele */
    .of-hero .link-how-it-works { padding-block: 12px; margin-block: -12px; } /* área de toque de 44px, sem mudar o espaço visível */
}

/* Aviso de compra */
.of-alert { background: var(--rosa); border-bottom: 1px solid var(--line); }
.of-alert .of-wrap { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-4) var(--s-5); align-items: center; padding-block: var(--s-5); }
.of-ic { width: 46px; height: 46px; border-radius: 50%; background: var(--mag); color: #fff; display: grid; place-items: center; font-family: var(--display); font-size: 1.4rem; }
.of-alert b { font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; font-size: 1.1rem; display: block; color: var(--accent-text); }
.of-alert p { font-size: .98rem; }
.of-alert .of-wrap > div { min-width: 0; }      /* deixa o texto encolher na grelha */
.of-alert p a { overflow-wrap: anywhere; }       /* o e-mail parte em ecrãs muito estreitos */

/* Blocos */
.of-block { padding-block: var(--sec); }
.of-soft { background: var(--soft); }
.of-head { max-width: 860px; display: grid; gap: var(--s-3); } /* títulos longos em 2 linhas, não 3 */
.of-head > p { max-width: 720px; }  /* a introdução mantém uma largura boa de leitura */
.of-page h2 { font-size: clamp(2rem,4.4vw,3.2rem); }
.of-head p { color: var(--muted); }

/* Sobre o livro */
.of-about { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: var(--col-gap); align-items: start; }
.of-prose { display: grid; gap: var(--s-4); max-width: 62ch; }
.of-prose > .of-head { margin-bottom: var(--s-4); } /* + gap = 32px até ao texto */
.of-prose > .of-pull { margin-top: var(--s-4); }   /* + gap = 32px antes da citação */
.of-pull { margin: 0; font-style: italic; font-size: clamp(1.3rem,2.4vw,1.6rem); line-height: 1.45; color: var(--accent-text); border-left: 3px solid var(--mag); padding-left: var(--s-5); }
.of-pull cite { display: block; font-style: normal; font-family: var(--display); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: var(--s-3); }
.of-inside { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); align-self: center; }
.of-inside figure { margin: 0; display: grid; gap: var(--s-3); align-content: start; }
.of-inside img { width: 100%; height: auto; aspect-ratio: 480 / 680; object-fit: cover; display: block; border: 1px solid var(--line); border-radius: 2px; box-shadow: 0 14px 30px -18px rgba(60,0,35,.5); }
.of-inside figcaption { font-size: .86rem; color: var(--muted); }
.of-inside figcaption b { display: block; font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--fg); font-size: .95rem; }

/* Fases */
.of-fases-sec { background: var(--soft); }
.of-fases { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(var(--s-4), 2.4vw, var(--s-6)); }
.of-fase { display: grid; gap: var(--s-2); align-content: start; }
.of-fase .of-n { font-family: var(--display); font-size: 3.4rem; line-height: .9; color: var(--mag); font-weight: 300; }
.of-page .of-fase h3 { font-size: 1.25rem; }
.of-foco { font-style: italic; color: var(--muted); font-size: .92rem; }
.of-fase ol { list-style: none; margin: var(--s-4) 0 0; padding: 0; border-top: 1px solid var(--line); }

/* Listas com divisórias (fases, autoras, ficha, perguntas): alturas de linha em px inteiros.
   Com 1.4 / 1.65 cada linha media p. ex. 45,59px; no iPhone (3 pontos por px) o Safari arredonda cada
   divisória de forma diferente e umas pareciam mais grossas do que outras. */
/* Alinhamento entre colunas (só com as 4 colunas lado a lado, acima de 900px): cada fase ocupa as mesmas
   linhas da grelha (subgrid) — número / título / descrição / um dia por linha. A linha mais alta de cada tipo
   manda em todas as colunas, por isso as divisórias e cada dia ficam à mesma altura.
   --linhas e --dias vêm do PHP (3 linhas de cabeçalho + nº de dias da fase mais longa).
   Os elementos em subgrid (.of-fase e a lista) não têm margens nem bordas: o Safari do iPhone não as conta
   na altura das linhas e o texto do último dia ficava cortado pela divisória. A borda de cima passa para o
   primeiro dia e o espaço acima da lista para a descrição.
   Abaixo de 900px (2 colunas ou 1) não há subgrid: cada fase é um bloco normal. */
@media (min-width: 901px) {
    @supports (grid-template-rows: subgrid) {
        /* row-gap a 0 em todos os níveis: num subgrid o gap do contentor continua a contar entre
           cada linha (mesmo com um gap menor no filho), por isso os espaços são feitos com margens */
        .of-fases { row-gap: 0; }
        .of-fase { grid-row: span var(--linhas); grid-template-rows: subgrid; row-gap: 0; }
        .of-fase .of-n { align-self: end; }
        .of-fase h3, .of-fase .of-foco { align-self: start; margin-top: var(--s-2); }
        .of-fase .of-foco { margin-bottom: var(--s-4); }
        .of-fase ol { grid-row: span var(--dias); display: grid; grid-template-rows: subgrid; row-gap: 0; margin: 0; border-top: 0; }
        .of-fase li:first-child { border-top: 1px solid var(--line); }
    }
}
/* Entre blocos de fases quando quebram (2 colunas ≤900px, 1 coluna ≤560px) */
@media (max-width: 900px) {
    .of-fases { row-gap: var(--s-7); }
}
.of-fase li { display: grid; grid-template-columns: 3.4em 1fr; gap: var(--s-1); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); font-size: .92rem; line-height: 21px; }
.of-fase li span { font-family: var(--display); color: var(--accent-text); letter-spacing: .06em; font-size: .82rem; line-height: 19px; padding-top: 2px; }

/* Origem */
.of-mov { background: var(--mag-3); color: #fff; }
.of-mov .of-wrap { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: var(--col-gap); align-items: center; }
.of-page .of-mov h2 { font-size: clamp(2.2rem,5vw,3.6rem); margin-top: var(--s-3); }
.of-mov .of-eyebrow { color: #F6C9E1; }
.of-txt { display: grid; gap: var(--s-4); color: rgba(255,255,255,.9); }
.of-sig { font-family: var(--display); letter-spacing: .2em; text-transform: uppercase; color: #F6C9E1; }

/* Autoras */
/* Grelha preenchida coluna a coluna (1–8, 9–16, 17–22): as 3 colunas partilham as linhas,
   por isso um nome que quebra torna a linha mais alta nas 3 colunas e os separadores mantêm-se alinhados.
   --linhas-3 / --linhas-2 vêm do PHP (nº de autoras ÷ colunas, arredondado para cima). */
.of-authors {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(var(--linhas-3), auto);
    column-gap: var(--s-6);
    list-style: none; padding: 0; margin: 0;
}
@media (max-width: 768px) {
    .of-authors { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--linhas-2), auto); }
}
@media (max-width: 560px) {
    .of-authors { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
}
.of-authors li { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); display: flex; gap: var(--s-3); align-items: flex-start; line-height: 28px; }
.of-authors li span { font-family: var(--display); font-size: .78rem; line-height: 28px; color: var(--accent-text); min-width: 1.8em; } /* mesma linha de 28px do nome: ficam alinhados sem o meio píxel do alinhamento pela base */

/* Como comprar */
.of-buy { display: grid; grid-template-columns: minmax(0, 1fr) var(--sl-coluna); gap: var(--col-gap); align-items: start; } /* coluna do formulário: regra comum (--sl-coluna) */
.of-buy h2 { margin-top: var(--s-3) !important; }
.of-steps { list-style: none; padding: 0; margin: var(--s-6) 0 0; display: grid; gap: var(--s-5); counter-reset: s; }
.of-steps li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: var(--s-4); align-items: start; }
.of-steps li::before { content: counter(s); width: 44px; height: 44px; border: 1px solid var(--mag); border-radius: 50%; display: grid; place-items: center; font-family: var(--display); color: var(--accent-text); font-size: 1.1rem; }
.of-steps b { font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; display: block; }
.of-steps p { color: var(--muted); font-size: .95rem; }
.of-contacts { margin: var(--s-6) 0 0; display: grid; gap: var(--s-3); border-top: 1px solid var(--line); padding-top: var(--s-5); }
.of-contacts div { display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; font-size: .95rem; }
.of-contacts dt { font-family: var(--display); letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; color: var(--muted); }
.of-contacts dd { margin: 0; overflow-wrap: anywhere; } /* o e-mail parte em ecrãs muito estreitos */

/* Formulário */
/* Formulários: aspeto = componente .sl-form (editora.css). Aqui só a grelha e as cores de cada livro. */
.of-form { display: grid; gap: 20px; }
/* Fortalecer (cores por omissão desta folha): caixa rosa = detalhe de identidade */
.of-page .sl-form { --sl-fundo: var(--rosa); --sl-escuro: var(--tinta); --sl-acento: var(--mag); --sl-suave: var(--tinta-suave); --sl-btn: var(--mag); --sl-btn-hover: var(--mag-2); }
/* Linhas do formulário: componente .sl-linha (editora.css) */
.of-form label { display: grid; gap: var(--s-2); }
#of-codigo { text-transform: uppercase; }
#of-codigo::placeholder { text-transform: none; }
.of-estimate { background: #fff; border-radius: 0; padding: var(--s-4); display: grid; gap: var(--s-2); font-size: .95rem; }
.of-estimate div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--s-3); }
/* rótulo e valor nunca partem por dentro; se não cabem lado a lado, o valor desce inteiro e fica à direita */
.of-estimate div > span { white-space: nowrap; }
.of-estimate div > span:last-child { margin-left: auto; text-align: right; }
.of-tot { font-family: var(--display); font-size: 1.3rem; border-top: 1px solid var(--line); padding-top: var(--s-2); margin-top: var(--s-1); }
.of-estimate small { color: var(--muted); font-size: .8rem; }
.of-cmsg { font-size: .85rem; margin-top: -8px !important; }
.of-cmsg:empty { display: none; }   /* sem mensagem, não ocupa espaço: entre blocos ficam sempre 20px */
.of-cmsg.ok, .of-ok-text { color: var(--ok); }
.of-cmsg.err { color: var(--err); }
.of-form .of-check { grid-template-columns: auto 1fr; align-items: start; font-weight: 400; gap: var(--s-3); }
.of-check input { margin-top: 2px; }
.of-err { min-height: 1.2em; }
/* Vazia não ocupa espaço nem o gap da grelha do formulário; quando o JS escreve o erro, volta a aparecer
   e o role="alert" anuncia-o */
.of-form .of-err:empty { display: none; }
.of-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.of-ok-box { display: grid; gap: var(--s-3); }  /* caixa = .sl-form */
.of-ok-box p { color: var(--muted); }
.of-ok-box:focus { outline: none; }

/* Ficha técnica */
.of-ficha { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-7); margin: 0; } /* ocupa a área de conteúdo toda: mesmas margens das outras secções */
.of-ficha div { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); font-size: .95rem; line-height: 24px; }
.of-ficha dt { font-family: var(--display); letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; line-height: 18px; color: var(--muted); padding-top: 3px; }
.of-ficha dd { margin: 0; text-align: right; }

/* Perguntas frequentes */
.of-faq-sec { padding-top: 0; }
/* .of-faq ocupa a área de conteúdo toda (mesmas margens das outras secções); as respostas mantêm 65ch para leitura */
.of-faq details { border-bottom: 1px solid var(--line); padding: var(--s-4) 0; }
.of-faq summary { cursor: pointer; font-family: var(--display); font-size: 1.2rem; line-height: 30px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: var(--s-4); } /* como .accordion-title da home */
.of-faq summary::-webkit-details-marker { display: none; }
.of-faq summary::after { content: "+"; color: var(--mag); font-size: 1.4rem; line-height: 22px; }
.of-faq details[open] summary::after { content: "–"; }
.of-nq { white-space: nowrap; } /* não parte por dentro: palavras com hífen (e-mails) e grupos curtos ("em português europeu,") */
.of-faq details p { margin-top: var(--s-3); color: var(--muted); max-width: 65ch; line-height: 28px; }

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .of-about, .of-mov .of-wrap, .of-buy { grid-template-columns: minmax(0, 1fr); } /* minmax: a coluna pode encolher abaixo do conteúdo (ex.: e-mail) */
    .of-fases { grid-template-columns: 1fr 1fr; }
    .of-alert .of-wrap { grid-template-columns: auto 1fr; }
    .of-alert .of-btn { grid-column: 1 / -1; justify-self: stretch; }   /* largura total, como os outros botões em mobile */
}
@media (max-width: 560px) {
    .of-fases, .of-ficha { grid-template-columns: 1fr; }
    /* Aviso: o ícone acompanha o título (em cima), mais pequeno, para o texto ganhar largura */
    .of-alert .of-wrap { align-items: start; column-gap: var(--s-3); }
    .of-ic { width: 32px; height: 32px; font-size: 1.05rem; }
    .of-alert b { font-size: 1rem; line-height: 32px; }
    .of-authors li { padding: var(--s-2) 0; }   /* 22 nomes numa coluna: linhas mais compactas */
    .of-hero h1 { font-size: 3rem; }
    .of-sub { font-size: 1.2rem; }
    .of-buybox { gap: 24px; }
    .of-price-valor { font-size: 2.2rem; }
    .of-inside { gap: var(--s-3); }   /* devocional e diário lado a lado: comparam-se e a página em branco não ocupa um ecrã */
    .of-inside figcaption { font-size: .8rem; }
    .of-inside figcaption b { font-size: .82rem; }
}
/* Telemóveis baixos (ex.: iPhone SE, ≈550px úteis) */
@media (max-width: 560px) and (max-height: 640px) {
    .of-hero > .of-wrap { padding-top: 92px; }
    .of-hero h1 { font-size: 2.6rem; margin: 10px 0 2px !important; }
    .of-sub { font-size: 1.05rem; margin-bottom: 10px !important; }
    .of-pitch { font-size: .95rem; line-height: 1.5; margin-bottom: 16px !important; }
    .of-buybox { gap: 16px; }
    .of-price-valor { font-size: 2rem; }
}
/* Telemóveis muito estreitos: títulos de secção mais pequenos (palavras longas como "antecipadamente") */
@media (max-width: 400px) {
    .of-page h2 { font-size: 1.75rem; }
}
/* Telemóveis: a linha pequena do topo com menos espaçamento, para caber numa linha */
@media (max-width: 560px) {
    .of-kicker { letter-spacing: 2px; font-size: .8rem; }
}
@media (max-width: 360px) {
    .of-kicker { letter-spacing: 1px; }
}
@media (prefers-reduced-motion: reduce) {
    .of-page * { transition: none !important; }
}