por um : estes estilos já dão o enquadramento, o arredondamento e a sombra corretos. */ .hero-figure img, .about-media img{ width:100%; border-radius:var(--r-lg); object-fit:cover; box-shadow:var(--shadow-md); } .hero-figure img{ aspect-ratio:4/5; } .about-media img{ aspect-ratio:3/4; max-width:400px; } .ph-portrait{ aspect-ratio:3/4; width:min(400px,100%); } .ph-tag{ font-family:var(--font-serif); font-size:1.05rem; color:var(--nude-soft); } .ph-hint{ font-size:.74rem; color:var(--text-mute); letter-spacing:.03em; line-height:1.5; } /* ===== 20. ANIMAÇÕES E ACESSIBILIDADE ================================= */ .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); } .reveal.is-in{ opacity:1; transform:none; } .no-js .reveal{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .reveal{ opacity:1; transform:none; } .faq-a{ transition:none; } } @media print{ .site-header,.sticky-cta,.hero-glow,.btn{ display:none !important; } body{ background:#fff; color:#000; } } /* ===== 21. MEDIA QUERIES ============================================== */ /* — telas muito estreitas (≤360px) — */ @media (max-width:360px){ .btn{ --btn-px:1.25rem; letter-spacing:.02em; } .header-cta{ --btn-px:.9rem; font-size:.72rem; } .btn-lg{ --btn-px:1.1rem; font-size:.82rem; } .sticky-price span{ display:none; } .flow li{ font-size:.66rem; padding:.45rem .8rem; } .price-badge{ padding:.6rem 1.2rem; font-size:.74rem; letter-spacing:.08em; } } /* — folga para a CTA fixa não cobrir o rodapé no mobile — */ @media (max-width:819px){ body{ padding-bottom:84px; } } /* — ≥600px — */ @media (min-width:600px){ .incl-grid{ grid-template-columns:repeat(2,1fr); } .incl-grid .incl:last-child:nth-child(odd){ grid-column:1/-1; } .hero-meta{ font-size:.85rem; } .footer-inner{ gap:2rem; } } /* — ≥820px (tablet/desktop) — */ @media (min-width:820px){ html{ scroll-padding-top:96px; } .br-md{ display:inline; } .header-inner{ min-height:76px; } .brand-main{ font-size:1.15rem; } .hero{ padding-block:clamp(3rem,5vw,4.5rem) clamp(4.5rem,7vw,7rem); } .hero-figure{ width:min(480px,100%); } .btn-lg{ width:auto; } .about-grid{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:center; } .about-media{ justify-items:start; } .phase-grid{ grid-template-columns:repeat(3,1fr); } .phase-grid .phase:nth-child(4), .phase-grid .phase:nth-child(5){ grid-column:span 1; } .week-grid{ grid-template-columns:repeat(2,1fr); } .incl-grid{ grid-template-columns:repeat(2,1fr); } .price-card{ padding-inline:clamp(2rem,5vw,3.5rem); } .price-list{ grid-template-columns:repeat(2,1fr); column-gap:2rem; } .footer-inner{ grid-template-columns:auto 1fr; text-align:left; justify-items:start; align-items:center; gap:1.5rem 2.5rem; } /* justify-self (e não justify-content): o item encolhe até o conteúdo dentro da coluna 1fr, então alinhar por dentro do flex não teria efeito */ .footer-links{ justify-self:end; } .footer-legal{ grid-column:1/-1; padding-top:1.5rem; border-top:1px solid var(--line); width:100%; } /* a CTA fixa só faz sentido em telas pequenas */ .sticky-cta{ display:none; } } /* — hero em duas colunas: texto à esquerda, foto à direita — */ @media (min-width:980px){ .hero{ padding-block:clamp(1.75rem,2.8vw,2.9rem) clamp(4rem,6vw,6rem); } .hero-inner{ grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); grid-template-rows:auto auto 1fr; column-gap:clamp(2.5rem,4.5vw,4.5rem); justify-items:start; text-align:left; } .hero .eyebrow { grid-column:1; grid-row:1; } .hero .logo-lockup{ grid-column:1; grid-row:2; margin:.1rem 0 1.15rem; } .hero-copy { grid-column:1; grid-row:3; justify-items:start; } .hero-figure { grid-column:2; grid-row:1 / span 3; align-self:center; margin:0; width:100%; max-width:400px; justify-self:end; } .hero .logo-rule{ margin:.7rem 0 0; } .hero .logo-main{ font-size:clamp(2.4rem,1rem + 2.6vw,3.1rem); } /* a coluna é mais estreita que a largura total: o título encolhe junto */ .hero-title{ max-width:none; font-size:clamp(1.85rem, .85rem + 2vw, 2.45rem); text-wrap:pretty; } .hero-lead{ font-size:1.02rem; margin-inline:0; margin-bottom:1.5rem; } .hero-meta{ justify-content:flex-start; } } /* — ≥1024px — */ @media (min-width:1024px){ /* nesta largura as 5 pílulas cabem numa linha só — aí as setas fazem sentido */ .flow{ gap:.6rem 1.9rem; } .flow li:not(:last-child)::after{ content:"→"; position:absolute; top:50%; left:100%; translate:0 -50%; width:1.9rem; text-align:center; color:var(--gold-4); font-size:.95rem; line-height:1; } .phase-grid{ grid-template-columns:repeat(5,1fr); } .phase{ padding:1.85rem 1.35rem; } .phase-title{ font-size:1.08rem; } .week-grid{ grid-template-columns:repeat(4,1fr); } .hero-title{ max-width:20ch; } } /* — telas largas — */ @media (min-width:1400px){ :root{ --wrap:1200px; } } /* — modo paisagem em celular (altura baixa) — */ @media (max-height:520px) and (orientation:landscape){ .site-header{ position:static; } .sticky-cta{ display:none; } .hero-figure{ width:min(300px,60%); } }