:root{
  --black: #0A0A0A;
  --black-soft: #151212;
  --card: #1a1616;
  --red: #E31E24;
  --red-deep: #a3151a;
  --white: #FFFFFF;
  --gold: #FCD116;
  --muted: #b8aeae;
  --radius: 14px;
  --banner-h: 0px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:var(--black);
  color:var(--white);
  font-family:'Inter', sans-serif;
  line-height:1.6;
  overflow-x:hidden;
  padding-top:var(--banner-h);
}

img,video{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

ul{ list-style:none; }

.font-display{ font-family:'Anton', sans-serif; text-transform:uppercase; letter-spacing:1px; }
.font-script{ font-family:'Caveat', cursive; }

.container{ width:100%; max-width:1180px; margin:0 auto; padding:0 20px; }

.eyebrow{
  font-size:.75rem;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:600;
  margin-bottom:10px;
  display:block;
}

.section-title{
  font-size:clamp(2rem, 6vw, 3.2rem);
  line-height:1.05;
  margin-bottom:14px;
}

.section-sub{
  color:var(--muted);
  max-width:560px;
  margin-bottom:40px;
  font-size:1rem;
}

section{ padding:80px 0; position:relative; }

/* ---------- Reveal on scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:16px 30px;
  border-radius:100px;
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.5px;
  text-transform:uppercase;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }

.btn-primary{
  background:var(--red);
  color:var(--white);
  box-shadow:0 8px 24px rgba(227,30,36,.35);
}
.btn-primary:hover{ background:#ff2229; box-shadow:0 10px 30px rgba(227,30,36,.5); transform:translateY(-2px); }

.btn-outline{
  background:transparent;
  color:var(--white);
  border-color:rgba(255,255,255,.4);
}
.btn-outline:hover{ border-color:var(--white); background:rgba(255,255,255,.06); transform:translateY(-2px); }

.btn-gold{
  background:var(--gold);
  color:var(--black);
  box-shadow:0 8px 24px rgba(252,209,22,.3);
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(252,209,22,.45); }

/* ---------- Mockup notice (fixed) ---------- */
.mockup-banner{
  position:fixed;
  top:0; left:0; right:0;
  z-index:80;
  height:var(--banner-h);
  display:flex; align-items:center; justify-content:center;
  background:var(--red);
  color:var(--white);
  text-align:center;
  font-size:.72rem;
  padding:0 14px;
  letter-spacing:.3px;
}

/* ---------- Floating pill navigation ---------- */
.floating-nav{
  position:fixed;
  top:calc(var(--banner-h) + 14px);
  left:50%;
  transform:translateX(-50%);
  z-index:70;
  display:flex;
  align-items:center;
  height:52px;
  padding:0 8px 0 16px;
  border-radius:100px;
  background:rgba(10,10,10,.72);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 8px 30px rgba(0,0,0,.4);
  overflow:hidden;
  max-width:calc(100vw - 24px);
  transition:width .45s cubic-bezier(.34,1.56,.64,1), padding .35s ease, border-radius .3s ease;
}

.floating-nav .nav-logo{
  font-size:1.25rem;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  padding-right:10px;
  transition:opacity .25s ease, transform .25s ease;
}

.floating-nav .nav-links{
  display:flex;
  align-items:center;
  gap:2px;
  white-space:nowrap;
  overflow-x:auto;
  scrollbar-width:none;
  transition:opacity .2s ease;
}
.floating-nav .nav-links::-webkit-scrollbar{ display:none; }

.floating-nav .nav-links a{
  font-size:.8rem;
  font-weight:600;
  color:#d8d0d0;
  padding:9px 12px;
  border-radius:100px;
  transition:color .2s ease, background .2s ease;
  flex-shrink:0;
}
.floating-nav .nav-links a:hover{ color:#fff; background:rgba(255,255,255,.08); }

.floating-nav .nav-links a.nav-cta{
  background:var(--red);
  color:#fff;
  margin-left:6px;
  padding:9px 16px;
}
.floating-nav .nav-links a.nav-cta:hover{ background:#ff2229; }

.floating-nav .nav-collapsed-icon{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transform:scale(.7);
  pointer-events:none;
  transition:opacity .25s ease .12s, transform .25s ease .12s;
  font-size:1.2rem;
}

.floating-nav.is-collapsed{
  width:52px;
  padding:0;
  border-radius:50%;
  cursor:pointer;
}
.floating-nav.is-collapsed .nav-logo,
.floating-nav.is-collapsed .nav-links{
  opacity:0;
  pointer-events:none;
}
.floating-nav.is-collapsed .nav-collapsed-icon{
  opacity:1;
  transform:scale(1);
  pointer-events:auto;
}

@media(max-width:640px){
  .floating-nav .nav-links a{ font-size:.72rem; padding:8px 9px; }
  .floating-nav .nav-links a.nav-cta{ padding:8px 12px; }
}

/* ---------- Floating WhatsApp button ---------- */
.floating-wa{
  position:fixed;
  bottom:22px; right:22px;
  z-index:60;
  width:60px; height:60px;
  border-radius:50%;
  background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  animation:pulse-wa 2.4s ease-in-out infinite;
}
.floating-wa svg{ width:30px; height:30px; }
@keyframes pulse-wa{
  0%,100%{ box-shadow:0 10px 30px rgba(37,211,102,.35); }
  50%{ box-shadow:0 10px 40px rgba(37,211,102,.65); }
}

/* ================= HERO ================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  padding-top:70px;
  background:
    radial-gradient(circle at 20% 20%, rgba(227,30,36,.25), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(252,209,22,.12), transparent 50%),
    var(--black);
}

#hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.92;
  z-index:0;
}
#hero-video.video-failed{ display:none; }

.hero::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,.22) 0%, rgba(10,10,10,.15) 40%, rgba(10,10,10,.4) 75%, rgba(10,10,10,.75) 100%);
  z-index:1;
}

.hero-content{ 
  position:relative; 
  z-index:2; 
  padding:0 20px; 
  max-width:820px; 
}

/* Halo oscuro localizado detrás del texto, para contraste sin oscurecer todo el video */
.hero-content::before{
  content:'';
  position:absolute;
  inset:-30px -24px;
  z-index:-1;
  border-radius:50px;
  /*background:radial-gradient(ellipse at center, rgba(0,0,0,.62) 0%, rgba(0,0,0,.32) 55%, transparent 78%);*/
}

.hero-wordmark{
  font-size:clamp(2.6rem, 10vw, 6.2rem);
  line-height:.95;
  color:var(--white);
  text-shadow:0 0 40px rgba(227,30,36,.35);
}
.hero-wordmark .accent{ color:var(--red); }

.hero-sub{
  font-size:.85rem;
  letter-spacing:6px;
  color:var(--muted);
  margin-top:14px;
  text-transform:uppercase;
}

.hero-tagline{
  font-family:'Caveat', cursive;
  font-size:clamp(2.2rem, 7vw, 3.6rem);
  color:var(--gold);
  margin:22px 0 34px;
  text-shadow:0 0 18px rgba(252,209,22,.55), 0 0 40px rgba(252,209,22,.25);
  animation:flicker 4.5s infinite alternate;
}
@keyframes flicker{
  0%,100%{ opacity:1; }
  45%{ opacity:1; }
  46%{ opacity:.75; }
  47%{ opacity:1; }
  72%{ opacity:1; }
  73%{ opacity:.8; }
  74%{ opacity:1; }
}

.hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  z-index:2; color:var(--muted); font-size:1.4rem;
  animation:bob 2s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,8px);} }

/* ================= SOBRE LA MARCA ================= */
.brand{
  text-align:center;
  position:relative;
  background:
    linear-gradient(180deg, rgba(10,10,10,.88) 0%, rgba(10,10,10,.93) 100%),
    url('../assets/images/ambiente.avif') center 30% / cover no-repeat;
}

/* Bloque negro con la imagen a un lado y el texto al otro */
.brand-wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:38px;
  max-width:1000px;
  margin:0 auto 50px;
  padding:36px;
  background:rgba(0,0,0,.7);
  border-radius:20px;
}
.brand-wrap img{
  width:min(100%, 420px);
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:14px;
  flex-shrink:0;
}
.brand-text{
  flex:1;
  min-width:260px;
  text-align:left;
}
.brand-heading{
  font-size:clamp(1.6rem, 3.6vw, 2.4rem);
  line-height:1.1;
  margin-bottom:14px;
}
.brand-text .brand-copy{ margin:0; text-align:left; }

/* Resplandor dorado al pasar el mouse (antes era #hoover, que estaba
   repetido en dos elementos; como clase se puede reutilizar) */
.hoover-glow{
  color:#FFD700;
  transition-duration:1.2s;
}
.hoover-glow:hover{
  color:#fff;
  text-shadow:
      0 0 1px  #FFD700,
      0 0 3px  #FFD700,
      0 0 5px  #FFD700,
      0 0 10px #FFD700,
      0 0 20px #FFD700,
      0 0 30px #FFD700,
      0 0 40px #FFD700,
      0 0 50px #FFD700;
  transition-duration:.3s;
}

@media(max-width:720px){
  .brand-wrap{ padding:24px; gap:24px; }
  .brand-text{ text-align:center; }
  .brand-text .brand-copy{ text-align:center; }
}

.brand-copy {
  max-width:680px;
  margin:0 auto;
  font-size:clamp(1.05rem, 2.4vw, 1.35rem);
  color:#e9e2e2;
}

.brand-copy strong{ color:var(--red); }
.brand-script{
  font-family:'Caveat', cursive;
  color:var(--gold);
  font-size:clamp(1.8rem, 4vw, 2.4rem);
  display:block;
  margin-top:18px;
}

#service1 {
  margin-top: 100px;
}

.pepe {
  margin-top: 100px;
}

.brand-pending{
  max-width:640px;
  margin:22px auto 0;
  font-size:.85rem;
  font-style:italic;
  line-height:1.6;
  color:var(--muted);
  background:rgba(255,255,255,.04);
  border:1px dashed rgba(255,255,255,.18);
  border-radius:10px;
  padding:14px 20px;
  text-align:left;
}

/* ================= MENU ================= */
.menu-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:26px;
}
@media(min-width:640px){ .menu-grid{ grid-template-columns:1fr 1fr; } }
@media(min-width:1024px){ .menu-grid{ grid-template-columns:repeat(4,1fr); } }

.menu-card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .25s ease, border-color .25s ease;
}
.menu-card:hover{ transform:translateY(-6px); border-color:rgba(227,30,36,.4); }

.menu-card-img{
  aspect-ratio:1/1;
  width:100%;
  object-fit:cover;
  background:#120f0f;
}

/* Encuadre de las fotos del menú de inicio */
.menu-card[href*="menu/burger"] .menu-card-img{ object-position:50% 70%; }
.menu-card[href*="menu/otros"] .menu-card-img{ object-position:50% 85%; }
.menu-card[href*="menu/ninos"] .menu-card-img{ object-position:50% 75%; }

.menu-card[href*="menu/salchipapas"] .menu-card-img{
  object-fit:contain;
  background:var(--black);
}


/* Placeholder de imagen (solo se usa cuando no hay foto real, ej. Nachos) */
.img-placeholder{
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:3rem;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, #241d1d, #120f0f);
  color:rgba(255,255,255,.5);
  position:relative;
}
.img-placeholder .ph-label{
  position:absolute;
  bottom:8px; left:8px; right:8px;
  font-size:.65rem;
  letter-spacing:1px;
  text-transform:uppercase;
  color:rgba(255,255,255,.4);
  font-family:'Inter',sans-serif;
}

.menu-card-body{ padding:20px; flex:1; display:flex; flex-direction:column; }
.menu-card-body h3{ font-family:'Anton', sans-serif; font-size:1.25rem; letter-spacing:.5px; margin-bottom:8px; }
.menu-card-body p{ color:var(--muted); font-size:.9rem; flex:1; }
.menu-price{
  margin-top:14px;
  display:flex; align-items:center; justify-content:space-between;
}
.menu-price .price{ color:var(--gold); font-weight:700; font-size:1.1rem; }
.flavor-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.flavor-tags span{
  font-size:.68rem;
  padding:4px 10px;
  border-radius:100px;
  background:rgba(227,30,36,.15);
  color:#ff9a9d;
  border:1px solid rgba(227,30,36,.3);
  letter-spacing:.3px;
}
.flavor-tags span.real{
  background:rgba(252,209,22,.18);
  color:var(--gold);
  border-color:rgba(252,209,22,.4);
}

/* ================= PROMO ================= */
.promo{
  background:var(--black-soft);
}

.promo-wrap{
  width: 760px; 
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
@media (min-width: 769px){
  .promo-media{ aspect-ratio: 21/9; }
}

.promo-media{
  position:relative;
  aspect-ratio:13/9;
  width:100%;
  overflow:hidden;
}
.promo-media img{
  width:100%; height:100%; object-fit:cover; object-position:center 100%;
}
.promo-media::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.88) 5%, rgba(0,0,0,.25) 45%, transparent 75%);
}
.promo-overlay{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:26px 24px;
  z-index:2;
}
.promo-badge{
  display:inline-block;
  background:var(--gold);
  color:var(--black);
  font-weight:800;
  font-size:.68rem;
  letter-spacing:2px;
  text-transform:uppercase;
  padding:7px 16px;
  border-radius:100px;
  margin-bottom:14px;
}
.promo-overlay h2{
  font-family:'Anton', sans-serif;
  font-size:clamp(1.5rem, 5vw, 2.6rem);
  line-height:1.12;
  max-width:640px;
  text-shadow:0 4px 20px rgba(0,0,0,.6);
}
.promo-overlay h2 .hl{ color:var(--red); }

.promo-footer{
  background:var(--card);
  padding:22px 24px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.promo-note{ color:var(--muted); font-size:.82rem; max-width:480px; }

/* ================= GALERÍA ================= */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-auto-rows:1fr;
  gap:6px;
}
@media(min-width:768px){ .gallery-grid{ grid-template-columns:repeat(3,1fr); } }

.gallery-item{
  aspect-ratio:1/1;
  position:relative;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, #241d1d, #120f0f);
}
.gallery-item.featured{
  grid-row:span 2;
  aspect-ratio:auto;
}
.gallery-item img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}
.gallery-item:hover img{ transform:scale(1.06); }
.gallery-item::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.75), transparent 55%);
  opacity:0; transition:opacity .25s ease;
  z-index:1;
}
.gallery-item .g-label{
  position:absolute; bottom:10px; left:10px; right:10px;
  font-size:.7rem; letter-spacing:.5px;
  color:var(--white);
  opacity:0; transform:translateY(6px);
  transition:opacity .25s ease, transform .25s ease;
  font-family:'Inter',sans-serif;
  z-index:2;
}
.gallery-item:hover::before{ opacity:1; }
.gallery-item:hover .g-label{ opacity:1; transform:translateY(0); }

/* ================= UBICACIÓN ================= */
.location-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
}
@media(min-width:860px){ .location-grid{ grid-template-columns:1fr 1fr; } }

.location-card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  overflow:hidden;
}
.location-card iframe{ width:100%; height:230px; border:0; filter:grayscale(.3) contrast(1.1); }
.location-body{ padding:22px; }
.location-body h3{ font-family:'Anton', sans-serif; font-size:1.2rem; margin-bottom:6px; letter-spacing:.5px; }
.location-body .addr{ color:var(--muted); font-size:.9rem; margin-bottom:10px; }
.location-body .hours{
  display:flex; gap:8px; align-items:flex-start;
  font-size:.85rem; color:#d8cfcf; margin-bottom:18px;
}
.location-body .hours .tag{
  font-size:.6rem; text-transform:uppercase; letter-spacing:1px;
  background:rgba(252,209,22,.15); color:var(--gold);
  padding:2px 8px; border-radius:100px; white-space:nowrap;
}
.location-body .hours-list{
  list-style:none; margin:0 0 18px; padding:0;
  font-size:.83rem; color:#d8cfcf;
}
.location-body .hours-list li{
  display:flex; justify-content:space-between; gap:12px;
  padding:4px 0; border-bottom:1px solid rgba(255,255,255,.06);
}
.location-body .hours-list li:last-child{ border-bottom:0; }
.location-body .hours-list span:first-child{ color:var(--muted); }
.location-body .hours-list span:last-child{ font-weight:600; color:#fff; }

/* ================= FOOTER ================= */
footer{
  padding:50px 0 30px;
  border-top:1px solid rgba(255,255,255,.08);
  text-align:center;
}
.footer-wordmark{ font-size:1.4rem; margin-bottom:18px; }
.footer-wordmark .accent{ color:var(--red); }
.social-row{ display:flex; justify-content:center; gap:16px; margin-bottom:24px; }
.social-row a{
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, transform .2s ease;
}
.social-row a:hover{ background:var(--red); transform:translateY(-3px); border-color:var(--red); }
.social-row svg{ width:18px; height:18px; }

.footer-fine{ color:var(--muted); font-size:.78rem; line-height:1.9; }
.footer-fine a{ color:var(--gold); }
.footer-fine a:hover{ text-decoration:underline; }

/* ================= LÍNEA DE TIEMPO ================= */
/* Tres filas de 7 columnas: hitos arriba (1,3,5,7), nodos en el
   medio, hitos abajo (2,4,6). En móvil se apila en orden cronológico
   usando --tl-order. */
.tl-wrap{
  position:relative;
  width:100%;
  max-width:1400px;
  margin:20px auto 40px;
  padding:0 20px;
}

.tl-row{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:10px;
}
.tl-row-top{ align-items:end; }
.tl-row-bottom{ align-items:start; }

.tl-row-nodes{
  position:relative;
  align-items:center;
  height:26px;
}

.tl-cell{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:0;
}
.tl-row-top .tl-cell{ justify-content:flex-end; }
.tl-row-bottom .tl-cell{ justify-content:flex-start; }

.tl-stem{
  width:1px;
  height:24px;
  background:rgba(255,255,255,.15);
}

.tl-line{
  position:absolute;
  left:0; right:0;
  top:50%;
  height:2px;
  transform:translateY(-50%);
  background:linear-gradient(90deg, transparent, var(--red) 8%, var(--gold) 50%, var(--red) 92%, transparent);
  box-shadow:0 0 6px 1px rgba(227,30,36,.55), 0 0 16px 3px rgba(252,209,22,.25);
  animation:tl-pulse 3.2s ease-in-out infinite;
  z-index:0;
}
@keyframes tl-pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.6; }
}

.tl-node-cell{ justify-content:center; position:relative; z-index:2; }

.tl-node{
  width:14px; height:14px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 8px 2px rgba(227,30,36,.8), 0 0 18px 6px rgba(227,30,36,.3);
}
.tl-node.tl-gold{
  background:var(--gold);
  box-shadow:0 0 8px 2px rgba(252,209,22,.8), 0 0 18px 6px rgba(252,209,22,.3);
}

.tl-content{ width:100%; max-width:190px; text-align:center; }

.tl-year{
  display:block;
  font-size:1.3rem;
  color:var(--gold);
  text-shadow:0 0 10px rgba(252,209,22,.5);
  margin-bottom:8px;
}

.tl-card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  padding:10px 12px 14px;
}

/* Marco de la foto: si la imagen falta, queda el fondo rayado */
.tl-img-placeholder{
  aspect-ratio:16/10;
  border-radius:8px;
  overflow:hidden;
  margin-bottom:10px;
  display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 10px, transparent 10px 20px),
    linear-gradient(160deg, #241d1d, #120f0f);
  color:rgba(255,255,255,.4);
  font-size:.62rem;
  letter-spacing:.5px;
  text-transform:uppercase;
  font-family:'Inter',sans-serif;
}

.imgconfig{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.tl-card h3{
  font-family:'Anton', sans-serif;
  font-size:.82rem;
  letter-spacing:.3px;
  text-transform:uppercase;
  margin-bottom:4px;
}

.tl-card p{
  font-size:.72rem;
  line-height:1.45;
  color:var(--muted);
}

/* Cascada de aparición: cada hito con un pequeño retraso */
.tl-cell[style*="--tl-order:1"]{ transition-delay:0s; }
.tl-cell[style*="--tl-order:2"]{ transition-delay:.08s; }
.tl-cell[style*="--tl-order:3"]{ transition-delay:.16s; }
.tl-cell[style*="--tl-order:4"]{ transition-delay:.24s; }
.tl-cell[style*="--tl-order:5"]{ transition-delay:.32s; }
.tl-cell[style*="--tl-order:6"]{ transition-delay:.4s; }
.tl-cell[style*="--tl-order:7"]{ transition-delay:.48s; }

/* ---------- Móvil: se apila en orden cronológico ---------- */
@media(max-width:900px){
  .tl-wrap{ display:flex; flex-direction:column; }
  .tl-row{ display:contents; }
  .tl-row-nodes{ display:none; }
  .tl-line{ display:none; }
  .tl-cell{ order:var(--tl-order, 99); }
  .tl-cell:not(.has-content){ display:none; }
  .tl-stem{ display:none; }
  .tl-content{
    width:100%;
    max-width:340px;
    margin:0 auto 22px;
    text-align:left;
    border-left:2px solid var(--red);
    padding-left:16px;
  }
  .tl-row-bottom .tl-content{ border-left-color:var(--gold); }
}

/* ================= TARJETA DE MENÚ COMO ENLACE ================= */
a.menu-card{ color:inherit; text-decoration:none; }
a.menu-card:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }

.menu-card-cta{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--red);
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:gap .2s ease, color .2s ease;
}
.menu-card:hover .menu-card-cta{ gap:11px; color:#ff4a4f; }

/* ---------- Precio "Desde $..." un poco más compacto ---------- */
.menu-price .price{ white-space:nowrap; }
@media(max-width:1023px){
  .menu-price{ flex-wrap:wrap; gap:8px; }
}