/* ============================================================
   TICO’S BAR
   Styles.html
   ============================================================ */


/* ============================================================
   VARIABLES
============================================================ */

:root {

  --black: #050505;
  --dark: #080808;
  --dark-2: #101010;
  --dark-3: #171717;
  --card: #141414;
  --card-hover: #1a1a1a;

  --white: #ffffff;
  --off-white: #f7f5f0;

  --text: #111111;
  --muted: #77736d;

  --menu-text: #f8f8f8;
  --menu-muted: #aaa7a1;

  --accent: #d4af62;
  --accent-soft: #c6a15a;

  --whatsapp: #25d366;

  --line-dark: rgba(255,255,255,.11);
  --line-gold: rgba(212,175,98,.40);
  --line-light: rgba(0,0,0,.10);

  --font:
    "DM Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  --display:
    "Playfair Display",
    Georgia,
    serif;

  --header-height: 82px;

  --max-width: 1180px;

}


/* ============================================================
   RESET
============================================================ */

* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}


html {

  scroll-behavior: smooth;

}


body {

  min-height: 100vh;

  overflow-x: hidden;

  background: var(--dark);

  color: var(--text);

  font-family: var(--font);

  font-size: 16px;

  line-height: 1.5;

  -webkit-font-smoothing: antialiased;

  text-rendering: optimizeLegibility;

}


body.no-scroll {

  overflow: hidden;

}


button,
input {

  font: inherit;

}


button {

  cursor: pointer;

}


a {

  color: inherit;

  text-decoration: none;

}


img {

  display: block;

  max-width: 100%;

}


svg {

  display: block;

}




/* ============================================================
   HEADER
============================================================ */

#mainHeader {

  position: fixed;

  z-index: 1000;

  top: 0;

  left: 0;

  width: 100%;

  background:
    rgba(5,5,5,.96);

  color: white;

  border-bottom:
    1px solid var(--line-dark);

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);

}


.header-inner {

  width: min(
    calc(100% - 50px),
    1280px
  );

  height:
    var(--header-height);

  margin-inline: auto;

  display: flex;

  align-items: center;

  gap: 22px;

}


/* ============================================================
   VOLVER
============================================================ */

.header-back {

  width: 40px;

  height: 40px;

  flex: 0 0 auto;

  align-items: center;

  justify-content: center;

  border: 0;

  background: transparent;

  color: white;

}


.header-back svg {

  width: 29px;

  height: 29px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;

  stroke-linejoin: round;

}


/* ============================================================
   LOGO HEADER
============================================================ */

.header-brand {

  flex: 0 0 auto;

  border: 0;

  background: transparent;

  color: white;

  text-align: left;

}


.header-brand img {

  max-width: 165px;

  max-height: 54px;

  object-fit: contain;

}


.header-text-logo {

  display: flex;

  flex-direction: column;

}


.header-text-logo strong {

  font-family: var(--display);

  font-size: 25px;

  font-weight: 500;

  line-height: 1;

  letter-spacing: 1px;

}


.header-text-logo span {

  margin-top: 7px;

  color: var(--accent);

  font-size: 8px;

  font-weight: 600;

  letter-spacing: 5px;

}


/* ============================================================
   NAV DESKTOP
============================================================ */

.desktop-nav {

  margin-left: auto;

  display: flex;

  align-items: center;

  gap: 30px;

}


.desktop-nav button {

  position: relative;

  padding: 8px 0;

  border: 0;

  background: transparent;

  color:
    rgba(255,255,255,.70);

  font-size: 14px;

  font-weight: 500;

}


.desktop-nav button::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: 0;

  width: 0;

  height: 1px;

  background:
    var(--accent);

  transition:
    width .2s ease;

}


.desktop-nav button:hover {

  color: white;

}


.desktop-nav button:hover::after {

  width: 100%;

}


/* ============================================================
   RESERVAR HEADER
============================================================ */

.header-whatsapp {

  flex: 0 0 auto;

  padding:
    12px
    19px;

  border:
    1px solid var(--accent);

  color: var(--accent);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 1px;

  transition: .2s;

}


.header-whatsapp:hover {

  background:
    var(--accent);

  color:
    var(--black);

}


/* ============================================================
   HAMBURGER
============================================================ */

.hamburger {

  display: none;

  width: 36px;

  margin-left: auto;

  border: 0;

  background: transparent;

}


.hamburger span {

  display: block;

  width: 100%;

  height: 1.5px;

  margin: 7px 0;

  background: white;

  transition: .2s;

}


#mainHeader.menu-open
.hamburger span:nth-child(1) {

  transform:
    translateY(8.5px)
    rotate(45deg);

}


#mainHeader.menu-open
.hamburger span:nth-child(2) {

  opacity: 0;

}


#mainHeader.menu-open
.hamburger span:nth-child(3) {

  transform:
    translateY(-8.5px)
    rotate(-45deg);

}


/* ============================================================
   MOBILE MENU
============================================================ */

.mobile-menu {

  display: none;

}


#mainHeader.menu-open
.mobile-menu {

  display: block;

}


.mobile-menu {

  padding:
    15px
    25px
    30px;

  background:
    var(--black);

  border-top:
    1px solid var(--line-dark);

}


.mobile-menu nav {

  display: flex;

  flex-direction: column;

}


.mobile-menu nav button {

  padding:
    18px
    0;

  border: 0;

  border-bottom:
    1px solid var(--line-dark);

  background:
    transparent;

  color: white;

  text-align: left;

  font-size: 21px;

  font-weight: 600;

}


.mobile-whatsapp {

  margin-top: 22px;

  min-height: 52px;

  display: flex;

  align-items: center;

  justify-content: center;

  border:
    1px solid var(--accent);

  color:
    var(--accent);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: .7px;

}


/* ============================================================
   PÁGINAS
============================================================ */

#app {

  min-height: 100vh;

}


.app-page {

  display: none;

  min-height: 100vh;

  padding-top:
    var(--header-height);

}


.app-page.active {

  display: block;

  animation:
    pageFade .25s ease;

}


@keyframes pageFade {

  from {

    opacity: .5;

  }

  to {

    opacity: 1;

  }

}


/* ============================================================
   BOTONES GENERALES
============================================================ */

.primary-button,
.secondary-button,
.outline-button,
.outline-dark-button {

  min-height: 52px;

  padding:
    15px
    24px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border:
    1px solid transparent;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 1px;

}


.primary-button {

  background:
    var(--accent);

  color:
    var(--black);

}


.secondary-button {

  border-color:
    rgba(255,255,255,.65);

  color: white;

}


.dark-primary {

  border: 0;

  background:
    var(--black);

  color: white;

}


.outline-button {

  border-color:
    var(--black);

  background:
    transparent;

  color:
    var(--black);

}


.outline-dark-button {

  border-color:
    rgba(255,255,255,.4);

  background:
    transparent;

  color: white;

}


/* ============================================================
   INICIO
============================================================ */

.home-hero {

  position: relative;

  min-height:
    calc(
      100svh -
      var(--header-height)
    );

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  color: white;

}


.home-hero-background {

  position: absolute;

  inset: 0;

  background:

    url(
      "https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&w=1800&q=90"
    )

    center / cover
    no-repeat;

  transform:
    scale(1.02);

}


.home-hero-overlay {

  position: absolute;

  inset: 0;

  background:

    linear-gradient(
      180deg,
      rgba(0,0,0,.30),
      rgba(0,0,0,.80)
    );

}


.home-hero-content {

  position: relative;

  z-index: 2;

  width: min(
    calc(100% - 40px),
    900px
  );

  padding:
    70px
    0;

  text-align: center;

}


.hero-eyebrow {

  display: block;

  margin-bottom: 24px;

  color:
    var(--accent);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 4px;

}


.home-hero h1 {

  font-family:
    var(--display);

  font-size: clamp(
    72px,
    10vw,
    126px
  );

  font-weight: 500;

  line-height: .9;

  letter-spacing: -3px;

}


.hero-subtitle {

  display: block;

  margin-top: 19px;

  color:
    var(--accent);

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 9px;

}


.hero-divider {

  width: 48px;

  height: 1px;

  margin:
    32px
    auto;

  background:
    var(--accent);

}


.home-hero h2 {

  max-width: 750px;

  margin-inline: auto;

  font-family:
    var(--display);

  font-size: clamp(
    30px,
    4vw,
    44px
  );

  font-weight: 500;

  line-height: 1.15;

}


.home-hero p {

  max-width: 600px;

  margin:
    18px
    auto
    32px;

  color:
    rgba(255,255,255,.78);

  font-size: 17px;

  line-height: 1.7;

}


.hero-actions {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 12px;

}


/* ============================================================
   SELECTOR "NUESTRAS CARTAS"
============================================================ */

.cards-page {

  position: relative;

  min-height: 100vh;

  overflow: hidden;

  background:
    var(--black);

  color: white;

}


.cards-background {

  position: absolute;

  inset: 0;

  background:

    url(
      "https://images.unsplash.com/photo-1515003197210-e0cd71810b5f?auto=format&fit=crop&w=1800&q=85"
    )

    center / cover
    no-repeat;

  opacity: .22;

  filter:
    saturate(.65);

}


.cards-overlay {

  position: absolute;

  inset: 0;

  background:

    radial-gradient(
      circle at center,
      rgba(0,0,0,.35),
      rgba(0,0,0,.92)
    ),

    linear-gradient(
      180deg,
      rgba(0,0,0,.50),
      #050505
    );

}


.cards-page-content {

  position: relative;

  z-index: 2;

  width: min(
    calc(100% - 40px),
    1040px
  );

  min-height:
    calc(
      100vh -
      var(--header-height)
    );

  margin: auto;

  padding:
    48px
    0
    60px;

  display: flex;

  flex-direction: column;

  align-items: center;

}


/* ============================================================
   LOGO SELECTOR
============================================================ */

.cards-brand {

  min-height: 76px;

  display: flex;

  align-items: center;

  justify-content: center;

}


.cards-brand img {

  max-width: 190px;

  max-height: 72px;

  object-fit: contain;

}


.cards-text-logo {

  display: flex;

  flex-direction: column;

  align-items: center;

}


.cards-text-logo strong {

  font-family:
    var(--display);

  font-size: 39px;

  font-weight: 500;

  line-height: 1;

}


.cards-text-logo span {

  margin-top: 8px;

  color:
    var(--accent);

  font-size: 8px;

  font-weight: 600;

  letter-spacing: 6px;

}


/* ============================================================
   HEADING CARTAS
============================================================ */

.cards-heading {

  margin-top: 45px;

  text-align: center;

}


.cards-heading > span {

  color:
    var(--accent);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 4px;

}


.cards-heading h1 {

  margin-top: 7px;

  font-family:
    var(--display);

  font-size: clamp(
    42px,
    6vw,
    64px
  );

  font-weight: 500;

  line-height: 1;

}


.cards-heading p {

  margin-top: 13px;

  color:
    rgba(255,255,255,.65);

  font-size: 15px;

}


/* ============================================================
   GRID DE CARTAS
============================================================ */

.cards-grid {

  width: 100%;

  margin-top: 40px;

  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap: 18px;

}


/* ============================================================
   TARJETA CARTA
============================================================ */

.menu-card {

  position: relative;

  min-height: 310px;

  overflow: hidden;

  border:
    1px solid
    rgba(212,175,98,.40);

  background:
    #111;

  cursor: pointer;

  isolation: isolate;

  transition:
    transform .25s ease,
    border-color .25s ease;

}


.menu-card:hover {

  transform:
    translateY(-4px);

  border-color:
    var(--accent);

}


.menu-card-background {

  position: absolute;

  inset: 0;

  background-position:
    center;

  background-size:
    cover;

  transition:
    transform .5s ease;

}


.menu-card:hover
.menu-card-background {

  transform:
    scale(1.04);

}


.menu-card-overlay {

  position: absolute;

  inset: 0;

  background:

    linear-gradient(
      180deg,
      rgba(0,0,0,.12),
      rgba(0,0,0,.83)
    );

}


.menu-card-content {

  position: absolute;

  z-index: 2;

  inset:
    auto
    0
    0;

  padding:
    28px;

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 20px;

}


.menu-card-copy {

  min-width: 0;

}


.menu-card-copy span {

  display: block;

  margin-bottom: 5px;

  color:
    var(--accent);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 3px;

}


.menu-card-copy h2 {

  font-family:
    var(--display);

  font-size: 34px;

  font-weight: 500;

  line-height: 1;

}


.menu-card-copy p {

  max-width: 330px;

  margin-top: 9px;

  color:
    rgba(255,255,255,.72);

  font-size: 13px;

  line-height: 1.45;

}


.menu-card-arrow {

  width: 46px;

  height: 46px;

  flex: 0 0 auto;

  display: flex;

  align-items: center;

  justify-content: center;

  border:
    1px solid
    rgba(255,255,255,.35);

  border-radius: 50%;

  color: white;

  font-size: 24px;

  transition:
    background .2s,
    color .2s;

}


.menu-card:hover
.menu-card-arrow {

  background: white;

  color: black;

}


/* ============================================================
   FOOTER SELECTOR
============================================================ */

.cards-footer-text {

  width: 100%;

  margin-top: auto;

  padding-top: 45px;

  display: flex;

  align-items: center;

  gap: 20px;

  color:
    rgba(255,255,255,.42);

}


.cards-footer-text span {

  flex: 0 0 auto;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 3px;

}


.cards-footer-text div {

  height: 1px;

  flex: 1;

  background:
    rgba(212,175,98,.25);

}


/* ============================================================
   HERO CARTA INDIVIDUAL
============================================================ */

.menu-page {

  min-height: 100vh;

  padding-bottom: 80px;

  background:
    var(--dark);

  color:
    var(--menu-text);

}


.menu-hero {

  position: relative;

  height: 340px;

  overflow: hidden;

  background:
    #111;

}


.menu-hero-background {

  position: absolute;

  inset: 0;

  background-position:
    center;

  background-size:
    cover;

}


.menu-hero-overlay {

  position: absolute;

  inset: 0;

  background:

    linear-gradient(
      180deg,
      rgba(0,0,0,.35),
      rgba(0,0,0,.87)
    );

}


.menu-hero-content {

  position: relative;

  z-index: 2;

  width: min(
    calc(100% - 50px),
    1050px
  );

  height: 100%;

  margin: auto;

  padding-bottom: 43px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  align-items: flex-start;

}


.menu-hero-eyebrow {

  color:
    var(--accent);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 4px;

}


.menu-hero-content h1 {

  margin-top: 7px;

  font-family:
    var(--display);

  font-size: clamp(
    47px,
    7vw,
    76px
  );

  font-weight: 500;

  line-height: .95;

}


.menu-hero-content p {

  margin-top: 11px;

  color:
    rgba(255,255,255,.68);

  font-size: 16px;

}


.menu-hero-line {

  width: 65px;

  height: 1px;

  margin-top: 19px;

  background:
    var(--accent);

}


/* ============================================================
   BUSCADOR
============================================================ */

.menu-search-wrapper {

  max-width: 1050px;

  margin: auto;

  padding:
    25px
    25px
    17px;

  background:
    var(--dark);

}


.menu-search {

  position: relative;

}


.menu-search svg {

  position: absolute;

  top: 50%;

  left: 18px;

  width: 21px;

  height: 21px;

  transform:
    translateY(-50%);

  fill: none;

  stroke: #999;

  stroke-width: 1.8;

}


.menu-search input {

  width: 100%;

  height: 54px;

  padding:
    0
    52px;

  border:
    1px solid #2a2a2a;

  border-radius: 10px;

  outline: none;

  background:
    #111;

  color: white;

  font-size: 16px;

  transition:
    border-color .2s;

}


.menu-search input:focus {

  border-color:
    var(--accent);

}


.menu-search input::placeholder {

  color: #7e7e7e;

}


.clear-search {

  position: absolute;

  top: 50%;

  right: 13px;

  width: 32px;

  height: 32px;

  transform:
    translateY(-50%);

  border: 0;

  background: transparent;

  color: #aaa;

  font-size: 25px;

}


/* ============================================================
   CATEGORÍAS STICKY
============================================================ */

.categories-sticky {

  position: sticky;

  z-index: 150;

  top:
    var(--header-height);

  background:
    rgba(8,8,8,.98);

  border-top:
    1px solid var(--line-dark);

  border-bottom:
    1px solid var(--line-dark);

  backdrop-filter:
    blur(15px);

  -webkit-backdrop-filter:
    blur(15px);

}


.categories-scroll {

  max-width: 1050px;

  margin: auto;

  padding:
    0
    10px;

  display: flex;

  overflow-x: auto;

  overscroll-behavior-x:
    contain;

  scrollbar-width:
    none;

}


.categories-scroll::-webkit-scrollbar {

  display: none;

}


.category-button {

  position: relative;

  flex:
    0
    0
    auto;

  padding:
    18px
    17px
    16px;

  border: 0;

  background:
    transparent;

  color:
    #858585;

  font-size: 15px;

  font-weight: 600;

  white-space: nowrap;

  transition:
    color .2s;

}


.category-button::after {

  content: "";

  position: absolute;

  left: 17px;

  right: 17px;

  bottom: 0;

  height: 2px;

  background:
    var(--accent);

  opacity: 0;

}


.category-button.active {

  color: white;

}


.category-button.active::after {

  opacity: 1;

}


/* ============================================================
   CONTENIDO CARTA
============================================================ */

.menu-content {

  max-width: 1050px;

  margin: auto;

  padding:
    43px
    25px
    20px;

}


.menu-category {

  scroll-margin-top:
    calc(
      var(--header-height) +
      75px
    );

  margin-bottom: 58px;

}


.menu-category-header {

  margin-bottom: 18px;

  display: flex;

  align-items: flex-end;

  gap: 18px;

}


.menu-category-header-copy {

  flex: 0 0 auto;

}


.menu-category-header h3 {

  color: white;

  font-family:
    var(--display);

  font-size: 30px;

  font-weight: 500;

  line-height: 1.1;

}


.menu-category-header p {

  max-width: 500px;

  margin-top: 6px;

  color:
    #868686;

  font-size: 13px;

}


.menu-category-line {

  height: 1px;

  flex: 1;

  margin-bottom: 7px;

  background:
    var(--line-gold);

}


/* ============================================================
   PRODUCTO
============================================================ */

.menu-product {

  position: relative;

  min-height: 150px;

  margin-bottom: 11px;

  padding: 12px;

  display: grid;

  grid-template-columns:
    128px
    minmax(0,1fr);

  gap: 17px;

  border:
    1px solid #202020;

  border-radius: 11px;

  background:
    var(--card);

  cursor: pointer;

  transition:
    background .2s,
    transform .2s,
    border-color .2s;

}


.menu-product:hover {

  background:
    var(--card-hover);

  border-color:
    rgba(212,175,98,.25);

  transform:
    translateY(-1px);

}


.menu-product:active {

  transform:
    scale(.995);

}


/* ============================================================
   FOTO PRODUCTO
============================================================ */

.menu-product-image {

  width: 128px;

  height: 128px;

  overflow: hidden;

  border-radius: 8px;

  background:
    #1c1c1c;

}


.menu-product-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}


.menu-product-placeholder {

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  background:

    radial-gradient(
      circle at center,
      #292929,
      #111
    );

  color:
    var(--accent);

  font-family:
    var(--display);

  font-size: 36px;

}


/* ============================================================
   TEXTO PRODUCTO
============================================================ */

.menu-product-content {

  min-width: 0;

  padding:
    5px
    8px
    5px
    0;

}


.menu-product-title-line {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 8px;

}


.menu-product h4 {

  color: white;

  font-size: 19px;

  font-weight: 700;

  line-height: 1.2;

}


.product-small-tag {

  padding:
    4px
    7px;

  border-radius: 3px;

  background:
    var(--accent);

  color:
    var(--black);

  font-size: 7px;

  font-weight: 700;

  letter-spacing: .8px;

}


.menu-product-price {

  margin-top: 4px;

  color:
    var(--accent);

  font-size: 18px;

  font-weight: 700;

}


.menu-product p {

  max-width: 660px;

  margin-top: 7px;

  color:
    #9e9e9e;

  font-size: 14px;

  line-height: 1.45;

}


/* ============================================================
   LOADING
============================================================ */

.menu-loading {

  min-height: 260px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 14px;

  color: #888;

}


.spinner {

  width: 28px;

  height: 28px;

  border:
    2px solid #333;

  border-top-color:
    var(--accent);

  border-radius: 50%;

  animation:
    spin .8s
    linear
    infinite;

}


@keyframes spin {

  to {

    transform:
      rotate(360deg);

  }

}


/* ============================================================
   SIN RESULTADOS
============================================================ */

.no-results {

  padding:
    80px
    20px;

  text-align: center;

}


.no-results-symbol {

  width: 60px;

  height: 60px;

  margin:
    0
    auto
    20px;

  display: flex;

  align-items: center;

  justify-content: center;

  border:
    1px solid var(--accent);

  color:
    var(--accent);

  font-family:
    var(--display);

  font-size: 34px;

}


.no-results h3 {

  color: white;

  font-family:
    var(--display);

  font-size: 28px;

  font-weight: 500;

}


.no-results p {

  margin-top: 8px;

  color: #888;

}


.no-results button {

  margin-top: 25px;

}


/* ============================================================
   PAGE EYEBROW
============================================================ */

.page-eyebrow {

  display: block;

  margin-bottom: 15px;

  color:
    var(--accent);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 3px;

  text-transform: uppercase;

}


/* ============================================================
   NOSOTROS
============================================================ */

.content-page {

  background:
    var(--off-white);

}


.content-page-grid {

  min-height:
    calc(
      100vh -
      var(--header-height)
    );

  display: grid;

  grid-template-columns:
    1.05fr
    .95fr;

}


.content-page-image {

  position: relative;

  min-height: 650px;

  background:
    var(--black);

}


.content-page-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}


.dark-placeholder {

  width: 100%;

  height: 100%;

  min-height: inherit;

  display: flex;

  align-items: center;

  justify-content: center;

  background:

    radial-gradient(
      circle at center,
      #242424,
      #080808
    );

  color:
    var(--accent);

  font-family:
    var(--display);

  font-size: 60px;

}


.content-page-copy {

  padding:
    90px
    9%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: flex-start;

}


.content-page-copy h1 {

  max-width: 530px;

  font-family:
    var(--display);

  font-size: clamp(
    50px,
    5vw,
    70px
  );

  font-weight: 500;

  line-height: 1.05;

}


.content-page-copy p {

  max-width: 540px;

  margin-top: 18px;

  color:
    var(--muted);

  font-size: 17px;

  line-height: 1.75;

}


.content-page-copy
.content-lead {

  color:
    var(--text);

  font-size: 20px;

}


.content-page-copy
.primary-button {

  margin-top: 32px;

}


/* ============================================================
   GALERÍA
============================================================ */

.gallery-page {

  padding-bottom: 100px;

  background:
    var(--off-white);

}


.standard-page-heading {

  max-width:
    var(--max-width);

  margin: auto;

  padding:
    70px
    30px
    45px;

}


.standard-page-heading h1 {

  font-family:
    var(--display);

  font-size: 64px;

  font-weight: 500;

}


.standard-page-heading p {

  margin-top: 12px;

  color:
    var(--muted);

  font-size: 17px;

}


.gallery-grid {

  max-width:
    var(--max-width);

  margin: auto;

  padding:
    0
    30px;

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap: 12px;

}


.gallery-item {

  position: relative;

  aspect-ratio:
    1 / 1;

  overflow: hidden;

  background:
    #111;

  cursor: pointer;

}


.gallery-item:nth-child(5n + 1) {

  grid-column:
    span 2;

  grid-row:
    span 2;

}


.gallery-item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition:
    transform .35s;

}


.gallery-item:hover img {

  transform:
    scale(1.035);

}


.gallery-item-overlay {

  position: absolute;

  inset: 0;

  padding: 25px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  color: white;

  background:

    linear-gradient(
      transparent 45%,
      rgba(0,0,0,.75)
    );

  opacity: 0;

  transition: .2s;

}


.gallery-item:hover
.gallery-item-overlay {

  opacity: 1;

}


.gallery-item-overlay strong {

  font-size: 21px;

}


.gallery-item-overlay span {

  margin-top: 4px;

  color:
    rgba(255,255,255,.75);

}


.empty-content {

  padding:
    100px
    30px;

  text-align: center;

}


.empty-content strong {

  font-size: 25px;

}


.empty-content p {

  margin-top: 8px;

  color:
    var(--muted);

}


/* ============================================================
   UBICACIÓN
============================================================ */

.location-page {

  background:
    var(--off-white);

}


.location-page-grid {

  min-height:
    calc(
      100vh -
      var(--header-height)
    );

  display: grid;

  grid-template-columns:
    1fr
    1fr;

}


.location-page-content {

  padding:
    85px
    10%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: flex-start;

}


.location-page-content h1 {

  max-width: 500px;

  margin-bottom: 40px;

  font-family:
    var(--display);

  font-size: clamp(
    50px,
    5vw,
    70px
  );

  font-weight: 500;

  line-height: 1.05;

}


.location-info-block {

  margin-bottom: 26px;

}


.location-info-block > span {

  display: block;

  margin-bottom: 7px;

  color:
    var(--accent);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 2px;

}


.location-info-block p,
.location-info-block > a {

  max-width: 450px;

  color:
    var(--muted);

  font-size: 17px;

  line-height: 1.6;

}


.schedule-list {

  width: min(
    100%,
    390px
  );

  display: grid;

  gap: 5px;

}


.schedule-row {

  display: flex;

  justify-content: space-between;

  gap: 30px;

  color:
    var(--muted);

  font-size: 15px;

}


.schedule-row strong {

  color:
    var(--text);

  font-weight: 600;

}


.location-actions {

  margin-top: 15px;

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

}


.location-page-image {

  min-height: 650px;

  background:
    var(--black);

}


.location-page-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}


/* ============================================================
   WHATSAPP FLOTANTE
============================================================ */

.floating-whatsapp {

  position: fixed;

  z-index: 700;

  right: 22px;

  bottom: 22px;

  width: 59px;

  height: 59px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background:
    var(--whatsapp);

  color: white;

  box-shadow:

    0
    10px
    30px
    rgba(0,0,0,.30);

}


.floating-whatsapp svg {

  width: 33px;

  height: 33px;

}


/* ============================================================
   DETALLE PRODUCTO
============================================================ */

.product-detail {

  position: fixed;

  z-index: 5000;

  inset: 0;

  overflow-y: auto;

  visibility: hidden;

  transform:
    translateX(100%);

  background:
    var(--dark);

  color: white;

  transition:
    transform .28s ease,
    visibility .28s;

}


.product-detail.open {

  visibility: visible;

  transform:
    translateX(0);

}


/* ============================================================
   HEADER DETALLE
============================================================ */

.product-detail-header {

  position: sticky;

  z-index: 10;

  top: 0;

  height: 76px;

  padding:
    0
    25px;

  display: grid;

  grid-template-columns:
    50px
    1fr
    50px;

  align-items: center;

  background:
    rgba(5,5,5,.97);

  border-bottom:
    1px solid var(--line-dark);

  backdrop-filter:
    blur(15px);

}


.detail-back,
.detail-whatsapp-icon {

  width: 43px;

  height: 43px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 0;

  background:
    transparent;

  color: white;

}


.detail-back svg,
.detail-whatsapp-icon svg {

  width: 28px;

  height: 28px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.7;

  stroke-linecap: round;

  stroke-linejoin: round;

}


.detail-brand {

  display: flex;

  flex-direction: column;

  align-items: center;

}


.detail-brand strong {

  font-family:
    var(--display);

  font-size: 19px;

  font-weight: 500;

}


.detail-brand span {

  margin-top: 3px;

  color:
    var(--accent);

  font-size: 6px;

  font-weight: 700;

  letter-spacing: 3px;

}


/* ============================================================
   CONTENIDO DETALLE
============================================================ */

.product-detail-scroll {

  width: min(
    calc(100% - 40px),
    720px
  );

  margin: auto;

  padding:
    35px
    0
    80px;

}


.product-detail-image {

  position: relative;

  width: min(
    100%,
    580px
  );

  margin: auto;

  aspect-ratio:
    1 / 1;

  overflow: hidden;

  background:
    #171717;

}


.product-detail-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}


.product-detail-info {

  padding:
    40px
    0;

  border-bottom:
    1px solid var(--line-dark);

}


.detail-category {

  display: block;

  margin-bottom: 8px;

  color:
    var(--accent);

  font-size: 11px;

  font-weight: 700;

  text-transform:
    uppercase;

  letter-spacing: 1.5px;

}


.product-detail-info h1 {

  max-width: 600px;

  font-family:
    var(--display);

  font-size: 37px;

  font-weight: 500;

  line-height: 1.08;

}


.detail-price {

  display: block;

  margin-top: 9px;

  color:
    var(--accent);

  font-size: 24px;

  font-weight: 700;

}


.product-detail-info p {

  max-width: 620px;

  margin-top: 20px;

  color:
    #b8b8b8;

  font-size: 17px;

  line-height: 1.6;

}


.detail-bottom {

  margin-top: 30px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 18px;

}


.detail-tag {

  padding:
    6px
    9px;

  border-radius: 3px;

  background:
    var(--accent);

  color:
    var(--black);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 1px;

}


.detail-consult-button {

  min-height: 50px;

  margin-left: auto;

  padding:
    14px
    20px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border:
    1px solid var(--accent);

  color:
    var(--accent);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 1px;

  transition: .2s;

}


.detail-consult-button:hover {

  background:
    var(--accent);

  color:
    var(--black);

}


/* ============================================================
   GALERÍA FULLSCREEN
============================================================ */

.gallery-viewer {

  position: fixed;

  z-index: 6000;

  inset: 0;

  padding:
    60px
    25px
    30px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  visibility: hidden;

  opacity: 0;

  background:
    rgba(0,0,0,.97);

  color: white;

  transition: .2s;

}


.gallery-viewer.open {

  visibility: visible;

  opacity: 1;

}


.gallery-viewer-close {

  position: absolute;

  top: 18px;

  right: 24px;

  border: 0;

  background:
    transparent;

  color: white;

  font-size: 42px;

}


.gallery-viewer img {

  max-width: min(
    100%,
    1100px
  );

  max-height: 75vh;

  object-fit: contain;

}


.gallery-viewer-caption {

  width: min(
    100%,
    1100px
  );

  margin-top: 17px;

  display: flex;

  flex-direction: column;

}


.gallery-viewer-caption strong {

  font-size: 20px;

}


.gallery-viewer-caption span {

  margin-top: 4px;

  color: #999;

}


/* ============================================================
   ERROR
============================================================ */

.global-error {

  position: fixed;

  z-index: 999999;

  inset: 0;

  padding: 30px;

  align-items: center;

  justify-content: center;

  background:
    var(--black);

  color: white;

  text-align: center;

}


.global-error span {

  color:
    var(--accent);

  font-size: 10px;

  letter-spacing: 4px;

}


.global-error h2 {

  margin:
    15px
    0;

  font-family:
    var(--display);

  font-size: 38px;

  font-weight: 500;

}


.global-error p {

  color: #999;

}


.global-error button {

  margin-top: 25px;

  padding:
    13px
    20px;

  border:
    1px solid var(--accent);

  background:
    transparent;

  color:
    var(--accent);

  font-weight: 700;

}


/* ============================================================
   TABLET
============================================================ */

@media (
  max-width: 950px
) {

  :root {

    --header-height: 74px;

  }


  .desktop-nav,
  .header-whatsapp {

    display: none;

  }


  .hamburger {

    display: block;

  }


  .content-page-grid,
  .location-page-grid {

    grid-template-columns:
      1fr;

  }


  .content-page-image {

    min-height: 520px;

  }


  .content-page-copy {

    padding:
      70px
      7%;

  }


  .location-page-content {

    padding:
      70px
      7%;

  }


  .location-page-image {

    min-height: 500px;

  }

}


/* ============================================================
   MOBILE
============================================================ */

@media (
  max-width: 650px
) {

  :root {

    --header-height: 68px;

  }


  body {

    font-size: 17px;

  }


  /* HEADER */

  .header-inner {

    width:
      calc(100% - 30px);

    height:
      var(--header-height);

    gap: 10px;

  }


  .header-text-logo strong {

    font-size: 21px;

  }


  .header-text-logo span {

    margin-top: 5px;

    font-size: 6.5px;

    letter-spacing: 4px;

  }


  .header-brand img {

    max-width: 130px;

    max-height: 43px;

  }


  .header-back {

    width: 35px;

  }


  .header-back svg {

    width: 27px;

  }


  .mobile-menu {

    max-height:
      calc(
        100svh -
        var(--header-height)
      );

    overflow-y: auto;

    padding:
      10px
      20px
      28px;

  }


  .mobile-menu nav button {

    font-size: 20px;

  }


  /* INICIO */

  .home-hero {

    min-height:
      calc(
        100svh -
        var(--header-height)
      );

  }


  .home-hero-content {

    width:
      calc(100% - 34px);

    padding:
      50px
      0
      60px;

  }


  .hero-eyebrow {

    margin-bottom: 22px;

    font-size: 9px;

    letter-spacing: 3px;

  }


  .home-hero h1 {

    font-size:
      clamp(
        56px,
        18vw,
        78px
      );

    letter-spacing: -2px;

  }


  .hero-subtitle {

    font-size: 8px;

    letter-spacing: 7px;

  }


  .home-hero h2 {

    font-size:
      clamp(
        28px,
        8vw,
        36px
      );

  }


  .home-hero p {

    font-size: 16px;

  }


  .hero-actions {

    flex-direction: column;

    align-items: center;

  }


  .hero-actions > * {

    width: min(
      100%,
      320px
    );

  }


  .primary-button,
  .secondary-button,
  .outline-button {

    min-height: 54px;

  }


  /* ============================
     NUESTRAS CARTAS
  ============================ */

  .cards-page-content {

    width:
      calc(100% - 30px);

    padding:
      35px
      0
      45px;

  }


  .cards-brand {

    min-height: 60px;

  }


  .cards-brand img {

    max-width: 160px;

    max-height: 60px;

  }


  .cards-text-logo strong {

    font-size: 32px;

  }


  .cards-text-logo span {

    font-size: 7px;

    letter-spacing: 5px;

  }


  .cards-heading {

    margin-top: 35px;

  }


  .cards-heading h1 {

    font-size: 43px;

  }


  .cards-heading p {

    font-size: 14px;

  }


  .cards-grid {

    margin-top: 30px;

    grid-template-columns:
      1fr;

    gap: 14px;

  }


  .menu-card {

    min-height: 205px;

  }


  .menu-card-content {

    padding: 20px;

  }


  .menu-card-copy h2 {

    font-size: 30px;

  }


  .menu-card-copy p {

    max-width: 250px;

    font-size: 12px;

  }


  .menu-card-arrow {

    width: 42px;

    height: 42px;

    font-size: 21px;

  }


  .cards-footer-text {

    padding-top: 35px;

  }


  /* ============================
     HERO CARTA
  ============================ */

  .menu-hero {

    height: 260px;

  }


  .menu-hero-content {

    width:
      calc(100% - 36px);

    padding-bottom: 30px;

  }


  .menu-hero-eyebrow {

    font-size: 8px;

  }


  .menu-hero-content h1 {

    font-size: 45px;

  }


  .menu-hero-content p {

    font-size: 14px;

  }


  /* BUSCADOR */

  .menu-search-wrapper {

    padding:
      17px
      14px
      13px;

  }


  .menu-search input {

    height: 50px;

    border-radius: 9px;

    font-size: 15px;

  }


  /* CATEGORIAS */

  .categories-scroll {

    padding:
      0
      5px;

  }


  .category-button {

    padding:
      16px
      15px
      14px;

    font-size: 15px;

    font-weight: 600;

  }


  .category-button::after {

    left: 15px;

    right: 15px;

  }


  /* CARTA */

  .menu-content {

    padding:
      31px
      13px
      20px;

  }


  .menu-category {

    scroll-margin-top:
      calc(
        var(--header-height) +
        68px
      );

    margin-bottom: 44px;

  }


  .menu-category-header {

    padding:
      0
      7px;

    margin-bottom: 14px;

  }


  .menu-category-header h3 {

    font-size: 26px;

  }


  .menu-category-header p {

    font-size: 12px;

  }


  /* PRODUCTOS */

  .menu-product {

    min-height: 132px;

    margin-bottom: 9px;

    padding: 10px;

    grid-template-columns:
      108px
      minmax(0,1fr);

    gap: 13px;

    border-radius: 10px;

  }


  .menu-product-image {

    width: 108px;

    height: 108px;

    border-radius: 7px;

  }


  .menu-product-content {

    padding:
      3px
      3px
      3px
      0;

  }


  .menu-product h4 {

    font-size: 17px;

    line-height: 1.18;

  }


  .menu-product-price {

    margin-top: 3px;

    font-size: 17px;

  }


  .menu-product p {

    margin-top: 5px;

    display:
      -webkit-box;

    overflow: hidden;

    -webkit-line-clamp: 3;

    -webkit-box-orient:
      vertical;

    font-size: 13px;

    line-height: 1.35;

  }


  .product-small-tag {

    font-size: 6.5px;

  }


  /* NOSOTROS */

  .content-page-image {

    min-height: 390px;

  }


  .content-page-copy {

    padding:
      55px
      22px
      70px;

  }


  .content-page-copy h1 {

    font-size: 44px;

  }


  .content-page-copy
  .content-lead {

    font-size: 19px;

  }


  .content-page-copy p {

    font-size: 16px;

  }


  /* GALERÍA */

  .standard-page-heading {

    padding:
      40px
      18px
      30px;

  }


  .standard-page-heading h1 {

    font-size: 45px;

  }


  .standard-page-heading p {

    font-size: 16px;

  }


  .gallery-grid {

    padding:
      0
      14px;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

    gap: 6px;

  }


  .gallery-item,
  .gallery-item:nth-child(n) {

    grid-column:
      span 1;

    grid-row:
      span 1;

  }


  .gallery-item:nth-child(5n + 1) {

    grid-column:
      span 2;

  }


  .gallery-item-overlay {

    opacity: 1;

    padding: 15px;

  }


  .gallery-item-overlay strong {

    font-size: 17px;

  }


  /* UBICACIÓN */

  .location-page-content {

    padding:
      55px
      22px
      70px;

  }


  .location-page-content h1 {

    margin-bottom: 35px;

    font-size: 45px;

  }


  .location-info-block p,
  .location-info-block > a {

    font-size: 17px;

  }


  .location-actions {

    width: 100%;

    flex-direction: column;

  }


  .location-actions > * {

    width: 100%;

  }


  .location-page-image {

    min-height: 390px;

  }


  /* WHATSAPP */

  .floating-whatsapp {

    right: 15px;

    bottom: 15px;

    width: 55px;

    height: 55px;

  }


  .floating-whatsapp svg {

    width: 31px;

    height: 31px;

  }


  /* DETALLE */

  .product-detail-header {

    height: 68px;

    padding:
      0
      13px;

  }


  .product-detail-scroll {

    width: 100%;

    padding:
      22px
      0
      60px;

  }


  .product-detail-image {

    width:
      calc(100% - 28px);

    max-width: 520px;

  }


  .product-detail-info {

    padding:
      28px
      18px;

  }


  .detail-category {

    font-size: 10px;

  }


  .product-detail-info h1 {

    font-size: 31px;

  }


  .detail-price {

    font-size: 21px;

  }


  .product-detail-info p {

    margin-top: 17px;

    font-size: 16px;

  }


  .detail-bottom {

    flex-direction: column;

    align-items: stretch;

  }


  .detail-tag {

    align-self: flex-start;

  }


  .detail-consult-button {

    width: 100%;

    margin-left: 0;

    min-height: 53px;

  }

}


/* ============================================================
   MÓVILES PEQUEÑOS
============================================================ */

@media (
  max-width: 390px
) {

  .menu-card {

    min-height: 190px;

  }


  .menu-product {

    grid-template-columns:
      94px
      minmax(0,1fr);

  }


  .menu-product-image {

    width: 94px;

    height: 94px;

  }


  .menu-product h4 {

    font-size: 16px;

  }


  .menu-product-price {

    font-size: 16px;

  }


  .menu-product p {

    font-size: 12px;

    -webkit-line-clamp: 2;

  }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (
  prefers-reduced-motion: reduce
) {

  *,
  *::before,
  *::after {

    scroll-behavior:
      auto !important;

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;

  }

}