:root{
    /* ——— PALETA DE MARCA (guía Higgs · v5.7) — Cyan SOLO sobre oscuro; Teal para texto sobre claro ——— */
    --crema:#FAF7F0; --blanco:#FDFDFD; --celeste:#E9F2F8;   /* fondos claros (crema = base cálida) */
    --tinta:#4A4A4A; --texto:#4A4A4A; --madera:#55696F;     /* texto/ink · cuerpo · label apagado */
    --carbon:#101B20;                                       /* superficie oscura */
    --cyan:#00CED1; --teal:#006D77; --teal-d:#00565E;       /* acento oscuro · acento claro + CTA · hover */
    --azul-gris:#A3C9E2; --verde-mar:#95E1D3;               /* tinte / acento / bandas */
    /* alias de compatibilidad (nombres viejos → color correcto por contexto) */
    --teal-hondo:#006D77; --azul:#006D77; --verde:#006D77;  /* resuelven sobre claro (o dark con texto claro) */
    --mostaza:#00CED1;                                      /* acentos: TODOS sobre oscuro → cyan */
    --ketchup:#006D77; --ketchup-d:#00565E;                 /* CTA → teal */
    --bagel:'Bagel Fat One', system-ui, sans-serif;
    --brico:'Bricolage Grotesque', system-ui, sans-serif;
    --dm:'DM Sans', system-ui, sans-serif;
    --maxw:1280px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:auto;overflow-y:scroll}   /* Lenis manda: JAMÁS smooth nativo. overflow-y:scroll SIEMPRE
    (no solo scrollbar-gutter, que no reserva hueco con overflow:hidden) — la franja de la barra no cambia
    nunca de ancho, así que quitar el bloqueo al final de la intro no desplaza el hero ni un píxel */
  html.lock body{position:fixed;inset:0;overflow:hidden}
  body{background:var(--crema);color:var(--tinta);font-family:var(--dm);font-size:17px;line-height:1.65;
       -webkit-font-smoothing:antialiased}
  main{overflow-x:clip}
  img{max-width:100%;height:auto;display:block}
  a{color:inherit}
  ::selection{background:var(--ketchup);color:var(--crema)}
  :focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:4px}
  .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  /* ——— piezas de marca (recreadas de su carta impresa) ——— */
  .damero{height:clamp(18px,2.6vw,34px);background:repeating-conic-gradient(var(--azul) 0% 25%, transparent 0% 50%) 0 0 / clamp(9px,1.3vw,17px) clamp(9px,1.3vw,17px)}
  .pill{display:inline-flex;align-items:center;gap:.5em;font-family:var(--brico);font-weight:800;letter-spacing:.05em;
    text-transform:uppercase;border-radius:999px;padding:.95em 1.9em;font-size:.92rem;cursor:pointer;border:0;
    text-decoration:none;transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease}
  .pill--ketchup{background:var(--ketchup);color:var(--crema);box-shadow:0 10px 26px #006D7740}
  .pill--ketchup:hover{transform:translateY(-2px);box-shadow:0 14px 30px #006D7759;background:var(--ketchup-d)}
  .pill--ghost{background:transparent;border:2px solid var(--crema);color:var(--crema)}
  .pill--ghost:hover{transform:translateY(-2px);background:#f5efe31c}
  .pill--ghost-dark{background:transparent;border:2px solid var(--tinta);color:var(--tinta)}
  .pill--ghost-dark:hover{transform:translateY(-2px);background:#16262E12}
  .chip{display:inline-block;font-weight:700;border-radius:999px;padding:.55em 1.1em;font-size:.86rem;
    box-shadow:0 6px 18px #00000030;white-space:nowrap}
  .logo-disc{border-radius:50%;overflow:hidden;display:block;flex:none}
  .logo-disc img{width:100%;height:100%;object-fit:cover}

  /* ——— wordmark OHANA: letras estilo pegatina surf/tattoo (crema + azul, linework negro) ——— */
  .ink i{font-style:normal;color:var(--crema);
    -webkit-text-stroke:clamp(2px,.4vw,5px) var(--carbon);paint-order:stroke fill;
    text-shadow:clamp(3px,.45vw,6px) clamp(4px,.55vw,7px) 0 rgba(16,27,32,.45)}
  .ink i:nth-child(even){color:var(--azul)}

  /* ═══════════ INTRO ═══════════ */
  /* intro estilo splash → encoge a un badge (mecánica LISTÓN donmolinico) */
  #intro{position:fixed;inset:0;z-index:300;pointer-events:none}
  .no-intro #intro{display:none}
  #intro .panel{position:absolute;inset:0;display:grid;place-items:center;pointer-events:auto}
  #intro .panel-bg{position:absolute;inset:0;z-index:0;will-change:opacity;
    background:#8FCFE0 url("/assets/kakau-bg.webp") center/cover no-repeat}
  #intro .center{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:clamp(16px,3vh,30px);padding:24px;text-align:center}
  #intro .intro-mark{width:min(78vw,540px);height:auto;display:block;transform-origin:center center;will-change:transform;
    filter:drop-shadow(0 10px 26px #123c4766)}
  #intro .sub{font-family:var(--brico);font-weight:800;letter-spacing:.42em;text-indent:.42em;
    text-transform:uppercase;font-size:clamp(.64rem,1.3vw,.95rem);color:#0f3a45;opacity:0}
  #introSkip{position:absolute;right:clamp(16px,3vw,40px);bottom:clamp(28px,5vh,48px);z-index:2;background:none;border:0;
    font-family:var(--dm);font-weight:800;letter-spacing:.24em;text-transform:uppercase;font-size:.76rem;
    color:#0f3a45aa;cursor:pointer;padding:10px;pointer-events:auto}
  #introSkip:hover{color:#0f3a45}
  html:not(.js) #intro .sub{opacity:1}
  html:not(.js) #intro .panel{border-radius:0}

  /* ═══════════ HEADER ═══════════ */
  #top{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;gap:22px;
    padding:14px clamp(16px,3.5vw,44px);transition:background .35s ease, box-shadow .35s ease, backdrop-filter .35s}
  #top .logo-disc{width:46px;height:46px;box-shadow:0 4px 14px #00000040}
  #top .brand{font-family:var(--bagel);font-size:1.35rem;color:var(--crema);text-decoration:none;letter-spacing:.02em;
    text-shadow:0 2px 10px #00000060;display:flex;align-items:center;gap:12px}
  #top nav{margin-left:auto;display:flex;gap:26px;align-items:center}
  #top nav a:not(.pill){font-family:var(--brico);font-weight:700;font-size:.95rem;color:var(--crema);text-decoration:none;
    text-shadow:0 2px 8px #00000070;position:relative}
  #top nav a:not(.pill)::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:2.5px;background:var(--mostaza);
    transition:right .28s ease}
  #top nav a:not(.pill):hover::after{right:0}
  #top .pill{padding:.7em 1.5em;font-size:.83rem}
  #top.solid{background:#16262Eeb;backdrop-filter:blur(10px);box-shadow:0 6px 30px #00000045}
  #top .brand{transition:opacity .4s ease}
  #top:not(.solid) .brand{opacity:0;pointer-events:none}   /* sobre el hero manda el badge central */
  @media (max-width:920px){ #top nav a:not(.pill){display:none} }

  /* ——— menú móvil (hamburguesa + overlay, generado por JS; imprescindible en multipágina) ——— */
  .burger{display:none;margin-left:6px;background:none;border:0;cursor:pointer;padding:9px 8px;flex-direction:column;gap:5px;align-items:center}
  .burger span{display:block;width:26px;height:2.6px;background:var(--crema);border-radius:2px;box-shadow:0 1px 4px #00000060;transition:transform .3s ease,opacity .25s ease}
  body.menu-open .burger span:nth-child(1){transform:translateY(7.6px) rotate(45deg)}
  body.menu-open .burger span:nth-child(2){opacity:0}
  body.menu-open .burger span:nth-child(3){transform:translateY(-7.6px) rotate(-45deg)}
  @media (max-width:920px){ .burger{display:inline-flex} }
  .mobile-nav{position:fixed;inset:0;z-index:200;background:#16262Ef6;backdrop-filter:blur(10px);
    display:flex;flex-direction:column;justify-content:center;gap:2px;padding:clamp(40px,11vh,100px) clamp(28px,8vw,48px);
    transform:translateX(100%);transition:transform .42s cubic-bezier(.5,0,.2,1);visibility:hidden}
  body.menu-open .mobile-nav{transform:none;visibility:visible}
  .mobile-nav a{font-family:var(--bagel);font-weight:400;color:var(--crema);text-decoration:none;font-size:clamp(2rem,9vw,3.1rem);
    line-height:1.28;padding:6px 0;border-bottom:1px solid #f5efe31f}
  .mobile-nav a[aria-current="page"]{color:var(--mostaza)}
  .mobile-nav a.ig{font-family:var(--brico);font-weight:700;font-size:1.15rem;border:0;background:none;color:var(--cyan);margin-top:6px}
  .mobile-nav .pill{margin-top:26px;justify-content:center;font-size:1rem;width:100%}
  .mobile-nav .close{position:absolute;top:18px;right:20px;background:none;border:0;color:var(--crema);font-size:2.6rem;cursor:pointer;line-height:1}
  body.menu-open{overflow:hidden}

  /* ═══════════ HERO ═══════════ */
  .hero{position:relative;min-height:100svh;display:grid;isolation:isolate;background:#0c1418;overflow:clip}
  .hero .bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
  .hero .bg .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 46%;
    opacity:0;transition:opacity 1.4s ease;filter:saturate(1.06) brightness(.9) contrast(1.03);
    transform:scale(1.05);will-change:opacity}
  .hero .bg .slide.active{opacity:1}
  .hero::after{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg,#0c1418e6 0%,#0c141870 16%,#0c141800 40%,#0c141824 62%,#0c1418d9 88%,#0c1418f2 100%)}
  .hero-inner{width:min(100%,1360px);margin:0 auto;padding:clamp(150px,20vh,210px) clamp(18px,3.5vw,48px) clamp(96px,15vh,120px);
    display:flex;flex-direction:column;justify-content:center;min-height:100svh}
  .hero .eyebrow{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;
    font-family:var(--brico);font-weight:800;letter-spacing:.28em;text-transform:uppercase;font-size:.76rem;color:#f5efe3cc}
  .hero .eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--mostaza)}
  .hero h1{text-align:center;margin:.1em 0 0;line-height:0}
  .hero .wordmark{display:block;width:min(90vw,720px);height:auto;margin:0 auto;
    filter:drop-shadow(0 18px 42px rgba(8,14,18,.6))}
  @media (max-width:640px){ .hero .wordmark{width:94vw} }
  .hero .bajada{text-align:center;max-width:18ch;margin:.4em auto 0;font-family:var(--brico);font-weight:800;
    font-size:clamp(1.7rem,3.7vw,3rem);line-height:1.08;color:#f5efe3;text-wrap:balance;text-shadow:0 4px 26px #000b}
  .hero .ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:clamp(22px,3.5vh,34px)}
  .hero .foot{position:absolute;left:0;right:0;bottom:clamp(24px,4.5vh,44px);padding:0 clamp(18px,3.5vw,48px);
    display:flex;justify-content:center;gap:10px 26px;flex-wrap:wrap;align-items:center}
  .hero .foot .chip{background:#0c141850;color:var(--crema);border:1px solid #f5efe340;backdrop-filter:blur(7px);
    box-shadow:0 6px 20px #0006;font-weight:700;font-size:.82rem}
  .hero .foot .chip b{color:var(--mostaza)}
  /* badge de marca: donde aterriza la intro y se queda (rectángulo redondeado, arriba-centro) */
  .hero .brand-badge{position:absolute;top:clamp(82px,12vh,120px);left:50%;translate:-50% 0;z-index:6;
    padding:0;border:0;background:none;display:block;transition:scale .3s ease}
  .hero .brand-badge img{width:clamp(210px,32vw,420px);height:auto;display:block;
    filter:drop-shadow(0 14px 34px rgba(0,0,0,.55)) drop-shadow(0 2px 6px rgba(0,0,0,.4))}
  .hero .brand-badge:hover{scale:1.03}
  @media (max-width:640px){
    .hero .bg .slide{object-position:56% 46%}
    .hero .brand-badge{top:60px;padding:11px 15px 12px} .hero .brand-badge img{width:clamp(140px,42vw,180px)}
    .hero .foot .chip:nth-child(n+3){display:none}
    .hero .ctas .pill{flex:1;justify-content:center}
  }

  /* ═══════════ MANIFIESTO ═══════════ */
  .manifiesto{padding:clamp(90px,16vh,180px) clamp(18px,4vw,48px);text-align:center;background:var(--crema)}
  .manifiesto p.grande{font-family:var(--brico);font-weight:600;
    font-size:clamp(1.9rem,5.4vw,4.6rem);line-height:1.08;max-width:22ch;margin:0 auto;text-wrap:balance}
  .manifiesto p.grande em{font-style:italic;color:var(--teal-hondo)}
  .manifiesto .firma{margin-top:26px;font-family:var(--dm);font-weight:700;letter-spacing:.28em;text-transform:uppercase;
    font-size:.8rem;color:var(--madera)}
  .manifiesto .firma a{color:var(--teal-hondo);text-underline-offset:4px}

  /* ═══════════ LA CARTA ═══════════ */
  .carta{background:var(--celeste);position:relative}
  .carta .wrap{max-width:var(--maxw);margin:0 auto;padding:clamp(60px,9vh,110px) clamp(18px,4vw,48px)}
  .carta-head{position:relative;margin-bottom:clamp(40px,7vh,80px)}
  .carta-head h2{font-family:var(--bagel);font-weight:400;color:var(--azul);font-size:clamp(3.4rem,9vw,7.5rem);line-height:.95}
  .carta-head .sub{font-family:var(--brico);font-weight:700;font-size:clamp(1rem,1.6vw,1.25rem);color:var(--tinta);margin-top:10px}
  .carta-head .sello{position:absolute;right:0;top:-10px;width:clamp(110px,14vw,180px);aspect-ratio:1;display:grid;place-items:center}
  .sello svg{width:100%;height:auto;display:block;animation:spin 26s linear infinite;transform-origin:50% 50%}
  .sello .logo-disc{position:absolute;width:50%;height:50%}
  @keyframes spin{to{transform:rotate(360deg)}}
  @media (max-width:700px){ .carta-head .sello{position:static;margin:18px 0 0;width:120px} }

  .cat{display:grid;gap:clamp(22px,4vw,54px);padding:clamp(34px,6vh,64px) 0;border-top:2.5px dashed #006D7740;align-items:center}
  .cat:first-of-type{border-top:0}
  .cat h3{font-family:var(--bagel);font-weight:400;color:var(--azul);font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:1}
  .cat .lead{font-family:var(--brico);font-style:italic;font-weight:500;color:var(--teal-hondo);margin-top:6px}
  .platos{margin-top:20px;display:grid;gap:3px}
  /* plato = "choose your weapon": cada fila reacciona al cursor (mecánica buckssauce) */
  .plato{position:relative;display:grid;grid-template-columns:1fr auto;gap:3px 18px;align-items:baseline;
    padding:11px 15px;border-radius:13px;isolation:isolate;transition:transform .32s cubic-bezier(.2,.8,.2,1)}
  .plato::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:13px;
    background:linear-gradient(90deg,#006D7724,#006D770a 55%,transparent);
    transform:scaleX(0);transform-origin:left;transition:transform .42s cubic-bezier(.2,.8,.2,1)}
  .plato::after{content:"";position:absolute;left:0;top:16%;bottom:16%;width:3px;border-radius:3px;background:var(--azul);
    transform:scaleY(0);transition:transform .32s ease}
  .plato:hover{transform:translateX(7px)}
  .plato:hover::before{transform:scaleX(1)}
  .plato:hover::after{transform:scaleY(1)}
  .plato b{font-family:var(--brico);font-weight:800;font-size:1.06rem;letter-spacing:.01em;transition:color .25s ease}
  .plato:hover b{color:var(--azul)}
  .plato .precio{font-family:var(--dm);font-weight:800;color:var(--teal-hondo);font-size:1.02rem;white-space:nowrap;
    transition:transform .28s cubic-bezier(.34,1.6,.64,1), color .25s ease}
  .plato:hover .precio{color:var(--azul)}
  .plato:hover .precio{transform:scale(1.12) translateX(-52px)}
  .plato small{grid-column:1/-1;color:#16262Eb8;font-size:.92rem;line-height:1.45;max-width:52ch}
  .plato .valientes{color:var(--teal-hondo);font-weight:700}
  /* tabla kakau (asset Higgs · Tabla 1 "ola central") — entra por la derecha en el hover; el precio se aparta (translateX arriba) */
  .plato .tabla{position:absolute;right:12px;top:50%;height:120px;width:auto;z-index:2;pointer-events:none;
    transform:translate(135%,-50%) rotate(9deg);opacity:0;will-change:transform,opacity;
    filter:drop-shadow(0 9px 15px rgba(22,38,46,.30));
    transition:transform .55s cubic-bezier(.22,1,.36,1), opacity .4s ease}
  .plato:hover{transform:translateX(7px);z-index:4}
  .plato:hover .tabla{transform:translate(0,-50%) rotate(6deg);opacity:1}
  .cat--foto{grid-template-columns:1fr 1.15fr}
  .cat--foto.flip{grid-template-columns:1.15fr 1fr}
  .cat--foto.flip .foto{order:-1;transform:rotate(1.2deg);box-shadow:-14px 16px 0 #006D7726}
  .cat--foto .foto{border-radius:14px;overflow:hidden;box-shadow:14px 16px 0 #006D7726;transform:rotate(-1.4deg);
    transition:transform .5s ease, box-shadow .5s ease}
  .cat--foto .foto img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .65s cubic-bezier(.2,.8,.2,1)}
  .cat--foto:hover .foto img{transform:scale(1.06)}
  .cat--foto:hover .foto{box-shadow:18px 22px 0 #006D7738}
  .cat--foto.flip:hover .foto{box-shadow:-18px 22px 0 #006D7738}
  @media (max-width:860px){ .cat--foto,.cat--foto.flip{grid-template-columns:1fr} .cat--foto .foto,.cat--foto.flip .foto{order:-1} }

  /* Clasicones: franja del chuletón */
  .cat--clasicones .mega{border:3px solid var(--azul);border-radius:18px;padding:clamp(18px,3vw,30px);
    display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:#ffffff3d}
  .cat--clasicones .mega .nombre{font-family:var(--bagel);color:var(--tinta);font-size:clamp(1.3rem,2.6vw,2rem)}
  .cat--clasicones .mega .precio-mega{font-family:var(--bagel);color:var(--teal-hondo);font-size:clamp(1.9rem,4vw,3rem);white-space:nowrap}

  /* ENTRE PANES: pila barajable */
  .cat--panes{grid-template-columns:1.05fr .95fr}
  @media (max-width:860px){ .cat--panes{grid-template-columns:1fr} }
  /* cúmulo de 3 fotos solapadas que se mueven con el cursor (mecánica pizza-amici + crav) */
  .cluster{position:relative;justify-self:center;width:100%;max-width:440px;aspect-ratio:1/1.02;
    perspective:1000px;-webkit-tap-highlight-color:transparent}
  .cluster .shot{position:absolute;width:58%;border-radius:12px;overflow:hidden;background:#fff;
    padding:9px 9px 34px;box-shadow:0 22px 44px #16262E33;transition:transform .5s cubic-bezier(.2,.8,.2,1);
    will-change:transform}
  .cluster .shot img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:5px;display:block}
  .cluster .shot figcaption{position:absolute;left:0;right:0;bottom:9px;text-align:center;
    font-family:var(--brico);font-weight:800;font-size:.82rem;color:var(--tinta);letter-spacing:.01em}
  .cluster .s1{left:0;top:4%;z-index:1;--rot:-8deg}
  .cluster .s2{right:0;top:0;z-index:2;--rot:6deg}
  .cluster .s3{left:22%;bottom:0;z-index:3;--rot:-2deg}
  .cluster .shot{transform:translate(var(--tx,0),var(--ty,0)) rotate(var(--rot))}
  .cluster:hover .shot{transition:transform .12s linear}
  .cluster:hover .s3{box-shadow:0 30px 60px #16262E4d}
  @media (max-width:860px){ .cluster{max-width:360px;margin-top:8px} }

  .carta-foot{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;
    border-top:2.5px dashed #006D7740;padding-top:34px;margin-top:8px}
  .carta-foot .menu-dia{font-family:var(--brico);font-weight:700;font-size:1.05rem}
  .carta-foot .menu-dia small{display:block;font-family:var(--dm);font-weight:500;color:#16262Eb0;font-size:.9rem}
  .carta-foot .links{display:flex;gap:12px;flex-wrap:wrap}

  /* ═══════════ REELS ═══════════ */
  /* ═══════════ BEBIDAS ═══════════ */
  .bebidas{background:var(--celeste)}
  .bebidas .wrap{max-width:var(--maxw);margin:0 auto;padding:clamp(70px,11vh,130px) clamp(18px,4vw,48px)}
  .bebidas .kicker{color:var(--teal-hondo);font-weight:800;letter-spacing:.28em;text-transform:uppercase;font-size:.8rem}
  .bebidas h2{font-family:var(--bagel);font-weight:400;color:var(--azul);font-size:clamp(2.6rem,6.6vw,5rem);
    line-height:.98;margin-top:8px}
  .bebidas .sub{margin-top:12px;max-width:56ch;color:var(--tinta);font-size:1.05rem;opacity:.85}
  .copas{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,36px);margin-top:clamp(36px,6vh,58px)}
  @media (max-width:820px){ .copas{grid-template-columns:1fr;max-width:420px;margin-inline:auto} }
  .copa{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 18px 40px #16262e22;
    cursor:pointer;transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s}
  .copa:hover,.copa.playing{transform:translateY(-6px);box-shadow:0 26px 54px #16262e33}
  .copa video,.copa .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
  .copa .poster{transition:opacity .4s ease, transform .6s cubic-bezier(.2,.8,.2,1);z-index:1}
  .copa:hover .poster{transform:scale(1.06)}
  .copa.playing .poster{opacity:0}
  .copa video{z-index:0}
  .copa::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(180deg,#0c141800 45%,#0c1418cc 100%)}
  .copa .cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:20px 20px 18px;pointer-events:none}
  .copa .cap b{font-family:var(--brico);font-weight:800;font-size:1.2rem;color:var(--crema);display:block}
  .copa .cap span{color:#f5efe3c4;font-size:.88rem;display:block;margin-top:3px}

  .reels{background:var(--carbon);color:var(--crema)}
  .reels .wrap{max-width:var(--maxw);margin:0 auto;padding:clamp(70px,11vh,130px) clamp(18px,4vw,48px)}
  .reels h2{font-family:var(--bagel);font-weight:400;font-size:clamp(2.8rem,7.5vw,6rem);line-height:.95;color:var(--crema)}
  .reels .sub{margin-top:12px;max-width:52ch;color:#f5efe3c4;font-size:1.05rem}
  .reels .duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,54px);margin-top:clamp(34px,6vh,60px);
    max-width:900px;margin-inline:auto}
  @media (max-width:760px){ .reels .duo{grid-template-columns:1fr;max-width:420px} }
  .reel{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:9/16;background:#0c1418;
    border:3px solid #f5efe32b;box-shadow:0 26px 70px #00000055;
    transition:transform .35s cubic-bezier(.34,1.4,.64,1), box-shadow .35s}
  .reel:nth-child(1){transform:rotate(-1.4deg)}
  .reel:nth-child(2){transform:rotate(1.2deg)}
  .reel.playing,.reel:hover{transform:rotate(0deg) scale(1.03);box-shadow:0 36px 90px #0000008a}
  .reel video,.reel .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .reel .poster{filter:saturate(1.08);transition:opacity .4s ease;z-index:1}
  .reel.playing .poster{opacity:0}
  .reel video{z-index:0}
  .reel .cortina{position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(180deg,#0c141855 0%,#0000 30%,#0000 55%,#0c1418f0 96%)}
  .reel .tag{position:absolute;top:15px;left:15px;z-index:3;background:var(--ketchup);color:var(--crema);font-size:.72rem;
    font-weight:800;letter-spacing:.14em;text-transform:uppercase;border-radius:999px;padding:.5em 1em;box-shadow:0 6px 18px #0006}
  .reel .live{position:absolute;top:15px;right:15px;z-index:3;display:flex;align-items:center;gap:6px;
    background:#0c1418aa;backdrop-filter:blur(4px);border-radius:999px;padding:.4em .8em;font-size:.7rem;font-weight:700;
    color:#f5efe3;letter-spacing:.1em;text-transform:uppercase;opacity:1;transition:opacity .3s}
  .reel .live .rec{width:7px;height:7px;border-radius:50%;background:#4ade80}
  .reel.playing .live{opacity:0}
  .reel .cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:20px 22px;pointer-events:none}
  .reel .cap b{font-family:var(--brico);font-weight:800;font-size:1.12rem;color:var(--crema);display:block}
  .reel .cap span{color:#f5efe3c8;font-size:.9rem;font-style:italic;line-height:1.3;display:block;margin-top:2px}
  .reels .ig-links{display:flex;gap:clamp(20px,4vw,54px);max-width:900px;margin:16px auto 0}
  .reels .ig-links a{flex:1;text-align:center;font-family:var(--brico);font-weight:700;font-size:.86rem;
    color:#f5efe3aa;text-decoration:none;letter-spacing:.02em}
  .reels .ig-links a:hover{color:var(--crema);text-decoration:underline;text-underline-offset:4px}
  @media (max-width:760px){ .reels .ig-links{max-width:420px;flex-direction:column;gap:8px} .reels .ig-links a{text-align:left} }

  /* ═══════════ LA NOCHE ═══════════ */
  .noche{position:relative;min-height:88svh;display:grid;place-items:center;overflow:clip;isolation:isolate}
  .noche img.bg{position:absolute;inset:-12% 0;width:100%;height:124%;object-fit:cover;object-position:50% 40%;
    z-index:-2;filter:saturate(1.18)}
  .noche::after{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg,#101B2080,#101B2038 40%,#101B20c9 100%), #006D7714}
  .noche .inner{text-align:center;padding:clamp(80px,14vh,150px) clamp(18px,4vw,48px);max-width:880px}
  .noche h2{font-family:var(--bagel);font-weight:400;color:var(--crema);font-size:clamp(2.6rem,7vw,5.4rem);line-height:.95;
    text-shadow:0 10px 44px #000000a0}
  .noche p{margin:22px auto 30px;color:#f5efe3e6;font-family:var(--brico);font-weight:600;
    font-size:clamp(1.05rem,2vw,1.5rem);max-width:36ch;text-wrap:balance;text-shadow:0 4px 18px #000000b0}
  .noche .chip{background:var(--verde);color:var(--crema);margin-bottom:26px}
  .noche .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

  /* ═══════════ EL LOCAL — «Ya estás dentro» (full-bleed, spec fila 27) ═══════════ */
  .local{position:relative;background:var(--carbon);overflow:hidden}
  .local .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:32% 44%}
  .local .scrim{position:absolute;inset:0;background:linear-gradient(98deg,#16262Ef0 0%,#16262Ecc 30%,#16262E55 52%,transparent 70%)}
  .local .wrap{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;min-height:min(92vh,860px);
    display:flex;flex-direction:column;justify-content:center;padding:clamp(60px,9vh,110px) clamp(18px,4vw,48px)}
  .local .content{display:flex;flex-direction:column;gap:22px;max-width:620px}
  .local h2{font-family:var(--brico);font-weight:800;color:var(--crema);font-size:clamp(2.2rem,4.6vw,3.9rem);line-height:1.02;max-width:15ch}
  .local h2 em{font-style:italic;color:var(--mostaza)}
  .local .content p{color:#FAF7F0e0;font-size:1.1rem;max-width:42ch}
  .local .content p b{color:var(--crema)}
  .local .chips{display:flex;gap:10px;flex-wrap:wrap}
  .local .chip--borde{border:1.5px solid #FAF7F0aa;color:var(--crema);box-shadow:none;font-weight:600}
  .local .cta-row{margin-top:4px}
  .local .inset{position:absolute;right:clamp(18px,4vw,64px);bottom:clamp(18px,4vw,54px);z-index:2;width:min(250px,24vw);
    transform:rotate(2.4deg);border-radius:12px;overflow:hidden;box-shadow:-12px 14px 0 #A3C9E2aa;margin:0}
  .local .inset img{width:100%;height:300px;object-fit:cover;object-position:50% 96%;display:block}
  .local .inset figcaption{position:absolute;left:0;right:0;bottom:0;background:#16262Ed9;color:var(--crema);font-size:.8rem;padding:7px 10px}
  @media (min-width:861px) and (max-width:1080px){ .local .inset{bottom:78px} }
  @media (max-width:860px){
    .local .wrap{min-height:74svh;justify-content:flex-end;padding-bottom:clamp(28px,5vh,44px)}
    .local .bgimg{object-position:58% 40%}
    .local .scrim{background:linear-gradient(180deg,#16262E7a 0%,#16262E55 30%,#16262Eea 72%)}
    .local .inset{position:static;width:172px;margin:20px 0 0 auto;transform:rotate(2deg)}
    .local .inset img{height:200px}
  }

  /* ═══════════ OHANEROS teaser ═══════════ */
  .ohaneros-tsr{position:relative;min-height:74svh;display:grid;align-items:end;overflow:clip;isolation:isolate}
  .ohaneros-tsr img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 34%;z-index:-2}
  .ohaneros-tsr::after{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg,#101B2015 30%,#101B20d9 100%)}
  .ohaneros-tsr .inner{padding:clamp(70px,10vh,120px) clamp(18px,4vw,48px);max-width:var(--maxw);margin:0 auto;width:100%}
  .ohaneros-tsr .kicker{color:var(--mostaza);font-weight:800;letter-spacing:.3em;text-transform:uppercase;font-size:.82rem}
  .ohaneros-tsr h2{font-family:var(--bagel);font-weight:400;color:var(--crema);font-size:clamp(2.8rem,8vw,6.2rem);line-height:.95;margin:10px 0 14px}
  .ohaneros-tsr p{color:#f5efe3e0;font-family:var(--brico);font-weight:600;font-size:clamp(1.05rem,1.9vw,1.4rem);max-width:38ch}
  .ohaneros-tsr .pill{margin-top:26px}

  /* ═══════════ TIRA IG ═══════════ */
  .ig{background:var(--celeste);overflow:clip}
  .ig .head{max-width:var(--maxw);margin:0 auto;padding:clamp(56px,9vh,90px) clamp(18px,4vw,48px) 26px;
    display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap}
  .ig h2{font-family:var(--bagel);font-weight:400;color:var(--azul);font-size:clamp(1.9rem,4.6vw,3.2rem)}
  .ig .head a{font-family:var(--brico);font-weight:800;color:var(--teal-hondo);text-underline-offset:5px}
  .mq{display:flex;gap:16px;width:max-content;padding:6px 0 clamp(56px,9vh,90px);animation:mq 32s linear infinite}
  .mq:hover{animation-play-state:paused}
  .mq figure{width:clamp(200px,24vw,300px);aspect-ratio:1;border-radius:14px;overflow:hidden;flex:none;
    border:6px solid #fff;box-shadow:0 14px 34px #16262E22;transform:rotate(var(--r,0deg))}
  .mq figure img{width:100%;height:100%;object-fit:cover}
  @keyframes mq{to{transform:translateX(-50%)}}

  /* ═══════════ FOOTER ═══════════ */
  footer{background:var(--carbon);color:var(--crema)}
  footer .cta-final{max-width:var(--maxw);margin:0 auto;padding:clamp(70px,11vh,130px) clamp(18px,4vw,48px) clamp(40px,6vh,70px);
    text-align:center}
  footer .cta-final h2{font-family:var(--bagel);font-weight:400;font-size:clamp(3rem,9vw,7rem);line-height:.92}
  footer .cta-final p{margin:16px auto 30px;color:#f5efe3bb;max-width:44ch}
  footer .cols{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,4vw,48px) clamp(50px,8vh,80px);
    display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:30px;font-size:.95rem}
  footer .cols h3{font-family:var(--brico);font-weight:800;letter-spacing:.2em;text-transform:uppercase;
    font-size:.8rem;color:var(--mostaza);margin-bottom:12px}
  footer .cols p, footer .cols a{color:#f5efe3cf;text-decoration:none;line-height:1.8}
  footer .cols a:hover{color:var(--crema);text-decoration:underline;text-underline-offset:4px}
  footer .legal{border-top:1px solid #f5efe322;padding:22px clamp(18px,4vw,48px);text-align:center;
    font-size:.82rem;color:#f5efe380}

  /* ═══════════ APILADO de secciones al scroll (mecánica donmolinico) ═══════════ */
  /* cada sección sube con su borde superior redondeado + sombra sobre la anterior = hojas apiladas */
  .sheet{position:relative;border-radius:clamp(20px,3.4vw,38px) clamp(20px,3.4vw,38px) 0 0;
    margin-top:calc(-1 * clamp(22px,4.5vh,56px));box-shadow:0 -16px 44px rgba(8,20,26,.22)}
  .sheet:first-of-type{box-shadow:0 -16px 44px rgba(8,20,26,.34)}
  @media (prefers-reduced-motion: reduce){ .sheet{margin-top:0} }

  /* ═══════════ MAPA estilizado (nada de iframe genérico) ═══════════ */
  .mapa{background:var(--carbon);color:var(--crema);overflow:clip}
  .mapa .wrap{max-width:var(--maxw);margin:0 auto;padding:clamp(74px,12vh,140px) clamp(18px,4vw,48px);
    display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,5vw,60px);align-items:center}
  @media (max-width:860px){ .mapa .wrap{grid-template-columns:1fr} }
  .mapa .kicker{color:var(--mostaza);font-weight:800;letter-spacing:.26em;text-transform:uppercase;font-size:.78rem}
  .mapa h2{font-family:var(--bagel);font-weight:400;font-size:clamp(2.3rem,5.6vw,4.2rem);line-height:.96;margin:12px 0 16px}
  .mapa .dir{font-family:var(--brico);font-weight:800;font-size:clamp(1.15rem,2vw,1.4rem);color:var(--cyan)}
  .mapa .horario{list-style:none;margin:14px 0 26px;color:#f5efe3cf;line-height:1.95;font-size:.98rem}
  .mapa .horario b{color:var(--crema)}
  .mapa .ctas{display:flex;gap:12px;flex-wrap:wrap}
  .mapa-svg{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 26px 64px #00000066;border:1px solid #f5efe31f;
    transform:rotate(-1deg);transition:transform .5s ease}
  .mapa-svg:hover{transform:rotate(0deg)}
  .mapa-svg svg{display:block;width:100%;height:auto}
  .map-pin-pulse{transform-box:fill-box;transform-origin:center;animation:mappulse 2.8s ease-out infinite}
  @keyframes mappulse{0%{transform:scale(.35);opacity:.65}70%{opacity:0}100%{transform:scale(1.7);opacity:0}}
  .map-float{transform-origin:center;animation:mapfloat 4.5s ease-in-out infinite}
  @keyframes mapfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  @media (prefers-reduced-motion: reduce){ .map-pin-pulse,.map-float{animation:none} .mapa-svg{transform:none} }

  /* ═══════════ DRAWER RESERVAS ═══════════ */
  .drawer{position:fixed;inset:0;z-index:250;display:none}
  body.res-open .drawer{display:block}
  .drawer .backdrop{position:absolute;inset:0;background:#101B208c;border:0;cursor:pointer;width:100%;height:100%}
  .drawer .panel{position:absolute;top:0;right:0;bottom:0;width:min(94vw,430px);background:var(--crema);color:var(--tinta);
    padding:30px 28px;overflow:auto;box-shadow:-24px 0 70px #00000060;transform:translateX(100%)}
  .drawer .close{background:none;border:0;font-size:1.7rem;cursor:pointer;float:right;line-height:1;color:var(--tinta)}
  .drawer h3{font-family:var(--bagel);font-weight:400;font-size:2.1rem;margin:6px 0 4px;clear:both;color:var(--tinta)}
  .drawer .hint{font-size:.9rem;color:var(--madera);margin-bottom:24px}
  .drawer label{display:block;font-family:var(--brico);font-weight:800;font-size:.82rem;letter-spacing:.14em;
    text-transform:uppercase;margin:18px 0 7px}
  .drawer input,.drawer select{width:100%;padding:.9em 1em;border:2px solid #16262E2b;border-radius:12px;
    font-family:var(--dm);font-size:1rem;background:#fff;color:var(--tinta)}
  .drawer input:focus,.drawer select:focus{outline:3px solid var(--azul);outline-offset:1px}
  .drawer .enviar{width:100%;margin-top:26px;justify-content:center}
  .drawer .foot{margin-top:18px;font-size:.82rem;text-align:center;opacity:.75}

  /* ═══════════ reveals (estado inicial solo si JS activo) ═══════════ */
  .js [data-reveal]{opacity:0}

  @media (prefers-reduced-motion: reduce){
    .sello svg,.mq,.hero .bg img,.hero .scroll-cue::after{animation:none}
    .js [data-reveal]{opacity:1}
    .reel,.copa,.pill,.plato,.plato::before,.plato::after,.plato .tabla,.cat--foto .foto,.cat--foto .foto img{transition:none}
    .plato:hover{transform:none}
  }

  /* ═══════════ PORTALES (home → páginas: mecánica "3 puertas" a sangre, no tarjetitas) ═══════════ */
  .portada{background:var(--crema)}
  .portada .head{max-width:var(--maxw);margin:0 auto;padding:clamp(70px,11vh,130px) clamp(18px,4vw,48px) 0;text-align:center}
  .portada .head .kick{color:var(--teal-hondo);font-weight:800;letter-spacing:.26em;text-transform:uppercase;font-size:.8rem}
  .portada .head h2{font-family:var(--bagel);font-weight:400;color:var(--azul);font-size:clamp(2.4rem,6vw,4.6rem);line-height:.98;margin-top:10px}
  .portales{max-width:var(--maxw);margin:0 auto;padding:clamp(30px,5vh,54px) clamp(18px,4vw,48px) clamp(70px,11vh,130px);
    display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
  .portal{position:relative;display:block;border-radius:20px;overflow:hidden;aspect-ratio:3/4;text-decoration:none;
    box-shadow:0 18px 44px #16262e26;isolation:isolate;transform:translateZ(0)}
  .portal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
  .portal::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#101B2008 26%,#101B20b0 66%,#101B20ee 100%)}
  .portal:hover img,.portal:focus-visible img{transform:scale(1.07)}
  .portal .lbl{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(20px,3vw,32px)}
  .portal .lbl .k{font-family:var(--brico);font-weight:800;letter-spacing:.2em;text-transform:uppercase;font-size:.74rem;color:var(--mostaza)}
  .portal .lbl h3{font-family:var(--bagel);font-weight:400;color:var(--crema);font-size:clamp(2rem,3.3vw,2.8rem);line-height:.98;margin:7px 0 6px}
  .portal .lbl .go{font-family:var(--brico);font-weight:700;color:#f5efe3cc;font-size:.95rem;display:inline-flex;gap:8px;align-items:center;transition:gap .3s ease,color .3s}
  .portal:hover .lbl .go,.portal:focus-visible .lbl .go{gap:16px;color:var(--crema)}
  @media (max-width:820px){ .portales{grid-template-columns:1fr;max-width:460px;gap:16px} .portal{aspect-ratio:16/10} }

  /* ═══════════ EL LOCAL — split-screen en diálogo (spec fila 29) ═══════════ */
  .local-split{display:grid;grid-template-columns:1.05fr .95fr;background:var(--crema)}
  .local-split .media{position:sticky;top:0;height:100vh;overflow:hidden}
  .local-split .media figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .6s ease,transform 1.2s ease}
  .local-split .media figure.on{opacity:1}
  .local-split .media img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
  .local-split .media figure.on img{transform:scale(1)}
  .local-split .media figcaption{position:absolute;left:24px;bottom:24px;background:#16262Ed9;color:var(--crema);
    font-family:var(--brico);font-weight:800;font-size:1rem;padding:8px 16px;border-radius:99px}
  .local-split .rail{padding:0 clamp(24px,4vw,64px)}
  .local-split .caprail{min-height:88vh;display:flex;flex-direction:column;justify-content:center;gap:16px;max-width:34ch}
  .local-split .caprail .idx{font-family:var(--bagel);color:var(--teal);font-size:1.4rem}
  .local-split .caprail h3{font-family:var(--brico);font-weight:800;font-size:clamp(1.9rem,3.3vw,2.9rem);line-height:1.03}
  .local-split .caprail h3 em{font-style:italic}
  .local-split .caprail p{font-size:1.1rem;line-height:1.55;color:#16262Ecc}
  .local-split .caprail p b{color:var(--tinta)}
  .local-split .intro-rail{padding:clamp(60px,10vh,120px) 0 0}
  .local-split .intro-rail .kick{color:var(--teal-hondo);font-weight:800;letter-spacing:.24em;text-transform:uppercase;font-size:.8rem}
  .local-split .intro-rail h2{font-family:var(--brico);font-weight:800;font-size:clamp(2rem,3.6vw,3.1rem);line-height:1.02;margin-top:10px;max-width:16ch}
  @media (max-width:820px){
    .local-split{grid-template-columns:1fr}
    .local-split .media{position:relative;top:0;height:60svh}
    .local-split .caprail{min-height:auto;padding:30px 0}
    .local-split .intro-rail{padding:36px 0 0}
  }
  @media (prefers-reduced-motion: reduce){
    .local-split .media figure{transition:none}
    .local-split .media img{transform:none}
  }

  /* páginas interiores: el header ya no está sobre un hero oscuro → su marca se ve desde el principio */
  .page-solid #top{background:#16262Eeb;backdrop-filter:blur(10px);box-shadow:0 6px 30px #00000045}
  .page-solid #top .brand{opacity:1}
  .page-hd{position:relative;background:var(--carbon);color:var(--crema);padding:clamp(120px,17vh,180px) clamp(18px,4vw,48px) clamp(50px,8vh,80px)}
  .page-hd .wrap{max-width:var(--maxw);margin:0 auto}
  .page-hd .kick{color:var(--mostaza);font-weight:800;letter-spacing:.28em;text-transform:uppercase;font-size:.8rem}
  .page-hd h1{font-family:var(--bagel);font-weight:400;color:var(--crema);font-size:clamp(3rem,9vw,7rem);line-height:.92;margin-top:12px}
  .page-hd p{margin-top:16px;max-width:54ch;color:#f5efe3cf;font-size:1.08rem}
  .page-hd .damero-b{position:absolute;left:0;right:0;bottom:0;height:clamp(12px,2vw,20px);
    background:repeating-conic-gradient(var(--cyan) 0% 25%, transparent 0% 50%) 0 0 / clamp(9px,1.3vw,17px) clamp(9px,1.3vw,17px)}
  .backhome{display:inline-flex;gap:8px;align-items:center;margin-top:22px;font-family:var(--brico);font-weight:700;
    color:#f5efe3aa;text-decoration:none;font-size:.92rem}
  .backhome:hover{color:var(--crema)}