/* ========================================================================= Laís Freire · Nutricionista — folha de estilo principal Paleta extraída do logo e do cartão de visitas originais. ========================================================================= */ :root{ /* cores da marca */ /* Contraste conferido pela WCAG 2.1 AA sobre os dois fundos do site (creme #FBF5ED e creme-2 #F3EADD). Os tons escurecidos abaixo mantêm a paleta da marca e passam de 4.5:1 em texto corrido. */ --verde: #47512F; --verde-escuro: #333B22; --verde-medio: #5F6848; /* era #6B7551 — reprovava sobre o bege (4.11) */ --verde-suave: #8A9472; /* era #A8B192 — placeholders ilegíveis (1.88) */ --verde-claro: #DEECDB; --creme: #FBF5ED; --creme-2: #F3EADD; --laranja: #FAA948; /* só decorativo: pontos, marcadores, ícones */ /* laranja de TEXTO: passa 4.5:1 nos três fundos onde aparece — creme (5.13), bege dos cards (4.66) e chip laranja translúcido (4.51) */ --laranja-forte:#945B25; --laranja-chip: #945B25; --placeholder: #666C59; /* dica dos campos: passa AA sem parecer valor digitado */ --dourado: #C9A227; --tinta: #2C3220; --texto: #4E5641; --linha: rgba(71, 81, 47, .14); /* tipografia */ --display: "Cormorant Garamond", "Times New Roman", serif; --sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* espaçamento e forma */ --wrap: 1200px; --pad: clamp(20px, 5vw, 48px); --sec: clamp(72px, 11vw, 148px); --r-sm: 12px; --r: 20px; --r-lg: 32px; --r-xl: 44px; --shadow: 0 24px 60px -32px rgba(44, 50, 32, .38); --shadow-sm: 0 10px 30px -18px rgba(44, 50, 32, .45); --ease: cubic-bezier(.22,.61,.36,1); } /* ---------------------------------------------------------------- reset -- */ *,*::before,*::after{ box-sizing:border-box; } /* overflow-x no é o que realmente impede o viewport de esticar no celular. Só no não basta: sem isso, um elemento decorativo que passa da borda alarga o documento e o navegador dá zoom out para caber. O "hidden" é o fallback; onde houver suporte, "clip" vence e não cria contexto de rolagem. */ html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; overflow-x:clip; } body{ margin:0; background:var(--creme); color:var(--texto); font-family:var(--sans); font-size:clamp(16px,1.02vw,17.5px); font-weight:400; line-height:1.7; overflow-x:hidden; overflow-x:clip; -webkit-font-smoothing:antialiased; } img{ max-width:100%; height:auto; display:block; } a{ color:inherit; } button,input,select,textarea{ font:inherit; color:inherit; } button{ cursor:pointer; } h1,h2,h3{ margin:0; color:var(--verde); font-weight:400; } p{ margin:0 0 1em; } ul,ol{ margin:0; padding:0; list-style:none; } /* o atributo hidden precisa vencer os display: das classes abaixo */ [hidden]{ display:none !important; } ::selection{ background:var(--verde); color:var(--creme); } :focus-visible{ outline:2px solid var(--laranja-forte); outline-offset:3px; border-radius:4px; } .skip{ position:absolute; left:-9999px; top:8px; z-index:999; background:var(--verde); color:var(--creme); padding:12px 20px; border-radius:999px; } .skip:focus{ left:16px; } /* ------------------------------------------------------------- layout --- */ .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); } .wrap--narrow{ max-width:880px; } /* segura sangramentos decorativos (ex.: a folha girada do "Sobre") dentro da seção, sem virar caixa de rolagem */ .section{ padding-block:var(--sec); position:relative; overflow-x:clip; } .section--alt{ background:var(--creme-2); } .section__head{ max-width:660px; margin-bottom:clamp(40px,5vw,72px); } .section__head--center{ margin-inline:auto; text-align:center; } .section__head h2,.sobre h2,.cta h2{ font-family:var(--display); font-size:clamp(2.3rem,5.4vw,4rem); line-height:1.04; letter-spacing:-.015em; margin-bottom:.4em; } .section__lead{ font-size:1.06em; color:var(--verde-medio); max-width:56ch; } .section__head--center .section__lead{ margin-inline:auto; } .eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:.735rem; font-weight:500; letter-spacing:.19em; text-transform:uppercase; color:var(--verde-medio); margin:0 0 1.15em; } .eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--laranja); flex:none; } .eyebrow--light{ color:rgba(251,245,237,.72); } /* --------------------------------------------------------------- botões -- */ .btn{ --bg:var(--verde); --fg:var(--creme); --bd:var(--verde); position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 28px; border:1px solid var(--bd); border-radius:999px; background:var(--bg); color:var(--fg); font-size:.95rem; font-weight:500; letter-spacing:.01em; text-decoration:none; transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); overflow:hidden; isolation:isolate; } .btn::after{ content:""; position:absolute; inset:0; z-index:-1; background:var(--verde-escuro); transform:translateY(101%); transition:transform .4s var(--ease); } .btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); } .btn:hover::after{ transform:translateY(0); } .btn--lg{ padding:18px 34px; font-size:1rem; } .btn--sm{ padding:11px 20px; font-size:.87rem; } .btn--tiny{ padding:8px 16px; font-size:.82rem; } .btn--ghost{ --bg:transparent; --fg:var(--verde); --bd:var(--linha); } .btn--ghost::after{ background:var(--verde); } .btn--ghost:hover{ color:var(--creme); border-color:var(--verde); } .btn--outline{ --bg:transparent; --fg:var(--verde); --bd:var(--verde); } .btn--cream{ --bg:var(--creme); --fg:var(--verde); --bd:var(--creme); } .btn--cream::after{ background:var(--laranja); } .btn--cream:hover{ color:var(--verde-escuro); border-color:var(--laranja); } .btn--lineLight{ --bg:transparent; --fg:var(--creme); --bd:rgba(251,245,237,.4); } .btn--lineLight::after{ background:rgba(251,245,237,.14); } .btn--quiet{ --bg:transparent; --fg:var(--verde-medio); --bd:transparent; } .btn--quiet::after{ display:none; } .btn--quiet:hover{ color:var(--verde); box-shadow:none; } .btn__hint{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; padding:3px 9px; border-radius:999px; background:rgba(250,169,72,.22); color:var(--laranja-chip); } .btn--ghost:hover .btn__hint{ background:rgba(251,245,237,.2); color:var(--creme); } .ico{ width:19px; height:19px; fill:currentColor; flex:none; } .link-arrow{ display:inline-flex; align-items:center; gap:9px; font-weight:500; text-decoration:none; color:var(--verde); border-bottom:1px solid var(--linha); padding-bottom:4px; transition:gap .3s var(--ease), border-color .3s var(--ease); } .link-arrow::after{ content:"→"; transition:transform .3s var(--ease); } .link-arrow:hover{ gap:14px; border-color:var(--verde); } /* -------------------------------------------------------- barra topo ---- */ .progress{ position:fixed; inset:0 0 auto 0; height:3px; z-index:120; pointer-events:none; } .progress span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--verde),var(--dourado),var(--laranja)); transition:width .1s linear; } /* ------------------------------------------------------------ cabeçalho -- */ .header{ position:fixed; inset:0 0 auto 0; z-index:100; padding-block:14px; transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); border-bottom:1px solid transparent; } .header.is-stuck{ background:rgba(251,245,237,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom-color:var(--linha); padding-block:8px; } .header__in{ display:flex; align-items:center; gap:24px; } .header__logo{ display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto; } .header__logo img{ width:auto; height:38px; transition:height .4s var(--ease); } .header.is-stuck .header__logo img{ height:32px; } .header__logo span{ display:flex; flex-direction:column; line-height:1.15; } .header__logo strong{ font-family:var(--display); font-size:1.32rem; font-weight:600; letter-spacing:.06em; color:var(--verde); text-transform:uppercase; } .header__logo em{ font-style:normal; font-size:.62rem; letter-spacing:.17em; text-transform:uppercase; color:var(--verde-medio); } .nav{ display:flex; align-items:center; gap:clamp(14px,1.9vw,30px); } .nav a{ position:relative; text-decoration:none; font-size:.92rem; color:var(--verde); padding-block:6px; white-space:nowrap; } .nav a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--verde); transition:width .32s var(--ease); } .nav a:hover::after,.nav a.is-active::after{ width:100%; } .burger{ display:none; width:44px; height:44px; border:1px solid var(--linha); border-radius:50%; background:transparent; padding:0; position:relative; } .burger span{ position:absolute; left:13px; width:18px; height:1.5px; background:var(--verde); border-radius:2px; transition:transform .35s var(--ease), opacity .2s; } .burger span:nth-child(1){ top:16px; } .burger span:nth-child(2){ top:21px; } .burger span:nth-child(3){ top:26px; } .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; } .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); } /* ---------------------------------------------------------------- hero -- */ .hero{ position:relative; padding-block:clamp(130px,17vw,190px) clamp(60px,9vw,110px); overflow:hidden; } .hero__bg{ position:absolute; inset:0; pointer-events:none; } .hero__bg .blob{ position:absolute; top:-6%; right:-14%; width:min(58vw,760px); height:min(120vh,1020px); fill:var(--verde-claro); opacity:.55; animation:float 16s ease-in-out infinite; } .hero__bg .blob-line{ position:absolute; top:-6%; right:-8%; width:min(58vw,760px); height:min(120vh,1020px); fill:none; stroke:var(--laranja); stroke-width:2.4; opacity:.5; animation:float 16s ease-in-out infinite reverse; } .hero__leaf{ position:absolute; right:1%; top:10%; width:clamp(190px,24vw,340px); opacity:.32; transform:rotate(8deg); animation:sway 11s ease-in-out infinite; } @keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-26px) } } @keyframes sway{ 0%,100%{ transform:rotate(8deg) translateY(0) } 50%{ transform:rotate(3deg) translateY(-18px) } } .hero__in{ position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,5vw,64px); align-items:center; } .hero h1{ font-family:var(--display); font-size:clamp(3.1rem,8.4vw,6.6rem); line-height:.94; letter-spacing:-.028em; margin-bottom:.34em; } .hero h1 em{ font-style:italic; font-weight:300; color:var(--verde-medio); position:relative; } .hero h1 em::after{ content:""; position:absolute; left:0; right:14%; bottom:-.02em; height:3px; border-radius:2px; background:linear-gradient(90deg,var(--dourado),var(--laranja)); transform:scaleX(0); transform-origin:left; animation:underline 1.1s .55s var(--ease) forwards; } @keyframes underline{ to{ transform:scaleX(1) } } .lead{ font-size:clamp(1.02rem,1.35vw,1.16rem); max-width:52ch; color:var(--texto); } .hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin:34px 0 44px; } .hero__trust{ display:flex; flex-wrap:wrap; gap:clamp(18px,3vw,42px); border-top:1px solid var(--linha); padding-top:24px; } .hero__trust li{ display:flex; flex-direction:column; } .hero__trust strong{ font-family:var(--display); font-size:1.5rem; color:var(--verde); line-height:1.1; } .hero__trust span{ font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; color:var(--verde-medio); } .hero__art{ position:relative; min-height:420px; } .card-float{ position:absolute; background:var(--creme); border:1px solid var(--linha); border-radius:var(--r-lg); padding:20px 24px; box-shadow:var(--shadow); backdrop-filter:blur(6px); } .card-float p{ margin:0; font-size:.86rem; line-height:1.35; color:var(--verde-medio); } .card-float strong{ display:block; margin-bottom:3px; font-family:var(--display); font-size:1.42rem; font-weight:600; line-height:1.1; color:var(--verde); } .card-float--a{ top:2%; left:0; width:min(78%,258px); display:flex; align-items:center; gap:15px; animation:bob 7s ease-in-out infinite; } .card-float--a img{ width:30px; flex:none; opacity:.8; } .card-float--b{ top:44%; right:2%; width:min(58%,208px); display:flex; align-items:center; gap:13px; background:var(--verde); border-color:var(--verde); animation:bob 7s .8s ease-in-out infinite; } .card-float--b p{ color:var(--creme); } .card-float--c{ bottom:2%; left:8%; width:min(62%,220px); display:flex; align-items:center; gap:13px; animation:bob 7s 1.6s ease-in-out infinite; } .tick{ flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:.85rem; background:rgba(250,169,72,.2); color:var(--laranja-chip); } .card-float--b .tick{ background:rgba(251,245,237,.16); color:var(--laranja); } @keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } } /* ------------------------------------------------------------- marquee -- */ .marquee{ background:var(--verde); color:var(--creme); overflow:hidden; padding-block:16px; border-block:1px solid var(--verde-escuro); } .marquee__track{ display:flex; align-items:center; gap:28px; width:max-content; animation:slide 34s linear infinite; } .marquee span{ font-family:var(--display); font-size:1.5rem; letter-spacing:.02em; white-space:nowrap; } .marquee i{ color:#FEAC49; font-style:normal; font-size:.8rem; } @keyframes slide{ to{ transform:translateX(-50%) } } /* -------------------------------------------------------------- grades -- */ .grid{ display:grid; gap:clamp(16px,2vw,26px); } .grid--4{ grid-template-columns:repeat(4,1fr); } .grid--2{ grid-template-columns:repeat(2,1fr); } .pcard{ background:var(--creme-2); border:1px solid var(--linha); border-radius:var(--r-lg); padding:clamp(26px,2.6vw,36px); transition:transform .45s var(--ease), background .45s var(--ease), border-color .45s var(--ease); } .section--alt .pcard{ background:var(--creme); } .pcard:hover{ transform:translateY(-6px); border-color:var(--verde-suave); } .pcard__num{ font-family:var(--display); font-size:1.05rem; letter-spacing:.14em; color:var(--laranja-forte); display:block; margin-bottom:18px; } .pcard h3{ font-family:var(--display); font-size:1.6rem; line-height:1.15; margin-bottom:.5em; } .pcard p{ font-size:.95rem; margin:0; } /* --------------------------------------------------------------- áreas -- */ .grid--areas{ gap:clamp(18px,2.4vw,32px); } .acard{ background:var(--creme); border:1px solid var(--linha); border-radius:var(--r-xl); padding:clamp(28px,3.2vw,46px); display:flex; flex-direction:column; position:relative; overflow:hidden; transition:transform .45s var(--ease), box-shadow .45s var(--ease); } .acard::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--verde),var(--dourado),var(--laranja)); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); } .acard:hover{ transform:translateY(-6px); box-shadow:var(--shadow); } .acard:hover::before{ transform:scaleX(1); } .acard__top{ display:flex; align-items:center; gap:18px; margin-bottom:22px; } .acard__ico{ width:52px; height:52px; flex:none; color:var(--verde); opacity:.8; } .acard h3{ font-family:var(--display); font-size:clamp(1.6rem,2.5vw,2.05rem); line-height:1.08; } .acard__lead{ color:var(--verde-medio); font-size:1.02rem; } .checks,.crosses{ display:grid; gap:12px; margin:0 0 30px; } .checks li,.crosses li{ position:relative; padding-left:30px; font-size:.95rem; } .checks li::before{ content:""; position:absolute; left:0; top:.52em; width:15px; height:8px; border-left:2px solid var(--laranja-forte); border-bottom:2px solid var(--laranja-forte); transform:rotate(-45deg); } .crosses li::before{ content:"×"; position:absolute; left:2px; top:-.05em; font-size:1.25rem; line-height:1.5; color:var(--verde-suave); } .acard .link-arrow{ margin-top:auto; align-self:flex-start; } /* --------------------------------------------------------------- steps -- */ .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.4vw,32px); position:relative; } .steps::before{ content:""; position:absolute; top:26px; left:6%; right:6%; height:1px; background:repeating-linear-gradient(90deg,var(--verde-suave) 0 8px,transparent 8px 16px); opacity:.6; } .step{ position:relative; padding-top:0; } .step__n{ position:relative; z-index:1; width:54px; height:54px; border-radius:50%; display:grid; place-items:center; margin-bottom:22px; background:var(--creme); border:1px solid var(--verde-suave); font-family:var(--display); font-size:1.45rem; color:var(--verde); transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); } .section--alt .step__n{ background:var(--creme-2); } .step:hover .step__n{ background:var(--verde); color:var(--creme); border-color:var(--verde); } .step h3{ font-family:var(--display); font-size:1.5rem; margin-bottom:.45em; line-height:1.15; } .step p{ font-size:.94rem; margin:0; } /* ---------------------------------------------------------------- quiz -- */ .quiz-section{ background:var(--verde); color:rgba(251,245,237,.86); } .quiz-section h2{ color:var(--creme); } .quiz-section .section__lead{ color:rgba(251,245,237,.7); } .quiz{ max-width:800px; margin-inline:auto; background:var(--creme); color:var(--texto); border-radius:var(--r-xl); padding:clamp(26px,3.4vw,48px); box-shadow:0 40px 90px -50px rgba(0,0,0,.6); } .quiz__bar{ height:4px; border-radius:999px; background:var(--linha); overflow:hidden; } .quiz__fill,.quiz__bar span{ display:block; height:100%; width:0%; border-radius:999px; background:linear-gradient(90deg,var(--verde),var(--laranja)); transition:width .5s var(--ease); } .quiz__count{ font-size:.74rem; letter-spacing:.17em; text-transform:uppercase; color:var(--verde-medio); margin:16px 0 22px; } .quiz__q{ font-family:var(--display); font-size:clamp(1.65rem,3.2vw,2.3rem); line-height:1.1; color:var(--verde); margin:0 0 26px; } .quiz__opts{ display:grid; gap:10px; } .quiz__opt{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:16px 20px; border:1px solid var(--linha); border-radius:var(--r); background:var(--creme-2); color:var(--verde); font-size:.98rem; transition:border-color .28s var(--ease), background .28s var(--ease), transform .28s var(--ease); } .quiz__opt::before{ content:""; flex:none; width:20px; height:20px; border-radius:50%; border:1.5px solid var(--verde-suave); transition:border-width .2s, border-color .2s; } .quiz__opt:hover{ border-color:var(--verde); background:var(--creme); transform:translateX(4px); } .quiz__opt:hover::before{ border-color:var(--laranja-forte); border-width:6px; } .quiz__nav{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:22px; } .quiz__skip{ margin-left:auto; text-decoration:none; } .quiz__skip:hover{ color:var(--laranja-forte); } @media (max-width:520px){ .quiz__skip{ margin-left:0; } } .quiz__privacy{ margin:18px 0 0; font-size:.8rem; color:var(--verde-medio); } .quiz__name{ display:grid; gap:12px; margin-bottom:8px; } .quiz__name input{ width:100%; padding:16px 20px; border:1px solid var(--linha); border-radius:var(--r); background:var(--creme-2); color:var(--verde); } .quiz__name input::placeholder{ color:var(--placeholder); } .quiz__result h3{ font-family:var(--display); font-size:clamp(1.7rem,3.4vw,2.4rem); line-height:1.08; margin-bottom:.4em; } .quiz__summary{ display:grid; gap:2px; margin:22px 0 26px; border:1px solid var(--linha); border-radius:var(--r); overflow:hidden; } .quiz__summary div{ display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:space-between; padding:13px 18px; background:var(--creme-2); font-size:.92rem; } .quiz__summary dt{ color:var(--verde-medio); margin:0; } .quiz__summary dd{ margin:0; color:var(--verde); font-weight:500; text-align:right; } .quiz__note{ background:rgba(250,169,72,.14); border-left:3px solid var(--laranja); padding:16px 20px; border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:.93rem; margin-bottom:26px; } /* ---------------------------------------------------------- ferramentas -- */ .tools{ background:var(--creme); border:1px solid var(--linha); border-radius:var(--r-xl); padding:clamp(24px,3vw,42px); max-width:880px; } .tools__tabs{ display:flex; gap:6px; background:var(--creme-2); padding:6px; border-radius:999px; margin-bottom:clamp(24px,3vw,34px); } .tools__tabs button{ flex:1; padding:12px 16px; border:0; border-radius:999px; background:transparent; color:var(--verde-medio); font-size:.92rem; font-weight:500; transition:background .3s var(--ease), color .3s var(--ease); } .tools__tabs button.is-active{ background:var(--verde); color:var(--creme); } .form{ display:grid; grid-template-columns:1fr 1fr auto; gap:14px; align-items:end; } .form--wide{ grid-template-columns:repeat(4,1fr); } .field{ display:grid; gap:7px; } .field--full{ grid-column:1/-1; } .field label{ font-size:.78rem; letter-spacing:.11em; text-transform:uppercase; color:var(--verde-medio); } .field input,.field select{ width:100%; padding:14px 16px; border:1px solid var(--linha); border-radius:var(--r-sm); background:var(--creme-2); color:var(--verde); transition:border-color .25s var(--ease), background .25s var(--ease); } .field input:focus,.field select:focus{ border-color:var(--verde-suave); background:var(--creme); } .field input::placeholder{ color:var(--placeholder); } .form .btn{ white-space:nowrap; } .result{ display:block; margin-top:26px; padding:clamp(20px,2.6vw,30px); background:var(--verde); color:var(--creme); border-radius:var(--r-lg); animation:pop .45s var(--ease); } @keyframes pop{ from{ opacity:0; transform:translateY(12px) } } /* precisa vencer ".result p", que é mais específico que ".result__big" */ .result .result__big{ font-family:var(--display); font-size:clamp(2.4rem,6vw,3.6rem); line-height:1; margin:0; color:var(--creme); } .result__tag{ display:inline-block; margin:10px 0 14px; padding:5px 14px; border-radius:999px; background:rgba(251,245,237,.14); font-size:.82rem; letter-spacing:.06em; } .result p{ color:rgba(251,245,237,.82); font-size:.94rem; } .result__row{ display:flex; flex-wrap:wrap; gap:24px 40px; margin-bottom:16px; } .result__row > div{ min-width:120px; } .result__row small{ display:block; font-size:.75rem; letter-spacing:.11em; text-transform:uppercase; color:rgba(251,245,237,.6); margin-bottom:4px; } .result__row b{ font-family:var(--display); font-size:1.9rem; font-weight:600; color:var(--creme); } .result .btn{ margin-top:8px; } .result__err{ background:var(--creme-2); color:var(--verde); border:1px solid var(--linha); } .result__err p{ color:var(--texto); margin:0; } .tools__note{ margin:26px 0 0; font-size:.83rem; color:var(--verde-medio); max-width:70ch; } /* ------------------------------------------------------- substituições -- */ /* os dois selects lado a lado; align-items:start impede que a nota do grupo empurre o campo vizinho para baixo */ .form--troca{ grid-template-columns:1fr 1fr; align-items:start; } .field__nota{ margin:2px 0 0; font-size:.8rem; color:var(--verde-medio); line-height:1.4; } .chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; } .chips button{ padding:6px 13px; border:1px solid var(--linha); border-radius:999px; background:transparent; color:var(--verde-medio); font-size:.8rem; transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease); } .chips button:hover{ border-color:var(--verde); color:var(--verde); background:var(--creme); } .result--troca{ text-align:left; } /* ".result p" é mais específico que uma classe sozinha: prefixar é necessário */ .result .troca__linha{ margin:0 0 2px; font-size:.95rem; color:rgba(251,245,237,.8); } .result .troca__linha span{ color:var(--creme); font-weight:500; } .result--troca .result__big{ margin:0; } .result .troca__alvo{ margin:4px 0 24px; font-family:var(--display); color:var(--laranja); /* 1.55rem = 24.8px conta como texto grande na WCAG, onde o mínimo cai para 3:1 — é o que permite manter o laranja da marca aqui */ font-size:1.55rem; line-height:1.2; } .troca__tab{ width:100%; border-collapse:collapse; margin-bottom:20px; font-size:.9rem; } .troca__tab th,.troca__tab td{ padding:9px 10px; text-align:right; } .troca__tab thead th{ font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; font-weight:500; color:rgba(251,245,237,.72); border-bottom:1px solid rgba(251,245,237,.22); vertical-align:bottom; } .troca__tab th:first-child,.troca__tab td:first-child{ text-align:left; color:rgba(251,245,237,.72); width:34%; } .troca__tab tbody tr + tr td{ border-top:1px solid rgba(251,245,237,.1); } .troca__tab tbody td{ color:var(--creme); font-variant-numeric:tabular-nums; } .troca__tab tbody tr:first-child td{ font-weight:500; } .troca__avisos{ display:grid; gap:9px; margin:0 0 22px; } .troca__avisos li{ position:relative; padding-left:22px; font-size:.9rem; color:rgba(251,245,237,.82); line-height:1.5; } .troca__avisos li::before{ content:""; position:absolute; left:2px; top:.55em; width:7px; height:7px; border-radius:50%; background:var(--laranja); } @media (max-width:760px){ .form--troca{ grid-template-columns:1fr; } .troca__tab{ font-size:.83rem; } .troca__tab th,.troca__tab td{ padding:8px 5px; } .troca__tab th:first-child,.troca__tab td:first-child{ width:30%; } } /* --------------------------------------------------------------- sobre -- */ .sobre{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(34px,5vw,80px); align-items:center; } .sobre__art{ position:relative; } .sobre__disc{ aspect-ratio:1; border-radius:50%; background:var(--verde); display:grid; place-items:center; padding:22%; position:relative; overflow:hidden; } .sobre__disc::after{ content:""; position:absolute; inset:8px; border-radius:50%; border:1px solid rgba(251,245,237,.22); } .sobre__disc img{ width:100%; opacity:.95; } .sobre__leaf{ position:absolute; right:-14%; bottom:-8%; width:44%; opacity:.35; transform:rotate(-16deg); } .sobre__role{ font-size:.8rem; letter-spacing:.17em; text-transform:uppercase; color:var(--laranja-forte); margin:-.6em 0 1.4em; } .sobre__copy h2{ margin-bottom:.15em; } .sobre__tags{ display:flex; flex-wrap:wrap; gap:8px; margin:28px 0 32px; } .sobre__tags span{ padding:7px 16px; border:1px solid var(--linha); border-radius:999px; font-size:.83rem; color:var(--verde-medio); } /* --------------------------------------------------------- expectativa -- */ .grid--expect{ gap:clamp(18px,2.4vw,30px); } .ecard{ border-radius:var(--r-xl); padding:clamp(26px,3vw,42px); border:1px solid var(--linha); } .ecard h3{ font-family:var(--display); font-size:1.75rem; margin-bottom:1em; } .ecard--yes{ background:var(--verde); border-color:var(--verde); } .ecard--yes h3{ color:var(--creme); } .ecard--yes .checks li{ color:rgba(251,245,237,.85); } .ecard--yes .checks li strong{ color:var(--creme); } .ecard--yes .checks li::before{ border-color:var(--laranja); } .ecard--no{ background:var(--creme); } /* ----------------------------------------------------------------- faq -- */ .faq{ border-top:1px solid var(--linha); } .faq__item{ border-bottom:1px solid var(--linha); } .faq__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 0; border:0; background:transparent; text-align:left; font-family:var(--display); font-size:clamp(1.2rem,2.2vw,1.55rem); line-height:1.25; color:var(--verde); transition:color .3s var(--ease); } .faq__q:hover{ color:var(--laranja-forte); } .faq__ico{ position:relative; flex:none; width:24px; height:24px; } .faq__ico::before,.faq__ico::after{ content:""; position:absolute; top:50%; left:50%; background:var(--verde); transform:translate(-50%,-50%); transition:transform .35s var(--ease), background .3s; } .faq__ico::before{ width:14px; height:1.5px; } .faq__ico::after{ width:1.5px; height:14px; } .faq__q[aria-expanded="true"] .faq__ico::after{ transform:translate(-50%,-50%) rotate(90deg); } .faq__q[aria-expanded="true"] .faq__ico::before, .faq__q[aria-expanded="true"] .faq__ico::after{ background:var(--laranja-forte); } .faq__a{ overflow:hidden; height:0; transition:height .42s var(--ease); } .faq__a p{ margin:0 0 26px; max-width:64ch; font-size:.98rem; } .faq__a a{ color:var(--laranja-forte); } /* ----------------------------------------------------------------- cta -- */ .cta{ position:relative; background:var(--verde); color:rgba(251,245,237,.8); padding-block:var(--sec); overflow:hidden; } .cta__bg{ position:absolute; inset:0; pointer-events:none; } .cta__bg img{ position:absolute; right:-4%; top:50%; transform:translateY(-50%) rotate(12deg); width:clamp(220px,30vw,440px); opacity:.13; } .cta__in{ position:relative; max-width:760px; } .cta h2{ color:var(--creme); } .cta__lead{ font-size:1.08rem; max-width:52ch; color:rgba(251,245,237,.75); margin-bottom:36px; } .cta__btns{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:40px; } .cta__meta{ display:flex; flex-wrap:wrap; gap:10px 28px; border-top:1px solid rgba(251,245,237,.2); padding-top:24px; } .cta__meta li{ font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(251,245,237,.7); } /* -------------------------------------------------------------- rodapé -- */ .footer{ background:var(--verde-escuro); color:rgba(251,245,237,.66); padding-top:clamp(50px,6vw,80px); font-size:.92rem; } .footer__in{ display:grid; grid-template-columns:1.4fr .8fr 1fr; gap:clamp(30px,4vw,60px); padding-bottom:48px; } .footer h3{ font-size:.75rem; letter-spacing:.17em; text-transform:uppercase; color:rgba(251,245,237,.62); margin-bottom:18px; font-weight:500; } .footer__brand img{ width:230px; margin-bottom:20px; filter:brightness(0) invert(1) opacity(.82); } .footer__brand p{ max-width:34ch; margin:0; } .footer__nav,.footer__contact{ display:flex; flex-direction:column; gap:11px; align-items:flex-start; } .footer a{ text-decoration:none; transition:color .28s var(--ease); } .footer a:hover{ color:var(--laranja); } .footer__crn{ margin:12px 0 0; font-size:.82rem; color:rgba(251,245,237,.62); } .footer__bottom{ position:relative; display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; padding-block:22px; font-size:.85rem; } .footer__bottom::before{ content:""; position:absolute; top:0; left:var(--pad); right:var(--pad); height:1px; background:rgba(251,245,237,.12); } .footer__bottom p{ margin:0; } .footer__disclaimer{ padding-bottom:36px; } .footer__disclaimer p{ margin:0; font-size:.78rem; line-height:1.65; color:rgba(251,245,237,.6); max-width:96ch; } /* -------------------------------------------------------------- flutuante */ .fab{ position:fixed; right:20px; bottom:20px; z-index:95; display:flex; align-items:center; gap:0; background:#25D366; color:#fff; text-decoration:none; height:58px; padding:0 19px; border-radius:999px; box-shadow:0 14px 34px -12px rgba(37,211,102,.75); opacity:0; transform:translateY(24px) scale(.9); pointer-events:none; transition:opacity .45s var(--ease), transform .45s var(--ease), gap .35s var(--ease), padding .35s var(--ease); } .fab.is-on{ opacity:1; transform:none; pointer-events:auto; } .fab svg{ width:26px; height:26px; fill:currentColor; flex:none; } .fab span{ max-width:0; overflow:hidden; white-space:nowrap; font-size:.92rem; font-weight:500; transition:max-width .4s var(--ease); } .fab:hover{ gap:10px; padding-right:24px; } .fab:hover span{ max-width:180px; } /* ------------------------------------------------------------- reveal --- */ .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); } .reveal.is-in{ opacity:1; transform:none; } .grid .reveal:nth-child(2),.steps .reveal:nth-child(2){ transition-delay:.09s; } .grid .reveal:nth-child(3),.steps .reveal:nth-child(3){ transition-delay:.18s; } .grid .reveal:nth-child(4),.steps .reveal:nth-child(4){ transition-delay:.27s; } /* --------------------------------------------------------- responsivo --- */ @media (max-width:1080px){ .grid--4{ grid-template-columns:repeat(2,1fr); } .steps{ grid-template-columns:repeat(2,1fr); row-gap:44px; } .steps::before{ display:none; } .hero__in{ grid-template-columns:1fr; } .hero__art{ display:none; } .sobre{ grid-template-columns:1fr; } .sobre__art{ max-width:340px; } .footer__in{ grid-template-columns:1fr 1fr; } .footer__brand{ grid-column:1/-1; } } @media (max-width:900px){ .header__cta{ display:none; } .burger{ display:block; } .nav{ position:fixed; inset:0 0 auto 0; top:0; flex-direction:column; align-items:stretch; gap:0; background:var(--creme); padding:96px var(--pad) 40px; transform:translateY(-102%); transition:transform .5s var(--ease); box-shadow:var(--shadow); max-height:100dvh; overflow:auto; } .nav.is-open{ transform:none; } .nav a{ font-size:1.35rem; font-family:var(--display); padding-block:15px; border-bottom:1px solid var(--linha); } .nav a::after{ display:none; } } @media (max-width:760px){ .grid--2,.grid--4,.grid--areas,.grid--expect{ grid-template-columns:1fr; } .steps{ grid-template-columns:1fr; row-gap:34px; } .form,.form--wide{ grid-template-columns:1fr 1fr; } .form .btn{ grid-column:1/-1; } .tools__tabs{ flex-wrap:wrap; } .tools__tabs button{ flex:1 1 30%; font-size:.85rem; padding:11px 8px; } .footer__in{ grid-template-columns:1fr; } .hero__trust{ gap:18px 28px; } .hero__leaf{ opacity:.16; right:-6%; } /* não competir com o título no celular */ .fab span{ display:none; } .fab{ padding:0; width:56px; height:56px; justify-content:center; right:16px; bottom:16px; } .quiz__summary div{ flex-direction:column; gap:2px; } .quiz__summary dd{ text-align:left; } } @media (max-width:420px){ .form,.form--wide{ grid-template-columns:1fr; } } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } .reveal{ opacity:1; transform:none; } .hero h1 em::after{ transform:scaleX(1); } } @media print{ .header,.fab,.progress,.quiz,.tools,.marquee,.hero__bg{ display:none !important; } body{ background:#fff; color:#000; } }