/* Solar do Bacalhau - design "Maré". Extraído do protótipo aprovado. */
:root{
  /* M · Maré (areia + petróleo + coral de boia) */
  --surface:#F3EEE4;--raised:#FBF8F2;--ink:#0F2A35;--muted:#4E6169;--brand:#12475A;--accent:#C2502B;--on-accent:#FFFFFF;
  --em:#9CCFC7;--em-light:#12475A;--band:#0F2A35;--on-band:#F3EEE4;--band-em:#9CCFC7;--res:#12475A;--res-em:#9CCFC7;--foam:#9CCFC7;--line:#0F2A3522;--dots:#12475A66;
  --ease-out:cubic-bezier(.22,1,.36,1);--ease-io:cubic-bezier(.65,0,.35,1);
  --disp:"Libre Caslon Display",Georgia,serif;--body:"Libre Caslon Text",Georgia,serif;--label:"Tenor Sans",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--surface);color:var(--ink);font:16px/1.65 var(--body);transition:background .6s,color .6s}
.label{font-family:var(--label);font-size:12px;letter-spacing:.24em;text-transform:uppercase}
img{display:block;max-width:100%}
a{color:inherit}

/* ---------- PRELOADER ---------- */
#intro{position:fixed;inset:0;z-index:50;background:var(--surface);display:flex;align-items:center;justify-content:center;flex-direction:column;cursor:pointer}
#intro .mark{width:118px;height:118px;color:var(--brand)}
#intro .mark path,#intro .mark circle.s{stroke-dasharray:1;stroke-dashoffset:1}
#intro .eye{opacity:0}
#intro .wm{display:flex;flex-direction:column;align-items:center;margin-top:16px;color:var(--brand)}
#intro .solar{font:400 54px/1 var(--disp);letter-spacing:.16em;margin-right:-.16em;display:flex;overflow:hidden;padding-top:4px}
#intro .solar span{display:inline-block;transform:translateY(105%)}
#intro .do{font:italic 18px/1.4 var(--body);opacity:0}
#intro .bac{font:400 22px/1 var(--disp);letter-spacing:.06em;margin-right:-.06em;opacity:0}
#intro .rule{width:64px;height:1px;background:var(--brand);margin:14px 0 9px;transform:scaleX(0)}
#intro .desc{font-family:var(--label);font-size:10px;letter-spacing:.34em;margin-right:-.34em;text-transform:uppercase;opacity:0;color:var(--muted)}
#intro .skip{position:absolute;bottom:22px;font-family:var(--label);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);opacity:.7}

.play #intro .mark .a1{animation:draw 1.1s var(--ease-io) .25s forwards}
.play #intro .mark .a2{animation:draw .9s var(--ease-io) .55s forwards}
.play #intro .mark .a3{animation:draw .8s var(--ease-io) .85s forwards}
.play #intro .mark .f1{animation:draw 1s var(--ease-io) 1.0s forwards}
.play #intro .mark .w1{animation:draw .9s var(--ease-io) 1.3s forwards}
.play #intro .eye{animation:fade .3s ease 1.7s forwards}
.play #intro .solar span{animation:rise .9s var(--ease-out) forwards;animation-delay:calc(1.55s + var(--i) * 70ms)}
.play #intro .do{animation:fade .6s ease 2.05s forwards}
.play #intro .bac{animation:track 1.1s var(--ease-out) 2.1s forwards}
.play #intro .rule{animation:grow .8s var(--ease-out) 2.5s forwards}
.play #intro .desc{animation:fade .6s ease 2.75s forwards}
.play #intro{animation:curtain 1.05s var(--ease-io) 3.55s forwards}
.done #intro{display:none}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
@keyframes rise{to{transform:none}}
@keyframes track{from{opacity:0;letter-spacing:.06em}to{opacity:1;letter-spacing:.34em;margin-right:-.34em}}
@keyframes grow{to{transform:scaleX(1)}}
@keyframes curtain{to{clip-path:inset(0 0 100% 0)}}

/* ---------- NAV ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:18px clamp(16px,4vw,48px);color:#fff;transition:background .4s,color .4s,padding .4s}
nav.solid{background:var(--raised);color:var(--brand);padding-top:12px;padding-bottom:12px;box-shadow:0 1px 0 var(--line)}
nav .lock{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
nav .lock svg{width:40px;height:40px}
nav .lock b{font:400 20px/1 var(--disp);letter-spacing:.14em;display:block}
nav .lock small{font:400 10px/1.4 var(--disp);letter-spacing:.31em;display:block}
nav ul{list-style:none;display:flex;gap:28px;align-items:center}
nav a{color:inherit;text-decoration:none}
nav ul a:not(.btn){position:relative}
nav ul a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
nav ul a:not(.btn):hover::after{transform:scaleX(1);transform-origin:left}
.btn{--h:52px;display:inline-flex;align-items:center;gap:16px;height:var(--h);font-family:var(--label);font-size:14px;letter-spacing:.06em;text-decoration:none;position:relative;isolation:isolate;border-radius:999px;white-space:nowrap}
.btn.p{background:var(--accent);color:var(--on-accent);padding:0 6px 0 26px;overflow:hidden}
.btn.p .ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--on-accent) 18%,transparent);position:relative}
.btn.p .ic::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--on-accent);opacity:.12;transform:scale(1);transition:transform .6s var(--ease-out)}
.btn.p:hover .ic::before{transform:scale(9)}
.btn .ic svg{width:16px;height:16px;transition:transform .5s var(--ease-out)}
.btn:hover .ic svg{transform:translateX(3px)}
.btn.s{color:inherit;padding:0 2px;height:44px;border-radius:0;background:none}
.btn.s::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:8px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Cpath d='M0 4 Q6 0 12 4 T24 4' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") 0 0/24px 8px repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Cpath d='M0 4 Q6 0 12 4 T24 4' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") 0 0/24px 8px repeat-x}
.btn.s:hover::after{animation:surf 1s linear infinite}
@keyframes surf{to{-webkit-mask-position:24px 0;mask-position:24px 0}}
nav .btn.p{--h:44px;font-size:13px;padding-left:20px;text-transform:none;letter-spacing:.06em}
nav .btn.p .ic{width:32px;height:32px}
:focus-visible{outline:2px solid var(--em-light);outline-offset:3px;border-radius:4px}
nav ul li.lang a{letter-spacing:.18em}
nav ul li.lang .sep{opacity:.4;margin:0 2px}
nav ul li.lang .on{opacity:1}
nav ul li.lang .off{opacity:.5}
@media(max-width:760px){nav ul li:not(:last-child):not(.lang){display:none}}

/* ---------- HERO ---------- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;color:#fff;display:flex;align-items:flex-end}
.hero .bg{position:absolute;inset:-2%;background:#0F2A35;transform:scale(1.14)}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.hero .tint{position:absolute;inset:0;background:#2C6F86;mix-blend-mode:multiply}
.hero .credit{position:absolute;z-index:2;left:clamp(16px,6vw,96px);bottom:18px;font-family:var(--label);font-size:10px;letter-spacing:.14em;color:#F3EEE4;opacity:.6}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0F2A35b0 0%,#12475A59 38%,#0F2A35f0 100%)}
.hero .in{position:relative;z-index:2;padding:0 clamp(16px,6vw,96px) clamp(48px,9vh,96px);max-width:900px}
.hero h1{font:400 clamp(44px,7vw,96px)/1.02 var(--disp)}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.22em;margin-bottom:-.22em}
.hero h1 .ln>span{display:block;transform:translateY(110%)}
.hero h1 em{color:var(--em);font-style:italic;font-family:var(--body)}
.hero p{font-size:18px;max-width:520px;margin-top:16px;opacity:0;transform:translateY(16px)}
.hero .label{color:var(--em);opacity:0}
.hero .btns{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;opacity:0;transform:translateY(16px)}
.hero .scroll{position:absolute;z-index:2;right:clamp(16px,4vw,48px);bottom:40px;writing-mode:vertical-rl;font-family:var(--label);font-size:10px;letter-spacing:.3em;text-transform:uppercase;opacity:.8}
.hero .scroll::after{content:"";display:block;width:1px;height:56px;background:#fff;margin:10px auto 0;transform-origin:top;animation:tick 2.2s var(--ease-io) infinite}
@keyframes tick{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.solar-home nav{opacity:0}
.solar-home.revealed nav{opacity:1;transition:opacity .8s ease .2s,background .4s,color .4s,padding .4s}
.revealed .hero .bg{transform:scale(1.02);transition:transform 2.6s var(--ease-out)}
.revealed .hero h1 .ln>span{transform:none;transition:transform 1.1s var(--ease-out)}
.revealed .hero h1 .ln:nth-child(2)>span{transition-delay:.12s}
.revealed .hero .label{opacity:1;transition:opacity .8s ease .1s}
.revealed .hero p{opacity:.92;transform:none;transition:all .9s var(--ease-out) .35s}
.revealed .hero .btns{opacity:1;transform:none;transition:all .9s var(--ease-out) .5s}

/* ---------- INFO BAR ---------- */
.info{background:var(--band);color:var(--on-band);display:flex;justify-content:center;gap:clamp(12px,3vw,36px);flex-wrap:wrap;padding:18px 16px;font-family:var(--label);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;text-align:center}
.info b{color:var(--band-em);font-weight:400}
.info a{text-decoration:none}

/* ---------- SECTIONS ---------- */
section.s{padding:clamp(72px,12vw,140px) clamp(16px,6vw,96px)}
.intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,96px);align-items:center;max-width:1200px;margin:0 auto}
.frame{position:relative;aspect-ratio:4/5;overflow:hidden;background:#d9cdb8}
.frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.15);transition:transform 1.8s var(--ease-out)}
.frame::after{content:"";position:absolute;inset:12px;border:1px solid #ffffff99;pointer-events:none}
.mask{clip-path:inset(100% 0 0 0);transition:clip-path 1.3s var(--ease-io)}
.in-view.mask{clip-path:inset(0 0 0 0)}
.in-view .frame img,.frame.in-view img{transform:scale(1)}
h2.t{font:400 clamp(34px,4.6vw,58px)/1.14 var(--disp);color:var(--brand);padding-bottom:.1em}
h2.t em{font-family:var(--body);font-style:italic;color:var(--em-light)}
.eyebrow{color:var(--em-light);display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:36px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-out) .2s}
.in-view .eyebrow::before,.eyebrow.in-view::before{transform:scaleX(1)}
.copy p{color:var(--muted);margin-top:18px;max-width:520px}
.up{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);transition-delay:calc(var(--d,0) * 90ms)}
.up.in-view{opacity:1;transform:none}

/* pratos */
.dishes{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1300px;margin:48px auto 0}
.dish{position:relative;overflow:hidden;aspect-ratio:3/4;background:#cfc3ad}
.dish img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.dish:hover img{transform:scale(1.06)}
.dish figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 18px 18px;background:linear-gradient(transparent,#0b2230d9);color:#fff;font:400 22px/1.15 var(--disp)}
.dish figcaption small{display:block;font-family:var(--label);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--foam);margin-bottom:6px}
@media(max-width:860px){.intro-grid{grid-template-columns:1fr}.dishes{grid-template-columns:repeat(2,1fr)}}

/* menu */
.menu{max-width:860px;margin:0 auto;text-align:center}
.menu .div{width:1px;height:48px;background:var(--em-light);margin:0 auto 22px;transform:scaleY(0);transform-origin:top;transition:transform 1s var(--ease-out)}
.menu .div.in-view{transform:none}
.items{margin-top:40px;text-align:left}
.item{display:flex;align-items:baseline;gap:12px;padding:16px 0;border-top:1px solid var(--line)}
.item .n{font:400 22px/1.2 var(--disp);color:var(--brand)}
.item small{display:block;color:var(--muted);font-size:14px}
.item .dots{flex:1;border-bottom:1px dotted var(--dots);transform:translateY(-5px) scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease-out) .25s}
.item.in-view .dots{transform:translateY(-5px)}
.item .pr{font-family:var(--body);font-variant-numeric:tabular-nums;white-space:nowrap}

/* reserva */
.res{position:relative;overflow:hidden;background:var(--res);color:#FFFFFF;text-align:center}
.res h2{font:400 clamp(34px,5vw,64px)/1.12 var(--disp);padding-bottom:.1em}
.res h2 em{font-family:var(--body);font-style:italic;color:var(--res-em)}
.res p{opacity:.88;margin:14px auto 30px;max-width:520px}
.res .btn.p{background:var(--accent);color:var(--on-accent)}
.res .btn.p,.res .up:last-of-type{display:inline-flex}
.res .watermark{position:absolute;right:-60px;top:50%;width:380px;height:380px;color:#ffffff14;transform:translateY(-50%) rotate(-8deg)}
footer{padding:48px clamp(16px,6vw,96px);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:14px;color:var(--muted);border-top:1px solid var(--line)}
footer a{text-decoration:none}

/* calçada portuguesa (mar largo do Rossio) */
.calcada{height:56px;will-change:background-position;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='28' viewBox='0 0 80 28'%3E%3Cpath d='M0 7 Q20 -1 40 7 T80 7 V14 Q60 22 40 14 T0 14 Z' fill='%2312475A'/%3E%3C/svg%3E") 0 0/80px 28px repeat;}
@keyframes mar{to{background-position:80px 0}}
.calcada.thin{height:28px}
.azulejo{position:relative}
.azulejo::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64' fill='none' stroke='%2312475A' stroke-width='1.2'%3E%3Cpath d='M0 16 A16 16 0 0 0 16 0 M48 0 A16 16 0 0 0 64 16 M64 48 A16 16 0 0 0 48 64 M16 64 A16 16 0 0 0 0 48'/%3E%3Cpath d='M32 14 L50 32 L32 50 L14 32 Z'/%3E%3Ccircle cx='32' cy='32' r='5'/%3E%3Cpath d='M32 0 V8 M32 56 V64 M0 32 H8 M56 32 H64'/%3E%3C/svg%3E") 0 0/64px 64px;opacity:.07;pointer-events:none}
.azulejo>*{position:relative}
/* ondas animadas entre secções */
.wave{display:block;width:100%;height:64px;color:var(--next);background:var(--prev);overflow:hidden}
.wave svg{width:200%;height:100%;display:block;will-change:transform}
.wave svg path{transform-box:fill-box;transform-origin:50% 100%;will-change:transform}
@keyframes drift{to{transform:translateX(-50%)}}

/* ---------- SUB-PÁGINAS (menu completo, reservas) ---------- */
.subpage{max-width:1100px;margin:0 auto;padding:clamp(96px,14vh,150px) clamp(16px,6vw,96px) clamp(64px,10vw,120px)}
.subpage .phead{text-align:center;margin-bottom:clamp(40px,6vw,72px)}
.subpage .phead .label{color:var(--em-light);justify-content:center;display:flex}
.subpage h1{font:400 clamp(38px,6vw,68px)/1.1 var(--disp);color:var(--brand);margin-top:12px;padding-bottom:.08em}
.subpage h1 em{font-family:var(--body);font-style:italic;color:var(--em-light)}
.subpage .lead{color:var(--muted);max-width:560px;margin:14px auto 0}
.subpage .rule{width:64px;height:1px;background:var(--em-light);margin:18px auto 0}
.menu-note{text-align:center;color:var(--muted);font-size:14px;margin:0 auto clamp(32px,5vw,56px);max-width:560px}
.menu-cat{margin:0 auto clamp(40px,6vw,64px);max-width:760px}
.menu-cat__head{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:10px;text-align:center}
.menu-cat__it{font:400 28px/1.1 var(--disp);color:var(--brand)}
.menu-cat__sub{font-family:var(--label);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--foam);color:var(--em-light)}
.subpage .cta{text-align:center;margin-top:clamp(40px,6vw,64px)}
/* reservas */
.rcard{max-width:760px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,56px)}
.rcard h2{font:400 26px/1.15 var(--disp);color:var(--brand);margin-bottom:10px}
.rcard ul{list-style:none;color:var(--muted)}
.rcard li{padding:7px 0;border-top:1px solid var(--line)}
.rcard li:first-child{border-top:none}
.rcard li strong{color:var(--ink);font-weight:400;font-family:var(--label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:2px}
.rcard a{text-decoration:none;border-bottom:1px solid var(--line)}
@media(max-width:700px){.rcard{grid-template-columns:1fr}}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  #intro *{animation:none!important;stroke-dashoffset:0!important;opacity:1!important;transform:none!important;letter-spacing:.34em}
  .play #intro{animation:fadeout .5s ease .8s forwards!important}
  .up,.mask,.frame img,.item .dots,.eyebrow::before,.menu .div,.hero *,.hero .bg{transition:none!important;transform:none!important;opacity:1!important;clip-path:none!important}
  .hero .scroll::after,.wave svg,.calcada{animation:none}
}
@keyframes fadeout{to{opacity:0;visibility:hidden}}