/* ===== Ótica Real Santa Rita — Loja 1 ===== */
:root{
  --max:1360px; --gut:24px; --pad:clamp(20px,4vw,48px);
  --serif:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.22,.8,.2,1);
  --hdr:68px;
  --sec:clamp(88px,12vw,176px);
}
/* Modo claro: luz, vidro, galeria */
:root,[data-theme="light"]{
  color-scheme:light;
  --bg:#eceee9; --ink:#131715; --muted:#566058; --line:rgba(19,23,21,.15);
  --accent:#4a5b43; --on-accent:#f2f4ef; --btn-bg:#131715; --btn-fg:#eceee9;
  --spot:rgba(255,255,255,.95); --spot2:rgba(74,91,67,.10);
  --glass:rgba(236,238,233,.55);
}
/* Modo escuro: grafite, ouro do letreiro, brilho de lente */
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0f1210; --ink:#ecefe9; --muted:#98a29a; --line:rgba(236,239,233,.17);
  --accent:#c9b57a; --on-accent:#101310; --btn-bg:#ecefe9; --btn-fg:#0f1210;
  --spot:rgba(201,181,122,.13); --spot2:rgba(160,185,170,.07);
  --glass:rgba(15,18,16,.5);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--hdr);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--sans);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2{font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.02em;margin:0}
h2{font-size:clamp(2.1rem,4.4vw,4rem)}
p{margin:0 0 1em;max-width:46ch}
.muted{color:var(--muted);font-size:.95rem}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:fixed;left:12px;top:-60px;background:var(--btn-bg);color:var(--btn-fg);padding:.6em 1em;z-index:100;transition:top .2s}
.skip:focus{top:12px}

/* ----- grid ----- */
.wrap{width:100%;max-width:calc(var(--max) + var(--pad)*2);margin-inline:auto;padding-inline:var(--pad)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
.sec{padding-block:var(--sec);position:relative}
main,.header,.footer{position:relative;z-index:1}

/* ----- luz reativa ao mouse ----- */
.light{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .8s;
  background:
   radial-gradient(560px circle at var(--mx,50vw) var(--my,30vh),var(--spot),transparent 62%),
   radial-gradient(220px circle at calc(100vw - var(--mx,50vw)) calc(100vh - var(--my,30vh)),var(--spot2),transparent 70%)}
.light.on{opacity:1}

/* ----- cursor de precisão ----- */
.cursor{position:fixed;left:0;top:0;z-index:200;pointer-events:none;opacity:0;transition:opacity .25s;mix-blend-mode:difference;will-change:transform}
.cursor.on{opacity:1}
.cursor.hide{opacity:0}
.cursor svg{display:block;margin:-2.5px 0 0 -3.5px;transform-origin:3.5px 2.5px;transition:transform .3s var(--ease)}
.cursor .arrow{fill:#fff;stroke:#fff;stroke-width:.01;stroke-linejoin:round;transition:fill .25s,stroke-width .25s}
.cursor .focus{position:absolute;left:9px;top:9px;width:30px;height:30px;opacity:0;transform:scale(.55);transition:opacity .3s,transform .4s var(--ease)}
.cursor .focus b{position:absolute;width:7px;height:7px;border:0 solid #fff}
.cursor .focus b:nth-child(1){left:0;top:0;border-width:1.2px 0 0 1.2px}
.cursor .focus b:nth-child(2){right:0;top:0;border-width:1.2px 1.2px 0 0}
.cursor .focus b:nth-child(3){left:0;bottom:0;border-width:0 0 1.2px 1.2px}
.cursor .focus b:nth-child(4){right:0;bottom:0;border-width:0 1.2px 1.2px 0}
.cursor.is-link svg{transform:rotate(-14deg)}
.cursor.is-button svg{transform:scale(1.18)}
.cursor.is-button .arrow{fill:transparent;stroke-width:1.5}
.cursor.is-image .focus{opacity:1;transform:scale(1)}
html.has-cursor,html.has-cursor *{cursor:none!important}
html.has-cursor .map,html.has-cursor .map *{cursor:auto!important}

/* ----- header ----- */
.header{position:fixed;inset:0 0 auto 0;height:var(--hdr);z-index:60;transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
.header.scrolled{background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:var(--line)}
.header__in{height:100%;display:flex;align-items:center;gap:32px}
.brand{font-family:var(--serif);font-size:1.35rem;letter-spacing:.01em;text-decoration:none;margin-right:auto}
.nav{display:flex;gap:clamp(18px,2.4vw,36px);font-size:.95rem}
.nav a{text-decoration:none;position:relative;padding:.3em 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}
.theme{display:inline-flex;align-items:center;gap:.6em;background:none;border:0;color:inherit;font:500 .9rem var(--sans);padding:.5em 0;-webkit-tap-highlight-color:transparent}
.theme svg{transition:transform .7s var(--ease)}
[data-theme="dark"] .theme svg{transform:rotate(180deg)}
.burger{display:none;width:44px;height:44px;background:none;border:0;color:inherit;position:relative;margin-right:-10px}
.burger span{position:absolute;left:11px;right:11px;height:1.5px;background:currentColor;transition:transform .4s var(--ease),top .4s var(--ease)}
.burger span:first-child{top:18px}.burger span:last-child{top:25px}
.menu-open .burger span:first-child{top:21px;transform:rotate(45deg)}
.menu-open .burger span:last-child{top:21px;transform:rotate(-45deg)}

/* ----- botões e links ----- */
.btn{position:relative;display:inline-flex;align-items:center;padding:.95em 1.55em;background:var(--btn-bg);color:var(--btn-fg);text-decoration:none;font:500 .95rem/1 var(--sans);overflow:hidden;isolation:isolate;border:0;transition:color .4s}
.btn::before{content:"";position:absolute;inset:0;background:var(--accent);transform:translateY(101%);transition:transform .5s var(--ease);z-index:-1}
.btn:hover,.btn:focus-visible{color:var(--on-accent)}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.txt{text-decoration:none;font-weight:500;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:3px;transition:background-size .45s var(--ease)}
.txt:hover{background-size:0 1px;background-position:100% 100%}

/* ----- figuras ----- */
figure{margin:0}
.mask{overflow:hidden;background:color-mix(in srgb,var(--ink) 8%,transparent)}
.mask img{width:100%;height:100%;object-fit:cover;scale:1.08;transform:translate3d(var(--px,0),calc(var(--py,0px) + var(--sy,0px)),0);transition:scale 1.2s var(--ease)}
figure:hover .mask img{scale:1.12}
figcaption{margin-top:.8rem;font-size:.9rem;color:var(--muted)}

/* ----- hero ----- */
.hero{min-height:100svh;padding:calc(var(--hdr) + clamp(28px,5vw,64px)) 0 clamp(48px,6vw,88px);display:flex;align-items:center}
.hero__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:center}
.hero__title{grid-column:1/8;grid-row:1;font-size:clamp(2.6rem,6.4vw + 1rem,7.6rem);line-height:.98;align-self:end}
.line{display:block;overflow:hidden;padding:0 0 .14em;margin-bottom:-.14em}
.line>span{display:block}
.hero__lead{grid-column:1/6;grid-row:2;margin:clamp(24px,3vw,44px) 0 20px;color:var(--muted)}
.hero__cta{grid-column:1/8;grid-row:3;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.hero__img{grid-column:8/13;grid-row:1/4;position:relative;align-self:center}
.hero__img .mask{aspect-ratio:448/487}
.lens{position:absolute;left:-3.6rem;bottom:2.4rem;width:136px;height:136px;border-radius:50%;display:grid;place-content:center;text-align:center;text-decoration:none;
  background:var(--glass);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);
  border:1px solid color-mix(in srgb,var(--ink) 35%,transparent);transition:transform .6s var(--ease)}
.lens::after{content:"";position:absolute;inset:7px;border-radius:50%;border:1px solid var(--line);border-top-color:color-mix(in srgb,var(--ink) 45%,transparent);transform:rotate(-30deg)}
.lens:hover{transform:scale(1.05)}
.lens strong{font:400 2.1rem/1 var(--serif)}
.lens small{font-size:.9rem;margin-left:2px;color:var(--accent)}
.lens span{font-size:.72rem;line-height:1.25;margin-top:.35rem;color:var(--muted)}

/* ----- a ótica ----- */
.otica__a{grid-column:1/8;grid-row:1}
.otica__a .mask{aspect-ratio:645/348}
.otica__text{grid-column:9/13;grid-row:1;align-self:end}
.otica__text h2{margin-bottom:.6em}
.otica__b{grid-column:6/12;grid-row:2;margin-top:clamp(40px,6vw,96px)}
.otica__b .mask{aspect-ratio:653/403}

/* ----- óculos ----- */
.o-a{grid-column:1/6;grid-row:1/3}
.o-a .mask{aspect-ratio:448/487}
.o-t{grid-column:7/13;grid-row:1;padding-top:clamp(0px,2vw,24px)}
.o-t h2{margin-bottom:.6em}
.o-b{grid-column:7/10;grid-row:2;align-self:end}
.o-b .mask{aspect-ratio:1/1.05}.o-c .mask{aspect-ratio:3/4}
.o-c{grid-column:10/13;grid-row:2;margin-top:clamp(0px,6vw,88px);align-self:end}
.o-n{grid-column:7/13;grid-row:3;align-self:start;margin-top:clamp(56px,8vw,128px)}
.o-n p{font:400 clamp(1.6rem,3vw,2.6rem)/1.1 var(--serif);letter-spacing:-.01em;margin-bottom:1em}

/* ----- avaliações ----- */
.score{grid-column:1/5;align-self:start;position:sticky;top:calc(var(--hdr) + 32px)}
.score__n{font:400 clamp(5rem,13vw,11rem)/.9 var(--serif);letter-spacing:-.04em}
.score__n span{font-size:.28em;vertical-align:top;margin-left:.1em;color:var(--accent);letter-spacing:0}
.score p{color:var(--muted);margin-top:1rem}
.quotes{grid-column:6/13;list-style:none;margin:0;padding:0}
.quotes li{padding:clamp(28px,4vw,52px) 0;border-top:1px solid var(--line)}
.quotes li:last-child{padding-bottom:0}
blockquote{margin:0}
blockquote p{max-width:26ch;font:400 clamp(1.55rem,2.9vw,2.6rem)/1.18 var(--serif);letter-spacing:-.015em;margin:0}
.quotes li:nth-child(2) blockquote{margin-left:clamp(0px,6vw,96px)}

/* ----- localização ----- */
.loc__info{grid-column:1/6;align-self:center}
.loc__info h2{margin-bottom:.8em}
address{font-style:normal;margin-bottom:1.2rem}
address strong{display:block;font-weight:600;margin-bottom:.4rem}
.phone{font:400 clamp(1.6rem,2.6vw,2.2rem)/1 var(--serif);margin-bottom:2rem}
.phone a{text-decoration:none}
.loc__cta{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.map{grid-column:7/13;aspect-ratio:4/3;background:color-mix(in srgb,var(--ink) 8%,transparent)}
.map iframe{width:100%;height:100%;border:0;display:block;transition:filter .8s}
[data-theme="dark"] .map iframe{filter:invert(.9) hue-rotate(180deg) grayscale(.45) brightness(.92) contrast(.92)}

/* ----- footer ----- */
.footer{border-top:1px solid var(--line);padding:40px 0 calc(40px + env(safe-area-inset-bottom,0px))}
.footer__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:start;row-gap:20px}
.footer .brand{grid-column:1/4;margin:0}
.footer p{grid-column:5/10;margin:0;color:var(--muted);font-size:.95rem}
.social{grid-column:10/13;list-style:none;margin:0;padding:0;display:flex;gap:20px;justify-content:flex-end}

/* ----- movimento (só com JS) ----- */
.js .line>span{transform:translateY(108%);transition:transform 1.15s var(--ease)}
.js .hero__lead,.js .hero__cta{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .hero__img .mask{clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--ease) .25s}
.js .hero__img .mask img{scale:1.35;transition:scale 1.8s var(--ease) .25s}
.js .lens{opacity:0;transition:opacity .9s .9s,transform .6s var(--ease)}
.js.ready .line>span{transform:none}
.js.ready .line:nth-child(2)>span{transition-delay:.12s}
.js.ready .line:nth-child(3)>span{transition-delay:.24s}
.js.ready .hero__lead{opacity:1;transform:none;transition-delay:.7s}
.js.ready .hero__cta{opacity:1;transform:none;transition-delay:.85s}
.js.ready .hero__img .mask{clip-path:inset(0)}
.js.ready .hero__img .mask img{scale:1.08}
.js.ready .hero__img:hover .mask img{scale:1.12;transition:scale 1.2s var(--ease)}
.js.ready .lens{opacity:1}
.js [data-reveal]:not([data-reveal="img"]){opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js [data-reveal="img"] .mask,.js .map[data-reveal="img"] iframe{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--ease)}
.js [data-reveal="img"] img{scale:1.3}
.js [data-reveal].in:not([data-reveal="img"]){opacity:1;transform:none}
.js [data-reveal="img"].in .mask,.js .map[data-reveal="img"].in iframe{clip-path:inset(0)}
.js [data-reveal="img"].in img{scale:1.08}
.js [data-reveal="img"].in:hover img{scale:1.12}
.js [data-reveal="img"] figcaption{opacity:0;transition:opacity .8s .6s}
.js [data-reveal="img"].in figcaption{opacity:1}

/* troca de tema: abertura circular, como uma lente */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}::view-transition-new(root){z-index:2}
body,.header,.mask,.btn,.footer{transition-property:background-color,color,border-color,clip-path,scale}

/* ----- tablet ----- */
@media (max-width:1023px){
  .nav{gap:18px;font-size:.9rem}
  .theme__txt{display:none}
  .lens{left:-2rem;width:116px;height:116px}
}
/* ----- mobile ----- */
@media (max-width:819px){
  :root{--hdr:60px;--gut:16px}
  .burger{display:block}
  .header__in{gap:8px}
  .theme{width:44px;height:44px;justify-content:center;padding:0}
  .nav{position:fixed;inset:0;background:var(--bg);flex-direction:column;justify-content:center;gap:6px;padding:var(--hdr) var(--pad) 0;font:400 clamp(2rem,9vw,3rem)/1.2 var(--serif);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;z-index:-1}
  .menu-open .nav{opacity:1;visibility:visible}
  .menu-open .header{background:var(--bg);border-color:transparent}
  .nav a{padding:.15em 0;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s var(--ease)}
  .menu-open .nav a{opacity:1;transform:none}
  .menu-open .nav a:nth-child(2){transition-delay:.05s}.menu-open .nav a:nth-child(3){transition-delay:.1s}
  .menu-open .nav a:nth-child(4){transition-delay:.15s}.menu-open .nav a:nth-child(5){transition-delay:.2s}
  .nav a::after{display:none}
  .grid,.hero__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hero{min-height:auto;align-items:flex-start}
  .hero__title{grid-column:1/-1;grid-row:1}
  .hero__img{grid-column:2/-1;grid-row:2;margin-top:28px}
  .hero__lead{grid-column:1/-1;grid-row:3;margin-top:32px}
  .hero__cta{grid-column:1/-1;grid-row:4}
  .lens{left:-1.2rem;bottom:1.2rem;width:104px;height:104px}
  .lens strong{font-size:1.7rem}.lens span{font-size:.64rem}
  .otica__a,.otica__text,.otica__b,.o-a,.o-t,.o-b,.o-c,.o-n,.score,.quotes,.loc__info,.map{grid-column:1/-1;grid-row:auto;margin-top:0;position:static}
  .otica__text{order:-1;margin-bottom:32px}
  .otica__b{grid-column:2/-1;margin-top:40px}
  .o-t{order:-1;margin-bottom:32px}
  .o-a{grid-column:1/4;grid-row:auto}
  .o-b{grid-column:1/3;margin-top:40px}.o-c{grid-column:3/5;margin-top:72px}
  .o-n{margin-top:48px}
  .score{margin-bottom:32px}
  .quotes li:nth-child(2) blockquote{margin-left:0}
  .loc__info{margin-bottom:40px}
  .map{aspect-ratio:1/1}
  .footer .brand,.footer p,.social{grid-column:1/-1;justify-content:flex-start}
}
@media (max-width:389px){.lens{width:92px;height:92px}.lens span{display:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;transition-delay:0s!important;animation:none!important}
  .js .line>span,.js .hero__lead,.js .hero__cta,.js [data-reveal],.js [data-reveal] .mask,.js .map iframe,.js .hero__img .mask{transform:none!important;opacity:1!important;clip-path:none!important}
}