:root {
  --navy: #061a33;
  --navy-deep: #031326;
  --navy-soft: #0b2a4f;
  --gold: #ebcb45;
  --gold-cta: #f7b916;
  --off: #f7f5f0;
  --cream: #ece7dd;
  --cream-2: #ddd4c7;
  --white: #ffffff;
  --ink: #071a30;
  --muted: #68717a;
  --line: rgba(6, 26, 51, .14);
  --line-dark: rgba(255, 255, 255, .16);
  --container: min(1200px, calc(100vw - 42px));
  --header: 82px;
  --header-compact: 66px;
}


* { box-sizing: border-box; border-radius: 0 !important; }
html { scroll-behavior: auto; overflow-x: clip; overflow-y: visible; }
body {
  margin: 0;
  font-family: Manrope, Inter, system-ui, -apple-system, Segoe UI, sans-serif;
  color: var(--ink);
  background: var(--off);
  line-height: 1.55;
  overflow-x: clip;
  overflow-y: visible;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--gold-cta); outline-offset: 4px; }
::selection { background: var(--gold); color: var(--navy-deep); }

.container { width: var(--container); margin-inline: auto; }
.section-anchor { scroll-margin-top: calc(var(--header) + 24px); }
.skip-link { position: fixed; top: 14px; left: 14px; z-index: 999; padding: 12px 16px; background: var(--gold-cta); color: var(--navy); font-weight: 900; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: .78;}
h1, h2 { font-family: Fraunces, Georgia, serif; font-weight: 700; }
h1 { font-size: clamp(3.1rem, 6.2vw, 6.5rem); color: var(--white); max-width: 650px; margin: 0 0 22px; }
h1 em { color: var(--gold-cta); font-style: italic; font-weight: 700; letter-spacing: -.06em; }
#hero-title { max-width: 780px; }
.hero-title-line { display: block; }
.hero-title-line:nth-child(2) { white-space: nowrap; }
h2 { font-size: clamp(2.1rem, 4vw, 4rem); color: inherit; margin-bottom: 18px; }
h3 { font-size: 1.1rem; font-weight: 900; letter-spacing: -.02em; }
p { color: inherit; }

.eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; color: var(--gold); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 900; }
.eyebrow::before { content: ""; width: 44px; height: 1px; background: currentColor; }
.eyebrow.dark { color: #a77e00; }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-cta); font-weight: 900; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.text-link.dark { color: #9c7600; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 15px 24px; border: 1px solid transparent; font-weight: 900; font-size: .88rem; letter-spacing: -.01em; }
.btn i { font-size: 1rem; line-height: 1; }
.btn-primary { background: var(--gold-cta); color: var(--navy-deep); border-color: var(--gold-cta); }.btn-secondary { background: rgba(3, 19, 38, .78); color: var(--white); border-color: rgba(255,255,255,.28); }.btn-header { min-height: 44px; padding: 10px 18px; color: var(--white); border-color: var(--gold-cta); background: transparent; }.btn-dark { background: var(--navy-deep); color: var(--white); border-color: var(--navy-deep); }.btn-line { color: var(--navy); border-color: rgba(3,19,38,.45); background: transparent; }
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(3, 19, 38, .9); border-bottom: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(18px); }
.header-shell { height: var(--header); width: min(1400px, calc(100vw - 48px)); margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; transition: height .22s ease, gap .22s ease; }
.brand img { width: 100px; height: auto; transition: width .22s ease; }
.btn-header { transition: min-height .22s ease, padding .22s ease, font-size .22s ease; }
.desktop-nav a { transition: font-size .22s ease; }
.site-header.is-compact .header-shell { height: var(--header-compact); gap: 22px; }
.site-header.is-compact .brand img { width: 95px; }
.site-header.is-compact .btn-header { min-height: 38px; padding: 8px 14px; font-size: .8rem; }
.site-header.is-compact .desktop-nav a { font-size: .86rem; }
.site-header.is-compact .mobile-menu { top: var(--header-compact); }
.desktop-nav { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2.4vw, 34px); }
.desktop-nav a { position: relative; color: rgba(255,255,255,.9); font-size: .92rem; font-weight: 800; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -10px; height: 2px; background: var(--gold-cta); }
.desktop-nav a.active::after { right: 0; }
.header-actions { display: inline-flex; align-items: center; gap: 18px; }
.menu-toggle { width: 42px; height: 42px; border: 0; background: transparent; display: none; place-items: center; padding: 9px; }
.menu-toggle span { display: block; width: 22px; height: 2px; background: var(--gold-cta); margin: 4px 0; }
.mobile-menu { position: fixed; top: var(--header); left: 0; right: 0; background: var(--navy-deep); border-bottom: 1px solid rgba(255,255,255,.12); }
.mobile-menu nav { width: var(--container); margin: 0 auto; display: grid; padding: 22px 0 28px; gap: 4px; }
.mobile-menu a { padding: 16px 0; color: var(--white); border-bottom: 1px solid rgba(255,255,255,.1); font-weight: 900; }
.mobile-cta { color: var(--gold-cta) !important; }

.hero { position: relative; min-height: 600px; padding-top: var(--header); overflow: hidden; background: var(--navy-deep); }
.hero::before { content: ""; position: absolute; inset: var(--header) 0 0 0; background: linear-gradient(90deg, rgba(3,19,38,.97) 0%, rgba(3,19,38,.93) 28%, rgba(3,19,38,.68) 46%, rgba(3,19,38,.20) 70%, rgba(3,19,38,.08) 100%); z-index: 2; }
.hero-visual { position: absolute; inset: var(--header) 0 0 0; z-index: 1; }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center 48%; }
.lens-arc { position: absolute; z-index: 3; border: 2px solid rgba(247,185,22,.62); pointer-events: none; }
.hero-layout { position: relative; z-index: 5; min-height: calc(650px - var(--header)); display: grid; grid-template-columns: minmax(0, 720px) 1fr; align-items: center; padding: 10px 0; }
.hero-copy { color: var(--white); }
.hero-copy > p:not(.eyebrow) { max-width: 555px; font-size: clamp(0.95rem, 1.45vw, 1.17rem); color: rgba(255,255,255,.86); margin-bottom: 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 26px; }
.google-proof { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: rgba(255,255,255,.85); font-size: .9rem; }
.google-letter { font-weight: 900; font-size: 1.55rem; color: var(--white); }
.stars, .hero-rating span, .unit-rating span { color: var(--gold-cta); letter-spacing: .08em; }
.google-proof i { width: 1px; height: 18px; background: rgba(255,255,255,.25); }
.hero-rating { align-self: end; justify-self: end; width: min(390px, 100%); margin-bottom: 100px; color: var(--white); background: rgba(3,19,38,.78); border: 1px solid rgba(255,255,255,.18); border-left: 4px solid var(--gold-cta); padding: 26px; }
.hero-rating > i { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--gold-cta); color: var(--navy); font-size: 1.35rem; margin-bottom: 14px; }
.hero-rating strong { display: block; font-size: 1rem; margin-bottom: 14px; }
.hero-rating div { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hero-rating p { margin: 0; padding-left: 16px; border-left: 1px solid rgba(255,255,255,.18); }
.hero-rating b { display: block; font-size: 1.8rem; line-height: 1; }
.hero-rating small { display: block; color: rgba(255,255,255,.75); }

.trust-strip { background: var(--off); border-bottom: 1px solid var(--line); }
.trust-grid { min-height: 86px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; }
.trust-grid div { min-height: 86px; display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-left: 1px solid var(--line); }
.trust-grid div:last-child { border-right: 1px solid var(--line); }
.trust-grid i { color: #a77e00; font-size: 1.8rem; }
.trust-grid span { font-size: .86rem; font-weight: 800; line-height: 1.25; color: var(--ink); }

.navigator-section { background: linear-gradient(90deg, var(--navy-deep), var(--navy)); color: var(--white); padding: 62px 0; }
.nav-mosaic { display: grid; grid-template-columns: minmax(250px, .32fr) 1fr; gap: 34px; align-items: stretch; }
.nav-intro { padding: 42px 0; }
.nav-intro h2 { max-width: 350px; }
.nav-intro h2 span { color: var(--gold-cta); }
.nav-intro p { color: rgba(255,255,255,.78); max-width: 300px; }

.nav-intro .nav-cta {
  margin-top: 12px;
  min-height: 48px;
  padding: 14px 18px;
  color: var(--navy-deep);
  background: var(--gold-cta);
  border: 1px solid var(--gold-cta);
  font-size: .78rem;
  letter-spacing: .08em;
  line-height: 1;
}
.nav-intro .nav-cta::before {
  content: "";
  width: 28px;
  height: 1px;
  background: rgba(3, 19, 38, .42);
}.nav-intro .nav-cta i {
  font-size: 1rem;
}

.journey-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; min-height: 290px; }
.journey { position: relative; isolation: isolate; min-height: 290px; padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); }
.journey img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(.98) contrast(1.02); }
.journey::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(3,19,38,.04) 0%, rgba(3,19,38,.38) 48%, rgba(3,19,38,.92) 100%); }
.journey span, .journey strong { color: var(--white); font-weight: 900; line-height: 1.15; }
.journey span { display: grid; gap: 10px; max-width: 150px; }
.journey i { color: var(--gold-cta); font-size: 1.85rem; }
.journey:nth-child(1) img { object-position: 54% center; }
.journey:nth-child(2) img { object-position: 32% center; }
.journey:nth-child(3) img { object-position: 52% center; }
.journey:nth-child(4) img { object-position: 56% center; }
.journey:nth-child(5) img { object-position: 50% center; }

.split-story { display: grid; grid-template-columns: minmax(320px, .43fr) minmax(0, .57fr); min-height: 540px; background: var(--off); }
.split-copy { padding: clamp(46px, 5vw, 86px) clamp(28px, 5vw, 72px); align-self: center; }
.split-copy p { color: var(--muted); max-width: 520px; }
.lens-options { display: grid; gap: 10px; margin: 30px 0 24px; max-width: 560px; }
.lens-option { display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: start; padding: 17px 18px; background: rgba(255,255,255,.72); border: 1px solid rgba(6,26,51,.12); border-left: 3px solid var(--gold-cta); }.lens-option-icon { width: 42px; height: 42px; display: grid; place-items: center; color: #9c7600; background: rgba(247,185,22,.09); border: 1px solid rgba(247,185,22,.42); }
.lens-option-icon i { font-size: 1.2rem; line-height: 1; }
.lens-option h3 { margin: 0 0 4px; font-family: Manrope, Inter, system-ui, sans-serif; font-size: .98rem; line-height: 1.18; letter-spacing: -.02em; color: var(--ink); }
.lens-option p { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.48; }
.split-cta { margin-top: 2px; border-left: 4px solid var(--gold-cta); }.split-image { position: relative; min-height: 540px; background: var(--navy); overflow: hidden; }
.split-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.kids-feature { position: relative; display: grid; grid-template-columns: .52fr .48fr; overflow: hidden; background: linear-gradient(110deg, #dba619 0 42%, var(--navy) 42% 100%); color: var(--white); }
.kids-photo { min-height: 380px; position: relative; overflow: hidden; }
.kids-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 52% center; mix-blend-mode: multiply; opacity: .98; }
.kids-copy { padding: clamp(48px, 6vw, 76px); position: relative; z-index: 2; }
.seal { display: inline-block; border: 1px solid var(--gold-cta); color: var(--gold-cta); padding: 8px 12px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; font-size: .72rem; margin-bottom: 20px; }
.kids-copy p { color: rgba(255,255,255,.82); max-width: 560px; }
.kids-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 30px 0 28px; }
.kids-points span { position: relative; min-height: 118px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 18px 18px 17px; background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)); border: 1px solid rgba(255,255,255,.14); border-top-color: rgba(247,185,22,.56); font-weight: 900; font-size: .86rem; line-height: 1.25; }
.kids-points span::before { content: ""; position: absolute; top: -1px; left: 18px; width: 38px; height: 2px; background: var(--gold-cta); }.kids-points i { width: 38px; height: 38px; display: grid; place-items: center; color: var(--gold-cta); font-size: 1.28rem; border: 1px solid rgba(247,185,22,.34); background: rgba(247,185,22,.08); }
.kids-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.kids-actions .text-link { min-height: 48px; padding: 14px 18px; border: 1px solid rgba(247,185,22,.62); color: var(--white); background: rgba(255,255,255,.035); letter-spacing: .075em; line-height: 1; }.kids-actions .whatsapp-link { order: -1; color: var(--navy-deep); background: var(--gold-cta); border-color: var(--gold-cta); }.kids-actions .text-link i { font-size: 1rem; }

.products-section { padding: 80px 0 86px; background: linear-gradient(180deg, #fbfaf6 0%, var(--off) 100%); }
.section-topline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; margin-bottom: 34px; }
.section-topline h2 { max-width: 780px; }
.section-topline p { max-width: 760px; color: var(--muted); }
.product-toolbar { display: grid; justify-items: end; gap: 14px; }
.product-main-cta { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 18px; background: var(--navy-deep); color: var(--white); border: 1px solid var(--navy-deep); border-left: 4px solid var(--gold-cta); font-size: .74rem; font-weight: 950; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }.carousel-controls { display: flex; gap: 8px; }
.carousel-controls button, .review-controls button { width: 50px; height: 50px; border: 1px solid rgba(6,26,51,.18); background: rgba(255,255,255,.45); color: var(--navy); display: grid; place-items: center; }.product-track { display: flex; gap: 18px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 2px 8px; }
.product-track::-webkit-scrollbar { display: none; }
.product-card { position: relative; flex: 0 0 calc((100% - 72px) / 5); min-width: 210px; scroll-snap-align: start; background: rgba(255,255,255,.42); border: 1px solid rgba(6,26,51,.13); }
.product-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgba(247,185,22,.42); transform: scaleX(.42); transform-origin: left; }
.product-card.is-featured { flex-basis: calc((100% - 72px) / 5 + 34px); background: #fff; border-color: rgba(247,185,22,.52); }.product-card.is-featured::before { transform: scaleX(1); background: var(--gold-cta); }
.product-media { height: 222px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(235,203,69,.16), rgba(255,255,255,.72)); border-bottom: 1px solid rgba(6,26,51,.12); overflow: hidden; position: relative; }
.product-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(247,245,240,.08), rgba(247,245,240,.36)); pointer-events: none; }
.product-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; opacity: .9; filter: saturate(.98) contrast(1.04); }.product-icon { position: absolute; left: 16px; bottom: 14px; z-index: 2; width: 42px; height: 42px; display: grid; place-items: center; background: rgba(3,19,38,.88); color: var(--gold-cta); border: 1px solid rgba(235,203,69,.42); }
.product-icon i { font-size: 1.35rem; line-height: 1; }
.product-body { padding: 24px 22px 22px; min-height: 230px; display: flex; flex-direction: column; }
.product-kicker { display: block; color: #9b7300; font-weight: 950; letter-spacing: .13em; text-transform: uppercase; font-size: .68rem; margin-bottom: 10px; }
.product-body h3 { margin-bottom: 8px; }
.product-body p { color: var(--muted); font-size: .9rem; min-height: 62px; }
.product-card-cta { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(6,26,51,.1); color: #8f6a00; justify-content: space-between; width: 100%; }.section-link-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; color: var(--muted); font-size: .9rem; }
.product-footer-status { border-top: 1px solid rgba(6,26,51,.1); padding-top: 18px; }

.locations-section { padding: 82px 0 92px; background: linear-gradient(180deg, var(--navy-deep), var(--navy)); color: var(--white); position: relative; overflow: hidden; }
.locations-section::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(235,203,69,.1), transparent 30%, rgba(235,203,69,.05)); pointer-events: none; }
.locations-section .container { position: relative; z-index: 1; }
.navy-head p { color: rgba(255,255,255,.72); }
.units-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.unit-card { display: grid; grid-template-columns: .45fr .55fr; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.035); min-height: 360px; }
.unit-card img { width: 100%; height: 100%; object-fit: cover; }
.unit-content { padding: 30px; }
.unit-label { color: var(--gold-cta); font-weight: 900; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; }
.unit-content h3 { font-family: Fraunces, Georgia, serif; font-size: 1.65rem; color: var(--white); margin: 10px 0 18px; }
.unit-content p { color: rgba(255,255,255,.8); margin-bottom: 14px; display: flex; gap: 10px; }
.unit-content p i { color: var(--gold-cta); margin-top: 3px; }
.unit-rating { display: flex; align-items: center; gap: 10px; margin: 18px 0; }
.unit-rating b { font-size: 1.5rem; }
.unit-rating small { color: rgba(255,255,255,.65); }
/* Unit CTAs: stronger commercial buttons, straight edges, no shadows */
.unit-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin-top: 22px; }
.unit-btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 18px;
  border: 1px solid transparent;
  font-weight: 950;
  font-size: .78rem;
  letter-spacing: .075em;
  line-height: 1;
  text-transform: uppercase;
}
.unit-btn i { font-size: 1rem; line-height: 1; }
.unit-btn-primary { background: var(--gold-cta); color: var(--navy-deep); border-color: var(--gold-cta); min-width: 142px; }.unit-btn-secondary { color: var(--white); background: rgba(255,255,255,.035); border-color: rgba(247,185,22,.64); min-width: 138px; }
.services-strip { padding: 74px 0; background: var(--cream); }
.services-head { max-width: 850px; margin-bottom: 34px; }
.services-head p:not(.eyebrow) { color: var(--muted); }
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.service-grid article {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  padding: 32px 30px 30px;
  display: flex;
  flex-direction: column;
  background: rgba(247,245,240,.64);
  border: 1px solid rgba(6,26,51,.16);
}
.service-grid article::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(247,185,22,.62);
}
.service-grid article::after {
  content: "";
  position: absolute;
  left: 0;
  top: 28px;
  width: 3px;
  height: 64px;
  background: rgba(247,185,22,.74);
}
.service-grid article:first-child {
  background: var(--navy-deep);
  border-color: rgba(247,185,22,.72);
}
.service-grid article:first-child::before { background: var(--gold-cta); }
.service-grid article:first-child::after { background: var(--gold-cta); }
.service-grid article:first-child h3 { color: var(--white); }
.service-grid article:first-child p,
.service-grid article:first-child li { color: rgba(255,255,255,.78); }
.service-grid article:first-child li::marker { color: var(--gold-cta); }
.service-grid article:nth-child(n+2) {
  background: var(--white);
  border-color: rgba(6,26,51,.14);
}
.service-grid article:nth-child(n+2)::before { background: rgba(235,203,69,.72); }
.service-grid i {
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #a77e00;
  background: rgba(247,185,22,.12);
  border: 1px solid rgba(167,126,0,.24);
  font-size: 1.55rem;
  line-height: 1;
}
.service-grid article:first-child i {
  color: var(--navy-deep);
  background: var(--gold-cta);
  border-color: var(--gold-cta);
}
.service-grid h3 { margin: 22px 0 10px; }
.service-grid p, .service-grid li { color: var(--muted); }
.service-grid ul { padding-left: 18px; margin-bottom: 0; }
.service-grid li::marker { color: #a77e00; }
.service-grid ul { margin-bottom: 26px; }
.service-card-cta {
  margin-top: auto;
  width: fit-content;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 18px;
  border: 1px solid transparent;
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
}
.service-card-cta i {
  width: auto;
  height: auto;
  display: inline-flex;
  color: currentColor;
  background: transparent;
  border: 0;
  font-size: 1rem;
}
.service-card-cta-primary {
  background: var(--gold-cta);
  border-color: var(--gold-cta);
  color: var(--navy-deep);
}
.service-card-cta-secondary {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
  color: var(--white);
}
.service-grid article:first-child .service-card-cta-primary {
  background: var(--gold-cta);
  border-color: var(--gold-cta);
  color: var(--navy-deep);
}

.process-section { padding: 82px 0; background: var(--navy); color: var(--white); }
.process-grid { display: grid; grid-template-columns: .38fr 1fr; gap: 48px; align-items: start; }
.process-grid p { color: rgba(255,255,255,.76); }
.process-steps { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(255,255,255,.16); }
.process-steps article {
  min-height: 400px;
  padding: 42px 36px;
  border-left: 1px solid rgba(255,255,255,.16);
  background-color: var(--navy-deep);
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.process-steps article:first-child { border-left: 0; }
.process-steps article:nth-child(1) {
  background-image: linear-gradient(180deg, rgba(3,19,38,.48) 0%, rgba(3,19,38,.78) 44%, rgba(3,19,38,.98) 100%), url("../images/foto-homem-escolhendo-armacao.webp");
  background-position: 58% center;
}
.process-steps article:nth-child(2) {
  background-image: linear-gradient(180deg, rgba(3,19,38,.50) 0%, rgba(3,19,38,.80) 48%, rgba(3,19,38,.98) 100%), url("../images/foto-oculos-fundo-amarelo.webp");
  background-position: 52% center;
}
.process-steps article:nth-child(3) {
  background-image: linear-gradient(180deg, rgba(3,19,38,.50) 0%, rgba(3,19,38,.82) 48%, rgba(3,19,38,.98) 100%), url("../images/foto-atendimento-ajuste-cliente.webp");
  background-position: 54% center;
}
.process-steps span { display: block; color: var(--gold-cta); font-family: Fraunces, Georgia, serif; font-size: 3rem; line-height: .9; margin-bottom: 16px; }
.process-steps h3 { color: var(--white); font-size: 1.25rem; }
.process-steps p { color: rgba(255,255,255,.82); margin-bottom: 0; }

.history-section { position: relative; padding: 92px 0; background: linear-gradient(105deg, var(--navy-deep), var(--navy)); color: var(--white); overflow: hidden; }
.history-grid { display: grid; grid-template-columns: .9fr .8fr .6fr; gap: 26px; align-items: stretch; }
.history-copy { padding-right: 22px; }
.history-copy p { color: rgba(255,255,255,.78); }
.history-photo { min-height: 420px; border: 1px solid rgba(235,203,69,.42); overflow: hidden; }
.history-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); opacity: .85; }
.history-quote { border: 1px solid rgba(235,203,69,.62); align-self: center; padding: 34px; }
.history-quote p { font-family: Fraunces, Georgia, serif; font-size: clamp(1.6rem, 2.5vw, 2.6rem); line-height: 1.08; color: var(--white); }
.history-quote strong { color: var(--gold-cta); font-family: Fraunces, Georgia, serif; font-style: italic; font-size: 1.6rem; }
.history-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(255,255,255,.14); margin-top: 16px; }
.history-facts span { display: grid; grid-template-columns: 46px 1fr; gap: 0px; padding: 22px; border-left: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.72); }
.history-facts span:first-child { border-left: 0; }
.history-facts i { color: var(--gold-cta); font-size: 2rem; grid-row: span 2; }
.history-facts b { color: var(--white); display: block; }

.reviews-band { padding: 72px 0 42px; background: var(--off); }
.reviews-band-grid { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 640px); gap: clamp(36px, 7vw, 96px); align-items: center; justify-content: space-between; }
.reviews-heading { justify-self: start; max-width: 360px; }
.reviews-heading .eyebrow { margin-bottom: 14px; }
.reviews-heading h2 { font-size: clamp(1.9rem, 4.5vw, 4.5rem); line-height: 1; max-width: 10.8ch; margin-bottom: 0; width:500px; }
.reviews-section { width: min(100%, 640px); justify-self: end; }
.reviews-section, .faq-section, .mini-cta { border: 1px solid var(--line); background: var(--off); padding: 28px; }
.panel-title { display: flex; justify-content: flex-end; gap: 20px; align-items: baseline; margin-bottom: 24px; }
.panel-title h2, .faq-section h2 { font-size: clamp(1.55rem, 2vw, 2.2rem); }
.panel-title span { color: #9b7300; font-weight: 900; }
.review-counter-only { margin-bottom: 10px; }
blockquote { margin: 0 0 18px; font-family: Fraunces, Georgia, serif; font-size: clamp(1.45rem, 2.3vw, 2.3rem); line-height: 1.14; }
blockquote::before { content: "“"; color: var(--gold-cta); font-size: 3rem; line-height: .2; }
.review-source { color: var(--muted); font-weight: 900; }
.review-controls { display: grid; grid-template-columns: 46px 1fr 46px; align-items: center; gap: 12px; }
.review-progress { height: 3px; background: rgba(6,26,51,.12); overflow: hidden; }
.review-progress span { display: block; height: 100%; background: var(--gold-cta); width: 0; }
.faq-cta-section { padding: 48px 0 78px; background: var(--off); overflow: visible; }
.faq-cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); gap: 28px; align-items: flex-start; overflow: visible; }
.faq-section { width: 100%; margin: 0; }
.faq-section > p { color: var(--muted); }
.faq-list { display: grid; gap: 10px; margin-top: 18px; }
.faq-item { border: 1px solid var(--line); }
.faq-question { width: 100%; border: 0; background: transparent; padding: 18px; display: flex; align-items: center; justify-content: space-between; text-align: left; font-weight: 900; color: var(--ink); }
.faq-question i { color: #9b7300; }
.faq-answer { padding: 0 18px 18px; color: var(--muted); display: none; }
.faq-item.is-open .faq-answer { display: block; }
.mini-cta { background: var(--navy); color: var(--white); display: grid; grid-template-columns: 1fr; gap: 22px; padding: 34px 28px; height: fit-content; min-height: unset; align-self: flex-start; justify-self: stretch; position: -webkit-sticky; position: sticky; top: calc(var(--header-compact) + 24px); z-index: 2; }
.mini-cta > i { display: inline-grid; place-items: center; width: 54px; height: 54px; color: var(--gold-cta); border: 1px solid rgba(247,185,22,.42); font-size: 2rem; }
.mini-cta h3 { font-family: Fraunces, Georgia, serif; font-size: clamp(1.7rem, 2.5vw, 2.55rem); margin: 0 0 8px; color: var(--white); }
.mini-cta p { color: rgba(255,255,255,.75); margin: 0; }
.mini-cta .btn { width: 100%; }

.final-cta { background: var(--gold-cta); color: var(--navy-deep); border-top: 1px solid rgba(3,19,38,.12); border-bottom: 1px solid rgba(3,19,38,.12); padding:20px; }
.final-cta-grid { min-height: 128px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 34px; }
.final-cta h2 { font-size: clamp(1.8rem, 3.6vw, 3.5rem); margin: 0; }
.final-cta-grid div { display: flex; gap: 12px; flex-wrap: wrap; }

.site-footer { background: var(--navy-deep); color: var(--white); padding: 62px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr .8fr 1fr 1fr; gap: 42px; }
.footer-brand img { width: 150px; height: auto; margin-bottom: 18px; }
.footer-grid h3 { color: var(--gold-cta); font-size: .9rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 18px; }
.footer-grid p, .footer-grid a { color: rgba(255,255,255,.72); font-size: .92rem; }
.footer-grid nav, .footer-grid > div:not(.footer-brand) { display: grid; align-content: start; gap: 9px; }
.socials { display: flex; gap: 12px; margin-top: 20px; }
.socials a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); color: var(--white); background: rgba(255,255,255,.03); }
.socials a i { color: var(--gold-cta); font-size: 1.05rem; }
.footer-nav a { display: inline-flex; align-items: center; gap: 8px; }
.footer-nav a i { color: var(--gold-cta); font-size: 1rem; line-height: 1; }
.footer-unit { gap: 12px !important; }
.footer-info { display: grid !important; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 10px; margin: 0; }
.footer-info i { color: var(--gold-cta); font-size: .98rem; line-height: 1.35; margin-top: 1px; }
.footer-info span { min-width: 0; }
.footer-route { color: var(--gold-cta) !important; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; font-size: .78rem !important; margin-top: 2px; }
.footer-bottom { margin-top: 42px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; gap: 20px; color: rgba(255,255,255,.62); font-size: .84rem; }
.footer-notice { display: inline-grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 8px; max-width: 570px; margin: 0; }
.footer-notice i { color: var(--gold-cta); line-height: 1.4; }
.footer-bottom div { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-bottom a { color: rgba(255,255,255,.72); }

.float-actions { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: grid; gap: 10px; }
.float-btn { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(3,19,38,.2); background: var(--gold-cta); color: var(--navy); font-size: 1.15rem; }
.float-btn:last-child { background: var(--navy); color: var(--white); }
.float-btn[data-back-top] { display: none; }
.float-btn[data-back-top].is-visible { display: grid; }
@media (max-width: 1180px) {
  .desktop-nav { display: none; }
  .menu-toggle { display: block; }
  .header-shell { grid-template-columns: auto 1fr; }
  .header-actions { justify-self: end; }
  .hero { min-height: 760px; }
  .hero-layout { grid-template-columns: 1fr; align-items: end; }
  .hero-rating { justify-self: start; margin-top: 30px; }
  .trust-grid { grid-template-columns: repeat(3, 1fr); }
  .trust-grid div { border-bottom: 1px solid var(--line); }
  .nav-mosaic, .process-grid { grid-template-columns: 1fr; }
  .journey-grid { grid-template-columns: repeat(5, minmax(210px, 1fr)); overflow-x: auto; }
  .journey { min-height: 260px; }
  .process-steps article { min-height: 380px; padding: 38px 34px; }
  .product-card { flex-basis: calc((100% - 36px) / 3); }
  .product-card.is-featured { flex-basis: calc((100% - 36px) / 3 + 24px); }
  .units-grid { grid-template-columns: 1fr; }
  .history-grid { grid-template-columns: 1fr 1fr; }
  .history-quote { grid-column: 2; }
  .history-facts { grid-template-columns: 1fr; }
  .history-facts span { border-left: 0; border-top: 1px solid rgba(255,255,255,.14); }
  .history-facts span:first-child { border-top: 0; }
}

@media (max-width: 820px) {
  :root { --header: 74px; --header-compact: 64px; --container: min(100vw - 28px, 680px); }
  h1 { font-size: clamp(3rem, 14vw, 4.8rem); }
  #hero-title { max-width: 100%; }
  .hero-title-line:nth-child(2) { white-space: normal; }
  h2 { font-size: clamp(2rem, 10vw, 3rem); }
  .brand img { width: 110px; }
  .site-header.is-compact .brand img { width: 96px; }
  .site-header.is-compact .btn-header { min-height: 38px; padding: 8px 12px; }
  .btn-header { display: none; }
  .hero { min-height: auto; padding-bottom: 36px; }
  .hero::before { inset: var(--header) 0 0 0; background: linear-gradient(180deg, rgba(3,19,38,.36), rgba(3,19,38,.92) 58%, rgba(3,19,38,.98) 100%); }
  .hero-visual { inset: var(--header) 0 auto 0; height: 46vh; min-height: 340px; }
  .hero-visual img { object-position: center center; }
  .lens-arc { opacity: .35; }
  .hero-layout { min-height: auto; padding-top: 370px; }
  .hero-rating { width: 100%; }
  .hero-rating div { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-grid div, .trust-grid div:last-child { border-left: 0; border-right: 0; }
  .navigator-section { padding: 44px 0; }
  .nav-intro { padding: 0; }
  .journey-grid { margin-inline: calc((100vw - var(--container)) / -2); padding-inline: calc((100vw - var(--container)) / 2); }
  .split-story, .kids-feature, .section-topline, .final-cta-grid, .footer-bottom { grid-template-columns: 1fr; }
  .reviews-band-grid { grid-template-columns: 1fr; gap: 24px; justify-content: stretch; align-items: stretch; }
  .reviews-heading { max-width: 100%; }
  .reviews-heading h2 { max-width: 12ch; }
  .reviews-section, .faq-section { width: 100%; justify-self: stretch; }
  .faq-cta-grid { grid-template-columns: 1fr; }
  .mini-cta { position: static; }
  .mini-cta { align-content: start; }
  .split-image { min-height: 360px; order: -1; }
  .kids-feature { background: var(--navy); }
  .kids-photo { min-height: 320px; }
  .kids-photo img { mix-blend-mode: normal; }
  .kids-points { grid-template-columns: 1fr; gap: 10px; }
  .kids-points span { min-height: auto; }
  .product-toolbar { justify-items: start; }
  .product-card, .product-card.is-featured { flex-basis: 82%; }
  .unit-card { grid-template-columns: 1fr; }
  .unit-card img { height: 240px; }
  .service-grid, .process-steps, .history-grid, .footer-grid { grid-template-columns: 1fr; }
  .service-grid article, .process-steps article { border-left: 0; }
  .process-steps article { border-top: 1px solid rgba(255,255,255,.16); min-height: 320px; padding: 32px; }
  .process-steps article:first-child { border-top: 0; }
  .history-photo { min-height: 320px; }
  .history-quote { grid-column: auto; }
  .final-cta-grid { padding-block: 32px; }
  .footer-bottom { display: grid; }
  .float-actions { right: 12px; bottom: 12px; }
}

@media (max-width: 440px) {
  .header-shell { width: calc(100vw - 24px); gap: 10px; }
  .hero-actions, .kids-actions, .unit-actions, .final-cta-grid div { display: grid; grid-template-columns: 1fr; }
  .mini-cta .btn { width: 100%; }
  .btn, .unit-btn { width: 100%; }
  .google-proof { font-size: .78rem; }
  .journey-grid { grid-template-columns: repeat(5, minmax(200px, 1fr)); }
  .product-card, .product-card.is-featured { flex-basis: 88%; }
  .split-copy, .kids-copy, .unit-content { padding: 28px; }
  .footer-grid { gap: 28px; }
}
.legal-page { min-height: 100vh; padding: 110px 0; background: var(--off); }
.legal-page h1 { color: var(--navy); font-size: clamp(2.5rem, 6vw, 5rem); margin: 24px 0; }
.legal-page h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-top: 34px; }
.legal-page p { max-width: 780px; color: var(--muted); }


/* =========================================================
   v4.24 - Microinterações e animações leves sem GSAP
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .site-header,
  .header-shell,
  .brand img,
  .btn-header,
  .desktop-nav a,
  .mobile-menu,
  .btn,
  .text-link,
  .nav-cta,
  .journey,
  .journey img,
  .journey::after,
  .split-image img,
  .kids-photo img,
  .kids-points span,
  .product-card,
  .product-card::before,
  .product-media img,
  .product-icon,
  .product-main-cta,
  .unit-card,
  .unit-card img,
  .unit-btn,
  .service-grid article,
  .service-grid i,
  .service-card-cta,
  .service-card-cta i,
  .process-steps article,
  .history-photo img,
  .history-quote,
  .reviews-section,
  .review-controls button,
  .faq-item,
  .faq-question,
  .mini-cta,
  .socials a,
  .footer-grid a,
  .float-btn {
    transition-property: background-color, border-color, color, opacity, filter, transform, width, height, min-height, padding, font-size;
    transition-duration: .22s;
    transition-timing-function: ease;
  }

  .product-track { scroll-behavior: smooth; }

  .motion-ready .motion-reveal {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition: opacity .58s cubic-bezier(.2, .72, .18, 1), transform .58s cubic-bezier(.2, .72, .18, 1);
    transition-delay: var(--motion-delay, 0ms);
    will-change: opacity, transform;
  }

  .motion-ready .motion-reveal.motion-left { transform: translate3d(-22px, 0, 0); }
  .motion-ready .motion-reveal.motion-right { transform: translate3d(22px, 0, 0); }
  .motion-ready .motion-reveal.motion-scale { transform: translate3d(0, 16px, 0) scale(.985); }

  .motion-ready .motion-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  .reviews-section.is-switching blockquote,
  .reviews-section.is-switching .review-source {
    opacity: .18;
  }

  .faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    padding: 0 18px;
    transition: grid-template-rows .24s ease, padding .24s ease;
  }

  .faq-answer-inner {
    min-height: 0;
    color: var(--muted);
  }

  .faq-item.is-open .faq-answer {
    display: grid;
    grid-template-rows: 1fr;
    padding: 0 18px 18px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .desktop-nav a:hover,
  .footer-grid a:hover,
  .text-link:hover {
    color: var(--gold-cta);
  }

  .desktop-nav a:hover::after { right: 0; }

  .btn-primary:hover,
  .nav-intro .nav-cta:hover,
  .kids-actions .whatsapp-link:hover,
  .mini-cta .btn:hover,
  .final-cta .btn-primary:hover {
    background: #e4a900;
    border-color: #e4a900;
    color: var(--navy-deep);
  }

  .btn-secondary:hover,
  .btn-dark:hover,
  .btn-header:hover {
    background: rgba(247, 185, 22, .10);
    border-color: var(--gold-cta);
    color: var(--white);
  }

  .btn-line:hover,
  .unit-btn-secondary:hover {
    border-color: var(--gold-cta);
    color: var(--gold-cta);
    background: rgba(247, 185, 22, .06);
  }

  .unit-btn-primary:hover {
    background: #e4a900;
    border-color: #e4a900;
    color: var(--navy-deep);
  }

  .journey:hover {
    border-color: rgba(247,185,22,.54);
  }

  .journey:hover img,
  .split-image:hover img,
  .kids-photo:hover img,
  .unit-card:hover img,
  .history-photo:hover img {
    transform: scale(1.035);
  }

  .journey:hover::after {
    background: linear-gradient(180deg, rgba(3,19,38,.02) 0%, rgba(3,19,38,.28) 42%, rgba(3,19,38,.86) 100%);
  }

  .kids-points span:hover,
  .service-grid article:hover,
  .process-steps article:hover,
  .history-quote:hover,
  .reviews-section:hover,
  .faq-item:hover,
  .mini-cta:hover {
    border-color: rgba(247,185,22,.58);
  }

  .product-card:hover {
    border-color: rgba(247,185,22,.70);
    background: rgba(255,255,255,.70);
  }

  .product-card:hover::before {
    transform: scaleX(1);
    background: var(--gold-cta);
  }

  .product-card:hover .product-media img {
    transform: scale(1.04);
    filter: saturate(1.06) contrast(1.04);
  }

  .product-card:hover .product-icon {
    background: var(--gold-cta);
    color: var(--navy-deep);
    border-color: var(--gold-cta);
  }

  .product-main-cta:hover {
    color: var(--navy-deep);
    border-color: var(--navy-deep);
    background: rgba(247,185,22,.95);
  }

  .unit-card:hover {
    border-color: rgba(247,185,22,.62);
    background: rgba(255,255,255,.055);
  }

  .carousel-controls button:hover,
  .review-controls button:hover,
  .float-btn:hover,
  .socials a:hover {
    border-color: var(--gold-cta);
    background: var(--gold-cta);
    color: var(--navy-deep);
  }

  .faq-question:hover {
    color: #9b7300;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   v4.25 - Refinamento de hovers e restauração dos ícones do rodapé
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .btn i,
  .unit-btn i,
  .text-link i,
  .product-main-cta i,
  .product-card-cta i,
  .carousel-controls button i,
  .review-controls button i,
  .float-btn i,
  .socials a i,
  .footer-grid a i,
  .faq-question i {
    transition: color .22s ease, transform .22s ease;
  }
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover,
  .nav-intro .nav-cta:hover,
  .kids-actions .whatsapp-link:hover,
  .unit-btn-primary:hover {
    background: var(--navy-deep);
    border-color: var(--gold-cta);
    color: var(--white);
  }

  .btn-primary:hover i,
  .nav-intro .nav-cta:hover i,
  .kids-actions .whatsapp-link:hover i,
  .unit-btn-primary:hover i {
    color: currentColor;
  }

  .nav-intro .nav-cta:hover::before {
    background: rgba(255, 255, 255, .58);
  }

  .mini-cta .btn-primary:hover {
    background: var(--white);
    border-color: var(--white);
    color: var(--navy-deep);
  }

  .mini-cta .btn-primary:hover i {
    color: currentColor;
  }

  .btn-secondary:hover,
  .btn-dark:hover,
  .btn-header:hover,
  .unit-btn-secondary:hover {
    background: var(--gold-cta);
    border-color: var(--gold-cta);
    color: var(--navy-deep);
  }

  .btn-secondary:hover i,
  .btn-dark:hover i,
  .btn-header:hover i,
  .unit-btn-secondary:hover i {
    color: currentColor;
  }

  .final-cta .btn-dark:hover,
  .btn-line:hover,
  .final-cta .btn-line:hover {
    background: var(--navy-deep);
    border-color: var(--navy-deep);
    color: var(--white);
  }

  .final-cta .btn-dark:hover i,
  .btn-line:hover i,
  .final-cta .btn-line:hover i {
    color: currentColor;
  }

  .product-main-cta:hover {
    background: var(--gold-cta);
    border-color: var(--gold-cta);
    color: var(--navy-deep);
  }

  .product-main-cta:hover i,
  .product-card-cta:hover i,
  .text-link:hover i {
    color: currentColor;
  }

  .carousel-controls button:hover,
  .review-controls button:hover,
  .float-btn:hover,
  .socials a:hover {
    background: var(--gold-cta);
    border-color: var(--gold-cta);
    color: var(--navy-deep);
  }

  .carousel-controls button:hover i,
  .review-controls button:hover i,
  .float-btn:hover i,
  .socials a:hover i {
    color: currentColor;
  }

  .footer-grid a:hover {
    color: var(--gold-cta);
  }

  .footer-grid a:hover i,
  .footer-route:hover i,
  .faq-question:hover i {
    color: currentColor;
  }
}


/* =========================================================
   v4.26 - Ajustes pontuais de botões e redes sociais
   ========================================================= */
@media (hover: hover) and (pointer: fine) {
  .site-footer .socials a:hover,
  .footer-grid .socials a:hover {
    background: var(--gold-cta);
    border-color: var(--gold-cta);
    color: var(--navy-deep);
  }

  .site-footer .socials a:hover i,
  .footer-grid .socials a:hover i {
    color: var(--navy-deep);
  }
}


/* =========================================================
   v4.27 - Botões internos e hover refinado dos cards de serviços
   ========================================================= */
@media (hover: hover) and (pointer: fine) {
  .service-grid article:first-child:hover {
    background: #08294f;
    border-color: var(--gold-cta);
  }

  .service-grid article:nth-child(n+2):hover {
    background: #fffdfa;
    border-color: rgba(247,185,22,.88);
  }

  .service-grid article:nth-child(n+2):hover i:not(.service-card-cta i) {
    background: var(--gold-cta);
    border-color: var(--gold-cta);
    color: var(--navy-deep);
  }

  .service-grid article:first-child .service-card-cta:hover {
    background: var(--white);
    border-color: var(--white);
    color: var(--navy-deep);
  }

  .service-grid article:nth-child(n+2) .service-card-cta:hover {
    background: var(--gold-cta);
    border-color: var(--gold-cta);
    color: var(--navy-deep);
  }

  .service-card-cta:hover i {
    color: currentColor;
  }
}

/* =========================================================
   v4.28 - Ajuste cirúrgico: ícones dos CTAs de serviços e rodapé preservado
   ========================================================= */
.service-card-cta {
  width: min(100%, 260px);
  justify-content: space-between;
  gap: 18px;
}

.service-card-cta span {
  min-width: 0;
}

.service-card-cta .service-card-action-icon {
  margin-left: auto;
  flex: 0 0 auto;
  color: currentColor;
}

.site-footer .socials a:hover i,
.footer-grid .socials a:hover i {
  color: var(--navy-deep) !important;
}

/* =========================================================
   v4.29 - Ícones à esquerda nos CTAs de serviços
   ========================================================= */
.service-card-cta {
  justify-content: flex-start;
  gap: 10px;
}

.service-card-cta span {
  min-width: 0;
}

.service-grid article .service-card-cta .service-card-action-icon {
  width: auto;
  height: auto;
  margin: 0;
  flex: 0 0 auto;
  background: transparent !important;
  border: 0 !important;
  color: currentColor;
  font-size: 1rem;
}

@media (hover: hover) and (pointer: fine) {
  .service-grid article .service-card-cta:hover .service-card-action-icon {
    background: transparent !important;
    border-color: transparent !important;
    color: currentColor;
  }
}

/* =========================================================
   v4.30 - CTA na introdução da seção Processo
   ========================================================= */
.process-cta {
  margin-top: 24px;
  width: fit-content;
  min-width: 218px;
  justify-content: center;
}

.process-cta i {
  color: currentColor;
  flex: 0 0 auto;
}

/* =========================================================
   v4.32 - Hover premium nos cards da seção Processo
   ========================================================= */
.process-steps article {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.process-steps article::before,
.process-steps article::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.process-steps article::before {
  z-index: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform .55s cubic-bezier(.2, .72, .18, 1), filter .28s ease;
}

.process-steps article::after {
  z-index: 1;
  background: linear-gradient(180deg, rgba(3,19,38,.50) 0%, rgba(3,19,38,.78) 44%, rgba(3,19,38,.98) 100%);
  transition: background .28s ease;
}

.process-steps article:nth-child(1)::before {
  background-image: url("../images/foto-homem-escolhendo-armacao.webp");
  background-position: 58% center;
}

.process-steps article:nth-child(2)::before {
  background-image: url("../images/foto-oculos-fundo-amarelo.webp");
  background-position: 52% center;
}

.process-steps article:nth-child(3)::before {
  background-image: url("../images/foto-atendimento-ajuste-cliente.webp");
  background-position: 54% center;
}

.process-steps article > * {
  position: relative;
  z-index: 2;
}

.process-steps span {
  transition: color .22s ease, filter .22s ease;
}

@media (hover: hover) and (pointer: fine) {
  .process-steps article:hover {
    border-color: rgba(247,185,22,.72);
  }

  .process-steps article:hover::before {
    transform: scale(1.055);
    filter: saturate(1.08) contrast(1.05);
  }

  .process-steps article:hover::after {
    background: linear-gradient(180deg, rgba(3,19,38,.34) 0%, rgba(3,19,38,.64) 44%, rgba(3,19,38,.93) 100%);
  }

  .process-steps article:hover span {
    color: #ffcf25;
  }
}

/* =========================================================
   v4.33 - Revisão responsiva mobile/tablet
   ========================================================= */
@media (max-width: 1100px) and (min-width: 821px) {
  .faq-cta-grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
    gap: 24px;
  }

  .mini-cta {
    max-width: 320px;
  }
}

@media (max-width: 820px) {
  .hero-visual {
    height: 42vh;
    min-height: 310px;
  }

  .hero-layout {
    padding-top: 338px;
    padding-bottom: 0;
  }

  .hero-copy > p:not(.eyebrow) {
    margin-bottom: 20px;
  }

  .hero-actions {
    margin-bottom: 20px;
  }

  .hero-rating {
    margin-top: 24px;
    padding: 20px;
  }

  .hero-rating > i {
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
  }

  .journey-grid {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .journey-grid::-webkit-scrollbar {
    display: none;
  }

  .journey {
    scroll-snap-align: start;
  }

  .product-track {
    -webkit-overflow-scrolling: touch;
  }

  .split-copy,
  .kids-copy,
  .unit-content {
    width: 100%;
    max-width: 100%;
  }

  .split-image,
  .kids-photo {
    width: 100%;
    max-width: 100%;
  }

  .faq-section,
  .reviews-section,
  .mini-cta {
    width: 100%;
    max-width: 100%;
  }

  .footer-bottom {
    align-items: start;
  }
}

@media (max-width: 440px) {
  h1 {
    font-size: clamp(2.65rem, 13vw, 3.55rem);
  }

  .hero-visual {
    height: 38vh;
    min-height: 292px;
  }

  .hero-layout {
    padding-top: 316px;
  }

  .hero-rating {
    padding: 18px;
  }

  .hero-rating b {
    font-size: 1.55rem;
  }

  .hero-rating strong {
    font-size: 1rem;
  }

  .google-proof {
    gap: 8px;
  }

  .float-btn {
    width: 48px;
    height: 48px;
  }
}

/* =========================================================
   OFICIAL V1 - Hero mobile com imagem integrada ao fundo
   ========================================================= */
@media (max-width: 820px) {
  .hero {
    min-height: 100svh;
    padding-top: var(--header);
    padding-bottom: 44px;
    overflow: hidden;
  }

  .hero::before {
    inset: var(--header) 0 0 0;
    background:
      linear-gradient(180deg, rgba(3, 19, 38, .38) 0%, rgba(3, 19, 38, .68) 42%, rgba(3, 19, 38, .94) 78%, rgba(3, 19, 38, .98) 100%),
      linear-gradient(90deg, rgba(3, 19, 38, .96) 0%, rgba(3, 19, 38, .72) 48%, rgba(3, 19, 38, .34) 100%);
  }

  .hero-visual {
    position: absolute;
    inset: var(--header) 0 0 0;
    height: auto !important;
    min-height: 0 !important;
  }

  .hero-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% center;
  }

  .hero-layout {
    min-height: calc(100svh - var(--header));
    padding-top: clamp(92px, 28vh, 180px) !important;
    padding-bottom: 0;
    align-items: end;
  }

  .hero-copy {
    max-width: 100%;
  }

  #hero-title {
    max-width: min(100%, 640px);
  }
}

@media (max-width: 440px) {
  .hero {
    min-height: 100svh;
    padding-bottom: 0px;
    height:175svh;
  }

  .hero-layout {
    padding-top: clamp(35px, 1vh, 90px) !important;
  }

  #hero-title {
    font-size: clamp(2.55rem, 12.2vw, 3.35rem);
    line-height: .9;
  }
}