/*
Theme Name: Al Tast
Theme URI: https://altast.es
Author: Al Tast
Description: Tema a mida per a Al Tast — cuina d'autor, chef privat i càtering. Disseny editorial de luxe (Fraunces + Jost, paleta vi/crema/or).
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: altast
*/

/* ============================================================
   AL TAST — editorial luxury theme
   Direcció: revista gastronòmica d'autor. Asimetria intencionada,
   filets d'or fins, tipografia display expressiva, molt d'aire.
   ============================================================ */

/* -------- TOKENS -------- */
:root{
  /* marca */
  --wine:#7A2E3A;            /* vi base (text sobre clar = --wine-ink) */
  --wine-bg:#6E2733;         /* fons profund de les seccions vi (hero/nav/contacte) */
  --wine-deep:#4A1A24;       /* vi més profund (footer / accents) */
  --wine-soft:#9a4452;
  --wine-ink:#7A2E3A;        /* vi per a TEXT sobre fons clars */
  --cream:#F4EEE2;
  --cream-2:#EDE3D0;         /* crema una mica més profunda (seccions alternes) */
  --gold:#B8914A;
  --gold-bright:#C8A25C;
  --olive:#6B7150;

  /* superfícies */
  --bg:#F6EEDF;              /* paper càlid */
  --surface:#FCF7ED;         /* panell clar */
  --fg:#2B2622;              /* tinta */
  --muted:#73695B;
  --line:#DBCDB3;            /* filet hairline */
  --line-soft:#E7DCC7;
  --card:#FFFFFF;

  /* línies d'or sobre fons vi */
  --onwine:#ECDFCF;          /* text secundari sobre vi */
  --onwine-line:rgba(244,238,226,.22);

  color-scheme: light;
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* mesures */
  --maxw:1160px;
  --gutter:clamp(20px, 5vw, 44px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --wine-bg:#45171F;
  --wine-deep:#32101A;
  --gold:#cda55e; --gold-bright:#dcb978; --olive:#9aa07e; --wine-ink:#df95a1;
  --bg:#17130F; --surface:#211C18; --fg:#EFE7D7; --muted:#AAA091; --line:#352D25; --line-soft:#2C251F; --card:#211C18;
  --cream-2:#1E1915;
  --onwine:#ead9c7; --onwine-line:rgba(244,238,226,.18);
  color-scheme: dark;
}}
:root[data-theme="dark"]{
  --wine-bg:#45171F;
  --wine-deep:#32101A;
  --gold:#cda55e; --gold-bright:#dcb978; --olive:#9aa07e; --wine-ink:#df95a1;
  --bg:#17130F; --surface:#211C18; --fg:#EFE7D7; --muted:#AAA091; --line:#352D25; --line-soft:#2C251F; --card:#211C18;
  --cream-2:#1E1915;
  --onwine:#ead9c7; --onwine-line:rgba(244,238,226,.18);
  color-scheme: dark;
}

/* -------- BASE -------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--sans); margin:0; line-height:1.62; font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* gra de paper molt subtil per treure la planor digital */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-blend-mode:soft-light;
}
.wrap{max-width:var(--maxw); margin:0 auto;
  padding-left:max(var(--gutter), env(safe-area-inset-left,0px));
  padding-right:max(var(--gutter), env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--serif); font-weight:500; letter-spacing:-.015em; text-wrap:balance; margin:0; line-height:1.04}
p{margin:0}
a{color:inherit}
img{max-width:100%; height:auto}
ol,ul{margin:0}

/* capçalera de secció reutilitzable */
section{padding-block:clamp(66px,10vw,128px); position:relative; z-index:1}
.eyebrow{display:inline-flex; align-items:center; gap:14px;
  font-family:var(--sans); font-size:11.5px; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); font-weight:500}
.eyebrow::before{content:""; width:30px; height:1px; background:currentColor; flex:0 0 auto}
.lead-h{font-size:clamp(33px,6.2vw,62px); color:var(--fg); margin-top:18px}
.lead-h em{font-style:italic; font-weight:400; color:var(--wine-ink)}
.sec-head{max-width:30ch}
.intro{max-width:56ch; color:var(--muted); font-size:clamp(15px,1.9vw,17.5px); margin-top:20px; line-height:1.72}

/* -------- NAV FIXA -------- */
section[id], header[id]{scroll-margin-top:72px}
.site-nav{position:sticky; top:0; z-index:60; background:var(--wine-bg); border-bottom:1px solid var(--onwine-line)}
.nav-in{max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; gap:24px;
  padding-left:max(var(--gutter), env(safe-area-inset-left,0px)); padding-right:max(var(--gutter), env(safe-area-inset-right,0px));
  padding-block:12px; min-height:60px}
.nav-brand{display:flex; flex-direction:column; line-height:1; text-decoration:none; color:var(--cream)}
.nav-brand-name{font-family:var(--serif); font-weight:500; font-size:23px; letter-spacing:-.01em}
.nav-brand-desc{font-family:var(--sans); font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-top:4px}
.nav-links{display:flex; gap:30px; margin-left:auto}
.nav-links a{font-family:var(--sans); font-size:13.5px; letter-spacing:.02em; color:var(--onwine); text-decoration:none; position:relative; padding-block:4px}
.nav-links a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--gold); transition:right .28s ease}
.nav-links a:hover{color:var(--cream)}
.nav-links a:hover::after{right:0}
.nav-cta{display:inline-flex; align-items:center; gap:6px; font-family:var(--sans); font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cream); border:1px solid var(--gold); border-radius:2px; padding:9px 18px; text-decoration:none; white-space:nowrap; transition:background .2s ease, color .2s ease}
.nav-cta span{font-size:14px; transition:transform .2s ease}
.nav-cta:hover{background:var(--gold); color:var(--wine-deep)}
.nav-cta:hover span{transform:translate(2px,-2px)}
@media (max-width:820px){ .nav-links{display:none} .nav-cta{margin-left:auto} }
.site-nav a:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

/* -------- HERO (portada tipus coberta de revista) -------- */
.hero{background:var(--wine-bg); color:var(--cream); position:relative; overflow:hidden}
.hero-in{max-width:var(--maxw); margin:0 auto;
  padding-left:max(var(--gutter), env(safe-area-inset-left,0px)); padding-right:max(var(--gutter), env(safe-area-inset-right,0px));
  padding-block:clamp(40px,7vw,70px);
  position:relative; min-height:min(84vh,780px); display:flex; flex-direction:column}
/* marc d'or inset, no degradat */
.hero-in::before{content:""; position:absolute; inset:clamp(16px,3vw,30px); border:1px solid var(--onwine-line); pointer-events:none}
.hero-marque{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--sans); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold);
  padding-bottom:clamp(20px,5vw,44px)}
.wordmark{font-family:var(--serif); font-weight:400; font-size:clamp(78px,21vw,230px); line-height:.82; letter-spacing:-.02em;
  color:var(--cream); font-variation-settings:'opsz' 144; margin:auto 0 0}
.tagline{font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(21px,4vw,34px); color:var(--cream); margin-top:clamp(14px,2.4vw,24px); max-width:22ch}
.tagline em{font-style:italic; color:var(--gold-bright)}
.hero-body{display:grid; grid-template-columns:1.1fr 1fr; gap:30px 48px; align-items:end;
  margin-top:clamp(26px,5vw,52px); padding-top:clamp(22px,3vw,30px); border-top:1px solid var(--onwine-line)}
.hero .sub{color:var(--onwine); font-size:clamp(15px,2vw,17.5px); max-width:42ch; line-height:1.68}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; justify-content:flex-start}
@media (min-width:721px){ .hero-cta{justify-content:flex-end} }
.hero-foot{display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:clamp(24px,4vw,40px); font-family:var(--sans); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold)}
.hero-foot-sep{width:40px; height:1px; background:var(--onwine-line)}
@media (max-width:720px){
  .hero-body{grid-template-columns:1fr; gap:24px; align-items:start}
  .hero-in{min-height:0; padding-block:clamp(40px,10vw,64px)}
}

/* BOTONS */
.btn{display:inline-flex; align-items:center; justify-content:center; font-family:var(--sans); font-weight:500; letter-spacing:.06em;
  font-size:13.5px; text-transform:uppercase; background:var(--gold); color:var(--wine-deep); padding:15px 30px; border-radius:2px;
  text-decoration:none; border:1px solid var(--gold); cursor:pointer; transition:background .2s ease, color .2s ease, transform .18s ease}
.btn:hover{background:var(--gold-bright); border-color:var(--gold-bright); transform:translateY(-2px)}
.btn.ghost{background:transparent; color:var(--cream); border-color:var(--onwine-line)}
.btn.ghost:hover{border-color:var(--gold); color:var(--gold-bright); background:transparent}

/* -------- EXPERIÈNCIA (asimètric) -------- */
.exp-grid{display:grid; grid-template-columns:1.05fr .85fr; gap:clamp(36px,6vw,80px); align-items:start}
@media (max-width:880px){ .exp-grid{grid-template-columns:1fr; gap:44px} }
.creds{margin-top:40px}
.creds-lab{display:block; font-family:var(--sans); font-size:10.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); margin-bottom:14px}
.creds-row{list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:8px 18px; align-items:baseline}
.creds-row li{font-family:var(--serif); font-size:16px; color:var(--wine-ink); position:relative; padding-right:18px}
.creds-row li:not(:last-child)::after{content:"·"; position:absolute; right:3px; color:var(--gold); font-family:var(--sans)}
.pillar-list{list-style:none; padding:0; margin:0; border-top:1px solid var(--line)}
.pillar{display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start; padding:26px 4px; border-bottom:1px solid var(--line); transition:padding-left .25s ease}
.pillar:hover{padding-left:12px}
.pillar-n{font-family:var(--serif); font-style:italic; font-weight:300; font-size:30px; color:var(--gold); line-height:1; min-width:1.4ch}
.pillar h3{font-size:23px; color:var(--fg)}
.pillar p{color:var(--muted); font-size:14.5px; margin-top:7px; max-width:34ch}

/* -------- SERVEIS (índex editorial numerat) -------- */
.serveis{background:var(--cream-2)}
.serveis .sec-head{margin-bottom:clamp(30px,5vw,56px)}
.svc-list{list-style:none; padding:0; margin:0; border-top:1px solid var(--line)}
/* Cada servei ocupa tot l'ample: numeral + títol/descripció a dalt, i una
   franja "què inclou" a sota a tota l'amplada, en comptes de columnes estretes. */
.svc{display:grid; grid-template-columns:auto 1fr; column-gap:clamp(18px,3vw,40px); row-gap:0;
  padding:clamp(26px,3.5vw,44px) 0; border-bottom:1px solid var(--line); align-items:baseline; transition:background .25s ease}
.svc:hover{background:color-mix(in srgb, var(--gold) 7%, transparent)}
.svc-no{font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(28px,4vw,46px); color:var(--gold); line-height:.9}
.svc-head{max-width:none}
.svc-k{font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--olive); font-weight:500}
.svc h3{font-size:clamp(24px,3.2vw,33px); color:var(--fg); margin:8px 0 14px}
.svc-d{color:var(--muted); font-size:16px; line-height:1.7; max-width:68ch}
.svc .pax{display:inline-block; margin-top:18px; font-family:var(--sans); font-size:12px; letter-spacing:.06em; color:var(--wine-ink);
  border:1px solid var(--line); border-radius:999px; padding:5px 14px}
/* Franja "què inclou" a tota l'amplada, sota el títol, amb els ítems en fila. */
.svc-inc{grid-column:2 / -1; margin-top:22px; padding-top:20px; border-top:1px solid var(--line-soft)}
.svc-inc-lab{display:block; font-family:var(--sans); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--olive); margin-bottom:14px}
.svc-inc ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:12px clamp(24px,3vw,44px)}
.svc-inc li{position:relative; padding-left:20px; font-size:14.5px; color:var(--fg); line-height:1.4}
.svc-inc li::before{content:""; position:absolute; left:0; top:8px; width:6px; height:6px; background:var(--gold); transform:rotate(45deg)}
@media (max-width:620px){
  .svc{column-gap:16px}
  .svc-inc{grid-column:1 / -1; margin-top:18px}
  .svc-inc ul{flex-direction:column; gap:11px}
}

/* -------- PROPOSTA (menú + placa decorativa) -------- */
.proposta-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px,6vw,76px); align-items:center}
@media (max-width:880px){ .proposta-grid{grid-template-columns:1fr; gap:40px} }
.plate{margin-top:40px; display:flex; flex-direction:column; gap:14px}
.plate-frame{aspect-ratio:4/5; border:1px solid var(--line); background:
  radial-gradient(120% 90% at 50% 18%, color-mix(in srgb, var(--wine-bg) 92%, #000) 0%, var(--wine-deep) 70%);
  display:flex; align-items:center; justify-content:center; position:relative; max-width:360px}
.plate-frame::before{content:""; position:absolute; inset:14px; border:1px solid var(--onwine-line)}
.plate-mark{font-family:var(--serif); font-style:italic; font-weight:300; font-size:46px; color:var(--gold)}
.plate-cap{font-family:var(--sans); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted)}
.menu-card{background:var(--surface); border:1px solid var(--line); padding:clamp(26px,3.5vw,44px)}
.menu-top{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding-bottom:20px; margin-bottom:8px; border-bottom:1px solid var(--line)}
.menu-title{font-family:var(--serif); font-size:22px; color:var(--fg)}
.menu-sub{font-family:var(--sans); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold)}
.menu-line{display:flex; gap:24px; align-items:baseline; padding:17px 0; border-bottom:1px solid var(--line-soft)}
.menu-k{flex:0 0 118px; font-family:var(--sans); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--olive); font-weight:500; padding-top:3px}
.menu-v{font-family:var(--serif); font-size:18.5px; color:var(--fg); line-height:1.35}
.menu-note{font-family:var(--serif); font-style:italic; color:var(--muted); font-size:15px; margin-top:18px; text-align:right}
@media (max-width:560px){ .menu-line{flex-direction:column; gap:5px} .menu-k{flex-basis:auto} }

/* -------- PER QUÈ (graella de filets, sense caixes) -------- */
.why-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); margin-top:clamp(30px,5vw,56px)}
.why-item{background:var(--bg); padding:clamp(28px,3.5vw,44px)}
.why-n{font-family:var(--serif); font-style:italic; font-weight:300; font-size:22px; color:var(--gold)}
.why-item h3{font-size:clamp(20px,2.6vw,26px); color:var(--fg); margin:12px 0 10px}
.why-item p{color:var(--muted); font-size:14.5px; line-height:1.6; max-width:34ch}
@media (max-width:560px){ .why-grid{grid-template-columns:1fr} }

/* -------- COM FUNCIONA (numerals grans) -------- */
.steps{list-style:none; padding:0; margin:clamp(30px,5vw,56px) 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,48px); counter-reset:none}
@media (max-width:760px){ .steps{grid-template-columns:1fr; gap:34px} }
.step{padding-top:26px; border-top:1px solid var(--line); position:relative}
.step .n{display:block; font-family:var(--serif); font-weight:300; font-size:clamp(44px,6vw,68px); color:var(--gold); line-height:1; letter-spacing:-.02em}
.step h3{font-size:22px; margin:14px 0 8px; color:var(--fg)}
.step p{color:var(--muted); font-size:14.5px; max-width:32ch; line-height:1.6}

/* -------- FAQ -------- */
.faq-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(30px,5vw,64px); align-items:start}
@media (max-width:880px){ .faq-grid{grid-template-columns:1fr; gap:36px} }
.faq{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:22px 0; font-family:var(--serif); font-size:clamp(18px,2.4vw,22px); color:var(--fg);
  display:flex; align-items:center; justify-content:space-between; gap:20px; transition:color .2s ease}
.faq summary:hover{color:var(--wine-ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--sans); font-weight:300; font-size:26px; color:var(--gold); line-height:1; transition:transform .25s ease}
.faq details[open] summary::after{content:"–"}
.faq summary:focus-visible{outline:2px solid var(--gold); outline-offset:4px}
.faq-a{padding:0 0 24px; color:var(--muted); font-size:15.5px; line-height:1.72; max-width:60ch}

/* -------- CONTACTE (vi, asimètric) -------- */
.contacte{background:var(--wine-bg); color:var(--cream)}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,80px); align-items:start}
@media (max-width:880px){ .contact-grid{grid-template-columns:1fr; gap:44px} }
.contacte .eyebrow{color:var(--gold)}
.contacte .lead-h{color:var(--cream)}
.contacte .lead-h em{color:var(--gold-bright)}
.contacte .intro{color:var(--onwine)}
.channels{margin-top:38px; border-top:1px solid var(--onwine-line)}
.chan{display:flex; align-items:baseline; justify-content:space-between; gap:18px; padding:16px 0; border-bottom:1px solid var(--onwine-line)}
.chan .lab{font-family:var(--sans); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); flex:0 0 auto}
.chan .chan-v{display:flex; align-items:center; gap:12px; min-width:0}
.chan .val{font-family:var(--serif); font-size:17px; color:var(--cream); text-decoration:none; word-break:break-word; text-align:right}
a.val:hover{color:var(--gold-bright)}
.copybtn{font-family:var(--sans); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; background:transparent; color:var(--gold);
  border:1px solid var(--onwine-line); border-radius:2px; padding:6px 11px; cursor:pointer; transition:background .2s ease, color .2s ease; white-space:nowrap}
.copybtn:hover{background:var(--gold); color:var(--wine-deep); border-color:var(--gold)}
.copybtn:focus-visible, .btn:focus-visible, a:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

/* FORMULARI — camps amb filet inferior (editorial) */
.contact-formwrap{padding-top:clamp(8px,2vw,40px)}
.contact-form{display:flex; flex-direction:column; gap:22px}
.contact-form .fields{display:flex; gap:26px}
@media (max-width:560px){ .contact-form .fields{flex-direction:column; gap:22px} }
.field{display:flex; flex-direction:column; gap:8px; flex:1 1 0; min-width:0}
.field-lab{font-family:var(--sans); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold)}
.contact-form input, .contact-form select, .contact-form textarea{
  width:100%; font-family:var(--sans); font-size:16px; color:var(--cream);
  background:transparent; border:0; border-bottom:1px solid var(--onwine-line); border-radius:0; padding:8px 2px; transition:border-color .2s ease}
.contact-form textarea{resize:vertical; min-height:92px; line-height:1.5}
.contact-form input::placeholder, .contact-form textarea::placeholder{color:color-mix(in srgb, var(--onwine) 55%, transparent)}
.contact-form select{color:var(--onwine)}
.contact-form select option{color:#2B2622}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{outline:none; border-bottom-color:var(--gold)}
.contact-form .btn{align-self:flex-start; margin-top:8px}
.contact-form .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-msg{margin:0 0 24px; padding:15px 20px; border-radius:2px; font-size:15px; font-family:var(--sans)}
.form-msg.ok{background:color-mix(in srgb, var(--gold) 20%, transparent); border:1px solid var(--gold); color:var(--cream)}
.form-msg.err{background:rgba(244,238,226,.08); border:1px solid var(--onwine-line); color:var(--cream)}

/* -------- FOOTER -------- */
.site-footer{background:var(--wine-deep); color:var(--onwine); padding-block:clamp(40px,6vw,64px); border-top:1px solid var(--onwine-line)}
.foot-in{display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap}
.site-footer .fw{font-family:var(--serif); font-size:clamp(34px,6vw,54px); color:var(--cream); font-weight:400; line-height:.9; letter-spacing:-.02em}
.foot-tag{font-family:var(--serif); font-style:italic; font-size:16px; color:var(--gold); margin-top:10px}
.foot-meta{display:flex; flex-direction:column; gap:7px; text-align:right;
  font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--onwine)}
.foot-meta .note{color:var(--muted); letter-spacing:.14em}
@media (max-width:560px){ .foot-in{flex-direction:column; align-items:flex-start} .foot-meta{text-align:left} }

/* -------- reduccions de moviment -------- */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important}
}

/* CONMUTADOR D'IDIOMA */
.nav-lang{display:flex; gap:2px; align-items:center}
.nav-lang a{font-family:var(--sans); font-size:12px; letter-spacing:.08em; color:#d9cdbf; text-decoration:none; padding:4px 7px; opacity:.72}
.nav-lang a:hover{opacity:1; color:var(--cream)}
.nav-lang a.is-active{opacity:1; color:var(--gold)}
.nav-lang a:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
@media (max-width:760px){ .nav-lang{margin-left:auto} }

/* ===== Portal de client (/compte) ===================================== */
.portal{padding:clamp(44px,7vw,92px) 0 clamp(60px,9vw,120px)}
.portal-wrap{max-width:720px}

/* --- Accés (login): panell centrat --- */
.portal-login{display:flex; flex-direction:column; align-items:center; text-align:center}
.portal-panel{width:100%; max-width:540px; background:var(--cream-2); border:1px solid var(--line);
  border-radius:6px; padding:clamp(30px,5vw,54px) clamp(24px,4vw,48px); box-shadow:0 24px 60px -40px rgba(43,38,34,.5)}
.portal-key{display:flex; align-items:center; justify-content:center; width:62px; height:62px; margin:0 auto 22px;
  color:var(--gold); border:1px solid var(--line); border-radius:50%; background:color-mix(in srgb, var(--gold) 8%, transparent)}
.portal-panel .eyebrow{justify-content:center}
.portal-login-h{font-family:var(--serif); font-weight:500; font-size:clamp(30px,5.4vw,46px); color:var(--fg); line-height:1.04; margin-top:16px}
.portal-login-h em{font-style:italic; font-weight:400; color:var(--wine-ink)}
.portal-login-intro{max-width:40ch; margin:16px auto 0; color:var(--muted); font-size:15.5px; line-height:1.68}
.portal-error{margin-top:22px; padding:12px 18px; border:1px solid color-mix(in srgb, var(--wine-ink) 35%, var(--line));
  background:color-mix(in srgb, var(--wine-ink) 9%, transparent); color:var(--wine-ink); font-size:14px; border-radius:3px}
.portal-form{margin-top:28px; text-align:left}
.portal-form label{display:block; font-family:var(--sans); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--olive); margin-bottom:10px; text-align:center}
.portal-form-row{display:flex; gap:10px; flex-wrap:wrap}
.portal-form input{flex:1 1 220px; min-width:0; font-family:var(--serif); font-size:18px; letter-spacing:.14em; text-align:center;
  padding:14px 16px; background:var(--bg); color:var(--fg); border:1px solid var(--line); border-radius:3px}
.portal-form input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent)}
.portal-form .btn{flex:0 0 auto}
.portal-login .portal-help{margin-top:26px; text-align:center}

/* --- Capçalera de la reserva --- */
.portal-head{display:flex; flex-direction:column; align-items:flex-start; gap:8px}
.portal-hello{font-family:var(--serif); font-size:clamp(30px,5.4vw,52px); color:var(--fg); line-height:1.02; margin-top:14px}
.portal-status{display:inline-flex; align-items:center; gap:8px; margin-top:10px; font-family:var(--sans); font-size:11.5px;
  letter-spacing:.08em; color:#fff; background:var(--sc,#6E6A61); border-radius:999px; padding:6px 16px}
.portal-status::before{content:""; width:6px; height:6px; border-radius:50%; background:#fff; opacity:.85}

/* --- Targeta de detalls --- */
.portal-card{margin-top:30px; background:var(--cream-2); border:1px solid var(--line); border-radius:6px; overflow:hidden}
.portal-card-top{padding:clamp(24px,4vw,34px) clamp(24px,4vw,40px) 22px; border-bottom:1px solid var(--line)}
.portal-card-k{display:block; font-family:var(--sans); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--olive); margin-bottom:12px}
.portal-card-title{font-family:var(--serif); font-size:clamp(26px,4vw,38px); color:var(--fg); line-height:1.05}
.portal-when{margin:12px 0 0; font-family:var(--sans); font-size:15px; letter-spacing:.02em; color:var(--muted)}
.portal-when .dot{margin:0 9px; color:var(--gold)}
.portal-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0}
.portal-grid .pf{padding:22px clamp(24px,4vw,40px)}
.portal-grid .pf:first-child{border-right:1px solid var(--line-soft)}
.portal-grid dt{font-family:var(--sans); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--olive); margin-bottom:8px}
.portal-grid dd{margin:0; font-family:var(--serif); font-size:21px; color:var(--fg); line-height:1.2}
.portal-grid dd small{font-family:var(--sans); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-left:4px}

/* --- Proposta gastronòmica (menú) --- */
.portal-sec-h{font-family:var(--serif); font-size:clamp(20px,2.8vw,26px); color:var(--fg); margin:0 0 18px}
.portal-menu{margin-top:30px}
.portal-menu-list{list-style:none; margin:0; padding:0; counter-reset:course; border-top:1px solid var(--line)}
.portal-course{display:grid; grid-template-columns:auto 1fr; gap:4px 18px; align-items:baseline;
  padding:16px 0; border-bottom:1px solid var(--line-soft)}
.portal-course::before{counter-increment:course; content:counter(course,decimal-leading-zero);
  font-family:var(--serif); font-style:italic; font-size:16px; color:var(--gold); grid-row:1 / span 2}
.portal-course-t{font-family:var(--serif); font-size:19px; color:var(--fg); line-height:1.25}
.portal-course-d{grid-column:2; color:var(--muted); font-size:14.5px; line-height:1.6}
/* --- Notes client (intoleràncies / detalls) --- */
.portal-twocol{margin-top:30px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 40px}
.portal-note{background:var(--cream-2); border:1px solid var(--line); border-radius:6px; padding:22px 24px}
.portal-note .portal-sec-h{font-size:17px; margin-bottom:10px}
.portal-note p{margin:0; color:var(--fg); font-size:15px; line-height:1.66}
@media (max-width:560px){ .portal-twocol{grid-template-columns:1fr} }

/* --- Senyal + pagament (destacat) --- */
.portal-senyal{margin-top:18px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 30px;
  background:var(--wine-bg); color:var(--cream); border-radius:6px; padding:clamp(24px,4vw,34px) clamp(24px,4vw,40px)}
.portal-senyal-lab{display:block; font-family:var(--sans); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:8px}
.portal-senyal-amount strong{font-family:var(--serif); font-size:clamp(34px,6vw,48px); font-weight:500; color:var(--cream); line-height:.95; display:block}
.portal-senyal-amount small{display:block; margin-top:8px; font-family:var(--sans); font-size:12.5px; letter-spacing:.04em; color:color-mix(in srgb, var(--cream) 72%, transparent)}
.portal-senyal-action{flex:1 1 auto; max-width:360px; min-width:220px}
.portal-senyal-action form{margin:0}
.portal-senyal-action .btn{width:100%}
.portal-pay-soon{margin:0; color:color-mix(in srgb, var(--cream) 80%, transparent); font-size:14.5px; line-height:1.6}
.portal-pay-ok{font-family:var(--serif); font-style:italic; font-size:21px; color:var(--gold-bright)}
.portal-senyal.is-paid{background:color-mix(in srgb, var(--olive) 20%, var(--wine-deep))}

/* --- Peu del portal --- */
.portal-foot{margin-top:30px; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px 24px}
.portal-help{color:var(--muted); font-size:14px; margin:0}
.portal-help a{color:var(--wine-ink); text-decoration:none; border-bottom:1px solid var(--line)}
.portal-logout{font-family:var(--sans); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); text-decoration:none}
.portal-logout:hover{color:var(--wine-ink)}

@media (max-width:560px){
  .portal-grid{grid-template-columns:1fr}
  .portal-grid .pf{border-right:none; border-bottom:1px solid var(--line-soft)}
  .portal-senyal{flex-direction:column; align-items:flex-start}
  .portal-senyal-action{width:100%; max-width:none}
}

.foot-portal{color:inherit; text-decoration:none; border-bottom:1px solid var(--onwine-line,rgba(255,255,255,.25))}
.foot-portal:hover{color:var(--gold-bright)}