:root{
    /* Paleta oficial Bamboleo — Pantone */
    --carbon:    #393832;  /* Carbón */
    --caramelo:  #AA8554;  /* Caramelo */
    --tostado:   #B99B68;  /* Tostado */
    --vainilla:  #D9C587;  /* Vainilla */
    --crema:     #F0E7A1;  /* Crema */

    /* base (derivada de carbón) */
    --bg:        #141410;
    --bg-2:      #1c1c17;
    --bg-3:      #24231d;
    --line:      rgba(240, 231, 161, 0.08);
    --line-2:    rgba(240, 231, 161, 0.16);
    --ink:       #f4ede0;
    --ink-2:     #c8bfa9;
    --ink-3:     #8e8670;
    --ink-4:     #5a5446;

    /* accents */
    --accent:       var(--caramelo);
    --accent-soft:  var(--vainilla);
    --accent-deep:  #7c5c33;

    --max: 1400px;
    --pad: clamp(20px, 4vw, 56px);
  }

  [data-accent="gold"]{ --accent: var(--caramelo); --accent-soft: var(--vainilla); --accent-deep:#7c5c33; }
  [data-accent="amber"]{ --accent: var(--tostado); --accent-soft: var(--crema); --accent-deep:#806532; }
  [data-accent="ember"]{ --accent: var(--vainilla); --accent-soft: var(--crema); --accent-deep: var(--caramelo); }

  *{ box-sizing:border-box }
  html,body{ margin:0; padding:0; background:var(--bg); color:var(--ink); }
  body{
    font-family:'Montserrat', system-ui, -apple-system, sans-serif;
    font-weight:400;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  h1, h2, h3, h4, .display, .heading{
    font-family: 'Roboto', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  img{ display:block; max-width:100%; }
  a{ color:inherit; text-decoration:none; }
  button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

  .serif{ font-family:'Roboto', sans-serif; font-weight:700; letter-spacing:-0.01em; }
  .mono{ font-family:'Montserrat', sans-serif; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; }

  .wrap{ max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

  .eyebrow{
    font-family:'Montserrat', sans-serif;
    font-size:11px;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--accent);
    display:inline-flex; align-items:center; gap:10px;
  }
  .eyebrow::before{
    content:""; width:24px; height:1px; background:var(--accent);
    display:inline-block;
  }

  /* ============ NAV ============ */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:50;
    padding:18px var(--pad);
    display:flex; align-items:center; justify-content:space-between;
    transition: background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
    border-bottom:1px solid transparent;
  }
  .nav.scrolled{
    background:rgba(11,9,7,0.82);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom-color:var(--line);
  }
  .nav-brand{ display:flex; align-items:center; gap:12px; }
  .nav-brand .mark{ width:38px; height:38px; object-fit:contain; }
  .nav-brand .logo-long{ height:34px; width:auto; display:none; }
  .nav-brand .wordmark{
    font-family:'Roboto', sans-serif;
    font-weight:500;
    font-size:20px;
    letter-spacing:0.14em;
  }
  .nav-brand .wordmark .tag{
    display:block;
    font-family:'Montserrat', sans-serif;
    font-size:9px;
    letter-spacing:0.3em;
    color:var(--ink-3);
    margin-top:-2px;
  }
  .nav-links{ display:flex; gap:28px; align-items:center; }
  .nav-links a{
    font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--ink-2);
    transition: color .2s;
  }
  .nav-links a:hover{ color:var(--accent); }
  .nav-cta{
    padding:10px 18px;
    border:1px solid var(--accent);
    color:var(--accent);
    font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
    transition: background .2s, color .2s;
  }
  .nav-cta:hover{ background:var(--accent); color:#0b0907; }

  @media (max-width: 820px){
    .nav-links{ display:none; }
  }

  /* ============ HERO ============ */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex; align-items:center; justify-content:center;
    text-align:center;
    overflow:hidden;
    isolation:isolate;
    padding: 120px var(--pad) 80px;
  }
  .hero-bg{
    position:absolute; inset:0; z-index:-2;
    background-image:
      linear-gradient(180deg, rgba(11,9,7,0.78) 0%, rgba(11,9,7,0.65) 40%, rgba(11,9,7,0.97) 100%),
      url("../img/4d397819.jpg");
    background-size:cover;
    background-position:center 60%;
    filter:saturate(0.95) contrast(1.05) brightness(0.7);
    animation: heroZoom 18s ease-out infinite alternate;
  }
  @keyframes heroZoom{
    from{ transform:scale(1); }
    to{ transform:scale(1.08); }
  }
  .hero-vignette{
    position:absolute; inset:0; z-index:-1;
    background:
      radial-gradient(ellipse at center, rgba(11,9,7,0.2) 0%, rgba(11,9,7,0.65) 70%, rgba(11,9,7,0.98) 100%);
    pointer-events:none;
  }

  .hero-inner{ max-width:1000px; }
  .hero .flame-mark{
    width:96px; height:auto;
    margin:0 auto 28px;
    opacity:0.98;
  }
  .hero h1{
    font-family:'Roboto', sans-serif;
    font-weight:300;
    font-size: clamp(48px, 9vw, 132px);
    line-height:0.98;
    letter-spacing:-0.03em;
    margin:0 0 8px;
  }
  .hero h1 .ital{ font-style:italic; font-weight:400; color:var(--accent); }
  .hero .sub{
    font-family:'Montserrat', sans-serif;
    font-size:12px;
    letter-spacing:0.34em;
    text-transform:uppercase;
    color:var(--ink-2);
    margin-top:18px;
  }
  .hero .sub span{ color:var(--accent); padding:0 10px; }
  .hero-claim{
    margin-top:42px;
    font-size:17px;
    color:var(--ink-2);
    max-width:760px;
    margin-left:auto; margin-right:auto;
  }
  .hero-cta-row{
    margin-top:46px;
    display:inline-flex; gap:14px; flex-wrap:wrap; justify-content:center;
  }
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:16px 28px;
    font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
    transition: all .25s ease;
    cursor:pointer;
    border:1px solid transparent;
  }
  .btn-primary{
    background:var(--accent);
    color:#0b0907;
  }
  .btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 10px 30px rgba(201,162,74,0.25); }
  .btn-ghost{
    border-color: var(--line-2);
    color:var(--ink);
  }
  .btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }

  .hero-scroll{
    position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
    font-family:'Montserrat', sans-serif;
    font-size:10px; letter-spacing:0.3em; color:var(--ink-3);
    text-transform:uppercase;
    display:flex; flex-direction:column; align-items:center; gap:12px;
  }
  .hero-scroll::after{
    content:""; width:1px; height:40px;
    background:linear-gradient(to bottom, var(--accent), transparent);
    animation: scrollLine 2s ease-in-out infinite;
  }
  @keyframes scrollLine{
    0%,100%{ transform:scaleY(0.4); transform-origin:top; }
    50%{ transform:scaleY(1); transform-origin:top; }
  }

  /* ============ HERO ALT (split) ============ */
  .hero[data-variant="split"]{
    min-height:100vh;
    display:grid;
    grid-template-columns: 1.05fr 1fr;
    text-align:left;
    padding:0;
    gap:0;
  }
  .hero[data-variant="split"] .hero-bg,
  .hero[data-variant="split"] .hero-vignette,
  .hero[data-variant="split"] .hero-scroll{ display:none; }
  .hero[data-variant="split"] .split-left{
    padding: 140px var(--pad) 80px;
    display:flex; flex-direction:column; justify-content:center;
    background: var(--bg);
    position:relative;
  }
  .hero[data-variant="split"] .split-left::after{
    content:""; position:absolute; right:-1px; top:20%; bottom:20%; width:1px;
    background:linear-gradient(to bottom, transparent, var(--line-2), transparent);
  }
  .hero[data-variant="split"] .hero-inner{ max-width:none; }
  .hero[data-variant="split"] h1{ font-size: clamp(52px, 6.5vw, 104px); }
  .hero[data-variant="split"] .flame-mark{ margin:0 0 28px; }
  .hero[data-variant="split"] .hero-claim{ margin-left:0; margin-right:0; }
  .hero[data-variant="split"] .hero-cta-row{ justify-content:flex-start; }
  .hero[data-variant="split"] .split-right{
    position:relative;
    background-image:
      linear-gradient(90deg, rgba(11,9,7,0.7) 0%, transparent 40%),
      url("../img/b8bafe07.jpg");
    background-size:cover;
    background-position:center;
    min-height:60vh;
  }
  .hero[data-variant="split"] .split-right::before{
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(ellipse at 70% 50%, transparent 0%, rgba(11,9,7,0.4) 80%);
  }
  .hero[data-variant="split"] .split-caption{
    position:absolute; bottom:32px; right:32px;
    font-family:'Montserrat', sans-serif;
    font-size:10px; letter-spacing:0.25em; text-transform:uppercase;
    color:var(--ink-2);
    background:rgba(11,9,7,0.6);
    padding:10px 14px;
    border:1px solid var(--line);
    backdrop-filter: blur(6px);
  }
  @media (max-width:900px){
    .hero[data-variant="split"]{ grid-template-columns:1fr; }
    .hero[data-variant="split"] .split-right{ min-height:55vh; order:-1; }
    .hero[data-variant="split"] .split-left{ padding: 60px var(--pad) 80px; }
  }

  /* ============ SECTIONS ============ */
  section{ position:relative; }
  .section{ padding: clamp(80px, 12vw, 140px) 0; }
  .section-head{
    display:grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 60px;
    margin-bottom: 72px;
    align-items:end;
  }
  @media (max-width:780px){
    .section-head{ grid-template-columns:1fr; gap:20px; margin-bottom:48px; }
  }
  .section-title{
    font-family:'Roboto', sans-serif;
    font-weight:300;
    font-size: clamp(36px, 5vw, 68px);
    line-height:1.02;
    letter-spacing:-0.02em;
    margin:14px 0 0;
  }
  .section-title .ital{ font-style:italic; color:var(--accent); font-weight:400; }
  .section-lede{
    color:var(--ink-2);
    font-size:17px;
    max-width:54ch;
  }

  /* ============ MARQUEE / TICKER ============ */
  .ticker{
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    overflow:hidden;
    padding:18px 0;
    background:var(--bg-2);
  }
  .ticker-track{
    display:flex; gap:48px;
    white-space:nowrap;
    animation: ticker 40s linear infinite;
    font-family:'Roboto', sans-serif;
    font-style:italic;
    font-size: clamp(22px, 3vw, 34px);
    color:var(--ink);
  }
  .ticker-track span{ display:inline-flex; align-items:center; gap:48px; }
  .ticker-track .dot{
    width:6px; height:6px; background:var(--accent); border-radius:50%;
    display:inline-block;
  }
  @keyframes ticker{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }

  /* ============ ABOUT / BRASA ============ */
  .brasa{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items:center;
  }
  @media (max-width:900px){ .brasa{ grid-template-columns:1fr; gap:48px; } }
  .brasa-img{
    position:relative;
    aspect-ratio: 4/5;
    background-size:cover; background-position:center;
    overflow:hidden;
  }
  .brasa-img::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(180deg, transparent 50%, rgba(11,9,7,0.4) 100%);
  }
  .brasa-img .stamp{
    position:absolute; top:20px; left:20px;
    font-family:'Montserrat', sans-serif;
    font-size:10px; letter-spacing:0.25em; text-transform:uppercase;
    background:rgba(11,9,7,0.7);
    backdrop-filter:blur(4px);
    padding:8px 12px;
    border:1px solid var(--line);
  }
  .brasa-copy h3{
    font-family:'Roboto', sans-serif;
    font-weight:300;
    font-size: clamp(32px, 4.5vw, 56px);
    line-height:1.05;
    letter-spacing:-0.02em;
    margin:14px 0 28px;
  }
  .brasa-copy p{ color:var(--ink-2); font-size:17px; margin:0 0 18px; max-width:52ch; }
  .brasa-stats{
    display:grid; grid-template-columns:repeat(3, 1fr);
    gap:24px;
    margin-top:40px;
    padding-top:32px;
    border-top:1px solid var(--line);
  }
  .brasa-stats .num{
    font-family:'Roboto', sans-serif;
    font-size:44px;
    font-weight:300;
    color:var(--accent);
    line-height:1;
  }
  .brasa-stats .lbl{
    font-family:'Montserrat', sans-serif;
    font-size:10px; letter-spacing:0.22em; text-transform:uppercase;
    color:var(--ink-3);
    margin-top:8px;
  }

  /* ============ SPECIALTIES ============ */
  .specs{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  @media (max-width:900px){ .specs{ grid-template-columns: repeat(2,1fr); } }
  @media (max-width:540px){ .specs{ grid-template-columns: 1fr; } }
  .spec{
    background:var(--bg);
    padding: 40px 28px;
    display:flex; flex-direction:column; gap:18px;
    min-height:280px;
    transition: background .3s;
    cursor:default;
  }
  .spec:hover{ background:var(--bg-2); }
  .spec .idx{
    font-family:'Montserrat', sans-serif;
    font-size:10px; letter-spacing:0.25em; color:var(--ink-3);
  }
  .spec .name{
    font-family:'Roboto', sans-serif;
    font-size:30px;
    font-weight:400;
    line-height:1;
    letter-spacing:-0.01em;
  }
  .spec .name .ital{ font-style:italic; color:var(--accent); }
  .spec .desc{
    color:var(--ink-2);
    font-size:14px;
    margin-top:auto;
  }
  .spec .line{
    width:32px; height:1px; background:var(--accent);
  }

  /* ============ GALLERY ============ */
  .gallery-wrap{ position:relative; }
  .gallery-switcher{
    display:flex; gap:6px;
    margin-bottom:32px;
    border:1px solid var(--line);
    padding:4px;
    width:fit-content;
  }
  .gallery-switcher button{
    padding:10px 16px;
    font-family:'Montserrat', sans-serif;
    font-size:10px; letter-spacing:0.18em; text-transform:uppercase;
    color:var(--ink-3);
    transition: all .2s;
  }
  .gallery-switcher button[data-active]{ background:var(--accent); color:#0b0907; }

  /* MOSAIC */
  .gallery-mosaic{
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 140px;
    gap: 12px;
  }
  .gallery-mosaic .tile{
    position:relative;
    overflow:hidden;
    background-size:cover;
    background-position:center;
    cursor:pointer;
  }
  .gallery-mosaic .tile::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(180deg, transparent 55%, rgba(11,9,7,0.85) 100%);
    opacity:0.6;
    transition: opacity .3s;
  }
  .gallery-mosaic .tile:hover::after{ opacity:0.9; }
  .gallery-mosaic .tile .cap{
    position:absolute; left:16px; right:16px; bottom:14px;
    font-family:'Roboto', sans-serif;
    font-size:18px;
    font-weight:400;
    line-height:1.1;
    transform:translateY(8px);
    opacity:0;
    transition: all .4s ease;
  }
  .gallery-mosaic .tile:hover .cap{ transform:translateY(0); opacity:1; }
  .gallery-mosaic .tile .cap .kicker{
    display:block;
    font-family:'Montserrat', sans-serif;
    font-size:9px;
    letter-spacing:0.24em;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:6px;
  }

  /* sizes */
  .t-a{ grid-column: span 5; grid-row: span 3; }
  .t-b{ grid-column: span 4; grid-row: span 2; }
  .t-c{ grid-column: span 3; grid-row: span 3; }
  .t-d{ grid-column: span 4; grid-row: span 2; }
  .t-e{ grid-column: span 3; grid-row: span 2; }
  .t-f{ grid-column: span 5; grid-row: span 3; }
  .t-g{ grid-column: span 4; grid-row: span 3; }
  .t-h{ grid-column: span 3; grid-row: span 2; }
  .t-i{ grid-column: span 5; grid-row: span 2; }
  .t-j{ grid-column: span 4; grid-row: span 3; }
  .t-k{ grid-column: span 4; grid-row: span 2; }
  .t-l{ grid-column: span 4; grid-row: span 2; }
  .t-m{ grid-column: span 4; grid-row: span 3; }
  .t-n{ grid-column: span 4; grid-row: span 3; }
  .t-o{ grid-column: span 4; grid-row: span 2; }
  .t-p{ grid-column: span 4; grid-row: span 2; }
  @media (max-width:900px){
    .gallery-mosaic{ grid-template-columns: repeat(6, 1fr); grid-auto-rows:120px; }
    .t-a,.t-f{ grid-column: span 6; grid-row: span 3; }
    .t-b,.t-c,.t-d,.t-e,.t-g,.t-h,.t-i,.t-j,.t-k,.t-l,.t-m,.t-n,.t-o,.t-p{ grid-column: span 3; grid-row: span 2; }
  }

  /* GRID */
  .gallery-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  @media (max-width:780px){ .gallery-grid{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width:480px){ .gallery-grid{ grid-template-columns: 1fr; } }
  .gallery-grid .card{
    aspect-ratio: 4/5;
    background-size:cover; background-position:center;
    position:relative; overflow:hidden;
  }
  .gallery-grid .card::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(180deg, transparent 55%, rgba(11,9,7,0.85) 100%);
  }
  .gallery-grid .card .cap{
    position:absolute; left:18px; right:18px; bottom:18px;
    font-family:'Roboto', sans-serif; font-size:20px; line-height:1.1;
  }
  .gallery-grid .card .kicker{
    display:block;
    font-family:'Montserrat', sans-serif;
    font-size:9px; letter-spacing:0.24em; text-transform:uppercase;
    color:var(--accent); margin-bottom:6px;
  }

  /* CAROUSEL */
  .gallery-carousel{
    position:relative;
    overflow:hidden;
    margin:0 calc(-1 * var(--pad));
    padding: 0 var(--pad);
  }
  .carousel-track{
    display:flex;
    gap:16px;
    overflow-x:auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom:8px;
  }
  .carousel-track::-webkit-scrollbar{ display:none; }
  .carousel-track .card{
    flex: 0 0 min(420px, 70vw);
    aspect-ratio: 3/4;
    background-size:cover; background-position:center;
    position:relative;
    scroll-snap-align: start;
  }
  .carousel-track .card::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(180deg, transparent 55%, rgba(11,9,7,0.85) 100%);
  }
  .carousel-track .card .cap{
    position:absolute; left:18px; right:18px; bottom:18px;
    font-family:'Roboto', sans-serif; font-size:22px; line-height:1.1;
  }
  .carousel-track .card .kicker{
    display:block;
    font-family:'Montserrat', sans-serif;
    font-size:9px; letter-spacing:0.24em; text-transform:uppercase;
    color:var(--accent); margin-bottom:6px;
  }
  .carousel-nav{
    display:flex; gap:10px; margin-top:20px;
  }
  .carousel-nav button{
    width:44px; height:44px;
    border:1px solid var(--line-2);
    display:grid; place-items:center;
    color:var(--ink-2);
    transition: all .2s;
  }
  .carousel-nav button:hover{ border-color:var(--accent); color:var(--accent); }

  /* ============ FAMILY ============ */
  .family{
    background:
      linear-gradient(180deg, transparent, var(--bg-2) 30%, var(--bg-2) 70%, transparent);
    position:relative;
  }
  .family-inner{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items:center;
  }
  @media (max-width:900px){ .family-inner{ grid-template-columns:1fr; gap:40px; } }
  .family-visual{
    position:relative;
    aspect-ratio: 1/1;
    border:1px solid var(--line);
    background: radial-gradient(ellipse at 30% 20%, rgba(170,133,84,0.18) 0%, transparent 55%),
                radial-gradient(ellipse at 80% 80%, rgba(217,197,135,0.12) 0%, transparent 55%),
                var(--bg-2);
    overflow:hidden;
  }
  .family-visual .balls-stage{
    position:absolute; inset:0;
    overflow:hidden;
  }
  .ball{
    position:absolute;
    border-radius:50%;
    box-shadow: inset -8px -10px 20px rgba(0,0,0,0.35),
                inset 8px 10px 16px rgba(255,255,255,0.18),
                0 14px 30px rgba(0,0,0,0.45);
    will-change: transform;
  }
  .ball.b1{ width:96px; height:96px; background:radial-gradient(circle at 32% 30%, #c9a06a, #aa8554 60%, #7c5c33); top:12%; left:8%;
    animation: float1 5.4s ease-in-out infinite; }
  .ball.b2{ width:64px; height:64px; background:radial-gradient(circle at 32% 30%, #e0c08c, #b99b68 60%, #806532); top:58%; left:22%;
    animation: float2 4.8s ease-in-out infinite -0.6s; }
  .ball.b3{ width:120px; height:120px; background:radial-gradient(circle at 32% 30%, #f4e3a4, #d9c587 60%, #a8985a); top:18%; right:10%;
    animation: float3 6.2s ease-in-out infinite -1.2s; }
  .ball.b4{ width:52px; height:52px; background:radial-gradient(circle at 32% 30%, #fff2b4, #f0e7a1 60%, #c3b773); bottom:14%; left:48%;
    animation: float4 4.2s ease-in-out infinite -0.4s; }
  .ball.b5{ width:78px; height:78px; background:radial-gradient(circle at 32% 30%, #c9a06a, #aa8554 60%, #7c5c33); bottom:8%; right:18%;
    animation: float5 5.6s ease-in-out infinite -1.6s; }
  .ball.b6{ width:44px; height:44px; background:radial-gradient(circle at 32% 30%, #e0c08c, #b99b68 60%, #806532); top:8%; right:38%;
    animation: float6 3.8s ease-in-out infinite -2s; }
  .ball.b7{ width:58px; height:58px; background:radial-gradient(circle at 32% 30%, #f4e3a4, #d9c587 60%, #a8985a); top:42%; left:46%;
    animation: float7 4.6s ease-in-out infinite -0.9s; }
  .ball.b8{ width:38px; height:38px; background:radial-gradient(circle at 32% 30%, #fff2b4, #f0e7a1 60%, #c3b773); bottom:30%; right:6%;
    animation: float8 3.4s ease-in-out infinite -1.4s; }
  @keyframes float1{ 0%,100%{ transform:translate(0,0) rotate(0); } 50%{ transform:translate(14px,-22px) rotate(8deg); } }
  @keyframes float2{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-10px,-18px); } }
  @keyframes float3{ 0%,100%{ transform:translate(0,0) rotate(0); } 50%{ transform:translate(-16px,22px) rotate(-6deg); } }
  @keyframes float4{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(18px,-14px); } }
  @keyframes float5{ 0%,100%{ transform:translate(0,0) rotate(0); } 50%{ transform:translate(-14px,-20px) rotate(10deg); } }
  @keyframes float6{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(10px,16px); } }
  @keyframes float7{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-12px,18px); } }
  @keyframes float8{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(14px,-12px); } }
  .family-visual .tag-bl{
    position:absolute; bottom:14px; left:14px;
    background:rgba(20,20,16,0.78);
    backdrop-filter:blur(6px);
    padding:8px 14px;
    border:1px solid var(--line-2);
    font-family:'Montserrat', sans-serif;
    font-size:10px; letter-spacing:0.22em; text-transform:uppercase;
    color:var(--accent);
    z-index:2;
  }

  .family-copy h3{
    font-family:'Roboto', sans-serif;
    font-weight:300;
    font-size: clamp(32px, 4.5vw, 56px);
    line-height:1.02;
    letter-spacing:-0.02em;
    margin:14px 0 24px;
  }
  .family-copy h3 .ital{ font-style:italic; color:var(--accent); }
  .family-copy p{ color:var(--ink-2); font-size:17px; margin:0 0 18px; max-width:52ch; }
  .family-features{
    display:grid; grid-template-columns:1fr 1fr; gap:20px;
    margin-top:36px;
  }
  .family-features .f{
    display:flex; gap:14px; align-items:flex-start;
    padding:16px 0;
    border-top:1px solid var(--line);
  }
  .family-features .f .ico{
    flex:0 0 32px; height:32px;
    border:1px solid var(--accent);
    color:var(--accent);
    display:grid; place-items:center;
    font-family:'Montserrat', sans-serif;
    font-size:12px;
  }
  .family-features .f h4{
    margin:0; font-size:14px; font-weight:600; letter-spacing:0.02em;
  }
  .family-features .f p{ margin:4px 0 0; font-size:13px; color:var(--ink-3); }

  /* ============ MENUS ============ */
  .menus{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:16px;
  }
  @media (max-width:900px){ .menus{ grid-template-columns: repeat(2,1fr); } }
  @media (max-width:520px){ .menus{ grid-template-columns: 1fr; } }
  .menu-card{
    position:relative;
    padding: 36px 24px 28px;
    border:1px solid var(--line);
    background:var(--bg-2);
    min-height: 320px;
    display:flex; flex-direction:column;
    transition: all .3s;
  }
  .menu-card:hover{
    border-color:var(--accent);
    background:var(--bg-3);
    transform: translateY(-4px);
  }
  .menu-card .num{
    font-family:'Montserrat', sans-serif;
    font-size:10px; letter-spacing:0.22em; color:var(--ink-3);
    margin-bottom:60px;
  }
  .menu-card h3{
    font-family:'Roboto', sans-serif;
    font-weight:400;
    font-size:28px;
    line-height:1.05;
    margin:0 0 10px;
  }
  .menu-card h3 .ital{ font-style:italic; color:var(--accent); }
  .menu-card p{ font-size:13px; color:var(--ink-3); margin:0 0 24px; }
  .menu-card .go{
    margin-top:auto;
    display:inline-flex; align-items:center; gap:10px;
    font-family:'Montserrat', sans-serif;
    font-size:10px; letter-spacing:0.22em; text-transform:uppercase;
    color:var(--accent);
  }
  .menu-card .go::after{
    content:"→";
    transition: transform .2s;
  }
  .menu-card:hover .go::after{ transform: translateX(4px); }

  /* ============ EVENTS ============ */
  .events{
    display:grid;
    grid-template-columns: 1.2fr 1fr;
    gap:60px;
    align-items:stretch;
  }
  @media (max-width:900px){ .events{ grid-template-columns:1fr; gap:40px; } }
  .events-list{
    display:flex; flex-direction:column;
    border-top:1px solid var(--line);
  }
  .event-row{
    padding: 28px 0;
    border-bottom:1px solid var(--line);
    display:grid;
    grid-template-columns: 40px 1fr auto;
    gap:28px;
    align-items:center;
  }
  .event-row .num{
    font-family:'Montserrat', sans-serif;
    font-size:10px; letter-spacing:0.2em; color:var(--ink-3);
  }
  .event-row h4{
    font-family:'Roboto', sans-serif;
    font-weight:400;
    font-size:24px;
    margin:0 0 4px;
  }
  .event-row p{ margin:0; color:var(--ink-3); font-size:13px; }
  .event-row .chev{
    color:var(--accent);
    font-size:18px;
  }
  .events-img{
    background-size:cover; background-position:center;
    min-height: 400px;
    position:relative;
  }
  .events-img::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(45deg, rgba(11,9,7,0.4), transparent 60%);
  }

  /* ============ TESTIMONIALS ============ */
  .reviews{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  @media (max-width:900px){ .reviews{ grid-template-columns:1fr; } }
  .review{
    background:var(--bg);
    padding:40px 32px;
    display:flex; flex-direction:column; gap:20px;
  }
  .review .stars{
    color:var(--accent);
    letter-spacing:2px;
    font-size:14px;
  }
  .review blockquote{
    font-family:'Roboto', sans-serif;
    font-weight:300;
    font-size:22px;
    line-height:1.3;
    margin:0;
    letter-spacing:-0.005em;
  }
  .review blockquote::before{ content:"“"; color:var(--accent); margin-right:4px; }
  .review blockquote::after{ content:"”"; color:var(--accent); margin-left:4px; }
  .review cite{
    font-style:normal;
    font-family:'Montserrat', sans-serif;
    font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
    color:var(--ink-3);
    margin-top:auto;
  }
  .review cite b{ color:var(--ink); font-weight:500; letter-spacing:0.1em; display:block; margin-bottom:2px; }

  /* ============ VISIT / CONTACT ============ */
  .visit{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:0;
    border:1px solid var(--line);
  }
  @media (max-width:900px){ .visit{ grid-template-columns:1fr; } }
  .visit-info{
    padding: clamp(32px, 5vw, 64px);
    display:flex; flex-direction:column; gap:36px;
    border-right:1px solid var(--line);
  }
  @media (max-width:900px){ .visit-info{ border-right:0; border-bottom:1px solid var(--line); } }
  .visit-block h4{
    font-family:'Montserrat', sans-serif;
    font-size:10px; letter-spacing:0.25em; text-transform:uppercase;
    color:var(--accent);
    margin:0 0 14px;
  }
  .visit-block p, .visit-block .big{
    margin:0 0 4px;
    font-family:'Roboto', sans-serif;
    font-weight:300;
    font-size:22px;
    line-height:1.3;
  }
  .visit-block .meta{
    font-family:'Inter', sans-serif;
    font-size:14px;
    color:var(--ink-3);
  }
  .hours-grid{ display:grid; grid-template-columns:auto 1fr; gap:8px 24px; }
  .hours-grid .day{
    font-family:'Montserrat', sans-serif;
    font-size:11px; letter-spacing:0.15em; text-transform:uppercase;
    color:var(--ink-3);
    padding-top:4px;
  }
  .hours-grid .time{
    font-family:'Roboto', sans-serif;
    font-size:18px;
  }
  .hours-grid .time.late{ color:var(--accent); }

  .visit-map{
    position:relative;
    min-height:420px;
    background:#0b0907;
  }
  .visit-map iframe{
    width:100%; height:100%; border:0;
    filter: invert(0.92) hue-rotate(180deg) saturate(0.4) brightness(0.9);
    position:absolute; inset:0;
  }

  /* ============ FOOTER ============ */
  footer{
    padding: 80px var(--pad) 40px;
    border-top:1px solid var(--line);
    background:var(--bg-2);
  }
  .footer-grid{
    max-width:var(--max);
    margin:0 auto;
    display:grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap:48px;
    margin-bottom:60px;
    align-items:start;
  }
  @media (max-width:820px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
  @media (max-width:500px){ .footer-grid{ grid-template-columns: 1fr; } }
  .footer-brand img{ width:180px !important; max-width:100%; height:auto; }
  .footer-brand .big{
    font-family:'Roboto', sans-serif;
    font-weight:300;
    font-size: clamp(24px, 2.4vw, 30px);
    line-height:1.05;
    letter-spacing:-0.01em;
    margin:18px 0 14px;
  }
  .footer-brand .big br{ display:none; }
  .footer-brand .big .ital{ font-style:italic; color:var(--accent); }
  .footer-brand p{ color:var(--ink-3); font-size:13px; max-width:34ch; margin:0; }
  .footer-col h5{
    font-family:'Montserrat', sans-serif;
    font-size:10px; letter-spacing:0.25em; text-transform:uppercase;
    color:var(--accent);
    margin:0 0 20px;
  }
  .footer-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
  .footer-col a{ color:var(--ink-2); font-size:14px; transition:color .2s; }
  .footer-col a:hover{ color:var(--accent); }
  .footer-bar{
    max-width:var(--max); margin:0 auto;
    padding-top:24px;
    border-top:1px solid var(--line);
    display:flex; justify-content:space-between; align-items:center;
    font-family:'Montserrat', sans-serif;
    font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
    color:var(--ink-4);
    flex-wrap:wrap; gap:12px;
  }
  .foot-credit{
    max-width:var(--max); margin:14px auto 0;
    padding-top:14px;
    border-top:1px solid var(--line);
    text-align:center;
    font-family:'Montserrat', sans-serif;
    font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
    color:var(--ink-4);
  }
  .foot-credit a{
    color:inherit; text-decoration:none;
    display:inline-flex; align-items:center; gap:6px;
    transition:color .2s ease;
  }
  .foot-credit a:hover{ color:var(--accent); }
  .foot-credit .foot-heart{ color:#E32B1D; vertical-align:middle; flex-shrink:0; }

  /* ============ TWEAKS PANEL ============ */
  .tweaks-panel{
    position:fixed;
    right:20px; bottom:20px;
    width:280px;
    background: rgba(18,15,12,0.96);
    backdrop-filter: blur(16px);
    border:1px solid var(--line-2);
    padding:20px;
    z-index:200;
    display:none;
    font-family:'Inter', sans-serif;
  }
  .tweaks-panel.open{ display:block; }
  .tweaks-panel h6{
    font-family:'Montserrat', sans-serif;
    font-size:10px; letter-spacing:0.24em; text-transform:uppercase;
    color:var(--accent);
    margin:0 0 16px;
    display:flex; justify-content:space-between; align-items:center;
  }
  .tweaks-panel h6 .close{
    cursor:pointer; color:var(--ink-3);
    font-size:14px; letter-spacing:0;
  }
  .tweak-group{ margin-bottom:18px; }
  .tweak-group > label{
    display:block;
    font-family:'Montserrat', sans-serif;
    font-size:9px; letter-spacing:0.22em; text-transform:uppercase;
    color:var(--ink-3);
    margin-bottom:8px;
  }
  .tweak-chips{ display:flex; gap:6px; flex-wrap:wrap; }
  .tweak-chips button{
    padding:8px 12px;
    border:1px solid var(--line-2);
    font-size:11px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--ink-2);
    transition: all .2s;
  }
  .tweak-chips button[data-on]{
    background:var(--accent);
    border-color:var(--accent);
    color:#0b0907;
  }
  .tweak-swatch{
    display:inline-block;
    width:12px; height:12px;
    margin-right:6px;
    vertical-align:middle;
    border:1px solid var(--line-2);
  }

  /* ============ FADE-IN ============ */
  .reveal{ opacity:0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }

  /* Reservation floating button */
  .float-reserve{
    position:fixed;
    right:20px; bottom:20px;
    z-index:40;
    padding:14px 22px;
    background:var(--accent);
    color:#0b0907;
    font-family:'Montserrat', sans-serif;
    font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
    box-shadow: 0 10px 40px rgba(201,162,74,0.3);
    display:none;
  }
  .float-reserve.visible{ display:inline-flex; align-items:center; gap:10px; }
  .float-reserve:hover{ transform:translateY(-2px); transition: transform .2s; }