/* =========================================================
   GONZAGALEZ · Bistrô no Seixal
   Direction: Minimal · White & Grey · Image-led
   ========================================================= */

/* self-hosted fonts (latin subset, variable woff2) */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/archivo-latin.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 400;font-display:swap;src:url(../fonts/fraunces-latin.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 400;font-display:swap;src:url(../fonts/fraunces-italic-latin.woff2) format('woff2')}

:root{
  --paper:#F4F3F1;
  --grey-50:#ECEBE8;
  --grey-100:#E2E0DC;
  --grey-300:#C4C1BB;
  --ink:#171614;
  --ink-soft:#3A3833;
  --muted:#655F58;        /* AA on paper for body text      */
  --muted-2:#847F76;      /* large / decorative text only    */
  --line:rgba(23,22,20,.12);
  --line-soft:rgba(23,22,20,.07);
  --glass:rgba(244,243,241,.72);

  --serif:'Fraunces',Georgia,serif;
  --sans:'Archivo',system-ui,sans-serif;

  --pad:clamp(1.25rem,5vw,7rem);
  --maxw:1360px;
  --gap:clamp(3.5rem,10vh,9rem);
  --ease:cubic-bezier(.2,.8,.2,1);
  --radius:clamp(10px,1.4vw,18px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.4vw + .9rem,1.08rem);
  line-height:1.7;font-weight:400;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:1px}
section[id]{scroll-margin-top:1rem}

/* skip link */
.skip-link{position:fixed;top:.6rem;left:.6rem;z-index:200;background:var(--ink);color:var(--paper);
  padding:.7em 1.1em;border-radius:2px;font-size:.85rem;font-weight:600;transform:translateY(-160%);transition:transform .25s}
.skip-link:focus{transform:none}

/* ---------- shared type ---------- */
.eyebrow,.section-index,.c-k{font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.section-index{display:block;margin-bottom:2.4rem}
.statement{font-family:var(--serif);font-weight:300;font-size:clamp(1.9rem,3.4vw + .6rem,3.4rem);line-height:1.18;letter-spacing:-.01em;color:var(--ink);max-width:20ch}
.statement em{font-style:italic}
.statement--center{max-width:none;text-align:center}

.link-underline{display:inline-block;font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);padding-bottom:.35em;border-bottom:1px solid var(--ink);transition:opacity .3s}
.link-underline:hover{opacity:.55}
.link-underline--sm{font-size:.72rem}

/* =========================================================
   HEADER
   ========================================================= */
.site-head{position:absolute;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  padding:clamp(1.4rem,3vw,2rem) var(--pad);color:#fff;transition:color .3s}
body.menu-open .site-head{color:var(--ink)}
/* document pages (privacy, 404): no hero behind, so the header needs dark ink */
.site-head--doc{color:var(--ink)}
.brand{font-family:var(--serif);font-weight:400;font-size:1.5rem;letter-spacing:.01em}
.nav{display:flex;align-items:center;gap:2.2rem}
.nav a,.nav .lang-btn{font-size:.82rem;font-weight:500;letter-spacing:.04em;transition:opacity .3s}
.nav a{position:relative}
.nav a:hover{opacity:.55}
.nav__call{font-variant-numeric:tabular-nums;padding-left:2.2rem;border-left:1px solid currentColor;opacity:.85}
.lang-btn{background:none;border:0;cursor:pointer;color:inherit;font-family:var(--sans);text-transform:uppercase;letter-spacing:.14em;font-weight:600;padding:.2em .1em;position:relative}
.lang-btn::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transition:transform .3s var(--ease)}
.lang-btn:hover::after{transform:scaleX(1)}

.menu-toggle{display:none;flex-direction:column;gap:6px;background:none;border:0;cursor:pointer;padding:.5rem;color:inherit;z-index:61}
.menu-toggle span{width:26px;height:1.5px;background:currentColor;transition:transform .3s var(--ease),opacity .3s}
.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(7.5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-7.5px) rotate(-45deg)}

/* drawer */
.drawer{position:fixed;inset:0;z-index:55;background:var(--paper);display:flex;flex-direction:column;justify-content:center;padding:6rem var(--pad) 2.5rem;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s}
.drawer.is-open{opacity:1;visibility:visible;transform:none}
.drawer__nav{display:flex;flex-direction:column;margin-top:auto}
.drawer__nav a{display:flex;align-items:baseline;gap:1.1rem;font-family:var(--serif);font-size:clamp(2rem,10vw,3rem);font-weight:300;padding:.5rem 0;border-bottom:1px solid var(--line-soft);
  opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.drawer.is-open .drawer__nav a{opacity:1;transform:none}
.drawer.is-open .drawer__nav a:nth-child(1){transition-delay:.08s}
.drawer.is-open .drawer__nav a:nth-child(2){transition-delay:.14s}
.drawer.is-open .drawer__nav a:nth-child(3){transition-delay:.20s}
.drawer.is-open .drawer__nav a:nth-child(4){transition-delay:.26s}
.drawer.is-open .drawer__nav a:nth-child(5){transition-delay:.32s}
.drawer__foot{margin-top:auto;padding-top:2.5rem;display:flex;flex-direction:column;gap:.5rem}
.drawer__call{font-family:var(--serif);font-size:1.8rem;color:var(--ink)}
.drawer__addr{color:var(--muted);font-size:.95rem}
.drawer__social{display:flex;gap:1.4rem;align-items:center;margin-top:.6rem;font-size:.9rem;color:var(--muted)}
.drawer__social a:hover{color:var(--ink)}
.drawer__lang{margin-left:auto;color:var(--ink)!important}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 42%;transform:scale(1.06);animation:heroZoom 16s var(--ease) forwards}
@keyframes heroZoom{to{transform:scale(1)}}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(15,13,11,.5),rgba(15,13,11,.05) 42%,rgba(15,13,11,.12))}
.hero__caption{position:absolute;left:var(--pad);bottom:clamp(2.5rem,7vh,5rem);z-index:2;color:#fff}
.eyebrow--light{color:rgba(255,255,255,.82);margin-bottom:1.4rem;display:block;opacity:0;animation:fadeUp .9s var(--ease) .3s forwards}
.hero__title{font-family:var(--serif);font-weight:300;font-size:clamp(3.2rem,10vw,8.5rem);line-height:.94;letter-spacing:-.02em;color:#fff;opacity:0;animation:fadeUp 1s var(--ease) .45s forwards}
.hero__title em{font-style:italic;font-weight:300}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* =========================================================
   O BISTRÔ  (imagem à esquerda · texto + pontos à direita)
   ========================================================= */
.bistro{max-width:var(--maxw);margin-inline:auto;padding:clamp(5rem,14vh,11rem) var(--pad) var(--gap);
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.5rem,5vw,5.5rem);align-items:start}
.bistro__media{position:relative;overflow:hidden;border-radius:var(--radius);aspect-ratio:4/5;max-height:600px}
.bistro__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);will-change:transform}
.bistro__body .section-index{margin-bottom:1.4rem}
.bistro .statement{max-width:20ch;font-size:clamp(1.9rem,2.6vw + .6rem,3rem);margin-bottom:1.4rem}
.bistro__lede{max-width:46ch;color:var(--muted);line-height:1.85;margin-bottom:2.4rem}
.bistro__lede em{font-family:var(--serif);font-style:italic;color:var(--ink-soft)}
.bistro__points{list-style:none;display:flex;flex-direction:column;gap:1.5rem}
.bistro__points h3{font-family:var(--serif);font-weight:400;font-size:1.2rem;margin-bottom:.35rem}
.bistro__points p{color:var(--muted);font-size:.92rem;line-height:1.55}

/* =========================================================
   TABLE EXPERIENCE
   ========================================================= */
.exp__head{max-width:var(--maxw);margin-inline:auto;padding:var(--gap) var(--pad) clamp(2.5rem,6vh,4rem);display:flex;flex-direction:column;align-items:center;text-align:center}
.exp__head .section-index{text-align:center}
.exp__lede{max-width:60ch;margin-top:1.8rem;color:var(--muted);font-size:1.08rem;line-height:1.8}
.exp__lede em{font-family:var(--serif);font-style:italic;color:var(--ink-soft)}
.momentos{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(1.2rem,4vw,3.2rem);max-width:820px;margin:0 auto;padding:0 var(--pad) clamp(3rem,7vh,5rem)}
.momentos li{font-family:var(--serif);font-weight:300;font-size:1.35rem;color:var(--muted-2);position:relative;transition:color .35s;font-variant-numeric:tabular-nums}
.momentos li:hover{color:var(--ink)}
.momentos li:not(:last-child)::after{content:"";position:absolute;right:calc(-1 * clamp(.6rem,2vw,1.6rem));top:50%;width:clamp(0px,1.4vw,10px);height:1px;background:var(--grey-300)}
.exp__body{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start;max-width:var(--maxw);margin-inline:auto;padding:0 var(--pad) var(--gap)}
.exp__media{position:relative;overflow:hidden}
.exp__media img{width:100%;aspect-ratio:16/11;object-fit:cover;transition:transform 1.4s var(--ease)}
.exp__media:hover img{transform:scale(1.04)}
.specs{display:flex;flex-direction:column;margin-bottom:2.2rem}
.specs > div{display:flex;justify-content:space-between;gap:1.5rem;padding:1.1rem 0;border-top:1px solid var(--line-soft)}
.specs > div:last-child{border-bottom:1px solid var(--line-soft)}
.specs dt{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600;padding-top:.35rem}
.specs dd{font-family:var(--serif);font-size:1.1rem;color:var(--ink);text-align:right;font-weight:400}

/* =========================================================
   GALERIA
   ========================================================= */
.galeria{max-width:var(--maxw);margin-inline:auto;padding:var(--gap) var(--pad)}
.galeria__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2.5vw,2rem);margin-top:.5rem}
.g-item{position:relative;overflow:hidden;aspect-ratio:4/5}
.g-item--wide{grid-column:1 / -1;aspect-ratio:16/9}
.g-item img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.g-item:hover img{transform:scale(1.04)}
.g-item figcaption{position:absolute;left:1.2rem;bottom:1.1rem;z-index:3;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(15,13,11,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);padding:.5em .9em;opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s}
.g-item:hover figcaption{opacity:1;transform:none}

/* =========================================================
   EQUIPA
   ========================================================= */
.equipa{max-width:var(--maxw);margin-inline:auto;padding:var(--gap) var(--pad);display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.5rem,5vw,5.5rem);align-items:start}
.equipa__media{position:relative;overflow:hidden;aspect-ratio:4/5;max-height:620px}
.equipa__media img{width:100%;height:100%;object-fit:cover;object-position:center 22%;transition:transform 1.4s var(--ease)}
.equipa__media:hover img{transform:scale(1.04)}
.equipa__cap{position:absolute;left:1.2rem;bottom:1.1rem;z-index:3;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:rgba(15,13,11,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);padding:.5em .9em;border-radius:2px}
.equipa__text .section-index{margin-bottom:1.4rem}
.equipa__text .statement{margin-bottom:1.6rem;max-width:none}
.equipa__body{color:var(--muted);max-width:50ch;line-height:1.85}
.equipa__body em{font-family:var(--serif);font-style:italic;color:var(--ink-soft)}

/* =========================================================
   CONTACTOS
   ========================================================= */
.contactos__head{max-width:var(--maxw);margin-inline:auto;padding:var(--gap) var(--pad) clamp(2.5rem,6vh,4rem)}
.contactos__grid{max-width:var(--maxw);margin-inline:auto;padding:0 var(--pad) clamp(3rem,7vh,5rem);display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.c-block{display:flex;flex-direction:column;gap:.9rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.c-k{margin-bottom:.2rem}
.c-phone{font-family:var(--serif);font-size:2rem;font-weight:400;color:var(--ink);line-height:1;transition:opacity .3s}
.c-phone:hover{opacity:.55}
.c-v{font-family:var(--serif);font-size:1.15rem;color:var(--ink-soft);line-height:1.5}
.c-v--links{display:flex;flex-direction:column;gap:.3rem}
.c-v--links a{transition:opacity .3s}.c-v--links a:hover{opacity:.55}
.c-note{font-size:.8rem;color:var(--muted)}

/* click-to-load map facade: no Google cookies/requests until the user opts in */
.contactos__map{height:clamp(300px,42vh,460px);background:var(--grey-50);border-top:1px solid var(--line-soft);position:relative}
.contactos__map iframe{width:100%;height:100%;border:0;filter:grayscale(1) contrast(.95) brightness(1.02);display:block}
.map-load{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;background:var(--grey-50);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.65rem;color:var(--muted);font-family:var(--sans);transition:background .3s}
.map-load:hover{background:var(--grey-100)}
.map-load__pin{color:var(--muted-2);transition:color .3s}
.map-load:hover .map-load__pin{color:var(--ink)}
.map-load__label{font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:.3em}
.map-load__note{font-size:.75rem;color:var(--muted-2);letter-spacing:.02em}

/* =========================================================
   FOOTER
   ========================================================= */
.foot{position:relative;text-align:center;padding:clamp(4rem,9vh,6.5rem) var(--pad) 2.5rem;background:var(--paper)}
.foot__brandmark{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:clamp(2.5rem,6vh,4rem)}
.foot__mark{font-family:var(--serif);font-weight:300;font-size:clamp(3.5rem,19vw,15rem);line-height:1;letter-spacing:-.02em;white-space:nowrap;
  background:linear-gradient(to bottom,var(--grey-300),rgba(196,193,187,.18));-webkit-background-clip:text;background-clip:text;color:transparent;pointer-events:none;user-select:none}
.foot__base{max-width:var(--maxw);margin:0 auto;padding-top:1.8rem;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;font-size:.78rem;color:var(--muted);letter-spacing:.02em}
.foot__links{display:flex;gap:1.6rem}
.foot__base a:hover{color:var(--ink)}
.foot__credit{color:var(--grey-300)}
.foot__credit a{color:var(--muted)}
.foot__credit a:hover{color:var(--ink)}

/* back to top */
.to-top{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:50;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--ink);cursor:pointer;font-size:1.1rem;line-height:1;
  display:grid;place-items:center;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px);transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s,background .3s}
.to-top[hidden]{display:none}
.to-top.show{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.to-top:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* =========================================================
   REVEAL (fade + image wipe)
   ========================================================= */
.reveal{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.exp__media,.g-item,.equipa__media{--wipe:var(--paper)}
.g-item{--wipe:var(--grey-50)}
.exp__media::before,.g-item::before,.equipa__media::before{content:"";position:absolute;inset:0;z-index:2;background:var(--wipe);transform-origin:left;transition:transform 1.1s var(--ease)}
.reveal.in.exp__media::before,.g-item.reveal.in::before,.reveal.in.equipa__media::before{transform:scaleX(0)}

/* =========================================================
   PHOTO TREATMENT: clean rounded corners, consistent across all photos
   ========================================================= */
.exp__media,.g-item,.equipa__media{border-radius:var(--radius)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:960px){
  .nav{display:none}
  .menu-toggle{display:flex}
  .exp__body{grid-template-columns:1fr}
  .equipa{grid-template-columns:1fr;gap:2.5rem}
  .equipa__text{order:-1}
  .contactos__grid{grid-template-columns:1fr 1fr}
  .bistro{grid-template-columns:1fr;gap:2.5rem}
  .bistro__body{order:-1}
  .bistro__media{aspect-ratio:4/3;max-height:none}
}
@media (max-width:600px){
  .galeria__grid{grid-template-columns:1fr}
  .g-item,.g-item--wide{aspect-ratio:4/5}
  .contactos__grid{grid-template-columns:1fr}
  .foot__base{justify-content:center;text-align:center}
  .momentos li:not(:last-child)::after{display:none}
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .hero__media img{transform:none;animation:none}
  .eyebrow--light,.hero__title{opacity:1;animation:none}
  .reveal{opacity:1;transform:none}
  .exp__media::before,.g-item::before,.equipa__media::before{display:none}
}