/* ============================================================
   menu-shared.css — "La Carta del Club Náutico"
   Componente compartido entre bar-flotante.html, planchon.html y bote.html.
   Editar este archivo (junto con menu-shared.js) actualiza el menú en
   las 3 páginas a la vez. Depende de las variables --brown-dark, --brown,
   --brown-soft, --gold, --gold-light, --cream, --cream-soft ya definidas
   en el :root de cada página, y de las clases base .section/.section-head/
   .divider/.btn-primary ya existentes en cada página.
   ============================================================ */

/* Fondo del menú: antes era un color plano (var(--brown-dark) a
   secas). Ahora combina, en un solo elemento y sin pseudo-elementos
   superpuestos (para no repetir el bug de capas de fondo que ya
   pasó con los hero de planchón/bote — ver comentario ahí), tres
   capas de "background":
     1. un viñeteado radial sutil arriba/abajo para dar profundidad
     2. un patrón de olas en dorado casi invisible (SVG inline, sin
        pedir ninguna imagen extra) para el guiño "náutico"
     3. el degradado base entre --brown-dark y --brown de la página
   Como usa las variables de cada página, el fondo ya sale distinto
   (cálido en Bar Flotante, teal en Planchón, navy en Bote) sin
   tocar nada más acá. */
.menu-section{
  position:relative;
  background-color:var(--brown-dark);
  background-image:
    radial-gradient(ellipse 140% 60% at 50% -10%, transparent 55%, rgba(0,0,0,0.38) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='48'%3E%3Cpath d='M0 24 Q35 4 70 24 T140 24' stroke='%23f0c96a' stroke-width='1' fill='none' opacity='0.06'/%3E%3C/svg%3E"),
    linear-gradient(160deg, var(--brown-dark) 0%, var(--brown-dark) 55%, var(--brown) 145%);
  background-repeat:no-repeat, repeat, no-repeat;
  background-size:100% 100%, 140px 48px, 100% 100%;
  box-shadow:inset 0 1px 0 rgba(240,201,106,0.22), inset 0 -1px 0 rgba(240,201,106,0.12);
}
  .menu-section .section-head .eyebrow{color:var(--gold-light);}
  .menu-section .section-head h2{color:var(--cream);}
  .menu-section .section-head p{color:#c9baa4;}
  .menu-note{
    max-width:760px;margin:0 auto 40px;background:rgba(240,201,106,0.1);border:1px solid rgba(240,201,106,0.35);
    border-radius:12px;padding:16px 22px;text-align:center;color:var(--gold-light);font-size:0.9rem;
  }

  /* Botón para descargar el PDF del menú — pensado para que lo puedan
     guardar en el teléfono o compartirlo por WhatsApp sin depender
     de la conexión a internet. Vive dentro de .menu-download-banner
     (ver abajo), que le da contexto y peso visual. */
  .menu-download-link{
    display:inline-flex;align-items:center;gap:9px;padding:11px 22px;
    border:1.5px solid rgba(240,201,106,0.5);border-radius:100px;color:var(--gold-light);
    font-size:0.85rem;font-weight:600;background:rgba(240,201,106,0.06);transition:all .25s ease;
  }
  .menu-download-link svg{width:16px;height:16px;flex-shrink:0;}
  .menu-download-link:hover{background:var(--gold-light);color:var(--brown-dark);border-color:transparent;transform:translateY(-2px);box-shadow:0 8px 20px rgba(217,164,65,0.35);}

  /* Banner de descarga: tarjeta con ícono + texto + botón, en vez de
     un link de texto suelto. Es lo primero que muchos clientes
     comparten por WhatsApp antes de reservar, así que se le da más
     presencia que a un simple enlace. */
  .menu-download-banner{
    display:flex;align-items:center;gap:18px;max-width:640px;margin:26px auto 34px;padding:18px 24px;
    background:linear-gradient(135deg,rgba(240,201,106,0.1),rgba(240,201,106,0.03));
    border:1px solid rgba(240,201,106,0.3);border-radius:14px;text-align:left;
  }
  .menu-download-banner .mdb-icon{
    flex-shrink:0;width:46px;height:46px;border-radius:50%;background:rgba(240,201,106,0.15);
    display:flex;align-items:center;justify-content:center;color:var(--gold-light);
  }
  .menu-download-banner .mdb-icon svg{width:22px;height:22px;}
  .menu-download-banner .mdb-text{flex-grow:1;}
  .menu-download-banner .mdb-text strong{display:block;color:var(--cream);font-size:0.95rem;margin-bottom:2px;}
  .menu-download-banner .mdb-text span{display:block;color:#b8a98f;font-size:0.8rem;line-height:1.5;}
  .menu-download-banner .menu-download-link{flex-shrink:0;white-space:nowrap;}
  @media (max-width:600px){
    .menu-download-banner{flex-direction:column;text-align:center;}
    .menu-download-banner .menu-download-link{width:100%;justify-content:center;}
  }

  .menu-cta{text-align:center;margin-top:44px;}
  .menu-cta p{color:#c9baa4;font-size:0.88rem;margin-bottom:16px;}

  /* Spotlight "Especialidad de la casa" — banner ancho con foto
     grande antes de la grilla de platos, para abrir el menú con el
     plato más vistoso/pedido en vez de ir directo a la grilla plana.
     Ver buildSpotlightHtml() en menu-shared.js. */
  .menu-spotlight{
    display:grid;grid-template-columns:1.05fr 1fr;max-width:1000px;margin:0 auto 46px;
    border-radius:18px;overflow:hidden;border:1px solid rgba(240,201,106,0.28);
    box-shadow:0 22px 50px rgba(0,0,0,0.4);
  }
  .ms-photo{position:relative;min-height:260px;overflow:hidden;cursor:zoom-in;}
  .ms-photo img{width:100%;height:100%;object-fit:cover;animation:msZoom 20s ease-in-out infinite alternate;}
  @keyframes msZoom{0%{transform:scale(1);}100%{transform:scale(1.1);}}
  /* Antes tenía un degradado marrón fijo (#241708→#120b06) — por
     eso no cambiaba de color en Planchón/Bote aunque el resto del
     menú sí. Ahora usa var(--brown)/var(--brown-dark) de la página
     (igual que .menu-section) más un brillo dorado radial en la
     esquina para que la "especialidad de la casa" resalte un poco
     más que el resto del menú, en los 3 servicios por igual. */
  .ms-content{
    padding:38px 42px;
    background:
      radial-gradient(circle at 12% 10%, rgba(240,201,106,0.22), transparent 55%),
      linear-gradient(160deg, var(--brown) 0%, var(--brown-dark) 78%);
    box-shadow:inset 0 1px 0 rgba(240,201,106,0.3);
    display:flex;flex-direction:column;justify-content:center;
  }
  .ms-tag{display:inline-block;margin-bottom:14px;color:var(--gold-light);font-size:0.72rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;}
  .ms-content h3{font-family:'Playfair Display',serif;color:var(--cream);font-size:2rem;line-height:1.15;margin-bottom:14px;}
  .ms-content p{color:#c9baa4;font-size:0.92rem;line-height:1.7;margin-bottom:24px;}
  .ms-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
  .ms-price{font-family:'Playfair Display',serif;color:var(--gold-light);font-size:1.5rem;font-weight:600;}
  .ms-link{font-size:0.78rem;font-weight:700;letter-spacing:0.06em;color:var(--gold-light);border-bottom:1px solid rgba(240,201,106,0.4);padding-bottom:2px;white-space:nowrap;}
  .ms-link:hover{border-color:var(--gold-light);}
  @media (max-width:720px){
    .menu-spotlight{grid-template-columns:1fr;}
    .ms-photo{min-height:220px;}
    .ms-content{padding:30px 26px;}
  }
  @media (prefers-reduced-motion:reduce){.ms-photo img{animation:none;}}

  /* Fotos de platos clicables: se abren en el lightbox de la
     galería de la página (mismo #lightbox, ver wireInteractivity
     en menu-shared.js). */
  .mdc-photo{cursor:zoom-in;}

  /* --- New Carta del Club Náutico: filters + dish cards --- */
  .menu-filters{
    display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 auto 40px;max-width:900px;
  }
  .menu-filter-btn{
    font-family:'Poppins',sans-serif;font-size:0.85rem;font-weight:600;color:var(--cream-soft);
    background:rgba(250,246,238,0.06);border:1.5px solid rgba(240,201,106,0.35);border-radius:100px;
    padding:10px 18px;cursor:pointer;transition:all .25s ease;white-space:nowrap;
  }
  .menu-filter-btn:hover{border-color:var(--gold-light);color:var(--gold-light);}
  .menu-filter-btn.active{background:linear-gradient(135deg, var(--gold-light), var(--gold));color:var(--brown-dark);border-color:transparent;box-shadow:0 6px 18px rgba(217,164,65,0.35);}
  @media (max-width:720px){
    .menu-filters{
      flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:4px 6vw 14px;margin:0 -6vw 30px;
      scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
      /* Difumina los bordes izq/der para insinuar que hay más
         categorías fuera de pantalla — detalle pulido en vez de
         un corte seco de la última pastilla. */
      mask-image:linear-gradient(90deg,transparent,#000 6vw,#000 calc(100% - 6vw),transparent);
      -webkit-mask-image:linear-gradient(90deg,transparent,#000 6vw,#000 calc(100% - 6vw),transparent);
    }
    .menu-filters::-webkit-scrollbar{display:none;}
    .menu-filter-btn{scroll-snap-align:start;flex-shrink:0;}
  }

  .menu-cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1180px;margin:0 auto;}
  @media (max-width:960px){.menu-cards-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:600px){.menu-cards-grid{grid-template-columns:1fr;}}

  .menu-dish-card{
    position:relative;background:rgba(250,246,238,0.03);border:1px solid rgba(240,201,106,0.15);border-radius:16px;overflow:hidden;
    transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease, border-color .4s ease;
    display:flex;flex-direction:column;
  }
  .menu-dish-card:hover{transform:translateY(-8px);box-shadow:0 20px 44px rgba(0,0,0,0.4);border-color:rgba(240,201,106,0.4);}
  /* Tarjeta destacada (más pedido / recomendado): acento dorado
     superior para que el ojo se detenga primero ahí — la misma
     lógica de prueba social que las reseñas del index. */
  .menu-dish-card.mdc-featured{border-color:rgba(240,201,106,0.4);box-shadow:0 4px 24px rgba(240,201,106,0.1);}
  .menu-dish-card.mdc-featured:before{
    content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
    background:linear-gradient(90deg,var(--gold-light),var(--gold));
  }
  .mdc-photo{position:relative;aspect-ratio:4/3;overflow:hidden;}
  .mdc-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
  .menu-dish-card:hover .mdc-photo img{transform:scale(1.1);}
  .mdc-tag{
    position:absolute;top:12px;left:12px;z-index:2;background:rgba(20,13,7,0.85);backdrop-filter:blur(3px);
    color:var(--gold-light);font-size:0.72rem;font-weight:700;padding:5px 12px;border-radius:100px;
    border:1px solid rgba(240,201,106,0.4);white-space:nowrap;
  }
  /* Color por tipo de tag — ver TAG_TYPES en menu-shared.js. */
  .mdc-tag[data-tag-type="hot"]{background:linear-gradient(135deg,#c0392b,#e0674f);border-color:rgba(224,103,79,0.5);color:#fff;}
  .mdc-tag[data-tag-type="star"]{background:rgba(240,201,106,0.85);border-color:transparent;color:var(--brown-dark);}
  .mdc-tag[data-tag-type="chef"]{background:rgba(20,13,7,0.85);border-color:rgba(120,216,196,0.5);color:#9fe8d6;}
  .mdc-tag[data-tag-type="classic"]{background:rgba(20,13,7,0.85);border-color:rgba(250,246,238,0.3);color:var(--cream-soft);}
  .mdc-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex-grow:1;}
  .mdc-body h4{font-family:'Playfair Display',serif;color:var(--cream);font-size:1.08rem;margin-bottom:6px;line-height:1.25;}
  .mdc-body p{color:#b8a98f;font-size:0.82rem;line-height:1.55;flex-grow:1;margin-bottom:14px;}
  .mdc-price{
    display:inline-block;align-self:flex-start;padding:6px 16px;border-radius:100px;
    background:rgba(240,201,106,0.08);border:1px solid rgba(240,201,106,0.22);
    font-family:'Playfair Display',serif;color:var(--gold-light);font-size:1.15rem;font-weight:600;
    transition:box-shadow .35s ease, color .35s ease, border-color .35s ease;
  }
  .menu-dish-card:hover .mdc-price{color:#ffdb8a;border-color:rgba(240,201,106,0.5);box-shadow:0 0 18px rgba(240,201,106,0.25);}

  .dish-reveal{opacity:0;transform:translateY(30px);filter:blur(6px);transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1), filter .7s ease;}
  .dish-reveal.dish-visible{opacity:1;transform:translateY(0);filter:blur(0);}

  .menu-dish-card.hidden-by-filter{display:none;}

  .menu-extras{max-width:640px;margin:56px auto 0;background:rgba(240,201,106,0.05);border:1px solid rgba(240,201,106,0.25);border-radius:16px;padding:28px 32px;}
  .menu-extras h4{font-family:'Playfair Display',serif;color:var(--gold-light);font-size:1.1rem;margin-bottom:14px;text-align:center;}
  .menu-extras ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:4px 28px;}
  @media (max-width:560px){.menu-extras ul{grid-template-columns:1fr;}}
  .menu-extras li{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px dashed rgba(250,246,238,0.12);font-size:0.86rem;}
  .menu-extras li span:first-child{color:var(--cream-soft);}
  .menu-extras li span:last-child{color:var(--gold-light);font-weight:600;white-space:nowrap;}