/* Mesero Eats on mesero-tpv.es (2026-10-27): the night kitchen of the Eats lane's «B» design, in the site's own type.
 * Used by /mesero-eats, /en/mesero-eats and the homes' Eats section, on top of home.css (and product.css).
 * A heat lamp over the pass, a steel rail with cream tickets swaying, the «LISTO» stamp, the ember 0 %. Every ticket and
 * order is made up and labelled so. Nothing moves under reduced motion. */
.eats-night{position:relative;isolation:isolate;overflow:hidden;background:#0e0c0b;color:var(--on-ink)}
.eats-lamp{position:absolute;z-index:-1;left:50%;top:-300px;width:1500px;height:900px;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(255,122,69,.30),rgba(255,122,69,.08) 45%,transparent 70%);pointer-events:none}
.eats-night em{font-style:normal;color:#ff8a5c;text-shadow:0 0 40px rgba(255,122,69,.42)}
.eats-night .kicker,.eats-night .eyebrow{color:var(--coral-soft)}

/* The pass: a steel rail, cream tickets hanging from it, the line moving slowly to the right. Two identical halves loop. */
.eats-pass{position:relative;height:236px}
.eats-rail{position:absolute;left:0;right:0;top:20px;height:10px;background:linear-gradient(#8c8580,#3a3533 60%,#1b1816);box-shadow:0 2px 0 rgba(255,255,255,.08),0 12px 30px rgba(0,0,0,.5)}
.eats-track{position:absolute;top:24px;left:0;display:flex;gap:26px;width:max-content;margin:0;padding:0;list-style:none;animation:eats-arrive 46s linear infinite}
.eats-tk{width:188px;padding:22px 14px 16px;background:#fbf6ee;color:#2a2420;font:500 11px/1.6 ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;position:relative;transform-origin:50% 0;animation:eats-sway 5s ease-in-out infinite;box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 60px rgba(255,122,69,.18)}
.eats-tk:nth-child(2n){animation-delay:-1.7s}
.eats-tk:nth-child(3n){animation-delay:-3.1s}
.eats-tk::before{content:"";position:absolute;left:50%;top:-6px;width:34px;height:14px;margin-left:-17px;border-radius:3px;background:linear-gradient(#c9c2bc,#77706b)}
.eats-tk b{display:block;font-size:12px;letter-spacing:.06em}
.eats-tk hr{border:0;border-top:1.5px dashed #bfb6aa;margin:7px 0}
.eats-tk .r{display:flex;justify-content:space-between;gap:10px}
.eats-ok{display:inline-block;margin-top:6px;padding:1px 7px;border:2px solid #c24a21;color:#c24a21;border-radius:5px;font-weight:700;letter-spacing:.04em;transform:rotate(-6deg)}
.eats-ex{position:absolute;right:max(24px,calc((100vw - var(--wrap)) / 2));bottom:8px;margin:0;color:#a0958b;font-size:.8rem;font-weight:600}
@keyframes eats-arrive{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes eats-sway{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}

/* The homes' section */
.eats-home{padding:0 0 clamp(64px,6.7vw,96px)}
.eats-home-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5.2vw,88px);align-items:start;margin-top:20px}
.eats-home h2{font-size:clamp(2.1rem,1.3rem + 2.4vw,3.4rem);line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
.eats-home .lead{margin-top:18px;color:var(--on-ink-2);font-size:1.075rem;line-height:1.65;max-width:34rem}
.eats-home .feature-links{margin-top:26px}
.eats-night .text-link{color:var(--coral-soft)}
.eats-micro{margin-top:30px;color:#958b81;font-size:.88rem;font-weight:600}

/* 0 % */
.eats-zero{display:flex;flex-direction:column;gap:6px}
.eats-zero-num{margin:0;font:700 clamp(5.5rem,3rem + 8vw,9.5rem)/.82 var(--display);letter-spacing:-.06em;color:var(--on-ink);text-shadow:0 0 80px rgba(255,122,69,.35)}
.eats-zero-num em{font-size:.5em;letter-spacing:-.02em}
.eats-zero-note{margin:10px 0 0;max-width:30rem;color:var(--on-ink-2);font-size:1rem;line-height:1.55}
.eats-feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:26px 0 0;padding:0;list-style:none}
.eats-feats li{padding:20px;border-radius:20px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.eats-feats strong{display:block;font:700 1.02rem/1.3 var(--display);margin-bottom:6px;color:var(--on-ink)}
.eats-feats span{color:var(--on-ink-2);font-size:.92rem;line-height:1.5}

/* The product page's hero: the pass on top, the copy centred under the lamp */
.eats-hero{padding:96px 0 clamp(64px,6vw,90px)}
.eats-hero .eats-pass{margin-top:6px}
.eats-hero-copy{position:relative;max-width:62rem;text-align:center}
.eats-hero-copy .eyebrow{justify-content:center}
.eats-hero-copy .eyebrow::before{display:none}
.eats-hero-copy h1{font-size:clamp(2.7rem,1.4rem + 5vw,5.6rem);line-height:.96;letter-spacing:-.045em;text-wrap:balance}
.eats-hero-copy .hero-lead{max-width:44rem;margin:24px auto 0;font-size:1.13rem}
.eats-hero-copy .hero-actions{justify-content:center;margin-top:32px}
.eats-hero-copy .hero-meta{margin-top:20px}

/* Sections on paper */
.eats-sec{padding:clamp(64px,6.7vw,104px) 0}
.eats-sec--alt{background:var(--paper-2)}
.eats-sec h2{font-size:clamp(1.95rem,1.3rem + 1.9vw,3rem);line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
.eats-sec .sub{margin-top:16px;max-width:42rem;color:var(--text-2);font-size:1.075rem;line-height:1.65}
.eats-sec em{font-style:normal;color:var(--coral-ink)}

/* The restaurant's four steps */
.eats-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:44px 0 0;padding:0;list-style:none;counter-reset:eats-step}
.eats-steps li{position:relative;padding:24px 22px 26px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px var(--line),0 18px 36px -28px rgba(21,22,28,.4)}
.eats-steps li::before{counter-increment:eats-step;content:counter(eats-step);display:grid;place-items:center;width:38px;height:38px;margin-bottom:16px;border-radius:12px;background:rgba(255,97,82,.12);color:var(--coral-ink);font:800 1rem/1 var(--display)}
.eats-steps strong{display:block;font:700 1.15rem/1.25 var(--display);margin-bottom:8px}
.eats-steps span{color:var(--text-2);font-size:.95rem;line-height:1.55}

/* What the guest sees: three phones drawn in code (made-up venue and order) */
.eats-walk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:52px}
.eats-wk{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.eats-wk h3{margin:0;font:700 1.25rem/1.25 var(--display)}
.eats-wk p{margin:0;max-width:19rem;color:var(--text-2);font-size:.98rem;line-height:1.55}
.eats-ph{width:250px;height:500px;border-radius:40px;background:#0f0d0c;padding:9px;box-shadow:0 30px 60px -16px rgba(23,20,18,.35)}
.eats-sc{position:relative;width:100%;height:100%;overflow:hidden;border-radius:32px;background:#f8f5f0;color:#171412;font:500 12px/1.45 var(--body);text-align:left}
.eats-sc-hero{height:140px;padding:16px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;background:radial-gradient(120% 90% at 100% 0%,rgba(217,87,43,.5),transparent 55%),linear-gradient(160deg,#2c221d,#1a1411)}
.eats-sc-hero small{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.eats-sc-t{font:700 22px/1 var(--display);letter-spacing:-.02em}
.eats-dish{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid #e9e3da}
.eats-dish b{display:block;font-size:12px}
.eats-dish span{color:#5b544c;font-size:11px}
.eats-cnt{min-width:24px;height:24px;border-radius:999px;background:#171412;color:#fff;font-weight:800;font-size:11px;display:grid;place-items:center}
.eats-bar{position:absolute;left:10px;right:10px;bottom:12px;height:42px;border-radius:13px;background:#171412;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px}
.eats-top{padding:16px 14px 12px;border-bottom:1px solid #e9e3da;font:700 18px/1.2 var(--display)}
.eats-cardm{margin:12px 10px;padding:12px;border-radius:16px;background:#fff;box-shadow:0 4px 14px rgba(23,20,18,.06);font-size:11.5px}
.eats-sum{display:flex;justify-content:space-between;color:#5b544c;padding:3px 0}
.eats-tot{display:flex;justify-content:space-between;font-weight:800;font-size:13px;border-top:1px solid #e9e3da;margin-top:6px;padding-top:8px}
.eats-ready{display:flex;flex-direction:column;align-items:center;gap:8px;padding:56px 18px 0;text-align:center}
.eats-tick{width:64px;height:64px;border-radius:50%;background:#e6f2ea;color:#22603c;display:grid;place-items:center;box-shadow:0 0 0 10px rgba(46,125,79,.08)}
.eats-ready strong{font:700 22px/1.1 var(--display);letter-spacing:-.02em}
.eats-ready span{color:#5b544c}
.eats-example{margin-top:22px;color:var(--text-3);font-size:.84rem;text-align:center}

/* You decide: the controls */
.eats-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:40px 0 0;padding:0;list-style:none}
.eats-controls li{padding:22px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--line),0 16px 32px -26px rgba(21,22,28,.35)}
.eats-controls strong{display:block;font:700 1.08rem/1.3 var(--display);margin-bottom:6px}
.eats-controls span{color:var(--text-2);font-size:.94rem;line-height:1.55}

/* Money and invoices, on the night */
.eats-band{padding:clamp(72px,7vw,112px) 0}
.eats-band-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,5vw,72px);align-items:center}
.eats-band h2{font-size:clamp(1.95rem,1.3rem + 1.9vw,3rem);line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
.eats-band .sub{margin-top:16px;color:var(--on-ink-2);font-size:1.05rem;line-height:1.65}

@media (prefers-reduced-motion:reduce){.eats-track,.eats-tk{animation:none}}
@media (max-width:959.98px){
  .eats-home-grid,.eats-band-grid{grid-template-columns:1fr}
  .eats-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .eats-controls{grid-template-columns:repeat(2,minmax(0,1fr))}
  .eats-walk{grid-template-columns:1fr;gap:44px}
}
@media (max-width:679.98px){
  .eats-pass{height:196px}
  .eats-rail{top:14px;height:8px}
  .eats-track{top:17px;gap:18px;animation-duration:34s}
  .eats-tk{width:150px;padding:18px 11px 12px;font-size:9.5px}
  .eats-tk b{font-size:10px}
  .eats-hero{padding-top:84px}
  .eats-feats,.eats-steps,.eats-controls{grid-template-columns:1fr}
  .eats-ex{right:16px}
}