/* ================================================================
   DR. RAFAEL AGRA — MASTER STYLESHEET (CLEAN — zero duplicates)
   www.drrafaelagra.com.br/novo/
   ================================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --olive: #757752; --olive-dark: #5a5a3e;
  --gray: #D9D9D9; --gray-light: #f9f9f7; --gray-mid: #dadada;
  --white: #ffffff; --text-dark: #2a2a2a; --text-mid: #555550; --text-light: #888880;
  --font: "Poppins", sans-serif;
}
html { scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--text-dark); background: var(--white); overflow-x: hidden; }

/* NAVBAR */
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 12px 60px; display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,0.97); box-shadow: 0 2px 20px rgba(117,119,82,0.10); }
.navbar__logo img { height: 68px; }
.navbar__menu { display: flex; list-style: none; gap: 32px; }
.navbar__menu a { text-decoration: none; font-size: 11px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--olive); position: relative; transition: color 0.3s; }
.navbar__menu a::after { content: ""; position: absolute; bottom: -3px; left: 0; right: 0; height: 1px; background: var(--olive); transform: scaleX(0); transition: transform 0.3s; }
.navbar__menu a:hover::after, .navbar__menu a.active::after { transform: scaleX(1); }
.navbar__menu a.active { font-weight: 500; }
.navbar__cta { background: var(--olive) !important; color: var(--white) !important; padding: 10px 22px; border-radius: 2px; font-size: 10px !important; transition: background 0.3s !important; text-align: center}
.navbar__cta::after { display: none !important; }
.navbar__cta:hover { background: var(--olive-dark) !important; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; }
.nav-toggle span { width: 24px; height: 2px; background: var(--olive); transition: all 0.3s; }

/* BUTTONS */
.btn-primary { display: inline-flex; align-items: center; gap: 12px; background: var(--olive); color: var(--white); padding: 16px 40px; font-size: 11px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; font-family: var(--font); transition: background 0.3s, transform 0.2s; }
.btn-primary:hover { background: var(--olive-dark); transform: translateY(-2px); }
.btn-primary svg { width: 16px; height: 16px; stroke: white; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s; }
.btn-primary:hover svg { transform: translateX(3px); }
.btn-outline { display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--olive); color: var(--olive); background: transparent; padding: 15px 36px; font-size: 11px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; font-family: var(--font); transition: all 0.3s; }
.btn-outline:hover { background: var(--olive); color: var(--white); }

/* SHARED TYPOGRAPHY */
.eyebrow { font-size: 10px; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(117,119,82,0.6); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.eyebrow.center { justify-content: center; }
.eyebrow.center::before { display: none; }
.section-eyebrow { font-size: 10px; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; color: var(--olive); margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
.section-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--olive); }
.section-title { font-size: clamp(32px, 4.5vw, 60px); font-weight: 300; color: var(--olive); text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.95; margin-bottom: 24px; }
.divider { width: 80px; height: 2px; background: var(--olive); margin-bottom: 32px; }
.divider.sm { width: 56px; }
.divider.center { margin-left: auto; margin-right: auto; }
.divider.white { background: rgba(255,255,255,0.5); }
.body-text { font-size: 15px; font-weight: 300; color: var(--text-mid); line-height: 1.85; margin-bottom: 16px; }
.highlight, .hl { color: var(--olive); font-weight: 400; }
.text-olive { font-weight: 400; color: var(--olive); }
.text-tag { font-size: 11px; font-weight: 300; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-light); }
.text-sm-light { font-size: 13px; color: var(--text-mid); font-weight: 300; line-height: 1.8; max-width: 500px; }

/* FADE + UTILITIES */
.fade-up { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-15 { transition-delay: 0.15s; }
.card-img-link { display: block; height: 100%; }
.img-pos-30 { object-position: center 30%; }
.bg-white { background: var(--white); }

/* ================================================================
   HEROES
   ================================================================ */

/* HOMEPAGE HERO */
.hero { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: var(--gray-light); position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(117,119,82,0.06) 0%, transparent 60%); pointer-events: none; }
.hero__content { padding: 140px 60px 80px 80px; position: relative; z-index: 2; }
.hero__eyebrow { font-size: 10px; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; color: var(--olive); margin-bottom: 24px; display: flex; align-items: center; gap: 12px; }
.hero__eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--olive); }
.hero__title { font-size: clamp(44px, 6.5vw, 86px); font-weight: 300; line-height: 1.0; color: var(--olive); letter-spacing: -0.01em; margin-bottom: 28px; }
.hero__subtitle { font-size: 13px; font-weight: 300; line-height: 1.85; color: var(--text-mid); max-width: 400px; margin-bottom: 44px; }
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero__image { position: relative; height: 100vh; overflow: hidden; }
.hero__image img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.hero__image::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 120px; background: linear-gradient(to right, var(--gray-light), transparent); }

/* TECH PAGES HERO — override homepage hero when __inner is present */
.hero__inner { max-width: 860px; margin: 0 auto; padding: 148px 40px 80px; text-align: center; display: block; }
/* :has() selector for modern browsers */
section.hero:has(> div.hero__inner) { display: block; min-height: unset; background: var(--white); border-bottom: 1px solid var(--gray-mid); }
section.hero:has(> div.hero__inner)::before { display: none; }

.hero__tag { font-size: 10px; font-weight: 300; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(117,119,82,0.55); margin-bottom: 20px; }
.hero__tag span { background: rgba(117,119,82,0.08); padding: 4px 16px; border-radius: 20px; }
.hero__inner .hero__title { font-size: clamp(28px, 4.5vw, 54px); text-transform: uppercase; line-height: 1.0; margin-bottom: 16px; }
.hero__divider { width: 60px; height: 1px; background: rgba(117,119,82,0.3); margin: 16px auto 20px; }
.hero__sub { font-size: 15px; font-weight: 300; color: var(--text-mid); line-height: 1.7; max-width: 580px; margin: 0 auto; }

/* OLIVE HERO — procedure pages */
.hero-page { background: var(--olive); padding: 148px 80px 80px; min-height: 300px; display: flex; align-items: flex-end; }
.hero-page__inner { max-width: 1200px; margin: 0 auto; width: 100%; }
.hero-page__eyebrow { font-size: 10px; font-weight: 300; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 20px; }
.hero-page__title { font-size: clamp(40px, 6vw, 78px); font-weight: 300; text-transform: uppercase; color: var(--white); letter-spacing: -0.02em; line-height: 0.9; margin-bottom: 20px; }
.hero-page__divider { width: 80px; height: 1px; background: rgba(255,255,255,0.35); margin-bottom: 20px; }
.hero-page__sub { font-size: 16px; font-weight: 300; color: rgba(255,255,255,0.88); line-height: 1.6; margin-bottom: 8px; }
.hero-page__crm { font-size: 11px; font-weight: 300; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.5); }

/* LIGHT HERO — tecnicas-avancadas */
.page-hero-light { background: linear-gradient(to bottom, rgba(218,218,218,0.18), var(--white)); padding: 148px 40px 80px; text-align: center; }
.page-hero-light__inner { max-width: 860px; margin: 0 auto; }
.page-hero-light__title { font-size: clamp(26px, 3.5vw, 46px); font-weight: 300; color: var(--olive); line-height: 1.15; margin-bottom: 16px; }
.page-hero-light__sub { font-size: 16px; font-weight: 300; color: #666; line-height: 1.6; }

/* LISTING HERO — cirurgia-plastica */
.hero-listing { background: linear-gradient(to bottom, rgba(218,218,218,0.15), var(--white)); padding: 148px 40px 80px; text-align: center; }
.hero-listing__eyebrow { font-size: 10px; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(117,119,82,0.6); margin-bottom: 20px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.hero-listing__eyebrow::before, .hero-listing__eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; }
.hero-listing__title { font-size: clamp(36px, 6vw, 72px); font-weight: 300; color: var(--olive); text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.95; margin-bottom: 20px; }
.hero-listing__sub { font-size: 15px; font-weight: 300; color: #666; line-height: 1.8; max-width: 600px; margin: 0 auto; }

/* ================================================================
   HOMEPAGE SECTIONS
   ================================================================ */
.about { padding: 120px 80px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; background: var(--white); }
.about__image { position: relative; }
.about__image img { width: 100%; height: 720px; object-fit: cover; object-position: top center; border-radius: 2px; display: block; }
.about__content {}
.about__text { font-size: 13px; font-weight: 300; line-height: 1.9; color: var(--text-mid); margin-bottom: 16px; }
.about__stats { display: flex; gap: 40px; margin: 40px 0; padding: 32px 0; border-top: 1px solid var(--gray); border-bottom: 1px solid var(--gray); }
.stat { display: flex; flex-direction: column; }
.stat__number { font-size: 42px; font-weight: 300; color: var(--olive); line-height: 1; display: flex; align-items: flex-start; }
.stat__number sup { font-size: 18px; margin-top: 6px; }
.stat__label { font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-light); margin-top: 4px; }

.procedures { padding: 80px 0 100px; background: var(--white); }
.procedures__inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.procedures__header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 60px; }
.procedures__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
.procedure-card { background: var(--white); }
.procedure-card__image { position: relative; overflow: hidden; aspect-ratio: 3/4; margin-bottom: 20px; }
.procedure-card__image a { display: block; height: 100%; }
.procedure-card__image img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.92) saturate(0.85); transition: transform 0.6s ease, filter 0.4s ease; }
.procedure-card:hover .procedure-card__image img { transform: scale(1.04); filter: brightness(0.88) saturate(0.8); }
.procedure-card__body { padding: 0 4px; }
.procedure-card__title { font-size: 17px; font-weight: 300; color: var(--text-dark); line-height: 1.3; margin-bottom: 10px; }
.procedure-card__desc { font-size: 12.5px; color: var(--text-mid); font-weight: 300; line-height: 1.75; margin-bottom: 18px; }
.procedure-card__link { display: inline-flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--olive); text-decoration: none; transition: gap 0.3s; }
.procedure-card__link::after { content: ""; display: block; width: 28px; height: 1px; background: var(--olive); transition: width 0.3s; }
.procedure-card:hover .procedure-card__link { gap: 14px; }
.procedure-card:hover .procedure-card__link::after { width: 36px; }

.testimonials { padding: 100px 80px; background: var(--white); }
.testimonials__inner { max-width: 900px; margin: 0 auto; }
.testimonials__header { margin-bottom: 56px; text-align: center; }
.testimonials__header .section-eyebrow { justify-content: center; }
.testimonials__header .section-eyebrow::before { display: none; }
.testimonials__header .text-sm-light { text-align: center; margin: 0 auto; }
.testimonials__slider { position: relative; overflow: hidden; }
.testimonials__track { display: flex; transition: transform 0.5s ease; }
.testimonial-card {
  min-width: 100%; padding: 48px 60px;
  background: var(--gray-light);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.testimonial-card__stars { color: var(--olive); font-size: 14px; letter-spacing: 6px; margin-bottom: 28px; }
.testimonial-card__text {
  font-size: clamp(15px, 1.6vw, 18px); font-weight: 300; font-style: italic;
  line-height: 1.85; color: var(--text-dark); margin-bottom: 28px;
  max-width: 700px; position: relative;
}
.testimonial-card__text::before {
  content: "\201C"; position: absolute; top: -20px; left: -24px;
  font-size: 80px; color: rgba(117,119,82,0.12); font-style: normal;
  line-height: 1; font-family: Georgia, serif;
}
.testimonial-card__author {
  font-size: 10px; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--olive);
}
.testimonials__nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 32px; }
.testimonials__btn { width: 40px; height: 40px; border: 1px solid var(--olive); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--olive); font-size: 16px; transition: all 0.3s; border-radius: 50%; }
.testimonials__btn:hover { background: var(--olive); color: var(--white); }
.testimonials__dots { display: flex; gap: 10px; }
.testimonials__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gray); cursor: pointer; transition: background 0.3s; }
.testimonials__dot.active { background: var(--olive); }

.faq { padding: 100px 80px; background: var(--olive); }
.faq__inner { max-width: 900px; margin: 0 auto; }
.faq__header { margin-bottom: 48px; text-align: center; }
.faq__header .section-eyebrow { color: rgba(217,217,217,0.7); justify-content: center; }
.faq__header .section-eyebrow::before { display: none; }
.faq__header .section-title { color: var(--white); }
.faq__list { display: flex; flex-direction: column; }
.faq__item { border-top: 1px solid rgba(217,217,217,0.2); }
.faq__item:last-child { border-bottom: 1px solid rgba(217,217,217,0.2); }
.faq__question { width: 100%; background: none; border: none; padding: 20px 0; display: flex; align-items: center; gap: 16px; cursor: pointer; font-family: var(--font); font-size: 14px; font-weight: 400; color: var(--white); text-align: left; transition: color 0.3s; }
.faq__question:hover { color: var(--gray); }
.faq__num { font-size: 44px; font-weight: 300; color: rgba(255,255,255,0.08); line-height: 1; min-width: 52px; flex-shrink: 0; }
.faq__icon { width: 20px; height: 20px; border: 1px solid rgba(255,255,255,0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; margin-left: auto; transition: transform 0.3s, background 0.3s; }
.faq__item.open .faq__icon { transform: rotate(45deg); background: rgba(255,255,255,0.15); }
.faq__answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq__answer p { font-size: 13px; font-weight: 300; color: rgba(255,255,255,0.75); line-height: 1.8; padding: 0 0 20px 68px; }

/* CTA SECTION */
.cta-section { background: var(--gray-light); display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; overflow: hidden; }
.cta-section__content { padding: 100px 80px; display: flex; flex-direction: column; justify-content: center; }
.cta-eyebrow { font-size: 10px; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(117,119,82,0.6); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
.cta-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.cta-section__title { font-size: clamp(36px, 4.5vw, 58px); font-weight: 300; color: var(--text-dark); text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.95; margin-bottom: 20px; }
.cta-divider { width: 56px; height: 2px; background: var(--olive); margin-bottom: 28px; }
.cta-section__text { font-size: 14px; font-weight: 300; color: var(--text-mid); line-height: 1.9; margin-bottom: 40px; max-width: 400px; }
.cta-section__btns { display: flex; gap: 14px; flex-wrap: wrap; }
.cta-section__image { overflow: hidden; }
.cta-section__image img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.7s; }
.cta-section:hover .cta-section__image img { transform: scale(1.03); }

/* FOOTER */
footer { background: var(--olive-dark); padding: 64px 80px 32px; color: rgba(255,255,255,0.85); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 60px; margin-bottom: 60px; }
.footer__logo img { height: 44px; margin-bottom: 20px; filter: brightness(10); opacity: 0.85; }
.footer__tagline { font-size: 12px; font-weight: 300; line-height: 1.8; color: rgba(255,255,255,0.6); }
.footer__heading { font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 20px; }
.footer__links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer__links a { text-decoration: none; font-size: 12px; font-weight: 300; color: rgba(255,255,255,0.75); transition: color 0.3s; }
.footer__links a:hover { color: var(--white); }
.footer__contact { font-size: 12px; font-weight: 300; color: rgba(255,255,255,0.7); line-height: 1.9; }
.footer__contact a { color: rgba(255,255,255,0.8); text-decoration: none; }
.footer__contact a:hover { color: var(--white); }
.footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.12); color: white; text-decoration: none; margin-top: 20px; transition: background 0.3s; }
.footer__social a:hover { background: rgba(255,255,255,0.22); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; }
.footer__copy { font-size: 11px; color: rgba(255,255,255,0.4); }
.footer__credit { font-size: 10px; color: rgba(255,255,255,0.35); text-decoration: none; letter-spacing: 0.08em; transition: color 0.3s; }
.footer__credit:hover { color: rgba(255,255,255,0.65); }

/* WHATSAPP FLOAT */
.whatsapp-float { position: fixed; bottom: 32px; right: 32px; z-index: 999; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.wa-btn { display: flex; align-items: center; gap: 10px; background: #1a8c45; color: white; text-decoration: none; padding: 0 16px 0 12px; height: 48px; border-radius: 4px; font-family: var(--font); transition: transform 0.25s, background 0.2s; }
.wa-btn:hover { background: #157a3b; transform: translateY(-2px); }
.wa-btn__icon { width: 20px; height: 20px; fill: white; flex-shrink: 0; }
.wa-btn__city { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: white; display: block; line-height: 1.2; }
.wa-btn__phone { font-size: 10px; font-weight: 300; color: rgba(255,255,255,0.82); display: block; }

/* FAQ ACCORDION generic */
.faq-section { padding: 80px 0; background: var(--gray-light); }
.faq-section__inner { max-width: 960px; margin: 0 auto; padding: 0 40px; }
.faq-header { margin-bottom: 40px; }
.faq-item { border: 2px solid var(--gray-mid); margin-bottom: 12px; overflow: hidden; }
.faq-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 22px 28px; background: none; border: none; cursor: pointer; text-align: left; font-family: var(--font); transition: background 0.3s; }
.faq-btn:hover { background: rgba(218,218,218,0.12); }
.faq-question { font-size: 14px; font-weight: 300; color: var(--olive); line-height: 1.5; padding-right: 20px; }
.faq-chevron { flex-shrink: 0; width: 22px; height: 22px; stroke: var(--olive); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.35s; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-answer p { padding: 0 28px 24px; font-size: 13px; font-weight: 300; color: #666; line-height: 1.85; }

/* TECNOLOGIAS CARDS */
.cards-section { padding: 80px 0; background: var(--white); }
.cards-section__inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tech-card { position: relative; background: var(--gray-light); padding: 44px; border-left: 2px solid var(--olive); transition: all 0.4s; overflow: hidden; }
.tech-card:hover { background: var(--white); box-shadow: 0 12px 40px rgba(0,0,0,0.08); border-left-width: 4px; }
.tech-card__num { position: absolute; top: 28px; right: 28px; font-size: 64px; font-weight: 300; color: rgba(117,119,82,0.05); line-height: 1; }
.tech-card__name { font-size: 20px; font-weight: 300; text-transform: uppercase; letter-spacing: 0.12em; color: var(--olive); margin-bottom: 12px; position: relative; z-index: 1; }
.tech-card__title { font-size: 22px; font-weight: 300; color: var(--olive); margin-bottom: 8px; position: relative; z-index: 1; }
.tech-card__subtitle { font-size: 12px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-light); margin-bottom: 16px; }
.tech-card__divider { width: 40px; height: 1px; background: var(--olive); margin-bottom: 16px; }
.tech-card__desc { font-size: 13px; font-weight: 300; color: #666; line-height: 1.7; position: relative; z-index: 1; }
.tech-card__btn { display: inline-flex; align-items: center; font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--olive); text-decoration: none; margin-top: 20px; }
.tech-card__btn::after { content: ""; display: inline-block; width: 24px; height: 1px; background: var(--olive); margin-left: 10px; transition: width 0.3s; vertical-align: middle; }
.tech-card__btn:hover::after { width: 36px; }

/* TECH DETAIL CONTENT */
.content-section { padding: 80px 0; background: var(--white); }
.content-inner { max-width: 960px; margin: 0 auto; padding: 0 40px; }
.section-h { font-size: clamp(24px, 3.5vw, 38px); font-weight: 300; color: var(--olive); text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.95; margin-bottom: 16px; }
.sub-h { font-size: 14px; font-weight: 400; color: var(--olive); letter-spacing: 0.06em; margin-bottom: 14px; margin-top: 28px; }
.divider-sm { width: 48px; height: 2px; background: var(--olive); margin-bottom: 24px; }
.content-section p { font-size: 14px; font-weight: 300; color: var(--text-mid); line-height: 1.9; margin-bottom: 16px; }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 24px; }
.check-item { display: flex; align-items: flex-start; gap: 10px; }
.check-icon { flex-shrink: 0; width: 18px; height: 18px; stroke: var(--olive); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.check-label { font-size: 13px; font-weight: 300; color: var(--text-mid); line-height: 1.6; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.benefit-card { background: var(--gray-light); padding: 20px 24px; border-left: 2px solid var(--olive); font-size: 13px; font-weight: 300; color: var(--text-mid); }
.benefit-list { display: flex; flex-direction: column; gap: 10px; }
.benefit-list-item { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; font-weight: 300; color: var(--text-mid); line-height: 1.7; }
.box-light { background: var(--gray-light); padding: 32px; border-left: 4px solid var(--olive); margin-top: 24px; font-size: 14px; font-weight: 300; color: var(--text-mid); line-height: 1.85; }
.antes-depois { background: var(--gray-light); padding: 28px; border: 1px solid var(--gray-mid); margin-top: 20px; font-size: 13px; font-weight: 300; color: var(--text-mid); line-height: 1.85; }
.security-box { background: var(--white); border: 1px solid var(--gray-mid); padding: 28px; margin-top: 24px; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 32px; }
.step-card { background: var(--white); padding: 28px; border-top: 3px solid var(--olive); }
.step-num { font-size: 36px; font-weight: 300; color: rgba(117,119,82,0.15); line-height: 1; margin-bottom: 12px; }
.conclusion { padding: 80px; background: var(--olive); text-align: center; }
.conclusion__inner { max-width: 720px; margin: 0 auto; }
.conclusion__inner .section-title { color: var(--white); font-size: clamp(28px, 4vw, 48px); }
.conclusion__divider { width: 48px; height: 1px; background: rgba(255,255,255,0.4); margin: 20px auto; }
.conclusion__btn { display: inline-flex; align-items: center; gap: 12px; background: var(--white); color: var(--olive); padding: 16px 36px; font-size: 11px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; margin-top: 32px; transition: background 0.3s; }
.conclusion__btn:hover { background: var(--gray-light); }

/* CIRURGIÃO PLÁSTICO */
.expertise { padding: 100px 80px; background: var(--gray-light); }
.expertise__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.expertise__image { position: relative; }
.expertise__image img { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top; transition: transform 0.7s ease; }
.expertise__image:hover img { transform: scale(1.03); }
.expertise__image-wrap { overflow: hidden; position: relative; }
.expertise__image-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(117,119,82,0.18), transparent); }
.expertise__deco-tl { position: absolute; top: -24px; left: -24px; width: 100px; height: 100px; border-top: 1px solid rgba(117,119,82,0.2); border-left: 1px solid rgba(117,119,82,0.2); }
.expertise__deco-br { position: absolute; bottom: -24px; right: -24px; width: 100px; height: 100px; border-bottom: 1px solid rgba(117,119,82,0.2); border-right: 1px solid rgba(117,119,82,0.2); }
.timeline-section { padding: 100px 80px; background: var(--white); }
.timeline-section__inner { max-width: 900px; margin: 0 auto; }
.timeline-header { text-align: center; margin-bottom: 80px; }
.timeline-header .eyebrow { justify-content: center; }
.timeline-header .eyebrow::before { display: none; }
.timeline-list { position: relative; }
.timeline-list::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(117,119,82,0.2); transform: translateX(-50%); }
.timeline-item { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 56px; position: relative; }
.timeline-item__dot { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--olive); border: 3px solid var(--white); box-shadow: 0 0 0 1px rgba(117,119,82,0.3); z-index: 1; }
.timeline-item__left { padding-right: 48px; text-align: right; }
.timeline-item__right { padding-left: 48px; text-align: left; }
.timeline-item:nth-child(even) .timeline-item__left { order: 2; padding-right: 0; padding-left: 48px; text-align: left; }
.timeline-item:nth-child(even) .timeline-item__right { order: 1; padding-left: 0; padding-right: 48px; text-align: right; }
.timeline-item__year { font-size: 28px; font-weight: 300; color: var(--olive); line-height: 1; margin-bottom: 6px; }
.timeline-item__event { font-size: 15px; font-weight: 300; color: var(--text-dark); margin-bottom: 4px; }
.timeline-item__institution { font-size: 11px; font-weight: 300; color: var(--text-light); letter-spacing: 0.06em; }
.values-section { padding: 100px 80px; background: var(--gray-mid); }
.values-section__inner { max-width: 1200px; margin: 0 auto; }
.values-section__intro { margin-bottom: 60px; max-width: 760px; }
.values-section__desc { font-size: 16px; font-weight: 300; color: #555; line-height: 1.8; }
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.value-card { background: var(--white); padding: 36px 28px; transition: box-shadow 0.4s, transform 0.3s; }
.value-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.1); transform: translateY(-3px); }
.value-card__icon { width: 44px; height: 44px; margin-bottom: 20px; }
.value-card__icon svg { width: 100%; height: 100%; stroke: var(--olive); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.value-card__title { font-size: 13px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.15em; color: var(--olive); margin-bottom: 12px; }
.value-card__desc { font-size: 13px; font-weight: 300; color: #666; line-height: 1.7; }
.tech-section { padding: 100px 80px; background: var(--white); }
.tech-section__inner { max-width: 1200px; margin: 0 auto; }
.tech-section__intro { margin-bottom: 60px; max-width: 760px; }
.tech-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.specialties-section { padding: 100px 80px; background: var(--gray-light); }
.specialties-section__inner { max-width: 1200px; margin: 0 auto; }
.specialties-section__intro { margin-bottom: 60px; }
.specialties-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.specialty-card { background: var(--white); padding: 20px 24px; display: flex; align-items: center; gap: 14px; transition: background 0.4s; cursor: default; }
.specialty-card:hover { background: var(--olive); }
.specialty-card:hover .specialty-card__icon { stroke: white; }
.specialty-card:hover .specialty-card__name { color: white; }
.specialty-card__icon { width: 18px; height: 18px; flex-shrink: 0; stroke: var(--olive); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.4s; }
.specialty-card__name { font-size: 13px; font-weight: 300; color: #555; letter-spacing: 0.04em; transition: color 0.4s; }
.specialty-full { grid-column: 1 / -1; max-width: calc(33.333% - 8px); }
.clinic-section { padding: 100px 80px; background: var(--white); }
.clinic-section__inner { max-width: 1200px; margin: 0 auto; }
.clinic-section__text { max-width: 820px; margin-bottom: 60px; }
.clinic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.clinic-card { background: var(--gray-light); padding: 44px; border-left: 2px solid var(--olive); transition: all 0.4s; }
.clinic-card:hover { background: var(--white); box-shadow: 0 12px 40px rgba(0,0,0,0.08); border-left-width: 4px; }
.clinic-card__icon { width: 44px; height: 44px; margin-bottom: 20px; transition: transform 0.3s; }
.clinic-card:hover .clinic-card__icon { transform: scale(1.1); }
.clinic-card__icon svg { width: 100%; height: 100%; stroke: var(--olive); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.clinic-card__title { font-size: 13px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.15em; color: var(--olive); margin-bottom: 12px; }
.clinic-card__desc { font-size: 13px; font-weight: 300; color: #666; line-height: 1.7; }

/* PROCEDURE DETAIL */
.content-wrap { max-width: 1000px; margin: 0 auto; padding: 80px 40px; }
.section-block { margin-bottom: 80px; }
.section-block__title { font-size: clamp(26px, 4vw, 44px); font-weight: 300; color: var(--olive); text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.95; margin-bottom: 20px; }
.section-block__divider { width: 56px; height: 2px; background: var(--olive); margin-bottom: 28px; }
.section-block p { font-size: 15px; font-weight: 300; color: var(--text-mid); line-height: 1.9; margin-bottom: 16px; }
.section-block p strong { font-weight: 400; color: var(--olive); }
.oq-grid { display: grid; grid-template-columns: 280px 1fr; gap: 56px; align-items: start; }
.oq-grid__image { position: relative; }
.oq-grid__image-wrap { overflow: hidden; aspect-ratio: 3/4; }
.oq-grid__image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s; }
.oq-grid__image:hover .oq-grid__image-wrap img { transform: scale(1.04); }
.oq-grid__image::after { content: ""; position: absolute; bottom: -12px; right: -12px; width: 60px; height: 60px; border-bottom: 2px solid rgba(117,119,82,0.2); border-right: 2px solid rgba(117,119,82,0.2); }
.check-list { display: flex; flex-direction: column; gap: 14px; }
.check-text { font-size: 15px; font-weight: 300; color: var(--text-mid); line-height: 1.7; }
.col-card { background: var(--gray-light); padding: 36px; border-left: 4px solid var(--olive); }
.col-card h3 { font-size: 20px; font-weight: 300; color: var(--olive); margin-bottom: 16px; }
.col-card p { font-size: 13px; font-weight: 300; color: var(--text-mid); line-height: 1.85; }
.vaser-box { background: var(--gray-light); padding: 44px; border-left: 4px solid var(--olive); }
.vaser-box p { font-size: 14px; font-weight: 300; color: var(--text-mid); line-height: 1.9; }
.vaser-box p strong { color: var(--olive); font-weight: 400; }

/* TECNICAS AVANCADAS */
.feature-img { max-width: 640px; margin: 0 auto 56px; }
.feature-img__frame { border: 2px solid rgba(117,119,82,0.3); padding: 8px; background: var(--white); }
.feature-img__inner { border: 1px solid var(--gray-mid); overflow: hidden; }
.feature-img__inner img { width: 100%; display: block; transition: transform 0.7s; }
.feature-img:hover .feature-img__inner img { transform: scale(1.04); }
.intro-text { font-size: 16px; font-weight: 300; color: var(--text-mid); line-height: 1.9; margin-bottom: 60px; }
.technique { background: rgba(218,218,218,0.12); border-left: 4px solid var(--olive); padding: 40px 44px; margin-bottom: 28px; }
.technique__title { font-size: clamp(20px, 3vw, 28px); font-weight: 300; color: var(--olive); margin-bottom: 16px; }
.technique__desc { font-size: 14px; font-weight: 300; color: var(--text-mid); line-height: 1.9; margin-bottom: 24px; }
.technique__subtitle { font-size: 14px; font-weight: 400; color: var(--olive); letter-spacing: 0.06em; margin-bottom: 14px; }
.technique__list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.technique__item { display: flex; align-items: flex-start; gap: 14px; }
.technique__bullet { color: var(--olive); font-size: 20px; line-height: 1; flex-shrink: 0; margin-top: -1px; }
.technique__item-text { font-size: 13px; font-weight: 300; color: var(--text-mid); line-height: 1.8; }
.technique__item-text strong { color: var(--olive); font-weight: 400; }
.considerations { background: var(--white); border: 1px solid rgba(117,119,82,0.2); padding: 44px; }
.considerations__title { font-size: clamp(20px, 3vw, 28px); font-weight: 300; color: var(--olive); margin-bottom: 24px; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
  .navbar { padding: 12px 32px; }
  .hero { grid-template-columns: 1fr; }
  .hero__content { padding: 40px 28px 40px; order: 2; }
  .hero__image { height: 105vw; max-height: 520px; min-height: 380px; order: 1; margin-top: 92px; }
  .hero__image img { object-fit: cover; object-position: center 8%; width: 100%; height: 100%; }
  .hero__image::after { display: none; }
  .hero__inner { padding: 120px 32px 60px; }
  .about { grid-template-columns: 1fr; padding: 80px 32px; gap: 48px; }
  .about__image img { height: 520px; object-position: top center; }
  .procedures { padding: 60px 0 80px; }
  .procedures__inner { padding: 0 24px; }
  .procedures__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .testimonials { padding: 80px 32px; }
  .testimonial-card { padding: 36px 32px; }
  .faq { padding: 80px 32px; }
  .cta-section { grid-template-columns: 1fr; }
  .cta-section__content { padding: 80px 48px; }
  .cta-section__image { height: 75vw; max-height: 500px; }
  .cta-section__image img { object-position: top center; }
  footer { padding: 60px 32px 32px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .hero-page { padding: 120px 32px 64px; }
  .page-hero-light { padding: 120px 24px 60px; }
  .hero-listing { padding: 120px 24px 60px; }
  .expertise { padding: 80px 32px; }
  .expertise__inner { grid-template-columns: 1fr; gap: 48px; }
  .timeline-section { padding: 80px 32px; }
  .values-section { padding: 80px 32px; }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .tech-section { padding: 80px 32px; }
  .specialties-section { padding: 80px 32px; }
  .specialties-grid { grid-template-columns: 1fr 1fr; }
  .clinic-section { padding: 80px 32px; }
  .cards-grid { grid-template-columns: 1fr 1fr; }
  .benefit-grid { grid-template-columns: 1fr 1fr; }
  .steps-grid { grid-template-columns: 1fr 1fr; }
  .oq-grid { grid-template-columns: 1fr; }
  .oq-grid__image { max-width: 300px; }
  .content-wrap { padding: 60px 32px; }
  .conclusion { padding: 60px 32px; }
}
@media (max-width: 768px) {
  .navbar__menu { display: none; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; width: 280px; background: var(--white); padding: 80px 32px 32px; gap: 0; box-shadow: -4px 0 30px rgba(0,0,0,0.1); transition: transform 0.4s; transform: translateX(100%); }
  .navbar__menu.open { display: flex; transform: translateX(0); }
  .navbar__menu li { border-bottom: 1px solid rgba(117,119,82,0.1); }
  .navbar__menu a { display: block; padding: 14px 0; }
  .nav-toggle { display: flex; }
  .procedures__grid { grid-template-columns: 1fr; gap: 48px; }
  .procedures__header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .about__stats { gap: 24px; flex-wrap: wrap; }
  .faq { padding: 60px 24px; }
  .faq__answer p { padding-left: 0; }
  .testimonial-card { padding: 32px 24px; }
  .testimonial-card__text::before { display: none; }
  .values-grid { grid-template-columns: 1fr; }
  .tech-grid { grid-template-columns: 1fr; }
  .specialties-grid { grid-template-columns: 1fr; }
  .clinic-grid { grid-template-columns: 1fr; }
  .check-grid { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .benefit-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .cards-grid { grid-template-columns: 1fr; }
  .timeline-list::before { left: 16px; }
  .timeline-item { grid-template-columns: 1fr; padding-left: 48px; }
  .timeline-item__dot { left: 16px; }
  .timeline-item__left, .timeline-item__right { text-align: left; padding: 0; }
  .timeline-item:nth-child(even) .timeline-item__left { order: unset; text-align: left; padding: 0; }
  .timeline-item:nth-child(even) .timeline-item__right { order: unset; text-align: left; padding: 0; }
  .timeline-item__right { display: none; }
  .technique { padding: 28px 20px; }
  .considerations { padding: 28px 20px; }
  .col-card { padding: 24px; }
  .vaser-box { padding: 28px 24px; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer__bottom { flex-direction: column; gap: 12px; text-align: center; }
  .whatsapp-float { bottom: 20px; right: 16px; }
  .conclusion { padding: 48px 24px; }
  .hero__inner { padding: 100px 24px 48px; }
}



/* ── MISSING: footer utility classes (from inline style migration) ── */
.footer__logo { margin-bottom: 4px; }
.footer-social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.12); color: white;
  text-decoration: none; margin-top: 20px; transition: background 0.3s;
}
.footer-social-icon:hover { background: rgba(255,255,255,0.22); }
.footer-contact-link {
  color: rgba(255,255,255,0.8); text-decoration: none;
  font-size: 12px; font-weight: 300; line-height: 1.9;
  transition: color 0.3s;
}
.footer-contact-link:hover { color: var(--white); }
.footer-credit-link {
  font-size: 10px; color: rgba(255,255,255,0.35);
  text-decoration: none; letter-spacing: 0.08em; transition: color 0.3s;
}
.footer-credit-link:hover { color: rgba(255,255,255,0.65); }
.footer-contact-row { display: flex; gap: 8px; align-items: flex-start; }
.footer-contact-row__icon { flex-shrink: 0; margin-top: 3px; opacity: 0.6; }

/* ── footer contact address text color fix ── */
.footer-contact-row span { font-size: 12px; font-weight: 300; color: rgba(255,255,255,0.7); line-height: 1.8; }
.footer__contact p span { color: rgba(255,255,255,0.7); }
/* Ensure footer links column works when wrapped in footer__contact */
.footer__contact .footer__links a { color: rgba(255,255,255,0.75); }
.footer__contact .footer__links a:hover { color: var(--white); }

/* ── navbar__logo ── */
.navbar__logo { display: flex; align-items: center; }

/* ── footer__social (wrapper div) ── */
.footer__social { margin-top: 20px; }

/* ── body-p (tech/procedure pages body text) ── */
.body-p { font-size: 14px; font-weight: 300; color: var(--text-mid); line-height: 1.9; margin-bottom: 16px; }
.body-p strong, .body-p .hl { color: var(--olive); font-weight: 400; }

/* ================================================================
   HERO-TECH — replaces .hero on tech/detail pages (vaser, argon4, crisalix, tecnologias)
   Avoids the homepage hero full-height grid layout entirely
   ================================================================ */
.hero-tech {
  background: var(--white);
  border-bottom: 1px solid var(--gray-mid);
  padding: 0;
}
.hero-tech .hero__inner {
  max-width: 860px; margin: 0 auto;
  padding: 148px 40px 80px; text-align: center;
}
.hero-tech .hero__tag {
  font-size: 10px; font-weight: 300; letter-spacing: 0.28em;
  text-transform: uppercase; color: rgba(117,119,82,0.55);
  margin-bottom: 20px;
}
.hero-tech .hero__tag span {
  background: rgba(117,119,82,0.08); padding: 4px 16px; border-radius: 20px;
}
.hero-tech .hero__title {
  font-size: clamp(32px, 5vw, 58px); font-weight: 300;
  color: var(--olive); text-transform: uppercase;
  letter-spacing: -0.01em; line-height: 1.0; margin-bottom: 16px;
}
.hero-tech .hero__divider {
  width: 60px; height: 1px; background: rgba(117,119,82,0.3);
  margin: 16px auto 20px;
}
.hero-tech .hero__sub {
  font-size: 15px; font-weight: 300; color: var(--text-mid);
  line-height: 1.7; max-width: 580px; margin: 0 auto;
}

/* ── content-section inner elements ─────────────────── */
.sub-h { margin-top: 48px; }
.benefit-card h4 {
  font-size: 13px; font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--olive); margin-bottom: 10px;
}
.benefit-card p { font-size: 13px; font-weight: 300; color: #666; line-height: 1.7; margin: 0; }
.box-light h3 {
  font-size: 15px; font-weight: 400; color: var(--olive);
  margin-bottom: 14px; letter-spacing: 0.02em;
}
.box-light p { font-size: 13px; font-weight: 300; color: var(--text-mid); line-height: 1.85; margin: 0; }

/* ── conclusion section title white ─────────────────── */
.conclusion .section-title { color: var(--white); font-size: clamp(28px, 4vw, 48px); }
.conclusion p { font-size: 14px; font-weight: 300; color: rgba(255,255,255,0.85); line-height: 1.9; margin-bottom: 16px; }
.conclusion p:last-of-type { margin-bottom: 0; }

@media (max-width: 1024px) {
  .hero-tech .hero__inner { padding: 120px 32px 60px; }
}
@media (max-width: 768px) {
  .hero-tech .hero__inner { padding: 100px 24px 48px; }
}
.footer__tagline--mt { margin-top: 12px; }

/* ── step-card inner elements ── */
.step-card h4 {
  font-size: 13px; font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--olive); margin-bottom: 10px;
}
.step-card p {
  font-size: 13px; font-weight: 300; color: var(--text-mid);
  line-height: 1.7; margin: 0;
}

/* ── benefit-list-item inner elements ── */
.benefit-list-item svg {
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px;
  stroke: var(--olive); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.benefit-list-item > div { flex: 1; }
.benefit-list-item h4 {
  font-size: 13px; font-weight: 400; color: var(--olive);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px;
}
.benefit-list-item p {
  font-size: 13px; font-weight: 300; color: var(--text-mid);
  line-height: 1.7; margin: 0;
}

/* ── security-box inner elements ── */
.security-box h3 {
  font-size: 16px; font-weight: 400; color: var(--olive);
  margin-bottom: 14px;
}
.security-box p {
  font-size: 14px; font-weight: 300; color: var(--text-mid);
  line-height: 1.85; margin: 0;
}

/* ── 4 tecnologias: 2x2 grid ── */
.cards-grid--2col { grid-template-columns: 1fr 1fr; }
@media (max-width: 768px) {
  .cards-grid--2col { grid-template-columns: 1fr; }
}