/* ============================================================
   PLACER PULPOSO - Pase de fidelidad visual v11 · Mercado Bravo
   v9 (QA ronda 2): ghost crema sobre bandas oscuras,
   imgslot panoramico para la foto cenital del menu.
   Complementa placer-pulposo-hero-anim-v2.css (no lo sustituye)
   ============================================================ */

.fs-hero,
.fs-section-dark,
.fs-cta-band,
.fs-footer {
  position: relative;
}

.fs-cta-band,
.fs-footer {
  overflow: hidden;
}

.fs-section-dark::before,
.fs-cta-band::before,
.fs-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.055;
  mix-blend-mode: overlay;
}

.fs-cta-band::before {
  opacity: 0.09;
  mix-blend-mode: soft-light;
}

.fs-footer::before {
  opacity: 0.045;
}

.fs-cta-band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(22,34,43,0) 0%, #F2B33D 50%, rgba(22,34,43,0) 100%);
  opacity: 0.6;
  pointer-events: none;
}

/* ------------------------------------------------------------
   HERO CLARO (Guideline v3): fondo crema, sello tinta.
   El boton ghost del hero pasa a tinta sobre claro.
   ------------------------------------------------------------ */
.fs-hero .fs-btn-ghost {
  color: #16222B;
  border-color: #16222B;
}

.fs-hero .fs-btn-ghost:hover {
  background-color: #16222B;
  color: #F6EBD6;
}

/* Ghost sobre bandas oscuras, banda roja y footer: crema, no tinta
   (la base del boton es tinta-sobre-claro; aqui se invierte) */
.fs-section-dark .fs-btn-ghost,
.fs-cta-band .fs-btn-ghost,
.fs-footer .fs-btn-ghost {
  color: #F6EBD6;
  border-color: #F6EBD6;
  box-shadow: 3px 3px 0 rgba(246, 235, 214, 0.22);
}

.fs-section-dark .fs-btn-ghost:hover,
.fs-cta-band .fs-btn-ghost:hover,
.fs-footer .fs-btn-ghost:hover {
  background-color: #F6EBD6;
  color: #16222B;
  box-shadow: 1px 1px 0 rgba(246, 235, 214, 0.22);
}

/* Slot panoramico (foto cenital de la mesa en /menu) */
.fs-imgslot.pp-imgslot-wide {
  aspect-ratio: 21 / 9;
  min-height: 220px;
}

.fs-imgslot.pp-imgslot-wide:has(img) {
  aspect-ratio: 21 / 9;
}

/* Kicker sobre bandas oscuras: gris azulado, no tinta acento */
.fs-section-dark .fs-kicker {
  color: #A3B0B5;
}

.fs-section-dark .fs-kicker::before {
  background: #D93A26;
}

.fs-btn,
.fs-btn-light,
.fs-btn-ghost,
.fs-btn-dark {
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.fs-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(217, 58, 38, 0.35);
}

.fs-btn:active {
  transform: translateY(0);
  box-shadow: 0 5px 14px rgba(217, 58, 38, 0.28);
}

.fs-btn-light:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.30);
}

.fs-btn-light:active,
.fs-btn-ghost:active,
.fs-btn-dark:active {
  transform: translateY(0);
}

.fs-btn-ghost:hover,
.fs-btn-dark:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.fs-card {
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease;
}

.fs-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 42px rgba(22, 34, 43, 0.16);
  border-color: #F2B33D;
}

.fs-card.fs-card-dark:hover {
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.5);
  border-color: rgba(242, 179, 61, 0.65);
}

.fs-cut,
.fs-mi,
.fs-faq-item {
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}

.fs-cut:hover,
.fs-mi:hover {
  border-color: #F2B33D;
}

.fs-navlink {
  position: relative;
  transition: color 0.2s ease;
}

.fs-navlink::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: #D93A26;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.fs-navlink:hover::after {
  transform: scaleX(1);
}

.fs-footer-link {
  transition: color 0.2s ease;
}

.fs-footer-link:hover {
  color: #F6EBD6;
}

@keyframes fsRise {
  from {
    opacity: 0;
    translate: 0 26px;
  }
  to {
    opacity: 1;
    translate: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .fs-card,
    .fs-imgslot,
    .fs-h2,
    .fs-lead,
    .fs-kicker,
    .fs-cut,
    .fs-mi,
    .fs-faq-item {
      animation: fsRise 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
}

.fs-imgslot:has(img) {
  padding: 0;
  border: 1px solid rgba(242, 179, 61, 0.28);
  overflow: hidden;
  background-color: #0D1720;
  aspect-ratio: 4 / 3;
}

.fs-imgslot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.fs-imgslot:has(img):hover img {
  transform: scale(1.045);
}

/* ------------------------------------------------------------
   RITMO TIPOGRAFICO · Shrikhand no lleva tracking negativo
   ------------------------------------------------------------ */
.fs-hero-title {
  font-size: clamp(2.4rem, 6.5vw, 4.2rem);
  letter-spacing: 0;
  line-height: 1.12;
  text-wrap: balance;
}

.fs-h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.125rem);
  letter-spacing: 0;
  text-wrap: balance;
}

.fs-hero-sub,
.fs-lead {
  text-wrap: pretty;
}

.fs-card-title {
  letter-spacing: 0;
}

.fs-kicker::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 2px;
  background: #D93A26;
  margin-right: 10px;
  vertical-align: middle;
}

/* ------------------------------------------------------------
   MARCA EN NAV: placa + palabra Shrikhand
   ------------------------------------------------------------ */
.fs-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ------------------------------------------------------------
   STICKER (PNG con troquel, doblez y sombras horneados)
   ------------------------------------------------------------ */
.pp-sticker {
  flex: 0 0 auto;
}

@media (max-width: 767px) {
  .pp-sticker {
    width: 120px;
  }
}

@media (max-width: 767px) {
  .fs-section {
    padding: 4.5rem 20px;
  }

  .fs-hero {
    padding: 90px 20px 70px;
  }

  .fs-cta-band {
    padding: 4.5rem 20px;
  }

  .fs-hero-ctas {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }

  .fs-btn,
  .fs-btn-light,
  .fs-btn-ghost,
  .fs-btn-dark {
    padding: 14px 26px;
  }

  .fs-footer-grid {
    grid-template-columns: 1fr;
    grid-row-gap: 28px;
  }
}

.fs-nav-toggle {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.fs-nav-burger {
  display: none;
}

@media (max-width: 767px) {
  .fs-nav-inner {
    flex-wrap: wrap;
    align-items: center;
  }

  .fs-nav-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-left: auto;
    border: 1px solid rgba(246, 235, 214, 0.28);
    border-radius: 8px;
    cursor: pointer;
  }

  .fs-nav-burger span {
    display: block;
    width: 20px;
    height: 2px;
    background: #FDF5E3;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }

  .fs-navlinks {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    padding: 8px 0 16px;
    grid-column-gap: 0;
    grid-row-gap: 0;
    gap: 0;
  }

  .fs-nav-toggle:checked ~ .fs-navlinks {
    display: flex;
  }

  .fs-navlinks .fs-navlink {
    padding: 13px 4px;
    border-bottom: 1px solid rgba(246, 235, 214, 0.08);
  }

  .fs-navlink::after {
    display: none;
  }

  .fs-navlinks .fs-btn {
    margin-top: 14px;
    text-align: center;
  }

  .fs-nav-toggle:checked ~ .fs-nav-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .fs-nav-toggle:checked ~ .fs-nav-burger span:nth-child(2) {
    opacity: 0;
  }

  .fs-nav-toggle:checked ~ .fs-nav-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

a[href^="tel"],
a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .fs-btn,
  .fs-btn-light,
  .fs-btn-ghost,
  .fs-btn-dark,
  .fs-card,
  .fs-cut,
  .fs-mi,
  .fs-faq-item,
  .fs-navlink::after,
  .fs-imgslot img {
    transition: none;
  }

  .fs-btn:hover,
  .fs-btn-light:hover,
  .fs-btn-ghost:hover,
  .fs-btn-dark:hover,
  .fs-card:hover {
    transform: none;
  }

  .fs-imgslot:has(img):hover img {
    transform: none;
  }
}

/* ------------------------------------------------------------
   10. QA IPHONE (12-ago): titulares de banda CTA con aire
   ------------------------------------------------------------ */
.fs-cta-title {
  font-size: clamp(1.9rem, 6.5vw, 3rem);
  line-height: 1.18;
  letter-spacing: 0;
  text-wrap: balance;
  margin-bottom: 18px;
}

@media (max-width: 767px) {
  .fs-cta-band {
    padding: 4.5rem 24px;
  }

  .fs-cta-text {
    font-size: 1.125rem;
  }
}

/* ------------------------------------------------------------
   11. QA IPHONE (12-ago): iOS Safari detecta direcciones y
   telefonos y los convierte en links subrayados (dotted).
   Neutralizar en titulares, footer y textos.
   ------------------------------------------------------------ */
a[href^="tel"],
a[href^="maps"],
a[href^="x-apple-data-detectors"],
a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
  border-bottom: none !important;
}

.fs-hero-title a,
.fs-menu-title a,
.fs-cta-title a,
.fs-footer a[href^="tel"],
.fs-lead a[href^="tel"] {
  color: inherit !important;
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
  border-bottom: none !important;
  pointer-events: none;
}

/* ------------------------------------------------------------
   12. MOTIVO DE TENTACULO (guideline regla 3) · v6
   El arte tiene una punta delgada (colita) en el extremo
   izquierdo del lienzo (26% a 32%). Geometria: se entierra
   ese 32% del ancho mas alla del borde de la banda para que
   el tentaculo parezca emerger de un pulpo fuera de pantalla,
   con el cuerpo grueso cruzando el borde y el rizo adentro.
   Bandas impares: borde derecho (arte espejeado, colita al
   borde). Bandas pares: borde izquierdo (arte normal).
   Nunca sobre la banda roja, nunca detras de texto.
   ------------------------------------------------------------ */
.fs-section-dark {
  --pp-t: min(520px, 62vw);
  position: relative;
  overflow: hidden;
}

.fs-section-dark::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: var(--pp-t);
  aspect-ratio: 528 / 332;
  height: auto;
  inset: auto;
  top: auto;
  left: auto;
  right: calc(var(--pp-t) * -0.32);
  bottom: -24px;
  background-image: url("https://cdn.prod.website-files.com/6a7b9e9ecb67e4ac125e69f4/6a7ba06f4bf2af3b08148641_pp-isotipo-crema.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: scaleX(-1);
  opacity: 0.95;
  mix-blend-mode: normal;
  filter: none;
  pointer-events: none;
}

/* v11: la alternancia se retira. El texto vive en la columna izquierda
   en todas las bandas oscuras, asi que el tentaculo emerge SIEMPRE por
   la derecha (lado vacio). Para forzar izquierda en un caso puntual:
   data-pp-t="left" en la seccion. */
.fs-section-dark[data-pp-t="left"]::before {
  right: auto;
  left: calc(var(--pp-t) * -0.32);
  transform: none;
}

/* Contenido siempre por encima del motivo */
.fs-section-dark > .fs-container {
  position: relative;
  z-index: 1;
}

/* Entrada con el scroll via IntersectionObserver (pp-tentaculo-v1.js) */
@media (prefers-reduced-motion: no-preference) {
  html.pp-io .fs-section-dark::before {
    translate: 280px 200px;
    opacity: 0;
    transition:
      translate 2.6s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 1.8s ease;
  }

  html.pp-io .fs-section-dark[data-pp-t="left"]::before {
    translate: -280px 200px;
  }

  html.pp-io .fs-section-dark.pp-inview::before {
    translate: 0 0;
    opacity: 0.95;
    animation: ppTentacleVivo 5s ease-in-out 2.7s infinite alternate;
  }

  /* Vaiven organico permanente despues de la entrada, como flotando */
  @keyframes ppTentacleVivo {
    0% { translate: 0 0; rotate: 0deg; }
    100% { translate: 0 -14px; rotate: 2.5deg; }
  }
}

@media (max-width: 767px) {
  .fs-section-dark {
    --pp-t: min(300px, 72vw);
  }

  .fs-section-dark::before {
    bottom: -16px;
  }
}

/* ------------------------------------------------------------
   13. v10: pp-t-right fuerza el tentaculo al lado DERECHO en
   secciones oscuras cortas donde el texto vive a la izquierda
   (fix legibilidad crema sobre crema en "Encuentranos").
   Debe ir DESPUES del bloque nth-of-type para ganar el cascade.
   ------------------------------------------------------------ */
.fs-section-dark.pp-t-right::before,
.fs-section-dark[data-pp-t="right"]::before {
  right: calc(var(--pp-t) * -0.32);
  left: auto;
  transform: scaleX(-1);
}

@media (prefers-reduced-motion: no-preference) {
  html.pp-io .fs-section-dark.pp-t-right::before,
.fs-section-dark[data-pp-t="right"]::before {
    translate: 280px 200px;
  }

  html.pp-io .fs-section-dark.pp-t-right.pp-inview::before,
html.pp-io .fs-section-dark[data-pp-t="right"].pp-inview::before {
    translate: 0 0;
  }
}

/* ============ v12: fotos verticales con ancho contenido ============ */
/* La cenital del menu es vertical 4:5; a ancho completo dominaria la pagina.
   Se limita y centra. En movil ocupa el ancho disponible. */
img[data-pp-img="vertical"] {
  display: block;
  width: 100%;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 6px;
}