/* Pastelaria Al-Karib — Silves
   Identidade própria: amarelo da fachada, ardósia das lousas, papel de embrulho.
   Sem webfonts (carrega em qualquer lado, mesmo com rede fraca). */

:root{
  --papel:#faf4e8;
  --papel-2:#f3ebda;
  --tinta:#191510;
  --tinta-2:#3d362c;
  --cinza:#7c7263;
  --amarelo:#e3aa20;
  --amarelo-claro:#f7cf6a;
  --ardosia:#1c1915;
  --oliveira:#4c5844;
  --linha:#e0d3ba;
  --radius:10px;
  --sans:"Helvetica Neue",Helvetica,Arial,"Segoe UI",system-ui,sans-serif;
  --serif:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,serif;
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papel); color:var(--tinta); font-family:var(--sans);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
  -webkit-user-select:none; user-select:none;
}
input,textarea,select,[contenteditable],a,button,summary,label,.permite{
  -webkit-user-select:text; user-select:text;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--sans); font-weight:700; letter-spacing:-.028em; line-height:1.08; margin:0}
p{margin:0 0 1em}
.wrap{width:min(100% - 44px, var(--max)); margin-inline:auto}
.so-leitor{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.pular{
  position:absolute; left:-9999px; top:0; background:var(--tinta); color:#fff;
  padding:12px 18px; z-index:60;
}
.pular:focus{left:12px; top:12px}

/* ---------- toldo da esplanada (arte da casa) ---------- */
.toldo{
  height:26px;
  background-image:
    radial-gradient(circle at 12px 13px, var(--amarelo) 0 11.5px, transparent 12px),
    radial-gradient(circle at 36px 13px, var(--papel-2) 0 11.5px, transparent 12px),
    repeating-linear-gradient(90deg, var(--amarelo) 0 24px, var(--papel-2) 24px 48px);
  background-size: 48px 13px, 48px 13px, 100% 13px;
  background-position: 0 13px, 24px 13px, 0 0;
  background-repeat: repeat-x, repeat-x, no-repeat;
}

/* ---------- micro-topo ---------- */
.fita{
  background:var(--tinta); color:#f6efe2; font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase;
}
.fita .wrap{display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:space-between; padding:9px 0}
.fita b{color:var(--amarelo-claro); font-weight:700}
.fita .aberto::before{
  content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:#7ad07a; margin-right:7px; vertical-align:middle;
}

/* ---------- cabeçalho ---------- */
.topo{
  position:sticky; top:0; z-index:40; background:rgb(250 244 232 / .94);
  backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--linha);
}
.topo .wrap{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:10px 0}
.marca{display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:var(--tinta)}
.marca__selo{display:block; flex:none; width:46px; height:46px}
.marca__texto{display:flex; flex-direction:column; line-height:1}
.marca__nome{
  font-family:var(--serif); font-size:1.22rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--tinta);
}
.marca__sub{
  font-size:.56rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--cinza); margin-top:6px;
}
.marca:hover .marca__nome{color:var(--oliveira)}
.menu{display:none; gap:26px; font-size:.92rem; letter-spacing:.02em}
.menu a{text-decoration:none; position:relative; padding:6px 0}
.menu a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--amarelo); transition:right .25s ease;
}
.menu a:hover::after{right:0}
.acoes{display:flex; align-items:center; gap:10px}
.idiomas{display:flex; border:1px solid var(--linha); border-radius:999px; overflow:hidden; font-size:.82rem}
.idiomas a{padding:6px 11px; text-decoration:none; color:var(--cinza)}
.idiomas a[aria-current="true"]{background:var(--tinta); color:#fff}

.botao{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-weight:700;
  font-size:.9rem; letter-spacing:.02em; padding:12px 20px; border-radius:999px;
  border:2px solid var(--tinta); background:var(--tinta); color:#fff;
  transition:transform .18s ease, background .18s ease, color .18s ease;
}
.botao:hover{transform:translateY(-1px)}
.botao--amarelo{background:var(--amarelo); border-color:var(--amarelo); color:var(--tinta)}
.botao--vazio{background:transparent; color:var(--tinta)}
.botao--claro{background:transparent; border-color:rgb(255 255 255 / .7); color:#fff}

/* ---------- herói ---------- */
.heroi{position:relative; overflow:hidden; background:var(--ardosia)}
.heroi__foto{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 46%;
  opacity:.5;
}
.heroi::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, rgb(18 15 12 / .93) 0%, rgb(18 15 12 / .72) 46%, rgb(18 15 12 / .25) 100%);
}
.heroi .wrap{position:relative; z-index:2; padding:clamp(58px,10vw,120px) 0 clamp(46px,8vw,96px)}
.heroi__texto{max-width:36ch; color:#fbf6ea}
.marca-pequena{
  font-size:.76rem; letter-spacing:.28em; text-transform:uppercase; color:var(--amarelo-claro);
  margin:0 0 20px; display:flex; align-items:center; gap:12px;
}
.marca-pequena::before{content:""; width:38px; height:2px; background:var(--amarelo); display:inline-block}
.heroi h1{font-size:clamp(2.2rem,6.2vw,4.1rem); color:#fff; margin:0 0 20px; letter-spacing:-.032em}
.heroi h1 em{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--amarelo-claro)}
.heroi p.sopro{font-size:clamp(1rem,1.6vw,1.12rem); color:#e8dfcd; max-width:42ch; margin:0 0 30px}
.heroi .accoes{display:flex; flex-wrap:wrap; gap:12px}
.heroi__rodape{
  display:flex; flex-wrap:wrap; gap:14px 30px; margin-top:38px; padding-top:22px;
  border-top:1px solid rgb(255 255 255 / .16); color:#d9cfbb; font-size:.9rem;
}
.heroi__rodape b{color:#fff}
.heroi__selo{
  position:absolute; z-index:2; top:clamp(22px,4vw,40px); right:clamp(20px,4vw,46px);
  display:block; width:clamp(58px,8vw,96px); aspect-ratio:1; opacity:.95;
}
.heroi__arte{
  position:absolute; z-index:1; right:clamp(-18px,1vw,30px); bottom:-6px;
  width:clamp(150px,26vw,330px); color:var(--amarelo-claro); opacity:.17; line-height:0;
  pointer-events:none;
}
.heroi__arte svg{width:100%; height:auto; display:block}
@media (max-width:700px){ .heroi__arte{opacity:.12; width:clamp(130px,42vw,200px)} }

/* ---------- faixa de arte da pastelaria ---------- */
.arte-faixa{
  background:var(--papel-2); border-bottom:1px solid var(--linha);
  padding:22px 0; color:var(--oliveira); overflow:hidden;
}
.arte-faixa__linha{
  display:flex; align-items:center; justify-content:center; gap:clamp(10px,3vw,30px);
  width:min(100% - 44px, var(--max)); margin-inline:auto;
}
.arte-faixa__linha svg{flex:none; opacity:.85}
.arte-faixa__pto{
  flex:1 1 auto; max-width:74px; height:1px;
  background:radial-gradient(circle, var(--linha) 1px, transparent 1.2px) repeat-x 0 50%/8px 4px;
}
@media (max-width:560px){
  .arte-faixa__linha svg{width:34px; height:34px}
  .arte-faixa__linha{gap:8px}
}

/* ---------- faixa de factos ---------- */
.factos{background:var(--amarelo); color:var(--tinta)}
.factos .wrap{
  display:grid; gap:2px; grid-template-columns:1fr; padding:0;
}
.facto{padding:20px 4px; display:flex; gap:14px; align-items:flex-start; border-bottom:1px solid rgb(25 21 16 / .14)}
.facto:last-child{border-bottom:0}
.facto b{display:block; font-size:1rem; letter-spacing:-.01em}
.facto span{font-size:.9rem; color:#4a3f22}
.facto .ico{line-height:0; color:var(--tinta)}
.facto .ico svg{display:block}
@media (min-width:760px){
  .factos .wrap{grid-template-columns:repeat(3,1fr); gap:0 32px; padding:6px 0}
  .facto{border-bottom:0; border-right:1px solid rgb(25 21 16 / .16); padding:22px 6px}
  .facto:last-child{border-right:0}
}

/* ---------- secções ---------- */
section{padding:clamp(56px,9vw,104px) 0}
.cabeca{max-width:60ch; margin:0 0 clamp(28px,4vw,48px)}
.cabeca .rotulo{
  font-size:.74rem; letter-spacing:.26em; text-transform:uppercase; color:var(--oliveira);
  margin:0 0 14px; display:flex; align-items:center; gap:12px;
}
.cabeca .rotulo::after{content:""; flex:1; height:1px; background:var(--linha); max-width:70px}
.cabeca h2{font-size:clamp(1.7rem,3.6vw,2.7rem); margin:0 0 14px}
.cabeca p{color:var(--tinta-2); font-size:1.03rem; margin:0}

/* lousa */
.lousa{
  position:relative; background:var(--ardosia); color:#f4efe4; border-radius:6px;
  padding:clamp(26px,4vw,46px);
  box-shadow:0 0 0 8px #6b4a2c, 0 0 0 10px #4a3320, 0 34px 60px -38px rgb(0 0 0 / .8);
  background-image:radial-gradient(circle at 22% 18%, rgb(255 255 255 / .05) 0 26%, transparent 27%),
                   radial-gradient(circle at 78% 74%, rgb(255 255 255 / .04) 0 30%, transparent 31%);
  background-size:180px 120px, 220px 160px;
}
.lousa::after{
  content:""; position:absolute; inset:10px; border:1px dashed rgb(247 207 106 / .22);
  border-radius:3px; pointer-events:none;
}
.lousa h3{
  font-family:var(--serif); font-style:italic; font-weight:400; color:var(--amarelo-claro);
  font-size:clamp(1.3rem,2.4vw,1.7rem); margin:0 0 8px;
}
.lousa .nota{color:#b6a98f; font-size:.88rem; margin:0 0 26px}
.grupos{display:grid; gap:26px; grid-template-columns:1fr}
.grupo h4{
  font-size:.76rem; letter-spacing:.22em; text-transform:uppercase; color:#a9997c;
  margin:0 0 12px; padding-bottom:8px; border-bottom:1px dashed #3a3329;
}
.grupo ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.grupo li{display:flex; gap:12px; align-items:baseline; font-size:1rem; color:#efe7d6}
.grupo li::before{content:"·"; color:var(--amarelo); font-weight:700}

/* papel de embrulho por trás da secção do espaço */
#espaco{
  background-color:var(--papel);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23c9a227' stroke-opacity='.3' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M18 12v16'/%3E%3Cpath d='M18 15l-3.4-3.4M18 15l3.4-3.4M18 21l-3.8-3.6M18 21l3.8-3.6M18 27l-3.2-3.2M18 27l3.2-3.2'/%3E%3Ccircle cx='54' cy='54' r='5.6'/%3E%3Cpath d='M48.4 54h11.2'/%3E%3C/g%3E%3C/svg%3E");
  background-size:72px 72px;
}

/* fotos */
.galeria{display:grid; gap:12px; grid-template-columns:1fr}
.galeria figure{margin:0; position:relative; overflow:hidden; border-radius:var(--radius); background:var(--papel-2)}
.galeria img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; transition:transform .6s ease}
.galeria figure:hover img{transform:scale(1.04)}
.galeria figcaption{
  position:absolute; inset:auto 0 0 0; padding:26px 16px 12px; font-size:.85rem; color:#fff;
  background:linear-gradient(to top, rgb(0 0 0 / .62), transparent);
  pointer-events:none;
}

/* onde estamos */
.onde{background:var(--papel-2); border-top:1px solid var(--linha); border-bottom:1px solid var(--linha)}
.onde__grelha{display:grid; gap:clamp(24px,4vw,44px); grid-template-columns:1fr}
.cartao{background:#fffdf8; border:1px solid var(--linha); border-radius:var(--radius); padding:clamp(22px,3.4vw,32px)}
.cartao h3{font-size:1.12rem; margin:0 0 16px}
.morada{font-style:normal; color:var(--tinta-2); margin:0 0 20px; font-size:1rem}
.morada b{color:var(--tinta)}
.lista-contacto{list-style:none; margin:0 0 22px; padding:0; display:grid; gap:9px}
.lista-contacto a{font-weight:700; text-decoration:none; border-bottom:2px solid var(--amarelo-claro)}
.lista-contacto .tipo{color:var(--cinza); font-weight:400; font-size:.86rem; margin-left:6px}
.horario{width:100%; border-collapse:collapse; font-size:.95rem}
.horario th,.horario td{padding:9px 0; border-bottom:1px solid var(--linha); text-align:left; font-weight:400}
.horario th{color:var(--cinza)}
.horario tr:last-child th,.horario tr:last-child td{border-bottom:0}
.horario .agora{color:var(--oliveira); font-weight:700}
.mapa{border-radius:var(--radius); overflow:hidden; border:1px solid var(--linha); background:#e9e1d2}
.mapa iframe{display:block; width:100%; height:100%; min-height:340px; border:0}

/* rodapé */
.pe{
  position:relative; background:var(--ardosia); color:#e6dcc9;
  padding:clamp(46px,6vw,72px) 0 96px;
}
.pe::before{
  content:""; position:absolute; left:0; right:0; top:-12px; height:12px;
  background:radial-gradient(circle at 50% 100%, var(--amarelo) 0 10.5px, transparent 11px) repeat-x 0 0/22px 12px;
}
.pe .marca{color:#f4efe4; margin-bottom:14px}
.pe .marca__nome{color:#f4efe4; font-size:1.1rem}
.pe .marca__sub{color:#b8ab93}
.pe__grelha{display:grid; gap:26px; grid-template-columns:1fr; align-items:start}
.pe p{font-size:.92rem; color:#b8ab93; margin:0}
.pe a{color:#f4efe4}
.pe__fim{
  margin-top:34px; padding-top:18px; border-top:1px solid #332c24; font-size:.84rem; color:#9c9080;
  display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between;
}

/* tarja (canónica, ver scripts/lib/tarja.mjs) */

/* ---------- ecrãs maiores ---------- */
@media (min-width:640px){
  .factos .wrap{grid-template-columns:repeat(3,1fr); gap:0}
  .facto{border-bottom:0; border-right:1px solid rgb(25 21 16 / .14); padding:26px 22px}
  .facto:last-child{border-right:0}
  .grupos{grid-template-columns:repeat(2,1fr)}
  .galeria{grid-template-columns:repeat(2,1fr)}
  .galeria figure:first-child{grid-column:span 2}
  .galeria figure:first-child img{aspect-ratio:21/9}
  .pe__grelha{grid-template-columns:1.2fr 1fr 1fr}
}
@media (min-width:900px){
  .menu{display:flex}
  .onde__grelha{grid-template-columns:1fr 1fr}
  .galeria{grid-template-columns:repeat(4,1fr)}
  .galeria figure:first-child{grid-column:span 2; grid-row:span 2}
  .galeria figure:first-child img{aspect-ratio:auto; height:100%}
  .grupos{grid-template-columns:repeat(2,1fr); gap:34px}
  .marca__selo{width:52px; height:52px}
  .marca__nome{font-size:1.34rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important; scroll-behavior:auto !important}
}

/* tarja de pré-visualização — igual em todos os sites (fonte: scripts/lib/tarja.mjs) */
.tarja{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:#111112;color:#f2ece3;border-top:1px solid rgba(242,236,227,.3);font:500 .84rem/1.35 ui-sans-serif,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;letter-spacing:.01em;text-align:center;padding:.62rem 1rem;box-shadow:0 -6px 18px rgba(0,0,0,.3)}
.tarja span{display:block;margin:0 auto;max-width:94ch;text-wrap:balance}
.tarja a{color:#fff;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.tarja a:hover,.tarja a:focus-visible{color:#e3c39a}
body{padding-bottom:3.1rem}
@media (max-width:640px){.tarja{font-size:.79rem;line-height:1.4;padding:.6rem .9rem}body{padding-bottom:3.6rem}}
@supports (padding:max(0px)){.tarja{padding-bottom:max(.62rem,calc(.36rem + env(safe-area-inset-bottom)));padding-left:max(1rem,env(safe-area-inset-left));padding-right:max(1rem,env(safe-area-inset-right))}}