/* ==========================================================================
     Smash Bastards · web · con el sistema de diseño v1.1 (encargo 046)
     Colores, letras, medidas y botones salen de diseno/tokens.css y
     diseno/componentes.css (copias exactas de ~/Empresa/DISENO) con
     data-brand="smash" en <html>. Aquí solo va lo propio de esta web.
     Reglas: ni un hex a mano (siempre var(--...)), salvo las dos excepciones de abajo
     (verde de Grab y rgba de reserva para iPhones viejos); el texto rojo pequeño es
     --color-primary-text; el rojo de marca (--color-primary) solo en fondos,
     botones y titulares de 24 px o más; todo lo que se toca, 44 px o más.
     La sección de Taste of Europe lleva data-brand="taste": su propia piel.
     ========================================================================== */
  /* Color de terceros: el verde de Grab, con texto oscuro. No está en el sistema de diseño:
     SE PROPONE PARA DISENO v1.2 (tokens.css). Mientras tanto vive aquí, con nombre.
     Texto #0D0D0D sobre #00B14F = 6,86 (pasa AA); con texto blanco daba 2,84 (no pasaba). */
  :root{--color-grab:#00B14F;--color-on-grab:var(--color-brand-smash-ink)}
  *{margin:0;padding:0;box-sizing:border-box}
  html{cursor:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIzNCIgdmlld0JveD0iMCAwIDExMCAxNzAiPjxnIHRyYW5zZm9ybT0icm90YXRlKDggNTUgODUpIj48cG9seWdvbiBwb2ludHM9IjgwLDEyIDI0LDgwIDUwLDgwIDMyLDE1OCA4OCw4OCA2MCw4OCIgZmlsbD0iI0UxMkMxOSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjE0IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBvbHlnb24gcG9pbnRzPSI4MCwxMiAyNCw4MCA1MCw4MCAzMiwxNTggODgsODggNjAsODgiIGZpbGw9IiNFMTJDMTkiIHN0cm9rZT0iI0UxMkMxOSIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9nPjwvc3ZnPg==) 13 4, auto}
  a,button{cursor:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIzNCIgdmlld0JveD0iMCAwIDExMCAxNzAiPjxnIHRyYW5zZm9ybT0icm90YXRlKDggNTUgODUpIj48cG9seWdvbiBwb2ludHM9IjgwLDEyIDI0LDgwIDUwLDgwIDMyLDE1OCA4OCw4OCA2MCw4OCIgZmlsbD0iI0UxMkMxOSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjE0IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBvbHlnb24gcG9pbnRzPSI4MCwxMiAyNCw4MCA1MCw4MCAzMiwxNTggODgsODggNjAsODgiIGZpbGw9IiNFMTJDMTkiIHN0cm9rZT0iI0UxMkMxOSIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9nPjwvc3ZnPg==) 13 4, pointer}
  html{scroll-behavior:smooth;background:var(--color-bg);overflow-x:hidden}
  /* overflow-x:clip (y no hidden) para que la barra roja se quede pegada arriba al bajar: con hidden el
     <body> pasa a ser el que se desplaza y position:sticky no funciona (pasaba en la web publicada).
     Los navegadores sin clip (Safari < 16) se quedan con hidden, como estaba. */
  body{overflow-x:hidden;overflow-x:clip;max-width:100vw;overscroll-behavior-x:none;
    font-family:var(--font-body);font-size:var(--font-size-md);line-height:var(--line-height-normal);
    background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;text-size-adjust:100%}
  .anton{font-family:var(--font-display);text-transform:uppercase}
  a:focus-visible,button:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}

  /* BOTONES: los ui-btn del sistema, con la letra de titulares de Smash (Anton) */
  [data-brand="smash"] .ui-btn{font-family:var(--font-display);font-weight:var(--font-weight-display);
    font-size:var(--font-size-lg);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
  [data-brand="smash"] .ui-btn--sm{font-size:var(--font-size-md)}
  /* Sobre fondo rojo (barra, portada, carta, pedir) el rojo no se ve: el principal pasa a negro
     y el secundario a contorno blanco. Blanco sobre negro 19,4; blanco sobre rojo 4,59. */
  :is(nav,.hero,.grid-sec,.order) .ui-btn--primary{background:var(--color-bg);color:var(--color-text)}
  :is(nav,.hero,.grid-sec,.order) .ui-btn--primary:active{background:var(--color-surface-alt)}
  :is(nav,.hero,.grid-sec,.order) .ui-btn--secondary{background:transparent;color:var(--color-on-primary);
    border:2px solid var(--color-on-primary)}
  :is(nav,.hero,.grid-sec,.order) .ui-btn--secondary:active{background:var(--color-primary-pressed)}
  @media (hover:hover){
    :is(nav,.hero,.grid-sec,.order) .ui-btn--primary:hover{background:var(--color-surface-alt)}
    :is(nav,.hero,.grid-sec,.order) .ui-btn--secondary:hover{background:var(--color-on-primary);color:var(--color-primary)}
    .hero .ui-btn:hover,.order .ui-btn:hover,.topbar .ui-btn:hover{transform:scale(1.05)}
  }

  /* TOPBAR */
  .topbar{background:var(--color-bg);color:var(--color-text);display:flex;align-items:center;gap:var(--space-3);
    padding:var(--space-2) var(--space-gutter);font-family:var(--font-label);font-size:var(--font-size-sm);
    letter-spacing:var(--letter-spacing-label);text-transform:uppercase}
  .topbar .hot{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar .hot b{color:var(--color-primary-text)}

  /* NAV (barra roja fija): logo blanco sobre rojo, como manda la marca */
  nav{position:sticky;top:0;z-index:var(--z-header);display:flex;align-items:center;gap:var(--space-4);
    padding:var(--space-2) var(--space-gutter);background:var(--color-primary);color:var(--color-on-primary)}
  nav>a:first-child{order:1;display:inline-flex;align-items:center;min-height:var(--tap-min)}
  nav img{height:52px;width:auto;display:block}
  nav .links{order:2;margin-left:auto;gap:var(--space-1) var(--space-4)}
  nav .links a{color:var(--color-on-primary)}
  @media (hover:hover){nav .links a:hover{border-bottom-color:var(--color-bg)}}
  .navorder{order:3;flex:none;min-height:var(--tap-control);background:var(--color-grab);color:var(--color-on-grab)}
  .menu-btn{display:none;order:4;background:transparent;border:2px solid var(--color-on-primary);
    color:var(--color-on-primary);box-shadow:none;font-size:var(--font-size-xl);line-height:1}
  .menu-btn:active{background:var(--color-primary-pressed)}
  @media(max-width:760px){
    .menu-btn{display:inline-grid}
    .navorder{margin-left:auto;min-height:var(--tap-control)}
    nav img{height:44px}
    nav .links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--color-primary);
      flex-direction:column;align-items:stretch;gap:0;padding:var(--space-2) var(--space-gutter) var(--space-4);
      box-shadow:var(--shadow-3)}
    nav .links.open{display:flex}
    nav .links a{justify-content:flex-start;min-height:48px;font-size:var(--font-size-md);
      border-bottom:1px solid var(--color-primary-pressed)}
    nav .links .lang{align-self:flex-start;margin-top:var(--space-3)}
  }

  /* HERO */
  .hero{position:relative;background:var(--color-primary);color:var(--color-on-primary);text-align:center;
    padding:var(--space-12) var(--space-2) var(--space-16);overflow:hidden;
    min-height:78vh;display:flex;flex-direction:column;justify-content:center}
  .hero::before{content:"";position:absolute;inset:0;z-index:0;opacity:.35;
    background-image:radial-gradient(rgba(13,13,13,.25) 1.3px, transparent 1.3px);
    background-size:26px 26px}
  .fbolt{position:absolute;z-index:1;pointer-events:none;opacity:.4;
    animation:boltfloat 6s ease-in-out infinite}
  @keyframes boltfloat{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-22px) rotate(10deg)}}
  .fb1{top:12%;left:5%;width:54px}
  .fb2{top:8%;right:8%;width:38px;animation-duration:7.5s;animation-delay:.8s}
  .fb3{top:44%;left:12%;width:30px;animation-duration:5s;animation-delay:1.5s;opacity:.3}
  .fb4{top:58%;right:6%;width:64px;animation-duration:8s;animation-delay:.4s}
  .fb5{bottom:10%;left:20%;width:42px;animation-duration:6.5s;animation-delay:2s;opacity:.35}
  .fb6{bottom:16%;right:22%;width:28px;animation-duration:5.5s;animation-delay:1s;opacity:.3}
  .fb7{top:26%;left:30%;width:22px;animation-duration:4.6s;animation-delay:.3s;opacity:.25}
  .fb8{top:20%;right:28%;width:34px;animation-duration:7s;animation-delay:1.8s;opacity:.3}
  .fb9{top:72%;left:6%;width:88px;animation-duration:9s;animation-delay:.6s;opacity:.28}
  .fb10{top:38%;right:14%;width:20px;animation-duration:4.2s;animation-delay:2.4s;opacity:.25}
  .fb11{bottom:6%;right:40%;width:48px;animation-duration:7.8s;animation-delay:1.2s;opacity:.33}
  .fb12{top:5%;left:42%;width:26px;animation-duration:5.8s;animation-delay:.9s;opacity:.28}
  @media(max-width:760px){.fb3,.fb6,.fb7,.fb10,.fb12{display:none}.fbolt{opacity:.3}}
  .heromarq{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  .hmwrap{position:absolute;left:-30%;width:160%}
  .hmwrap.w1{top:4%;transform:rotate(-9deg)}
  .hmwrap.w2{top:36%;transform:rotate(9deg)}
  .hmwrap.w3{top:68%;transform:rotate(-9deg)}
  .hm{white-space:nowrap;font-family:var(--font-display);text-transform:uppercase;
    font-size:clamp(84px,18vw,240px);line-height:1;color:transparent;
    -webkit-text-stroke:2.5px rgba(13,13,13,.5)}
  .hm.l{animation:hscrollL 11s linear infinite}
  .hm.r{animation:hscrollR 13s linear infinite}
  .hmwrap.w3 .hm{animation-duration:9s}
  @keyframes hscrollL{to{transform:translateX(-50%)}}
  @keyframes hscrollR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
  .hero .hlogo{position:relative;z-index:2;width:min(50vw,340px);margin:0 auto var(--space-2);display:block}
  .hero h1{font-family:var(--font-label);font-weight:var(--font-weight-semibold);text-transform:uppercase;
    font-size:clamp(17px,2.6vw,28px);letter-spacing:.42em;line-height:1.4;position:relative;z-index:2;
    margin-top:var(--space-4)}
  .hero .heroburger{position:relative;z-index:2;display:block;margin:var(--space-6) auto calc(-1 * var(--space-2));
    width:min(48vw,340px);transform:rotate(-6deg);
    filter:drop-shadow(0 24px 30px rgba(13,13,13,.35));
    animation:heroburgerin 1s cubic-bezier(.2,1.2,.3,1) both .2s}
  @keyframes heroburgerin{from{opacity:0;transform:rotate(-6deg) translateY(40px) scale(.9)}
    to{opacity:1;transform:rotate(-6deg) translateY(0) scale(1)}}
  .hero .tag{position:relative;z-index:2;margin-top:var(--space-8);font-family:var(--font-label);
    font-size:clamp(13px,1.8vw,18px);letter-spacing:.3em;text-transform:uppercase}
  @media(max-width:400px){.hero .tag{letter-spacing:.2em}}   /* que "2 AM" no se quede solo en otra línea */
  .cta{position:relative;z-index:2;display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap}
  .hero .cta{margin-top:var(--space-6)}
  .cta .ui-btn{padding:0 var(--space-10);min-height:var(--tap-control)}
  /* Botones de Grab (entrega): verde de Grab con texto oscuro. Borde negro para que el botón se vea
     entero sobre el rojo (verde junto a rojo solo da 1,6; negro junto a rojo, 4,23) */
  .cta .btn-o.ui-btn{background:var(--color-grab);color:var(--color-on-grab);border:2px solid var(--color-brand-smash-ink)}
  .cta .btn-o.ui-btn:active{filter:brightness(.92)}
  @media (hover:hover){.cta .btn-o.ui-btn:hover{background:var(--color-grab);color:var(--color-on-grab)}}
  .status{display:inline-flex;align-items:center;gap:var(--space-2);margin-top:var(--space-5);padding:var(--space-2) var(--space-4);
    border-radius:var(--radius-pill);background:rgba(13,13,13,.25);
    font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);color:var(--color-on-primary);position:relative;z-index:2}
  .status .dot{width:9px;height:9px;border-radius:50%;background:var(--color-ok-bright)}
  .status.closed .dot{background:var(--color-warn-bright)}
  .status.delivery .dot{background:var(--color-ok-bright)}
  .hero .ratings{position:relative;z-index:2;margin-top:var(--space-5)}

  .flinks{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2)}
  .flinks a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 var(--space-3)}
  .morelink{text-align:center;margin-top:var(--space-8)}
  .morelink .ui-btn{display:inline-flex;align-items:center;padding:0 var(--space-10);min-height:var(--tap-control);background:var(--color-bg);color:var(--color-text)}

  /* MARQUEE */
  .marquee{overflow:hidden;background:var(--color-bg);padding:var(--space-3) 0}
  .marquee .track{display:flex;white-space:nowrap;animation:scroll 20s linear infinite;
    font-family:var(--font-display);font-size:20px;letter-spacing:.1em;color:var(--color-text);text-transform:uppercase}
  @keyframes scroll{to{transform:translateX(-50%)}}
  .marquee span{padding:0 var(--space-5)}
  .marquee img{height:20px;vertical-align:-3px;margin:0 var(--space-1)}

  /* LED COUNTER */
  .ledwrap{text-align:center;padding:76px var(--space-3) 66px;background:var(--color-bg);color:var(--color-text)}
  .ledtitle{font-family:var(--font-display);font-size:clamp(20px,3.4vw,38px);
    text-transform:uppercase;letter-spacing:.05em;margin-bottom:38px}
  .led{display:flex;justify-content:center;gap:clamp(6px,1.6vw,16px);overflow-x:auto;padding:0 6px}
  .led svg{width:clamp(32px,7vw,64px);height:auto;flex:none}
  .led .on{fill:var(--color-primary)}
  .led .off{fill:var(--color-primary-soft)}
  .lednote{margin-top:var(--space-6);font-family:var(--font-label);font-size:var(--font-size-xs);letter-spacing:.28em;
    text-transform:uppercase;color:var(--color-text-muted)}

  /* SECTIONS */
  section{padding:var(--space-16) var(--space-gutter)}
  @media(min-width:761px){section{padding:calc(var(--space-10) * 2) var(--space-6)}}
  .kicker{font-family:var(--font-label);font-size:var(--font-size-sm);letter-spacing:.35em;color:var(--color-primary-text);
    text-transform:uppercase;text-align:center;margin-bottom:var(--space-6)}

  /* FULL-BLEED VIDEO */
  .bleed{padding:0}
  .bleed video{display:block;width:100%;height:min(72vh,620px);object-fit:cover}

  .food-preview{padding:var(--space-8) var(--space-gutter);background:var(--color-bg);text-align:center}
  .food-preview h2{font-family:var(--font-display);font-size:clamp(30px,6vw,64px);text-transform:uppercase;margin:0 0 var(--space-6)}
  .food-preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);max-width:950px;margin:0 auto var(--space-6)}
  .food-preview-grid a{display:flex;flex-direction:column;align-items:center;justify-content:space-between;min-width:0;min-height:210px;padding:var(--space-3);color:var(--color-text);text-decoration:none;border:1px solid var(--color-border);border-radius:var(--radius-lg)}
  .food-preview-grid img{width:100%;height:145px;object-fit:contain}
  .food-preview-grid span{font-family:var(--font-display);font-size:var(--font-size-md);text-transform:uppercase}
  .preview-menu{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap-control);padding:0 var(--space-5)}
  @media(max-width:600px){.food-preview-grid{grid-template-columns:1fr;max-width:340px}.food-preview-grid a{min-height:160px;flex-direction:row;text-align:left}.food-preview-grid img{width:42%;height:130px}.food-preview-grid span{flex:1}}

  /* BURGER GRID (rojo) */
  .grid-sec{background:var(--color-primary);color:var(--color-on-primary)}
  .grid-sec h2{font-family:var(--font-display);font-weight:var(--font-weight-display);font-size:clamp(44px,8vw,110px);text-transform:uppercase;
    text-align:center;line-height:.95;margin-bottom:50px}
  .grid-sec h2 img{height:.75em;vertical-align:-.05em;margin:0 var(--space-4)}
  .bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-8) var(--space-6);max-width:1150px;margin:0 auto}
  .bcard{text-align:center;position:relative;text-decoration:none;color:var(--color-on-primary);display:flex;flex-direction:column;align-items:center;scroll-margin-top:120px}
  .xp{position:relative;height:210px;width:100%;max-width:290px}
  .xp img{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);height:190px;width:auto;max-width:100%;object-fit:contain;
    transition:transform .38s cubic-bezier(.34,1.56,.64,1);
    filter:drop-shadow(0 14px 16px rgba(13,13,13,.28))}
  .bcard:hover .xp img{transform:translateX(-50%) scale(1.07) rotate(-2deg)}
  .xchip{position:absolute;z-index:3;background:var(--color-bg);color:var(--color-text);font-family:var(--font-label);
    font-weight:var(--font-weight-semibold);font-size:var(--font-size-xs);letter-spacing:.05em;text-transform:uppercase;padding:3px 11px;
    border-radius:var(--radius-pill);opacity:0;pointer-events:none;white-space:nowrap;box-shadow:var(--shadow-2);
    transition:opacity .3s,transform .3s}
  .xchip.l{left:-6px;transform:translateX(-14px)}
  .xchip.r{right:-6px;transform:translateX(14px)}
  .bcard:hover .xchip{opacity:1;transform:translateX(0)}
  .bcard h3{font-family:var(--font-display);font-weight:var(--font-weight-display);font-size:24px;text-transform:uppercase;margin-top:var(--space-3);line-height:1.05;min-height:52px;display:flex;align-items:flex-end;justify-content:center}
  .bcard .ing{font-size:var(--font-size-sm);color:var(--color-on-primary);margin:var(--space-2) 0 var(--space-3);line-height:1.5;min-height:4.5em;max-width:34ch}
  .badge{position:absolute;top:0;left:50%;transform:translateX(-50%) rotate(-4deg);background:var(--color-bg);
    color:var(--color-text);font-family:var(--font-label);font-weight:var(--font-weight-semibold);font-size:var(--font-size-xs);letter-spacing:.12em;
    padding:var(--space-1) var(--space-3);text-transform:uppercase;z-index:2}
  .bcard:target .xp img{animation:targetpop .8s ease}
  @keyframes targetpop{0%{transform:translateX(-50%) scale(1)}40%{transform:translateX(-50%) scale(1.16) rotate(-3deg)}100%{transform:translateX(-50%) scale(1)}}

  /* COMBOS: tarjetas ui-card sobre negro */
  .combos-sec{background:var(--color-bg);color:var(--color-text)}
  .combos-sec h2{font-family:var(--font-display);font-weight:var(--font-weight-display);font-size:clamp(44px,8vw,110px);
    text-transform:uppercase;text-align:center;line-height:.95}
  .combos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:var(--space-6);
    max-width:940px;margin:50px auto 0}
  .combo.ui-card{border:2px solid var(--color-border);padding:var(--space-8) var(--space-6);text-align:center;
    position:relative;transition:transform .2s,border-color .2s;text-decoration:none;color:var(--color-text);display:block}
  .combo:active{transform:scale(.99)}
  @media (hover:hover){.combo:hover{transform:rotate(-1deg) scale(1.02);border-color:var(--color-primary)}}
  .cbrush{display:inline-block;background:var(--color-primary);color:var(--color-on-primary);font-family:var(--font-display);
    font-size:26px;text-transform:uppercase;padding:6px 26px;transform:rotate(-2deg);letter-spacing:.05em}
  .cprice{font-family:var(--font-display);font-size:clamp(72px,10vw,120px);line-height:1;margin-top:var(--space-4)}
  .cprice small{font-size:.28em;color:var(--color-primary-text);vertical-align:.4em;margin-left:6px}
  .cwhat{font-family:var(--font-label);font-size:var(--font-size-sm);letter-spacing:.08em;
    text-transform:uppercase;line-height:2;margin-top:var(--space-4);color:var(--color-text-2)}
  .cname{font-family:var(--font-display);font-size:22px;text-transform:uppercase;margin-top:6px}
  .combo .cbtn{margin-top:var(--space-5)}
  @media (hover:hover){.combo:hover .cbtn{background:var(--color-primary-hover);transform:scale(1.06)}}
  .citems{display:flex;justify-content:center;align-items:flex-end;gap:var(--space-4);margin-top:var(--space-4)}
  .citem{text-align:center}
  .citem .e{font-size:42px;line-height:1;display:block}
  .citem .q{font-family:var(--font-display);font-size:var(--font-size-sm);margin-top:var(--space-1);color:var(--color-text)}
  .citem .q b{color:var(--color-primary-text)}

  /* ORDER (rojo) */
  .order{background:var(--color-primary);color:var(--color-on-primary);text-align:center}
  .order .anton{font-size:clamp(44px,9vw,120px);line-height:.92}
  .order .cta{margin-top:34px}
  .hours{display:inline-block;margin-top:var(--space-8);background:rgba(13,13,13,.22);
    border-radius:var(--radius-lg);padding:var(--space-5) var(--space-6);font-size:var(--font-size-md);line-height:1.9}
  .hours b{font-weight:var(--font-weight-black)}
  .hours a{color:var(--color-on-primary);font-weight:var(--font-weight-black);text-decoration:underline;text-underline-offset:3px;
    display:inline-flex;align-items:center;min-height:var(--tap-min)}

  /* ABOUT (sobre negro) */
  .about{max-width:800px;margin:0 auto}
  .about h2{font-family:var(--font-display);font-weight:var(--font-weight-display);font-size:clamp(38px,6vw,72px);text-transform:uppercase;
    text-align:center;margin-bottom:36px;line-height:.95}
  .about h2 em{font-style:normal;color:var(--color-primary)}
  .about .ap{font-size:var(--font-size-md);line-height:1.8;color:var(--color-text-2);margin-bottom:var(--space-5)}
  .about .ap b{color:var(--color-text)}
  .about .motto{font-family:var(--font-display);font-size:clamp(24px,3vw,34px);color:var(--color-text);
    text-align:center;text-transform:uppercase;line-height:1.35;margin-top:var(--space-8)}
  .about .motto em{font-style:normal;color:var(--color-primary)}

  /* RATINGS (fichas negras en la portada roja) */
  .ratings{display:flex;gap:var(--space-2);justify-content:center;flex-wrap:wrap;margin-top:var(--space-8)}
  .rate{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--tap-min);padding:0 var(--space-4);
    border-radius:var(--radius-pill);background:var(--color-bg);color:var(--color-text);
    font-size:var(--font-size-sm);font-weight:var(--font-weight-black);text-decoration:none}
  .rate .star{color:var(--color-primary-text)}
  .rate small{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-muted)}

  /* CROSS PROMO: Taste of Europe con su propia piel (data-brand="taste" en la sección) */
  .cross-sec{background:var(--color-bg);color:var(--color-text);text-align:center}
  .cross-sec .kicker{color:var(--color-primary-text);font-weight:var(--font-weight-black);font-size:var(--font-size-xs)}
  .cross-sec img{width:min(46vw,210px);margin:var(--space-1) auto var(--space-4);display:block}
  .cross-sec p{color:var(--color-text-muted);max-width:480px;margin:0 auto var(--space-6);line-height:1.7;font-size:var(--font-size-md)}
  [data-brand="taste"] .ui-btn{font-family:var(--font-body);font-weight:var(--font-weight-black);font-size:var(--font-size-sm);
    letter-spacing:.15em;text-transform:uppercase}

  /* WORK WITH US */
  .work{background:var(--color-bg);color:var(--color-text);text-align:center;position:relative;overflow:hidden;scroll-margin-top:70px}
  .work .anton{font-size:clamp(40px,7.5vw,100px);line-height:.95;position:relative;z-index:2}
  .work .anton em{font-style:normal;color:var(--color-primary)}
  .work .wp{max-width:560px;margin:var(--space-6) auto 0;color:var(--color-text-muted);font-size:var(--font-size-md);line-height:1.8;position:relative;z-index:2}
  .work .btn-wa{margin-top:28px;padding:0 var(--space-10);position:relative;z-index:2}

  /* STATEMENT */
  .statement{background:var(--color-bg);color:var(--color-text);text-align:center}
  .statement .anton{font-size:clamp(44px,9vw,130px);line-height:.95}
  .statement em{font-style:normal;color:var(--color-primary)}

  /* FOOTER */
  footer{background:var(--color-bg);color:var(--color-text-muted);text-align:center;padding:var(--space-10) var(--space-5);
    font-size:var(--font-size-sm);border-top:1px solid var(--color-border)}
  footer .flogo{width:180px;margin-bottom:var(--space-4)}
  footer .social{display:flex;gap:var(--space-4);justify-content:center;margin-bottom:var(--space-4)}
  footer .ig{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
    border-radius:50%;border:2px solid var(--color-primary);color:var(--color-primary);transition:all .2s}
  footer .ig:active{background:var(--color-primary);color:var(--color-on-primary)}
  @media (hover:hover){footer .ig:hover{background:var(--color-primary);color:var(--color-on-primary)}}
  footer a{color:var(--color-text);text-decoration:none;font-weight:var(--font-weight-bold)}
  footer .fp a{display:inline-flex;align-items:center;min-height:var(--tap-min)}
  footer .cross{color:var(--color-primary-text)}
  .bolt-sm{height:44px;width:auto}

  /* STICKY MOBILE BAR */
  .stickybar{display:none}
  @media(max-width:760px){
    body{padding-bottom:calc(var(--tap-control) + env(safe-area-inset-bottom,0px))}
    .stickybar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:var(--z-dock);box-shadow:var(--shadow-dock);
      background:var(--color-primary);padding-bottom:env(safe-area-inset-bottom)}
    .stickybar a{flex:1;display:flex;align-items:center;justify-content:center;min-height:var(--tap-control);padding:0 var(--space-1);
      font-family:var(--font-display);font-size:var(--font-size-md);letter-spacing:.05em;text-transform:uppercase;
      text-decoration:none;color:var(--color-on-primary);white-space:nowrap}
    .stickybar a:active{filter:brightness(.9)}
    .stickybar .sb-grab{background:var(--color-grab);color:var(--color-on-grab)}   /* .stickybar delante: si no, gana el blanco de .stickybar a */
    .stickybar .sb-pickup{background:var(--color-primary)}
    .topbar{justify-content:center;font-size:var(--font-size-xs);letter-spacing:.06em}
    .topbar .hot{flex:initial}
    /* móvil: el "Order now!" de arriba repite el "Order Now" de la barra roja, justo debajo */
    .topbar .pill{display:none}
  }

  /* Sombras y velos con el negro de la marca. Arriba va el rgba(13,13,13,…) de reserva
     (= --color-brand-smash-ink) para iPhones con iOS < 16.2, que no entienden color-mix().
     El color-mix va DENTRO de @supports porque una línea con var() no cae en la de antes si
     el navegador no la entiende: se queda en nada (comprobado en Chrome, encargo 046). */
  @supports (color:color-mix(in srgb,red 50%,transparent)){
    .hero::before{background-image:radial-gradient(color-mix(in srgb,var(--color-brand-smash-ink) 25%,transparent) 1.3px, transparent 1.3px)}
    .hm{-webkit-text-stroke:2.5px color-mix(in srgb,var(--color-brand-smash-ink) 50%,transparent)}
    .hero .heroburger{filter:drop-shadow(0 24px 30px color-mix(in srgb,var(--color-brand-smash-ink) 35%,transparent))}
    .status{background:color-mix(in srgb,var(--color-brand-smash-ink) 25%,transparent)}
    .xp img{filter:drop-shadow(0 14px 16px color-mix(in srgb,var(--color-brand-smash-ink) 28%,transparent))}
    .hours{background:color-mix(in srgb,var(--color-brand-smash-ink) 22%,transparent)}
  }

  /* Si el aparato pide "reducir movimiento", se paran rayos, rótulos y marquesina */
  @media (prefers-reduced-motion: reduce){
    .fbolt,.hm,.marquee .track,.hero .heroburger,.bcard:target .xp img{animation:none}
    html{scroll-behavior:auto}
  }

  /* ===== Páginas interiores (encargo 197): mismo estilo que la portada ===== */
  .phero{background:var(--color-primary);color:var(--color-on-primary);text-align:center;position:relative;overflow:hidden;padding:var(--space-16) var(--space-gutter) var(--space-12)}
  .phero h1{position:relative;z-index:2;font-family:var(--font-display);font-weight:var(--font-weight-display);text-transform:uppercase;font-size:clamp(44px,9vw,120px);line-height:.95;letter-spacing:0}
  .phero .lead{position:relative;z-index:2;max-width:640px;margin:var(--space-5) auto 0;font-size:var(--font-size-lg);line-height:1.5}
  .phero .note{position:relative;z-index:2;margin-top:var(--space-3);font-family:var(--font-label);font-size:var(--font-size-xs);letter-spacing:.2em;text-transform:uppercase}
  .phero .cta{margin-top:var(--space-6)}
  .bprice{font-family:var(--font-display);font-size:34px;line-height:1;margin:var(--space-1) 0 0;color:var(--color-on-primary)}
  .bprice small{font-size:.5em;margin-left:3px}
  .bcard .bbtn{margin-top:var(--space-2);display:inline-flex;align-items:center;min-height:var(--tap-control);padding:0 var(--space-6);background:var(--color-bg);color:var(--color-text);border-radius:var(--radius-pill);text-decoration:none;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em}
  .pagesec{background:var(--color-bg);color:var(--color-text);text-align:center}
  .pagesec .anton{font-size:clamp(34px,6vw,72px);line-height:.98}
  .pagesec .anton em{font-style:normal;color:var(--color-primary)}
  .pagesec p,.pagesec address{max-width:620px;margin:var(--space-4) auto 0;color:var(--color-text-2);line-height:1.7;font-style:normal}
  .pagesec .cta{margin-top:var(--space-6)}
  .panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--space-6);max-width:1000px;margin:0 auto}
  .panel{border:2px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-8) var(--space-6);text-align:center;background:var(--color-bg)}
  .panel h2{font-family:var(--font-display);font-weight:var(--font-weight-display);text-transform:uppercase;font-size:clamp(28px,4vw,44px);margin-bottom:var(--space-3)}
  .panel p{color:var(--color-text-2);line-height:1.7;margin:0 0 var(--space-3)}
  .panel .ui-btn{margin:var(--space-2) var(--space-1) 0;display:inline-flex;align-items:center;padding:0 var(--space-6);min-height:var(--tap-control)}