/* /css/styles.css */ /* ============================================================ FONTES Barlow Condensed vem do Google Fonts (no ). ZuumeSoft, Penguin e Modica Pro NÃO são Google Fonts. Solte os arquivos em /assets/fonts/ com EXATAMENTE estes nomes: ZuumeSoft-Black.woff2 ZuumeSoft-Black.woff ZuumeSoft-Bold.woff2 ZuumeSoft-Bold.woff Penguin.woff2 Penguin.woff ModicaPro-CondSemiBold.woff2 ModicaPro-CondSemiBold.woff Enquanto não existirem, o fallback (Barlow Condensed) entra. ============================================================ */ @font-face { font-family: "ZuumeSoft"; src: url("../assets/fonts/ZuumeSoft-Black.woff2") format("woff2"), url("../assets/fonts/ZuumeSoft-Black.woff") format("woff"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "ZuumeSoft"; src: url("../assets/fonts/ZuumeSoft-Bold.woff2") format("woff2"), url("../assets/fonts/ZuumeSoft-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Modica Pro"; src: url("../assets/fonts/ModicaPro-CondSemiBold.woff2") format("woff2"), url("../assets/fonts/ModicaPro-CondSemiBold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; } /* ============================================================ TOKENS ============================================================ */ :root { /* cores (variáveis do Figma + valores reais do design) */ --primary: #ed3237; --secondary: #193e7d; --azul-escuro: #00207d; --azul-claro: #0085ff; --azul-form: #26366c; --dark: #6b7588; --branco: #ffffff; --cinza-bg: #fafafa; --texto: #222222; --texto-1c: #1c1c1c; --texto-5e: #5e5e5e; --texto-7e: #7e7e7e; --dot: #ff0003; --borda-input: rgba(120, 120, 120, 0.6); /* tipografia */ --f-display: "ZuumeSoft", "Barlow Condensed", sans-serif; --f-body: "Barlow Condensed", sans-serif; --f-penguin: "Barlow Condensed", sans-serif; --f-modica: "Modica Pro", "Barlow Condensed", sans-serif; /* sombras */ --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-hero: 25px 73px 39px rgba(125, 125, 125, 0.09), 6px 18px 21.5px rgba(125, 125, 125, 0.1); /* raios */ --r-btn: 18px; --r-card: 16px; --r-card-lg: 24px; --r-input: 20px; --r-hero: 40px; /* layout */ --maxw: 1440px; --gutter: 80px; } /* ============================================================ RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 110px; overflow-x: clip; } body { margin: 0; font-family: var(--f-body); color: var(--texto); background: var(--branco); -webkit-font-smoothing: antialiased; overflow-x: clip; } img { display: block; max-width: 100%; } ul { list-style: none; margin: 0; padding: 0; } a { text-decoration: none; color: inherit; } button { font-family: inherit; cursor: pointer; } h1, h2, h3, p { margin: 0; } /* ============================================================ BOTÃO BASE ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 16px 24px; border: 0; border-radius: var(--r-btn); font-family: var(--f-body); font-weight: 700; font-size: 20px; line-height: normal; text-align: center; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; } .btn--primary { background: var(--primary); color: var(--branco); } .btn--primary:hover { background: #c5282d; } .btn--primary:active { background: #a92125; } .btn--primary:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .btn--block { width: 100%; } /* ============================================================ HEADER ============================================================ */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: 90px; display: flex; align-items: center; justify-content: center; padding: 10px; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .site-header__inner { width: 1318px; max-width: calc(100% - 40px); height: 73px; display: flex; align-items: center; justify-content: space-between; } /* logo (marca + wordmark + RECIFE) reconstruído conforme offsets do Figma */ .logo { display: flex; align-items: center; gap: 18px; } .logo__img { height: 54px; width: auto; display: block; } .logo__mark { position: relative; width: 66px; height: 53px; flex: none; } .logo__v7 { position: absolute; left: 0; top: 4.06px; width: 65.62px; height: 46.58px; } .logo__v6 { position: absolute; left: 3.68px; top: 0; width: 45.62px; height: 53.21px; } .logo__words { position: relative; display: block; height: 53px; } .logo__salesiano { width: 114px; height: 16.78px; margin-top: 6px; } .logo__recife { display: block; margin-top: 4px; margin-left: 30px; font-family: var(--f-penguin); font-size: 14.733px; color: #243588; letter-spacing: 0.04em; } .nav { display: flex; align-items: center; gap: 24px; } .nav__list { display: flex; gap: 24px; } .nav__list a { font-family: var(--f-body); font-weight: 600; font-size: 18px; line-height: 1.3; letter-spacing: 0.72px; text-transform: uppercase; color: var(--azul-escuro); transition: color 0.15s ease; } .nav__list a:hover { color: var(--primary); } .nav__toggle { display: none; } /* ============================================================ HERO ============================================================ */ .hero { padding-top: 90px; /* = altura do header fixo (sem gap) */ display: flex; justify-content: center; } .hero__stage { position: relative; width: 1378px; max-width: calc(100% - 62px); /* left 31 + right 31 */ } .hero__img { width: 100%; height: auto; border-radius: var(--r-hero); box-shadow: var(--shadow-hero); display: block; } .hero__actions { position: absolute; left: 7%; bottom: 9%; display: flex; gap: 16px; flex-wrap: wrap; } .btn--light { background: var(--branco); color: var(--azul-escuro); border: 1.5px solid var(--azul-escuro); } .btn--light:hover { background: #e9ecf3; } .btn--light:active { background: #dfe3ec; } .hero__card { position: relative; width: 1378px; max-width: calc(100% - 62px); /* left 31 + right 31 */ aspect-ratio: 1378 / 614; border-radius: var(--r-hero); overflow: hidden; box-shadow: var(--shadow-hero); /* escala interna: filhos dimensionados em cq sobre a largura do card */ container-type: inline-size; } .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; } /* conteúdo posicionado proporcionalmente (base 1378x614) */ .hero__content { position: absolute; left: 6.96%; /* 96 / 1378 */ top: 30%; /* 184 / 614 */ display: flex; align-items: center; gap: 25px; } .hero__lead { width: 22.7cqw; /* ~313px em 1378 */ min-width: 200px; max-width: 313px; font-family: var(--f-body); font-weight: 400; font-size: clamp(15px, 1.74cqw, 24px); line-height: 1.15; text-align: center; color: var(--branco); } .hero__lead strong { font-weight: 700; } .hero__title-wrap { position: relative; width: 48.4cqw; max-width: 667px; } .hero__title { font-family: var(--f-display); font-weight: 900; font-size: clamp(44px, 7.6cqw, 108.53px); line-height: 0.828; /* 89.893 / 108.53 */ text-align: center; color: var(--branco); text-shadow: -8.74px 6.243px 0 var(--azul-escuro); text-transform: uppercase; white-space: nowrap; /* mantém cada linha inteira (sem quebra extra) */ } .hero__gap { display: inline-block; width: 2.3em; } .hero__badge-provas { position: absolute; /* provas.png (293x172) tem margens transparentes (cont. 18-270 x 20-138); valores ajustados visualmente p/ o papel encostar sob "AS," e "DA VIDA" */ left: 18%; top: 40%; width: 42%; transform: rotate(2.79deg); filter: drop-shadow(7px 13px 20px rgba(0, 0, 0, 0.25)); } .hero__matriculas { position: absolute; left: 68.9%; /* 950 / 1378 */ top: 79.8%; /* 490 / 614 */ width: 27.6%; /* 380 / 1378 */ height: auto; } /* ============================================================ PROVA / CONQUISTA ============================================================ */ .proof { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 96px var(--gutter); display: grid; grid-template-columns: 300px 1fr 300px; align-items: center; justify-items: center; gap: 0 40px; } .proof__text { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: center; gap: 24px; max-width: 522px; text-align: center; } .proof__title { font-family: var(--f-display); font-weight: 700; font-size: 56px; line-height: 1; color: var(--azul-escuro); } .proof__body { display: flex; flex-direction: column; gap: 12px; } .proof__body p { font-family: var(--f-body); font-weight: 400; font-size: 18px; line-height: 1.2; color: var(--texto); } /* desktop: wrapper transparente — fotos seguem no grid da .proof */ .proof__gallery { display: contents; } .proof__dots { display: none; } .proof__photo { position: relative; width: 248px; border-radius: 21px; align-self: center; } .proof__photo > img:first-of-type { width: 100%; border-radius: 26px; object-fit: cover; aspect-ratio: 248 / 266; box-shadow: 3px 7px 8.5px rgba(120, 120, 120, 0.1), 12px 29px 15.5px rgba(120, 120, 120, 0.09), 26px 65px 21px rgba(120, 120, 120, 0.05); } .proof__photo--left { grid-column: 1; grid-row: 1; transform: rotate(-7.37deg); } /* img com foto+decorações já embutidas: sem corte/sombra/rotação extra */ .proof__photo--baked { width: 290px; transform: none; } .proof__photo--baked > img:first-of-type { width: 100%; border-radius: 0; aspect-ratio: auto; box-shadow: none; } .proof__photo--right { grid-column: 3; grid-row: 1; transform: rotate(4.8deg); } .proof__star { position: absolute; width: 60%; top: -18%; left: -14%; opacity: 0.95; pointer-events: none; z-index: -1; } .proof__photo--right .proof__star { top: auto; bottom: -18%; left: auto; right: -14%; } .proof__vec { position: absolute; width: 30%; bottom: 4%; left: 2%; pointer-events: none; } .proof__photo--right .proof__vec { bottom: auto; top: 6%; left: auto; right: 4%; } /* ============================================================ ESCOLA QUE PREPARA PARA A VIDA (faixa azul) ============================================================ */ .school { position: relative; background: var(--azul-escuro); overflow: hidden; } .school__inner { position: relative; z-index: 2; max-width: 1284px; margin: 0 auto; padding: 105px var(--gutter); display: flex; align-items: center; gap: 80px; } .school__star { position: absolute; opacity: 0.9; pointer-events: none; z-index: 1; } .school__star--tr { width: 478px; right: -20px; top: -120px; transform: scaleY(-1) rotate(171deg); } .school__star--bl { width: 478px; left: -23px; bottom: -120px; transform: scaleY(-1); } .school__head { flex: none; width: 365px; display: flex; flex-direction: column; gap: 64px; align-items: flex-start; } .school__title { position: relative; font-family: var(--f-display); font-weight: 700; font-size: 56px; line-height: 1; color: var(--branco); } .cards { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 28px; } .card { background: var(--branco); border-radius: var(--r-card); padding: 16px 32px; display: flex; flex-direction: column; gap: 8px; justify-content: center; min-height: 113px; } .card__head { display: flex; align-items: center; gap: 8px; } .card__icon { width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; border: 1px solid var(--secondary); border-radius: 8px; background: linear-gradient(180deg, #fff 0%, #f2f2f2 100%); overflow: hidden; } .card__icon img { width: 130%; height: auto; } .card__title { font-family: var(--f-display); font-weight: 700; font-size: 20px; line-height: 1; color: var(--texto-1c); } .card__text { font-family: var(--f-body); font-weight: 400; font-size: 18px; line-height: 1.1; color: var(--texto-5e); } /* ============================================================ JORNADA QUE ACOMPANHA CADA FASE ============================================================ */ .journey { max-width: var(--maxw); margin: 0 auto; padding: 96px var(--gutter); display: flex; align-items: flex-start; gap: 133px; } .journey__text { flex: none; width: 523px; display: flex; flex-direction: column; gap: 36px; align-items: flex-start; } .journey__intro { display: flex; flex-direction: column; gap: 10px; } .journey__title { font-family: var(--f-display); font-weight: 700; font-size: 56px; line-height: 1; color: var(--azul-escuro); max-width: 457px; } .journey__sub { font-family: var(--f-body); font-weight: 400; font-size: 18px; line-height: 1.1; color: var(--texto); } .levels { display: flex; gap: 16px; align-items: stretch; } .levels__track { position: relative; width: 4px; background: #e6e8ec; /* trilho cinza */ border-radius: 4px; flex: none; } .levels__marker { /* indicador azul que desliza */ position: absolute; left: 0; top: 0; width: 4px; height: 40px; border-radius: 4px; background: var(--azul-claro); transition: top 0.35s ease, height 0.35s ease; } .levels__list { display: flex; flex-direction: column; gap: 24px; width: 446px; max-width: 100%; } .level { cursor: pointer; } .level__name { font-family: var(--f-display); font-weight: 700; font-size: 24px; line-height: 1; color: var(--texto-5e); transition: color 0.2s ease; } .level__desc { margin-top: 0; max-height: 0; overflow: hidden; opacity: 0; font-family: var(--f-body); font-weight: 400; font-size: 16px; line-height: 1.15; color: var(--texto-5e); transition: max-height 0.35s ease, opacity 0.3s ease, margin-top 0.35s ease; } .level { position: relative; border-radius: 6px; padding: 8px 12px; transition: background 0.25s ease; } .level--active { background: var(--cinza-bg); } .level--active .level__desc { max-height: 280px; opacity: 1; margin-top: 8px; } .level--active .level__name { color: var(--azul-claro); } .level:not(.level--active):hover .level__name { color: var(--azul-escuro); } .journey__media { position: relative; margin: 0; flex: 1; min-width: 0; max-width: 619px; height: 571px; border-radius: var(--r-card-lg); overflow: hidden; background: var(--branco); box-shadow: var(--shadow-card); } .journey__media > img:first-of-type { width: 100%; height: 100%; object-fit: cover; } .journey__vec { position: absolute; width: 156px; left: 441px; top: -13px; transform: rotate(4.8deg); } /* ============================================================ CONTATO / FORMULÁRIO ============================================================ */ .contact { background: var(--cinza-bg); padding: 80px 0; display: flex; justify-content: center; } .contact__inner { width: 1280px; max-width: calc(100% - 80px); display: flex; align-items: center; justify-content: space-between; gap: 40px; } .contact__media { display: flex; flex-direction: column; gap: 12px; width: 733px; max-width: 100%; } .contact__carousel { height: 435px; border-radius: var(--r-card); overflow: hidden; position: relative; } .contact__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s ease; } .contact__slide.is-active { opacity: 1; position: relative; } .contact__controls { display: flex; align-items: center; justify-content: center; gap: 20px; } .dots { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; max-width: 100%; } .carousel-counter { font-family: var(--f-display); font-weight: 700; font-size: 20px; line-height: 1; color: var(--azul-escuro); letter-spacing: 0.02em; } .carousel-counter__cur { color: var(--primary); } .dot { width: 21px; height: 6px; border: 0; border-radius: 6px; background: var(--dot); opacity: 0.4; padding: 0; transition: width 0.2s ease, opacity 0.2s ease; } .dot.is-active { width: 37px; opacity: 1; } .arrows { display: flex; align-items: center; gap: 17px; } .arrow { width: 40px; height: 40px; border: 0; background: none; padding: 0; transition: transform 0.15s ease; } .arrow img { width: 100%; height: 100%; } .arrow--prev img { transform: scaleX(-1); } .arrow:hover { transform: scale(1.08); } .arrow:active { transform: scale(0.95); } .contact__form { flex: none; width: 482px; max-width: 100%; background: var(--azul-form); border-radius: var(--r-card); padding: 32px 24px; display: flex; flex-direction: column; gap: 24px; filter: drop-shadow(3px 9px 10px rgba(97, 97, 97, 0.1)) drop-shadow(11px 35px 18px rgba(97, 97, 97, 0.09)); } .contact__form-head { display: flex; flex-direction: column; gap: 16px; text-align: center; color: var(--branco); } .contact__form-head h2 { font-family: var(--f-display); font-weight: 700; font-size: 28px; line-height: 1; } .contact__form-head p { font-family: var(--f-body); font-weight: 400; font-size: 16px; line-height: 1.15; } .contact__fields { display: flex; flex-direction: column; gap: 17px; } .contact__row { display: flex; gap: 16px; } .contact__row .field { flex: 1; min-width: 0; } .field { width: 100%; background: var(--cinza-bg); border: 1px solid var(--borda-input); border-radius: var(--r-input); padding: 10px 16px; font-family: var(--f-body); font-weight: 400; font-size: 16px; color: var(--texto-1c); text-align: center; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .field::placeholder { color: var(--texto-7e); opacity: 1; } .field--accent { border-color: var(--azul-claro); color: var(--azul-claro); } .field--accent::placeholder { color: var(--azul-claro); } .field:focus { outline: none; border-color: var(--azul-claro); box-shadow: 0 0 0 3px rgba(0, 133, 255, 0.18); } .field--select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%237e7e7e' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; text-align: left; text-align-last: center; } .field--select:required:invalid { color: var(--texto-7e); } .field.is-error { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(237, 50, 55, 0.18); } .contact__consent { display: flex; align-items: flex-start; gap: 10px; font-family: var(--f-body); font-size: 13px; line-height: 1.4; color: var(--branco); cursor: pointer; } .field-check { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--primary, #ed3237); cursor: pointer; } .contact__feedback { margin-top: 4px; font-family: var(--f-body); font-size: 16px; text-align: center; color: #bfeacb; } .contact__feedback.is-error { color: #ffd0d2; } /* ============================================================ FOOTER ============================================================ */ .site-footer { position: relative; background: var(--azul-escuro); } .site-footer__inner { max-width: 1216px; margin: 0 auto; padding: 40px 20px 16px; display: flex; flex-direction: column; align-items: center; gap: 59px; } .footer-logo { position: relative; width: 100px; height: 100px; } .footer-logo__img { width: 100%; height: 100%; object-fit: contain; } .site-footer__tagline { font-family: var(--f-display); font-weight: 700; font-size: 32px; line-height: 1.1; text-align: center; color: var(--branco); max-width: 761px; } .site-footer__info { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 48px; margin-top: -20px; width: 1098px; max-width: 100%; } .footer-item { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.85); font-family: var(--f-body); font-size: 14px; line-height: 1.45; text-align: left; transition: color 0.2s ease; } a.footer-item:hover { color: var(--branco); } .footer-item__badge { flex: none; display: flex; align-items: center; justify-content: center; opacity: 0.7; } .footer-item__text { display: block; } .footer-item__label { display: none; } .footer-icon { width: 18px; height: 18px; flex: none; } @media (max-width: 768px) { .site-footer__info { flex-direction: column; align-items: stretch; } } .site-footer__bottom { width: 1098px; max-width: 100%; padding: 16px 0; border-top: 1px solid rgba(208, 213, 221, 0.39); display: flex; align-items: center; justify-content: space-between; font-family: var(--f-modica); font-weight: 600; font-size: 20px; line-height: 1.7; color: var(--branco); } .site-footer__bottom a:hover { text-decoration: underline; } /* ============================================================ RESPONSIVO (breakpoints: 1200 / 1024 / 768 / 480) ============================================================ */ @media (max-width: 1200px) { :root { --gutter: 48px; } .school__inner { gap: 48px; } .journey { gap: 64px; } .journey__text { width: 460px; } } @media (max-width: 1024px) { /* nav vira menu colapsável */ .nav__list { position: absolute; top: 90px; left: 0; right: 0; flex-direction: column; align-items: center; gap: 0; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .nav__list li { width: 100%; text-align: center; } .nav__list a { display: block; padding: 16px; } .site-header.is-open .nav__list { max-height: 320px; } .nav__toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; border: 0; background: none; order: 3; } .nav__toggle span { display: block; height: 3px; background: var(--azul-escuro); border-radius: 3px; transition: transform 0.25s ease, opacity 0.2s ease; } .site-header.is-open .nav__toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .site-header.is-open .nav__toggle span:nth-child(2) { opacity: 0; } .site-header.is-open .nav__toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* proof: fotos viram carrossel swipe (scroll-snap) */ .proof { grid-template-columns: 1fr; gap: 40px; } .proof__text { grid-column: 1; order: -1; } .proof__gallery { display: flex; grid-column: 1; width: 100%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px 24px; } .proof__gallery::-webkit-scrollbar { display: none; } /* 82% deixa ~12% do próximo slide visível; fotos retas (sem tilt) e maiores */ .proof__gallery .proof__photo { flex: 0 0 82%; max-width: 380px; width: auto; scroll-snap-align: center; transform: none; } .proof__dots { display: flex; grid-column: 1; justify-content: center; margin-top: -16px; } /* school: empilha cabeçalho e grid */ .school__inner { flex-direction: column; align-items: stretch; } .school__head { width: 100%; gap: 32px; } /* journey: empilha texto e imagem */ .journey { flex-direction: column; } .journey__text { width: 100%; max-width: 620px; } .journey__media { width: 100%; max-width: 100%; } .journey__vec { left: auto; right: 20px; } /* contato: empilha */ .contact__inner { flex-direction: column; } .contact__media { width: 100%; } .contact__form { width: 100%; max-width: 620px; } } @media (max-width: 768px) { :root { --gutter: 24px; } .proof__title, .school__title, .journey__title { font-size: 42px; } .cards { grid-template-columns: 1fr; } .site-footer__bottom { flex-direction: column; gap: 8px; text-align: center; font-size: 16px; } .site-footer__tagline { font-size: 26px; } .levels { width: 100%; } .levels__list { width: 100%; } /* HERO mobile: composição fixa do Figma não cabe — reflui empilhado e legível. (Não há layout mobile no Figma; ver divergências.) */ .hero { padding-top: 90px; } /* card vira coluna: selo → título → botões, sobre bg-hero-mobile (493x790) */ .hero__card { aspect-ratio: 493 / 790; max-width: calc(100% - 32px); display: flex; flex-direction: column; } .hero__content { position: relative; /* acima do bg absoluto */ inset: auto; /* zera top/left do desktop */ z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 20px 16px; text-align: left; margin-top: 15vw; /* título desce até a faixa vermelha do bg */ } .hero__lead { display: none; } .hero__title-wrap { width: auto; max-width: 100%; } .hero__title { white-space: normal; font-size: clamp(40px, 13vw, 66px); line-height: 1.08; text-shadow: -4px 3px 0 var(--azul-escuro); text-align: left; } .hero__gap { width: 2.4em; height: 1.2em; /* 118% corta as margens transparentes do png (conteúdo ~86% da largura) */ background: url("../assets/img/provas.png") center / 118% auto no-repeat; vertical-align: -0.24em; } .hero__badge-provas { display: none; } .hero__matriculas { position: relative; inset: auto; transform: none; z-index: 2; width: 210px; margin: 26px 18px 0 auto; /* topo, encostado à direita */ order: -1; } /* botões dentro do card, empilhados à esquerda (mockup) */ .hero__actions { position: relative; left: auto; bottom: auto; z-index: 2; flex-direction: column; align-items: flex-start; gap: 16px; margin: 10px 0 0; padding: 0 18px 34px; } .hero__actions .btn { width: min(88%, 320px); } } @media (max-width: 600px) { /* CTA do header sai do topo p/ não cobrir o logo; permanece acessível via menu → Contato */ .nav > .btn--primary { display: none; } } @media (max-width: 480px) { .hero { padding-top: 100px; } .proof__title, .school__title, .journey__title { font-size: 34px; } .contact__row { flex-direction: column; } .contact__form-head h2 { font-size: 24px; } .level--active .level__desc { font-size: 15px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } } .whatsapp-float { position: fixed; right: 24px; bottom: 24px; z-index: 999; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: #25d366; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); animation: whatsapp-pulse 1.8s ease-out infinite; } .whatsapp-float:hover { background: #1ebe5a; } @keyframes whatsapp-pulse { 0% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(37, 211, 102, 0.6); } 70% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 0 18px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(37, 211, 102, 0); } } @media (max-width: 768px) { .whatsapp-float { width: 52px; height: 52px; right: 16px; bottom: 16px; } .whatsapp-float svg { width: 28px; height: 28px; } } @media (prefers-reduced-motion: reduce) { .whatsapp-float { animation: none; } }