) 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 (com estilo próprio nesta página, como em Envios/Loja) ── */ .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); } /* ── Intro / texto principal ── */ .intro-img { width: 100%; max-width: 700px; height: auto; object-fit: contain; display: block; margin: 0 auto; margin-bottom: 1rem; margin-top: 3rem; } .intro-img img { width: 100%; height: auto; object-fit: contain; display: block; } .about-body { display: grid; grid-template-columns: 1fr 300px; gap: 4rem; align-items: start; margin: 3rem 0; } @media (max-width: 860px) { .about-body { grid-template-columns: 1fr; } } .about-text-wrap { position: relative; } .about-text { border: 3px dashed #F180B4; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(6px); padding: 0 2.25rem; border-radius: 16px; } .about-p { font-family: var(--font-display); font-size: 18px; font-weight: 300; font-style: italic; line-height: 1.85; color: black; margin-bottom: 1.75rem; } .about-p.big { font-size: 25px; color: black; font-weight: 400; margin-bottom: 1.75rem; } .about-p strong { font-weight: 700; color: var(--ink); } /* foto flutuante */ .about-float-photo { position: sticky; top: 160px; display: flex; flex-direction: column; gap: .5rem; } .photo-placeholder { border-radius: var(--radius-lg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; } .photo-placeholder img { width: 100%; height: 100%; object-fit: cover; } .photo-placeholder.tall { width: 100%; height: 380px; border-radius: var(--radius-lg); border: 1px solid var(--border); }