/* 1. Identidade e base */
:root { --blue:#102b70; --blue-deep:#091d4c; --blue-mid:#24458d; --ink:#17233b; --muted:#586579; --paper:#fffefa; --cream:#f5f2e9; --line:#dfe3eb; --gold:#d8bd82; --serif:'Playfair Display',Georgia,serif; --sans:'DM Sans',Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:110px; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); line-height:1.7; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button { font:inherit; }
:focus-visible { outline:3px solid #b38b40; outline-offset:5px; }
.container { width:min(1160px,calc(100% - 48px)); margin-inline:auto; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:var(--serif); font-weight:500; letter-spacing:-.035em; line-height:1.15; }
h1 { font-size:clamp(44px,5.2vw,66px); margin-bottom:26px; }
h2 { font-size:clamp(34px,4vw,49px); margin-bottom:24px; }
.section-pad { padding-block:100px; }
.eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 20px; color:var(--blue); text-transform:uppercase; letter-spacing:.14em; font-size:11px; font-weight:700; }
.eyebrow > span { width:25px; height:1px; background:currentColor; flex-shrink:0; }
.eyebrow.light { color:var(--gold); }
.skip-link { position:fixed; top:12px; left:16px; z-index:100; padding:10px 16px; background:white; transform:translateY(-160%); }
.skip-link:focus { transform:none; }
/* 2. Cabeçalho e navegação progressiva */
.site-header { position:sticky; top:0; z-index:20; background:rgba(255,254,250,.98); border-bottom:1px solid var(--line); }
.header-inner { min-height:92px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; color:var(--blue); }
.brand img { width:58px; height:58px; object-fit:contain; border-radius:50%; }
.brand span { display:grid; line-height:1.15; font-family:var(--serif); }
.brand strong { font-size:19px; }
.brand small { margin-top:5px; font-family:var(--sans); font-size:11px; letter-spacing:.15em; text-transform:uppercase; }
.main-nav { display:flex; align-items:center; gap:28px; font-size:14px; font-weight:500; }
.main-nav > a { position:relative; min-height:44px; display:inline-flex; align-items:center; }
.main-nav > a:not(.nav-cta)::after { content:''; position:absolute; bottom:5px; left:0; height:1px; width:100%; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .22s; }
.main-nav > a:hover::after,.main-nav > a[aria-current]::after { transform:scaleX(1); }
.nav-cta { background:var(--blue); color:white; padding:10px 17px; border-radius:3px; transition:background .2s,transform .2s; }
.menu-toggle { display:none; background:transparent; border:1px solid var(--line); border-radius:3px; padding:9px; min-width:46px; min-height:46px; cursor:pointer; }
.menu-toggle span { display:block; width:22px; height:2px; margin:4px; background:var(--blue); transition:transform .2s,opacity .2s; }
.menu-toggle[aria-expanded=true] span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded=true] span:nth-child(2) { opacity:0; }
.menu-toggle[aria-expanded=true] span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
/* 3. Abertura — fachada real, à direita */
.hero { min-height:640px; position:relative; display:flex; align-items:center; overflow:hidden; background:var(--blue-deep); color:white; }
.hero-photo { position:absolute; inset:0 0 0 auto; width:40%; overflow:hidden; }
.hero-photo img { width:100%; height:100%; object-fit:cover; object-position:center 35%; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,#091d4c 0%,#091d4c 55%,rgba(9,29,76,.25) 76%,rgba(9,29,76,.04)); pointer-events:none; }
.hero-content { position:relative; z-index:1; padding-block:95px 125px; }
.hero h1 { max-width:650px; }
h1 em { color:#e7d5a6; font-weight:500; }
.hero-copy { max-width:440px; color:#e0e5ef; font-size:17px; line-height:1.85; margin-bottom:32px; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:22px; max-width:600px; }
.hero-note { position:absolute; left:max(24px,calc((100vw - 1160px)/2)); bottom:34px; z-index:1; display:flex; align-items:center; gap:12px; font-size:12px; color:#e0e5ef; }
.note-line { width:35px; height:1px; background:var(--gold); flex-shrink:0; }
/* 4. Controles */
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:13px 20px; border:1px solid transparent; border-radius:3px; font-size:13px; font-weight:700; transition:transform .22s,background .22s,color .22s,box-shadow .22s; }
.button span,.nav-cta span { margin-left:10px; }
.button-light { background:white; color:var(--blue); }
.button-blue { background:var(--blue); color:white; }
.button-outline { border-color:var(--blue); color:var(--blue); }
.text-link { display:inline-flex; align-items:center; gap:12px; min-height:44px; color:var(--blue); font-size:13px; font-weight:700; }
.text-link span { transition:transform .22s; }
.light-link { color:white; }
/* 5. Acervo e história */
.intro { background:var(--cream); border-bottom:1px solid #e3ded2; }
.intro-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:70px; }
.collection-heading { margin:0; }
.collection-number { display:block; color:var(--blue); font-size:clamp(76px,9vw,116px); line-height:1; letter-spacing:-.065em; }
.collection-number > span { display:inline-block; margin-left:8px; color:#806026; font-size:.43em; vertical-align:top; padding-top:.12em; }
.collection-label { display:block; margin-top:18px; font-size:clamp(24px,2.6vw,32px); line-height:1.3; }
.intro-text p,.story-content > p:not(.eyebrow) { color:var(--muted); font-size:16px; line-height:1.85; }
.story-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(48px,8vw,100px); }
.story-image { width:100%; max-width:390px; justify-self:center; position:relative; padding:0 0 30px 20px; }
.story-image::before { content:''; position:absolute; top:-20px; left:0; width:60%; height:70%; background:var(--cream); z-index:-1; }
.story-image img { width:100%; height:auto; aspect-ratio:287/510; object-fit:cover; }
.image-caption { position:absolute; right:-12px; bottom:0; display:flex; align-items:center; gap:15px; width:min(275px,85%); padding:18px 22px; background:var(--paper); border-bottom:2px solid var(--gold); font-family:var(--serif); font-size:16px; color:var(--blue); }
.caption-mark { font-size:32px; color:#806026; }
.signature { display:flex; align-items:center; gap:13px; margin-top:28px; color:var(--blue); }
.signature-line { width:42px; height:1px; background:#a88847; }
.signature strong { font-family:var(--serif); font-size:21px; }
.signature small { color:var(--muted); }
/* 6. Livraria e sebo */
.discover { background:#f5f4f0; }
.section-heading { max-width:740px; margin:0 auto 44px; text-align:center; }
.section-heading .eyebrow { justify-content:center; }
.section-heading h2 { margin-bottom:18px; }
.section-heading > p:last-child { color:var(--muted); font-size:16px; }
.collection-topics { margin-bottom:48px; padding-block:26px; border-block:1px solid #d9d3c8; text-align:center; }
.collection-topics h3 { font-family:var(--serif); font-size:24px; color:var(--blue); font-weight:500; }
.collection-topics ul { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; padding:0; margin:0; list-style:none; color:var(--blue); }
.collection-topics p { max-width:580px; margin:20px auto 0; color:var(--muted); font-size:14px; }
.discover-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.discover-card { min-width:0; }
.photo-frame { overflow:hidden; }
.discover-card img { width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; transition:transform .6s; }
.card-copy { border-top:1px solid #cfc7b7; margin-top:18px; padding-top:25px; }
.card-number { color:#79633f; font-size:11px; letter-spacing:.12em; }
.card-copy h3 { color:var(--blue); font-family:var(--serif); font-size:26px; line-height:1.3; margin:10px 0; }
.card-copy p { color:var(--muted); font-size:15px; line-height:1.8; margin:0; }
.discover-cta { display:flex; justify-content:center; align-items:center; gap:25px; margin-top:45px; }
.discover-cta p { margin:0; }
/* 7. Avaliações, dúvidas e visita */
.reviews { background:var(--cream); border-block:1px solid #e3ded2; }
.reviews-grid { display:grid; grid-template-columns:1fr 1fr; gap:54px; }
.review { margin:0; padding:24px 0; border-top:1px solid #c9b991; }
.review-stars { color:#806026; letter-spacing:.18em; }
.review blockquote { margin:20px 0; font-family:var(--serif); font-size:clamp(23px,2.6vw,29px); line-height:1.5; color:var(--blue); }
.review blockquote p { margin:0; }
.review figcaption { color:var(--muted); font-size:13px; }
.questions-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; }
.questions-heading > p:not(.eyebrow) { max-width:360px; color:var(--muted); }
.questions-list { border-top:1px solid var(--line); }
.questions-list details { border-bottom:1px solid var(--line); }
.questions-list summary { position:relative; padding:24px 30px 24px 0; cursor:pointer; list-style:none; font-size:17px; line-height:1.5; color:var(--blue); }
.questions-list summary::-webkit-details-marker { display:none; }
.questions-list summary::after { content:'+'; position:absolute; top:24px; right:3px; font-size:24px; line-height:1; color:#79633f; }
.questions-list details[open] summary::after { content:'−'; }
.answer { padding:0 24px 26px 0; color:var(--muted); font-size:15px; line-height:1.8; }
.answer a { color:var(--blue); text-decoration:underline; text-underline-offset:4px; }
.visit { background:var(--blue-deep); color:white; }
.visit-grid { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:70px; }
.visit-lead { color:#cbd3e2; max-width:440px; margin-bottom:32px; }
.visit-details { display:grid; gap:23px; margin-bottom:32px; }
.detail-item { display:flex; align-items:flex-start; gap:15px; }
.detail-icon { width:36px; height:36px; flex-shrink:0; border:1px solid #71809d; border-radius:50%; display:grid; place-items:center; color:var(--gold); font-size:20px; }
.detail-item strong { font-size:14px; }
.detail-item p { margin:4px 0; font-size:14px; color:#cbd3e2; }
.detail-item a { display:inline-block; min-height:30px; color:#e7d5a6; font-size:14px; }
.map-frame { position:relative; min-height:460px; background:#dce3ec; }
.map-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.map-label { position:absolute; left:18px; bottom:18px; display:flex; align-items:center; gap:11px; max-width:calc(100% - 36px); padding:12px 16px; background:white; color:var(--blue); pointer-events:none; }
.map-dot { width:9px; height:9px; background:#977125; border-radius:50%; flex-shrink:0; }
.map-label strong,.map-label small { display:block; }
.map-label small { color:var(--muted); }
/* 8. Redes e rodapé */
.social { padding-block:70px; }
.social-inner { display:flex; align-items:center; gap:25px; }
.social-icon { flex-shrink:0; color:var(--blue); }
.social-icon svg { width:32px; height:32px; }
.social-inner > div:nth-child(2) { flex:1; }
.social-inner h2 { font-size:28px; margin-bottom:8px; }
.social-inner .eyebrow { margin-bottom:10px; }
.social-inner p:last-child { color:var(--muted); margin:0; }
.site-footer { background:#07183f; color:white; padding-block:36px 25px; }
.footer-inner { display:grid; grid-template-columns:auto 1fr auto; gap:24px 35px; align-items:center; }
.footer-brand { color:white; }
.footer-brand img { width:48px; height:48px; }
.footer-brand strong { font-size:17px; }
.footer-brand small { font-size:10px; }
.footer-inner > p { margin:0; font-size:13px; color:#bdc5d1; }
.footer-links { display:flex; gap:20px; font-size:14px; }
.footer-links a { min-height:44px; display:inline-flex; align-items:center; }
.copyright { grid-column:1/-1; border-top:1px solid #3e4b67; padding:20px 70px 0 0; color:#acb5c5; font-size:12px; }
.whatsapp-float { position:fixed; right:22px; bottom:22px; z-index:30; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:#147a49; color:white; box-shadow:0 6px 22px #0003; transition:transform .2s,background .2s; }
.whatsapp-float svg { width:27px; height:27px; fill:currentColor; }
/* 9. Movimento: somente efeitos discretos e sem dependência para ler o conteúdo. */
[data-reveal] { transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1); }
.reveal-pending { opacity:0; transform:translateY(22px); }
@media (hover:hover) and (pointer:fine) {
  .button:hover,.nav-cta:hover { transform:translateY(-2px); box-shadow:0 5px 15px #091d4c18; }
  .button-light:hover { background:#f1e7cc; }
  .button-blue:hover,.nav-cta:hover { background:var(--blue-mid); }
  .button-outline:hover { background:var(--blue); color:white; }
  .text-link:hover span { transform:translateX(4px); }
  .discover-card:hover img { transform:scale(1.035); }
  .whatsapp-float:hover { transform:translateY(-3px); background:#10633c; }
}
/* 10. Tablet */
@media (min-width:801px) and (max-width:1050px) {
  .main-nav { gap:17px; font-size:13px; }
  .hero h1 { max-width:58%; font-size:48px; }
  .hero-copy { max-width:50%; }
  .hero-actions { max-width:55%; gap:16px; }
  .visit-grid { gap:35px; }
  .questions-grid { gap:45px; }
}
/* 11. Celular e tablet compacto */
@media (max-width:800px) {
  html { scroll-padding-top:95px; }
  .container { width:min(560px,calc(100% - 36px)); }
  .section-pad { padding-block:64px; }
  .header-inner { min-height:76px; flex-wrap:wrap; gap:0; }
  .brand img { width:49px; height:49px; }
  .brand strong { font-size:17px; }
  .brand small { font-size:10px; }
  .main-nav { width:100%; flex-direction:column; align-items:stretch; gap:0; padding:12px 0 18px; }
  .main-nav > a { min-height:48px; padding:10px 8px; }
  .nav-cta { margin-top:10px; justify-content:center; }
  .main-nav > a:not(.nav-cta)::after { width:40px; bottom:4px; left:8px; }
  .menu-ready .menu-toggle { display:block; margin-left:auto; }
  .menu-ready .main-nav { display:none; }
  .menu-ready .main-nav.is-open { display:flex; }
  .hero { display:flex; flex-direction:column; align-items:stretch; min-height:0; }
  .hero-content { padding-block:54px 38px; }
  .hero h1 { font-size:clamp(36px,10vw,57px); }
  .hero .eyebrow { font-size:10px; letter-spacing:.07em; gap:8px; }
  .hero .eyebrow > span { width:15px; }
  .hero-copy { font-size:16px; }
  .hero-actions { flex-direction:column; align-items:flex-start; gap:14px; }
  .hero-photo { position:relative; order:1; inset:auto; width:min(560px,calc(100% - 36px)); height:380px; margin-inline:auto; }
  .hero-photo img { object-position:center 30%; }
  .hero-shade { display:none; }
  .hero-note { position:relative; order:2; inset:auto; padding:22px 18px 30px; font-size:11px; }
  .intro-grid,.story-grid,.visit-grid,.questions-grid,.reviews-grid { grid-template-columns:1fr; gap:30px; }
  .collection-number { font-size:clamp(76px,22vw,105px); }
  .collection-label { font-size:26px; }
  .story-image { max-width:340px; margin:12px 8px 12px 0; }
  .image-caption { right:-8px; }
  .discover-grid { grid-template-columns:1fr; gap:38px; }
  .discover-card .photo-frame { max-height:440px; }
  .discover-card img { aspect-ratio:4/5; }
  .collection-topics { margin-bottom:32px; }
  .collection-topics ul { gap:10px 20px; font-size:15px; }
  .collection-topics h3 { font-size:23px; }
  .discover-cta { flex-direction:column; gap:14px; text-align:center; }
  .map-frame { min-height:360px; }
  .social-inner { flex-wrap:wrap; gap:18px; }
  .social-inner h2 { font-size:25px; }
  .social-inner > div:nth-child(2) { flex-basis:calc(100% - 60px); }
  .footer-inner { grid-template-columns:1fr; gap:16px; }
  .footer-links { flex-wrap:wrap; }
  .copyright { padding-right:65px; }
  .whatsapp-float { right:16px; bottom:max(16px,env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none !important; animation:none !important; }
  .reveal-pending { opacity:1; transform:none; }
}
