/* ================================================================
   ServiaOS · Template "Studio"
   Mood: minimalista contemporani, fine dining sobri.
   Tipografia: Inter Tight uppercase, sans-serif geomètrica.
   Paleta: monocroma blanc trencat + tinta negra.
   ================================================================ */

/* ── 1. VARIABLE OVERRIDES — paleta monocroma ── */
body.tpl-studio {
  --paper:        #FAFAF7;
  --paper-2:      #F5F3EE;
  --paper-3:      #EBE9E2;
  --ink:          #0F0F0E;
  --ink-2:        #2A2A28;
  --ink-3:        #6E6E6A;
  --ink-4:        #A8A8A4;
  --ink-line:     rgba(15, 15, 14, 0.10);
  --accent:       #0F0F0E;
  --accent-fg:    #FAFAF7;
  --accent-soft:  rgba(15, 15, 14, 0.06);
  --accent-secondary: #6E6E6A;
  --bg:           var(--paper);
  --bg-raised:    var(--paper-2);
  --bg-sunken:    var(--paper-3);
  --fg:           var(--ink);
  --fg-muted:     var(--ink-2);
  --fg-subtle:    var(--ink-3);
  --fg-disabled:  var(--ink-4);
  --line:         var(--ink-line);
  --line-strong:  rgba(15, 15, 14, 0.18);
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-full: 0;
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: none;
  --shadow-4: none;
  --shadow-inset: none;
  --tracking-eyebrow: 0.22em;
  --tracking-tight: -0.025em;
  --font-serif:        "Inter Tight", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-serif-soft:   "Inter Tight", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-sans:         "Inter Tight", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* ── 2. TIPOGRAFIA — uppercase, geomètrica ── */
body.tpl-studio,
body.tpl-studio p,
body.tpl-studio .t-body {
  font-family: "Inter Tight", -apple-system, sans-serif;
  font-style: normal;
  line-height: 1.65;
  color: var(--ink);
}
body.tpl-studio h1,
body.tpl-studio h2,
body.tpl-studio h3,
body.tpl-studio h4 {
  font-family: "Inter Tight", -apple-system, sans-serif;
  font-weight: 500;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--ink);
}
body.tpl-studio .t-eyebrow {
  font-family: "Inter Tight", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(10px, 1vw, 12px);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--fg-subtle);
}
body.tpl-studio #carta > .section-inner > .t-eyebrow::before,
body.tpl-studio #vins > .section-inner > .t-eyebrow::before,
body.tpl-studio #agenda > .section-inner > .t-eyebrow::before,
body.tpl-studio #sobre > .section-inner > .t-eyebrow::before,
body.tpl-studio #menu-diari > .section-inner > .t-eyebrow::before,
body.tpl-studio #experiencies > .section-inner > .t-eyebrow::before,
body.tpl-studio #contacte > .section-inner > .t-eyebrow::before,
body.tpl-studio .exp-inner > .t-eyebrow::before {
  content: "\2014 ";
}

/* ── 3. BUTTONS — fons negre sòlid o outline quadrat ── */
body.tpl-studio .btn,
body.tpl-studio .btn.primary {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 14px 28px;
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: all 220ms var(--ease-out);
}
body.tpl-studio .btn.primary:hover,
body.tpl-studio .btn:hover {
  background: var(--paper);
  color: var(--ink);
}
body.tpl-studio .btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
body.tpl-studio .btn.ghost:hover {
  background: var(--ink);
  color: var(--paper);
}
body.tpl-studio .hdr-cta {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 10px 22px;
}
body.tpl-studio .hdr-cta:hover {
  background: var(--ink);
  color: var(--paper);
}
body.tpl-studio .hero-btn {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  font-weight: 500;
  padding: 14px 28px;
}
body.tpl-studio .hero-btn:hover {
  background: var(--paper);
  color: var(--ink);
}
body.tpl-studio .hero-btn .ph { color: currentColor; }
body.tpl-studio .hero-menudia-pill {
  border-radius: 0;
  border: 1px solid var(--ink-line);
  background: transparent;
  font-family: "Inter Tight", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  font-weight: 500;
}
body.tpl-studio .ftr-cta-button {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
body.tpl-studio .ftr-cta-button:hover {
  background: transparent;
  color: var(--ink);
}
body.tpl-studio .ftr-cta-secondary {
  border-radius: 0;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
}
body.tpl-studio .rsv-submit {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  font-family: "Inter Tight", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  font-weight: 500;
}
body.tpl-studio .rsv-submit:hover:not(:disabled) {
  background: var(--paper);
  color: var(--ink);
}
body.tpl-studio .rsv-input { border-radius: 0; border: 1px solid var(--ink-line); background: var(--paper); font-family: "Inter Tight", sans-serif; }
body.tpl-studio .rsv-input:focus { border-color: var(--ink); }
body.tpl-studio .rsv-dialog { border-radius: 0; }

/* ── 4. HEADER ── */
body.tpl-studio #site-header .hdr-nav-links a {
  font-family: "Inter Tight", sans-serif;
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink);
}
body.tpl-studio #site-header .hdr-brand {
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
body.tpl-studio #site-header .lang-toggle button {
  font-family: "Inter Tight", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

/* ── 5. HERO — títol enorme uppercase alineat esquerra ── */
body.tpl-studio #hero.hero--studio-textual {
  background: var(--paper);
  color: var(--ink);
  min-height: 88vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(80px, 10vw, 120px) clamp(40px, 8vw, 96px);
  overflow: hidden;
}
body.tpl-studio #hero.hero--studio-textual .hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  max-width: 1100px;
  text-align: left;
}
body.tpl-studio #hero.hero--studio-textual .hero-eyebrow {
  font-family: "Inter Tight", sans-serif;
  font-style: normal;
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: clamp(28px, 4vw, 40px);
}
body.tpl-studio #hero.hero--studio-textual .hero-eyebrow::before {
  content: "\2014 ";
}
body.tpl-studio #hero.hero--studio-textual .hero-name-large {
  font-family: "Inter Tight", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: none;
  margin: 0;
  text-wrap: balance;
}
body.tpl-studio #hero.hero--studio-textual .hero-name-large::after {
  content: attr(data-echo);
  display: block;
  color: color-mix(in srgb, var(--ink) 10%, transparent);
  margin-top: 0;
}
body.tpl-studio #hero.hero--studio-textual .hero-btn {
  margin-top: clamp(36px, 5vw, 48px);
  align-self: flex-start;
}
body.tpl-studio #hero.hero--studio-textual .hero-menudia-pill {
  margin-top: 16px;
  align-self: flex-start;
}
@media (max-width: 768px) {
  body.tpl-studio #hero.hero--studio-textual {
    padding: 64px 24px;
    min-height: 80vh;
  }
  body.tpl-studio #hero.hero--studio-textual .hero-name-large {
    font-size: clamp(40px, 11vw, 64px);
  }
}

/* ── 6. ATMOSPHERE — grayscale → color al hover ── */
body.tpl-studio #atmosphere { min-height: 90vh; }
/* Desktop only: grayscale → color al hover. Móvil siempre a color */
@media (min-width: 901px) {
  body.tpl-studio #atmosphere .atmosphere-bg {
    filter: grayscale(100%) contrast(1.05);
    transition: filter 800ms var(--ease-out);
  }
  body.tpl-studio #atmosphere:hover .atmosphere-bg {
    filter: grayscale(0%) contrast(1.0);
  }
}

/* Caption atmosphere Studio: texto blanco con text-shadow, sin fondo */
body.tpl-studio #atmosphere { position: relative; }
body.tpl-studio #atmosphere::after {
  content: "\2014 EL LOCAL \00B7 PENED\00C8S";
  position: absolute;
  bottom: clamp(24px, 4vw, 48px);
  left: 50%;
  transform: translateX(-50%);
  font-family: "Inter Tight", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
  background: transparent;
  padding: 0;
  pointer-events: none;
  z-index: 5;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.35);
}
@media (max-width: 768px) {
  body.tpl-studio #atmosphere::after {
    font-size: 10px; bottom: 18px; letter-spacing: 0.18em;
  }
}

/* ── 7. SOBRE — hairline rules ── */
body.tpl-studio #sobre .about-inner {
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(48px, 6vw, 80px);
}
/* Desktop only: grayscale → color al hover. Móvil siempre a color */
@media (min-width: 901px) {
  body.tpl-studio #sobre .about-photo {
    filter: grayscale(100%) contrast(1.05);
    transition: filter 600ms var(--ease-out);
  }
  body.tpl-studio #sobre .about-photo:hover {
    filter: grayscale(0%) contrast(1.0);
  }
}
body.tpl-studio #sobre .about-text h2 {
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin-bottom: clamp(20px, 3vw, 32px);
}
body.tpl-studio #sobre .about-text p {
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.7;
  color: var(--fg-muted);
}

/* ── 8. CARTA — sense tabs, numerals romans ── */
body.tpl-studio #carta .carta-tabs { display: none; }
body.tpl-studio #carta .carta-panel {
  display: block !important;
  margin-bottom: clamp(56px, 7vw, 96px);
}
body.tpl-studio #carta .carta-panel:last-of-type { margin-bottom: 0; }
body.tpl-studio #carta .carta-panel-title {
  display: block;
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 32px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: left;
  margin: 0 0 clamp(28px, 4vw, 40px) 0;
  padding: 16px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink-line);
}
body.tpl-studio #carta { counter-reset: carta-section; }
body.tpl-studio #carta .carta-panel { counter-increment: carta-section; }
body.tpl-studio #carta .carta-panel-title::before {
  content: counter(carta-section, upper-roman) ". ";
  display: inline;
  margin-right: 12px;
  color: var(--ink-3);
  font-weight: 500;
}
body.tpl-studio #carta .carta-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--ink-line);
  background: transparent;
}
body.tpl-studio #carta .carta-item-name {
  font-family: "Inter Tight", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(13px, 1.3vw, 14px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink);
  background: transparent;
  display: block;
}
body.tpl-studio #carta .carta-item-desc {
  display: block;
  margin-top: 6px;
  font-family: "Inter Tight", sans-serif;
  font-style: normal;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg-muted);
  line-height: 1.55;
}
body.tpl-studio #carta .carta-item-price {
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: 13px;
  font-feature-settings: "tnum";
  color: var(--ink);
  white-space: nowrap;
  align-self: baseline;
}
body.tpl-studio #carta .carta-item .dish-allergens {
  grid-column: 1 / -1;
  margin-top: 8px;
  opacity: 0.55;
}
body.tpl-studio #carta .carta-item .dish-allergens > * {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── 9. MENU DEL DIA ── */
body.tpl-studio .menu-diari-col .t-eyebrow,
body.tpl-studio .menu-diari-postres .t-eyebrow {
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: clamp(13px, 1.3vw, 14px);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink);
  text-align: left;
  border-bottom: 1px solid var(--ink-line);
  padding-bottom: 12px;
  margin-bottom: 20px;
}
body.tpl-studio .menu-diari-cols { counter-reset: menu-course; }
body.tpl-studio .menu-diari-col { counter-increment: menu-course; }
body.tpl-studio .menu-diari-postres { counter-increment: menu-course; }
body.tpl-studio .menu-diari-col .t-eyebrow::before {
  content: counter(menu-course, upper-roman) ". ";
  margin-right: 10px;
}
body.tpl-studio .menu-diari-postres .t-eyebrow::before {
  content: counter(menu-course, upper-roman) ". ";
  margin-right: 10px;
}
body.tpl-studio .menu-diari-dish-name {
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
}
body.tpl-studio .menu-diari-dish-desc {
  font-family: "Inter Tight", sans-serif;
  font-size: 13px;
  color: var(--fg-muted);
  line-height: 1.55;
}

/* ── 10. VINS — taula simple ── */
body.tpl-studio .vins-group { margin-bottom: clamp(48px, 6vw, 80px); }
body.tpl-studio .vins-group h3 {
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: clamp(18px, 2vw, 22px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink-line);
  padding: 14px 0;
  margin-bottom: 24px;
  display: block;
}
body.tpl-studio .vins-group h3::after { display: none; }

/* ── 11. AGENDA ── */
body.tpl-studio .agenda-card {
  border-radius: 0;
  border: 1px solid var(--ink-line);
  background: var(--paper);
  transition: background 280ms var(--ease-out), border-color 280ms var(--ease-out);
}
body.tpl-studio .agenda-card:hover {
  background: var(--paper-2);
  border-color: var(--ink);
  transform: none;
}
body.tpl-studio .agenda-day {
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: clamp(48px, 5vw, 64px);
  letter-spacing: -0.025em;
  color: var(--ink);
}
body.tpl-studio .agenda-month {
  font-family: "Inter Tight", sans-serif;
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fg-subtle);
}
body.tpl-studio .agenda-body h3 {
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: clamp(16px, 1.6vw, 19px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1.2;
}
body.tpl-studio .agenda-body p {
  font-family: "Inter Tight", sans-serif;
  font-size: 13px;
  color: var(--fg-muted);
  text-transform: none;
}
body.tpl-studio .agenda-body .t-eyebrow {
  font-family: "Inter Tight", sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

/* Agenda amb foto */
/* Textos en blanco fijo para garantizar contraste sobre overlay dark
   independientemente de la paleta del cliente. */
body.tpl-studio #agenda.agenda--has-bg { background: #1a1a1a; }
body.tpl-studio #agenda.agenda--has-bg .agenda-overlay {
  background: linear-gradient(180deg, rgba(15,15,14,0.72) 0%, rgba(15,15,14,0.85) 100%);
}
body.tpl-studio #agenda.agenda--has-bg .section-inner { color: #FFFFFF; }
body.tpl-studio #agenda.agenda--has-bg .t-eyebrow { color: rgba(255,255,255,0.75) !important; }
body.tpl-studio #agenda.agenda--has-bg h2 { color: #FFFFFF !important; }
body.tpl-studio #agenda.agenda--has-bg .agenda-card {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
}
body.tpl-studio #agenda.agenda--has-bg .agenda-card:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.32);
}
body.tpl-studio #agenda.agenda--has-bg .agenda-day,
body.tpl-studio #agenda.agenda--has-bg .agenda-body h3 { color: #FFFFFF !important; }
body.tpl-studio #agenda.agenda--has-bg .agenda-month,
body.tpl-studio #agenda.agenda--has-bg .agenda-body p,
body.tpl-studio #agenda.agenda--has-bg .agenda-body .t-eyebrow { color: rgba(255,255,255,0.75) !important; }
body.tpl-studio #agenda.agenda--has-bg .agenda-meta { color: rgba(255,255,255,0.70); }
body.tpl-studio #agenda.agenda--has-bg .agenda-meta .ph { color: rgba(255,255,255,0.70); }

/* ── 12. EXPERIENCES ── */
body.tpl-studio .exp-inner > h2 {
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: clamp(32px, 4.5vw, 56px);
  letter-spacing: -0.025em;
  text-transform: uppercase;
  text-align: left;
  display: block;
  margin-bottom: clamp(24px, 3vw, 32px);
}
body.tpl-studio .exp-inner > h2 i.ph { display: none; }
body.tpl-studio .exp-description {
  font-family: "Inter Tight", sans-serif;
  font-style: normal;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.65;
  color: var(--fg-muted);
  text-align: left;
  max-width: 520px;
  margin-left: 0;
}
body.tpl-studio .exp-price-amount {
  font-family: "Inter Tight", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(48px, 7vw, 80px);
  letter-spacing: -0.03em;
  color: var(--ink);
  font-feature-settings: "tnum";
}
body.tpl-studio .exp-price-label,
body.tpl-studio .exp-price-note {
  font-family: "Inter Tight", sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fg-subtle);
}
body.tpl-studio .exp-menu-item .t-eyebrow {
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink);
  border-bottom: 1px solid var(--ink-line);
  padding-bottom: 10px;
  margin-bottom: 16px;
}
body.tpl-studio .exp-menu-item .exp-plat {
  font-family: "Inter Tight", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
}

/* ── 13. CONTACTE / FOOTER ── */
body.tpl-studio .contact-inner h2 {
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
body.tpl-studio .contact-icon { background: transparent; border-radius: 0; }
body.tpl-studio #site-footer { border-top: 1px solid var(--ink-line); background: var(--paper); }
body.tpl-studio .ftr-col .t-eyebrow {
  font-family: "Inter Tight", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--fg-subtle);
  margin-bottom: 16px;
}
body.tpl-studio .ftr-col .t-eyebrow::before { content: "\2014 "; }
body.tpl-studio .ftr-brand-name {
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 28px);
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
body.tpl-studio .ftr-tagline {
  font-family: "Inter Tight", sans-serif;
  font-style: normal;
  font-size: 13px;
  color: var(--fg-muted);
  text-transform: none;
}
body.tpl-studio .ftr-link { font-family: "Inter Tight", sans-serif; font-style: normal; text-transform: none; }
body.tpl-studio .ftr-orn-dot { display: none; }
body.tpl-studio .ftr-orn-line { background: var(--ink-line); height: 1px; opacity: 1; }

/* ── 14. SECTIONS — border-top hairline ── */
body.tpl-studio #sobre,
body.tpl-studio #atmosphere,
body.tpl-studio #carta,
body.tpl-studio #menu-diari,
body.tpl-studio #gallery,
body.tpl-studio #vins,
body.tpl-studio #agenda,
body.tpl-studio #experiencies,
body.tpl-studio #contacte {
  border-top: 1px solid var(--ink-line);
}

/* ── 15. ALLERGEN LEGEND ── */
body.tpl-studio .allergen-legend-title {
  font-family: "Inter Tight", sans-serif;
  font-style: normal;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
}
body.tpl-studio .allergen-legend-item {
  font-family: "Inter Tight", sans-serif;
  font-style: normal;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── 16. SECTION DIVIDERS — sense ornaments ── */
body.tpl-studio #sobre::before,
body.tpl-studio #atmosphere::before,
body.tpl-studio #carta::before,
body.tpl-studio #menu-diari::before,
body.tpl-studio #gallery::before,
body.tpl-studio #vins::before,
body.tpl-studio #agenda::before,
body.tpl-studio #experiencies::before,
body.tpl-studio #contacte::before {
  display: none;
}

/* ════════════════════════════════════════════════════════════
   18. SECTION INDICATORS VERTICALES — desktop only
   Cada sección tiene un indicador en el lateral derecho con
   número romano + label, rotado 90° tipo "lomo de libro".
   ════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  body.tpl-studio main { counter-reset: studio-section; }
  body.tpl-studio main > section {
    counter-increment: studio-section;
    position: relative;
  }

  body.tpl-studio main > section::after {
    content: counter(studio-section, upper-roman);
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: right center;
    font-family: "Inter Tight", sans-serif;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-3);
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
    opacity: 0.55;
    transition: opacity 280ms var(--ease-out);
  }

  body.tpl-studio main > section:hover::after {
    opacity: 0.85;
    color: var(--ink);
  }

  /* Labels por sección */
  body.tpl-studio #hero::after { content: counter(studio-section, upper-roman) " \00B7 INICI"; }
  body.tpl-studio #sobre::after { content: counter(studio-section, upper-roman) " \00B7 LA NOSTRA HIST\00D2RIA"; }
  body.tpl-studio #carta::after { content: counter(studio-section, upper-roman) " \00B7 CARTA"; }
  body.tpl-studio #menu-diari::after { content: counter(studio-section, upper-roman) " \00B7 MEN\00DA DEL DIA"; }
  body.tpl-studio #gallery::after { content: counter(studio-section, upper-roman) " \00B7 GALERIA"; }
  body.tpl-studio #vins::after { content: counter(studio-section, upper-roman) " \00B7 VINS"; }
  body.tpl-studio #agenda::after { content: counter(studio-section, upper-roman) " \00B7 AGENDA"; }
  body.tpl-studio #experiencies::after { content: counter(studio-section, upper-roman) " \00B7 EXPERI\00C8NCIES"; }
  body.tpl-studio #contacte::after { content: counter(studio-section, upper-roman) " \00B7 CONTACTE"; }

  /* Atmosphere: usa ::before para el indicator (::after es el caption de la foto) */
  body.tpl-studio #atmosphere::before {
    content: counter(studio-section, upper-roman) " \00B7 ATMOSFERA";
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: right center;
    font-family: "Inter Tight", sans-serif;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(250, 250, 247, 0.65);
    white-space: nowrap;
    pointer-events: none;
    z-index: 5;
    opacity: 0.85;
  }
}