/* ============================================================
   ZITLA PLAYA - Pase de fidelidad visual v5 · Patio de Noche + color ZP + neon
   Derivado del pipeline FS/PP (v12) con tokens Zitla Playa.
   Receta 3 v3: tablones al pie, ambar en CTA, palmeritas animadas.
   Motivo tentaculo NEUTRALIZADO (sin arte de marca hermana).
   Complementa zitla-playa-hero-anim-v1.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(34,23,18,0) 0%, #9AC24F 50%, rgba(34,23,18,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: #221712;
  border-color: #221712;
}

.fs-hero .fs-btn-ghost:hover {
  background-color: #221712;
  color: #FBF3E4;
}

/* 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: #FBF3E4;
  border-color: #FBF3E4;
  box-shadow: 3px 3px 0 rgba(251, 243, 228, 0.22);
}

.fs-section-dark .fs-btn-ghost:hover,
.fs-cta-band .fs-btn-ghost:hover,
.fs-footer .fs-btn-ghost:hover {
  background-color: #FBF3E4;
  color: #221712;
  box-shadow: 1px 1px 0 rgba(251, 243, 228, 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: #C9B49A;
}

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

.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(233, 127, 71, 0.35);
}

.fs-btn:active {
  transform: translateY(0);
  box-shadow: 0 5px 14px rgba(233, 127, 71, 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(34, 23, 18, 0.16);
  border-color: #9AC24F;
}

.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: #9AC24F;
}

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

.fs-navlink::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: #DF6932;
  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: #FBF3E4;
}

@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: #1A110C;
  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: #DF6932;
  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(251, 243, 228, 0.28);
    border-radius: 8px;
    cursor: pointer;
  }

  .fs-nav-burger span {
    display: block;
    width: 20px;
    height: 2px;
    background: #FFFBF2;
    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(251, 243, 228, 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: none;
  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;
}

/* ============================================================
   14. RECETA 3 DE MATERIA · PASE v3 (feedback ronda 1)
   Navbar y footer limpios (palitos retirados por QA de Dany).
   Se conservan: pie de tablones del andador y resplandor
   ambar en banda CTA. mix-blend-mode normal explicito.
   ============================================================ */

/* --- 14.1 Footer: aire para la franja de tablones --- */
.fs-footer {
  padding-bottom: 84px;
}

.fs-footer > * {
  position: relative;
  z-index: 1;
}

/* --- 14.2 Pie de tablones del andador: franja de 36px al fondo --- */
.fs-footer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 36px;
  z-index: 1;
  background-image:
    linear-gradient(rgba(26, 17, 12, 0.30), rgba(26, 17, 12, 0.30)),
    url("https://cdn.prod.website-files.com/6a8ef0ec375a4d3573b56d05/6a8efa4edb8f4992c1e5d747_zitlaplaya-tex-tablones.jpg");
  background-size: auto, 420px auto;
  background-repeat: repeat;
  background-position: 0 0, center;
  mix-blend-mode: normal;
  border-top: 1px solid rgba(62, 44, 31, 0.9);
  pointer-events: none;
}

/* --- 14.3 Resplandor ambar de foco: uno por banda oscura --- */
.fs-cta-band::before {
  background-image:
    radial-gradient(ellipse 60% 70% at 50% 0%, rgba(233, 127, 71, 0.22), rgba(233, 127, 71, 0) 70%),
    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: auto, 180px 180px;
  opacity: 1;
  mix-blend-mode: normal;
}

@media (max-width: 767px) {
  .fs-footer {
    padding-bottom: 70px;
  }

  .fs-footer::after {
    height: 28px;
    background-size: auto, 320px auto;
  }
}


/* ============================================================
   16. PASE DE COLOR ZITLA v2 (ronda 2 con feedback de Dany)
   Fondos verde papel se quedan. Botones: fuera el stringer,
   entra el foco del patio (degradado terracota con brillo).
   Tokens propuestos: luz-hoja #EFF5DC · luz-hoja-honda #E4EECB
   · hoja-profunda #6B8B37
   ============================================================ */

.fs-hero,
.fs-section:not(.fs-section-dark),
.fs-menu-section {
  background-color: #EFF5DC;
}

.fs-menu-section:nth-of-type(even) {
  background-color: #E4EECB;
}

.fs-faq-item,
.fs-cut,
.fs-mi {
  border-color: #CBDBA6;
}

/* Botones: pastilla limpia con luz de foco, sin lineas */
.fs-btn,
.fs-btn-light,
.fs-btn-ghost,
.fs-btn-dark {
  border-radius: 999px;
}

.fs-btn {
  background-image: linear-gradient(140deg, #E97F47 0%, #DF6932 52%, #C6551D 100%);
  box-shadow:
    0 6px 18px rgba(223, 105, 50, 0.35),
    inset 0 1px 0 rgba(255, 251, 242, 0.35);
}

.fs-btn:hover {
  box-shadow:
    0 14px 32px rgba(233, 127, 71, 0.45),
    inset 0 1px 0 rgba(255, 251, 242, 0.4);
}

.fs-h2,
.fs-menu-h2 {
  padding-bottom: 16px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20140%2010%27%20width%3D%27140%27%20height%3D%2710%27%3E%3Cpath%20d%3D%27M2%206%20C14%201%2026%201%2038%206%20C50%2011%2062%2011%2074%206%20C86%201%2098%201%20110%206%20C122%2011%20130%2010%20138%207%27%20fill%3D%27none%27%20stroke%3D%27%236B8B37%27%20stroke-width%3D%273.5%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 140px 10px;
}

.fs-section-dark .fs-h2 {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20140%2010%27%20width%3D%27140%27%20height%3D%2710%27%3E%3Cpath%20d%3D%27M2%206%20C14%201%2026%201%2038%206%20C50%2011%2062%2011%2074%206%20C86%201%2098%201%20110%206%20C122%2011%20130%2010%20138%207%27%20fill%3D%27none%27%20stroke%3D%27%239AC24F%27%20stroke-width%3D%273.5%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");
}

.fs-card {
  border-top: 4px solid #9AC24F;
}

.fs-card:nth-child(even) {
  border-top-color: #DF6932;
}

.fs-section:not(.fs-section-dark) .fs-kicker,
.fs-hero .fs-kicker {
  color: #6B8B37;
}

.fs-section:not(.fs-section-dark) .fs-kicker::before,
.fs-hero .fs-kicker::before {
  background: #6B8B37;
}

/* ============================================================
   17. LOGO NEON · el letrero se prende al llegar
   Parpadea como neon recien encendido y se queda con un halo
   verde hoja y ambar, como letrero del patio de noche.
   ============================================================ */
@keyframes zpNeonOn {
  0% { opacity: 0.2; filter: none; }
  9% { opacity: 0.95; filter: drop-shadow(0 0 7px rgba(154, 194, 79, 0.55)); }
  13% { opacity: 0.3; filter: none; }
  21% { opacity: 1; filter: drop-shadow(0 0 8px rgba(154, 194, 79, 0.6)); }
  27% { opacity: 0.45; filter: drop-shadow(0 0 3px rgba(154, 194, 79, 0.25)); }
  36% { opacity: 1; filter: drop-shadow(0 0 9px rgba(154, 194, 79, 0.6)) drop-shadow(0 0 16px rgba(233, 127, 71, 0.25)); }
  100% { opacity: 1; filter: drop-shadow(0 0 8px rgba(154, 194, 79, 0.55)) drop-shadow(0 0 18px rgba(233, 127, 71, 0.28)); }
}

.fs-brand img {
  filter: drop-shadow(0 0 8px rgba(154, 194, 79, 0.55)) drop-shadow(0 0 18px rgba(233, 127, 71, 0.28));
  animation: zpNeonOn 2.4s ease-out 0.35s both;
}

@media (prefers-reduced-motion: reduce) {
  .fs-brand img {
    animation: none;
  }
}

/* ============================================================
   18. PALMERA v2 · fronda organica y entrada lenta desde el borde
   Redibujada con hojas que cuelgan. Entra despacio (4.4s) desde
   fuera de la banda y se queda meciendose desde la base, como
   palmera de verdad con brisa.
   ============================================================ */
.fs-section-dark::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20528%20332%27%3E%3Cg%20fill%3D%27%239AC24F%27%3E%3Cpath%20d%3D%27M96%20332%20C104%20258%20126%20186%20176%20122%20C186%20112%20196%20106%20206%20102%20L220%20114%20C176%20168%20148%20246%20140%20332%20Z%27%2F%3E%3Cpath%20d%3D%27M210%20106%20C160%2062%2096%2048%2040%2066%20C96%2060%20152%2080%20206%20122%20C208%20116%20209%20111%20210%20106%20Z%27%2F%3E%3Cpath%20d%3D%27M208%20112%20C160%20128%20122%20160%20104%20206%20C130%20164%20168%20136%20210%20124%20Z%27%2F%3E%3Cpath%20d%3D%27M212%20104%20C196%2048%20166%2016%20122%208%20C160%2028%20188%2064%20216%20108%20Z%27%2F%3E%3Cpath%20d%3D%27M214%20102%20C226%2042%20250%2012%20288%204%20C254%2026%20234%2062%20222%20106%20Z%27%2F%3E%3Cpath%20d%3D%27M216%20106%20C272%2060%20340%2046%20400%2064%20C342%2062%20284%2084%20220%20122%20Z%27%2F%3E%3Cpath%20d%3D%27M218%20112%20C272%20126%20314%20158%20334%20206%20C306%20162%20264%20134%20216%20124%20Z%27%2F%3E%3Cpath%20d%3D%27M218%20108%20C292%2084%20372%2088%20436%20122%20C372%20102%20296%20108%20222%20120%20Z%27%2F%3E%3Ccircle%20cx%3D%27204%27%20cy%3D%27112%27%20r%3D%2711%27%2F%3E%3Ccircle%20cx%3D%27222%27%20cy%3D%27116%27%20r%3D%2710%27%2F%3E%3Ccircle%20cx%3D%27212%27%20cy%3D%27126%27%20r%3D%279%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  right: calc(var(--pp-t) * -0.10);
  bottom: -6px;
  opacity: 0.5;
  transform-origin: 30% 100%;
}

.fs-section-dark[data-pp-t="left"]::before {
  left: calc(var(--pp-t) * -0.10);
  right: auto;
}

.fs-section-dark.pp-t-right::before,
.fs-section-dark[data-pp-t="right"]::before {
  right: calc(var(--pp-t) * -0.10);
  left: auto;
}

@media (prefers-reduced-motion: no-preference) {
  html.pp-io .fs-section-dark::before {
    translate: 380px 260px;
    opacity: 0;
    transition:
      translate 4.4s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 3s ease;
  }

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

  html.pp-io .fs-section-dark.pp-inview::before {
    translate: 0 0;
    opacity: 0.5;
    animation: zpPalmaBrisa 7s ease-in-out 4.6s infinite alternate;
  }

  @keyframes zpPalmaBrisa {
    0% { translate: 0 0; rotate: 0deg; }
    100% { translate: 0 -8px; rotate: 3.5deg; }
  }
}

@media (max-width: 767px) {
  .fs-section-dark::before {
    bottom: -4px;
    opacity: 0.4;
  }
}