/* ==========================================================
   Ótica Indaiá Guaianases — Nova LP (versão clean)
   Cores tiradas do logotipo oficial. Fontes guardadas na pasta
   (não dependem de internet).
   ========================================================== */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-wdth.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  /* Cores do logo */
  --amarelo: #FFF200;
  --laranja: #F7911B;
  --vermelho: #ED1C24;
  --vinho: #BB2124;
  --preto: #100F0D;
  /* Vinho profundo (o mesmo dos posts do time) */
  --vinho-fundo: #8E1B1F;
  --vinho-escuro: #5E1013;
  /* Neutros quentes */
  --creme: #F5F1EA;
  --creme-2: #EBE4D8;
  --branco: #FFFFFF;
  --texto: #5C544E;
  --linha: rgba(16,15,13,.12);

  --f-corpo: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-destaque: "Archivo", "Arial Black", system-ui, sans-serif;

  --sombra-suave: 0 1px 2px rgba(16,15,13,.04), 0 18px 40px -20px rgba(16,15,13,.28);
  --sombra-forte: 0 2px 4px rgba(16,15,13,.05), 0 34px 60px -28px rgba(16,15,13,.42);
  --ease: cubic-bezier(.22,.7,.2,1);
  --margem: clamp(12px, 3vw, 32px);

  --circulos: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none' stroke='white' stroke-opacity='.045' stroke-width='1.5'><circle cx='120' cy='120' r='30'/><circle cx='120' cy='120' r='60'/><circle cx='120' cy='120' r='90'/><circle cx='120' cy='120' r='120'/></svg>");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-corpo);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--preto);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
section[id] { scroll-margin-top: 80px; }
.ico { width: 1.25em; height: 1.25em; flex: none; }

.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 32px); }
.centro { text-align: center; margin-top: clamp(48px, 6vw, 80px); }

/* ---------- Títulos ---------- */
h1, h2, h3 { font-family: var(--f-corpo); }
h1, h2 { font-weight: 500; letter-spacing: -0.035em; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 4.8vw, 4.2rem); line-height: 1.04; }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.06; }
h1 em, h2 em {
  font-family: var(--f-destaque); font-style: normal; font-weight: 800; font-stretch: 112%;
  letter-spacing: -0.03em; color: var(--vinho);
}
.titulo-centro { text-align: center; max-width: 20ch; margin-inline: auto; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--texto); max-width: 46ch; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  padding: 1.1em 1.9em; border: 0; border-radius: 999px;
  font-family: var(--f-corpo); font-weight: 700; font-size: .8rem; line-height: 1;
  letter-spacing: .09em; text-transform: uppercase; text-decoration: none; text-align: center;
  cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s, color .3s;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--vinho); outline-offset: 3px; }
.btn--grande { padding: 1.3em 2.3em; }
.btn--pequeno { padding: .95em 1.5em; font-size: .74rem; }
.btn--bloco { width: 100%; padding: 1.35em 1.5em; }
/* botão principal (fundo claro) */
.btn--vermelho { background: var(--preto); color: var(--creme); box-shadow: 0 14px 28px -14px rgba(16,15,13,.6); }
.btn--vermelho:hover { background: var(--vinho); box-shadow: 0 18px 32px -14px rgba(187,33,36,.7); }
/* botão principal (fundo escuro/vinho) */
.btn--amarelo { background: var(--creme); color: var(--vinho-fundo); box-shadow: 0 14px 28px -14px rgba(0,0,0,.5); }
.btn--amarelo:hover { background: var(--amarelo); color: var(--preto); }
/* botão do formulário */
.form .btn--vermelho { background: var(--vinho); color: #fff; }
.form .btn--vermelho:hover { background: var(--preto); }

/* ---------- Cabeçalho fixo ---------- */
.topo { position: fixed; inset: 0 0 auto 0; z-index: 50; padding: 16px clamp(16px, 4vw, 32px); transition: padding .35s var(--ease), background-color .35s, box-shadow .35s, transform .45s var(--ease); }
.topo.is-hidden { transform: translateY(-115%); }
.topo__barra { max-width: 1200px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topo.is-scrolled { padding-block: 10px; background: rgba(245,241,234,.86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--linha); }
.topo__logo img { height: 64px; width: auto; transition: height .35s var(--ease); }
.topo.is-scrolled .topo__logo img { height: 52px; }

/* ---------- Fotos (fundo neutro enquanto a foto não chega) ---------- */
.foto { position: relative; overflow: hidden; background: linear-gradient(160deg, #EFE7DA 0%, #DCCDB9 100%); }
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Sessão 1 · Hero ---------- */
.hero { position: relative; isolation: isolate; padding: 0 0 clamp(64px, 8vw, 112px); overflow: hidden; text-align: center; }
.hero__fundo { position: absolute; inset: 0; z-index: -2; background: radial-gradient(60% 55% at 50% 30%, #FBF8F2 0%, transparent 75%), linear-gradient(180deg, #EDE4D6 0%, var(--creme) 70%); }
.hero__cena { position: relative; width: min(640px, 94vw); height: clamp(430px, 56vw, 700px); margin-inline: auto; }
.hero__foto { position: absolute; inset: 0; border-radius: 0; overflow: hidden; background: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 76%, transparent 100%), linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 76%, transparent 100%), linear-gradient(180deg, #000 0%, #000 58%, transparent 100%); mask-composite: intersect; }
.hero__foto img { object-position: center 0%; }
.hero__borrao { display: none; }
/* mancha desfocada na frente da foto (cores do logo), como a folha da referência */
.hero__borrao { position: absolute; z-index: 2; left: -34%; bottom: 6%; width: 56%; aspect-ratio: 1.15; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 60% 40%, var(--laranja) 0%, var(--vermelho) 55%, transparent 72%); filter: blur(40px); opacity: .32; }
.avaliacao { display: inline-flex; align-items: center; justify-content: center; gap: .7em; flex-wrap: wrap; margin-top: 36px; font-size: .9rem; font-weight: 600; color: var(--texto); }
.avaliacao__estrelas { color: var(--laranja); letter-spacing: .12em; font-size: 1.05rem; line-height: 1; }
.hero__texto { position: relative; z-index: 3; margin-top: clamp(-120px, -9vw, -64px); display: flex; flex-direction: column; align-items: center; }
h1 { max-width: 19ch; }
.hero__sub { margin: 26px auto 36px; font-size: clamp(1.05rem, 1.5vw, 1.25rem); max-width: 34em; color: var(--texto); text-wrap: balance; }
.hero__sub strong { color: var(--preto); font-weight: 700; }

/* ---------- Seções ---------- */
.secao { padding: clamp(72px, 10vw, 152px) 0; }
.secao--passos { padding-bottom: clamp(40px, 5vw, 64px); }
.secao--clara { padding-block: clamp(24px, 4vw, 56px) clamp(72px, 9vw, 128px); }

/* ---------- Sessão 2 · Categorias ---------- */
.cards4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.6vw, 40px); }
.card-cat { display: flex; flex-direction: column; text-decoration: none; }
.foto--card { aspect-ratio: 1 / 1.08; border-radius: 28px; background: var(--creme-2); transition: box-shadow .5s var(--ease), transform .5s var(--ease); }
.foto--card img { transition: transform .8s var(--ease); }
.card-cat:hover .foto--card { box-shadow: var(--sombra-forte); transform: translateY(-6px); }
.card-cat:hover .foto--card img { transform: scale(1.05); }
.card-cat__titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 24px; margin-bottom: 10px; }
.card-cat h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.seta { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none; border: 1px solid var(--linha); color: var(--preto); transition: background-color .3s, color .3s, transform .35s var(--ease), border-color .3s; }
.seta .ico { width: 17px; height: 17px; }
.card-cat:hover .seta { background: var(--vinho); border-color: var(--vinho); color: #fff; transform: translateX(4px); }
.card-cat p { font-size: .96rem; color: var(--texto); line-height: 1.6; }

/* ---------- Sessão 3 · Menos de 1 hora ---------- */
.dividida { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: clamp(40px, 7vw, 112px); }
.dividida__texto h2 { max-width: 15ch; }
.dividida__texto .lead { margin: 28px 0 40px; }
.dividida__visual { position: relative; display: grid; place-items: center; min-height: clamp(340px, 42vw, 520px); }
.disco { position: absolute; inset: 0; border-radius: 44px; background: var(--vinho-fundo); overflow: hidden; }
.disco::after { content: ""; position: absolute; inset: 0; background: var(--circulos); background-size: 240px 240px; }
.produto { position: relative; width: 112%; max-width: 640px; aspect-ratio: 5 / 4; }
.produto img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 34px 26px rgba(0,0,0,.4)); }

/* ---------- Sessão 4 · Lentes de contato ---------- */
.lentes { position: relative; isolation: isolate; color: #fff; text-align: center; overflow: hidden;
  width: min(1400px, calc(100% - 2 * var(--margem))); margin: 0 auto; border-radius: clamp(28px, 3.4vw, 48px);
  padding: clamp(80px, 10vw, 152px) 0; }
.lentes__fundo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, var(--vinho-escuro) 0%, #2A0A0C 100%); }
.lentes__fundo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lentes__fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,15,13,.2), rgba(94,16,19,.5)); }
.lentes__conteudo { display: flex; flex-direction: column; align-items: center; }
.lentes h2 em { color: var(--amarelo); }
.lentes h2 { max-width: 18ch; }
.lentes__texto { margin-top: 26px; font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 38em; color: rgba(255,255,255,.86); }
.lentes__preco { margin: 20px 0 44px; font-size: clamp(1.15rem, 2vw, 1.5rem); color: rgba(255,255,255,.9); }
.lentes__preco strong { color: #fff; font-weight: 700; box-shadow: inset 0 -.32em 0 rgba(255,242,0,.55); }

/* ---------- Sessão 5 · Como funciona ---------- */
.passos { position: relative; list-style: none; margin: clamp(56px, 7vw, 96px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 48px); }
.passos::before { display: none; }
.passo { position: relative; display: flex; flex-direction: column; align-items: stretch; }
.foto--passo { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 5; border-radius: 20px; border: 0; box-shadow: var(--sombra-suave); background: linear-gradient(160deg, #EFE3D2 0%, #D3B79B 100%); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.passo:hover .foto--passo { transform: translateY(-6px); box-shadow: var(--sombra-forte); }
.passo__conteudo { padding-top: 24px; }
.passo__num { display: block; margin-bottom: 8px; font-family: var(--f-destaque); font-style: normal; font-weight: 800; font-stretch: 112%; font-size: 1.6rem; letter-spacing: -0.02em; line-height: 1; color: var(--vinho); }
.passo h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 10px; }
.passo p { font-size: .96rem; color: var(--texto); line-height: 1.6; }

/* ---------- Sessão 6 · Por que escolher ---------- */
.porque { position: relative; isolation: isolate; color: #fff; padding: clamp(88px, 11vw, 168px) 0; overflow: hidden; margin-top: 0; }
.porque__fundo { position: absolute; inset: 0; z-index: -1; background: var(--circulos), linear-gradient(160deg, var(--vinho-fundo) 0%, var(--vinho-escuro) 100%); background-size: 240px 240px, auto; }
.porque h2 em { color: var(--amarelo); }
.porque__sub { text-align: center; max-width: 44em; margin: 26px auto 0; font-size: clamp(1.02rem, 1.5vw, 1.15rem); color: rgba(255,255,255,.78); }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(56px, 7vw, 96px); }
.card-motivo { padding: 8px clamp(24px, 3.2vw, 52px); border-left: 1px solid rgba(255,255,255,.2); }
.card-motivo:first-child { border-left: 0; padding-left: 0; }
.card-motivo:last-child { padding-right: 0; }
.card-motivo__icone { display: block; margin-bottom: 28px; color: var(--amarelo); }
.card-motivo__icone .ico { width: 44px; height: 44px; }
.card-motivo h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 14px; }
.card-motivo p { font-size: .98rem; line-height: 1.65; color: rgba(255,255,255,.78); }
.porque .centro { margin-top: clamp(56px, 7vw, 88px); }

/* ---------- Sessão 7 · Imagem de destaque ---------- */
.destaque-img { padding: var(--margem); padding-top: clamp(24px, 4vw, 56px); }
.foto--faixa { max-width: 1400px; height: clamp(300px, 44vw, 600px); margin-inline: auto; border-radius: clamp(28px, 3.4vw, 48px); background: linear-gradient(120deg, #F1E6D6 0%, #D8BFA3 60%, #B98A6A 100%); }

/* ---------- Sessão 8 · Formulário ---------- */
.contato { position: relative; padding: clamp(72px, 10vw, 152px) 0; }
.contato__grade { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(40px, 7vw, 112px); }
.contato__texto h2 { max-width: 19ch; }
.contato__texto .lead { margin: 28px 0 36px; }
.contato__tel { display: inline-flex; align-items: center; gap: .6em; text-decoration: none; font-weight: 600; letter-spacing: -0.02em; font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--preto); transition: color .3s, transform .35s var(--ease); }
.contato__tel .ico { color: var(--vinho); width: 1.05em; height: 1.05em; }
.contato__tel:hover { color: var(--vinho); transform: translateX(4px); }
.form { background: var(--branco); border-radius: 36px; padding: clamp(28px, 3.6vw, 52px); box-shadow: var(--sombra-forte); border: 1px solid rgba(16,15,13,.05); display: grid; gap: 20px; }
.campo { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.campo label, .campo legend { font-weight: 600; font-size: .9rem; padding: 0; color: var(--preto); }
.campo input[type="text"], .campo input[type="tel"], .campo input[type="email"] {
  width: 100%; padding: 1.05em 1.2em; font: inherit; font-size: 1rem; color: var(--preto);
  background: var(--creme); border: 1.5px solid transparent; border-radius: 16px;
  transition: border-color .25s, background-color .25s, box-shadow .25s;
}
.campo input::placeholder { color: #A29A91; }
.campo input:focus { outline: none; background: #fff; border-color: var(--vinho); box-shadow: 0 0 0 4px rgba(187,33,36,.12); }
.campo input.is-invalid { border-color: var(--vermelho); background: #FFF4F3; }
.campo--opcoes { gap: 12px; }
.opcao { display: flex; align-items: center; gap: .7em; font-weight: 500 !important; cursor: pointer; }
.opcao input { width: 20px; height: 20px; accent-color: var(--vinho); flex: none; margin: 0; }
.form .btn { margin-top: 6px; }

/* ---------- Sessão 9 · Mapa ---------- */
.mapa { position: relative; width: min(1400px, calc(100% - 2 * var(--margem))); margin: 0 auto clamp(48px, 6vw, 88px); height: clamp(340px, 42vw, 480px); border-radius: clamp(28px, 3.4vw, 48px); overflow: hidden; background: var(--creme-2); }
.mapa__link { position: absolute; inset: 0; z-index: 3; cursor: pointer; transition: background-color .3s; }
.mapa__link:hover { background: rgba(255,255,255,.08); }
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.85) contrast(1.05) sepia(.08); }
.mapa__cartao { position: absolute; z-index: 2; top: 20px; left: 20px; display: flex; gap: 12px; align-items: flex-start; max-width: min(360px, calc(100% - 40px)); padding: 18px 22px; background: #fff; border-radius: 20px; box-shadow: var(--sombra-suave); font-size: .9rem; line-height: 1.5; }
.mapa__cartao strong { display: block; font-size: 1rem; font-weight: 700; }
.mapa__cartao span { display: block; color: var(--texto); }
.mapa__pin { width: 26px; height: 26px; color: var(--vinho); margin-top: 2px; }
.mapa__nota { margin-top: 4px; color: var(--preto) !important; }
.mapa__nota i { color: var(--laranja); font-style: normal; }

/* ---------- Sessão 10 · Rodapé ---------- */
.rodape { background: var(--preto); color: rgba(255,255,255,.7); padding: 28px 0; font-size: .8rem; letter-spacing: .05em; }
.rodape__linha { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.rodape a { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(255,242,0,.7); }
.rodape a:hover { color: var(--amarelo); }

/* ---------- Botão flutuante do WhatsApp ---------- */
.zap { position: fixed; right: clamp(16px, 2.4vw, 28px); bottom: clamp(16px, 2.4vw, 28px); z-index: 60; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #25D366; color: #fff; text-decoration: none; box-shadow: 0 16px 30px -10px rgba(16,15,13,.5); transition: transform .35s var(--ease); }
.zap .ico { width: 32px; height: 32px; }
.zap:hover { transform: scale(1.08); }
.zap::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #25D366; z-index: -1; animation: pulso 2.8s ease-out infinite; }
@keyframes pulso { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.6); opacity: 0; } }

/* ---------- Animações de entrada ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .zap::before { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* ==========================================================
   Responsivo
   ========================================================== */
@media (max-width: 1080px) {
  .cards4 { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
  .passos { grid-template-columns: repeat(2, 1fr); row-gap: 56px; }
  .passos::before { display: none; }
}

@media (max-width: 900px) {
  .dividida, .contato__grade { grid-template-columns: 1fr; }
  .dividida__texto h2, .contato__texto h2 { max-width: none; }
  .dividida__visual { order: 2; min-height: 320px; }
  .produto { width: 100%; }
  .cards3 { grid-template-columns: 1fr; }
  .card-motivo, .card-motivo:first-child, .card-motivo:last-child { padding: 36px 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.2); }
  .card-motivo:first-child { border-top: 0; padding-top: 0; }
  .card-motivo:last-child { padding-bottom: 0; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .topo { padding: 10px 16px; }
  .topo__logo img, .topo.is-scrolled .topo__logo img { height: 50px; }
  .topo .btn { display: none; }
  .btn--grande { width: 100%; padding: 1.3em 1.2em; }
  .cards4 { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .passos { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .avaliacao { font-size: .8rem; margin-bottom: 22px; }
  .hero__sub { margin: 22px auto 30px; }
  .hero__borrao { display: none; }
  .avaliacao { font-size: .82rem; margin-top: 28px; }
  .form { border-radius: 28px; }
  .mapa__cartao { top: 12px; left: 12px; padding: 14px 16px; font-size: .82rem; max-width: calc(100% - 24px); }
  .rodape__linha { flex-direction: column; text-align: center; }
  .zap { width: 56px; height: 56px; }
  .zap .ico { width: 30px; height: 30px; }
}