/* Ask Mendoza — home v1.3. Relevo de Mendoza, paletas do visitante, chat de mensagem. */
:root{
  --display:"Petrona",Georgia,"Times New Roman",serif;
  --body:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* Malbec (padrão) */
  --sky-1:#2a1420; --sky-2:#4a1c30; --sky-3:#7a2442;
  --ink:#fff6ef; --muted:#e7cdbf;
  --accent:#e7a53c; --accent-ink:#2a1008;
  --wine:#6b1026; --glass:#f4e2c9;
}
:root[data-pal="andes"]{
  --sky-1:#101c28; --sky-2:#1c3346; --sky-3:#355a78;
  --ink:#f1f6fb; --muted:#c3d3e0;
  --accent:#d8763f; --accent-ink:#2a1006;
  --wine:#7a1330; --glass:#eef4fa;
}
:root[data-pal="vinedo"]{
  --sky-1:#12210f; --sky-2:#1f3a1d; --sky-3:#3f6b3a;
  --ink:#f6f3e8; --muted:#d6d8bf;
  --accent:#e0b03a; --accent-ink:#241f06;
  --wine:#6b1026; --glass:#f1ead3;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--body);color:var(--ink);background:#160b11;overflow-x:hidden;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit;cursor:pointer}
button,input{font-family:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
img{max-width:100%}

/* ---- Foto de fundo ---- */
.scene{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--sky-1)}
.scene img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;display:block}
.scrim{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(10,6,10,.76),rgba(10,6,10,.2) 38%,rgba(10,6,10,.36) 58%,rgba(10,6,10,.84)),
    linear-gradient(180deg,color-mix(in srgb,var(--sky-1) 48%,transparent),transparent 55%,color-mix(in srgb,var(--sky-1) 66%,transparent))}
.grain{position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:radial-gradient(#fff .5px,transparent .5px);background-size:3px 3px}

.wrap{position:relative;z-index:2;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  padding:max(76px,calc(env(safe-area-inset-top) + 72px)) max(18px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}
.top{position:fixed;top:0;left:0;right:0;z-index:25;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:max(16px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 14px max(18px,env(safe-area-inset-left))}
.top::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,6,10,.72),rgba(10,6,10,.3) 58%,transparent)}
.top>*{pointer-events:auto}
.brand{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.hright{display:flex;align-items:center;gap:14px}
.langs{display:flex;align-items:center;gap:2px;font-size:12px;letter-spacing:.09em;text-transform:uppercase}
.langs a{text-decoration:none;color:var(--muted);padding:5px 7px;border-radius:7px}
.langs a:hover{color:var(--ink);background:rgba(255,255,255,.08)}
.langs a[aria-current="page"]{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:4px}
.pals{display:flex;gap:7px;align-items:center}
.pals button{width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,.55);padding:0;
  background:var(--sw);transition:transform .12s}
.pals button[aria-pressed="true"]{transform:scale(1.18);border-color:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.25)}
.pals .p-malbec{--sw:linear-gradient(135deg,#7a2442,#e7a53c)}
.pals .p-andes{--sw:linear-gradient(135deg,#355a78,#d8763f)}
.pals .p-vinedo{--sw:linear-gradient(135deg,#3f6b3a,#e0b03a)}

.hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:clamp(8px,2vh,20px);padding-block:12px}

/* ---- O relevo de Mendoza ---- */
.mapobj{position:relative;width:clamp(240px,min(80vw,50vh),560px);aspect-ratio:1.36/1;flex:none}
#relief{position:absolute;inset:0;width:100%;height:100%;display:block}
.map-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  pointer-events:none;opacity:.98;transition:opacity .35s ease}
.mapobj.ready .map-poster{opacity:0}
.map-poster[hidden]{display:none}
.pins{position:absolute;inset:0;pointer-events:none}
.pin{position:absolute;left:0;top:0;width:24px;height:24px;padding:0;margin:0;border:1px solid transparent;
  background:transparent;border-radius:50%;transform:translate(-12px,-12px);cursor:pointer;
  pointer-events:auto;-webkit-tap-highlight-color:transparent}
.pin:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.pin::after{content:attr(data-label);position:absolute;left:50%;bottom:calc(100% - 6px);
  transform:translate(-50%,5px);white-space:nowrap;font-size:12px;font-weight:500;letter-spacing:.005em;
  background:rgba(12,8,12,.86);border:1px solid rgba(255,255,255,.2);color:var(--ink);
  padding:5px 9px;border-radius:999px;opacity:0;pointer-events:none;
  transition:opacity .18s ease,transform .18s cubic-bezier(.2,.8,.2,1)}
.pin:hover::after,.pin:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.pin.city::after{opacity:1;transform:none;left:calc(50% + 10px);top:50%;bottom:auto;margin-top:-8px;
  font-size:12px;padding:0;background:none;border:0;font-family:Petrona,Georgia,serif;
  font-style:italic;letter-spacing:.05em;color:#faf2e2;
  text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 5px rgba(0,0,0,.5)}
.pin.city::before{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--accent);
  pointer-events:none;opacity:0}
@media (prefers-reduced-motion:no-preference){
  .pin.city::before{animation:ping 2.6s cubic-bezier(.2,.8,.2,1) infinite}
  @keyframes ping{0%{transform:scale(.42);opacity:.5}70%,100%{transform:scale(1);opacity:0}}
}
@media (pointer:coarse){.pin{pointer-events:none}.mapobj{touch-action:manipulation}}
.mapcap{position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);margin:0;
  font-size:12px;color:rgba(255,255,255,.64);white-space:nowrap;letter-spacing:.01em;
  text-shadow:0 1px 2px rgba(0,0,0,.65);pointer-events:none}
.map-noscript{margin:6px 0 0;font-size:12px;color:var(--muted);max-width:46ch;line-height:1.5}

.cta{display:inline-flex;align-items:center;gap:9px;border:1px solid transparent;border-radius:999px;
  background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:clamp(15.5px,2.4vw,19px);
  padding:15px 26px;box-shadow:0 10px 26px -8px rgba(0,0,0,.5);transition:transform .12s,filter .12s;
  text-decoration:none;max-width:100%}
.cta:hover{transform:translateY(-2px);filter:brightness(1.06)}
.cta svg{width:19px;height:19px;flex:none}
.tag{margin:0;max-width:32ch;color:var(--ink);opacity:.94;font-size:clamp(14px,2vw,16.5px);line-height:1.5;text-wrap:balance}
.tag b{font-weight:600}
.credit{position:relative;z-index:4;margin:0;text-align:right;font-size:12px;color:rgba(255,255,255,.72);text-shadow:0 1px 3px rgba(0,0,0,.7);line-height:1.4;max-width:100%;overflow-wrap:anywhere}
.credit a{color:inherit;text-decoration:underline}

/* ---- Entrada ---- */
@media (prefers-reduced-motion:no-preference){
  .hero > *{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
  .hero > :nth-child(2){animation-delay:.06s}
  .hero > :nth-child(3){animation-delay:.12s}
  .hero > :nth-child(4){animation-delay:.18s}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
@media (max-width:400px){
  .brand{font-size:17px}
  .hright{gap:8px}
  .langs{font-size:12px;gap:0}
  .langs a{padding:4px 5px}
  .demo{display:none}
  .b{font-size:15px}
}
@media (max-width:480px){
  .credit{text-align:center;font-size:12px;white-space:normal}
  .mapcap{font-size:12px}
}
@media (pointer:coarse){.pin{pointer-events:none}.mapobj{touch-action:manipulation}}
@media (max-width:380px){
  .cta{font-size:14.5px;padding:13px 18px;gap:7px}
  .cta svg{width:17px;height:17px}
  .hero{gap:10px}
  .mapobj{width:clamp(222px,74vw,310px)}
}
/* Telas baixas: o título e o relevo cedem altura, nada é cortado */
@media (max-height:800px){
  .hero h1{font-size:clamp(46px,min(17vw,14.2vh),140px)}
  .mapobj{width:clamp(220px,min(74vw,42vh),430px)}
}
@media (max-height:720px){
  .hero{gap:8px;padding-block:6px}
  .hero h1{font-size:clamp(46px,min(17vw,13.8vh),126px)}
  .mapobj{width:clamp(214px,min(70vw,39vh),350px)}
  .tag{font-size:13.5px;line-height:1.45}
  .credit{font-size:12px}
}