:root{
    /* Paleta extraída diretamente da identidade visual da Óticas Godoy */
    --navy-900:#002460;
    --navy-700:#0C3A82;
    --navy-500:#1857B0;
    --navy-100:#E8EEF9;
    --amber:#FEB500;
    --amber-dark:#D99A00;
    --white:#FFFFFF;
    --neutral-100:#F6F8FA;
    --neutral-200:#E9EEF2;
    --neutral-600:#5B6B7A;
    --ink:#0A1F3D;
    --whatsapp:#25D366;
    --whatsapp-dark:#1DA851;

    --font-display:'Sora', sans-serif;
    --font-body:'Inter', sans-serif;
    --font-mono:'IBM Plex Mono', monospace;

    --radius:16px;
    --shadow-sm: 0 2px 10px rgba(0,36,96,0.10);
    --shadow-md: 0 14px 34px rgba(0,36,96,0.18);
    --container: 1120px;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--font-body);
    color:var(--ink);
    background:var(--white);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img,svg{display:block; max-width:100%;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  .wrap{ width:100%; max-width:var(--container); margin:0 auto; padding:0 20px; }
  h1,h2,h3{font-family:var(--font-display); color:var(--navy-900); line-height:1.15;}
  .eyebrow{
    font-family:var(--font-mono);
    font-size:12.5px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--navy-500);
    font-weight:500;
    display:inline-flex;
    align-items:center;
    gap:8px;
  }
  .eyebrow::before{ content:""; width:18px; height:1px; background:var(--navy-500); display:inline-block; }
  section{padding:76px 0;}
  @media(max-width:640px){ section{padding:52px 0;} }

  /* ---------- BOTÕES ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    font-family:var(--font-display); font-weight:700; font-size:16.5px;
    padding:16px 28px; border-radius:999px; border:none; cursor:pointer;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
    white-space:nowrap;
  }
  .btn-whats{ background:var(--whatsapp); color:#fff; box-shadow:0 10px 24px rgba(37,211,102,.35); }
  .btn-whats:hover{ background:var(--whatsapp-dark); transform:translateY(-2px); box-shadow:0 14px 30px rgba(37,211,102,.45); }
  .btn-whats:active{ transform:translateY(0); }
  .btn-outline{ background:transparent; color:var(--navy-900); border:1.5px solid var(--navy-900); box-shadow:none; }
  .btn-outline:hover{ background:var(--navy-900); color:#fff; }
  .btn svg{width:20px; height:20px; flex-shrink:0;}

  /* ---------- TOPO ---------- */
  header{
    position:sticky; top:0; z-index:40;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--neutral-200);
  }
  .header-inner{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
  .logo-img{ height:38px; width:auto; border-radius:8px; }
  .header-cta{ font-size:14.5px; padding:11px 20px; }
  .header-cta .btn-label-full{ display:inline; }
  .header-cta .btn-label-short{ display:none; }
  @media(max-width:480px){
    .header-cta .btn-label-full{ display:none; }
    .header-cta .btn-label-short{ display:inline; }
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    padding:56px 0 60px;
    background:
      radial-gradient(1100px 500px at 85% -10%, var(--navy-100) 0%, transparent 60%),
      linear-gradient(180deg, #FFFFFF 0%, #FBFDFE 100%);
    overflow:hidden;
  }
  .eyechart-bg{
    position:absolute; right:-40px; top:10px;
    font-family:var(--font-mono); font-weight:500; color:var(--navy-900);
    opacity:.05; line-height:.95; text-align:center;
    user-select:none; pointer-events:none; letter-spacing:.08em;
  }
  .eyechart-bg div:nth-child(1){font-size:120px;}
  .eyechart-bg div:nth-child(2){font-size:88px;}
  .eyechart-bg div:nth-child(3){font-size:62px;}
  .eyechart-bg div:nth-child(4){font-size:42px;}
  @media(max-width:768px){ .eyechart-bg{ display:none; } }

  .hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
  @media(max-width:900px){ .hero-grid{ grid-template-columns:1fr; gap:34px; } }

  .promo-pill{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--navy-100); color:var(--navy-900);
    border:1px solid rgba(0,36,96,.12);
    font-family:var(--font-display); font-weight:600; font-size:12.5px;
    padding:8px 14px; border-radius:999px;
    margin-bottom:16px;
  }
  .promo-pill svg{ width:15px; height:15px; color:var(--navy-500); }
  .promo-pill strong{ color:var(--navy-700); font-weight:700; }

  .hero h1{ font-size:clamp(30px, 4.2vw, 44px); margin:6px 0 18px; letter-spacing:-0.01em; }
  .hero h1 em{ font-style:normal; color:var(--navy-500); }
  .hero p.lead{ font-size:17.5px; color:var(--neutral-600); max-width:540px; margin-bottom:30px; }
  .hero-actions{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
  .hero-actions .btn-whats{ font-size:18px; padding:18px 32px; }

  .trust-row{ display:flex; flex-wrap:wrap; gap:22px; margin-top:34px; font-size:14px; color:var(--neutral-600); }
  .trust-row .item{ display:flex; align-items:center; gap:8px; font-weight:500; }
  .trust-row svg{ width:16px; height:16px; color:var(--navy-500); flex-shrink:0; }
  .stars{ color:var(--amber-dark); letter-spacing:1px; }

  .hero-visual{ position:relative; }
  .facade-card{
    position:relative;
    border-radius:22px;
    overflow:hidden;
    box-shadow:var(--shadow-md);
    border:1px solid var(--neutral-200);
  }
  .facade-card img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }
  .facade-badge{
    position:absolute; left:18px; bottom:18px;
    background:rgba(0,36,96,.92);
    color:#fff;
    padding:12px 16px;
    border-radius:12px;
    font-family:var(--font-mono);
    font-size:12.5px;
    display:flex; align-items:center; gap:8px;
    backdrop-filter:blur(4px);
  }
  .facade-badge strong{ color:var(--amber); font-family:var(--font-display); font-size:13px; }

  /* ---------- VITRINE / MARCAS ---------- */
  .showcase-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:22px; align-items:stretch; }
  @media(max-width:760px){ .showcase-grid{ grid-template-columns:1fr; } }
  .showcase-photo{
    position:relative; border-radius:var(--radius); overflow:hidden;
    border:1px solid var(--neutral-200); box-shadow:var(--shadow-sm);
    min-height:280px;
  }
  .showcase-photo img{ width:100%; height:100%; object-fit:cover; min-height:280px; }
  .showcase-photo::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(0,36,96,.6) 0%, transparent 45%);
  }
  .showcase-caption{
    position:absolute; left:16px; bottom:14px; z-index:1; color:#fff;
    font-family:var(--font-display); font-weight:700; font-size:14px;
  }
  .showcase-caption span{
    display:block; font-family:var(--font-mono); font-weight:500; font-size:11.5px;
    color:var(--amber); margin-top:2px; letter-spacing:.04em;
  }
  .brand-row{
    display:flex; flex-wrap:wrap; gap:10px; margin-top:18px;
  }
  .brand-chip{
    font-family:var(--font-mono); font-size:12px; font-weight:500;
    color:var(--navy-700); background:var(--navy-100);
    padding:7px 13px; border-radius:999px;
  }

  /* ---------- PROVA SOCIAL ---------- */
  .social-proof{ background:var(--neutral-100); }
  .section-head{ max-width:640px; margin-bottom:38px; }
  .section-head h2{ font-size:clamp(24px,3vw,32px); margin-top:12px; }
  .section-head p{ color:var(--neutral-600); margin-top:10px; font-size:15.5px; }

  .testimonial-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
  @media(max-width:860px){ .testimonial-grid{ grid-template-columns:1fr; } }

  .t-card{
    background:#fff; border-radius:var(--radius); padding:26px 24px;
    box-shadow:var(--shadow-sm); border:1px solid var(--neutral-200);
    opacity:0; transform:translateY(16px);
    transition:opacity .5s ease, transform .5s ease;
  }
  .t-card.in-view{ opacity:1; transform:none; }
  .t-card .stars{ font-size:15px; margin-bottom:12px; display:block; }
  .t-card p{ font-size:15px; color:var(--ink); margin-bottom:16px; }
  .t-author{ display:flex; align-items:center; gap:10px; }
  .t-avatar{
    width:38px; height:38px; border-radius:50%;
    background:var(--navy-100); color:var(--navy-700);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:700; font-size:14px;
    flex-shrink:0;
  }
  .t-name{ font-size:14px; font-weight:600; color:var(--navy-900); }
  .t-loc{ font-size:12.5px; color:var(--neutral-600); }

  /* ---------- SERVIÇOS ---------- */
  .services-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
  @media(max-width:900px){ .services-grid{ grid-template-columns:1fr 1fr; } }
  @media(max-width:560px){ .services-grid{ grid-template-columns:1fr; } }

  .s-card{
    position:relative;
    padding:28px 22px; border-radius:var(--radius);
    background:var(--white); border:1px solid var(--neutral-200);
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    opacity:0; transform:translateY(16px);
  }
  .s-card.in-view{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease; }
  .s-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; }
  .s-icon{
    width:46px; height:46px; border-radius:12px;
    background:var(--navy-100); color:var(--navy-700);
    display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  }
  .s-icon svg{ width:24px; height:24px; }
  .s-card h3{ font-size:17px; margin-bottom:8px; }
  .s-card p{ font-size:14.5px; color:var(--neutral-600); }
  .s-tag{
    position:absolute; top:22px; right:22px;
    background:var(--amber); color:var(--navy-900);
    font-family:var(--font-mono); font-size:11px; font-weight:500;
    padding:4px 9px; border-radius:999px;
  }

  /* ---------- DIFERENCIAIS ---------- */
  .diff{ background:var(--navy-900); color:#fff; position:relative; overflow:hidden; }
  .diff .eyechart-bg{ opacity:.07; color:#fff; }
  .diff-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:50px; align-items:center; position:relative; z-index:1; }
  @media(max-width:860px){ .diff-grid{ grid-template-columns:1fr; gap:30px; } }
  .diff .eyebrow{ color:var(--amber); }
  .diff .eyebrow::before{ background:var(--amber); }
  .diff h2{ color:#fff; font-size:clamp(24px,3vw,32px); margin-top:12px; }
  .diff-list{ display:flex; flex-direction:column; gap:4px; }
  .diff-item{ display:flex; align-items:center; gap:16px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.14); }
  .diff-item:last-child{ border-bottom:none; }
  .diff-mark{
    font-family:var(--font-mono); font-weight:500; color:var(--amber);
    flex-shrink:0; width:56px; text-align:center;
  }
  .diff-item:nth-child(1) .diff-mark{ font-size:30px; }
  .diff-item:nth-child(2) .diff-mark{ font-size:26px; }
  .diff-item:nth-child(3) .diff-mark{ font-size:20px; }
  .diff-item:nth-child(4) .diff-mark{ font-size:18px; }
  .diff-item:nth-child(5) .diff-mark{ font-size:15px; }
  .diff-text strong{ display:block; font-size:15.5px; margin-bottom:2px; }
  .diff-text span{ font-size:13.5px; color:#AFC4E8; }

  /* ---------- CTA BANNER ---------- */
  .cta-banner{
    background:linear-gradient(120deg, var(--navy-700), var(--navy-900));
    border-radius:24px; padding:48px 36px; text-align:center; color:#fff;
    margin-inline:auto; max-width:calc(var(--container) - 40px);
    position:relative; overflow:hidden;
  }
  .cta-banner::after{
    content:""; position:absolute; inset:0;
    background:radial-gradient(400px 200px at 90% 0%, rgba(254,181,0,.18), transparent 70%);
  }
  .cta-banner > *{ position:relative; z-index:1; }
  .cta-banner h2{ color:#fff; font-size:clamp(22px,3vw,30px); margin-bottom:10px; }
  .cta-banner p{ color:#CBDBF5; margin-bottom:26px; font-size:15.5px; }
  .cta-banner .btn-outline{ background:var(--amber); color:var(--navy-900); border-color:var(--amber); }
  .cta-banner .btn-outline:hover{ background:transparent; color:var(--amber); }

  /* ---------- LOCALIZAÇÃO ---------- */
  .location-grid{ display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:stretch; }
  @media(max-width:860px){ .location-grid{ grid-template-columns:1fr; } }
  .loc-info h2{ font-size:clamp(22px,3vw,28px); margin:12px 0 14px; }
  .loc-info p{ color:var(--neutral-600); font-size:15.5px; margin-bottom:20px; max-width:480px; }
  .loc-details{ display:flex; flex-direction:column; gap:14px; margin-bottom:26px; }
  .loc-row{ display:flex; gap:12px; align-items:flex-start; font-size:14.5px; }
  .loc-row svg{ width:20px; height:20px; color:var(--navy-500); flex-shrink:0; margin-top:1px; }
  .loc-row strong{ display:block; color:var(--navy-900); font-size:14.5px; }
  .loc-row span{ color:var(--neutral-600); }
  .loc-actions{ display:flex; flex-wrap:wrap; gap:12px; }

  .loc-photo{
    border-radius:var(--radius); overflow:hidden; border:1px solid var(--neutral-200);
    box-shadow:var(--shadow-sm); position:relative; min-height:320px;
  }
  .loc-photo img{ width:100%; height:100%; object-fit:cover; min-height:320px; }
  .loc-photo::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(0,36,96,.55) 0%, transparent 40%);
  }
  .loc-photo-caption{
    position:absolute; left:16px; bottom:14px; z-index:1;
    color:#fff; font-family:var(--font-display); font-weight:700; font-size:14px;
  }

  /* ---------- FOOTER ---------- */
  footer{ background:var(--neutral-100); border-top:1px solid var(--neutral-200); padding:32px 0; }
  .footer-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; }
  .footer-copy{ font-size:13px; color:var(--neutral-600); }

  /* ---------- BOTÃO FLUTUANTE WHATSAPP ---------- */
  .float-whats{
    position:fixed; right:18px; bottom:18px; z-index:50;
    width:60px; height:60px; border-radius:50%;
    background:var(--whatsapp);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 26px rgba(37,211,102,.45);
    animation:pulse 2.6s infinite;
  }
  .float-whats svg{ width:30px; height:30px; color:#fff; }
  .float-whats:hover{ background:var(--whatsapp-dark); }
  @keyframes pulse{
    0%{ box-shadow:0 0 0 0 rgba(37,211,102,.45); }
    70%{ box-shadow:0 0 0 16px rgba(37,211,102,0); }
    100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
    html{ scroll-behavior:auto; }
  }

  a:focus-visible, button:focus-visible{ outline:3px solid var(--navy-500); outline-offset:2px; }