) para não afetar o , que o WordPress também marca com a classe "page". */ main.page { position: relative; z-index: 1; max-width: 1300px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3.5rem); } /* ── Hero (nesta página o container tem estilo próprio, ao contrário da homepage onde fica sem CSS) ── */ .hero { position: relative; z-index: 1; padding: clamp(2.5rem, 7vw, 5.5rem) clamp(1.25rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3rem); margin-bottom: 0; border-bottom: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; height: 100%; } .hero-eyebrow { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; } .hero-eyebrow-line { width: 36px; height: 1px; background: var(--ink-soft); } .hero-eyebrow span { font-family: var(--font-body); font-size: 10.5px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); } /* ── Info grid ── */ .info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 5rem; margin-top: 5rem; } @media (max-width: 980px) { .info-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .info-grid { grid-template-columns: 1fr; } } .info-card { background: #fff; border: 5px dashed var(--border); border-radius: var(--radius-lg); padding: 1.75rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: 1rem; opacity: 0; transform: translateY(20px); animation: fadeUp .5s cubic-bezier(.22,1,.36,1) forwards; transition: transform .3s ease, box-shadow .3s ease; } .info-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(80,50,30,.08); } .info-card:nth-child(1) { animation-delay: .06s; } .info-card:nth-child(2) { animation-delay: .12s; } .info-card:nth-child(3) { animation-delay: .18s; } .info-card:nth-child(4) { animation-delay: .24s; } .info-icon { width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .info-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; color: black; } .info-body { font-family: var(--font-display); font-size: 18px; font-weight: 300; color: black; line-height: 1.7; font-style: italic; } .info-body strong { font-weight: 1000; color: black; } /* ── Eyebrow de secção ── */ .section-eyebrow { display: flex; align-items: center; gap: .75rem; margin-bottom: 2rem; } .eyebrow-line { width: 36px; height: 1px; background: var(--ink-soft); flex-shrink: 0; } .section-eyebrow span { font-family: var(--font-body); font-size: 10.5px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: black; } /* ── Processo ── */ .processo-section { margin-bottom: 5rem; background: #ffffff; border: 3px dashed #f180b4; border-radius: var(--radius-lg); padding: 2rem 2rem; } .processo-steps { display: flex; align-items: flex-start; gap: 0; flex-wrap: wrap; } .passo { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: .75rem; background: #fff; border: 5px dashed var(--border); border-radius: var(--radius-lg); padding: 1.5rem 1.25rem; opacity: 0; transform: translateY(16px); animation: fadeUp .5s cubic-bezier(.22,1,.36,1) forwards; } .passo:nth-child(1) { animation-delay: .06s; } .passo:nth-child(3) { animation-delay: .14s; } .passo:nth-child(5) { animation-delay: .22s; } .passo:nth-child(7) { animation-delay: .30s; } .passo-num { font-family: 'Caracolina', serif; font-size: 2.5rem; color: var(--c-rose); opacity: 1; line-height: 1; } .passo-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; color: black; } .passo-desc { font-family: var(--font-display); font-size: 18px; font-weight: 300; font-style: italic; color: black; line-height: 1.65; } .passo-seta { display: flex; align-items: center; justify-content: center; padding: 0 .75rem; font-size: 1.4rem; color: var(--border-mid); align-self: center; flex-shrink: 0; } @media (max-width: 700px) { .processo-steps { flex-direction: column; } .passo-seta { transform: rotate(90deg); padding: .5rem 0; } } /* ── FAQ ── */ .faq-section { margin-bottom: 5rem; background: #ffffff; border: 3px dashed #f180b4; border-radius: var(--radius-lg); padding: 2rem 2rem; } .faq-lista { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .faq-item { border-bottom: 1px solid var(--border); background: #fff; } .faq-item:last-child { border-bottom: none; } .faq-pergunta { font-family: caracolina; font-size: 18px; font-weight: 400; color: black; padding: 1.25rem 1.5rem; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; transition: background .2s; } .faq-pergunta::-webkit-details-marker { display: none; } .faq-pergunta::after { content: '+'; font-family: var(--font-display); font-size: 20px; color: black; flex-shrink: 0; transition: transform .3s ease; } .faq-item[open] .faq-pergunta { background: #fff; } .faq-item[open] .faq-pergunta::after { transform: rotate(45deg); } .faq-resposta { font-family: var(--font-display); font-size: 18px; font-weight: 300; font-style: italic; color: black; line-height: 1.75; padding: 0 1.5rem 1.25rem; background: #fff; }