/* ══════════════════════════════════════
   main.css - El Palmaret
   Extraido de index.html - Abril 2026
   NO EDITAR: generado automaticamente
══════════════════════════════════════ */

    :root {
      /* ── PALETA PRINCIPAL ── */
      --navy: #1B3A5C;
      --navy-dark: #0f2540;
      --navy-mid: #16304e;
      --cream: #EDE8D5;
      --cream-light: #F5F2E8;
      --gold: #C9A84C;
      --gold-light: #E8C97A;
      --gold-dim: rgba(201, 168, 76, 0.15);

      /* ── ESCALA DE OPACIDADES GOLD ── */
      --gold-08: rgba(201, 168, 76, 0.08);
      --gold-15: rgba(201, 168, 76, 0.15);
      --gold-25: rgba(201, 168, 76, 0.25);
      --gold-40: rgba(201, 168, 76, 0.40);

      /* ── ESCALA DE OPACIDADES CREAM ── */
      --cream-28: rgba(237, 232, 213, 0.28);
      --cream-42: rgba(237, 232, 213, 0.42);
      --cream-65: rgba(237, 232, 213, 0.65);
      --cream-85: rgba(237, 232, 213, 0.85);

      /* ── TIPOGRAFÍAS ── */
      --fd: 'Cormorant Garamond', serif;
      --fb: 'Barlow', sans-serif;
      --fc: 'Barlow Condensed', sans-serif;

      /* ── TRANSICIONES ── */
      --t-fast: 0.18s ease;
      --t-mid:  0.30s ease;
      --t-slow: 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);

      /* ── SOMBRAS ── */
      --shadow-card: 0 4px 24px rgba(10, 20, 40, 0.35);
      --shadow-gold: 0 0 0 1px rgba(201, 168, 76, 0.20);
      --shadow-hover: 0 8px 32px rgba(10, 20, 40, 0.55);

      /* ── BORDER RADIUS ── */
      --r-sm: 4px;
      --r-md: 8px;
      --r-lg: 16px;
    }

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

    html {
      scroll-behavior: smooth;
    }

    body {
      background: var(--navy-dark);
      color: var(--cream);
      font-family: var(--fb);
      overflow-x: hidden;
    }

    /* ══════════════════════════════════════
   NAV
══════════════════════════════════════ */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.5rem 4rem;
      transition: background .5s, padding .4s, box-shadow .5s;
    }

    nav.sc {
      background: rgba(10, 24, 40, 0.97);
      padding: 0.85rem 4rem;
      backdrop-filter: blur(12px);
      box-shadow: 0 1px 0 rgba(201, 168, 76, 0.18);
    }

    .nl {
      font-family: var(--fd);
      font-size: 1.6rem;
      font-weight: 500;
      color: var(--cream);
      letter-spacing: .05em;
      text-decoration: none;
      display: flex;
      align-items: baseline;
      gap: .12em;
    }

    .nl span {
      font-size: .62em;
      font-style: italic;
      color: var(--gold);
      font-weight: 300;
    }

    nav ul {
      display: flex;
      align-items: center;
      gap: 2.5rem;
      list-style: none;
    }

    @media (min-width: 993px) {
      nav ul {
        margin-left: auto; /* Pushes menu to the right only on desktop */
      }
    }

    nav ul a {
      font-family: var(--fc);
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: rgba(237, 232, 213, .65);
      text-decoration: none;
      transition: color .2s;
      position: relative;
    }

    nav ul a::after {
      content: '';
      position: absolute;
      bottom: -3px;
      left: 0;
      right: 0;
      height: 1px;
      background: var(--gold);
      transform: scaleX(0);
      transition: transform .25s;
    }

    nav ul a:hover {
      color: var(--gold);
    }

    nav ul a:hover::after {
      transform: scaleX(1);
    }

    .ncta {
      color: var(--navy-dark) !important;
      background: var(--gold);
      padding: .6rem 1.4rem;
      transition: background .2s, transform .2s !important;
    }

    .ncta::after {
      display: none !important;
    }

    .ncta:hover {
      background: var(--gold-light) !important;
      transform: translateY(-1px);
    }

    .lang-switch {
      display: flex;
      gap: .35rem;
      margin-left: 1.2rem;
    }

    /* Hide moble components on desktop */
    .mobile-languages { display: none !important; }

    .lang-btn {
      border: 1px solid rgba(201, 168, 76, .35);
      background: transparent;
      color: rgba(237, 232, 213, .75);
      font-family: var(--fc);
      font-size: .6rem;
      font-weight: 700;
      letter-spacing: .12em;
      padding: .35rem .45rem;
      cursor: pointer;
    }

    .lang-btn.active {
      background: transparent;
      color: var(--gold);
      border: 1px solid var(--gold);
    }

    /* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
    .hero {
      min-height: 100vh;
      position: relative;
      display: flex;
      align-items: center;
      overflow: hidden;
    }

    .hbg {
      position: absolute;
      inset: 0;
      background: linear-gradient(rgba(10,20,40,0.7), rgba(10,20,40,0.7)), url('../img/paellajpg.webp') center/cover no-repeat;
    }

    .hgrain {
      position: absolute;
      inset: 0;
      opacity: .35;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
      background-size: 180px;
    }

    .htex {
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30Z' fill='none' stroke='rgba(201,168,76,0.04)' stroke-width='0.5'/%3E%3C/svg%3E");
      background-size: 60px 60px;
    }

    .hglow {
      position: absolute;
      width: 600px;
      height: 600px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(201, 168, 76, 0.08) 0%, transparent 70%);
      top: 50%;
      right: 10%;
      transform: translateY(-50%);
      pointer-events: none;
    }

    .hcont {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 850px;
      margin: 0 auto;
      padding: 8rem 2rem 4rem;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .hey {
      font-family: var(--fc);
      font-size: .75rem;
      font-weight: 600;
      letter-spacing: .3em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 0.8rem;
      display: flex;
      align-items: center;
      justify-content: center; /* Centering fix */
      gap: 1.5rem;
      opacity: 0;
      animation: fu .8s .3s ease forwards;
    }

    .hey::before, .hey::after {
      content: '';
      width: 2rem;
      height: 1px;
      background: var(--gold);
    }

    .hh1 {
      font-family: var(--fd);
      font-size: clamp(3.2rem, 5.5vw, 6.2rem);
      font-weight: 300;
      line-height: 1.05;
      color: var(--cream);
      margin-bottom: 0.1rem;
      opacity: 0;
      animation: fu .9s .5s ease forwards;
      text-align: center;
    }

    .hh1 em {
      font-style: italic;
      color: var(--gold);
    }

    .hh1s {
      font-family: var(--fd);
      font-size: clamp(1.4rem, 2.2vw, 2rem);
      font-weight: 300;
      font-style: italic;
      color: var(--gold);
      margin: 0 0 1.2rem;
      opacity: 0;
      animation: fu .8s .7s ease forwards;
    }

    .hdes {
      font-size: .95rem;
      font-weight: 300;
      line-height: 1.7;
      color: rgba(237, 232, 213, .9);
      max-width: 600px;
      margin-bottom: 2rem;
      opacity: 0;
      animation: fu .8s .9s ease forwards;
      text-align: center;
    }

    .hact {
      display: flex;
      gap: 1.2rem;
      align-items: center;
      justify-content: center;
      opacity: 0;
      animation: fu .8s 1.1s ease forwards;
    }

    .bp {
      font-family: var(--fc);
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      background: var(--gold);
      color: var(--navy-dark);
      padding: 1rem 2.4rem;
      text-decoration: none;
      transition: background .2s, transform .2s;
      display: inline-block;
    }

    .bp:hover {
      background: var(--gold-light);
      transform: translateY(-2px);
    }

    .bg {
      font-family: var(--fc);
      font-size: .75rem;
      font-weight: 600;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--cream);
      text-decoration: none;
      border-bottom: 1px solid rgba(237, 232, 213, .3);
      padding-bottom: 2px;
      transition: color .2s, border-color .2s;
    }

    .bg:hover {
      color: var(--gold);
      border-color: var(--gold);
    }

    /* HERO CAROUSEL RIGHT */
    .hright {
      opacity: 1;
    }

    .hero-carousel {
      position: relative;
    }

    .hero-carousel-track {
      width: 100%;
      height: 420px;
      overflow: hidden;
      position: relative;
    }

    .hero-carousel-track .slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity .9s ease, transform 1.2s ease;
      transform: scale(1.04);
    }

    .hero-carousel-track .slide.active {
      opacity: 1;
      transform: scale(1);
    }

    .slide-plate {
      width: 100%;
      height: 100%;
      position: relative;
      border-radius: var(--r-md);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Food images for carousel slides */
    .slide-plate img {
      width: 100%;
      height: 100%;
      position: absolute;
      inset: 0;
      object-fit: cover;
    }

    .slide-plate::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(10, 30, 56, .75) 0%, transparent 55%);
    }

    .slide-info {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 1.5rem 2rem;
      z-index: 3;
    }

    .slide-cat {
      font-family: var(--fc);
      font-size: .6rem;
      font-weight: 700;
      letter-spacing: .28em;
      text-transform: uppercase;
      color: var(--gold);
      display: block;
      margin-bottom: .25rem;
    }

    .slide-name {
      font-family: var(--fd);
      font-size: 1.5rem;
      font-style: italic;
      font-weight: 300;
      color: var(--cream);
      display: block;
    }

    .slide-price {
      font-family: var(--fc);
      font-size: .85rem;
      font-weight: 600;
      color: rgba(237, 232, 213, .55);
      display: block;
      margin-top: .15rem;
    }

    .hero-carousel-dots {
      display: flex;
      gap: .5rem;
      margin-top: .75rem;
    }

    .hcd {
      width: 24px;
      height: 2px;
      background: rgba(237, 232, 213, .25);
      transition: width .3s, background .3s;
      cursor: pointer;
    }

    .hcd.active {
      width: 40px;
      background: var(--gold);
    }

    .hero-carousel-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      gap: .5rem;
      width: 100%;
      justify-content: space-between;
      padding: 0 .75rem;
      z-index: 5;
      pointer-events: none;
    }

    .hcn-btn {
      width: 36px;
      height: 36px;
      background: rgba(10, 30, 56, .7);
      border: 1px solid rgba(201, 168, 76, .25);
      color: var(--gold);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      pointer-events: all;
      transition: background .2s;
      font-size: .9rem;
    }

    .hcn-btn:hover {
      background: rgba(201, 168, 76, .15);
    }

    .hstats {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 1px;
      background: rgba(201, 168, 76, .12);
      margin-top: .8rem;
    }

    .stat {
      background: rgba(10, 30, 56, .85);
      padding: 1.2rem 1rem;
      text-align: center;
    }

    .sn {
      font-family: var(--fd);
      font-size: 2rem;
      font-weight: 500;
      color: var(--gold);
      line-height: 1;
      display: block;
    }

    .sl {
      font-family: var(--fc);
      font-size: .6rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(237, 232, 213, .42);
      display: block;
      margin-top: .3rem;
    }

    /* ══════════════════════════════════════
   TICKER
══════════════════════════════════════ */
    .tkw {
      background: var(--gold);
      overflow: hidden;
      padding: .7rem 0;
      white-space: nowrap;
      cursor: default;
    }

    .tkt {
      display: inline-flex;
      animation: tick 28s linear infinite;
    }

    .tki {
      font-family: var(--fc);
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--navy-dark);
      padding: 0 2.5rem;
      display: inline-block;
    }

    .tkd {
      color: rgba(15, 37, 64, .35);
    }

    @keyframes tick {
      from {
        transform: translateX(0)
      }

      to {
        transform: translateX(-50%)
      }
    }

    /* ══════════════════════════════════════
   GALERÍA EDITORIAL
══════════════════════════════════════ */
    .gw {
      background: var(--navy-dark);
      padding: 6rem 0;
      overflow: hidden;
    }

    .gi {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 4rem;
    }

    .g-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 2.5rem;
    }

    .g-eyebrow {
      font-family: var(--fc);
      font-size: .7rem;
      font-weight: 600;
      letter-spacing: .3em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: .75rem;
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .g-eyebrow::before {
      content: '';
      width: 1.5rem;
      height: 1px;
      background: var(--gold);
    }

    .g-title {
      font-family: var(--fd);
      font-size: clamp(2.2rem, 3.5vw, 3.5rem);
      font-weight: 300;
      line-height: 1.1;
      color: var(--cream);
    }

    .g-title em {
      font-style: italic;
      color: var(--gold);
    }

    .g-nav {
      display: flex;
      gap: .5rem;
    }

    .g-nav-btn {
      width: 44px;
      height: 44px;
      background: transparent;
      border: 1px solid rgba(201, 168, 76, .25);
      color: var(--gold);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 1rem;
      transition: background .2s, border-color .2s;
    }

    .g-nav-btn:hover {
      background: rgba(201, 168, 76, .1);
      border-color: rgba(201, 168, 76, .5);
    }

    /* CARRUSEL GALERÍA HORIZONTAL */
    .g-carousel-outer {
      overflow: hidden;
      position: relative;
    }

    .g-carousel-outer::before,
    .g-carousel-outer::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 80px;
      z-index: 2;
      pointer-events: none;
    }

    .g-carousel-outer::before {
      left: 0;
      background: linear-gradient(to right, var(--navy-dark), transparent);
    }

    .g-carousel-outer::after {
      right: 0;
      background: linear-gradient(to left, var(--navy-dark), transparent);
    }

    .g-track {
      display: flex;
      gap: 8px;
      transition: transform .7s cubic-bezier(.25, .46, .45, .94);
      will-change: transform;
    }

    .g-item {
      flex-shrink: 0;
      position: relative;
      border-radius: var(--r-md);
      overflow: hidden;
      cursor: pointer;
    }

    .g-item:nth-child(odd) {
      width: 320px;
      height: 440px;
    }

    .g-item:nth-child(even) {
      width: 240px;
      height: 440px;
    }

    .g-item:nth-child(3n) {
      width: 280px;
      height: 440px;
    }

    .g-item-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .9s cubic-bezier(.25, .46, .45, .94), filter .7s;
      filter: brightness(.85) contrast(1.18) saturate(.75);
    }

    .g-item:hover .g-item-img {
      transform: scale(1.12);
      filter: brightness(1) contrast(1.1) saturate(1);
    }

    .g-item::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(10, 30, 56, .8) 0%, rgba(10, 30, 56, .1) 45%, transparent 100%);
      transition: opacity .4s;
    }

    .g-item:hover::after {
      opacity: .85;
    }

    .g-item-label {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 1.5rem 1.2rem;
      z-index: 3;
      transform: translateY(5px);
      transition: transform .35s;
    }

    .g-item:hover .g-item-label {
      transform: translateY(0);
    }

    .g-item-cat {
      font-family: var(--fc);
      font-size: .58rem;
      font-weight: 700;
      letter-spacing: .25em;
      text-transform: uppercase;
      color: var(--gold);
      display: block;
      margin-bottom: .2rem;
    }

    .g-item-name {
      font-family: var(--fd);
      font-size: 1.15rem;
      font-style: italic;
      font-weight: 300;
      color: var(--cream);
      display: block;
      line-height: 1.3;
    }

    .g-item-num {
      position: absolute;
      top: .8rem;
      left: 1rem;
      z-index: 3;
      font-family: var(--fd);
      font-size: 3rem;
      font-weight: 300;
      color: rgba(237, 232, 213, .07);
      line-height: 1;
    }

    .g-indicator {
      display: flex;
      gap: .4rem;
      margin-top: 1.2rem;
      justify-content: center;
    }

    .g-dot {
      width: 20px;
      height: 2px;
      background: rgba(237, 232, 213, .2);
      cursor: pointer;
      transition: all .3s;
    }

    .g-dot.active {
      width: 40px;
      background: var(--gold);
    }

      @media (max-width: 992px) {
        nav ul { display: none; } 
        .mobile-languages { display: block !important; } /* Show in mobile menu */
        .lang-switch { display: none !important; } /* Hide desktop switcher */
        .hamburger { display: block !important; color: var(--gold) !important; }
      }

      /* GALERIA MOVIL */
      @media (max-width: 768px) {
        .gw {
          padding: 3rem 0 2rem;
        }

        .gi {
          padding: 2rem 0 4rem; /* Restored breathing room */
          background: var(--navy-dark); /* Ensure background is solid dark */
        }

        .g-header {
          padding: 0 1.5rem;
          margin-bottom: 3rem; /* Extra space for premium feel */
          align-items: flex-start;
          text-align: left;
        }

        .g-header-left {
          flex: 1;
        }

        .g-eyebrow {
          font-size: 0.6rem;
          margin-bottom: 0.2rem;
          letter-spacing: 0.2em;
        }

        .g-title {
          font-size: clamp(1.3rem, 5vw, 1.7rem);
        }

        .g-nav {
          gap: 0.4rem;
          flex-shrink: 0;
          align-self: flex-end;
          padding-bottom: 0.3rem;
        }

        .g-nav-btn {
          width: 34px;
          height: 34px;
          font-size: 0.8rem;
        }

        .g-carousel-outer::before,
        .g-carousel-outer::after {
          display: none;
        }

        .g-item,
        .g-item:nth-child(odd),
        .g-item:nth-child(even),
        .g-item:nth-child(3n) {
          width: 85vw;
          height: auto;
          aspect-ratio: 4 / 3;
        }

        .g-track {
          gap: 12px;
          padding: 0; /* Removing side padding to favor JS centering */
        }

        .g-item-label {
          padding: 1rem;
          transform: translateY(0);
        }

        .g-item-name {
          font-size: 1.05rem;
        }

        .g-item-num {
          font-size: 2rem;
        }

        .g-indicator {
          margin-top: 0.8rem;
          padding: 0 1.5rem;
        }
      }

    /* Plate SVG illustrations */
    .p-bg-1 {
      background: linear-gradient(145deg, #2a4e70, #162b44);
    }

    .p-bg-2 {
      background: linear-gradient(145deg, #3a2a1e, #1e1208);
    }

    .p-bg-3 {
      background: linear-gradient(145deg, #1e3a2a, #0e1e12);
    }

    .p-bg-4 {
      background: linear-gradient(145deg, #3a1e1e, #1e0e0e);
    }

    .p-bg-5 {
      background: linear-gradient(145deg, #2a2a1e, #14140a);
    }

    .p-bg-6 {
      background: linear-gradient(145deg, #1e2a3a, #0e1422);
    }

    .p-bg-7 {
      background: linear-gradient(145deg, #2e1e3a, #16101e);
    }

    .p-bg-8 {
      background: linear-gradient(145deg, #3a2e1e, #1c1608);
    }

    /* ══════════════════════════════════════
   EXPERIENCIA
══════════════════════════════════════ */
    .sw-n {
      background: var(--navy);
    }

    .sw-d {
      background: var(--navy-dark);
    }

    .sw-c {
      background: var(--cream-light);
    }

    section {
      padding: 7rem 4rem;
      max-width: 1400px;
      margin: 0 auto;
    }

    .ey {
      font-family: var(--fc);
      font-size: .7rem;
      font-weight: 600;
      letter-spacing: .3em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .ey::before {
      content: '';
      width: 1.5rem;
      height: 1px;
      background: var(--gold);
    }

    .ey.dk {
      color: var(--navy);
    }

    .ey.dk::before {
      background: var(--navy);
    }

    .st {
      font-family: var(--fd);
      font-size: clamp(2.4rem, 4vw, 4rem);
      font-weight: 300;
      line-height: 1.1;
      color: var(--cream);
      margin-bottom: 1.5rem;
    }

    .st em {
      font-style: italic;
      color: var(--gold);
    }

    .st.dk {
      color: var(--navy-dark);
    }

    .eg {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6rem;
      align-items: center;
    }

    .et p {
      font-size: 1rem;
      font-weight: 300;
      line-height: 1.85;
      color: rgba(237, 232, 213, .72);
      margin-bottom: 1.5rem;
    }

    .eq {
      border-left: 2px solid var(--gold);
      padding-left: 1.5rem;
      margin: 2.5rem 0;
    }

    .eq p {
      font-family: var(--fd);
      font-size: 1.4rem;
      font-style: italic;
      font-weight: 300;
      color: var(--cream) !important;
      line-height: 1.5;
    }

    .epw {
      position: relative;
    }

    /* CARRUSEL LOCAL (experiencia) */
    .local-carousel {
      position: relative;
    }

    .lc-track {
      width: 100%;
      aspect-ratio: 3/4;
      overflow: hidden;
      position: relative;
    }

    .lc-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 1s ease;
    }

    .lc-slide.active {
      opacity: 1;
    }

    .lc-slide-inner {
      width: 100%;
      height: 100%;
      position: relative;
      border-radius: var(--r-md);
      overflow: hidden;
    }

    .lc-slide-inner svg {
      width: 100%;
      height: 100%;
      position: absolute;
      inset: 0;
    }

    .lc-slide-inner::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, transparent 50%, rgba(10, 30, 56, .6));
    }

    .lc-label {
      position: absolute;
      bottom: 2rem;
      left: 2rem;
      right: 2rem;
      z-index: 3;
    }

    .lc-label p {
      font-family: var(--fd);
      font-size: 1.1rem;
      font-style: italic;
      color: rgba(237, 232, 213, .85);
      line-height: 1.4;
    }

    .lc-controls {
      display: flex;
      gap: .5rem;
      margin-top: .75rem;
    }

    .lc-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(201, 168, 76, .3);
      cursor: pointer;
      transition: background .3s, transform .3s;
    }

    .lc-dot.active {
      background: var(--gold);
      transform: scale(1.3);
    }

    .lc-arrows {
      position: absolute;
      bottom: 2rem;
      right: 2rem;
      z-index: 5;
      display: flex;
      gap: .4rem;
    }

    .lc-arr {
      width: 32px;
      height: 32px;
      background: rgba(10, 30, 56, .7);
      border: 1px solid rgba(201, 168, 76, .2);
      color: var(--gold);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: .8rem;
      transition: background .2s;
    }

    .lc-arr:hover {
      background: rgba(201, 168, 76, .15);
    }

    .eb {
      position: absolute;
      top: -1.5rem;
      right: -1.5rem;
      z-index: 3;
      width: 110px;
      height: 110px;
      background: var(--gold);
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .eb span:nth-child(1) {
      font-family: var(--fc);
      font-size: .58rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--navy-dark);
    }

    .eb span:nth-child(2) {
      font-family: var(--fd);
      font-size: 1.8rem;
      font-weight: 600;
      color: var(--navy-dark);
      line-height: 1;
    }

    .eb span:nth-child(3) {
      font-family: var(--fc);
      font-size: .55rem;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--navy-dark);
      opacity: .7;
    }

    /* ══════════════════════════════════════
   SERVICIOS
══════════════════════════════════════ */
    .srv-header {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      margin-bottom: 5rem;
      align-items: end;
    }

    .srv-header p {
      font-size: .97rem;
      font-weight: 300;
      line-height: 1.8;
      color: rgba(237, 232, 213, .68);
    }

    .sg {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: rgba(201, 168, 76, .12);
    }

    .sc2 {
      background: var(--navy);
      padding: 2.5rem 2rem;
      position: relative;
      border-radius: var(--r-md);
      overflow: hidden;
      transition: background .3s;
      cursor: default;
    }

    .sc2::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--gold);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .4s ease;
    }

    .sc2:hover {
      background: rgba(27, 58, 92, .9);
    }

    .sc2:hover::before {
      transform: scaleX(1);
    }

    .sc2-num {
      font-family: var(--fd);
      font-size: 3.5rem;
      font-weight: 300;
      color: var(--gold);
      line-height: 1;
      margin-bottom: .5rem;
    }

    .sc2 h3 {
      font-family: var(--fc);
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--cream);
      margin-bottom: .7rem;
    }

    .sc2 p {
      font-size: .85rem;
      font-weight: 300;
      line-height: 1.7;
      color: rgba(237, 232, 213, .52);
    }

    /* ══════════════════════════════════════
   CARTA COMPLETA CON FILTROS
══════════════════════════════════════ */
    .carta-page {
      background: var(--cream-light);
    }

    .carta-hero {
      background: var(--navy-dark);
      padding: 5rem 4rem 4rem;
      position: relative;
      overflow: hidden;
    }

    .carta-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(201, 168, 76, .06) 0%, transparent 70%);
    }

    .carta-hero-inner {
      max-width: 1400px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: end;
    }

    .carta-hero h2 {
      font-family: var(--fd);
      font-size: clamp(2.8rem, 4.5vw, 5rem);
      font-weight: 300;
      color: var(--cream);
      line-height: 1;
    }

    .carta-hero h2 em {
      color: var(--gold);
      font-style: italic;
      display: block;
    }

    .carta-hero p {
      font-size: .95rem;
      font-weight: 300;
      line-height: 1.85;
      color: rgba(237, 232, 213, .6);
      align-self: end;
    }

    /* FILTROS */
    .carta-filters {
      background: var(--navy);
      position: sticky;
      top: 60px;
      z-index: 50;
      border-bottom: 1px solid rgba(201, 168, 76, .12);
    }
    
    .cf-nav-arrows { display: none; }

    .cf-inner {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 4rem;
      display: flex;
      align-items: stretch;
      justify-content: center;
      gap: 0;
      overflow-x: auto;
    }

    .cf-inner::-webkit-scrollbar {
      display: none;
    }

    .cf-btn {
      font-family: var(--fc);
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: rgba(237, 232, 213, .42);
      background: none;
      border: none;
      padding: .9rem 1.5rem;
      cursor: pointer;
      white-space: nowrap;
      position: relative;
      transition: color .2s;
      display: flex;
      align-items: center;
      gap: .5rem;
    }

    .cf-btn::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--gold);
      transform: scaleX(0);
      transition: transform .25s;
    }

    .cf-btn.act {
      color: var(--cream);
    }

    .cf-btn.act::after {
      transform: scaleX(1);
    }

    .cf-btn:hover {
      color: rgba(237, 232, 213, .8);
    }

    .cf-count {
      display: none !important;
    }

    /* CARTA BODY */
    .carta-body {
      max-width: 1400px;
      margin: 0 auto;
      padding: 4rem;
    }

    .cat-block {
      margin-bottom: 5rem;
    }

    .cat-block.vis {
      opacity: 1;
      transform: translateY(0);
    }

    .cat-block[data-hidden="true"] {
      display: none;
    }

    .cat-header {
      display: flex;
      align-items: center;
      gap: 2rem;
      margin-bottom: 2.5rem;
      padding-bottom: 1.2rem;
      border-bottom: 1px solid rgba(27, 58, 92, .15);
    }

    .cat-icon {
      width: 48px;
      height: 48px;
      background: var(--navy-dark);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .cat-icon svg {
      width: 22px;
      height: 22px;
      stroke: var(--gold);
      fill: none;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .cat-title {
      font-family: var(--fd);
      font-size: 2rem;
      font-weight: 400;
      color: var(--navy-dark);
    }

    .cat-subtitle {
      font-size: .8rem;
      font-weight: 300;
      color: rgba(27, 58, 92, .5);
      margin-top: .15rem;
      font-style: italic;
    }

    .cat-badge {
      font-family: var(--fc);
      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      background: var(--navy-dark);
      color: var(--gold);
      padding: .3rem .7rem;
      border-radius: var(--r-sm);
      margin-left: auto;
      flex-shrink: 0;
    }

    /* ITEMS DE CARTA */
    .menu-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0;
    }

    .mi {
      padding: 1.1rem 0;
      border-bottom: 1px solid rgba(27, 58, 92, .1);
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: baseline;
      gap: 2rem;
      transition: background .2s, padding .2s;
      cursor: default;
    }

    .mi:hover {
      background: rgba(27, 58, 92, .04);
      padding-left: .8rem;
      padding-right: .8rem;
    }

    .mi-name {
      font-family: var(--fb);
      font-size: .93rem;
      font-weight: 500;
      color: var(--navy-dark);
      margin-bottom: .15rem;
    }

    .mi-desc {
      font-size: .78rem;
      font-weight: 300;
      color: rgba(27, 58, 92, .5);
      font-style: italic;
      line-height: 1.5;
    }

    .mi-tags {
      display: flex;
      gap: .3rem;
      margin-top: .3rem;
      flex-wrap: wrap;
    }

    .mi-tag {
      font-family: var(--fc);
      font-size: .55rem;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: .15rem .5rem;
      border: 1px solid;
    }

    .mi-tag.v {
      border-color: rgba(34, 100, 60, .4);
      color: rgba(34, 100, 60, .7);
    }

    .mi-tag.h {
      border-color: rgba(200, 100, 30, .4);
      color: rgba(200, 100, 30, .7);
    }

    .mi-tag.s {
      border-color: rgba(100, 50, 150, .4);
      color: rgba(100, 50, 150, .7);
    }

    .mi-tag.alg {
      border-color: transparent;
      background: rgba(201, 168, 76, .12);
      color: var(--gold);
      font-size: .5rem;
      padding: 1px 4px;
    }

    .mi-price {
      font-family: var(--fd);
      font-size: 1.3rem;
      font-weight: 400;
      color: var(--navy-dark);
      white-space: nowrap;
    }

    .mi-price small {
      font-family: var(--fc);
      font-size: .7rem;
      color: rgba(27, 58, 92, .4);
      font-style: normal;
      margin-left: .2rem;
    }

    /* CARTA DESTAQUE — platos especiales */
    .destaque-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: rgba(27, 58, 92, .1);
      margin-bottom: 2.5rem;
    }

    .destaque-item {
      background: var(--cream-light);
      padding: 2rem;
      position: relative;
      border-radius: var(--r-md);
      overflow: hidden;
      transition: background .25s;
    }

    .destaque-item:hover {
      background: #ede8d5;
    }

    .destaque-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 3px;
      height: 0;
      background: var(--navy-dark);
      transition: height .4s;
    }

    .destaque-item:hover::before {
      height: 100%;
    }

    .di-label {
      font-family: var(--fc);
      font-size: .6rem;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: .5rem;
      display: flex;
      align-items: center;
      gap: .5rem;
    }

    .di-label::before {
      content: '';
      width: .8rem;
      height: 1px;
      background: var(--gold);
    }

    .di-name {
      font-family: var(--fd);
      font-size: 1.35rem;
      font-weight: 400;
      color: var(--navy-dark);
      margin-bottom: .4rem;
      line-height: 1.2;
    }

    .di-desc {
      font-size: .78rem;
      font-weight: 300;
      color: rgba(27, 58, 92, .55);
      line-height: 1.55;
      margin-bottom: 1rem;
    }

    .di-price {
      font-family: var(--fd);
      font-size: 1.6rem;
      font-weight: 300;
      color: var(--navy);
    }

    .di-price sup {
      font-size: .8rem;
      vertical-align: super;
      font-weight: 400;
    }

    /* MENÚ COMPARTIDO CARD */
    /* ── MENÚ COMPARTIDO (PREMIUM REDESIGN) ── */
    .sharing-block {
      background: #0d1f35;
      padding: 6rem 4rem;
      margin: 4rem 0 6rem;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      border: 1px solid rgba(201, 168, 76, 0.15);
      border-radius: var(--r-lg);
      overflow: hidden;
      box-shadow: 0 40px 100px rgba(0,0,0,0.4);
    }

    .sharing-block::before {
      content: 'MENU';
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      font-family: var(--fd);
      font-size: 15rem;
      color: rgba(201, 168, 76, 0.025);
      white-space: nowrap;
      pointer-events: none;
      z-index: 0;
      letter-spacing: 0.2em;
    }

    .sb-left {
      text-align: center;
      margin-bottom: 4rem;
      z-index: 1;
      max-width: 700px;
    }

    .sb-left h3 {
      font-family: var(--fd);
      font-size: 4rem;
      font-weight: 300;
      color: var(--gold);
      margin-bottom: 1.5rem;
      line-height: 1.1;
    }

    .sb-left p {
      font-size: 1.15rem;
      font-weight: 300;
      line-height: 1.6;
      color: rgba(237, 232, 213, 0.6);
      margin: 0;
    }

    .sb-right {
      width: 100%;
      max-width: 900px;
      z-index: 1;
      margin-bottom: 4.5rem;
    }

    .sb-right ul {
      list-style: none;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem 5rem;
      padding: 0;
    }

    .sb-right li {
      font-size: 1.1rem;
      font-weight: 300;
      color: var(--cream);
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 0.8rem 0;
      border-bottom: 1px solid rgba(201, 168, 76, 0.1);
      transition: all 0.3s ease;
    }

    .sb-right li::before {
      content: '—';
      color: var(--gold);
      font-weight: bold;
      flex-shrink: 0;
    }

    .sb-right li:hover {
      color: var(--gold);
      border-bottom-color: var(--gold);
      padding-left: 0.5rem;
    }

    .price-row {
      display: flex;
      gap: 2rem;
      justify-content: center;
      flex-wrap: wrap;
      z-index: 1;
    }

    .ptag {
      background: rgba(201, 168, 76, 0.08);
      border: 1px solid rgba(201, 168, 76, 0.3);
      padding: 1.5rem 3rem;
      border-radius: var(--r-md);
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 160px;
      transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .ptag:hover {
      background: rgba(201, 168, 76, 0.12);
      transform: translateY(-5px);
      border-color: var(--gold);
    }

    .ptag.alt {
      background: var(--gold);
      color: var(--navy-dark);
      border-color: var(--gold);
    }

    .ptag.alt strong { color: var(--navy-dark); }
    .ptag.alt small { color: rgba(15, 37, 64, 0.8); }

    .ptag strong {
      font-family: var(--fd);
      font-size: 2.5rem;
      font-weight: 500;
      line-height: 1;
      margin-bottom: 0.4rem;
      color: var(--gold);
    }

    .ptag small {
      font-family: var(--fc);
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.15em;
      text-transform: uppercase;
    }

    /* ══════════════════════════════════════
   VISION
══════════════════════════════════════ */
    .vis-wrap {
      background: var(--navy-dark);
      position: relative;
      overflow: hidden;
    }

    .vis-glow {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(201, 168, 76, .05) 0%, transparent 70%);
      pointer-events: none;
    }

    .vis-inner {
      max-width: 900px;
      margin: 0 auto;
      padding: 9rem 4rem;
      text-align: center;
      position: relative;
      z-index: 1;
    }

    .vis-q {
      font-family: var(--fd);
      font-size: clamp(2rem, 4vw, 3.5rem);
      font-weight: 300;
      font-style: italic;
      line-height: 1.3;
      color: var(--cream);
      margin-bottom: 1.5rem;
    }

    .vis-q em {
      color: var(--gold);
      font-style: normal;
    }

    .vis-sub {
      font-size: .88rem;
      font-weight: 300;
      color: rgba(237, 232, 213, .45);
      letter-spacing: .05em;
      margin-bottom: 3rem;
    }

    .vis-div {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      margin-bottom: 3.2rem;
      padding: .15rem 0;
    }

    .vis-div span {
      flex: 1;
      max-width: 3rem;
      height: 2.5px;
      border-radius: 2px;
      background: #C9A646;
      opacity: .95;
      transition: max-width .3s ease, opacity .3s ease;
    }

    .vis-div i {
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 1;
      margin: 0 .35rem;
    }

    .vis-logo {
      width: clamp(82px, 12vw, 120px);
      height: auto;
      display: block;
      margin: 0;
      filter: drop-shadow(0 0 10px rgba(0, 0, 0, .15)) brightness(0) invert(1);
      transition: filter .3s ease, transform .3s ease;
    }

    .vis-logo:hover {
      transform: scale(1.02);
    }

    @media (max-width: 992px) {
      .vis-div span {
        max-width: 2.4rem;
      }

      .vis-logo {
        width: clamp(68px, 14vw, 90px);
      }
    }

    @media (max-width: 600px) {
      .vis-div {
        gap: .7rem;
        margin-bottom: 2.2rem;
      }

      .vis-div span {
        max-width: 1.8rem;
        height: 1.8px;
        opacity: .85;
      }

      .vis-logo {
        max-width: 78px;
      }
    }

    /* ══════════════════════════════════════
   EQUIPO
══════════════════════════════════════ */
    .eq-grid {
      display: flex;
      justify-content: center;
      gap: 3rem;
      margin-top: 4rem;
    }

    .cc {
      border: 1px solid rgba(201, 168, 76, .15);
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 3.5rem;
      padding: 3.5rem;
      width: 100%; /* Force width for centering in flex parent */
      max-width: 900px;
      margin: 0 auto; /* Extra safety for centering */
      position: relative;
      border-radius: var(--r-md);
      overflow: hidden;
      transition: border-color .3s;
    }

    .cc:hover {
      border-color: rgba(201, 168, 76, .4);
    }

    .cc::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 3px;
      height: 0;
      background: var(--gold);
      transition: height .4s;
    }

    .cc:hover::before {
      height: 100%;
    }

    .cph {
      width: 220px; /* Even larger for impact */
      height: 280px; /* Rectangular for more 'executive' feel */
      border-radius: var(--r-md);
      overflow: hidden;
      border: 2px solid rgba(201, 168, 76, .25);
      flex-shrink: 0;
      position: relative;
      transition: transform .3s, border-color .3s;
    }

    .cph:hover {
      transform: scale(1.1);
      border-color: var(--gold);
      z-index: 2;
    }

    .cph-inner {
      width: 100%;
      height: 100%;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--fd);
      font-size: 1.8rem;
      font-weight: 300;
      color: rgba(201, 168, 76, .4);
    }

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

    .crl {
      font-family: var(--fc);
      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: .3rem;
    }

    .cnm {
      font-family: var(--fd);
      font-size: 1.55rem;
      font-weight: 400;
      color: var(--cream);
      margin-bottom: .7rem;
    }

    .cbi {
      font-size: .82rem;
      font-weight: 300;
      line-height: 1.7;
      color: rgba(237, 232, 213, .52);
      margin-bottom: 1rem;
    }

    .ctg {
      display: flex;
      flex-wrap: wrap;
      gap: .4rem;
    }

    .ctag {
      font-family: var(--fc);
      font-size: .58rem;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      background: rgba(201, 168, 76, .1);
      color: var(--gold);
      padding: .2rem .6rem;
    }

    /* ══════════════════════════════════════
   RESERVA
══════════════════════════════════════ */
    .rg {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6rem;
      align-items: center;
    }

    .rl h2 {
      font-family: var(--fd);
      font-size: clamp(2.5rem, 4vw, 4rem);
      font-weight: 300;
      color: var(--cream);
      line-height: 1.1;
      margin-bottom: 1.5rem;
    }

    .rl h2 em {
      color: var(--gold);
      font-style: italic;
    }

    .rl p {
      font-size: .95rem;
      font-weight: 300;
      line-height: 1.8;
      color: rgba(237, 232, 213, .62);
      margin-bottom: 2.5rem;
    }

    .il {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .ir {
      display: flex;
      align-items: center;
      gap: 1rem;
      font-size: .875rem;
      color: rgba(237, 232, 213, .55);
    }

    .ir strong {
      font-family: var(--fc);
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--gold);
      min-width: 80px;
    }

    .rf {
      background: rgba(10, 24, 40, .65);
      border: 1px solid rgba(201, 168, 76, .15);
      padding: 3rem;
      border-radius: var(--r-lg);
    }

    .rft {
      font-family: var(--fd);
      font-size: 1.5rem;
      font-weight: 300;
      color: var(--cream);
      margin-bottom: .3rem;
    }

    .rfs {
      font-size: .78rem;
      color: rgba(237, 232, 213, .38);
      margin-bottom: 2rem;
      font-weight: 300;
    }

    .frw {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin-bottom: 1rem;
    }

    .fg {
      display: flex;
      flex-direction: column;
      gap: .35rem;
      margin-bottom: 1rem;
    }

    .fg label {
      font-family: var(--fc);
      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: rgba(237, 232, 213, .45);
    }

    .fg input,
    .fg select,
    .fg textarea {
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(201, 168, 76, .14);
      padding: .75rem 1rem;
      font-family: var(--fb);
      font-size: .875rem;
      font-weight: 300;
      color: var(--cream);
      border-radius: var(--r-sm);
      outline: none;
      transition: border-color .2s;
      -webkit-appearance: none;
      appearance: none;
    }

    .fg input::placeholder {
      color: rgba(237, 232, 213, .22);
    }

    .fg input:focus,
    .fg select:focus,
    .fg textarea:focus {
      border-color: rgba(201, 168, 76, .45);
    }

    .fg select option {
      background: var(--navy-dark);
      color: var(--cream);
    }

    .bfm {
      width: 100%;
      background: var(--gold);
      color: var(--navy-dark);
      border: none;
      padding: 1rem;
      border-radius: var(--r-sm);
      font-family: var(--fc);
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background .2s, transform .2s;
    }

    .bfm:hover {
      background: var(--gold-light);
      transform: translateY(-1px);
    }

    /* ══════════════════════════════════════
   SCROLL REVEAL
══════════════════════════════════════ */
    .rv {
      transition: opacity .85s ease;
    }

    .rv.vis {
      opacity: 1;
      transform: translateY(0);
    }

    .d1 {
      transition-delay: .12s;
    }

    .d2 {
      transition-delay: .24s;
    }

    .d3 {
      transition-delay: .36s;
    }

    /* Slide from left/right */
    .rl-left {
      transition: opacity .9s ease;
    }

    .rl-left.vis {
      opacity: 1;
      transform: translateX(0);
    }

    .rl-right {
      transition: opacity .9s ease;
    }

    .rl-right.vis {
      opacity: 1;
      transform: translateX(0);
    }

    /* Scale in */
    .rs {
      transition: opacity .8s ease;
    }

    .rs.vis {
      opacity: 1;
      transform: scale(1);
    }

    /* ══════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════ */
    @keyframes fu {
      from {
        opacity: 0;
        transform: translateY(22px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    @keyframes fi {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    /* ══════════════════════════════════════
   PARALLAX QUOTE
══════════════════════════════════════ */
    .pq-wrap {
      background: var(--navy);
      overflow: hidden;
      position: relative;
    }

    .pq-inner {
      max-width: 1400px;
      margin: 0 auto;
      padding: 6rem 4rem;
      display: flex;
      align-items: center;
      gap: 4rem;
    }

    .pq-line {
      width: 3px;
      height: 80px;
      background: var(--gold);
      flex-shrink: 0;
    }

    .pq-text {
      font-family: var(--fd);
      font-size: clamp(1.5rem, 2.5vw, 2.4rem);
      font-weight: 300;
      font-style: italic;
      color: var(--cream);
      line-height: 1.45;
    }

    .pq-text em {
      color: var(--gold);
      font-style: normal;
    }

    .pq-attr {
      font-family: var(--fc);
      font-size: .68rem;
      font-weight: 600;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: rgba(237, 232, 213, .4);
      margin-top: .75rem;
    }

    /* ══════════════════════════════════════


    /* ──── COOKIE NOTICE CENTRAL (ESTILO MODAL) ──── */
    #cookieConsent {
      position: fixed;
      top: 50%;
      left: 50%;
      width: 400px;
      max-width: calc(100% - 3rem);
      z-index: 99999;
      background: rgba(255, 255, 255, 1); /* Blanco sólido para máxima legibilidad en el centro */
      border-radius: 2rem;
      padding: 3rem;
      box-shadow: 0 30px 60px rgba(0,0,0,0.25);
      
      /* Centrado exacto y animación de escala */
      transform: translate(-50%, -50%) scale(0.8);
      opacity: 0;
      visibility: hidden;
      transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #cookieConsent.show {
      opacity: 1;
      visibility: visible;
      transform: translate(-50%, -50%) scale(1);
    }

    /* Opcional: Capa oscura detrás del aviso para centrar la atención */
    #cookieConsent.show::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 200vw;
      height: 200vh;
      background: rgba(15, 37, 64, 0.4);
      backdrop-filter: blur(4px);
      z-index: -1;
      transform: translate(-50%, -50%);
    }

    #cookieConsent h4 {
      font-family: var(--fd);
      font-size: 1.8rem;
      color: #1a1a1a;
      margin-bottom: 1.2rem;
      font-weight: 600;
      line-height: 1.2;
      text-align: center;
    }

    .cc-text {
      font-size: 1rem;
      color: #555;
      line-height: 1.6;
      margin-bottom: 2.5rem;
      text-align: center;
    }

    .cc-btns {
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
    }

    .cc-btn {
      font-family: var(--fc);
      font-size: 0.95rem;
      font-weight: 600;
      padding: 1.2rem;
      cursor: pointer;
      border: none;
      border-radius: 5rem;
      transition: all 0.25s ease;
      width: 100%;
      text-align: center;
    }

    .cc-accept {
      background: #2d3436;
      color: #ffffff;
    }

    .cc-accept:hover {
      background: #000000;
      transform: scale(1.02);
    }

    .cc-reject {
      background: #2d3436;
      color: #ffffff;
    }

    .cc-reject:hover {
      background: #000000;
      transform: scale(1.02);
    }

    .cc-settings {
      background: #f1f2f6;
      color: #2d3436;
    }

    .cc-settings:hover {
      background: #e1e2e6;
    }

    @media (max-width: 768px) {
      #cookieConsent {
        width: calc(100% - 2.5rem);
        padding: 2.5rem 2rem;
      }
      #cookieConsent h4 { font-size: 1.5rem; }
      .cc-text { font-size: 0.9rem; margin-bottom: 2rem; }
      .cc-btn { padding: 1.1rem; font-size: 0.9rem; }
    }

    /* ── PANEL DE PREFERENCIAS DE COOKIES ── */
    .cc-back {
      background: none;
      border: none;
      color: #888;
      font-family: var(--fb);
      font-size: 0.85rem;
      cursor: pointer;
      padding: 0;
      margin-bottom: 1.2rem;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: color 0.2s;
    }
    .cc-back:hover { color: #1a1a1a; }

    .cc-toggle-list {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-bottom: 0.5rem;
    }

    .cc-toggle-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1rem 0;
      border-bottom: 1px solid #f0f0f0;
    }
    .cc-toggle-item:last-child { border-bottom: none; }

    .cc-toggle-info {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .cc-toggle-info strong {
      font-family: var(--fb);
      font-size: 0.9rem;
      font-weight: 600;
      color: #1a1a1a;
    }
    .cc-toggle-info span {
      font-family: var(--fb);
      font-size: 0.78rem;
      color: #888;
      line-height: 1.4;
    }

    /* Toggle switch (estilo iPhone) */
    .cc-switch {
      position: relative;
      display: inline-block;
      width: 48px;
      height: 27px;
      flex-shrink: 0;
      cursor: pointer;
    }
    .cc-switch input { opacity: 0; width: 0; height: 0; }
    .cc-slider {
      position: absolute;
      inset: 0;
      background: #ddd;
      border-radius: 27px;
      transition: background 0.3s;
    }
    .cc-slider::before {
      content: '';
      position: absolute;
      width: 21px;
      height: 21px;
      left: 3px;
      bottom: 3px;
      background: white;
      border-radius: 50%;
      transition: transform 0.3s;
      box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    }
    .cc-switch input:checked + .cc-slider { background: var(--gold); }
    .cc-switch input:checked + .cc-slider::before { transform: translateX(21px); }
    .cc-switch--disabled { cursor: not-allowed; opacity: 0.6; }

    /* ══════════════════════════════════════
   MEJORAS VISUALES PREMIUM · Abril 2026
══════════════════════════════════════ */

    /* ── Scroll Reveal: añadir translateY inicial para que la animación sea visible ── */
    .rv    { opacity: 0; transform: translateY(28px); }
    .rl-left  { opacity: 0; transform: translateX(-28px); }
    .rl-right { opacity: 0; transform: translateX(28px); }
    .rs    { opacity: 0; transform: scale(0.97); }

    /* ── Botón primario (bp): pulso sutil en hover ── */
    .bp {
      box-shadow: 0 0 0 0 rgba(201, 168, 76, 0);
      transition: background var(--t-mid), transform var(--t-mid), box-shadow var(--t-mid);
    }
    .bp:hover {
      box-shadow: 0 6px 24px rgba(201, 168, 76, 0.28);
    }

    /* ── Botón submit formulario: mismo tratamiento ── */
    .bfm {
      transition: background var(--t-mid), transform var(--t-mid), box-shadow var(--t-mid);
    }
    .bfm:hover {
      box-shadow: 0 6px 20px rgba(201, 168, 76, 0.25);
    }

    /* ── Inputs del formulario: glow dorado en focus ── */
    .fg input:focus,
    .fg select:focus,
    .fg textarea:focus {
      box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.10);
    }

    /* ── Tarjetas de servicio: sombra al hover ── */
    .sc2 {
      transition: background var(--t-mid), box-shadow var(--t-mid);
    }
    .sc2:hover {
      box-shadow: var(--shadow-card);
    }

    /* ── Destaque items: glow dorado sutil en hover ── */
    .destaque-item {
      transition: background var(--t-mid), box-shadow var(--t-mid);
    }
    .destaque-item:hover {
      box-shadow: inset 0 0 0 1px rgba(201, 168, 76, 0.18), var(--shadow-card);
    }

    /* ── Cards de equipo: transición más expresiva ── */
    .cc {
      transition: border-color var(--t-mid), box-shadow var(--t-mid);
    }
    .cc:hover {
      box-shadow: var(--shadow-card);
    }

    /* ── Imagen de equipo: escala contenida (el hover anterior era demasiado grande) ── */
    .cph:hover {
      transform: scale(1.04);
    }

    /* ── Navegación: línea de subrayado más elegante ── */
    nav ul a::after {
      transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s;
    }

    /* ── Botones de galería: transición más suave ── */
    .g-nav-btn {
      transition: background var(--t-mid), border-color var(--t-mid), transform var(--t-fast);
    }
    .g-nav-btn:hover {
      transform: scale(1.05);
    }

    /* ── Cookie consent: sombra de profundidad ── */
    #cookieConsent {
      box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.35);
    }

    /* ── Mejora de accesibilidad: foco visible en botones ── */
    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    select:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 3px;
    }

    /* ── Precio de destaque: acentuar el color gold en platos estrella ── */
    .di-price {
      color: var(--navy);
      transition: color var(--t-fast);
    }
    .destaque-item:hover .di-price {
      color: var(--navy-dark);
    }

    /* ── Animación de fade para el ticker (más premium) ── */
    .tkw {
      mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
      -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    }


/* ── Bloque CSS extraido del HTML (seccion body) ── */
      .allergen-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 1rem;
      }

      .alg-card {
        background: rgba(27, 58, 92, .03);
        border: 1px solid rgba(27, 58, 92, .06);
        padding: 1.8rem .5rem .8rem;
        text-align: center;
        position: relative;
        transition: all .3s ease;
      }

      .alg-card:hover {
        border-color: var(--gold);
        background: rgba(201, 168, 76, .05);
        transform: translateY(-4px);
      }

      .alg-num {
        display: inline-flex;
        position: absolute;
        top: .5rem;
        left: .5rem;
        width: 1.45rem;
        height: 1.45rem;
        border-radius: 999px;
        align-items: center;
        justify-content: center;
        font-family: var(--fc);
        font-size: .65rem;
        font-weight: 700;
        color: var(--navy-dark);
        background: var(--gold);
        border: 1px solid rgba(201, 168, 76, .4);
        opacity: 1;
      }

      .alg-num::after {
        content: '.';
      }

      .alg-icon {
        width: 24px;
        height: 24px;
        margin: 0 auto .6rem;
        color: var(--gold);
      }

      .alg-icon svg {
        width: 100%;
        height: 100%;
      }

      .alg-name {
        font-family: var(--fc);
        font-size: .55rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--navy);
        display: block;
      }

      @media (max-width: 992px) {
        .allergen-grid {
          grid-template-columns: repeat(4, 1fr);
        }
      }

      @media (max-width: 600px) {
        .allergen-grid {
          grid-template-columns: repeat(3, 1fr);
        }
      }
    

    /* ══════════════════════════════════════
       GLOBAL RESPONSIVE OVERRIDES (MOBILE ARMOR)
       ══════════════════════════════════════ */
    @media (max-width: 992px) {
      html, body { overflow-x: hidden !important; width: 100vw !important; position: relative; }
      
      section { padding: 3rem 1.25rem !important; width: 100% !important; max-width: 100vw !important; box-sizing: border-box !important; }
      
      nav { padding: 1rem 1.25rem !important; width: 100% !important; box-sizing: border-box !important; }
      nav ul { display: none !important; } 
      nav ul.active { display: flex !important; } 
      
      .hamburger { 
        display: block !important; 
        order: 3 !important; 
        color: var(--gold) !important;
        position: relative !important;
        z-index: 201;
      }
      
      .lang-switch { display: none !important; }

      /* Force 1-Column for ALL major grids */
      .eq-grid, .sg, .srv-grid, .fg2, .carta-grid, .destaque-grid, .frw, .rg, .menu-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
      }

      /* Equipo / Star Chef Mobile */
      .cc {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        padding: 2.5rem 1.25rem !important;
        text-align: center !important;
        max-width: 100% !important;
        align-items: center !important;
      }
      .cph {
        margin: 0 auto 2rem !important;
        width: 200px !important;
        height: 250px !important;
      }
      .cnm { font-size: 2rem !important; }
      .cbi { max-width: 100% !important; margin: 0 auto !important; font-size: 1rem !important; }
      .ctg { justify-content: center !important; }

      /* Vision / Cultura */
      .vis-inner { padding: 3rem 1.25rem !important; width: 100% !important; box-sizing: border-box !important; }
      .vis-q { font-size: 1.8rem !important; line-height: 1.2 !important; }
      
      /* Services / Carta */
      .sc2 { width: 100% !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box !important; }
      .mi { grid-template-columns: 1fr !important; text-align: center !important; padding: 1.5rem 0 !important; }
      .mi-price { margin-top: 0.5rem !important; position: static !important; }
    }



/* ── Bloque CSS extraido del HTML (seccion body) ── */
    @media (max-width: 992px) {
      /* RESET */
      * { box-sizing: border-box !important; }
      html, body { overflow-x: hidden !important; width: 100vw !important; margin: 0 !important; padding: 0 !important; }
      
      /* NAV FIX */
      nav { padding: 1rem 1.25rem !important; display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; left: 0 !important; }
      nav ul { display: none !important; }
      nav ul.active { 
        display: flex !important; 
        position: fixed !important; 
        top: 60px !important; 
        left: 0 !important; 
        width: 100% !important; 
        height: calc(100vh - 60px) !important; 
      }
      .hamburger { display: block !important; order: 3 !important; color: var(--gold) !important; visibility: visible !important; opacity: 1 !important; width: 40px !important; height: 40px !important; }
      .lang-switch { display: none !important; }
      .nl { flex: 1 !important; max-width: 200px !important; }

      /* GENERAL CONTAINERS */
      section, .vis-inner, .hcont, .fg2, .rg, .Carta { 
        width: 100% !important; 
        max-width: 100vw !important; 
        padding-left: 1.25rem !important; 
        padding-right: 1.25rem !important; 
        margin: 0 !important;
      }
      
      /* GRIDS */
      .eg, .srv-header, .sg, .eq-grid, .srv-grid, .carta-grid, .destaque-grid, .frw, .menu-grid, .rg {
        display: flex !important;
        flex-direction: column !important;
      }
      
      .eg { gap: 1.5rem !important; text-align: center !important; align-items: center !important; }
      .rl-right, .rl-left { width: 100% !important; max-width: 100% !important; display: block !important; }
      .srv-header { gap: 1rem !important; margin-bottom: 0 !important; text-align: left !important; align-items: flex-start !important; }
      
      .eb { position: relative !important; top: 0 !important; right: 0 !important; margin: 2rem auto !important; width: 90px !important; height: 90px !important; font-size: 0.85rem !important; }
      .lc-track { aspect-ratio: 1/1 !important; width: 100% !important; }
      .eq { border-left: none !important; border-top: 2px solid var(--gold) !important; padding: 1.5rem 0 0 !important; margin: 2rem 0 !important; }

      /* Services / Carta */
      .sg { background: transparent !important; gap: 1rem !important; }
      .sc2 { 
        width: 100% !important; 
        max-width: 100% !important; 
        margin: 0 !important; 
        padding: 2rem 1.5rem !important;
        box-sizing: border-box !important; 
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 6px !important;
        background: rgba(15, 37, 64, 0.6) !important;
        text-align: left !important;
      }
      .sc2 > div:first-child { margin-left: 0 !important; margin-right: 0 !important; display: block !important; } /* Left align icons */

      /* TEAM / CHEF */
      .cc {
        display: block !important;
        text-align: center !important;
        padding: 3rem 1.5rem !important;
      }
      .cph {
        width: 180px !important;
        height: 240px !important;
        margin: 0 auto 2rem !important;
      }
      .cnm { font-size: 1.8rem !important; display: block !important; margin: 1rem 0 !important; color: var(--cream) !important; }
      .cbi { color: rgba(237,232,213,0.85) !important; display: block !important; margin-bottom: 2rem !important; }
      .ctg { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; }

      /* CARTA PRICES & DESTAQUE - Everything Left, Price Right */
      .mi { 
        display: grid !important; 
        grid-template-columns: 1fr auto !important;
        grid-template-areas: "name price" "desc desc" "tags tags" !important;
        padding: 1.25rem 0 !important; 
        border-bottom: 1px solid rgba(27, 58, 92, 0.08) !important;
        background: transparent !important;
        gap: 0.2rem 1.5rem !important;
        transition: transform 0.2s ease !important;
      }
      .mi-name { grid-area: name !important; font-size: 1rem !important; font-weight: 500 !important; color: var(--navy-dark) !important; text-align: left !important; }
      .mi-price { grid-area: price !important; font-family: var(--fc) !important; font-size: 1.1rem !important; color: var(--navy-dark) !important; text-align: right !important; align-self: flex-start !important; }
      .mi-desc { grid-area: desc !important; font-size: 0.85rem !important; color: rgba(27, 58, 92, 0.6) !important; text-align: left !important; line-height: 1.4 !important; }
      .mi-tags { grid-area: tags !important; display: flex !important; flex-wrap: wrap !important; gap: 0.4rem !important; margin-top: 0.4rem !important; justify-content: flex-start !important; }
      
      .destaque-item { 
        display: grid !important; 
        grid-template-columns: 1fr auto !important;
        grid-template-areas: "label label" "name price" "desc desc" !important;
        padding: 1.5rem !important; 
        border: 1px solid rgba(27, 58, 92, 0.15) !important; 
        border-radius: 8px !important;
        background: rgba(27, 58, 92, 0.02) !important;
        margin-bottom: 1.5rem !important;
        gap: 0.3rem 1rem !important;
        box-sizing: border-box !important;
        text-align: left !important;
      }
      .di-label { grid-area: label !important; text-align: left !important; margin-bottom: 0.4rem !important; }
      .di-name { grid-area: name !important; text-align: left !important; font-family: var(--fd) !important; font-size: 1.2rem !important; }
      .di-price { grid-area: price !important; text-align: right !important; align-self: flex-start !important; color: var(--navy-dark) !important; font-size: 1.1rem !important; }
      .di-desc { grid-area: desc !important; text-align: left !important; font-size: 0.9rem !important; opacity: 0.7 !important; }

      .mi:active, .destaque-item:active { transform: scale(0.98) !important; }
      .destaque-grid { background: transparent !important; gap: 0 !important; }
      .destaque-item::before { display: none !important; }
      .cf-inner { justify-content: flex-start !important; padding: 0 1.25rem !important; }

      /* POWERFUL TITLES */
      .st, .g-title { font-size: 2.8rem !important; line-height: 1.1 !important; margin-bottom: 2rem !important; }
      .ey, .g-eyebrow { font-size: 0.8rem !important; letter-spacing: 0.25em !important; margin-bottom: 1rem !important; }

      /* RESERVATION INFO */
      .il { align-items: flex-start !important; text-align: left !important; }
      .ir { 
        flex-direction: column !important; 
        align-items: flex-start !important; 
        gap: 0.2rem !important; 
        margin-bottom: 0.5rem !important;
      }
      .ir strong { color: var(--gold) !important; font-size: 0.75rem !important; }

      /* SHARING BLOCK MOBILE FIX */
      .sharing-block {
        padding: 5rem 1rem !important;
        margin: 3rem -1.25rem !important;  /* Expand beyond parent padding */
        width: calc(100% + 2.5rem) !important;
        gap: 0 !important;
        text-align: center !important;
        border-left: none !important;
        border-right: none !important;
        border-radius: 0 !important;
      }
      .sharing-block::before {
        font-size: 8rem !important;
        top: 15% !important;
        opacity: 0.05 !important;
      }
      .sb-left { margin-bottom: 3rem !important; }
      .sb-left h3 { font-size: 2.6rem !important; }
      .sb-left p { font-size: 1rem !important; }
      .sb-right { margin-bottom: 3.5rem !important; }
      .sb-right ul {
        grid-template-columns: 1fr !important;
        gap: 0.8rem !important;
        padding: 0 0.5rem !important;
      }
      .sb-right li {
        font-size: 1rem !important;
        padding: 1rem 0 !important;
        justify-content: center !important;
        text-align: center !important;
        border-bottom: 1px solid rgba(201, 168, 76, 0.1) !important;
      }
      .sb-right li::before { display: none !important; }
      .price-row { gap: 1rem !important; }
      .ptag { padding: 1.2rem 1.5rem !important; min-width: 130px !important; }
      .ptag strong { font-size: 2rem !important; }
    }