/* GranCanariaTable v2 — "Mojo & Sol": palette dai mojos canari, piatti di
   ceramica come monogrammi, linguaggio sticker (bordi ink + ombre dure). */
:root{
  --sal:#FFF6EC; --card:#FFFFFF; --ink:#142129; --ink-2:#5C6B72;
  --rojo:#E44E26; --rojo-deep:#C23A17; --verde:#2E9558; --papaya:#F49C2D;
  --atlantico:#1B85A8; --tuno:#C64678;
  --line:#142129; --r:20px;
  --pop:3px 3px 0 var(--ink);
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
body{
  background:var(--sal); color:var(--ink);
  font:400 16px/1.55 "Instrument Sans",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.wordmark,.plate span{font-family:"Bricolage Grotesque",system-ui,sans-serif}
a{color:inherit;text-decoration:none}
svg{width:18px;height:18px;flex:none}
:focus-visible{outline:3px solid var(--papaya);outline-offset:2px;border-radius:6px}

/* tinte piatto (assegnate per slug) */
.h0{--hue:var(--rojo);--hue-soft:#FBDCD2}
.h1{--hue:var(--verde);--hue-soft:#D8EEDF}
.h2{--hue:var(--papaya);--hue-soft:#FDE8CB}
.h3{--hue:var(--atlantico);--hue-soft:#D3E9F0}
.h4{--hue:var(--tuno);--hue-soft:#F6D9E4}

/* header */
.top{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px clamp(20px,5vw,56px);
  position:sticky;top:0;z-index:10;
  background:color-mix(in srgb,var(--sal) 92%,transparent);backdrop-filter:blur(10px);
  border-bottom:2px solid var(--ink);
}
.wordmark{font-size:23px;font-weight:800;letter-spacing:-.02em}
.wordmark em{font-style:normal;color:var(--rojo)}
.lang{display:flex;border:2px solid var(--ink);border-radius:999px;overflow:hidden;background:var(--card)}
.lang button{
  font:700 12px/1 "Instrument Sans",sans-serif;letter-spacing:.05em;color:var(--ink);
  background:none;border:0;padding:8px 12px;cursor:pointer;
}
.lang button.on{background:var(--ink);color:var(--sal)}

/* hero */
.hero{
  position:relative;overflow:clip;
  max-width:1200px;margin:0 auto;
  padding:clamp(48px,8vw,96px) clamp(20px,5vw,56px) 26px;
}
.sun{
  position:absolute;z-index:0;top:clamp(24px,4vw,48px);right:clamp(-60px,2vw,96px);
  width:clamp(180px,30vw,360px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 33% 30%,#FFD98A 0%,var(--papaya) 46%,var(--rojo) 100%);
  border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);
  animation:float 7s ease-in-out infinite alternate;
}
.sun::after{
  content:"";position:absolute;inset:-26px;border-radius:50%;
  border:2px dashed color-mix(in srgb,var(--rojo) 55%,transparent);
}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(16px)}}
.hero>*:not(.sun){position:relative;z-index:1}
.kicker{
  display:inline-block;font:700 12px/1 "Instrument Sans",sans-serif;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  background:var(--card);border:2px solid var(--ink);border-radius:999px;
  padding:8px 14px;box-shadow:var(--pop);margin-bottom:22px;
  animation:rise .5s ease both;
}
.hero h1{
  font-size:clamp(38px,6.5vw,74px);font-weight:800;line-height:1.02;
  letter-spacing:-.03em;max-width:15ch;animation:rise .5s .06s ease both;
}
.hero h1 em{
  font-style:normal;color:var(--rojo);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='10' viewBox='0 0 90 10'%3E%3Cpath d='M2 7c8-6 14-6 22 0s14 6 22 0 14-6 22 0 14 6 20 1' fill='none' stroke='%23F49C2D' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") bottom/auto 10px repeat-x;
  padding-bottom:12px;
}
.hero .sub{
  color:var(--ink-2);margin-top:18px;font-size:17.5px;max-width:52ch;
  animation:rise .5s .12s ease both;
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* filtri sticker */
.filters{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;align-items:center;
  animation:rise .5s .18s ease both;
}
.filters input[type=search],.filters select,.chk{
  font:600 14px/1 "Instrument Sans",sans-serif;color:var(--ink);
  background:var(--card);border:2px solid var(--ink);border-radius:999px;
  padding:12px 16px;outline-offset:2px;
}
.filters input[type=search]{flex:1 1 240px;min-width:200px}
.filters input::placeholder{color:var(--ink-2)}
.filters select{cursor:pointer;appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23142129' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.filters input:focus,.filters select:focus{box-shadow:var(--pop)}
.chk{display:flex;gap:8px;align-items:center;cursor:pointer}
.chk input{accent-color:var(--verde);width:15px;height:15px}
.chk:has(input:checked){background:var(--verde);color:#fff;border-color:var(--ink);box-shadow:var(--pop)}
.chk:has(input:checked) input{accent-color:#fff}

/* mosaico card */
.grid{
  max-width:1200px;margin:0 auto;padding:14px clamp(20px,5vw,56px) 70px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:16px;
}
.card{
  background:var(--card);border:2px solid var(--ink);border-radius:var(--r);
  padding:20px;display:flex;flex-direction:column;gap:7px;
  transition:transform .16s ease,box-shadow .16s ease;
  animation:rise .45s ease both;
}
.card:nth-child(-n+12){animation-delay:calc(.22s + .04s*var(--i,0))}
.card:hover{transform:translate(-2px,-3px);box-shadow:5px 6px 0 var(--hue)}
.plate{
  width:72px;height:72px;border-radius:50%;margin-bottom:8px;
  background:radial-gradient(circle at 32% 28%,color-mix(in srgb,var(--hue) 72%,#fff) 0%,var(--hue) 62%);
  border:2px solid var(--ink);
  box-shadow:inset 0 0 0 7px color-mix(in srgb,#fff 32%,transparent);
  display:grid;place-items:center;
  transition:transform .16s ease;
}
.card:hover .plate{transform:rotate(-8deg) scale(1.05)}
.plate span{font-size:30px;font-weight:800;color:#fff;line-height:1;
  text-shadow:0 1px 0 rgba(20,33,41,.35)}
/* logo vero (contain su bianco) vs insegna illustrata nostra (cover) */
.plate.has-logo{background:#fff;box-shadow:none;overflow:hidden}
.plate.has-logo img{width:100%;height:100%;border-radius:50%;display:block}
.plate.real img{object-fit:contain;padding:9%}
.plate.gen img{object-fit:cover}
.card h3{font-size:20px;font-weight:700;letter-spacing:-.015em;line-height:1.12}
.meta{color:var(--ink-2);font-size:13.5px;font-weight:500}
.badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:7px}
.badge{
  display:inline-flex;gap:6px;align-items:center;
  font:600 12px/1 "Instrument Sans",sans-serif;color:var(--ink);
  border:1.5px solid var(--ink);border-radius:999px;padding:6px 10px;
  background:var(--sal);
}
.badge svg{width:13px;height:13px}
.badge.b-del{background:#D8EEDF}
.empty{text-align:center;color:var(--ink-2);padding:0 20px 70px;font-weight:500}

/* photo-tile intercalate nella griglia */
.photo-tile{
  grid-column:span 2;
  background:var(--card);border:2px solid var(--ink);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  animation:rise .45s ease both;
  transition:transform .16s ease,box-shadow .16s ease;
}
.photo-tile:hover{transform:translate(-2px,-3px);box-shadow:5px 6px 0 var(--papaya)}
.photo-tile img{width:100%;flex:1;min-height:170px;max-height:225px;object-fit:cover;display:block;border-bottom:2px solid var(--ink)}
.photo-tile figcaption{
  padding:12px 18px 14px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.photo-tile em{font:700 11px/1 "Instrument Sans",sans-serif;letter-spacing:.12em;
  text-transform:uppercase;font-style:normal;color:var(--sand)}
.photo-tile strong{font-family:"Bricolage Grotesque",sans-serif;font-size:18px;font-weight:700;letter-spacing:-.01em}

/* food band nella scheda */
.food-band{
  margin-top:30px;display:grid;grid-template-columns:200px 1fr;align-items:center;
  background:var(--card);border:2px solid var(--ink);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--pop);
}
.food-band img{width:100%;height:100%;object-fit:cover;display:block;border-right:2px solid var(--ink)}
.food-band figcaption{padding:18px 22px;display:flex;flex-direction:column;gap:4px}
.food-band em{font:700 11px/1 "Instrument Sans",sans-serif;letter-spacing:.12em;
  text-transform:uppercase;font-style:normal;color:var(--sand)}
.food-band strong{font-family:"Bricolage Grotesque",sans-serif;font-size:20px;font-weight:700}
.food-band span{color:var(--ink-2);font-size:14px;font-weight:500;line-height:1.45}

/* scheda ristorante */
.detail-hero{
  background:var(--hue-soft);border-bottom:2px solid var(--ink);
  padding:clamp(30px,5vw,48px) clamp(20px,5vw,56px) clamp(30px,5vw,44px);
}
.detail-hero .inner,.detail{max-width:820px;margin:0 auto}
.crumb{margin-bottom:24px;font-size:14px;font-weight:600}
.crumb a{display:inline-flex;gap:6px;align-items:center;color:var(--ink);
  background:var(--card);border:2px solid var(--ink);border-radius:999px;
  padding:8px 14px;transition:box-shadow .15s ease}
.crumb a:hover{box-shadow:var(--pop)}
.detail-hero .plate{width:88px;height:88px}
.detail-hero .plate span{font-size:38px}
.detail-hero .kicker{margin:18px 0 10px;animation:none;box-shadow:none}
.detail-hero h1{font-size:clamp(32px,5.5vw,54px);font-weight:800;letter-spacing:-.03em;line-height:1.04}
.detail-hero .sub{color:var(--ink-2);margin-top:10px;font-weight:500}
.detail-hero .badges{margin-top:14px}
.detail-hero .badge{background:var(--card)}
.detail{padding:30px clamp(20px,5vw,56px) 70px}
.info-list{display:flex;flex-direction:column;gap:13px;margin:6px 0 10px}
.info{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;font-weight:500}
.info svg{color:var(--rojo);margin-top:3px}
.info.muted{color:var(--ink-2)}
a.info:hover span{color:var(--rojo)}
.btn{
  display:inline-block;margin-top:16px;
  font:700 15px/1 "Instrument Sans",sans-serif;color:#fff;background:var(--rojo);
  border:2px solid var(--ink);border-radius:999px;padding:14px 24px;
  box-shadow:var(--pop);transition:transform .13s ease,box-shadow .13s ease,background .13s ease;
}
.btn:hover{background:var(--rojo-deep);transform:translate(-1px,-2px);box-shadow:5px 6px 0 var(--ink)}
.map{
  width:100%;height:340px;border:2px solid var(--ink);border-radius:var(--r);
  margin-top:30px;display:block;background:var(--card);box-shadow:var(--pop);
}

/* footer */
.foot{max-width:1200px;margin:0 auto;padding:10px clamp(20px,5vw,56px) 40px}
.foot-claim{
  background:var(--papaya);border:2px solid var(--ink);border-radius:var(--r);
  box-shadow:5px 6px 0 var(--ink);
  padding:clamp(26px,4vw,42px);display:flex;flex-direction:column;gap:8px;align-items:flex-start;
}
.foot-claim h3{font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-.02em}
.foot-claim p{max-width:52ch;font-weight:500}
.foot-claim .btn{background:var(--ink);margin-top:12px}
.foot-claim .btn:hover{background:#0B161C}
.foot-legal{color:var(--ink-2);font-size:13px;margin-top:26px;max-width:82ch}
.foot-legal a{text-decoration:underline}

@media (max-width:760px){
  .food-band{grid-template-columns:1fr}
  .food-band img{aspect-ratio:16/9;border-right:0;border-bottom:2px solid var(--ink)}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr 1fr;gap:12px}
  .card{padding:16px}
  .plate{width:56px;height:56px}
  .plate span{font-size:24px}
  .card h3{font-size:17px}
  .filters select{flex:1 1 45%}
  .sun{width:190px;right:-70px;top:-46px}
}
@media (max-width:400px){
  .grid{grid-template-columns:1fr}
  .photo-tile{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){
  .sun,.kicker,.hero h1,.hero .sub,.filters,.card{animation:none}
  .card,.plate,.btn,.crumb a{transition:none}
}