/* ═══════════════════════════════════════════════════════ BARBARA FERRAZ — Base Stylesheet ═══════════════════════════════════════════════════════ */ /* SZKuhDOG!e@(5!Ikt6 */ /* ─── RESET ──────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { min-height: 100svh; line-height: 1.5; -webkit-font-smoothing: antialiased; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* ─── CUSTOM PROPERTIES ──────────────────────────────── */ :root { --clr-accent: #1e3a2b; --clr-light: #f8f5f1; --clr-bg: #f1ece4; --clr-dark: #102018; --border-light: rgba(241, 236, 228, 0.25); --ff-heading: Georgia, 'Times New Roman', serif; --ff-body: 'Livvic', sans-serif; /* Escala tipográfica */ --fs-sm: clamp(0.85rem, 1vw, 0.9rem); --fs-base: clamp(1rem, 1.2vw, 1.125rem); --fs-md: clamp(1.25rem, 1.8vw, 1.5rem); --fs-lg: clamp(1.5rem, 2.5vw, 2rem); --fs-xl: clamp(2rem, 4vw, 3.5rem); --fs-2xl: clamp(3rem, 7vw, 6rem); /* Espaçamento */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 8rem; /* Layout */ --layout-padding: clamp(1.5rem, 4vw, 3rem); --layout-max-width: 1280px; --layout-gutter: clamp(1.5rem, 3vw, 3rem); --transition: 0.3s ease; } /* ─── @FONT-FACE ─────────────────────────────────────── */ @font-face { font-family: 'Livvic'; src: url('fonts/livvic-v15-latin-300.woff2') format('woff2'); font-weight: 300; font-display: swap; } @font-face { font-family: 'Livvic'; src: url('fonts/livvic-v15-latin-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Livvic'; src: url('fonts/livvic-v15-latin-500.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Livvic'; src: url('fonts/livvic-v15-latin-700.woff2') format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Livvic'; src: url('fonts/livvic-v15-latin-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } /* ─── BASE ───────────────────────────────────────────── */ body { font-family: var(--ff-body); font-size: var(--fs-base); background-color: var(--clr-bg); color: var(--clr-dark); line-height: 1.6; } h1, h2, h3, h4, h5, h6 { font-family: var(--ff-heading); line-height: 1.1; } a { color: inherit; text-decoration: none; } img { object-fit: cover; } button { cursor: pointer; border: none; background: none; } /* ─── LAYOUT SYSTEM ──────────────────────────────────── */ /* → Abordagem 1: full-width + padding → Abordagem 2: max-width centrado Adicione class="wrap" nos wrappers internos de cada seção. */ body.layout-padded .wrap { padding-inline: var(--layout-padding); } body.layout-contained .wrap { width: 100%; max-width: var(--layout-max-width); margin-inline: auto; padding-inline: var(--layout-gutter); } .full-bleed { width: 100%; } /* ─── HEADER ─────────────────────────────────────────── */ .site-header { position: relative; z-index: 201; padding-block: 1.5rem; } .site-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; } .site-nav__left, .site-nav__right { display: flex; align-items: center; gap: 2.8125rem; } .site-nav__right { justify-content: flex-end; } .site-nav__left > a, .site-nav__right a:not(.btn-nav) { font-family: var(--ff-body); font-size: 1rem; font-weight: 500; color: #f1ece4; white-space: nowrap; transition: var(--transition); &:hover { opacity: 0.75; } } .site-nav__logo img { height: 3.5rem; width: auto; } /* Botão do nav */ .btn-nav { display: inline-flex; align-items: center; padding: 0.5em 1.5em; font-family: var(--ff-body); font-size: 1rem; font-weight: 500; color: #102018; background-color: #dfeec2; border-radius: 50px; white-space: nowrap; transition: background-color var(--transition); } .btn-nav:hover { background-color: #cce0a8; } /* ─── HERO ───────────────────────────────────────────── */ .section-hero { min-height: 85vh; background-color: #3e4532; background-image: url('img/hero-bg.png'); background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; flex-direction: column; align-items: stretch; padding-inline: 1.75rem; position: relative; overflow: hidden; } .hero { flex: 1; display: flex; flex-direction: column; align-items: stretch; } /* Strip do marquee de fundo — irmão do .hero */ .strip-hero { overflow: hidden; flex-shrink: 0; line-height: 1; pointer-events: none; margin-bottom: -38px; margin-inline: -1.75rem; } .hero-marquee__track { display: flex; align-items: center; gap: 60px; width: max-content; white-space: nowrap; animation: hero-marquee 110s linear infinite; } .hero-marquee__text { font-family: var(--ff-heading); font-size: 280px; color: #f1ece4; font-weight: 400; line-height: 1; letter-spacing: -0.02em; } .hero-marquee__dot { display: inline-block; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background-color: #f1ece4; } @keyframes hero-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Foto da profissional — à frente das linhas do grid, atrás do texto */ .hero__photo { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 85%; width: auto; object-fit: contain; z-index: 3; } /* Linha horizontal (acima e abaixo do grid) */ .line-w-hero { background-color: var(--border-light); width: 100%; height: 1px; flex-shrink: 0; } /* Área do grid simulado */ .hero__grid { flex: 1; display: flex; justify-content: flex-start; align-items: stretch; padding-block: 1.75rem; } /* Cada bloco = 1 coluna */ .block-grid-hero { display: flex; justify-content: flex-start; align-items: flex-end; flex: 1; @media (max-width: 768px) { align-items: flex-start; } } /* Conteúdo dentro da coluna (texto, heading, etc.) */ .block-hero { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 0.7em; padding-right: 1.75rem; position: relative; z-index: 50; @media (max-width: 768px) { padding-right: 0; } } /* Linha vertical — empurrada para a direita com margin-left: auto */ .line-h-hero { background-color: var(--border-light); flex: none; width: 1px; height: 100%; margin-left: auto; position: relative; } /* Texto no rodapé da col 1 */ .hero__text { color: #f1ece4; font-family: var(--ff-body); font-size: 1.5rem; font-weight: 400; line-height: 1.65; @media (max-width: 767px) { font-size: 1rem; } } .hero__text strong { font-weight: 700; } /* ─── MARQUEE ────────────────────────────────────────── */ .hero__marquee { background-color: var(--clr-accent); color: var(--clr-light); overflow: hidden; padding-block: 0.85rem; flex-shrink: 0; } .hero__marquee-track { display: flex; width: max-content; white-space: nowrap; animation: marquee 32s linear infinite; } .hero__marquee-track span { font-family: var(--ff-body); font-size: 0.8rem; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .hero__marquee-track { animation-play-state: paused; } } .hero__cta { display: none; } /* ─── LIVE DOT (blog nav link) ──────────────────────── */ .nav-blog-link { display: inline-flex; align-items: center; gap: 0.5rem; } .nav-live-dot { display: inline-block; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background-color: #dfeec2; animation: live-pulse 2s ease-in-out infinite; } @keyframes live-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.65); } } /* ─── SECTION INTRO ─────────────────────────────────── */ .section-intro { padding-block: 7.5rem; } .section-intro__inner { display: flex; align-items: flex-start; gap: clamp(2.5rem, 5vw, 5rem); } .section-intro__left { flex: 1; } .section-intro__right { flex: 1; display: flex; flex-direction: column; gap: 1.25rem; } .section-intro__label { font-family: var(--ff-body); font-size: 11px; font-weight: 600; color: var(--clr-accent); text-transform: uppercase; /* letter-spacing: 0.12em; */ margin-bottom: 0.75rem; } .section-intro__title { font-family: var(--ff-heading); font-size: 4.375rem; /* 70px */ font-weight: 400; color: var(--clr-accent); line-height: 1.2; } .section-intro__body { font-family: var(--ff-body); font-size: 1.25rem; /* 20px */ font-weight: 400; color: var(--clr-accent); line-height: 1.6; } /* Botão outline */ .btn-outline { display: inline-flex; align-items: center; padding: 0.75em 2em; font-family: var(--ff-body); font-size: 1.25rem; font-weight: 400; color: var(--clr-accent); border: 1px solid var(--clr-accent); border-radius: 50px; align-self: flex-start; margin-top: 0.5rem; transition: background-color var(--transition), color var(--transition); } .btn-outline:hover { background-color: var(--clr-accent); color: var(--clr-light); } /* ─── SECTION PROCEDIMENTOS ─────────────────────────── */ .section-procedimentos { padding-block: 7.5rem; /* padding-inline: var(--layout-padding); */ } .slider-header { display: flex; justify-content: space-between; align-items: center; padding-block: 1.5rem; padding-top: 0; } .slider-btn { width: 2.5rem; height: 2.5rem; border-radius: 50%; background-color: #e5dfd6; display: inline-flex; align-items: center; justify-content: center; transition: background-color var(--transition); flex-shrink: 0; } .slider-btn img { display: block; width: 14px; height: 14px; } .slider-btn:hover { background-color: #d6d0c7; } /* Embla */ .embla { overflow: hidden; &.embla-procedimentos { padding-inline: var(--layout-padding); } } .embla__viewport { overflow: hidden; } .embla__container { display: flex; gap: 1.5rem; padding-inline: var(--layout-padding); } .embla__slide.slide-card { flex: 0 0 calc((100% - 3rem) / 3); min-width: 0; } .slide-card__img { width: 100%; aspect-ratio: 3 / 2; background-color: #ebe5db; margin-bottom: 1rem; overflow: hidden; } .slide-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .slide-card:hover .slide-card__img img { transform: scale(1.04); } .slide-card__title { font-family: var(--ff-heading); font-size: 1.875rem; font-weight: 400; color: var(--clr-accent); margin-bottom: 0.5rem; } .slide-card__desc { font-family: var(--ff-body); font-size: 1.25rem; color: var(--clr-accent); line-height: 1.55; } /* ─── SECTION FACETAS ───────────────────────────────── */ .section-facetas { background-color: #9b8a99; padding-top: 5.5rem; padding-bottom: 7.5rem; margin-block: 7.5rem; } .facetas__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding-left: var(--layout-padding); padding-right: var(--layout-padding); gap: 5rem; } .facetas__media { @media (max-width: 768px) { width: 100%; } } .facetas__video-wrap { width: 100%; aspect-ratio: 16 / 9; position: relative; overflow: hidden; border-radius: 4px; background-color: rgba(0, 0, 0, 0.2); } #facetas-yt-player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; pointer-events: none; } .facetas__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: transparent; cursor: pointer; opacity: 1; transition: opacity 0.25s ease; } .facetas__play.is-playing { opacity: 0; } .facetas__video-wrap:hover .facetas__play.is-playing { opacity: 1; } .facetas__play-ring { width: 3.25rem; height: 3.25rem; border-radius: 50%; border: 1.5px solid #fff; display: flex; align-items: center; justify-content: center; transition: background-color var(--transition); } .facetas__play:hover .facetas__play-ring { background-color: rgba(255, 255, 255, 0.15); } .icon-pause { display: none; } .facetas__play.is-playing .icon-play { display: none; } .facetas__play.is-playing .icon-pause { display: block; } .facetas__content { flex: 1; display: flex; flex-direction: column; gap: 1.25rem; } .facetas__label { font-family: var(--ff-body); font-size: 0.7rem; /* letter-spacing: 0.12em; */ text-transform: uppercase; color: #fff; } .facetas__title { font-family: var(--ff-heading); font-size: clamp(2rem, 3.5vw, 4.375rem); font-weight: 400; color: #fff; line-height: 1.1; } .facetas__body { font-family: var(--ff-body); font-size: 1.25rem; color: #fff; line-height: 1.6; max-width: 44ch; } .btn-outline--light { color: #f1ece4; border-color: rgba(241, 236, 228, 0.7); } .btn-outline--light:hover { background-color: rgba(241, 236, 228, 0.15); color: #f1ece4; } /* ─── SECTION PROFILAXIA ────────────────────────────── */ .section-profilaxia { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-block: 7.5rem; margin-top: 0; /* padding-inline: var(--layout-padding); */ padding-left: var(--layout-padding); padding-right: var(--layout-padding); } .profilaxia__content { padding-block: 7.5rem; display: flex; flex-direction: column; gap: 1.5rem; padding-bottom: 0; } .profilaxia__label { font-family: var(--ff-body); font-size: 11px; font-weight: 600; color: var(--clr-dark); text-transform: uppercase; /* letter-spacing: 0.12em; */ } .profilaxia__title { font-family: var(--ff-heading); font-size: clamp(2.25rem, 3.75vw, 3.5rem); font-weight: 400; color: var(--clr-dark); line-height: 1.1; } .profilaxia__quote { margin: 0; padding-left: 1rem; border-left: 2px solid rgba(16, 32, 24, 0.25); font-family: var(--ff-body); font-size: 0.95rem; color: var(--clr-dark); line-height: 1.65; } .profilaxia__body { font-family: var(--ff-body); font-size: 1.25rem; color: var(--clr-dark); line-height: 1.7; } .profilaxia__checklist { list-style: none; display: flex; flex-direction: column; gap: 0.85rem; margin-top: 0.5rem; } .profilaxia__checklist li { display: flex; align-items: center; gap: 0.75rem; font-family: var(--ff-heading); font-size: 1.25rem; color: var(--clr-dark); } .check-icon { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid rgba(16, 32, 24, 0.25); display: flex; align-items: center; justify-content: center; } .profilaxia__media { background-color: #edddb4; padding: 2.5rem; aspect-ratio: 1 / 1; align-self: flex-start; display: flex; align-items: stretch; } .profilaxia__img { width: 100%; object-fit: cover; display: block; } /* ─── FAIXA CONTATO ─────────────────────────────────── */ .section-contato { background-color: #e4ddd2; padding-block: 3.5rem; margin-block: 7.5rem; /* margin-bottom: 3rem; */ } .contato__grid { display: grid; grid-template-columns: repeat(3, 1fr); } .contato__item { text-align: center; padding-inline: 2rem; display: flex; flex-direction: column; gap: 0.4rem; } .contato__item + .contato__item { border-left: 1px solid rgba(30, 58, 43, 0.18); } .contato__label { font-family: var(--ff-body); font-size: 11px; font-weight: 600; color: var(--clr-accent); text-transform: uppercase; /* letter-spacing: 0.12em; */ margin-bottom: 0.35rem; } .contato__main { font-family: var(--ff-heading); font-size: clamp(1.1rem, 2.2vw, 2.25rem); font-weight: 400; color: var(--clr-dark); line-height: 1.2; text-decoration: none; overflow-wrap: break-word; transition: color var(--transition); } a.contato__main:hover { color: var(--clr-accent); } .contato__sub { font-family: var(--ff-body); font-size: 0.8rem; color: var(--clr-dark); opacity: 0.55; margin-top: 0.25rem; } /* ─── SECTION DEPOIMENTOS ───────────────────────────── */ .section-depoimentos { padding: 0; } .depoimentos__inner { display: flex; align-items: center; gap: 1.5rem; } .depoimentos__viewport { flex: 1; overflow: hidden; } .depoimentos__container { display: flex; } .depoimentos__slide { flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1.75rem; padding-inline: clamp(1rem, 4vw, 4rem); text-align: center; } .depoimentos__quote { font-family: var(--ff-heading); font-size: clamp(1.4rem, 3.75vw, 3.375rem); font-weight: 400; color: var(--clr-accent); line-height: 1.45; font-style: italic; } .depoimentos__quote::before { content: '\201C'; } .depoimentos__quote::after { content: '\201D'; } .depoimentos__author { font-family: var(--ff-body); font-size: 0.8rem; color: var(--clr-dark); opacity: 0.55; font-style: normal; /* letter-spacing: 0.02em; */ } /* ─── SECTION TRATAMENTO DE CANAL ───────────────────── */ .section-tratamento { background-color: #508a6b; margin-block: 7.5rem; margin-inline: var(--layout-padding); } .tratamento__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } .tratamento__media { overflow: hidden; position: relative; min-height: clamp(300px, 40vw, 580px); padding: 2rem; aspect-ratio: 1 / 1; } .tratamento__img { /* position: absolute; */ inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 1 / 1; } .tratamento__content { display: flex; flex-direction: column; justify-content: center; gap: 1.75rem; padding-block: 4rem; padding-inline: clamp(2rem, 4vw, 4rem); } .tratamento__label { font-family: var(--ff-body); font-size: 11px; font-weight: 600; color: rgba(241, 236, 228, 0.55); text-transform: uppercase; /* letter-spacing: 0.12em; */ } .tratamento__title { font-family: var(--ff-heading); font-size: clamp(2rem, 3.75vw, 3.375rem); font-weight: 400; color: #f1ece4; line-height: 1.15; } /* ─── BOTÃO MENU MOBILE ──────────────────────────────── */ .btn-menu { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 3rem; height: 3rem; border-radius: 50%; background-color: #f1ece4; flex-shrink: 0; } .btn-menu span { display: block; width: 20px; height: 2px; background-color: #102018; transition: transform var(--transition), opacity var(--transition); transform-origin: center; } .btn-menu.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .btn-menu.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .btn-menu.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ─── MENU MOBILE ────────────────────────────────────── */ /* ── SUBMENU PROCEDIMENTOS (desktop) ─────────────────── */ .nav-proc { position: relative; } .nav-proc__trigger { font-family: var(--ff-body); font-size: 1rem; font-weight: 500; color: #f1ece4; background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0; white-space: nowrap; } .nav-proc__chevron { transition: transform var(--transition); flex-shrink: 0; } .nav-proc:hover .nav-proc__chevron { transform: rotate(180deg); } .nav-proc__panel { position: absolute; top: calc(100% + 1.25rem); left: -2rem; width: 680px; background-color: #f1ece4; border-radius: 12px; padding: 1.5rem 2rem; box-shadow: 0 12px 40px rgba(16, 32, 24, 0.14); opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease; z-index: 200; } .nav-proc__panel::before { content: ''; position: absolute; top: -1.25rem; left: 0; right: 0; height: 1.25rem; } .nav-proc:hover .nav-proc__panel { opacity: 1; transform: translateY(0); pointer-events: auto; } .nav-proc__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; } .nav-proc__item { font-family: var(--ff-body); font-size: 1rem; font-weight: 500; color: var(--clr-accent); text-decoration: none; display: block; padding-block: 0.75rem; border-bottom: 1px solid rgba(30, 58, 43, 0.08); transition: color var(--transition); } .nav-proc__item:hover { color: #508a6b; } .nav-proc__grid .nav-proc__item--col-end, .nav-proc__grid .nav-proc__item:last-child { border-bottom: none; } /* ── MOBILE MENU ─────────────────────────────────────── */ .mobile-menu { position: fixed; inset: 0; width: 100%; height: 100%; background-color: var(--clr-accent); z-index: 210; overflow: hidden; transform: translateX(100%); transition: transform 0.45s cubic-bezier(0.77, 0, 0.175, 1); } .mobile-menu.is-open { transform: translateX(0); } .mobile-menu__panel { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-start; padding: 5rem 2rem 3rem; overflow-y: auto; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* z-index: 210; */ } .mobile-menu__panel--main.is-out { transform: translateX(-30%); pointer-events: none; } .mobile-menu__panel--sub { background-color: var(--clr-accent); transform: translateX(100%); justify-content: flex-start; padding-top: 2.5rem; } .mobile-menu__panel--sub.is-in { transform: translateX(0); pointer-events: auto; } .mobile-menu__nav { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; justify-content: center; } .mobile-menu__nav a, .mobile-menu__sub-trigger { font-family: var(--ff-heading); font-size: clamp(1.375rem, 8vw, 1.75rem); font-weight: 400; color: #f1ece4; line-height: 1.2; padding-block: 0.4em; border-bottom: 1px solid rgba(241, 236, 228, 0.15); transition: opacity var(--transition); } .mobile-menu__nav a:hover, .mobile-menu__sub-trigger:hover { opacity: 0.65; } .mobile-menu__sub-trigger { background: none; border-top: none; border-left: none; border-right: none; cursor: pointer; text-align: left; width: 100%; display: flex; justify-content: space-between; align-items: center; } .mobile-menu__sub-arrow { font-family: var(--ff-body); font-size: 1.5rem; opacity: 0.45; font-weight: 300; } .mobile-menu__sub-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.5rem; } .mobile-menu__back { display: inline-flex; align-items: center; gap: 0.625rem; font-family: var(--ff-body); font-size: 0.875rem; font-weight: 500; color: rgba(241, 236, 228, 0.55); background: none; border: none; cursor: pointer; padding: 0; transition: color var(--transition); } .mobile-menu__back:hover { color: #f1ece4; } .mobile-menu__close, .mobile-menu__close-sub { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background-color: #f1ece4; border: none; cursor: pointer; color: var(--clr-accent); flex-shrink: 0; transition: opacity var(--transition); } .mobile-menu__close:hover, .mobile-menu__close-sub:hover { opacity: 0.8; } .mobile-menu__close { position: absolute; top: 1.25rem; right: 1.25rem; } .mobile-menu__subnav { display: flex; flex-direction: column; } .mobile-menu__subnav a { font-family: var(--ff-heading); font-size: clamp(1.375rem, 5vw, 1.875rem); font-weight: 400; line-height: 1.2; color: #f1ece4; padding-block: 0.5em; border-bottom: 1px solid rgba(241, 236, 228, 0.15); transition: opacity var(--transition); } .mobile-menu__subnav a:hover { opacity: 0.65; } .mobile-menu__cta-wrap { margin-top: auto; padding-top: 2rem; border-top: 1px solid rgba(241, 236, 228, 0.15); } .mobile-menu__cta { width: 100%; justify-content: center; font-size: 1.125rem; } /* ─── FOOTER ─────────────────────────────────────────── */ .site-footer { background-color: var(--clr-dark); } .footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); padding-inline: var(--layout-padding); padding-block: 6rem; padding-bottom: 2rem; min-height: 380px; } .footer__col { display: flex; flex-direction: column; justify-content: flex-end; gap: 1.5rem; padding-inline: 2rem; border-left: 1px solid rgba(241, 236, 228, 0.1); } .footer__col:first-child { padding-left: 0; border-left: none; } .footer__col-label { font-family: var(--ff-body); font-size: 11px; font-weight: 600; text-transform: uppercase; color: #f1ece4; } .footer__nav { display: flex; flex-direction: column; gap: 0.7rem; } .footer__nav a { font-family: var(--ff-body); font-size: 0.9rem; color: rgba(241, 236, 228, 0.65); transition: color var(--transition); } .footer__nav a:hover { color: #f1ece4; } .footer__address { font-family: var(--ff-body); font-size: 0.9rem; font-style: normal; line-height: 1.7; color: rgba(241, 236, 228, 0.65); } .footer__contact { display: flex; flex-direction: column; gap: 0.25rem; } .footer__contact a { font-family: var(--ff-body); font-size: 0.9rem; color: rgba(241, 236, 228, 0.65); transition: color var(--transition); } .footer__contact a:hover { color: #f1ece4; } /* ── Marquee contornado */ .footer__marquee { overflow: hidden; border-top: 1px solid rgba(241, 236, 228, 0.1); line-height: 1; } .footer-marquee__track { display: flex; align-items: center; gap: 48px; width: max-content; white-space: nowrap; animation: footer-marquee 100s linear infinite; } .footer-marquee__text { font-family: var(--ff-heading); font-size: 220px; font-weight: 400; line-height: 0.9; letter-spacing: -0.02em; color: transparent; -webkit-text-stroke: 1.5px rgba(241, 236, 228, 0.18); } .footer-marquee__dot { display: inline-block; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background-color: rgba(241, 236, 228, 0.18); } @keyframes footer-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ── Rodapé inferior */ .footer__bottom { border-top: 1px solid rgba(241, 236, 228, 0.1); padding-block: 1.5rem; padding-inline: var(--layout-padding); } .footer__credits { font-family: var(--ff-body); font-size: 0.8rem; color: rgba(241, 236, 228, 0.35); } .footer__credits a { color: rgba(241, 236, 228, 0.55); transition: color var(--transition); } .footer__credits a:hover { color: #f1ece4; } /* ─── RESPONSIVO ─────────────────────────────────────── */ /* Tablet (≤ 1024px) */ /* ─── PÁGINA PROCEDIMENTO ────────────────────────────── */ .proc-hero { background-color: var(--proc-color, #102018); display: flex; flex-direction: column; padding-inline: 1.75rem; padding-bottom: 7.5rem; gap: 5rem; } .proc-hero__body { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 6rem); align-items: end; padding-top: 3rem; } .proc-hero__figure { margin: 0; overflow: hidden; } .proc-hero__img { width: 100%; aspect-ratio: 1824 / 672; object-fit: cover; display: block; } /* ── Esquerda */ .proc-hero__left { display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; } .proc-breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-family: var(--ff-body); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(241, 236, 228, 0.55); } .proc-breadcrumb a { color: rgba(241, 236, 228, 0.75); text-decoration: none; transition: color var(--transition); } .proc-breadcrumb a:hover { color: rgba(241, 236, 228, 1); text-decoration: underline; text-underline-offset: 3px; } .proc-hero__title { font-family: var(--ff-heading); font-size: 7.75rem; font-weight: 400; color: #f1ece4; line-height: 1; } /* ── Direita */ .proc-hero__right { display: flex; flex-direction: column; justify-content: flex-end; gap: 2rem; } .proc-hero__tagline { font-family: var(--ff-heading); font-style: italic; font-size: 2rem; color: #f1ece4; line-height: 1.45; } /* ── Spec boxes */ .proc-specs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(241, 236, 228, 0.15); border-bottom: 1px solid rgba(241, 236, 228, 0.15); } .proc-spec { display: flex; flex-direction: column; gap: 0.5rem; padding-block: 1.75rem; padding-inline: 2rem; border-left: 1px solid rgba(241, 236, 228, 0.15); } .proc-spec:first-child { border-left: none; padding-left: 0; } .proc-spec__label { font-family: var(--ff-body); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(241, 236, 228, 0.38); margin-bottom: 0.25rem; } .proc-spec__value { font-family: var(--ff-heading); font-size: 1.375rem; font-weight: 400; color: #f1ece4; line-height: 1.2; } .proc-spec__sub { font-family: var(--ff-body); font-size: 0.85rem; color: rgba(241, 236, 228, 0.45); } /* ── Seção imagem */ .proc-image-section { background-color: #102018; padding-inline: var(--layout-padding); padding-bottom: 5rem; } .proc-image-wrap { position: relative; background-color: #2d4b38; overflow: hidden; } .proc-image { width: 100%; aspect-ratio: 1824 / 672; object-fit: cover; display: block; } .proc-image__caption { position: absolute; bottom: 1.25rem; left: 1.5rem; font-family: var(--ff-body); font-size: 0.7rem; letter-spacing: 0.05em; color: rgba(241, 236, 228, 0.35); } /* ── Conteúdo proc */ .proc-content { background-color: #f1ece4; } .proc-content > section + section { margin-top: var(--space-xl); } /* ── Naturalidade / vídeo */ .proc-naturalidade { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; background-color: #4d7a5e; margin-inline: var(--layout-padding); padding-inline: 4rem; padding-block: 5rem; } .proc-naturalidade__eyebrow { font-family: var(--ff-body); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; color: var(--text-clr, #f1ece4); margin-bottom: 1.5rem; } .proc-naturalidade__title { font-family: Georgia, serif; font-size: 4.375rem; font-weight: 400; line-height: 1.1; color: var(--text-clr, #f1ece4); margin-bottom: 2rem; } .proc-naturalidade__text { font-family: var(--ff-body); font-size: 1.25rem; line-height: 1.7; color: var(--text-clr, rgba(241, 236, 228, 0.85)); margin-bottom: 1.25rem; } .proc-naturalidade__quote { font-family: var(--ff-heading); font-size: 1.25rem; font-style: italic; line-height: 1.6; color: var(--text-clr, #f1ece4); margin-top: 2rem; } .proc-naturalidade__video-wrap { position: relative; aspect-ratio: 16 / 10; background-color: #0a0a0a; overflow: hidden; } .proc-naturalidade__vid { width: 100%; height: 100%; object-fit: cover; display: block; } .proc-naturalidade__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: transparent; cursor: pointer; transition: opacity var(--transition); } .proc-naturalidade__play::before { content: ''; position: absolute; width: 4rem; height: 4rem; border-radius: 50%; border: 1.5px solid rgba(241, 236, 228, 0.75); transition: border-color var(--transition), transform var(--transition); } .proc-naturalidade__play:hover::before { border-color: #f1ece4; transform: scale(1.08); } .proc-naturalidade__play-icon { position: relative; z-index: 1; display: flex; } .proc-naturalidade__play-icon--pause { display: none; } .proc-naturalidade__play.is-playing .proc-naturalidade__play-icon--play { display: none; } .proc-naturalidade__play.is-playing .proc-naturalidade__play-icon--pause { display: flex; } .proc-naturalidade--media-left .proc-naturalidade__right { order: -1; } /* ── Mockup */ .proc-mockup { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; background-color: #a18298; margin-inline: var(--layout-padding); padding-inline: 4rem; padding-block: 5rem; } .proc-mockup__media { position: relative; overflow: hidden; } .proc-mockup__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; } .proc-naturalidade__media-wrap { overflow: hidden; } .proc-naturalidade__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; } .proc-yt-wrap { position: relative; aspect-ratio: 16 / 9; overflow: hidden; } .proc-yt-wrap--fill { position: absolute; inset: 0; aspect-ratio: unset; } .proc-yt-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } .proc-mockup__eyebrow { font-family: var(--ff-body); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; color: #fff; margin-bottom: 1rem; } .proc-mockup__title { font-family: Georgia, serif; font-size: 4.375rem; font-weight: 400; line-height: 1.1; color: #fff; margin-bottom: 1.75rem; } .proc-mockup__intro { font-family: var(--ff-body); font-size: 1.25rem; line-height: 1.7; color: #fff; margin-bottom: 2rem; } .proc-mockup__steps { list-style: none; display: flex; flex-direction: column; gap: 1.5rem; } .proc-mockup__step { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0; } .proc-mockup__step-num { font-family: Georgia, serif; font-size: 1.25rem; font-weight: 400; color: #fff; grid-column: 1; grid-row: 1; margin-bottom: 0.2rem; } .proc-mockup__step-text { font-family: var(--ff-body); font-size: 1.25rem; line-height: 1.6; color: #fff; grid-column: 1 / -1; grid-row: 3; } /* ── Info contato (procedimento) */ .proc-info { margin-inline: var(--layout-padding); margin-block: 7.5rem; border-top: 1px solid rgba(30, 58, 43, 0.15); border-bottom: 1px solid rgba(30, 58, 43, 0.15); } .proc-info__grid { display: grid; grid-template-columns: repeat(3, 1fr); } .proc-info__item { padding-block: 4rem; padding-right: 3rem; display: flex; flex-direction: column; gap: 0.4rem; } .proc-info__item + .proc-info__item { padding-left: 3rem; border-left: 1px solid rgba(30, 58, 43, 0.15); } .proc-info__label { font-family: var(--ff-body); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; color: #508a6b; margin-bottom: 0.5rem; } .proc-info__main { font-family: Georgia, serif; font-size: clamp(1.5rem, 2.5vw, 2.5rem); font-weight: 400; line-height: 1.2; color: var(--clr-accent); text-decoration: none; transition: color var(--transition); } a.proc-info__main:hover { color: var(--clr-dark); } .proc-info__sub { font-family: var(--ff-body); font-size: 1.25rem; line-height: 1.5; color: var(--clr-accent); margin-top: 0.25rem; } /* ── CTA */ .proc-cta { background-color: #1e3a2b; padding-inline: var(--layout-padding); padding-block: 7.5rem; text-align: center; margin-top: 7.5rem; } .proc-cta__eyebrow { font-family: var(--ff-body); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; color: rgba(241, 236, 228, 0.55); margin-bottom: 1.5rem; } .proc-cta__title { font-family: Georgia, serif; font-size: 4.375rem; font-weight: 400; line-height: 1.15; color: #f1ece4; max-width: 30ch; margin-inline: auto; margin-bottom: 1.5rem; } .proc-cta__sub { font-family: Georgia, serif; font-size: 1.5rem; font-style: italic; line-height: 1.5; color: rgba(241, 236, 228, 0.7); margin-bottom: 3rem; } .proc-cta__btn { display: inline-block; padding: 0.875rem 2.5rem; background-color: #dfeec2; color: #102018; border-radius: 2rem; font-family: var(--ff-body); font-size: 1.25rem; font-weight: 500; transition: background-color var(--transition); } .proc-cta__btn:hover { background-color: #cce4a8; } /* ── Processo */ .proc-processo { padding-inline: var(--layout-padding); padding-top: 7.5rem; margin-top: 0 !important; } .proc-processo__eyebrow { font-family: var(--ff-body); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; color: var(--clr-accent); margin-bottom: 1rem; } .proc-processo__title { font-family: Georgia, serif; font-size: 4.375rem; font-weight: 400; line-height: 1.1; color: var(--clr-accent); margin-bottom: 1.75rem; } .proc-processo__intro { font-family: var(--ff-body); font-size: 1.25rem; line-height: 1.7; color: var(--clr-accent); margin-bottom: 1.5rem; } .proc-processo__quote { font-family: Georgia, serif; font-size: 1.5rem; font-style: italic; line-height: 1.55; color: #1e3a2b; margin-bottom: 4rem; } .proc-processo__grid { display: grid; grid-template-columns: repeat(5, 1fr); } .proc-processo__step { position: relative; padding-top: 2.5rem; padding-right: 2rem; border-top: 1px solid rgba(30, 58, 43, 0.15); } .proc-processo__step:not(:first-child) { padding-left: 2rem; border-left: 1px solid rgba(30, 58, 43, 0.15); } .proc-processo__dot { position: absolute; top: 0; left: 1rem; transform: translateY(-50%); width: 0.875rem; height: 0.875rem; border-radius: 50%; background-color: var(--clr-accent); } .proc-processo__step:first-child .proc-processo__dot { left: 0; } .proc-processo__sessao { font-family: var(--ff-body); font-size: 0.75rem; font-weight: 700; color: #508a6b; margin-bottom: 0.75rem; } .proc-processo__step-title { font-family: Georgia, serif; font-size: 1.75rem; font-weight: 400; line-height: 1.2; color: var(--clr-accent); margin-bottom: 0.75rem; } .proc-processo__step-text { font-family: var(--ff-body); font-size: 1.25rem; line-height: 1.6; color: var(--clr-accent); } /* ── Bruxismo */ .proc-bruxismo { background-color: #e4ddd2; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; padding-inline: var(--layout-padding); padding-block: 7.5rem; } .proc-bruxismo__eyebrow { font-family: var(--ff-body); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; color: var(--clr-accent); margin-bottom: 1rem; } .proc-bruxismo__title { font-family: Georgia, serif; font-size: 4.375rem; font-weight: 400; line-height: 1.1; color: var(--clr-accent); margin-bottom: 2rem; } .proc-bruxismo__text { font-family: var(--ff-body); font-size: 1.25rem; line-height: 1.7; color: var(--clr-accent); } .proc-bruxismo__text + .proc-bruxismo__text { margin-top: 1.25rem; } .proc-bruxismo__media { aspect-ratio: 1 / 1; overflow: hidden; background-color: rgba(30, 58, 43, 0.08); } .proc-bruxismo__img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ── Durabilidade */ .proc-durabilidade { background-color: #edddb4; padding-inline: var(--layout-padding); padding-block: 7.5rem; } .proc-durabilidade__eyebrow { font-family: var(--ff-body); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; color: #1e3a2b; margin-bottom: 1.5rem; } .proc-durabilidade__quote { font-family: Georgia, serif; font-size: 4.375rem; font-style: italic; font-weight: 400; line-height: 1.15; color: #1e3a2b; margin-bottom: 4rem; } .proc-durabilidade__light { color: rgba(30, 58, 43, 0.55); } .proc-durabilidade__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; border-top: 1px solid rgba(30, 58, 43, 0.2); padding-top: 2.5rem; } .proc-durabilidade__col-label { font-family: var(--ff-body); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; color: #1e3a2b; margin-bottom: 0.75rem; } .proc-durabilidade__col-text { font-family: var(--ff-body); font-size: 1.25rem; line-height: 1.7; color: #1e3a2b; } /* ── Sobre o procedimento */ .proc-sobre { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; padding-inline: var(--layout-padding); } .proc-content > .proc-sobre:first-child { padding-top: 7.5rem; } /* ── Tópicos (reutilizável) */ .proc-topicos { padding-inline: var(--layout-padding); padding-top: 7.5rem; margin-top: 0 !important; } .proc-topicos__eyebrow { font-family: var(--ff-body); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; color: var(--clr-accent); margin-bottom: 1rem; } .proc-topicos__title { font-family: Georgia, serif; font-size: 4.375rem; font-weight: 400; line-height: 1.1; color: var(--clr-accent); margin-bottom: 1.75rem; } .proc-topicos__intro { font-family: var(--ff-body); font-size: 1.25rem; line-height: 1.7; color: var(--clr-accent); /* max-width: 72ch; */ } .proc-topicos__grid { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: 2rem; margin-top: 3rem; } .proc-topico { border: 1px solid rgba(16, 32, 24, 0.12); padding: 2.5rem; } .proc-topico__num { font-family: Georgia, serif; font-size: 2.5rem; font-weight: 400; color: var(--clr-accent); margin-bottom: 1.25rem; line-height: 1; } .proc-topico__label { display: block; font-family: var(--ff-body); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; color: #508a6b; margin-bottom: 0.5rem; } .proc-topico__title { font-family: Georgia, serif; font-size: 1.75rem; font-weight: 400; line-height: 1.2; color: var(--clr-accent); margin-bottom: 1rem; } .proc-topico__text { font-family: var(--ff-body); font-size: 1.25rem; line-height: 1.7; color: var(--clr-accent); } .proc-topico__text + .proc-topico__text { margin-top: 1.25rem; } .proc-sobre__eyebrow { font-family: var(--ff-body); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; color: var(--clr-accent); margin-bottom: 1.5rem; } .proc-sobre__title { font-family: Georgia, serif; font-size: 4.375rem; font-weight: 400; line-height: 1.1; color: var(--clr-accent); @media (max-width: 40rem) { font-size: clamp(2rem, 10vw, 3.5rem); } } .proc-sobre__right { display: flex; flex-direction: column; justify-content: center; gap: 1.25rem; } .proc-sobre__right p, .proc-sobre__text { font-family: var(--ff-body); font-size: 1.25rem; font-weight: 400; line-height: 1.7; color: var(--clr-accent); } /* ── BLOG HERO ───────────────────────────────────────── */ .blog-hero { background-color: #7a8179; padding-inline: var(--layout-padding); padding-bottom: 7.5rem; } .blog-hero__body { padding-top: 4rem; } .blog-hero__eyebrow { font-family: var(--ff-body); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; color: rgba(241, 236, 228, 0.55); margin-bottom: 1.5rem; } .blog-hero__title { font-family: Georgia, serif; font-size: 7.75rem; font-weight: 400; color: #f1ece4; line-height: 1; max-width: 14ch; margin-top: 1rem; } /* ── BLOG CONTENT ────────────────────────────────────── */ .blog-content { padding-inline: var(--layout-padding); padding-top: 7.5rem; } /* ── FEATURED POST ───────────────────────────────────── */ .blog-featured { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; margin-bottom: 7.5rem; text-decoration: none; color: inherit; transition: transform var(--transition); } .blog-featured:hover { transform: translateY(-4px); } .blog-featured__thumb { width: 100%; aspect-ratio: 3 / 2; background-color: #e4ddd2; overflow: hidden; background-size: cover; } .blog-featured__thumb img { width: 100%; height: 100%; object-fit: cover; } .blog-featured__meta { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; } .blog-featured__cat { font-family: var(--ff-body); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; color: #508a6b; } .blog-featured__sep { font-size: 0.6875rem; color: #508a6b; } .blog-featured__date { font-family: var(--ff-body); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; color: #508a6b; } .blog-featured__title { font-family: Georgia, serif; font-size: 4.375rem; font-weight: 400; color: #1e3a2b; line-height: 1.1; margin-bottom: 1.5rem; transition: color var(--transition); } .blog-featured:hover .blog-featured__title { color: #508a6b; } .blog-featured__excerpt { font-family: var(--ff-body); font-size: 1.25rem; line-height: 1.65; color: rgba(30, 58, 43, 0.7); } /* ── BLOG GRID ───────────────────────────────────────── */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.5rem 2rem; } /* ── BLOG CARD ───────────────────────────────────────── */ .blog-card__link { display: block; text-decoration: none; color: inherit; transition: transform var(--transition); } .blog-card__link:hover { transform: translateY(-6px); } .blog-card__link:hover .blog-card__title { color: #508a6b; } .blog-card__thumb { width: 100%; aspect-ratio: 3 / 2; background-color: #e4ddd2; overflow: hidden; margin-bottom: 1.25rem; } .blog-card__thumb img { width: 100%; height: 100%; object-fit: cover; } .blog-card__date { font-family: var(--ff-body); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: #508a6b; margin-bottom: 0.5rem; } .blog-card__title { font-family: Georgia, serif; font-size: 1.875rem; font-weight: 400; color: #1e3a2b; line-height: 1.3; margin-bottom: 0.75rem; transition: color var(--transition); } .blog-card__excerpt { font-family: var(--ff-body); font-size: 1.25rem; line-height: 1.65; color: rgba(30, 58, 43, 0.7); } /* ── BLOG SINGLE — HERO ──────────────────────────────── */ .bpost-hero { background-color: #7a8179; padding-inline: var(--layout-padding); padding-bottom: 7.5rem; } .bpost-hero__body { padding-top: 3rem; padding-bottom: 0; } .bpost-hero__body .proc-breadcrumb { margin-bottom: 1.5rem; } .bpost-hero__eyebrow { font-family: var(--ff-body); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; color: rgba(241, 236, 228, 0.55); margin-bottom: 1.5rem; } .bpost-hero__title { font-family: Georgia, serif; font-size: 4.375rem; font-weight: 400; color: #f1ece4; line-height: 1.1; margin-bottom: 3rem; } .bpost-hero__meta { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(241, 236, 228, 0.15); border-bottom: 1px solid rgba(241, 236, 228, 0.15); padding-block: 1.5rem; } .bpost-hero__author { display: flex; align-items: center; gap: 1rem; } .bpost-hero__avatar { width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid rgba(241, 236, 228, 0.4); background-color: transparent; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: Georgia, serif; font-size: 0.875rem; color: rgba(241, 236, 228, 0.5); } .bpost-hero__author-body { display: flex; flex-direction: column; gap: 0.2rem; } .bpost-hero__author-label { font-family: var(--ff-body); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; color: rgba(241, 236, 228, 0.5); } .bpost-hero__author-name { font-family: var(--ff-body); font-size: 1rem; font-weight: 400; color: rgba(241, 236, 228, 0.85); } .bpost-hero__date { font-family: Georgia, serif; font-size: 1.125rem; font-weight: 400; color: rgba(241, 236, 228, 0.7); } .bpost-hero__cover { margin-top: 3rem; overflow: hidden; } .bpost-hero__cover img { width: 100%; aspect-ratio: 3 / 2; max-height: 45rem; object-fit: cover; display: block; } .bpost-hero__cover-placeholder { width: 100%; aspect-ratio: 3 / 2; background-color: rgba(30, 58, 43, 0.25); } /* ── BLOG SINGLE — CONTEÚDO ──────────────────────────── */ .bpost-content { padding-inline: var(--layout-padding); /* padding-block: 7.5rem; */ padding-top: 7.5rem; } .bpost-body { } .bpost-lead { font-family: Georgia, serif; font-style: italic; font-size: 1.25rem; line-height: 1.75; color: var(--clr-accent); margin-bottom: 2rem; } .bpost-body > p { font-family: var(--ff-body); font-size: 1.25rem; line-height: 1.75; color: var(--clr-accent); margin-bottom: 1.5rem; } .bpost-body h2 { font-family: Georgia, serif; font-size: 2.5rem; font-weight: 400; color: var(--clr-accent); line-height: 1.2; margin-top: 3rem; margin-bottom: 1.5rem; } .bpost-body h3 { font-family: Georgia, serif; font-size: 1.75rem; font-weight: 400; color: var(--clr-accent); line-height: 1.3; margin-top: 2.5rem; margin-bottom: 1rem; } .bpost-pullquote { border-left: 2px solid #508a6b; border-bottom: 1px solid rgba(30, 58, 43, 0.15); padding-left: 2rem; padding-top: 3rem; padding-bottom: 2.5rem; margin-block: 4rem; } .bpost-pullquote p { font-family: Georgia, serif; font-style: italic; font-size: 1.875rem; line-height: 1.75; color: var(--clr-accent); margin-bottom: 3rem; } .bpost-pullquote cite { display: block; font-family: var(--ff-body); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; color: #508a6b; font-style: normal; } /* ── BLOG SINGLE — AUTORA ────────────────────────────── */ .bpost-author { margin-top: 5rem; padding-top: 3rem; border-top: 1px solid rgba(30, 58, 43, 0.15); } .bpost-author__label { font-family: var(--ff-body); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: #508a6b; margin-bottom: 1.5rem; } .bpost-author__row { display: flex; gap: 2rem; align-items: flex-start; } .bpost-author__avatar { width: 10rem; height: 10rem; border-radius: 50%; background-color: #e4ddd2; flex-shrink: 0; } .bpost-author__name { font-family: Georgia, serif; font-size: 2rem; font-weight: 400; color: var(--clr-accent); margin-bottom: 0.75rem; } .bpost-author__bio { font-family: var(--ff-body); font-size: 1.0625rem; font-weight: 400; line-height: 1.65; color: rgba(30, 58, 43, 0.7); } /* ─── RESPONSIVO ─────────────────────────────────────── */ /* Mobile (≤ 768px) */ @media (max-width: 768px) { /* ── Nav */ .site-nav__left a, .site-nav__right a { display: none; } .nav-proc { display: none; } .btn-menu { display: inline-flex; } .site-nav__logo img { height: 2.75rem; } /* ── Hero */ .section-hero { padding-inline: 1.25rem; min-height: unset; } .line-w-hero { display: none; } .hero__grid { display: block; padding-block: 1.5rem 0; } .hero__grid .block-grid-hero:nth-child(n + 2) { display: none; } .hero__grid .line-h-hero { display: none; } .hero__text { font-size: 1.2rem; } .strip-hero { display: block; position: absolute; bottom: 0; left: 0; right: 0; } .hero-marquee__text { font-size: 260px; } .hero__photo { position: static; width: calc(100% + 2.5rem); height: auto; aspect-ratio: none; object-fit: contain; object-position: bottom center; transform: none; left: auto; z-index: auto; margin-inline: -1.25rem; margin-top: 2.5rem; position: relative; z-index: 2; } .hero__cta { display: flex; justify-content: center; width: 100%; padding-block: 1rem; margin-top: 1.75rem; } /* ── Intro */ .section-intro { padding-block: 4rem; } .section-intro__inner { flex-direction: column; gap: 2rem; } .section-intro__title { font-size: clamp(2rem, 9vw, 3.5rem); } .section-intro__body { /* font-size: 1.25rem; */ } /* ── Procedimentos */ .section-procedimentos { padding-block: 4rem; position: relative; } .section-procedimentos .slider-header { position: absolute; inset: 0; height: 100%; display: flex; align-items: center; justify-content: space-between; padding-inline: 0.75rem; pointer-events: none; z-index: 2; } .section-procedimentos .slider-btn { pointer-events: auto; } .embla__slide.slide-card { flex: 0 0 80vw; } /* ── Facetas */ .section-facetas { padding-block: 3.5rem; margin-block: 4rem; padding-top: 5.5rem; } .facetas__inner { grid-template-columns: 1fr; gap: 2rem; } .facetas__content { order: -1; } .facetas__video-wrap { width: 100%; aspect-ratio: 16 / 9; } /* ── Faixa Contato */ .section-contato { margin-block: 4rem; } .contato__grid { grid-template-columns: 1fr; gap: 0; } .contato__item { padding-block: 1.75rem; } .contato__item + .contato__item { border-left: none; border-top: 1px solid rgba(30, 58, 43, 0.18); } .contato__sub { font-size: 1rem; } /* ── Profilaxia */ .section-profilaxia { grid-template-columns: 1fr; /* margin-block: 4rem; */ gap: 2.5rem; margin-bottom: 0; } .profilaxia__content { padding-block: 3rem; padding-bottom: 2.5rem; } .profilaxia__media { width: 100%; align-self: auto; } /* ── Depoimentos */ .section-depoimentos { padding-block: 4rem; } /* ── Tratamento */ .section-tratamento { margin-block: 4rem; margin-inline: 1rem; } .tratamento__inner { grid-template-columns: 1fr; } .tratamento__media { min-height: 60vw; } .tratamento__content { padding-block: 2.5rem; padding-inline: var(--layout-padding); } /* ── Footer */ .footer__grid { grid-template-columns: 1fr; gap: 0; padding-block: 3.5rem; /* padding-bottom: 1rem; */ } .footer__col { padding-inline: 0; border-left: none; } .footer__col:first-child { margin-bottom: 2.5rem; } .footer__col:nth-child(2) { border-bottom: 1px solid rgba(241, 236, 228, 0.1); padding-bottom: 2.5rem; margin-bottom: 2.5rem; } .footer__col:nth-child(3), .footer__col:nth-child(4) { border-top: none; justify-content: flex-start; } .footer-marquee__text { font-size: 22vw; } /* ── Procedimento single */ .proc-hero { padding-bottom: 3rem; gap: 3rem; } .proc-hero__body { grid-template-columns: 1fr; gap: 3rem; align-items: start; } .proc-hero__title { font-size: clamp(2.75rem, 13vw, 5rem); } .proc-hero__tagline { font-size: 1.375rem; } .proc-specs { grid-template-columns: 1fr; } .proc-spec { border-left: none; border-top: 1px solid rgba(241, 236, 228, 0.15); padding-left: 0; padding-block: 1rem; } .proc-spec:first-child { border-top: none; } .proc-hero__img { aspect-ratio: 4 / 3; } /* ── Durabilidade */ .proc-durabilidade { padding-block: 3.75rem; } .proc-durabilidade__quote { font-size: clamp(1.75rem, 8vw, 3rem); } .proc-durabilidade__grid { grid-template-columns: 1fr; gap: 2rem; } /* ── Tópicos */ .proc-topicos { padding-block: 3.75rem; } .proc-topicos__title { font-size: clamp(2rem, 10vw, 3.5rem); } .proc-topicos__grid { grid-template-columns: 1fr; } /* ── Sobre */ .proc-sobre { grid-template-columns: 1fr; gap: 2rem; padding-block: 3.75rem; } /* ── CTA */ .proc-cta__title { font-size: clamp(2rem, 10vw, 3.5rem); } /* ── Processo */ .proc-processo__title { font-size: clamp(2rem, 10vw, 3.5rem); } .proc-processo__grid { grid-template-columns: 1fr; row-gap: 2.5rem; } .proc-processo__step { padding-right: 0; padding-top: 2rem; } .proc-processo__step:not(:first-child) { border-left: none; padding-left: 0; } .proc-processo__step:not(:first-child) .proc-processo__dot { left: 0; } .proc-processo__step-title { font-size: 1.375rem; } .proc-processo__step-text { font-size: 1rem; } /* ── Bruxismo */ .proc-bruxismo { grid-template-columns: 1fr; gap: 2.5rem; padding-block: 3.75rem; margin-block: 3.75rem; } .proc-bruxismo__title { font-size: clamp(2rem, 10vw, 3.5rem); } /* ── Mockup */ .proc-mockup { grid-template-columns: 1fr; gap: 2.5rem; margin-inline: 1rem; padding-inline: 1.5rem; padding-block: 3.5rem; } .proc-mockup__title { font-size: clamp(2rem, 10vw, 3.5rem); } /* ── Naturalidade */ .proc-naturalidade { grid-template-columns: 1fr; gap: 2.5rem; margin-inline: 1rem; padding-inline: 1.5rem; padding-block: 3.5rem; } .proc-naturalidade--media-left .proc-naturalidade__right { order: 0; } .proc-naturalidade__title { font-size: clamp(2rem, 10vw, 3.5rem); } /* ── Info (acima do footer) */ .proc-info { margin-inline: 1rem; margin-block: 3.75rem; } .proc-info__grid { grid-template-columns: 1fr; } .proc-info__item { padding-block: 1.75rem; padding-right: 0; } .proc-info__item + .proc-info__item { padding-left: 0; border-left: none; border-top: 1px solid rgba(30, 58, 43, 0.15); } /* ── Blog */ .blog-hero__title { font-size: clamp(2.75rem, 13vw, 5rem); } .blog-content { padding-block: 3.75rem; } .blog-featured { grid-template-columns: 1fr; gap: 2rem; margin-bottom: 3.75rem; } .blog-featured__title { font-size: clamp(2rem, 9vw, 3.5rem); } .blog-grid { grid-template-columns: 1fr; gap: 3rem; } /* ── Blog single */ .bpost-hero__title { font-size: clamp(2rem, 9vw, 3.5rem); } .bpost-hero__meta { flex-direction: column; align-items: flex-start; gap: 0.75rem; } .bpost-content { padding-block: 3.75rem; } .bpost-body h2 { font-size: clamp(1.75rem, 7vw, 2.25rem); } .bpost-body h3 { font-size: clamp(1.375rem, 5vw, 1.625rem); } .bpost-author__row { flex-direction: column; gap: 1.25rem; } } /* ══ EMPRESA ════════════════════════════════════════════ */ /* ── Hero */ .emp-hero { padding-inline: var(--layout-padding); } .emp-hero .site-nav__left > a, .emp-hero .site-nav__right a:not(.btn-nav), .emp-hero .nav-proc__trigger { color: var(--clr-dark); } .emp-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 2.5rem; border-top: 1px solid rgba(30, 58, 43, 0.15); border-bottom: 1px solid rgba(30, 58, 43, 0.15); padding-block: 1rem; } .emp-grid__cell { height: 12rem; border-right: 1px solid rgba(30, 58, 43, 0.15); } .emp-grid__cell:last-child { border-right: none; } /* ── Título */ .emp-title { font-family: Georgia, serif; font-size: 11.25rem; font-weight: 400; text-transform: uppercase; color: var(--clr-accent); line-height: 1.2; padding-inline: var(--layout-padding); border-bottom: 1px solid rgba(30, 58, 43, 0.15); } /* ── Stories */ .emp-story { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; padding-inline: var(--layout-padding); /* margin-top: 7.5rem; */ padding-block: 7.5rem; } .emp-story--alt { background-color: #e4ddd2; } .emp-story--media-left .emp-story__media { order: -1; } .emp-story__media { background-color: rgba(30, 58, 43, 0.07); margin: 0; min-height: 36rem; } .emp-story__media--video { min-height: unset; background-color: transparent; align-self: center; } .emp-story__video-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background-color: rgba(0, 0, 0, 0.2); } #emp-yt-player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; pointer-events: none; } .emp-story__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: transparent; cursor: pointer; opacity: 1; transition: opacity 0.25s ease; } .emp-story__play.is-playing { opacity: 0; } .emp-story__video-wrap:hover .emp-story__play.is-playing { opacity: 1; } .emp-story__play-ring { width: 3.25rem; height: 3.25rem; border-radius: 50%; border: 1.5px solid #fff; display: flex; align-items: center; justify-content: center; transition: background-color var(--transition); } .emp-story__play:hover .emp-story__play-ring { background-color: rgba(255, 255, 255, 0.15); } .emp-story__play.is-playing .icon-play { display: none; } .emp-story__play.is-playing .icon-pause { display: block; } .emp-story__body { display: flex; flex-direction: column; gap: 1.75rem; } .emp-story__body .proc-breadcrumb { color: rgba(30, 58, 43, 0.5); } .emp-story__body .proc-breadcrumb a { color: var(--clr-accent); } .emp-story__body .proc-breadcrumb a:hover { color: var(--clr-accent); } .emp-label { font-family: var(--ff-body); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--clr-accent); } .emp-story__quote { font-family: Georgia, serif; font-size: 4.375rem; line-height: 1.15; color: var(--clr-accent); } .emp-story__text { font-family: var(--ff-body); font-size: 1.25rem; font-weight: 400; line-height: 1.75; color: var(--clr-dark); } /* ── Grade cruzada 2×2 */ .emp-cross { display: grid; grid-template-columns: 1fr 1fr; padding-inline: var(--layout-padding); margin-top: 7.5rem; border-top: 1px solid rgba(30, 58, 43, 0.15); border-bottom: 1px solid rgba(30, 58, 43, 0.15); } .emp-cross__cell { padding: 4.5rem 3.5rem; min-height: 28rem; display: flex; flex-direction: column; } .emp-cross__cell--tl { border-right: 1px solid rgba(30, 58, 43, 0.15); border-bottom: 1px solid rgba(30, 58, 43, 0.15); } .emp-cross__cell--tr { border-bottom: 1px solid rgba(30, 58, 43, 0.15); justify-content: flex-end; align-items: flex-start; } .emp-cross__cell--bl { border-right: 1px solid rgba(30, 58, 43, 0.15); justify-content: flex-end; align-items: flex-start; } .emp-cross__text { font-size: 1.25rem; line-height: 1.75; color: var(--clr-dark); } /* ─── LARGE SCREENS (≥ 1800px) — cap mídia em blocos texto+mídia ── */ @media (min-width: 1800px) { .section-profilaxia { grid-template-columns: 1fr minmax(auto, 660px); } .proc-naturalidade { grid-template-columns: 1fr minmax(auto, 640px); } .proc-naturalidade--media-left { grid-template-columns: minmax(auto, 640px) 1fr; } .emp-story { grid-template-columns: 1fr minmax(auto, 640px); } .emp-story--media-left { grid-template-columns: minmax(auto, 640px) 1fr; } .tratamento__inner { grid-template-columns: minmax(auto, 640px) 1fr; } .proc-mockup { grid-template-columns: minmax(auto, 640px) 1fr; } .proc-bruxismo { grid-template-columns: 1fr minmax(auto, 640px); } } /* ─── BACK TO TOP (mobile, fixed) ───────────────────── */ .back-to-top { display: none; } @media (max-width: 768px) { .back-to-top { display: flex; position: fixed; bottom: 1.5rem; right: 1.25rem; width: 4rem; height: 4rem; border-radius: 50%; border: 1px solid rgba(241, 236, 228, 0.55); background: none; align-items: center; justify-content: center; z-index: 100; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; } .back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } } /* ── Mobile */ @media (max-width: 768px) { .emp-grid__cell { height: 5rem; } .emp-title { font-size: clamp(3rem, 12vw, 6rem); line-height: 1.2; } .emp-story { grid-template-columns: 1fr; gap: 0; padding-block: 3rem; } .emp-story__media { min-height: 20rem; order: -1; margin-bottom: 2rem; } .emp-story__media--video { min-height: unset; } .emp-story__quote { font-size: clamp(2rem, 8vw, 3rem); } .emp-cross { grid-template-columns: 1fr; } .emp-cross__cell--tl, .emp-cross__cell--br { display: none; } .emp-cross__cell { min-height: auto; padding: 3rem var(--layout-gutter); } .emp-cross__cell--tl, .emp-cross__cell--tr, .emp-cross__cell--bl { border-right: none; border-bottom: 1px solid rgba(30, 58, 43, 0.15); } .emp-cross__cell--bl { border-bottom: none; } }