/* ==========================================================================
   TARSUS KITCHEN — capa de marca
   Se carga DESPUÉS de style.css y sobrescribe la plantilla base.
   Paleta oficial (Manual de Identidad Corporativa):
     Negro carbón      #0C0C0E   Dorado Tarsus   #D4A432
     Acero inoxidable  #A7A7B5   Blanco técnico  #F2F2F5
     Gris grafito      #26292E   Gris plata      #E0E3E6
     Dorado claro      #F2C14E   Dorado oscuro   #B8860B
   Proporción recomendada: negro 60% · acero/gris 25% · dorado 10% · blanco 5%
   ========================================================================== */

:root {
  --tk-black: #0c0c0e;
  --tk-graphite: #26292e;
  --tk-gold: #d4a432;
  --tk-gold-light: #f2c14e;
  --tk-gold-dark: #b8860b;
  --tk-steel: #a7a7b5;
  --tk-silver: #e0e3e6;
  --tk-white: #f2f2f5;

  /* alineación con las variables de la plantilla */
  --color-primary: #d4a432;
  --color-secondary: #0c0c0e;
  --color-heading-1: #0c0c0e;
  --font-primary: "Montserrat", "Segoe UI", Arial, sans-serif;
  --font-secondary: "Montserrat", "Segoe UI", Arial, sans-serif;
}

body {
  font-family: var(--font-secondary);
  background: var(--tk-white);
  color: var(--tk-graphite);
}

h1, h2, h3, h4, h5, h6,
.title, .title-banner, .heading-title, .p-title, .main-title {
  font-family: var(--font-primary);
  letter-spacing: -0.01em;
}

h1, .title-banner, .main-title { font-weight: 800; }
h2, h3 { font-weight: 700; }
h4, h5, h6 { font-weight: 600; }

/* ---------- 1. Header ---------------------------------------------------- */

.tk-topbar {
  background: var(--tk-black);
  border-bottom: 1px solid rgba(212, 164, 50, 0.22);
}

.tk-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 40px;
  padding: 6px 0;
  flex-wrap: wrap;
}

.tk-topbar__claim {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tk-steel);
}

.tk-topbar__claim strong { color: var(--tk-gold); font-weight: 700; }

/* Selector de idioma */
.tk-lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tk-lang__icon { color: var(--tk-gold); font-size: 13px; }

.tk-lang a,
.tk-lang span[aria-current] {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid rgba(212, 164, 50, 0.45);
  border-radius: 2px;
  line-height: 1.4;
  transition: var(--transition);
}

.tk-lang a { color: var(--tk-steel); }

.tk-lang a:hover,
.tk-lang a:focus-visible {
  color: var(--tk-black);
  background: var(--tk-gold);
  border-color: var(--tk-gold);
}

.tk-lang span[aria-current] {
  color: var(--tk-black);
  background: var(--tk-gold);
  border-color: var(--tk-gold);
  cursor: default;
}

.header-four { background: var(--tk-black); }

.header-four.sticky { background: var(--tk-black); }

.header-four .header-main-wrapper .logo-area a img,
.header-four .header-main-wrapper .logo-area .logo img {
  width: auto;
  max-width: 260px;
  height: 54px;
  object-fit: contain;
}

@media (max-width: 575px) {
  .header-four .header-main-wrapper .logo-area a img,
  .header-four .header-main-wrapper .logo-area .logo img { height: 42px; }
}

.header-four .header-main-wrapper .rts-header-mid .main-nav-desk nav ul li .nav-link {
  font-family: var(--font-secondary);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 14px;
  color: var(--tk-white);
}

.header-four .header-main-wrapper .rts-header-mid .main-nav-desk nav ul li .nav-link:hover,
.header-four .header-main-wrapper .rts-header-mid .main-nav-desk nav ul li .nav-link.active {
  color: var(--tk-gold);
}

.header-four .header-main-wrapper .rts-header-mid .main-nav-desk nav ul li .nav-link.active {
  border-bottom: 2px solid var(--tk-gold);
  padding-bottom: 6px;
}

.header-four .header-main-wrapper .rts-header-right .query-list .icon { background: var(--tk-gold); color: var(--tk-black); }
.header-four .header-main-wrapper .rts-header-right .query-list a .text-heading { color: var(--tk-white); font-weight: 600; }
.header-four .header-main-wrapper .rts-header-right .query-list a:hover .text-heading { color: var(--tk-gold); }
.header-four .header-main-wrapper .menu-area { background: var(--tk-gold-dark); }
.header-four .header-main-wrapper .menu-area:hover { background: var(--tk-gold); }

/* Menú lateral */
#side-bar { background: var(--tk-black); }
#side-bar .thumbnail img { max-width: 240px; height: auto; }
#side-bar .inner-content .feature-list .query-list .sub-text,
#side-bar .inner-content .feature-list .query-list .email,
#side-bar .inner-content .feature-list .query-list .time { color: var(--tk-steel); }
#side-bar .inner-content .feature-list .query-list .phone { color: var(--tk-gold); }
#side-bar .mobile-menu .mainmenu li a { color: var(--tk-white); }
#side-bar .mobile-menu .mainmenu li a:hover,
#side-bar .mobile-menu .mainmenu li a.active { color: var(--tk-gold); }

/* ---------- 2. Hero ------------------------------------------------------ */

.tk-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 120% at 78% 15%, #1b1b1f 0%, var(--tk-black) 62%);
  padding: 110px 0 120px;
}

@media (max-width: 991px) { .tk-hero { padding: 70px 0 80px; } }

.tk-hero__grain {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(212, 164, 50, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 164, 50, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}

.tk-hero__deco { position: absolute; pointer-events: none; user-select: none; }
.tk-hero__deco img { display: block; }
.tk-hero__deco--flame { top: -40px; right: 4%; width: 320px; opacity: 0.5; }
.tk-hero__deco--leaf { bottom: 6%; left: 2%; width: 150px; opacity: 0.6; transform: rotate(-16deg); }
.tk-hero__deco--tomato { top: 12%; left: -40px; width: 190px; opacity: 0.45; }

@media (max-width: 1199px) { .tk-hero__deco { display: none; } }

.tk-hero__content { position: relative; z-index: 2; }

.tk-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding: 7px 16px;
  border: 1px solid rgba(212, 164, 50, 0.4);
  border-radius: 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tk-gold);
}

.tk-hero__title {
  margin: 0 0 22px;
  font-size: 68px;
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tk-white);
  text-transform: uppercase;
}

.tk-hero__title span { color: var(--tk-gold); display: block; }

@media (max-width: 1199px) { .tk-hero__title { font-size: 54px; } }
@media (max-width: 767px) { .tk-hero__title { font-size: 38px; } }

.tk-hero__desc {
  max-width: 520px;
  margin: 0 0 34px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--tk-steel);
}

.tk-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.tk-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 52px;
  padding-top: 30px;
  border-top: 1px solid rgba(167, 167, 181, 0.2);
}

.tk-hero__stat strong {
  display: block;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: var(--tk-gold);
}

.tk-hero__stat span {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tk-steel);
}

.tk-hero__figure { position: relative; z-index: 2; text-align: center; }

.tk-hero__figure img {
  width: 100%;
  max-width: 560px;
  border-radius: 4px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}

.tk-hero__badge {
  position: absolute;
  left: 0;
  bottom: -26px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--tk-gold);
  border-radius: 3px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45);
  text-align: left;
}

.tk-hero__badge i { font-size: 22px; color: var(--tk-black); }

.tk-hero__badge strong {
  display: block;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--tk-black);
  text-transform: uppercase;
}

.tk-hero__badge span { font-size: 12px; color: rgba(12, 12, 14, 0.75); }

@media (max-width: 991px) {
  .tk-hero__figure { margin-top: 56px; }
  .tk-hero__badge { position: static; margin: 24px auto 0; display: inline-flex; }
}

/* ---------- 3. Botones --------------------------------------------------- */

.tk-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1px solid var(--tk-gold);
  border-radius: 2px;
  background: var(--tk-gold);
  color: var(--tk-black);
  font-family: var(--font-secondary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: var(--transition);
}

.tk-btn:hover,
.tk-btn:focus-visible {
  background: var(--tk-gold-light);
  border-color: var(--tk-gold-light);
  color: var(--tk-black);
}

.tk-btn--ghost { background: transparent; color: var(--tk-gold); }

.tk-btn--ghost:hover,
.tk-btn--ghost:focus-visible { background: var(--tk-gold); color: var(--tk-black); }

.order-btn,
.rts-btn.btn-secondary,
.button-area-banner .rts-btn {
  font-family: var(--font-secondary);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Foco visible y accesible en toda la página */
a:focus-visible,
button:focus-visible,
.tk-btn:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--tk-gold);
  outline-offset: 3px;
}

/* ---------- 4. Franja de pilares ---------------------------------------- */

.tk-pillars { background: var(--tk-black); padding: 0; }

.tk-pillars__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid rgba(167, 167, 181, 0.16);
}

@media (max-width: 991px) { .tk-pillars__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px) { .tk-pillars__grid { grid-template-columns: 1fr; } }

.tk-pillar {
  padding: 40px 26px;
  border-right: 1px solid rgba(167, 167, 181, 0.16);
  border-bottom: 1px solid rgba(167, 167, 181, 0.16);
  text-align: center;
  transition: var(--transition);
}

.tk-pillar:last-child { border-right: none; }
.tk-pillar:hover { background: var(--tk-graphite); }
.tk-pillar i { font-size: 30px; color: var(--tk-gold); }

.tk-pillar h3 {
  margin: 18px 0 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tk-white);
}

.tk-pillar p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--tk-steel); }

/* ---------- 5. Encabezados de sección ------------------------------------ */

.tk-section { padding: 100px 0; }
.tk-section--dark { background: var(--tk-black); }
.tk-section--graphite { background: var(--tk-graphite); }
.tk-section--light { background: var(--tk-white); }

@media (max-width: 767px) { .tk-section { padding: 64px 0; } }

.tk-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.tk-head--left { margin-left: 0; text-align: left; }

.tk-head__eyebrow {
  display: block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tk-gold);
}

.tk-head__title {
  margin: 0 0 16px;
  font-size: 44px;
  line-height: 1.15;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--tk-black);
}

@media (max-width: 767px) { .tk-head__title { font-size: 30px; } }

.tk-head__desc { margin: 0; font-size: 16px; line-height: 1.8; color: #5c626b; }

.tk-section--dark .tk-head__title,
.tk-section--graphite .tk-head__title { color: var(--tk-white); }

.tk-section--dark .tk-head__desc,
.tk-section--graphite .tk-head__desc { color: var(--tk-steel); }

.tk-rule {
  width: 74px;
  height: 2px;
  margin: 0 auto 22px;
  background: linear-gradient(90deg, transparent, var(--tk-gold), transparent);
}

.tk-head--left .tk-rule { margin-left: 0; background: var(--tk-gold); }

/* ---------- 6. Tarjetas de servicio ------------------------------------- */

.tk-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

@media (max-width: 991px) { .tk-cards { grid-template-columns: 1fr; } }

.tk-card {
  position: relative;
  overflow: hidden;
  background: var(--tk-graphite);
  border: 1px solid rgba(212, 164, 50, 0.18);
  border-radius: 3px;
}

.tk-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }

.tk-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.tk-card:hover .tk-card__media img { transform: scale(1.06); }

.tk-card__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 12px;
  background: var(--tk-gold);
  border-radius: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tk-black);
}

.tk-card__body { padding: 28px 26px 30px; }

.tk-card__body h3 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--tk-white);
}

.tk-card__body p { margin: 0 0 18px; font-size: 15px; line-height: 1.75; color: var(--tk-steel); }

.tk-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tk-gold);
}

.tk-card__link:hover { color: var(--tk-gold-light); }

/* ---------- 7. Bloque partido (imagen + texto) --------------------------- */

.tk-split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }

@media (max-width: 991px) { .tk-split { grid-template-columns: 1fr; } }

.tk-split__media { min-height: 460px; background-size: cover; background-position: center; }

@media (max-width: 991px) { .tk-split__media { min-height: 300px; } }

.tk-split__content { padding: 84px 6vw; background: var(--tk-black); }

@media (max-width: 767px) { .tk-split__content { padding: 56px 24px; } }

.tk-split--reverse .tk-split__media { order: 2; }

@media (max-width: 991px) { .tk-split--reverse .tk-split__media { order: 0; } }

.tk-dishlist { margin: 0; padding: 0; list-style: none; }

.tk-dishlist li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px dashed rgba(167, 167, 181, 0.24);
}

.tk-dishlist li:last-child { border-bottom: none; }

.tk-dishlist img {
  width: 68px;
  height: 68px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
}

.tk-dishlist .tk-dish__text { flex: 1 1 auto; min-width: 0; }

.tk-dishlist h4 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--tk-white);
  text-transform: uppercase;
}

.tk-dishlist p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--tk-steel); }

.tk-dishlist .tk-dish__price {
  flex-shrink: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--tk-gold);
}

/* ---------- 8. Testimonios ----------------------------------------------- */

.tk-quotes { background: var(--tk-graphite); }

.tk-quote {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.tk-quote__mark { font-size: 34px; color: var(--tk-gold); margin-bottom: 22px; display: block; }

.tk-quote blockquote {
  margin: 0 0 28px;
  font-size: 22px;
  line-height: 1.65;
  font-weight: 500;
  color: var(--tk-white);
}

@media (max-width: 767px) { .tk-quote blockquote { font-size: 18px; } }

.tk-quote__author { font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tk-gold); }
.tk-quote__role { display: block; margin-top: 6px; font-size: 13px; color: var(--tk-steel); text-transform: none; letter-spacing: 0; font-weight: 400; }

.tk-quotes .swiper { padding-bottom: 10px; }

.tk-quotes .tk-nav {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
}

.tk-nav__btn {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(212, 164, 50, 0.5);
  border-radius: 2px;
  background: transparent;
  color: var(--tk-gold);
  cursor: pointer;
  transition: var(--transition);
}

.tk-nav__btn:hover { background: var(--tk-gold); color: var(--tk-black); }

/* ---------- 9. Contadores ------------------------------------------------ */

.tk-counters { background: var(--tk-black); border-top: 1px solid rgba(167, 167, 181, 0.16); }

.tk-counters__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(167, 167, 181, 0.16);
}

@media (max-width: 767px) { .tk-counters__grid { grid-template-columns: repeat(2, 1fr); } }

.tk-counter { padding: 52px 20px; background: var(--tk-black); text-align: center; }

.tk-counter__value {
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  color: var(--tk-gold);
}

.tk-counter__label {
  margin: 12px 0 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tk-steel);
}

/* ---------- 10. Galería -------------------------------------------------- */

.tk-gallery { display: grid; grid-template-columns: repeat(4, 1fr); }

@media (max-width: 991px) { .tk-gallery { grid-template-columns: repeat(2, 1fr); } }

.tk-gallery__item { position: relative; overflow: hidden; aspect-ratio: 1 / 1; }

.tk-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.tk-gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 12, 14, 0.7), transparent 55%);
  opacity: 0;
  transition: var(--transition);
}

.tk-gallery__item:hover img { transform: scale(1.07); }
.tk-gallery__item:hover::after { opacity: 1; }

.tk-gallery__caption {
  position: absolute;
  left: 20px;
  bottom: 18px;
  z-index: 2;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tk-white);
  opacity: 0;
  transform: translateY(8px);
  transition: var(--transition);
}

.tk-gallery__item:hover .tk-gallery__caption { opacity: 1; transform: translateY(0); }

/* ---------- 11. Cinta CTA ------------------------------------------------ */

.tk-cta {
  background: linear-gradient(90deg, var(--tk-gold-dark), var(--tk-gold));
  padding: 54px 0;
}

.tk-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.tk-cta h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--tk-black);
}

@media (max-width: 767px) { .tk-cta h2 { font-size: 22px; } }

.tk-cta p { margin: 8px 0 0; color: rgba(12, 12, 14, 0.78); font-size: 15px; }

.tk-cta .tk-btn {
  background: var(--tk-black);
  border-color: var(--tk-black);
  color: var(--tk-gold);
}

.tk-cta .tk-btn:hover { background: var(--tk-graphite); border-color: var(--tk-graphite); }

/* ---------- 12. Página de menús ----------------------------------------- */

.tk-breadcrumb {
  position: relative;
  padding: 128px 0 118px;
  background: var(--tk-black);
  text-align: center;
}

.tk-breadcrumb__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.28;
}

.tk-breadcrumb__inner { position: relative; z-index: 2; }

.tk-breadcrumb h1 {
  margin: 14px 0 16px;
  font-size: 52px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--tk-white);
}

@media (max-width: 767px) { .tk-breadcrumb h1 { font-size: 32px; } .tk-breadcrumb { padding: 80px 0 72px; } }

.tk-breadcrumb__path { margin: 0; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tk-steel); }
.tk-breadcrumb__path a { color: var(--tk-gold); }
.tk-breadcrumb__path span { color: var(--tk-steel); }

.tk-menugroup + .tk-menugroup { margin-top: 76px; }

.tk-menugroup__head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 36px;
  padding-bottom: 16px;
  border-bottom: 2px solid rgba(212, 164, 50, 0.35);
}

.tk-menugroup__head h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--tk-black);
}

.tk-menugroup__head p { margin: 0; font-size: 14px; color: #6b7079; }

.tk-menugrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 46px; }

@media (max-width: 767px) { .tk-menugrid { grid-template-columns: 1fr; } }

.tk-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px dashed #d7dade;
}

.tk-item__img {
  width: 78px;
  height: 78px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
}

.tk-item__text { flex: 1 1 auto; min-width: 0; }

.tk-item__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 6px;
}

.tk-item__title h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--tk-black);
}

.tk-item__dots { flex: 1 1 auto; border-bottom: 1px dotted #b9bec5; transform: translateY(-4px); }

.tk-item__price { font-size: 17px; font-weight: 800; color: var(--tk-accent-dark); white-space: nowrap; }

.tk-item__desc { margin: 0; font-size: 14px; line-height: 1.65; color: #6b7079; }

.tk-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--tk-accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--tk-accent) 40%, transparent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tk-accent-dark);
  vertical-align: middle;
}

.tk-note {
  margin-top: 60px;
  padding: 26px 30px;
  background: var(--tk-silver);
  border-left: 3px solid var(--tk-gold);
  border-radius: 2px;
  font-size: 14px;
  line-height: 1.8;
  color: #4b5058;
}

.tk-note strong { color: var(--tk-black); }

/* ---------- 13. Pie de página -------------------------------------------- */

.tk-footer { background: var(--tk-black); padding: 84px 0 0; }

.tk-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 60px;
}

@media (max-width: 991px) { .tk-footer__grid { grid-template-columns: 1fr; gap: 40px; } }

.tk-footer__logo { max-width: 250px; height: auto; margin-bottom: 22px; }

.tk-footer p { font-size: 15px; line-height: 1.8; color: var(--tk-steel); }

.tk-footer h3 {
  margin: 0 0 22px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tk-gold);
}

.tk-footer ul { margin: 0; padding: 0; list-style: none; }
.tk-footer ul li { margin-bottom: 12px; font-size: 15px; color: var(--tk-steel); }
.tk-footer ul li i { width: 20px; margin-right: 8px; color: var(--tk-gold); }
.tk-footer a { color: var(--tk-steel); transition: var(--transition); }
.tk-footer a:hover { color: var(--tk-gold); }

.tk-social { display: flex; gap: 10px; margin-top: 26px; }

.tk-social a {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(167, 167, 181, 0.32);
  border-radius: 2px;
  color: var(--tk-steel);
}

.tk-social a:hover { background: var(--tk-gold); border-color: var(--tk-gold); color: var(--tk-black); }

.tk-footer__bottom {
  padding: 24px 0;
  border-top: 1px solid rgba(167, 167, 181, 0.16);
}

.tk-footer__bottom .tk-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.tk-footer__bottom p { margin: 0; font-size: 13px; color: #7d838c; }

/* ---------- 14. Botón volver arriba -------------------------------------- */

.progress-wrap { box-shadow: inset 0 0 0 2px rgba(212, 164, 50, 0.3); }
.progress-wrap::after { color: var(--tk-gold); }
.progress-wrap svg.progress-circle path { stroke: var(--tk-gold); }

/* ---------- 15. Accesibilidad y utilidades ------------------------------- */

.tk-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 12px 20px;
  background: var(--tk-gold);
  color: var(--tk-black);
  font-weight: 700;
}

.tk-skip:focus { left: 0; }

.tk-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-sal] { opacity: 1 !important; transform: none !important; }
}

/* ---------- 16. Precarga -------------------------------------------------- */

#tk-preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tk-black);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#tk-preloader.is-hidden { opacity: 0; visibility: hidden; }

.tk-preloader__mark {
  width: 74px;
  height: auto;
  animation: tk-pulse 1.4s ease-in-out infinite;
}

@keyframes tk-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .tk-preloader__mark { animation: none; opacity: 1; }
}

/* ---------- 17. Carrusel (slides) ---------------------------------------- */

.tk-slider { position: relative; }

.tk-slider__track {
  position: relative;
  display: grid;
}

.tk-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease, visibility 0.55s;
}

.tk-slide.is-active { opacity: 1; visibility: visible; transform: none; }

/* ---------- 18. Filtros de la carta -------------------------------------- */

.tk-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 56px;
}

.tk-filter button {
  padding: 11px 22px;
  border: 1px solid #d3d7dc;
  border-radius: 2px;
  background: transparent;
  font-family: var(--font-secondary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5c626b;
  cursor: pointer;
  transition: var(--transition);
}

.tk-filter button:hover { border-color: var(--tk-accent); color: var(--tk-accent-dark); }

.tk-filter button.is-active {
  background: var(--tk-black);
  border-color: var(--tk-black);
  color: var(--tk-gold);
}

/* ---------- 19. Ajustes finos de la plantilla ---------------------------- */

/* La plantilla base deja el <body> con fondo blanco; el pie es negro. */
.header-four .header-main-wrapper .rts-header-right { gap: 0; }

/* Los enlaces heredan el dorado de marca en todo el sitio. */
a { color: inherit; }
a:hover { color: var(--tk-gold-dark); }
.tk-section--dark a:hover, .tk-footer a:hover, .tk-hero a:hover { color: var(--tk-gold-light); }

img { max-width: 100%; height: auto; }

/* ---------- 20. Correcciones de cabecera --------------------------------- */

/* Logotipo: alto fijo y legible en cualquier resolución. */
.header-four .header-main-wrapper .logo-area a img,
.header-four .header-main-wrapper .logo-area .logo img {
  max-width: 300px;
  height: 60px;
}

@media (max-width: 767px) {
  .header-four .header-main-wrapper .logo-area a img,
  .header-four .header-main-wrapper .logo-area .logo img { height: 46px; }
}

/* Bloque de teléfono: fondo oscuro con filete dorado en lugar de la píldora blanca. */
.header-four .header-main-wrapper .rts-header-right .query-list {
  background: transparent;
  border: 1px solid rgba(212, 164, 50, 0.4);
  border-radius: 2px;
  padding: 0 18px 0 8px;
  height: 46px;
  transition: var(--transition);
}

.header-four .header-main-wrapper .rts-header-right .query-list:hover { border-color: var(--tk-gold); }

.header-four .header-main-wrapper .rts-header-right .query-list .icon {
  width: 28px;
  height: 28px;
  line-height: 28px;
  font-size: 12px;
  background: var(--tk-gold);
  color: var(--tk-black);
}

.header-four .header-main-wrapper .rts-header-right .query-list a .text-heading {
  font-size: 15px;
  color: var(--tk-white);
}

/* Botón de menú: se usa <button> por accesibilidad, hereda el aspecto del enlace. */
.header-four .header-main-wrapper .menu-area button.nav-menu-link {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: 28px;
  width: 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  cursor: pointer;
}

.header-four .header-main-wrapper .menu-area button.nav-menu-link span {
  background: var(--tk-white);
  border-radius: 50%;
  display: block;
  width: 5px;
  height: 5px;
  margin: 2px;
  padding: 3px;
}

.header-four .header-main-wrapper .rts-header-right {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 100%;
}

.header-four .header-main-wrapper .menu-area {
  width: 62px;
  min-width: 62px;
  align-self: stretch;
}

/* ---------- 21. Ajustes de retícula -------------------------------------- */

/* Alinea los títulos de los pilares aunque ocupen dos renglones. */
.tk-pillar h3 { min-height: 2.6em; display: flex; align-items: center; justify-content: center; }

@media (max-width: 479px) { .tk-pillar h3 { min-height: 0; } }

/* Logotipo del pie: mismo lockup horizontal, tamaño legible. */
.tk-footer__logo { max-width: 280px; }

/* Panel lateral */
#side-bar .thumbnail img { max-width: 200px; }

/* Botón volver arriba visible solo tras desplazar. */
.progress-wrap { cursor: pointer; }

/* Disparador del panel lateral: recuadro discreto con filete dorado. */
.header-four .header-main-wrapper .rts-header-right .menu-area {
  width: 46px;
  min-width: 46px;
  height: 46px;
  align-self: center;
  border: 1px solid rgba(212, 164, 50, 0.4);
  border-radius: 2px;
  background: transparent;
  transition: var(--transition);
}

.header-four .header-main-wrapper .rts-header-right .menu-area:hover { border-color: var(--tk-gold); background: rgba(212, 164, 50, 0.12); }

/* ---------- 22. Botones autónomos ---------------------------------------- */

/* style.css fuerza width:100% en todo <button> (regla de formularios).
   Los botones de interfaz del sitio recuperan su ancho natural. */
.tk-filter button,
.tk-nav__btn,
.close-icon-menu,
.header-four .header-main-wrapper .menu-area button.nav-menu-link {
  width: auto;
  flex: 0 0 auto;
}

.tk-nav__btn { width: 46px; }
.header-four .header-main-wrapper .menu-area button.nav-menu-link { width: 28px; }

/* La insignia no debe empujar el filete de puntos. */
.tk-item__title h3 { display: inline; }
.tk-badge { white-space: nowrap; }

/* ---------- 23. Página de error ------------------------------------------ */

.tk-error {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  background: radial-gradient(120% 120% at 50% 0%, #1b1b1f 0%, var(--tk-black) 60%);
  text-align: center;
}

.tk-error__inner { max-width: 640px; }
.tk-error__logo { width: 190px; height: auto; margin-bottom: 34px; }

.tk-error__code {
  margin: 0 0 10px;
  font-size: 84px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--tk-gold);
}

.tk-error__title {
  margin: 0 0 12px;
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--tk-white);
}

.tk-error__title--sub {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid rgba(167, 167, 181, 0.2);
  font-size: 20px;
  color: var(--tk-steel);
}

.tk-error__desc { margin: 0; font-size: 16px; line-height: 1.75; color: var(--tk-steel); }

.tk-error__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
}

@media (max-width: 575px) {
  .tk-error__code { font-size: 60px; }
  .tk-error__title { font-size: 20px; }
}

/* El cursor personalizado de la plantilla apuntaba a una imagen que este
   sitio no incluye; se usa el cursor estándar de cierre. */
#anywhere-home { cursor: pointer; }

/* ---------- 24. Ajustes para pantallas angostas -------------------------- */

@media (max-width: 767px) {
  /* El encabezado de cada grupo de la carta se apila en vez de partirse. */
  .tk-menugroup__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .tk-menugroup__head h2 { font-size: 21px; }
}

@media (max-width: 575px) {
  /* La barra superior deja sólo el selector de idioma. */
  .tk-topbar__claim { display: none; }
  .tk-topbar__inner { justify-content: flex-end; }
}

/* El menú móvil muestra también el teléfono. */
#side-bar .mobile-menu .mainmenu li a i { margin-right: 8px; color: var(--tk-gold); }

/* Red de seguridad en CSS: si tarsus.js no llegara a cargarse, la pantalla de
   carga se retira sola a los 6 segundos y el sitio queda utilizable.
   (Sin JavaScript activo, el <noscript> de cada página la oculta de inmediato.) */
#tk-preloader { animation: tk-preloader-failsafe 0s linear 6s forwards; }

@keyframes tk-preloader-failsafe {
  to { opacity: 0; visibility: hidden; }
}

/* ==========================================================================
   25. LÍNEAS DE MARCA — Monz Burger · L’Élite Pizzas · Reiken Sushi
   ========================================================================== */

/* Acento de página. Por omisión es el dorado Tarsus; cada landing puede
   cambiarlo sin tocar la cabecera ni el pie, que siempre son dorados. */
:root { --tk-accent: #d4a432; --tk-accent-soft: #f2c14e; --tk-accent-dark: #7e611b; }

/* --tk-accent-dark se usa sobre los fondos claros de la carta. El dorado
   #B8860B solo alcanzaba 2.9:1 de contraste sobre #F2F2F5, por debajo de
   lo legible; estas variantes superan 5:1. */

.brand-monz  { --tk-accent: #b8040f; --tk-accent-soft: #d8151f; --tk-accent-dark: #b8040f; }
.brand-pizza { --tk-accent: #1ba762; --tk-accent-soft: #21ca77; --tk-accent-dark: #0c472a; }   /* verde de L’Élite: aclarado sobre negro, el original sobre blanco */
.brand-sushi { --tk-accent: #d4a432; --tk-accent-soft: #f2c14e; --tk-accent-dark: #7e611b; }

/* Elementos que siguen el acento de la página */
.brand-scope .tk-head__eyebrow,
.brand-scope .tk-hero__eyebrow,
.brand-scope .tk-hero__title span,
.brand-scope .tk-hero__stat strong,
.brand-scope .tk-counter__value,
.brand-scope .tk-card__link,
.brand-scope .tk-dish__price,
.brand-scope .tk-quote__mark,
.brand-scope .tk-quote__author { color: var(--tk-accent); }

.brand-scope .tk-hero__eyebrow { border-color: color-mix(in srgb, var(--tk-accent) 45%, transparent); }
.brand-scope .tk-rule { background: linear-gradient(90deg, transparent, var(--tk-accent), transparent); }
.brand-scope .tk-head--left .tk-rule { background: var(--tk-accent); }
.brand-scope .tk-card__tag,
.brand-scope .tk-hero__badge { background: var(--tk-accent); }

.brand-monz .tk-hero__badge strong { color: #ffffff; }
.brand-monz .tk-hero__badge span { color: rgba(255, 255, 255, 0.82); }
.brand-monz .tk-hero__badge i { color: #ffffff; }

.brand-scope .tk-btn {
  background: var(--tk-accent);
  border-color: var(--tk-accent);
}

.brand-monz .tk-btn { color: #ffffff; }
.brand-scope .tk-btn:hover { background: var(--tk-accent-soft); border-color: var(--tk-accent-soft); }
.brand-monz .tk-btn:hover { color: #ffffff; }
.brand-scope .tk-btn--ghost { background: transparent; color: var(--tk-accent); }
.brand-monz .tk-btn--ghost:hover { color: #ffffff; }

.brand-scope .tk-cta { background: linear-gradient(90deg, color-mix(in srgb, var(--tk-accent) 72%, #000000), var(--tk-accent)); }
.brand-monz .tk-cta h2 { color: #ffffff; }
.brand-monz .tk-cta p { color: rgba(255, 255, 255, 0.85); }
.brand-monz .tk-cta .tk-btn { background: var(--tk-black); border-color: var(--tk-black); color: #ffffff; }

.brand-scope .tk-pillar i { color: var(--tk-accent); }
.brand-scope .tk-card { border-color: color-mix(in srgb, var(--tk-accent) 22%, transparent); }
.brand-scope .tk-nav__btn { border-color: color-mix(in srgb, var(--tk-accent) 50%, transparent); color: var(--tk-accent); }
.brand-scope .tk-nav__btn:hover { background: var(--tk-accent); }
.brand-monz .tk-nav__btn:hover { color: #ffffff; }

/* ---------- 26. Submenú de la navegación --------------------------------- */

.header-four .main-nav-desk nav ul li.tk-has-sub { position: relative; }

.header-four .main-nav-desk nav ul li.tk-has-sub > .nav-link::after {
  content: "\f107";                       /* chevron-down de Font Awesome */
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  margin-left: 8px;
  font-size: 11px;
  display: inline-block;
  vertical-align: middle;
  transition: var(--transition);
}

.tk-submenu {
  display: block;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 12px);
  min-width: 240px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  background: var(--tk-graphite);
  border: 1px solid rgba(212, 164, 50, 0.28);
  border-radius: 3px;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease 0.35s, transform 0.2s ease 0.35s, visibility 0.2s 0.35s;
  z-index: 50;
}

/* Puente invisible sobre el desplegable: cubre el hueco entre el apartado del
   menu y el propio desplegable, y abarca todo su ancho, de modo que el puntero
   puede bajar despacio o en diagonal sin salirse de la zona sensible. */
.tk-submenu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -30px;
  height: 30px;
}

.header-four .main-nav-desk nav ul li.tk-has-sub:hover > .tk-submenu,
.header-four .main-nav-desk nav ul li.tk-has-sub:focus-within > .tk-submenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.tk-submenu li { display: block; margin: 0; padding: 0; }

.tk-submenu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  font-family: var(--font-secondary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tk-white);
  white-space: nowrap;
  transition: var(--transition);
}

/* La barra de navegacion de la plantilla declara `nav ul { display: flex }`
   con alta especificidad, y esa regla tambien alcanzaba al submenu. Estas dos
   reglas la superan para que el desplegable se apile en vertical. */
.header-four .header-main-wrapper .rts-header-mid .main-nav-desk nav ul li ul.tk-submenu {
  display: block;
}

.header-four .header-main-wrapper .rts-header-mid .main-nav-desk nav ul li ul.tk-submenu li {
  display: block;
  margin: 0;
  padding: 0;
}

.tk-submenu a i { width: 16px; font-size: 13px; color: var(--tk-gold); }

.tk-submenu a:hover,
.tk-submenu a:focus-visible,
.tk-submenu a[aria-current] {
  background: rgba(212, 164, 50, 0.12);
  color: var(--tk-gold);
}

/* Submenú dentro del panel lateral: lista anidada siempre visible,
   sin JavaScript y por tanto sin forma de quedar inaccesible. */
#side-bar .mobile-menu .mainmenu .tk-submenu-mobile {
  position: static;
  display: block;
  margin: 6px 0 10px;
  padding: 0 0 0 18px;
  list-style: none;
  border-left: 1px solid rgba(212, 164, 50, 0.3);
}

#side-bar .mobile-menu .mainmenu .tk-submenu-mobile a {
  display: block;
  padding: 7px 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--tk-steel);
}

#side-bar .mobile-menu .mainmenu .tk-submenu-mobile a:hover,
#side-bar .mobile-menu .mainmenu .tk-submenu-mobile a[aria-current] { color: var(--tk-gold); }

/* ---------- 27. Tarjetas de las marcas ----------------------------------- */

.tk-brands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

@media (max-width: 991px) { .tk-brands { grid-template-columns: 1fr; } }

.tk-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 460px;
  border-radius: 3px;
  background: var(--tk-graphite);
  color: var(--tk-white);
  transition: transform 0.4s ease;
}

.tk-brand:hover { transform: translateY(-6px); }

.tk-brand__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s ease;
}

.tk-brand:hover .tk-brand__bg { transform: scale(1.06); }

.tk-brand__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 12, 14, 0.96) 22%, rgba(12, 12, 14, 0.55) 60%, rgba(12, 12, 14, 0.25));
}

.tk-brand__body {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 30px 28px 32px;
}

.tk-brand__kicker {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 12px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tk-black);
  background: var(--tk-gold);
}

.tk-brand--monz .tk-brand__kicker { background: #b8040f; color: #ffffff; }
.tk-brand--pizza .tk-brand__kicker { background: #1ba762; }

.tk-brand__body h3 {
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--tk-white);
}

.tk-brand__body p { margin: 0 0 18px; font-size: 15px; line-height: 1.7; color: var(--tk-steel); }

.tk-brand__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tk-gold);
}

.tk-brand--monz .tk-brand__link { color: #ef4d56; }
.tk-brand--pizza .tk-brand__link { color: #35c77f; }
.tk-brand:hover .tk-brand__link { gap: 15px; }

.tk-brand__mark {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 2;
  width: 74px;
  height: auto;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5));
}

/* ---------- 28. Insignia de marca (Monz Burger y L'Élite Pizzas) --------- */

.tk-brand-badge {
  display: block;
  width: 100%;
  max-width: 290px;
  height: auto;
  margin: 0 0 26px;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.6));
}

/* En las portadas centradas la insignia se centra y baja un poco de tamaño. */
.tk-brand-badge--center {
  max-width: 230px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
}

@media (max-width: 991px) {
  .tk-brand-badge { max-width: 210px; margin-left: auto; margin-right: auto; }
  .tk-brand-badge--center { max-width: 175px; }
}

/* ---------- 29. Fichas ilustradas de sushi ------------------------------- */

.tk-item__img--art,
.tk-dishlist img.tk-art {
  padding: 8px;
  background: var(--tk-graphite);
  border: 1px solid rgba(212, 164, 50, 0.28);
  object-fit: contain;
}

.tk-section--light .tk-item__img--art { background: var(--tk-black); }

/* ---------- 30. Cinta deslizante ----------------------------------------- */

.tk-marquee {
  overflow: hidden;
  padding: 20px 0;
  background: var(--tk-accent);
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.tk-marquee__track {
  display: flex;
  width: max-content;
  gap: 42px;
  animation: tk-marquee 34s linear infinite;
}

.tk-marquee span {
  display: inline-flex;
  align-items: center;
  gap: 42px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tk-black);
}

.brand-monz .tk-marquee span { color: #ffffff; }
.tk-marquee span i { font-size: 13px; opacity: 0.7; }

@keyframes tk-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.tk-marquee:hover .tk-marquee__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .tk-marquee__track { animation: none; }
}

/* ---------- 31. Bloque de datos de la sucursal --------------------------- */

.tk-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(167, 167, 181, 0.16); }

@media (max-width: 767px) { .tk-info { grid-template-columns: 1fr; } }

.tk-info__cell { padding: 38px 28px; background: var(--tk-black); }
.tk-info__cell i { font-size: 22px; color: var(--tk-accent); }

.tk-info__cell h3 {
  margin: 16px 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tk-white);
}

.tk-info__cell p { margin: 0 0 4px; font-size: 15px; line-height: 1.7; color: var(--tk-steel); }

/* ---------- 32. Portada centrada (base index-seven) ---------------------- */

.tk-hero--center { text-align: center; padding: 130px 0 120px; }

@media (max-width: 767px) { .tk-hero--center { padding: 80px 0 74px; } }

.tk-hero--center .tk-hero__desc { margin-left: auto; margin-right: auto; }
.tk-hero--center .tk-hero__actions { justify-content: center; }
.tk-hero--center .tk-hero__stats { justify-content: center; }

.tk-hero__photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.3;
}

.tk-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(12, 12, 14, 0.55), rgba(12, 12, 14, 0.92));
}

/* ---------- 33. Tarjeta con producto recortado --------------------------- */

/* Las fotografias de hamburguesa de la plantilla vienen recortadas sobre fondo
   transparente. Con `cover` se partirian por la mitad, asi que se muestran
   completas sobre un degradado oscuro. */
.tk-card__media--cutout {
  background: radial-gradient(75% 75% at 50% 45%, #2f333a 0%, var(--tk-black) 100%);
}

.tk-card__media--cutout img {
  object-fit: contain;
  padding: 14px;
}

/* ---------- 34. Uber Eats ------------------------------------------------ */

/* En la cabecera, el bloque de contacto ya no es un telefono sino un aviso.
   Al no ser un enlace, se estiliza el <span> directamente. */
.header-four .header-main-wrapper .rts-header-right .query-list.tk-uber { cursor: default; }

.header-four .header-main-wrapper .rts-header-right .query-list .text-heading {
  font-size: 15px;
  font-weight: 600;
  color: var(--tk-white);
  white-space: nowrap;
}

@media (max-width: 1199px) {
  .header-four .header-main-wrapper .rts-header-right .query-list .text-heading { font-size: 13px; }
}

/* Distintivo con la forma de un boton pero sin comportamiento de enlace:
   se usa mientras no exista la direccion del comercio en Uber Eats.
   Para convertirlo en enlace basta con cambiar el <span> por un <a href="…"
   rel="noopener noreferrer"> y quitar la clase tk-btn--static. */
.tk-btn--static { cursor: default; }
.tk-btn--static:hover { background: var(--tk-accent); border-color: var(--tk-accent); }
.tk-btn--ghost.tk-btn--static:hover { background: transparent; color: var(--tk-accent); }
.tk-cta .tk-btn--static:hover { background: var(--tk-black); border-color: var(--tk-black); }
.brand-monz .tk-btn--ghost.tk-btn--static:hover { color: var(--tk-accent); }

/* ---------- 35. Lista de pasos del bloque partido ------------------------ */

/* Tres pasos en vertical, con el icono a un lado. Sustituye a la rejilla de
   cinco columnas de los pilares, que en la mitad de un bloque partido dejaba
   los titulos partidos en dos renglones. */
.tk-steps { margin: 0; padding: 0; list-style: none; }

.tk-steps li {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px dashed rgba(167, 167, 181, 0.22);
}

.tk-steps li:last-child { border-bottom: 0; padding-bottom: 0; }

.tk-steps i {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--tk-accent) 45%, transparent);
  border-radius: 2px;
  font-size: 18px;
  color: var(--tk-accent);
}

.tk-steps h3 {
  margin: 0 0 7px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tk-white);
}

.tk-steps p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--tk-steel); }

/* ---------- 36. Boton de la cinta de cierre en las landings -------------- */

/* `.brand-scope .tk-btn` y `.tk-cta .tk-btn` tienen la misma especificidad, y
   como la primera se declara despues, ganaba: el boton quedaba del color del
   acento sobre una cinta del mismo color, es decir, invisible. Se resuelve
   con un selector mas especifico para la cinta. */
.brand-scope .tk-cta .tk-btn {
  background: var(--tk-black);
  border-color: var(--tk-black);
  color: #ffffff;
}

.brand-sushi .tk-cta .tk-btn { color: var(--tk-gold); }
.brand-pizza .tk-cta .tk-btn { color: #ffffff; }

/* El degradado de la cinta arranca en verde oscuro, donde el texto negro
   perderia legibilidad. */
.brand-pizza .tk-cta h2 { color: #ffffff; }
.brand-pizza .tk-cta p { color: rgba(255, 255, 255, 0.85); }

.brand-scope .tk-cta .tk-btn:hover,
.brand-scope .tk-cta .tk-btn--static:hover {
  background: var(--tk-graphite);
  border-color: var(--tk-graphite);
}

/* ---------- 37. Disparador del menu lateral ------------------------------ */

/* Antes eran cuatro puntos en un cuadro de 28x20 px: ni se reconocia como menu
   ni era acertable con el dedo (el minimo recomendado son 44x44). Ahora es el
   icono universal de tres barras, con la palabra al lado y area tactil amplia. */
.header-four .header-main-wrapper .rts-header-right .menu-area {
  width: auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
}

.header-four .header-main-wrapper .menu-area button.tk-menu-btn,
button.tk-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  width: auto;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(212, 164, 50, 0.4);
  border-radius: 2px;
  background: transparent;
  color: var(--tk-white);
  font-family: var(--font-secondary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
}

button.tk-menu-btn:hover,
button.tk-menu-btn:focus-visible {
  border-color: var(--tk-gold);
  background: rgba(212, 164, 50, 0.12);
  color: var(--tk-gold);
}

.tk-menu-btn__bars {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 20px;
  flex: 0 0 auto;
}

.tk-menu-btn__bars span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: var(--tk-gold);
  transition: var(--transition);
}

button.tk-menu-btn:hover .tk-menu-btn__bars span { background: var(--tk-gold-light); }


/* En pantallas muy estrechas se deja solo el icono, pero conservando los 46 px
   de alto y un ancho comodo para el dedo. */
@media (max-width: 400px) {
  .tk-menu-btn__texto { display: none; }
  button.tk-menu-btn { padding: 0 14px; min-width: 52px; justify-content: center; }
}

/* El boton de cerrar del panel tambien necesita area tactil suficiente. */
#side-bar .close-icon-menu {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* La plantilla fija .rts-header-right al 20 % del ancho, y con la pastilla de
   Uber Eats al lado el boton de menu se comprimia hasta 38 px. Se deja que la
   barra derecha ocupe lo que necesite y que el boton nunca encoja. */
.header-four .header-main-wrapper .rts-header-right {
  width: auto;
  flex: 0 0 auto;
}

.header-four .header-main-wrapper .rts-header-right .menu-area,
button.tk-menu-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Entre 992 y 1200 px la pastilla y el boton compiten por el sitio: la
   pastilla cede primero, porque el menu es lo que no puede faltar. */
@media (max-width: 1199px) and (min-width: 992px) {
  .header-four .header-main-wrapper .rts-header-right .query-list { padding: 0 12px 0 6px; }
  .header-four .header-main-wrapper .rts-header-right .query-list .text-heading { font-size: 12px; }
}