/* ══════════════════════════════════════════════════════
   MENÚ SALADO PRO — chilita.mia  v2 (premium)
══════════════════════════════════════════════════════ */

/* ── Menu salado — siempre visible ── */
#menu-salado-pro { display: block; }

/* ── Custom cursor — scoped to menu section ── */
#msp-cursor {
  position: fixed;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--msp-chamoy, #8B1A1A);
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width 0.25s, height 0.25s, opacity 0.2s, background 0.2s;
  opacity: 0;
  mix-blend-mode: normal;
}
#msp-cursor.is-active  { opacity: 1; }
#msp-cursor.is-product {
  width: 60px; height: 60px;
  background: rgba(139,26,26,0.85);
  border: 1px solid rgba(244,168,53,0.3);
}
#msp-cursor.is-cta {
  width: 44px; height: 44px;
  background: #25D366;
}
#msp-cursor-label {
  position: fixed;
  pointer-events: none;
  z-index: 99998;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  color: #FFF4E8;
  letter-spacing: 0.05em;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s;
  white-space: nowrap;
  text-align: center;
}
#msp-cursor.is-product ~ #msp-cursor-label { opacity: 1; }

/* ── Tokens locales ── */
:root {
  --msp-bg:      #1C1016;
  --msp-card:    #100709;
  --msp-chamoy:  #8B1A1A;
  --msp-mango:   #F4A835;
  --msp-chile:   #E63946;
  --msp-cream:   #FFF4E8;
  --msp-radius:  20px;
}

/* ════════════════════════
   SECTION WRAPPER
════════════════════════ */
.msp {
  background: var(--msp-bg);
  position: relative;
  overflow: hidden;
  padding: 6rem 0 5rem;
}

/* Grain atmosférico */
.msp::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px;
  opacity: 0.035;
  pointer-events: none;
  z-index: 0;
}

/* Glow superior ambiental */
.msp::after {
  content: '';
  position: absolute;
  top: -300px; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 600px;
  background: radial-gradient(ellipse, rgba(139,26,26,0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ════════════════════════
   SECTION HEADER
════════════════════════ */
.msp__header {
  text-align: center;
  padding: 0 2rem 5rem;
  position: relative;
  z-index: 1;
}

.msp__header-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin-bottom: 2rem;
}
.msp__header-rule::before,
.msp__header-rule::after {
  content: '';
  width: 80px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244,168,53,0.5));
}
.msp__header-rule::after {
  background: linear-gradient(90deg, rgba(244,168,53,0.5), transparent);
}
.msp__label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--msp-mango);
}

.msp__title {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(3.5rem, 9vw, 7.5rem);
  color: var(--msp-cream);
  line-height: 0.88;
  margin: 0 0 1.2rem;
  letter-spacing: -3px;
}
.msp__title em {
  color: var(--msp-chile);
  display: block;
}

.msp__subtitle {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(0.8rem, 1.4vw, 0.94rem);
  color: rgba(255,244,232,0.32);
  line-height: 1.7;
}

/* ════════════════════════
   FEATURED — sin bordes, edge-to-edge dentro del padding
════════════════════════ */
.msp__featured {
  display: grid;
  grid-template-columns: 45% 55%;
  margin: 0 clamp(1rem, 4vw, 3.5rem) 2rem;
  border-radius: var(--msp-radius);
  overflow: hidden;
  min-height: 540px;
  position: relative;
  z-index: 1;
  /* Sin border — sombra interna sutil */
  box-shadow:
    0 40px 80px rgba(0,0,0,0.6),
    0 0 0 0 rgba(139,26,26,0);
  transition: box-shadow 0.4s;
  /* 3D context */
  transform-style: preserve-3d;
}
.msp__featured:hover {
  box-shadow:
    0 50px 100px rgba(0,0,0,0.7),
    0 0 60px rgba(139,26,26,0.08);
}

/* Glow que sigue al cursor — inyectado por JS */
.msp__featured-glow {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 2;
  border-radius: inherit;
  background: radial-gradient(
    300px circle at var(--gx, 50%) var(--gy, 50%),
    rgba(139,26,26,0.14),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.35s;
}

/* Image side */
.msp__featured-img {
  position: relative;
  background: #080407;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.msp__featured-img img {
  width: 90%;
  height: 90%;
  object-fit: contain;
  will-change: transform;
  filter: drop-shadow(0 12px 50px rgba(139,26,26,0.25));
  transform-origin: center bottom;
}

/* Drip de chamoy */
.msp__drip {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-around;
  padding: 0 30%;
  pointer-events: none;
  z-index: 5;
}
.msp__drip-drop {
  width: 5px;
  height: 0;
  background: linear-gradient(to bottom, #6B1414, #9B2020);
  border-radius: 0 0 5px 5px;
  transition: height 1.5s cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 0.75;
}
.msp__featured.msp--visible .msp__drip-drop:nth-child(1) { height: 52px; transition-delay: 0.5s; }
.msp__featured.msp--visible .msp__drip-drop:nth-child(2) { height: 80px; transition-delay: 0.7s; }
.msp__featured.msp--visible .msp__drip-drop:nth-child(3) { height: 40px; transition-delay: 0.9s; }
.msp__featured.msp--visible .msp__drip-drop:nth-child(4) { height: 68px; transition-delay: 0.6s; }
.msp__featured.msp--visible .msp__drip-drop:nth-child(5) { height: 35px; transition-delay: 1.0s; }

/* Ambient blob detrás del producto */
.msp__featured-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 50% at 50% 60%, rgba(139,26,26,0.16) 0%, transparent 70%);
  pointer-events: none;
}

/* Info side */
.msp__featured-info {
  background: #0F0609;
  padding: clamp(2rem, 4vw, 3.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.1rem;
  position: relative;
  overflow: hidden;
}
.msp__featured-info::before {
  content: '';
  position: absolute;
  top: -150px; right: -120px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(139,26,26,0.09) 0%, transparent 70%);
  pointer-events: none;
}
.msp__featured-info::after {
  content: '🌶️';
  position: absolute;
  bottom: -30px; right: -15px;
  font-size: 10rem;
  opacity: 0.035;
  pointer-events: none;
  line-height: 1;
  filter: grayscale(1);
}

/* ── Badges ── */
.msp__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.28rem 0.85rem;
  border-radius: 999px;
  width: fit-content;
}
.msp__badge--star {
  background: rgba(244,168,53,0.1);
  color: var(--msp-mango);
  border: 1px solid rgba(244,168,53,0.22);
}

/* ── Product name ── */
.msp__featured-name {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  color: var(--msp-cream);
  line-height: 0.9;
  margin: 0;
  letter-spacing: -1.5px;
  overflow-wrap: break-word;
  max-width: 100%;
}

.msp__featured-desc {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(0.8rem, 1.3vw, 0.9rem);
  color: rgba(255,244,232,0.42);
  line-height: 1.68;
  margin: 0;
}

/* ── Ingredient tags ── */
.msp__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.msp__tags span {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.67rem;
  color: rgba(255,244,232,0.38);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  padding: 0.2rem 0.58rem;
  border-radius: 999px;
}

/* ── Price + CTA ── */
.msp__featured-footer {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.msp__price { display: flex; flex-direction: column; line-height: 1; }
.msp__price-amount {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: clamp(1.8rem, 5vw, 2.7rem);
  color: var(--msp-mango);
}
.msp__price-unit {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.62rem;
  color: rgba(255,244,232,0.28);
  margin-top: 3px;
}

/* Magnetic wrapper para el botón */
.msp__cta-magnetic {
  display: inline-block;
}
.msp__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: linear-gradient(135deg, #9B2020, #6B1414);
  color: var(--msp-cream);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 0.86rem;
  padding: 0.85rem 1.65rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 8px 28px rgba(139,26,26,0.35);
  transition: background 0.22s, box-shadow 0.22s;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.msp__cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--cx,50%) var(--cy,50%), rgba(255,255,255,0.12), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
  border-radius: inherit;
}
.msp__cta:hover::after  { opacity: 1; }
.msp__cta:hover {
  background: linear-gradient(135deg, #B52424, #8B1A1A);
  box-shadow: 0 12px 40px rgba(139,26,26,0.55);
}

/* ════════════════════════
   GRID 3 CARDS — sin bordes visibles
════════════════════════ */
.msp__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin: 0 clamp(1rem, 4vw, 3.5rem);
  position: relative;
  z-index: 1;
}

.msp__card {
  border-radius: var(--msp-radius);
  overflow: visible; /* permite que la imagen salga en Z */
  background: var(--msp-card);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: box-shadow 0.35s;
  /* 3D context para el tilt */
  transform-style: preserve-3d;
  transform: perspective(900px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.msp__card:hover {
  box-shadow: 0 32px 70px rgba(0,0,0,0.65), 0 0 40px rgba(139,26,26,0.06);
}

/* Image container */
.msp__card-img {
  aspect-ratio: 1 / 1;
  background: #080407;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--msp-radius) var(--msp-radius) 0 0;
}
.msp__card-img img {
  width: 80%; height: 80%;
  object-fit: contain;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 6px 24px rgba(0,0,0,0.4));
  /* La imagen "sale" del plano en 3D */
  transform: translateZ(0);
}
.msp__card:hover .msp__card-img img {
  transform: translateZ(30px) scale(1.08);
}

/* Mini drip on hover */
.msp__card-img::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%) scaleY(0);
  transform-origin: top;
  width: 4px; height: 30px;
  background: linear-gradient(to bottom, #6B1414, transparent);
  border-radius: 0 0 4px 4px;
  opacity: 0.7;
  transition: transform 0.4s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.msp__card:hover .msp__card-img::after {
  transform: translateX(-50%) scaleY(1);
}

/* Card body */
.msp__card-body {
  padding: 1.2rem 1.3rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
  background: var(--msp-card);
  border-radius: 0 0 var(--msp-radius) var(--msp-radius);
}
.msp__card-tag {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--msp-mango);
}
.msp__card-name {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.15rem, 2.5vw, 1.6rem);
  color: var(--msp-cream);
  line-height: 1.05;
  margin: 0;
}
.msp__card-desc {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.75rem;
  color: rgba(255,244,232,0.35);
  line-height: 1.55;
  margin: 0;
}
.msp__card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.msp__card-price {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: 1.55rem;
  color: var(--msp-mango);
  line-height: 1;
}
.msp__card-price small {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.58rem;
  color: rgba(255,244,232,0.25);
  display: block;
  font-weight: 400;
  margin-top: 2px;
}
.msp__card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(139,26,26,0.65);
  color: var(--msp-cream);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid rgba(139,26,26,0.4);
  transition: background 0.22s, box-shadow 0.22s;
}
.msp__card-cta:hover {
  background: var(--msp-chamoy);
  box-shadow: 0 4px 18px rgba(139,26,26,0.45);
}

/* ════════════════════════
   BOTTOM CTA BAR
════════════════════════ */
.msp__bottom {
  margin: 2.5rem clamp(1rem, 4vw, 3.5rem) 0;
  padding: clamp(2rem, 3vw, 2.8rem) clamp(1.5rem, 3vw, 2.5rem);
  background: #0F0609;
  border-radius: var(--msp-radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.4);
}
.msp__bottom::before {
  content: '🌶️';
  position: absolute;
  right: -20px; bottom: -35px;
  font-size: 10rem;
  opacity: 0.04;
  pointer-events: none;
  filter: grayscale(1);
}
/* chamoy line accent top */
.msp__bottom::after {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139,26,26,0.5), transparent);
}

.msp__bottom-text {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.1rem, 2.5vw, 1.7rem);
  color: var(--msp-cream);
  line-height: 1.15;
  margin: 0;
}
.msp__bottom-text span {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-style: normal;
  font-size: 0.74rem;
  color: rgba(255,244,232,0.3);
  font-weight: 400;
  margin-top: 0.35rem;
}

.msp__btn-wa-wrap { display: inline-block; }
.msp__btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: #25D366;
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 0.88rem;
  padding: 0.95rem 1.95rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 8px 28px rgba(37,211,102,0.28);
  transition: background 0.22s, box-shadow 0.22s;
  white-space: nowrap;
}
.msp__btn-wa:hover {
  background: #22c55e;
  box-shadow: 0 12px 40px rgba(37,211,102,0.42);
}

/* ════════════════════════
   SCROLL REVEAL — initial states
════════════════════════ */
/* Iniciales — GSAP controla opacity/transform en scroll.
   Scoped a #menu-salado-pro para no afectar #menu-dulce */
#menu-salado-pro .msp__header   { opacity: 0; }
#menu-salado-pro .msp__featured { opacity: 0; }
#menu-salado-pro .msp__card     { opacity: 0; transition: box-shadow 0.35s; }
#menu-salado-pro .msp__bottom   { opacity: 0; }

/* ════════════════════════
   CHAMOY SEPARATOR
════════════════════════ */
.chamoy-separator {
  width: 100%;
  height: 110px;
  background: #1C1016;
  overflow: visible;
  position: relative;
  z-index: 2;
}
.sep-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.sep-drip {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  transform: scaleY(0);
}

/* ════════════════════════
   INGREDIENTES FLOTANTES
════════════════════════ */
.fi-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
}
.fi {
  position: absolute;
  border-radius: 50%;
  opacity: 0.7;
}

/* Gotas de chamoy */
.fi--drop {
  width: 7px;
  height: 12px;
  background: #8B1A1A;
  border-radius: 50% 50% 70% 70%;
}
/* Granos de tajín */
.fi--grain {
  width: 5px;
  height: 5px;
  background: #E63946;
  clip-path: polygon(50% 0%, 80% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 20% 30%);
  border-radius: 0;
  opacity: 0.65;
}
/* Chile */
.fi--chile {
  width: 4px;
  height: 16px;
  background: linear-gradient(to bottom, #CC3333, #8B1A1A);
  border-radius: 2px 2px 50% 50%;
  opacity: 0.8;
  transform: rotate(20deg);
}

/* Posiciones */
.fi--a { top: 12%; left: 14%; animation: fi-float 4.2s ease-in-out infinite; }
.fi--b { bottom: 22%; right: 12%; animation: fi-float 5.1s ease-in-out infinite 0.8s; }
.fi--c { top: 28%; left: 72%; animation: fi-spin  3.8s ease-in-out infinite 0.3s; }
.fi--d { bottom: 35%; left: 18%; animation: fi-spin  5.5s ease-in-out infinite 1.2s; }
.fi--e { top: 55%; right: 20%; animation: fi-float 4.8s ease-in-out infinite 0.5s; }
.fi--f { top: 20%; right: 25%; animation: fi-tilt  6.0s ease-in-out infinite; }
.fi--g { bottom: 15%; left: 55%; animation: fi-spin  4.0s ease-in-out infinite 1.5s; }
.fi--h { top: 70%; left: 30%; animation: fi-float 5.8s ease-in-out infinite 0.2s; }

@keyframes fi-float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-14px) rotate(12deg); }
}
@keyframes fi-spin {
  0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
  50%       { transform: translateY(-9px) rotate(180deg) scale(1.15); }
}
@keyframes fi-tilt {
  0%, 100% { transform: rotate(20deg) translateY(0px); }
  50%       { transform: rotate(-10deg) translateY(-12px); }
}

/* ════════════════════════
   RESPONSIVE
════════════════════════ */
@media (max-width: 900px) {
  .msp__featured { grid-template-columns: 1fr; min-height: auto; }
  .msp__featured-img { aspect-ratio: 4/3; min-height: 280px; }
  .msp__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .msp__title { letter-spacing: -2px; }
  .msp__grid { grid-template-columns: 1fr; }
  .msp__bottom { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
  .msp__featured-name { font-size: clamp(2rem, 8vw, 2.6rem); letter-spacing: -0.5px; }
  .msp__featured-info { padding: 1.5rem; }
  .msp__featured-desc { font-size: 0.82rem; }
  .msp__featured-footer { gap: 1rem; }
  .msp__header { padding: 0 1.25rem 3rem; }
  /* Reducir blur en mobile — GPU menos potente */
  .msp::after { display: none; }
}