/* ==========================================================
   HOME.CSS — visual da página inicial (index.html)
   Tudo aqui vale só dentro de <body class="home">, então não
   mexe na coleção, no checkout nem nas outras páginas.
   ========================================================== */
.home{
  --sand:#EDE4D3; --gold-2:#C9A46A; --sea:#2F6F8F; --navy-2:#13263A;
  --serif:'Cormorant Garamond', Georgia, serif; --caps:'Cinzel', Georgia, serif;
  background:#F6F1E7;
}
.home .h-wrap{ max-width:1180px; margin:0 auto; padding:0 20px; }
.home .h-eyebrow{ font-size:10.5px; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.home .h-btn{ display:inline-flex; align-items:center; justify-content:center; height:52px; padding:0 30px; font-family:'Montserrat',sans-serif; font-weight:600;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; border:1px solid transparent; cursor:pointer; border-radius:0;
  transition:transform .25s ease, background .25s ease, color .25s ease, opacity .25s ease; }
.home .h-btn:hover{ transform:translateY(-2px); }
.home .h-btn:disabled{ opacity:.5; cursor:default; transform:none; }
.home .h-btn-light{ background:var(--cream); color:var(--navy); }
.home .h-btn-ghost{ border-color:rgba(246,244,238,.6); color:var(--cream); background:transparent; }
.home .h-btn-ghost:hover{ background:rgba(246,244,238,.12); }
.home .h-btn-navy{ background:var(--navy); color:var(--cream); width:100%; }
.home .h-btn-navy.added{ background:#1B3D2D; }

/* ---------- Faixa de avisos rolando ---------- */
.home .h-ticker{ background:var(--navy); color:var(--sand); overflow:hidden; white-space:nowrap; font-size:10px; letter-spacing:.28em; height:34px; display:flex; align-items:center; }
.home .h-ticker-track{ display:inline-flex; gap:48px; padding-left:48px; animation:hTicker 34s linear infinite; }
.home .h-ticker-track span::after{ content:'✦'; color:var(--gold); margin-left:48px; }
@keyframes hTicker{ to{ transform:translateX(-50%); } }

/* ---------- Header transparente sobre a foto ---------- */
.home header{ background:transparent; border-bottom-color:transparent; backdrop-filter:none; color:var(--cream); transition:background .3s ease, color .3s ease, border-color .3s ease; }
.home header .icon-btn{ color:var(--cream); }
.home header .logo .sub{ color:var(--gold-2); }
.home header.scrolled,
.home header:has(.mobile-menu.open),
.home header:has(.search-bar.open){ background:rgba(246,244,238,.95); backdrop-filter:blur(6px); border-bottom-color:var(--line); color:var(--navy); }
.home header.scrolled .icon-btn,
.home header:has(.mobile-menu.open) .icon-btn,
.home header:has(.search-bar.open) .icon-btn{ color:var(--navy); }
.home header.scrolled .logo .sub{ color:var(--gold); }

/* ---------- Abertura (hero) ---------- */
.home .h-hero{ position:relative; min-height:calc(100svh - 34px); margin-top:calc(-1 * var(--hh, 70px)); display:flex; align-items:flex-end; color:var(--cream); overflow:hidden; }
.home .h-hero-bg{ position:absolute; inset:0; background:url('portofino-porto.jpg') 40% center/cover no-repeat; transform:scale(1.06); animation:hZoom 18s ease-out forwards; }
@keyframes hZoom{ to{ transform:scale(1); } }
.home .h-hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(13,27,42,.6) 0%, rgba(13,27,42,.08) 26%, rgba(13,27,42,.35) 50%, rgba(13,27,42,.92) 100%); }
.home .h-hero-inner{ position:relative; z-index:2; width:100%; padding-bottom:56px; }
.home .h-hero .h-eyebrow{ color:var(--sand); }
.home .h-hero h1{ font-family:var(--serif); font-weight:400; font-size:clamp(46px, 11vw, 104px); line-height:.95; margin:16px 0 18px; letter-spacing:-.01em; text-shadow:0 2px 24px rgba(13,27,42,.45); }
.home .h-hero h1 em{ font-style:italic; color:var(--sand); }
.home .h-hero p{ font-family:var(--serif); font-style:italic; font-size:20px; max-width:440px; opacity:.92; margin-bottom:28px; text-shadow:0 2px 24px rgba(13,27,42,.45); }
.home .h-hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; }
.home .h-coords{ position:absolute; right:20px; bottom:24px; z-index:2; font-size:9.5px; letter-spacing:.3em; color:var(--sand); opacity:.75; writing-mode:vertical-rl; transform:rotate(180deg); }

/* ---------- Listras de guarda-sol (assinatura) ---------- */
.home .h-stripes{ height:14px; background:repeating-linear-gradient(90deg, var(--navy) 0 22px, var(--cream) 22px 44px); }
.home .h-stripes.sea{ background:repeating-linear-gradient(90deg, var(--sea) 0 22px, var(--cream) 22px 44px); }

.home .h-section{ padding:84px 0; }

/* ---------- Produto em destaque ---------- */
.home .h-feature{ display:grid; gap:36px; }
.home .h-photo{ position:relative; overflow:hidden; aspect-ratio:4/5; display:block;
  background: radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.55), transparent 60%), linear-gradient(160deg, #E7DCC8 0%, #D9C9AE 55%, #CDB997 100%); }
.home .h-photo picture{ display:block; width:100%; height:100%; }
.home .h-photo img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.home .h-photo:hover img{ transform:scale(1.03); }
.home .h-photo svg{ position:absolute; left:50%; top:48%; transform:translate(-50%,-50%); width:66%; max-width:360px; filter:drop-shadow(0 30px 30px rgba(13,27,42,.25)); transition:transform .6s ease; }
.home .h-photo:hover svg{ transform:translate(-50%,-52%) rotate(-2deg); }
.home .h-photo-tag{ position:absolute; left:14px; top:14px; font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; background:var(--navy); color:var(--cream); padding:6px 10px; }
.home .h-info h2{ font-family:var(--caps); font-weight:400; font-size:clamp(26px,4.4vw,38px); letter-spacing:.08em; line-height:1.15; margin:12px 0 0; }
.home .h-price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin:20px 0 4px; }
.home .h-price b{ font-family:var(--serif); font-weight:500; font-size:40px; line-height:1; }
.home .h-price small{ font-size:12px; opacity:.65; }
.home .h-stock{ font-size:12px; color:var(--wine); font-weight:600; letter-spacing:.04em; margin-top:6px; min-height:18px; }
.home .h-lede{ font-family:var(--serif); font-size:20px; line-height:1.45; margin:16px 0 24px; max-width:460px; }
.home .h-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.home .h-chip{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; border:1px solid var(--line); padding:9px 14px; }
.home .h-more{ display:block; text-align:center; margin-top:14px; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--gold); }
.home .h-trust{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:22px; padding-top:22px; border-top:1px solid var(--line); }
.home .h-trust div{ font-size:11px; line-height:1.4; opacity:.8; text-align:center; }
.home .h-trust svg{ width:22px; height:22px; stroke:var(--gold); fill:none; stroke-width:1.3; margin:0 auto 8px; display:block; }

/* ---------- Detalhes ---------- */
.home .h-details{ background:var(--navy); color:var(--cream); padding:70px 0; }
.home .h-details-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; text-align:center; }
.home .h-details svg{ width:40px; height:40px; stroke:var(--gold-2); fill:none; stroke-width:1.1; margin:0 auto 16px; display:block; }
.home .h-details h3{ font-family:var(--caps); font-weight:400; font-size:13px; letter-spacing:.22em; margin-bottom:6px; }
.home .h-details p{ font-family:var(--serif); font-style:italic; font-size:16px; opacity:.75; }

/* ---------- Editorial ---------- */
.home .h-editorial{ display:grid; gap:40px; align-items:center; }
.home .h-ed-img{ aspect-ratio:4/5; background:url('portofino-vista.jpg') center 62%/cover; position:relative; }
.home .h-ed-img::after{ content:''; position:absolute; inset:14px; border:1px solid rgba(246,244,238,.55); }
.home .h-num{ font-family:var(--serif); font-style:italic; font-size:88px; line-height:.8; color:var(--gold); }
.home .h-editorial h2{ font-family:var(--serif); font-weight:400; font-size:clamp(34px,6vw,54px); line-height:1.05; margin:18px 0 20px; letter-spacing:0; }
.home .h-editorial h2 em{ color:var(--sea); }
.home .h-editorial p{ font-size:14.5px; opacity:.8; max-width:440px; margin-bottom:14px; line-height:1.7; }
.home .h-sig{ font-family:var(--serif); font-style:italic; font-size:22px; margin-top:22px; }

/* ---------- Galeria (ativar quando houver fotos) ---------- */
.home .h-look-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:28px; }
.home .h-look-head h2{ font-family:var(--serif); font-weight:400; font-size:clamp(32px,5vw,46px); line-height:1; }
.home .h-look{ display:grid; grid-template-columns:1.2fr 1fr; grid-template-rows:170px 170px; gap:10px; }
.home .h-look img{ width:100%; height:100%; object-fit:cover; }
.home .h-look img:first-child{ grid-row:span 2; }

/* ---------- Citação ---------- */
.home .h-quote{ background:var(--sand); text-align:center; }
.home .h-quote blockquote{ font-family:var(--serif); font-style:italic; font-size:clamp(26px,4.6vw,40px); line-height:1.3; max-width:780px; margin:0 auto; }
.home .h-quote cite{ display:block; margin-top:20px; font-style:normal; font-size:10.5px; letter-spacing:.3em; color:var(--gold); }

/* ---------- Instagram ---------- */
.home .h-ig{ text-align:center; }
.home .h-ig h2{ font-family:var(--serif); font-weight:400; font-size:clamp(30px,5vw,40px); margin:8px 0 22px; letter-spacing:0; }
.home .h-ig .h-btn{ border-color:var(--navy); color:var(--navy); }

/* ---------- Newsletter ---------- */
.home .h-news{ background:var(--navy); color:var(--cream); text-align:center; }
.home .h-news h2{ font-family:var(--caps); font-weight:400; font-size:clamp(24px,4vw,32px); letter-spacing:.18em; margin:12px 0 8px; }
.home .h-news p.h-news-sub{ font-family:var(--serif); font-style:italic; font-size:18px; opacity:.8; margin-bottom:28px; }
.home .h-news form{ display:flex; max-width:460px; margin:0 auto; border:1px solid rgba(246,244,238,.35); }
.home .h-news input{ flex:1; min-width:0; background:transparent; border:0; color:var(--cream); padding:0 16px; font:inherit; font-size:13px; height:52px; outline:none; }
.home .h-news input::placeholder{ color:rgba(246,244,238,.5); }
.home .h-news button{ background:var(--gold); color:var(--navy); border:0; padding:0 24px; font-family:'Montserrat',sans-serif; font-weight:600; font-size:11px; letter-spacing:.24em; cursor:pointer; }
.home .h-news .small{ color:var(--sand); }

/* ---------- Rodapé enxuto ---------- */
.home .h-footer{ background:var(--navy-2); color:rgba(246,244,238,.75); padding:44px 0 28px; font-size:12px; }
.home .h-foot{ display:grid; gap:22px; text-align:center; }
.home .h-foot nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; letter-spacing:.06em; }
.home .h-foot nav a:hover{ color:var(--cream); }
.home .h-foot .logo .name{ font-size:16px; color:var(--cream); }
.home .h-foot .logo .sub{ color:var(--gold-2); }
.home .h-legal{ font-size:10.5px; opacity:.6; letter-spacing:.06em; grid-column:1/-1; text-align:center; line-height:1.8; }
.home .h-legal a{ text-decoration:underline; }
.home .h-pay{ display:flex; justify-content:center; gap:8px; }
.home .h-pay span{ border:1px solid rgba(246,244,238,.25); padding:4px 10px; font-size:9.5px; letter-spacing:.18em; }

/* ---------- Barra de compra fixa (celular) ---------- */
.home .h-sticky{ position:fixed; left:0; right:0; bottom:0; z-index:35; display:flex; align-items:center; gap:12px; background:rgba(246,244,238,.96); backdrop-filter:blur(8px);
  border-top:1px solid var(--line); padding:10px 16px calc(10px + env(safe-area-inset-bottom)); transform:translateY(110%); transition:transform .35s ease; }
.home .h-sticky.show{ transform:none; }
.home .h-sticky div{ flex:1; line-height:1.25; }
.home .h-sticky strong{ font-size:12px; letter-spacing:.06em; display:block; }
.home .h-sticky span{ font-size:12px; opacity:.7; }
.home .h-sticky .h-btn{ height:44px; padding:0 18px; width:auto; }

@media (min-width: 860px){
  .home .h-feature{ grid-template-columns:1.1fr 1fr; gap:64px; align-items:center; }
  .home .h-editorial{ grid-template-columns:1fr 1fr; gap:72px; }
  .home .h-look{ grid-template-rows:290px 290px; }
  .home .h-hero-inner{ padding-bottom:88px; }
  .home .h-hero-bg{ background-position:center 60%; }
  .home .h-hero::before{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(13,27,42,.7) 0%, rgba(13,27,42,.25) 45%, transparent 70%); }
  .home .h-sticky{ display:none; }
  .home .h-foot{ grid-template-columns:1fr auto 1fr; text-align:left; align-items:center; }
  .home .h-foot nav{ justify-content:flex-start; }
  .home .h-pay{ justify-content:flex-end; }
}
@media (max-width: 520px){
  .home .h-details-grid{ grid-template-columns:1fr; gap:34px; }
  .home .h-hero-ctas .h-btn{ flex:1; padding:0 14px; }
}
@media (prefers-reduced-motion: reduce){
  .home .h-hero-bg{ animation:none; transform:none; }
  .home .h-ticker-track{ animation:none; }
}

/* Preço promocional: valor antigo riscado */
.home .preco-de{ font-weight:400; font-size:0.5em; opacity:.5; text-decoration:line-through; margin-right:6px; }
