.elementor-182 .elementor-element.elementor-element-6cc27b0{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-182 .elementor-element.elementor-element-dbde929{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-dbde929 *//* =============================================
   DESIGN TOKENS
   ============================================= */
:root {
  --cream: #f4f4f4;
  --dark: #141414;
  --teal: #035d5c;
  --teal-light: #e8f4f3;
  --gold: #c4964c;
  --white: #ffffff;
  --gray: #888888;
  --font-heading: 'DM Sans', 'Europa Grotesk', Helvetica, sans-serif;
  --font-accent: 'Cormorant Garamond', Georgia, serif;
  --max-w: 1140px;
  --transition: .35s cubic-bezier(.4, 0, .2, 1);
}

/* =============================================
   RESET & BASE
   ============================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden
}

body {
  font-family: var(--font-heading);
  color: var(--dark);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased
}

img {
  max-width: 100%;
  display: block
}

a {
  text-decoration: none;
  color: inherit
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit
}

ul {
  list-style: none
}

/* =============================================
   PREFERS-REDUCED-MOTION
   ============================================= */
@media(prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important
  }

  .ticker-track {
    animation: none !important
  }

  .progress-bar-fill {
    transition: none !important
  }
}

/* =============================================
   UTILITY
   ============================================= */
.mobile-br {
  display: none;
}

.desktop-br {
  display: block;
}

.container {
  width: 90%;
  max-width: var(--max-w);
  margin: 0 auto
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 1rem 2.2rem;
  background: var(--teal);
  color: var(--white);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .03em;
  border-radius: 6px;
  transition: var(--transition);
  position: relative;
  overflow: hidden
}

.cta-btn:hover {
  background: #047a79;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(3, 93, 92, .35)
}

@keyframes ctaBtnPulse {

  0%,
  100% {
    box-shadow: 0 8px 30px rgba(3, 93, 92, .35)
  }

  50% {
    box-shadow: 0 8px 30px rgba(3, 93, 92, .55), 0 0 0 7px rgba(3, 93, 92, .12), 0 0 0 15px rgba(3, 93, 92, .05)
  }
}

@keyframes ctaBtnPulseLight {

  0%,
  100% {
    box-shadow: 0 8px 24px rgba(255, 255, 255, .18)
  }

  50% {
    box-shadow: 0 8px 24px rgba(255, 255, 255, .32), 0 0 0 7px rgba(255, 255, 255, .09), 0 0 0 15px rgba(255, 255, 255, .04)
  }
}

.cta-btn--pulse {
  animation: ctaBtnPulse 2.4s ease-in-out infinite
}

.cta-btn--pulse-light {
  animation: ctaBtnPulseLight 2.4s ease-in-out infinite
}

.cta-btn--pulse:hover,
.cta-btn--pulse-light:hover {
  animation: none
}

.cta-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, .15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width .5s, height .5s
}

.cta-btn:hover::after {
  width: 300px;
  height: 300px
}

.cta-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0
}

.section-dark {
  background: var(--dark);
  color: var(--cream)
}

.section-light {
  background: var(--white);
  color: var(--dark)
}

.section-cream {
  background: var(--cream);
  color: var(--dark)
}

.section-teal {
  background: var(--teal);
  color: var(--white)
}

.accent {
  color: var(--gold);
  font-style: italic;
  font-family: var(--font-accent)
}

.teal-text {
  color: var(--teal)
}

/* =============================================
   PROGRESS BAR (GAMIFICATION)
   ============================================= */
.progress-widget {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none
}

.progress-widget.visible {
  opacity: 1
}

.progress-track {
  width: 6px;
  height: 160px;
  background: rgba(3, 93, 92, .2);
  border-radius: 100px;
  position: relative;
  overflow: hidden;
  transition: background .4s
}

.progress-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to top, var(--teal), var(--gold));
  border-radius: 100px;
  transition: height .3s ease
}

.progress-label {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--dark);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  max-height: 120px;
  overflow: hidden;
  text-align: center;
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(255, 255, 255, .8);
  transition: color .4s, text-shadow .4s
}

/* On dark/teal sections */
.progress-widget.on-dark .progress-track {
  background: rgba(255, 255, 255, .2)
}

.progress-widget.on-dark .progress-fill {
  background: linear-gradient(to top, var(--gold), #fff)
}

.progress-widget.on-dark .progress-label {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .4)
}

/* =============================================
   NAV
   ============================================= */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 1rem 0;
  transition: var(--transition);
  background: rgba(20, 20, 20, .85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.nav-logo img {
  height: 28px
}

.nav .cta-btn {
  padding: .7rem 1.5rem;
  font-size: .82rem
}

.nav-cta-short {
  display: none
}

.nav-cta-full {
  display: inline
}

/* =============================================
   VSL PLAYER AVANZADO
   ============================================= */
.vsl-frame {
  width: 100%;
  max-width: 750px;
  margin: 0 auto 2.5rem;
  position: relative
}

.vsl-player {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: #000;
  box-shadow: 0 16px 50px -20px rgba(0, 0, 0, .4)
}

.vsl-player video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  cursor: pointer;
  display: block
}

.vsl-player video::-webkit-media-controls,
.vsl-player video::-webkit-media-controls-enclosure,
.vsl-player video::-webkit-media-controls-panel,
.vsl-player video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
  pointer-events: none !important
}

.vsl-fake-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: rgba(0, 0, 0, .32);
  z-index: 6;
  pointer-events: none;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  overflow: hidden
}

.vsl-fake-progress__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #035d5c 0%, #024a49 45%, #c4964c 100%);
  box-shadow: 0 0 12px rgba(3, 93, 92, .55);
  transition: width .4s linear;
  position: relative
}

.vsl-fake-progress__fill::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 6px rgba(255, 255, 255, .8);
  opacity: .7
}

.vsl-player__sound-cta {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  align-items: center;
  gap: .65em;
  padding: .95em 1.55em;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(.95rem, 2vw, 1.18rem);
  color: #fff;
  background: linear-gradient(135deg, #035d5c 0%, #024a49 55%, #c4964c 130%);
  box-shadow: 0 14px 40px rgba(3, 93, 92, .55), 0 0 0 4px rgba(255, 255, 255, .18) inset;
  z-index: 5;
  white-space: nowrap;
  animation: ctaPulse 2.2s ease-in-out infinite
}

.vsl-player__sound-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22)
}

.vsl-player__sound-cta-icon svg {
  width: .85em;
  height: .85em
}

.vsl-player__sound-cta:hover {
  transform: translate(-50%, -50%) scale(1.06)
}

@keyframes ctaPulse {

  0%,
  100% {
    box-shadow: 0 14px 40px rgba(3, 93, 92, .55), 0 0 0 4px rgba(255, 255, 255, .18) inset
  }

  50% {
    box-shadow: 0 14px 40px rgba(3, 93, 92, .70), 0 0 0 4px rgba(255, 255, 255, .28) inset, 0 0 110px rgba(3, 93, 92, .40), 0 0 0 16px rgba(3, 93, 92, .10)
  }
}

.vsl-player.is-preview .vsl-player__sound-cta {
  display: inline-flex
}

.vsl-player.is-preview .vsl-player__bigplay {
  display: none !important
}

.vsl-player.is-preview .vsl-player__bar {
  opacity: 0 !important;
  pointer-events: none !important
}

.vsl-player.is-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .35) 75%, rgba(0, 0, 0, .55) 100%);
  border-radius: 12px;
  pointer-events: none;
  z-index: 4
}

.vsl-player:not(.is-preview)::after {
  opacity: 0
}

.vsl-player__bigplay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(64px, 10vw, 100px);
  height: clamp(64px, 10vw, 100px);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(0, 0, 0, .58);
  color: #fff;
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: opacity .35s ease, transform .35s ease
}

.vsl-player__bigplay svg {
  width: clamp(28px, 4vw, 44px);
  height: clamp(28px, 4vw, 44px);
  margin-left: 6px
}

.vsl-player__bigplay.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.85)
}

.vsl-player__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(10px, 1.6vw, 16px) clamp(12px, 2vw, 20px);
  display: flex;
  align-items: center;
  gap: clamp(6px, 1vw, 10px);
  background: linear-gradient(to top, rgba(0, 0, 0, .65), transparent);
  z-index: 3;
  opacity: 0;
  transition: opacity .35s ease;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px
}

.vsl-player:hover .vsl-player__bar,
.vsl-player.is-paused .vsl-player__bar,
.vsl-player.show-controls .vsl-player__bar {
  opacity: 1
}

.vsl-player__btn {
  width: clamp(44px, 5vw, 48px);
  height: clamp(44px, 5vw, 48px);
  border: none;
  cursor: pointer;
  border-radius: 10px;
  background: rgba(0, 0, 0, .42);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease
}

.vsl-player__btn:hover {
  background: rgba(0, 0, 0, .72)
}

.vsl-player__btn svg {
  width: clamp(24px, 3vw, 26px);
  height: clamp(24px, 3vw, 26px);
  pointer-events: none
}

.vsl-player__spacer {
  flex: 1
}

.vsl-player__btn--rewind svg {
  width: clamp(26px, 3.2vw, 28px) !important;
  height: clamp(26px, 3.2vw, 28px) !important
}

.vsl-player__btn .ic-pause,
.vsl-player__btn .ic-vol-off,
.vsl-player__btn .ic-full-off {
  display: none
}

.vsl-player.is-playing #vslPlayBtn .ic-play {
  display: none
}

.vsl-player.is-playing #vslPlayBtn .ic-pause {
  display: block
}

.vsl-player.is-muted #vslMuteBtn .ic-vol-on {
  display: none
}

.vsl-player.is-muted #vslMuteBtn .ic-vol-off {
  display: block
}

.vsl-player.is-fullscreen #vslFullBtn .ic-full-on {
  display: none
}

.vsl-player.is-fullscreen #vslFullBtn .ic-full-off {
  display: block
}

.vsl-resume-prompt {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(6px);
  border-radius: 12px;
  animation: promptIn .3s ease-out
}

.vsl-resume-prompt__text {
  color: #fff;
  font-size: clamp(14px, 2.5vw, 17px);
  font-weight: 700;
  text-align: center;
  padding: 0 20px;
  white-space: pre-line
}

.vsl-resume-prompt__btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center
}

.vsl-resume-prompt__btn {
  padding: 12px 24px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  transition: transform .15s
}

.vsl-resume-prompt__btn:hover {
  transform: translateY(-2px)
}

.vsl-resume-prompt__btn--resume {
  background: #035d5c;
  color: #fff;
  box-shadow: 0 4px 16px rgba(3, 93, 92, .4)
}

.vsl-resume-prompt__btn--restart {
  background: rgba(255, 255, 255, .15);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .3)
}

@keyframes promptIn {
  from {
    opacity: 0;
    transform: scale(.95)
  }

  to {
    opacity: 1;
    transform: scale(1)
  }
}

/* Gate / timer */
.vsl-gate {
  max-width: 750px;
  margin: 1.5rem auto 0;
  padding: 1.8rem 2rem;
  background: rgba(0, 0, 0, .35);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  text-align: center;
  backdrop-filter: blur(6px)
}

.vsl-gate-msg {
  font-size: 1rem;
  color: rgba(255, 255, 255, .85);
  line-height: 1.6;
  margin-bottom: 1.2rem
}

.vsl-gate-msg strong {
  color: var(--gold)
}

.vsl-gate-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem
}

.vsl-gate-timer-display {
  font-size: clamp(2.4rem, 6vw, 3.8rem);
  font-weight: 700;
  color: rgba(255, 255, 255, .45);
  font-family: var(--font-heading);
  letter-spacing: .06em;
  line-height: 1;
  transition: color .5s
}

.vsl-gate-timer-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .4);
  font-weight: 600
}

.vsl-gate-timer.is-running .vsl-gate-timer-display {
  color: var(--gold)
}

.vsl-gate.fade-out {
  animation: gateOut .6s ease forwards
}

@keyframes gateOut {
  to {
    opacity: 0;
    transform: translateY(-8px)
  }
}

/* VSL mobile */
@media(max-width:560px) {
  .vsl-player__bar {
    padding: 10px 12px !important;
    gap: 8px !important
  }

  .vsl-player__btn {
    width: 52px !important;
    height: 52px !important;
    border-radius: 12px !important
  }

  .vsl-player__btn svg {
    width: 32px !important;
    height: 32px !important
  }

  .vsl-player__btn--rewind svg {
    width: 34px !important;
    height: 34px !important
  }
}

/* =============================================
   TICKER
   ============================================= */
.ticker {
  background: var(--teal);
  overflow: hidden;
  padding: 1.1rem 0;
  margin-top: 64px;
  display: flex;
  align-items: center
}

.ticker-track {
  display: flex;
  gap: 3rem;
  animation: tickerScroll 40s linear infinite;
  width: max-content;
  align-items: center
}

.ticker-item {
  white-space: nowrap;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cream);
  display: flex;
  align-items: center;
  gap: .6rem;
  opacity: .9;
  line-height: 1.4
}

.ticker-item::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block
}

@keyframes tickerScroll {
  0% {
    transform: translateX(0)
  }

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

/* =============================================
   HERO
   ============================================= */
.hero {
  padding: 5rem 0 4rem;
  text-align: center;
  background: linear-gradient(150deg, #082828 0%, #035d5c 55%, #024a49 100%);
  color: var(--cream);
  position: relative
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(255, 255, 255, .04) 0%, transparent 70%);
  pointer-events: none
}

.hero-badge {
  display: inline-block;
  padding: .55rem 1.4rem;
  border: 1px solid rgba(196, 150, 76, 0.4);
  background: linear-gradient(135deg, rgba(3, 93, 92, 0.3) 0%, rgba(196, 150, 76, 0.2) 100%);
  border-radius: 100px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 2rem;
  box-shadow: 0 4px 15px rgba(196, 150, 76, 0.15), inset 0 0 10px rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.hero-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
  transform: skewX(-25deg);
  animation: badgeShine 4s infinite 1s;
}

@keyframes badgeShine {
  0% {
    left: -100%;
  }

  20% {
    left: 200%;
  }

  100% {
    left: 200%;
  }
}

.hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.15;
  max-width: 1000px;
  margin: 0 auto 1.5rem;
  letter-spacing: -.02em;
  color: var(--white)
}

.hero h1 .accent-line {
  display: block;
  color: var(--gold);
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 3.8vw, 3rem);
  line-height: 1.3
}

.hero-sub {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, .75);
  max-width: 650px;
  margin: 0 auto 2.5rem;
  line-height: 1.7
}

.hero-vsl-label {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: .5rem
}

.hero-vsl-label svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 0.15em;
}

.vsl-wrapper {
  max-width: 750px;
  margin: 0 auto 2.5rem;
  aspect-ratio: 16/9;
  background: #0a0a0a;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden
}

.vsl-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(3, 93, 92, .08), transparent 50%);
  pointer-events: none
}

.vsl-play {
  width: 64px;
  height: 64px;
  background: var(--teal);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  cursor: pointer
}

.vsl-play:hover {
  transform: scale(1.1);
  background: #047a79
}

.vsl-play svg {
  width: 24px;
  height: 24px;
  fill: var(--white);
  margin-left: 3px
}

.hero-micro {
  font-size: .82rem;
  color: rgba(255, 255, 255, .55);
  margin-top: 1rem
}

.hero .hero-vsl-label {
  color: rgba(255, 255, 255, .7)
}

/* =============================================
   COUNTERS BAND
   ============================================= */
.counters {
  background: var(--teal);
  padding: 2rem 0
}

.counters .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  text-align: center
}

.counter-item h3 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--white)
}

.counter-item h3 .counter-num {
  display: inline-block
}

.counter-item p {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .75);
  margin-top: .3rem
}

/* =============================================
   PROBLEMA
   ============================================= */
.problema {
  padding: 6rem 0 3rem;
  background: linear-gradient(to bottom, var(--white) 60%, rgba(3, 93, 92, .06) 100%);
  color: var(--dark);
  text-align: center
}

.problema .container {
  display: block
}

.problema-header h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: .5rem
}

.problema-header h2 .accent {
  font-size: inherit
}

.problema-header .problema-sub {
  font-size: 1rem;
  color: #555;
  line-height: 1.7;
  max-width: 620px;
  margin: 0 auto 2.5rem
}

.pain-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  text-align: left
}

.pain-item {
  padding: 1.2rem 1.5rem;
  background: var(--cream);
  border-radius: 8px;
  border-left: 3px solid var(--teal);
  font-size: .95rem;
  color: #333;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s, transform .5s;
  display: flex;
  align-items: flex-start;
  gap: .8rem
}

.pain-item.visible {
  opacity: 1;
  transform: translateY(0)
}

.pain-item svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--teal);
  margin-top: 2px
}

.pain-close-wrap {
  padding: 1.5rem 0 5rem;
  background: radial-gradient(ellipse 90% 80% at 50% 55%, rgba(3, 93, 92, .12) 0%, rgba(255, 255, 255, 0) 72%), linear-gradient(to bottom, rgba(3, 93, 92, .06) 0%, rgba(255, 255, 255, 0) 15%), var(--white);
  text-align: center
}

.pain-close {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 1.5rem
}

.pain-close h3 {
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-weight: 700;
  line-height: 1.45;
  color: var(--dark);
  margin-bottom: 1.2rem;
  text-align: center
}

.pain-close h3 em {
  color: var(--teal);
  font-style: normal
}

.pain-break {
  display: block
}

@media(max-width:1100px) {
  .pain-break {
    display: none
  }
}

.pain-close p {
  font-size: .95rem;
  color: #666;
  line-height: 1.8;
  text-align: center
}

/* =============================================
   IDENTITY FRAME
   ============================================= */
.identity {
  padding: 5rem 0;
  background: linear-gradient(135deg, #035d5c 0%, #047a79 50%, #035d5c 100%);
  color: var(--white)
}

.identity .container {
  max-width: 800px;
  text-align: center
}

.identity h2 {
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-weight: 700;
  margin-bottom: .2rem;
  color: var(--white);
  white-space: nowrap
}

.identity .tagline {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold);
  margin-bottom: 2rem
}

.identity-text {
  font-size: 1rem;
  color: rgba(255, 255, 255, .85);
  line-height: 1.8;
  margin-bottom: 2rem
}

.identity-text p {
  margin-bottom: 1.2rem
}

.identity-cta-text {
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  font-weight: 400;
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--white);
  margin-bottom: 2rem
}

.hero .cta-btn {
  background: var(--white);
  color: var(--teal)
}

.hero .cta-btn:hover {
  background: var(--cream);
  transform: translateY(-2px)
}

.identity .cta-btn {
  background: var(--white);
  color: var(--teal)
}

.identity .cta-btn:hover {
  background: var(--cream);
  transform: translateY(-2px)
}

/* =============================================
   PARA TI / NO PARA TI
   ============================================= */
.para-ti {
  padding: 5rem 0;
  background: var(--cream);
  color: var(--dark)
}

.para-ti .intro-text {
  text-align: center;
  max-width: 650px;
  margin: 0 auto 2.5rem;
  font-size: .95rem;
  color: #555;
  line-height: 1.7
}

.para-ti h2 {
  text-align: center;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  margin-bottom: 1rem
}

.dual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem
}

.dual-card {
  padding: 2rem;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, .08)
}

.dual-card.si {
  background: var(--white);
  border-left: 3px solid var(--teal)
}

.dual-card.no {
  background: var(--white);
  border-left: 3px solid #c0392b
}

.dual-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: .5rem
}

.dual-card.si h3 {
  color: var(--teal)
}

.dual-card.no h3 {
  color: #c0392b
}

.dual-card h3 svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0
}

.dual-list {
  display: flex;
  flex-direction: column;
  gap: .7rem
}

.dual-list li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .9rem;
  line-height: 1.6;
  color: #444
}

.dual-list li svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 3px
}

.dual-list.si-list li svg {
  color: var(--teal)
}

.dual-list.no-list li svg {
  color: #c0392b
}

/* =============================================
   METODO 5 FASES
   ============================================= */
.metodo {
  padding: 6rem 0;
  background: var(--teal);
  color: var(--white)
}

.metodo h2 {
  text-align: center;
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 700;
  margin-bottom: .8rem
}

.metodo .subtitle {
  text-align: center;
  font-size: 1rem;
  color: rgba(255, 255, 255, .75);
  margin-bottom: 3.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto
}

.fases-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  position: relative
}

.fases-grid::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: rgba(255, 255, 255, .2);
  z-index: 0
}

.fase-card {
  text-align: center;
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .5s ease
}

.fase-card.visible {
  opacity: 1;
  transform: translateY(0)
}

.fase-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: var(--white);
  font-size: 1.2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-family: var(--font-heading);
  border: 2px solid rgba(255, 255, 255, .3);
  transition: var(--transition)
}

.fase-card:hover .fase-num {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--dark);
  transform: scale(1.15)
}

.fase-card h3 {
  font-size: .88rem;
  font-weight: 700;
  margin-bottom: .5rem;
  color: var(--white)
}

.fase-card p {
  font-size: .78rem;
  color: rgba(255, 255, 255, .7);
  line-height: 1.5
}

.metodo-diff {
  text-align: center;
  margin-top: 3rem;
  padding: 2rem;
  background: rgba(255, 255, 255, .08);
  border-radius: 8px;
  font-size: .95rem;
  color: rgba(255, 255, 255, .85);
  line-height: 1.7;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto
}

/* =============================================
   TESTIMONIOS
   ============================================= */
.testimonios {
  padding: 6rem 0;
  background: var(--white)
}

.testimonios h2 {
  text-align: center;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  margin-bottom: .6rem;
  color: var(--dark)
}

.testimonios .encuadre {
  text-align: center;
  font-size: .9rem;
  color: #666;
  margin-bottom: 3rem;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6
}

.test-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem
}

.test-card {
  background: var(--cream);
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 10px;
  padding: 2rem;
  transition: var(--transition)
}

.test-card:hover {
  border-color: var(--teal);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(3, 93, 92, .1)
}

.test-metric {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--teal);
  margin-bottom: .5rem;
  font-family: var(--font-accent);
  font-style: italic
}

.test-name {
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gold);
  margin-bottom: .8rem
}

.test-quote {
  font-size: .85rem;
  color: #555;
  line-height: 1.6;
  margin-bottom: 1rem;
  margin-top: 1.2rem
}

.test-video {
  aspect-ratio: 16/9;
  background: var(--dark);
  border-radius: 6px;
  position: relative;
  overflow: hidden
}

.test-video:hover {
  opacity: .9
}

.test-video svg {
  width: 36px;
  height: 36px;
  fill: var(--white);
  opacity: .8
}

.test-row-2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 1.5rem
}

/* =============================================
   URGENCIA / TOMA DE CONSCIENCIA
   ============================================= */
.urgencia {
  padding: 5rem 0 2.5rem;
  background: linear-gradient(180deg, #e8f4f3 0%, #f4f4f4 100%);
  color: var(--dark);
  text-align: center
}

.urgencia .container {
  max-width: 800px
}

.urgencia h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  margin-bottom: 2rem;
  color: var(--dark)
}

.urgencia-text {
  font-size: 1.05rem;
  color: #444;
  line-height: 1.8;
  margin-bottom: 2rem
}

.urgencia-img {
  max-width: 100%;
  border-radius: 8px;
  margin-bottom: 2rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .12)
}

.urgencia-stat {
  display: inline-block;
  padding: 1.2rem 2rem;
  background: var(--white);
  border: 1px solid rgba(3, 93, 92, .2);
  border-radius: 8px;
  font-size: 1rem;
  color: #444;
  line-height: 1.6;
  margin-bottom: 2rem;
  box-shadow: 0 2px 20px rgba(3, 93, 92, .08)
}

.urgencia-stat strong {
  color: var(--teal);
  font-size: 1.3rem;
  display: block;
  margin-bottom: .3rem
}

/* =============================================
   ANTES / DESPUÉS
   ============================================= */
.transformacion {
  padding: 3rem 0 6rem;
  background: var(--cream)
}

.transformacion h2 {
  text-align: center;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  margin-bottom: .6rem;
  color: var(--dark)
}

.transformacion .subtitle {
  text-align: center;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold);
  margin-bottom: 3rem
}

.transf-grid {
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  gap: 1.5rem;
  align-items: start;
  max-width: 960px;
  margin: 0 auto
}

.transf-col {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .07)
}

.transf-col.antes {
  background: var(--white)
}

.transf-col.despues {
  background: var(--teal);
  border-color: transparent
}

/* header etiqueta */
.transf-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.2rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase
}

.transf-col.antes .transf-label {
  background: #fafafa;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  color: #aaa
}

.transf-col.antes .transf-label svg {
  width: 14px;
  height: 14px;
  color: #ccc
}

.transf-col.despues .transf-label {
  background: rgba(255, 255, 255, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  color: var(--gold)
}

.transf-col.despues .transf-label svg {
  width: 14px;
  height: 14px;
  color: var(--gold)
}

/* imagen placeholder */
.transf-img {
  width: 100%;
  aspect-ratio: 16/9;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden
}

.transf-col.despues .transf-img {
  background: rgba(255, 255, 255, .08)
}

.transf-img-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  color: #ccc
}

.transf-col.despues .transf-img-placeholder {
  color: rgba(255, 255, 255, .25)
}

.transf-img-placeholder svg {
  width: 36px;
  height: 36px
}

.transf-img-placeholder span {
  font-size: .7rem;
  letter-spacing: .05em;
  text-transform: uppercase
}

/* lista de items */
.transf-items {
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .6rem
}

.transf-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .8rem;
  border-radius: 8px
}

.transf-col.antes .transf-item {
  background: #fafafa;
  border: 1px solid rgba(0, 0, 0, .05)
}

.transf-col.despues .transf-item {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .08)
}

.transf-item-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px
}

.transf-col.antes .transf-item-icon {
  background: rgba(0, 0, 0, .05)
}

.transf-col.antes .transf-item-icon svg {
  width: 13px;
  height: 13px;
  color: #bbb
}

.transf-col.despues .transf-item-icon {
  background: rgba(255, 255, 255, .12)
}

.transf-col.despues .transf-item-icon svg {
  width: 13px;
  height: 13px;
  color: var(--gold)
}

.transf-item-text strong {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  margin-bottom: .15rem
}

.transf-col.antes .transf-item-text strong {
  color: #666
}

.transf-col.despues .transf-item-text strong {
  color: var(--white)
}

.transf-item-text span {
  font-size: .75rem;
  color: #999;
  line-height: 1.4
}

.transf-col.despues .transf-item-text span {
  color: rgba(255, 255, 255, .6)
}

/* flecha central */
.transf-arrow {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 200px
}

.transf-arrow svg {
  width: 30px;
  height: 30px;
  color: var(--teal)
}

/* =============================================
   AUTORIDAD
   ============================================= */
.autoridad {
  padding: 6rem 0;
  background: var(--white);
  color: var(--dark)
}

.autoridad h2 {
  text-align: center;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  margin-bottom: 3rem
}

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

.auto-card {
  padding: 2rem;
  background: var(--cream);
  border-radius: 10px;
  display: flex;
  gap: 1.5rem;
  align-items: flex-start
}

.auto-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden
}

.auto-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.auto-photo svg {
  width: 32px;
  height: 32px;
  color: rgba(255, 255, 255, .5)
}

.auto-info h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: .3rem;
  color: var(--teal)
}

.auto-info .role {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gold);
  margin-bottom: .8rem;
  font-weight: 600
}

.auto-info p {
  font-size: .88rem;
  color: #555;
  line-height: 1.7
}

.auto-diff {
  text-align: center;
  max-width: 850px;
  margin: 4rem auto;
  padding: 2rem 2.5rem;
  background: var(--white);
  border: 1px solid rgba(3, 93, 92, .2);
  border-radius: 8px;
  box-shadow: 0 2px 20px rgba(3, 93, 92, .08)
}

.auto-diff h3 {
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 700;
  color: var(--dark);
  margin-bottom: .6rem;
  line-height: 1.3
}

.auto-diff p {
  font-size: 1rem;
  color: var(--teal);
  font-weight: 500
}

.auto-origin {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1rem
}

.auto-origin h3 {
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--dark);
  text-align: center
}

.auto-origin-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 3.5rem;
  align-items: center
}

.auto-origin-text {
  font-size: .95rem;
  color: #555;
  line-height: 1.9
}

.auto-origin-text p {
  margin-bottom: 1.2rem
}

.auto-origin-img {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .6rem;
  color: #ccc;
  border: 1px solid rgba(0, 0, 0, .06)
}

.auto-origin-img svg {
  width: 40px;
  height: 40px
}

.auto-origin-img span {
  font-size: .7rem;
  letter-spacing: .05em;
  text-transform: uppercase
}

/* =============================================
   FAQ
   ============================================= */
.faq {
  padding: 5rem 0;
  background: var(--cream)
}

.faq h2 {
  text-align: center;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  margin-bottom: 2.5rem;
  color: var(--dark)
}

.faq-list {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: .5rem
}

.faq-item {
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 8px;
  overflow: hidden;
  transition: var(--transition);
  background: var(--white)
}

.faq-item:hover {
  border-color: var(--teal)
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.5rem;
  cursor: pointer;
  font-size: .92rem;
  font-weight: 600;
  transition: var(--transition);
  color: var(--dark)
}

.faq-q:hover {
  color: var(--teal)
}

.faq-q svg {
  width: 18px;
  height: 18px;
  transition: transform .3s;
  flex-shrink: 0;
  fill: currentColor
}

.faq-item.open .faq-q svg {
  transform: rotate(45deg)
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease
}

.faq-item.open .faq-a {
  max-height: 300px
}

.faq-a-inner {
  padding: 0 1.5rem 1.2rem;
  font-size: .88rem;
  color: #666;
  line-height: 1.7
}

/* =============================================
   CTA FINAL
   ============================================= */
.cta-final {
  padding: 6rem 0;
  background: var(--dark);
  text-align: center;
  position: relative;
  color: var(--cream)
}

.cta-final::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(3, 93, 92, .1) 0%, transparent 70%);
  pointer-events: none
}

.cta-final h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  margin-bottom: .8rem
}

.cta-final .sub {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: var(--gold);
  font-family: var(--font-accent);
  font-style: italic;
  margin-bottom: 2rem
}

.cta-final .emotional {
  max-width: 650px;
  margin: 0 auto 2.5rem;
  font-size: .95rem;
  color: rgba(244, 244, 244, .65);
  line-height: 1.8
}

.cta-final .micro {
  font-size: .8rem;
  color: rgba(244, 244, 244, .4);
  margin-top: 1rem
}

/* =============================================
   FOOTER
   ============================================= */
.footer {
  padding: 2rem 0;
  background: #0a0a0a;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, .05)
}

.footer img {
  height: 22px;
  margin: 0 auto .8rem
}

.footer p {
  font-size: .72rem;
  color: rgba(244, 244, 244, .3)
}

/* =============================================
   AUTO GROUPS (ETIQUETAS DE CATEGORÍA)
   ============================================= */
/* Tabs equipo */
.auto-tabs {
  display: flex;
  gap: .6rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  justify-content: center
}

.auto-tab {
  padding: .55rem 1.4rem;
  border-radius: 100px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .03em;
  cursor: pointer;
  border: 1.5px solid rgba(0, 0, 0, .12);
  background: var(--white);
  color: #888;
  transition: var(--transition);
  font-family: var(--font-heading)
}

.auto-tab:hover {
  border-color: var(--teal);
  color: var(--teal)
}

.auto-tab.active.tab-teal {
  background: var(--teal);
  color: var(--white);
  border-color: var(--teal)
}

.auto-tab.active.tab-gold {
  background: #8a6528;
  color: var(--white);
  border-color: #8a6528
}

.auto-tab.active.tab-dark {
  background: var(--dark);
  color: var(--white);
  border-color: var(--dark)
}

/* Groups */
.auto-group {
  display: none
}

.auto-group.active {
  display: block;
  animation: fadeGroup .35s ease
}

[data-group="equipo"] .auto-grid {
  grid-template-columns: repeat(3, 1fr)
}

@keyframes fadeGroup {
  from {
    opacity: 0;
    transform: translateY(10px)
  }

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

/* =============================================
   SCROLL ANIMATIONS
   ============================================= */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease, transform .7s ease
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0)
}

/* =============================================
   MOBILE
   ============================================= */
@media(max-width:768px) {
  .identity h2 {
    white-space: normal;
  }

  [data-group="equipo"] .auto-grid {
    grid-template-columns: 1fr !important;
  }

  .hero {
    padding: 3.5rem 0 3rem
  }

  .mobile-br {
    display: block;
  }

  .desktop-br {
    display: none;
  }

  .hero h1 {
    font-size: 1.45rem
  }

  .hero-badge {
    font-size: .62rem;
    letter-spacing: .06em
  }

  .hero-sub {
    font-size: .92rem
  }

  .vsl-wrapper {
    border-radius: 8px
  }

  .counters .container {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem
  }

  .pain-list {
    grid-template-columns: 1fr
  }

  .fases-grid {
    grid-template-columns: 1fr;
    gap: 1rem
  }

  .fases-grid::before {
    display: none
  }

  .fase-card {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 1rem;
    text-align: left;
    align-items: start
  }

  .fase-num {
    margin: 0
  }

  .test-grid {
    grid-template-columns: 1fr;
    gap: 1rem
  }

  .test-row-2 {
    grid-template-columns: 1fr;
    gap: 1rem
  }

  .auto-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem
  }

  .auto-card {
    flex-direction: column;
    align-items: center;
    text-align: center
  }

  .auto-origin-grid {
    grid-template-columns: 1fr;
    gap: 2rem
  }

  .auto-origin-img {
    aspect-ratio: 16/9;
    max-width: 100%
  }

  .dual-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem
  }

  .transf-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem
  }

  .transf-arrow {
    transform: none;
    padding: .5rem 0;
    justify-content: center
  }

  .transf-arrow svg {
    transform: rotate(90deg)
  }

  .nav .container {
    width: 95%
  }

  .nav .cta-btn {
    padding: .35rem .5rem;
    font-size: .62rem;
    gap: .3rem
  }

  .nav .cta-btn svg {
    width: 14px;
    height: 14px;
    min-width: 14px
  }

  .nav-logo img {
    height: 22px
  }

  .nav-cta-full {
    display: none
  }

  .nav-cta-short {
    display: inline
  }

  .progress-widget {
    display: none
  }
}

@media(max-width:480px) {
  .hero h1 {
    font-size: 1.25rem
  }

  .cta-btn {
    width: 100%;
    justify-content: center;
    padding: .9rem 1.5rem
  }

  .counters .container {
    grid-template-columns: 1fr 1fr
  }

  .counter-item h3 {
    font-size: 1.3rem
  }
}

/* ===== ZenithForm™ Generated CSS ===== */
:root {
  /* Página */
  --color-bg: #f3f1f1 !important;
  --radius: 16px !important;
  /* Popup */
  --popup-bg: #eeecec !important;
  --popup-overlay: rgba(0, 0, 0, 0.45) !important;
  --popup-title: #035d5c !important;
  --popup-desc: rgba(17, 17, 17, 0.55) !important;
  --popup-label: #004d4c !important;
  --popup-input-bg: #ffffff !important;
  --popup-input-border: rgba(17, 17, 17, 0.12) !important;
  --popup-input-text: #111111 !important;
  --popup-btn-bg: #035d5c !important;
  --popup-btn-text: #ffffff !important;
  --popup-close: rgba(17, 17, 17, 0.4) !important;
  /* Timer */
  --timer-bg: #ebe9e9 !important;
  --timer-border: rgba(17, 17, 17, 0.1) !important;
  --timer-title: #035d5c !important;
  --timer-sub: rgba(17, 17, 17, 0.5) !important;
  --timer-number: #035d5c !important;
  --timer-hint: rgba(17, 17, 17, 0.35) !important;
  /* Hidden */
  --hidden-bg: #f1eeee !important;
  --hidden-border: rgba(17, 17, 17, 0.08) !important;
  --hidden-title: #035d5c !important;
  --hidden-text: rgba(17, 17, 17, 0.65) !important;
  --hidden-btn-bg: #035d5c !important;
  --hidden-btn-text: #ffffff !important;
  /* Compat aliases for progress bars */
  --color-primary: #035d5c !important;
  --color-text-dim: rgba(17, 17, 17, 0.55) !important;
}

.video-section {
  padding: clamp(16px, 3vh, 32px) 0 !important;
}

.video-frame {
  width: min(1100px, 96%) !important;
  margin: 0 auto !important;
  position: relative !important;
}

.video-container {
  position: relative !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  border: 1px solid rgba(17, 17, 17, 0.1) !important;
  aspect-ratio: 16/9 !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .02)) !important;
  box-shadow: 0 12px 40px -20px rgba(0, 0, 0, .20) !important;
}

#vsl-click-catcher {
  position: absolute !important;
  inset: 0 !important;
  z-index: 50 !important;
  cursor: pointer !important;
}

vslplay-player {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.video-container video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  cursor: pointer !important;
}

.video-container iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

#video-play-hint {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: #035d5c !important;
  color: #ffffff !important;
  padding: 18px 35px !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
  z-index: 20 !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .3) !important;
}

#main-video {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

.agenda-gate {
  width: min(1100px, 96%) !important;
  margin: 14px auto 16px !important;
  padding: clamp(14px, 2.2vw, 18px) !important;
  color: var(--timer-title) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .92)) padding-box, linear-gradient(90deg, #035d5c, #c4964c) border-box !important;
  border: 1.5px solid transparent !important;
  border-radius: 14px !important;
  text-align: center !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .08) !important;
}

.gate-title {
  margin: 0 0 .5rem !important;
  font-size: clamp(.95rem, 2vw, 1.1rem) !important;
  line-height: 1.3 !important;
}

.gate-title strong {
  display: block !important;
  font-weight: 800 !important;
}

.gate-sub {
  font-weight: 500 !important;
  color: var(--timer-sub) !important;
  font-size: .9rem !important;
}

.gate-progress {
  height: 6px !important;
  background: rgba(0, 0, 0, .06) !important;
  border-radius: 99px !important;
  margin: .6rem 0 !important;
  position: relative !important;
}

.gate-progress__fill {
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 0% !important;
  background: linear-gradient(90deg, #035d5c, #c4964c) !important;
  border-radius: inherit !important;
  transition: width .3s ease !important;
}

.gate-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  font-size: .85rem !important;
  color: var(--timer-hint) !important;
}

.gate-hint {
  font-weight: 500 !important;
}

.gate-ttl {
  font-weight: 900 !important;
  font-size: 1.2rem !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--timer-number) !important;
}

.hidden-section {
  width: min(1100px, 96%) !important;
  margin: 24px auto 32px !important;
  padding: clamp(18px, 3vw, 24px) !important;
  text-align: center !important;
  background: var(--hidden-bg) !important;
  border-radius: 14px !important;
  border: 1.5px solid var(--hidden-border) !important;
  box-shadow: 0 12px 35px -18px rgba(0, 0, 0, .15) !important;
}

.hidden-section__title {
  margin: 0 0 8px !important;
  font-weight: 800 !important;
  font-size: clamp(1.1rem, 2.5vw, 1.4rem) !important;
  color: var(--hidden-title) !important;
}

.hidden-section__text {
  margin: 0 0 18px !important;
  color: var(--hidden-text) !important;
  font-size: clamp(.95rem, 2vw, 1.05rem) !important;
  line-height: 1.5 !important;
}

.hidden-section__btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 28px !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  color: var(--hidden-btn-text) !important;
  background: linear-gradient(90deg, #035d5c, #c4964c) !important;
  border-radius: 12px !important;
  border: none !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .15) !important;
  transition: transform .2s, box-shadow .2s !important;
  cursor: pointer !important;
}

.hidden-section__btn:hover {
  transform: translateY(-2px) !important;
}

.lf-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.65) !important;
  z-index: 100000 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  transition: opacity .4s ease !important;
  padding: 20px !important;
}

.lf-overlay.is-active {
  display: flex !important;
  opacity: 1 !important;
}

.lf-card {
  background: var(--popup-bg) !important;
  width: 100% !important;
  max-width: 620px !important;
  min-height: 420px !important;
  border-radius: 32px !important;
  padding: clamp(30px, 6vw, 60px) !important;
  position: relative !important;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .3) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.lf-close-btn {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid var(--popup-input-border) !important;
  background: transparent !important;
  font-size: 1.4rem !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
  color: var(--popup-close) !important;
}

.lf-progress-bar {
  width: 100% !important;
  max-width: 440px !important;
  margin: 0 auto 14px !important;
  text-align: center !important
}

.lf-neuron-wrap {
  display: inline-block !important;
  position: relative !important;
  width: 280px !important;
  height: 80px !important;
  filter: drop-shadow(0 2px 10px rgba(34, 211, 238, 0.2)) !important
}

.lf-neuron-svg {
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important
}

.lf-neuron-grid {
  stroke: rgba(34, 211, 238, 0.06) !important;
  stroke-width: 0.5 !important;
  stroke-dasharray: 2 4 !important;
  fill: none !important
}

.lf-neuron-node {
  fill: url(#lf-neuron-idle-grad) !important;
  stroke: rgba(103, 232, 249, 0.55) !important;
  stroke-width: 1.5 !important;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform-origin: center !important;
  transform-box: fill-box !important
}

.lf-neuron-node.is-active {
  fill: url(#lf-neuron-active-grad) !important;
  stroke: #fff !important;
  stroke-width: 2 !important;
  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.95)) drop-shadow(0 0 16px rgba(34, 211, 238, 0.5)) !important;
  animation: lf-neuron-pulse 1.8s ease-in-out infinite !important
}

@keyframes lf-neuron-pulse {

  0%,
  100% {
    transform: scale(1) !important
  }

  50% {
    transform: scale(1.25) !important
  }
}

.lf-neuron-halo {
  fill: rgba(34, 211, 238, 0.25) !important;
  opacity: 0 !important;
  transform-origin: center !important;
  transform-box: fill-box !important;
  transition: opacity 0.4s !important
}

.lf-neuron-halo.is-active {
  opacity: 0.7 !important;
  animation: lf-neuron-halo-rip 2.2s ease-out infinite !important
}

@keyframes lf-neuron-halo-rip {
  0% {
    transform: scale(0.8) !important;
    opacity: 0.7 !important
  }

  100% {
    transform: scale(2.2) !important;
    opacity: 0 !important
  }
}

.lf-neuron-line {
  stroke: rgba(103, 232, 249, 0.12) !important;
  stroke-width: 1.2 !important;
  fill: none !important;
  stroke-dasharray: 140 !important;
  stroke-dashoffset: 140 !important;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.4s !important;
  stroke-linecap: round !important
}

.lf-neuron-line.is-active {
  stroke: url(#lf-neuron-line-grad) !important;
  stroke-dashoffset: 0 !important;
  stroke-width: 1.5 !important;
  filter: drop-shadow(0 0 3px rgba(34, 211, 238, 0.7)) !important
}

.lf-neuron-signal {
  r: 2.5 !important;
  fill: #fff !important;
  opacity: 0 !important;
  filter: drop-shadow(0 0 4px #22d3ee) drop-shadow(0 0 8px rgba(34, 211, 238, 0.8)) !important
}

.lf-neuron-signal.is-active {
  opacity: 1 !important;
  animation: lf-neuron-travel 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite !important
}

@keyframes lf-neuron-travel {
  0% {
    offset-distance: 0% !important;
    opacity: 0 !important
  }

  10% {
    opacity: 1 !important
  }

  90% {
    opacity: 1 !important
  }

  100% {
    offset-distance: 100% !important;
    opacity: 0 !important
  }
}

.lf-neuron-label {
  font-size: 10px !important;
  color: #22d3ee !important;
  text-transform: uppercase !important;
  letter-spacing: 2.5px !important;
  font-weight: 800 !important;
  margin-top: 4px !important;
  background: linear-gradient(90deg, #22d3ee, #67e8f9, #22d3ee) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: lf-neuron-shimmer 3s linear infinite !important
}

@keyframes lf-neuron-shimmer {
  to {
    background-position: 200% center !important
  }
}

.lf-steps {
  position: relative !important;
  width: 100% !important;
  min-height: 320px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.lf-step {
  position: absolute !important;
  width: 100% !important;
  opacity: 0 !important;
  visibility: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 24px !important;
  padding: 16px !important;
  z-index: 1 !important;
}

.lf-step.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 2 !important;
}

.lf-header {
  width: 100% !important;
  max-width: 440px !important;
}

.lf-title {
  font-size: clamp(24px, 4vw, 36px) !important;
  font-weight: 800 !important;
  color: var(--popup-title) !important;
  margin: 0 0 12px !important;
  line-height: 1.15 !important;
}

.lf-p {
  color: var(--popup-desc) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.lf-input-group {
  width: 100% !important;
  max-width: 380px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.lf-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--popup-label) !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
}

.lf-input {
  width: 100% !important;
  padding: 14px !important;
  border-radius: 12px !important;
  border: 1px solid var(--popup-input-border) !important;
  background: var(--popup-input-bg) !important;
  font-family: inherit !important;
  font-size: 16px !important;
  color: var(--popup-input-text) !important;
  -webkit-text-fill-color: var(--popup-input-text) !important;
  caret-color: var(--popup-btn-bg) !important;
  text-align: center !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.lf-input:focus {
  outline: none !important;
  border-color: var(--popup-btn-bg) !important;
  box-shadow: 0 0 12px rgba(0, 0, 0, .08) !important;
}

.lf-input::placeholder {
  color: var(--popup-input-text) !important;
  -webkit-text-fill-color: var(--popup-input-text) !important;
  opacity: 0.45 !important;
}

.lf-input:-webkit-autofill,
.lf-input:-webkit-autofill:hover,
.lf-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--popup-input-bg) inset !important;
  -webkit-text-fill-color: var(--popup-input-text) !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

.lf-actions {
  width: 100% !important;
  max-width: 380px !important;
}

.lf-btn {
  width: 100% !important;
  padding: 16px !important;
  border-radius: 12px !important;
  border: none !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: transform .2s, box-shadow .2s !important;
}

.lf-btn--primary {
  background: var(--popup-btn-bg) !important;
  color: var(--popup-btn-text) !important;
}

.lf-btn--primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .15) !important;
}

.lf-btn--back {
  background: color-mix(in srgb, var(--popup-btn-bg) 8%, transparent) !important;
  color: var(--popup-title, #333) !important;
  border: 1.5px solid color-mix(in srgb, var(--popup-btn-bg) 30%, transparent) !important;
  opacity: 1 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 10px 20px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.lf-btn--back:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.lf-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
}

.lf-multiselect {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 380px !important;
}

.lf-multiselect-option {
  padding: 10px 18px !important;
  border-radius: 10px !important;
  border: 2px solid var(--popup-input-border) !important;
  background: var(--popup-input-bg) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--popup-input-text) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.lf-multiselect-option.is-selected {
  border-color: var(--popup-btn-bg) !important;
  background: color-mix(in srgb, var(--popup-btn-bg) 15%, transparent) !important;
  color: var(--popup-btn-bg) !important;
}

.lf-phone-container {
  width: 100% !important;
  max-width: 380px !important;
}

.lf-phone-search {
  width: 100% !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  border: 1px solid var(--popup-input-border) !important;
  background: var(--popup-input-bg) !important;
  color: var(--popup-input-text) !important;
  -webkit-text-fill-color: var(--popup-input-text) !important;
  font-family: inherit !important;
  font-size: 11px !important;
  margin-bottom: 4px !important;
  outline: none !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.lf-phone-search::placeholder {
  color: var(--popup-input-text) !important;
  -webkit-text-fill-color: var(--popup-input-text) !important;
  opacity: 0.4 !important;
}

.lf-phone-search:focus {
  border-color: var(--popup-btn-bg) !important;
}

.lf-phone-group {
  display: flex !important;
  gap: 6px !important;
  width: 100% !important;
}

.lf-phone-prefix {
  width: 110px !important;
  padding: 14px 8px !important;
  border-radius: 12px !important;
  border: 1px solid var(--popup-input-border) !important;
  background: var(--popup-input-bg) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  color: var(--popup-input-text) !important;
  -webkit-text-fill-color: var(--popup-input-text) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.lf-phone-input {
  flex: 1 !important;
  padding: 14px !important;
  border-radius: 12px !important;
  border: 1px solid var(--popup-input-border) !important;
  background: var(--popup-input-bg) !important;
  font-family: inherit !important;
  font-size: 16px !important;
  color: var(--popup-input-text) !important;
  -webkit-text-fill-color: var(--popup-input-text) !important;
  caret-color: var(--popup-btn-bg) !important;
  text-align: center !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.lf-phone-input:focus {
  outline: none !important;
  border-color: var(--popup-btn-bg) !important;
  box-shadow: 0 0 12px rgba(0, 0, 0, .08) !important;
}

.lf-phone-input:-webkit-autofill,
.lf-phone-input:-webkit-autofill:hover,
.lf-phone-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--popup-input-bg) inset !important;
  -webkit-text-fill-color: var(--popup-input-text) !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

.lf-completion-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 200000 !important;
  pointer-events: none !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 100%) !important;
  backdrop-filter: blur(4px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(4px) saturate(1.2) !important;
}

.lf-completion-overlay.is-visible {
  display: flex !important;
}

.lf-completion-overlay.is-shaking {
  animation: lf-screen-shake 0.4s ease !important;
}

.lf-flash-glow {
  position: fixed !important;
  inset: 0 !important;
  z-index: 200001 !important;
  pointer-events: none !important;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(0, 229, 255, 0.15) 50%, transparent 80%) !important;
  animation: lf-flash-out 0.3s ease-out forwards !important;
}

.lf-completion-msg {
  background: none !important;
  color: #ffffff !important;
  padding: 0 !important;
  font-size: clamp(1.8rem, 5vw, 2.8rem) !important;
  font-weight: 900 !important;
  text-shadow: 0 0 40px rgba(0, 229, 255, 0.5), 0 0 80px rgba(0, 229, 255, 0.2), 0 4px 20px rgba(0, 0, 0, .6) !important;
  opacity: 0 !important;
  text-align: center !important;
  max-width: 500px !important;
  animation: lf-card-spring 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
  z-index: 10 !important;
}

.lf-completion-msg .lf-emoji {
  font-size: clamp(56px, 12vw, 80px) !important;
  line-height: 1 !important;
  margin-bottom: 16px !important;
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3)) !important;
}

.lf-completion-msg .lf-subtitle {
  font-size: clamp(14px, 3vw, 18px) !important;
  font-weight: 500 !important;
  opacity: 0.85 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  margin-top: 12px !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5) !important;
}

.lf-msg-out {
  animation: lf-msg-out 0.3s ease forwards !important;
}

/* Social Proof Toast */
.lf-toast {
  position: fixed !important;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  left: calc(20px + env(safe-area-inset-left, 0px)) !important;
  z-index: 100001 !important;
  background: var(--popup-bg) !important;
  border: 1px solid var(--popup-input-border) !important;
  border-radius: 12px !important;
  padding: 12px 44px 12px 16px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .2) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 13px !important;
  color: var(--popup-title) !important;
  max-width: 340px !important;
  opacity: 0 !important;
  transform: translateX(-100%) !important;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  pointer-events: none !important;
}

.lf-toast.is-visible {
  opacity: 1 !important;
  transform: translateX(0) !important;
  pointer-events: auto !important;
}

.lf-toast-text {
  line-height: 1.35 !important;
  flex: 1 1 auto !important;
}

.lf-toast-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  flex-shrink: 0 !important;
  animation: lf-dot-pulse 2s infinite !important;
}

.lf-toast-dismiss {
  position: absolute !important;
  top: 50% !important;
  right: 4px !important;
  transform: translateY(-50%) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: none !important;
  background: transparent !important;
  color: var(--popup-close) !important;
  opacity: 0.6 !important;
  cursor: pointer !important;
  font-size: 18px !important;
  line-height: 1 !important;
  display: grid !important;
  place-items: center !important;
  transition: opacity 0.2s !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

.lf-toast-dismiss:hover,
.lf-toast-dismiss:active {
  opacity: 1 !important;
}

@keyframes lf-dot-pulse {

  0%,
  100% {
    opacity: 1 !important;
  }

  50% {
    opacity: 0.4 !important;
  }
}

@media (max-width: 560px) {
  .lf-toast {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    left: calc(12px + env(safe-area-inset-left, 0px)) !important;
    right: calc(12px + env(safe-area-inset-right, 0px)) !important;
    max-width: none !important;
    padding: 12px 52px 12px 14px !important;
    font-size: 12px !important;
  }

  .lf-toast-dismiss {
    width: 44px !important;
    height: 44px !important;
    right: 6px !important;
    font-size: 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lf-toast {
    transition: opacity 0.2s ease !important;
    transform: none !important;
  }

  .lf-toast-dot {
    animation: none !important;
  }
}

@media (max-width: 560px) {
  .gate-meta {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .lf-card {
    padding: 18px 16px !important;
    min-height: 380px !important;
    border-radius: 22px !important;
  }

  .lf-close-btn {
    width: 44px !important;
    height: 44px !important;
    top: 8px !important;
    right: 8px !important;
    font-size: 1.3rem !important;
  }

  .lf-steps {
    min-height: 260px !important;
  }

  .lf-step {
    gap: 14px !important;
    padding: 8px !important;
  }

  .lf-title {
    font-size: 19px !important;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
  }

  .lf-p {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .lf-label {
    font-size: 11px !important;
  }

  .lf-input {
    padding: 11px 12px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
  }

  .lf-phone-input {
    font-size: 16px !important;
  }

  .lf-phone-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  .lf-phone-group {
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .lf-phone-prefix {
    width: 82px !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
  }

  .lf-phone-input {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  .lf-actions {
    gap: 8px !important;
    max-width: 100% !important;
    flex-wrap: nowrap !important;
  }

  .lf-btn {
    width: auto !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }

  .lf-btn--primary {
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 13px 14px !important;
    font-size: 15px !important;
    white-space: nowrap !important;
  }

  .lf-btn--back {
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
}

@media (min-width: 561px) and (max-width: 1024px) {
  .lf-card {
    max-width: 560px !important;
    padding: clamp(28px, 4vw, 48px) !important;
  }

  .lf-title {
    font-size: clamp(22px, 3.2vw, 30px) !important;
  }

  .lf-input-group,
  .lf-actions,
  .lf-multiselect,
  .lf-phone-container {
    max-width: 440px !important;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .lf-card {
    min-height: 0 !important;
    padding: 16px 20px !important;
    border-radius: 18px !important;
  }

  .lf-steps {
    min-height: 200px !important;
  }

  .lf-step {
    gap: 10px !important;
  }

  .lf-title {
    font-size: 18px !important;
    margin-bottom: 4px !important;
  }

  .lf-p {
    font-size: 12px !important;
  }
}

/* ZenithForm™ Agenda — Auto-generated — ALL styles scoped to .zf-agenda */
@import url('https: //fonts.googleapis.com/css2?family=Inter:wght@400 !important;500;600;700;800&display=swap');

/* ── Scoped reset — ONLY inside .zf-agenda — Cross-browser/device ── */
.zf-agenda,
.zf-agenda *,
.zf-agenda *::before,
.zf-agenda *::after {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
  -webkit-touch-callout: none !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

.zf-agenda button {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  font-family: inherit !important;
  cursor: pointer !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
  outline: none !important;
}

.zf-agenda button,
.zf-agenda select,
.zf-agenda input,
.zf-agenda textarea {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  touch-action: manipulation !important;
}

.zf-agenda button {
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.zf-agenda button:focus,
.zf-agenda button:active,
.zf-agenda button:hover,
.zf-agenda a:focus,
.zf-agenda a:active,
.zf-agenda a:hover,
.zf-agenda input:focus,
.zf-agenda select:focus,
.zf-agenda textarea:focus {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
  outline: 0 !important;
}

/* ── iOS Safari: force theme colors on ALL inputs ── */
.zf-agenda input,
.zf-agenda select,
.zf-agenda textarea {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  caret-color: #000000 !important;
  border-radius: 0 !important;
}

.zf-agenda .zf-input,
.zf-agenda .zf-option,
.zf-agenda .zf-pill,
.zf-agenda select {
  background-color: #ffffff !important;
}

.zf-agenda input::placeholder,
.zf-agenda textarea::placeholder {
  color: rgba(0, 0, 0, 0.5) !important;
  -webkit-text-fill-color: rgba(0, 0, 0, 0.5) !important;
  opacity: 1 !important;
}

.zf-agenda input:-webkit-autofill,
.zf-agenda input:-webkit-autofill:hover,
.zf-agenda input:-webkit-autofill:focus,
.zf-agenda select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #000000 !important;
  background-color: #ffffff !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* Prevent iOS zoom on input focus (font-size >= 16px) */
@supports (-webkit-touch-callout:none) {

  .zf-agenda input,
  .zf-agenda select,
  .zf-agenda textarea {
    font-size: 16px !important
  }
}

/* ── Phone field — custom prefix dropdown (Android+iOS compatible) ── */
.zf-phone-container {
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box
}

.zf-phone-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  border-radius: 16px !important;
  overflow: visible !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}

#zf-prefix-btn {
  flex: 0 0 auto !important;
  min-width: 70px !important;
  max-width: 100px !important;
  padding: 10px 10px !important;
  border: none !important;
  border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
  background: transparent !important;
  color: #000000 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  font-family: inherit !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
}

.zf-phone-row input[type="tel"] {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: 100% !important;
  padding: 12px 14px !important;
  border: none !important;
  background: transparent !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  font-size: 16px !important;
  outline: none !important;
  font-family: inherit !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  line-height: normal !important;
}

.zf-phone-row input[type="tel"]::placeholder {
  color: rgba(0, 0, 0, 0.5) !important;
  -webkit-text-fill-color: rgba(0, 0, 0, 0.5) !important;
  opacity: 1 !important;
}

.zf-prefix-item {
  transition: background 0.15s
}

.zf-prefix-item:hover {
  background: #035d5c15 !important;
}

.zf-agenda {
  font-family: 'Inter', sans-serif !important;
  background: #ffffff !important;
  min-height: 480px !important;
  width: 100% !important;
  max-width: 600px !important;
  margin: 0 auto !important;
  padding-bottom: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  color: #000000 !important;
  overflow: hidden !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  border-radius: 16px !important;
  position: relative !important;
}

/* Progress bar — base (overridden per style in JS) */
.zf-progress-wrap {
  position: relative !important;
  width: 100% !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center
}

.zf-progress {
  height: 6px !important;
  background: rgba(0, 0, 0, 0.06)
}

.zf-progress-fill {
  height: 100% !important;
  background: #035d5c !important;
  border-radius: 0 4px 4px 0 !important;
  transition: width .5s ease !important;
  box-shadow: 0 0 6px #035d5c20 !important;
}

/* Card effect overrides */
.zf-card {
  animation: pulseGlow 3s ease-in-out infinite !important;
  box-shadow: 0 0 15px #035d5c20, 0 0 30px #035d5c10
}

.zf-card {
  box-shadow: 0 0 5px #035d5c30, 0 0 15px #035d5c20, 0 0 30px #035d5c15, 0 0 60px #035d5c08, inset 0 0 10px #035d5c05 !important;
  border-color: #035d5c40
}

.zf-card {
  animation: neonPulse 2s ease-in-out infinite
}

/* Button effect overrides */
.zf-btn {
  animation: shimmerSweep 2.5s ease-in-out infinite !important;
  background-size: 400% 100%
}

/* Title gradient text */
.zf-title {
  background: linear-gradient(135deg, #035d5c, #c4964c, #035d5c) !important;
  background-size: 200% 200% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: gradientShift 4s ease-in-out infinite
}

/* Header */
.zf-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px 24px 8px !important;
}

.zf-back {
  background: rgba(0, 0, 0, 0.5)18 !important;
  border: 1.5px solid rgba(0, 0, 0, 0.5)28 !important;
  color: rgba(0, 0, 0, 0.5) !important;
  padding: 8px 14px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: 'Inter', sans-serif !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  outline: 0 !important;
  transition: background .15s ease, border-color .15s ease !important;
}

.zf-back:hover {
  background: rgba(0, 0, 0, 0.5)28 !important;
  border-color: rgba(0, 0, 0, 0.5)40 !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important
}

.zf-back:active {
  background: rgba(0, 0, 0, 0.5)35 !important;
  border-color: rgba(0, 0, 0, 0.5)50 !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important
}

.zf-back:focus {
  outline: 0 !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important
}

.zf-back:disabled {
  opacity: 0 !important;
  cursor: default !important;
  pointer-events: none
}

.zf-step-count {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(0, 0, 0, 0.5) !important;
  letter-spacing: .05em !important;
}

/* Main */
.zf-main {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 24px !important;
  padding: clamp(12px, 3vw, 24px) !important;
  max-width: 100% !important;
}

/* Card */
.zf-card {
  width: 100% !important;
  max-width: 440px !important;
  padding: 32px !important;
  border-radius: 16px !important;
  background: #fbfbfbcc !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  animation: zfSlideIn .2s ease-out !important;
  overflow-x: hidden !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.zf-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #000000 !important;
  margin-bottom: 8px !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word
}

.zf-desc {
  font-size: 14px !important;
  color: rgba(0, 0, 0, 0.65) !important;
  margin-bottom: 20px !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal
}

/* Inputs */
.zf-input {
  width: 100% !important;
  max-width: 100% !important;
  padding: 12px 16px !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  font-size: 16px !important;
  outline: none !important;
  transition: border-color .2s !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
}

.zf-input:focus {
  border-color: #035d5c60
}

.zf-textarea {
  resize: none !important;
  min-height: 100px
}

/* Select options */
.zf-option {
  width: 100% !important;
  padding: 12px 16px !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  border: 2px solid rgba(0, 0, 0, 0.1) !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: all .12s ease-out !important;
  margin-bottom: 8px !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  line-height: 1.4 !important;
  hyphens: auto !important;
  will-change: transform, border-color !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  font-family: inherit !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

.zf-option:active {
  transform: scale(.97)
}

.zf-option:focus {
  outline: none !important;
  box-shadow: none !important
}

.zf-option.selected {
  background: #035d5c20 !important;
  border-color: #035d5c !important;
  color: #035d5c !important;
  -webkit-text-fill-color: #035d5c !important;
}

/* Multi-select pills */
.zf-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px
}

.zf-pill {
  padding: 8px 16px !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  border: 2px solid rgba(0, 0, 0, 0.1) !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all .2s !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  font-family: inherit !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

.zf-pill:focus {
  outline: none !important;
  box-shadow: none !important
}

.zf-pill.selected {
  background: #035d5c20 !important;
  border-color: #035d5c !important;
  color: #035d5c !important;
  -webkit-text-fill-color: #035d5c !important;
}

/* Button */
.zf-btn {
  width: 100% !important;
  padding: 14px 24px !important;
  border-radius: 16px !important;
  background: #035d5c !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer !important;
  margin-top: 20px !important;
  transition: transform .1s ease-out, opacity .1s !important;
  box-shadow: 0 4px 20px #035d5c30 !important;
  will-change: transform !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  font-family: inherit !important;
  outline: none !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  text-align: center !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  line-height: 1.3 !important;
  min-height: 48px !important;
}

.zf-btn:hover {
  transform: scale(1.02)
}

.zf-btn:active {
  transform: scale(.95) !important;
  transition: transform 0s
}

.zf-btn:disabled {
  opacity: .5 !important;
  cursor: default !important;
  transform: none
}

.zf-btn:focus {
  outline: none !important;
  box-shadow: 0 4px 20px #035d5c30 !important
}

.zf-btn-confirm {
  background: #035d5c !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

/* Calendar */
.zf-cal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px
}

.zf-cal-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #000000 !important;
  text-transform: capitalize
}

.zf-cal-nav {
  background: rgba(0, 0, 0, 0.06) !important;
  border: none !important;
  color: rgba(0, 0, 0, 0.5) !important;
  padding: 8px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-size: 14px !important;
}

.zf-weekdays {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 4px !important;
  margin-bottom: 8px
}

.zf-weekday {
  text-align: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(0, 0, 0, 0.65) !important;
  padding: 4px
}

.zf-days {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 4px
}

.zf-day {
  aspect-ratio: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border: none !important;
  background: transparent !important;
  color: rgba(0, 0, 0, 0.2) !important;
  cursor: default !important;
  transition: transform .1s ease-out, background .1s !important;
  will-change: transform !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  font-family: inherit !important;
  outline: none !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

.zf-day.available {
  background: rgba(3, 93, 92, 0.06) !important;
  color: #035d5c !important;
  cursor: pointer !important;
  font-weight: 600 !important;
}

.zf-day.available:active {
  transform: scale(.9) !important;
  transition: transform 0s
}

.zf-day.selected {
  background: #035d5c !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  transform: scale(1.1) !important;
  box-shadow: 0 2px 12px #035d5c40 !important;
}

/* Time slots */
.zf-times {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px
}

.zf-time {
  padding: 10px 12px !important;
  border-radius: 12px !important;
  background: rgba(3, 93, 92, 0.06) !important;
  color: #035d5c !important;
  -webkit-text-fill-color: #035d5c !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer !important;
  transition: transform .1s ease-out, background .1s, box-shadow .1s !important;
  will-change: transform !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  font-family: inherit !important;
  outline: none !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

.zf-time:hover {
  transform: scale(1.05)
}

.zf-time:active {
  transform: scale(.93) !important;
  transition: transform 0s
}

.zf-time.selected {
  background: #035d5c !important;
  color: #ffffff !important;
  box-shadow: 0 2px 12px #035d5c40 !important;
  transform: scale(1.05) !important;
}

/* Summary */
.zf-summary {
  padding: 20px !important;
  border-radius: 12px !important;
  background: #035d5c08 !important;
  border: 1px solid #035d5c15 !important;
  margin-bottom: 20px !important;
}

.zf-summary-row {
  margin-bottom: 12px
}

.zf-summary-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  color: rgba(0, 0, 0, 0.65) !important;
  margin-bottom: 2px
}

.zf-summary-value {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #000000
}

/* Completion */
.zf-complete {
  text-align: center !important;
  padding: 32px
}

.zf-complete-icon {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background: #035d5c20 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 20px !important;
  font-size: 32px !important;
}

.zf-complete-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #000000 !important;
  margin-bottom: 8px
}

.zf-complete-sub {
  font-size: 14px !important;
  color: rgba(0, 0, 0, 0.5) !important;
  margin-bottom: 24px
}

.zf-booking-details {
  padding: 16px !important;
  border-radius: 12px !important;
  background: #035d5c08 !important;
  border: 1px solid #035d5c20 !important;
  text-align: left !important;
}

.zf-booking-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin-bottom: 12px
}

.zf-booking-row:last-child {
  margin-bottom: 0
}

/* Error */
.zf-error {
  color: #FF5252 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin-top: 12px
}

/* Timezone */
.zf-tz {
  text-align: center !important;
  font-size: 10px !important;
  color: rgba(0, 0, 0, 0.5) !important;
  margin-top: 16px
}

/* WhatsApp fallback */
.zf-wa-fallback {
  text-align: center !important;
  margin-top: 16px !important;
  padding: 12px 0 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06)
}

.zf-wa-fallback.zf-wa-above {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  padding: 0 0 12px !important;
  border-top: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06)
}

.zf-wa-text {
  font-size: 16px !important;
  color: rgba(0, 0, 0, 0.5) !important;
  opacity: .6 !important;
  font-weight: 400 !important;
  margin-bottom: 8px
}

.zf-wa-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 20px !important;
  border-radius: 50px !important;
  font-size: 13px !important;
  background: #46c876 !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  cursor: pointer !important;
  font-family: inherit !important;
  animation: zfWaGlow 2s ease-in-out infinite !important;
}

.zf-wa-btn:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 4px 15px #46c87666
}

.zf-wa-btn svg {
  width: 18px !important;
  height: 18px !important;
  fill: white
}

@keyframes zfWaGlow {

  0%,
  100% {
    box-shadow: 0 2px 10px #46c87640
  }

  50% {
    box-shadow: 0 4px 25px #46c87670, 0 0 40px #46c87630
  }
}

/* Background effects */











/* Animations */
@keyframes zfSlideIn {
  from {
    opacity: 0 !important;
    transform: translateX(30px)
  }

  to {
    opacity: 1 !important;
    transform: translateX(0)
  }
}

@keyframes zfSlideInLeft {
  from {
    opacity: 0 !important;
    transform: translateX(-30px)
  }

  to {
    opacity: 1 !important;
    transform: translateX(0)
  }
}

@keyframes zfFadeIn {
  from {
    opacity: 0 !important;
    transform: translateY(20px)
  }

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

@keyframes zfFadeOnly {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes zfFadeOnlyR {
  from {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

@keyframes zfFlip {
  from {
    opacity: 0 !important;
    transform: perspective(600px) rotateY(90deg)
  }

  to {
    opacity: 1 !important;
    transform: perspective(600px) rotateY(0)
  }
}

@keyframes zfFlipR {
  from {
    opacity: 0 !important;
    transform: perspective(600px) rotateY(-90deg)
  }

  to {
    opacity: 1 !important;
    transform: perspective(600px) rotateY(0)
  }
}

@keyframes zfZoom {
  from {
    opacity: 0 !important;
    transform: scale(0.5)
  }

  to {
    opacity: 1 !important;
    transform: scale(1)
  }
}

@keyframes zfZoomR {
  from {
    opacity: 0 !important;
    transform: scale(1.5)
  }

  to {
    opacity: 1 !important;
    transform: scale(1)
  }
}

@keyframes zfBounce {
  0% {
    opacity: 0 !important;
    transform: translateY(40px)
  }

  60% {
    opacity: 1 !important;
    transform: translateY(-8px)
  }

  80% {
    transform: translateY(4px)
  }

  100% {
    transform: translateY(0)
  }
}

@keyframes zfBounceR {
  0% {
    opacity: 0 !important;
    transform: translateY(-40px)
  }

  60% {
    opacity: 1 !important;
    transform: translateY(8px)
  }

  80% {
    transform: translateY(-4px)
  }

  100% {
    transform: translateY(0)
  }
}

@keyframes zfSpin {
  to {
    transform: rotate(360deg)
  }
}

@keyframes zfLabelPop {
  0% {
    opacity: 0 !important;
    transform: translateY(4px) scale(.95)
  }

  100% {
    opacity: 1 !important;
    transform: translateY(0) scale(1)
  }
}

@keyframes plasmaShift {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 50%
  }
}

@keyframes shimmerSweep {
  0% {
    background-position: 200% 0
  }

  100% {
    background-position: -200% 0
  }
}

@keyframes pulseGlow {

  0%,
  100% {
    box-shadow: 0 0 10px #035d5c15, 0 0 20px #035d5c08
  }

  50% {
    box-shadow: 0 0 20px #035d5c30, 0 0 40px #035d5c15, 0 0 60px #035d5c08
  }
}

@keyframes neonPulse {

  0%,
  100% {
    box-shadow: 0 0 5px #035d5c30, 0 0 15px #035d5c20, 0 0 30px #035d5c10 !important;
    opacity: 1
  }

  50% {
    box-shadow: 0 0 10px #035d5c50, 0 0 25px #035d5c35, 0 0 50px #035d5c20, 0 0 80px #035d5c10 !important;
    opacity: .95
  }
}

@keyframes gradientShift {

  0%,
  100% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }
}

/* ── Mobile responsive — small phones (iPhone SE, Xiaomi Redmi, older Samsung) ── */
@media screen and (max-width:360px) {
  .zf-agenda {
    padding: 8px
  }

  .zf-card {
    padding: 16px 12px
  }

  .zf-title {
    font-size: 18px
  }

  .zf-desc {
    font-size: 12px
  }

  .zf-btn {
    padding: 12px 12px !important;
    font-size: 13px !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    min-height: 44px !important
  }

  .zf-input {
    font-size: 16px !important;
    padding: 10px
  }

  .zf-option {
    padding: 10px 12px !important;
    font-size: 13px
  }

  .zf-day {
    font-size: 12px
  }

  .zf-time {
    padding: 8px 10px !important;
    font-size: 12px
  }

  .zf-phone-row {
    gap: 0 !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important
  }

  #zf-prefix-btn {
    min-width: 60px !important;
    max-width: 80px !important;
    padding: 8px 6px !important;
    font-size: 13px !important
  }

  .zf-phone-row input[type="tel"] {
    font-size: 16px !important;
    padding: 10px 10px !important
  }
}

/* ── Extremely narrow screens (below 320px) — stack phone vertically ── */
@media screen and (max-width:300px) {
  .zf-phone-row {
    flex-direction: column !important
  }

  .zf-phone-row input[type="tel"] {
    border-top: 1px solid rgba(0, 0, 0, 0.1)
  }

  #zf-prefix-btn {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1)
  }
}

/* ── Mobile responsive — medium phones (iPhone 12-15, Samsung S series) ── */
@media screen and (max-width:414px) {
  .zf-card {
    max-width: 100%
  }

  .zf-title {
    font-size: 20px
  }

  .zf-progress-wrap {
    padding: 0 8px
  }
}

/* ── iOS Safari specific fixes ── */
@supports (-webkit-touch-callout:none) {

  .zf-input,
  .zf-option,
  select,
  input[type="tel"] {
    font-size: 16px !important;
    -webkit-appearance: none !important;
  }

  .zf-agenda {
    -webkit-overflow-scrolling: touch
  }
}

/* ── Android / all mobile — prevent zoom on focus, normalize input ── */
@media screen and (max-width:768px) {

  input[type="tel"],
  input[type="text"],
  input[type="email"],
  select,
  textarea {
    font-size: 16px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
  }

  .zf-phone-row {
    overflow: visible
  }
}

/* ── iPhone X+ notch/home bar safe areas ── */
@supports (padding:env(safe-area-inset-bottom)) {
  .zf-agenda {
    padding-bottom: env(safe-area-inset-bottom)
  }
}

/* ── Prevent text scaling on orientation change ── */
.zf-agenda {
  -webkit-text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
  text-size-adjust: 100%
}


/* ─── ZenithForm Inline Embed Overrides ─── */
#zf-inline-wrap {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 0 0 1px #035d5c18, 0 8px 40px -12px rgba(0, 0, 0, .35), 0 0 20px -4px #035d5c15;
  isolation: isolate;
  animation: zfInlineReveal .6s cubic-bezier(.22, 1, .36, 1) both
}

#zf-inline-accent {
  height: 2px;
  background: linear-gradient(90deg, #035d5c, #035d5c80);
  position: relative;
  z-index: 2;
  overflow: hidden
}

#zf-inline-accent::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .45) 50%, transparent 100%);
  animation: zfAccentShimmer 3s ease-in-out infinite
}

#zf-inline-wrap .zf-agenda {
  overflow: hidden;
  border-radius: 0;
  max-width: 100%;
  margin: 0;
  min-height: auto
}

@keyframes zfInlineReveal {
  from {
    opacity: 0;
    transform: translateY(16px)
  }

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

@keyframes zfAccentShimmer {

  0%,
  100% {
    transform: translateX(-100%)
  }

  50% {
    transform: translateX(100%)
  }
}

@media(prefers-reduced-motion:reduce) {
  #zf-inline-wrap {
    animation: none
  }

  #zf-inline-accent::after {
    animation: none
  }

  .zf-card {
    animation: none !important
  }
}

/* ══════════════════════════════════════════════
   ZenithForm™ Agenda — Theme CSS (dynamic)
   ══════════════════════════════════════════════ */
/* ZenithForm™ Agenda — Auto-generated — ALL styles scoped to .zf-agenda */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Scoped reset — ONLY inside .zf-agenda — Cross-browser/device ── */
.zf-agenda,.zf-agenda *,.zf-agenda *::before,.zf-agenda *::after{
  box-sizing:border-box !important;margin:0;padding:0;
  -webkit-tap-highlight-color:rgba(0,0,0,0) !important;
  -webkit-touch-callout:none !important;
  -webkit-text-size-adjust:100% !important;
  text-size-adjust:100% !important;
}
.zf-agenda button{
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance:none !important;
  font-family:inherit !important;
  cursor:pointer !important;
  line-height:inherit !important;
  letter-spacing:inherit !important;
  -webkit-tap-highlight-color:rgba(0,0,0,0) !important;
  outline:none !important;
}
.zf-agenda button,.zf-agenda select,.zf-agenda input,.zf-agenda textarea{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  touch-action:manipulation;
}
.zf-agenda button{
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
}
.zf-agenda button:focus,.zf-agenda button:active,.zf-agenda button:hover,
.zf-agenda a:focus,.zf-agenda a:active,.zf-agenda a:hover,
.zf-agenda input:focus,.zf-agenda select:focus,.zf-agenda textarea:focus{
  -webkit-tap-highlight-color:rgba(0,0,0,0) !important;
  outline:0;
}

/* ── iOS Safari: force theme colors on ALL inputs ── */
.zf-agenda input,
.zf-agenda select,
.zf-agenda textarea{
  color:#000000 !important;
  -webkit-text-fill-color:#000000;
  caret-color:#000000;
  border-radius:0;
}
.zf-agenda .zf-input,
.zf-agenda .zf-option,
.zf-agenda .zf-pill,
.zf-agenda select{
  background-color:#ffffff !important;
}
.zf-agenda input::placeholder,
.zf-agenda textarea::placeholder{
  color:rgba(0,0,0,0.5) !important;
  -webkit-text-fill-color:rgba(0,0,0,0.5) !important;
  opacity:1 !important;
}
.zf-agenda input:-webkit-autofill,
.zf-agenda input:-webkit-autofill:hover,
.zf-agenda input:-webkit-autofill:focus,
.zf-agenda select:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color:#000000 !important;
  background-color:#ffffff !important;
  transition:background-color 5000s ease-in-out 0s;
}
/* Prevent iOS zoom on input focus (font-size >= 16px) */
@supports (-webkit-touch-callout:none){
  .zf-agenda input,.zf-agenda select,.zf-agenda textarea{font-size:16px !important}
}

/* ── Phone field — custom prefix dropdown (Android+iOS compatible) ── */
.zf-phone-container{position:relative;width:100%;box-sizing:border-box}
.zf-phone-row{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:stretch;
  width:100%;
  border-radius:16px;
  overflow:visible;
  border:1px solid rgba(0,0,0,0.1);
  background:#ffffff;
  box-sizing:border-box;
}
#zf-prefix-btn{
  flex:0 0 auto !important;
  min-width:70px;
  max-width:100px;
  padding:10px 10px !important;
  border:none !important;
  border-right:1px solid rgba(0,0,0,0.1) !important;
  background:transparent !important;
  color:#000000 !important;
  font-size:14px !important;
  cursor:pointer;
  white-space:nowrap;
  font-family:inherit;
  display:flex !important;
  align-items:center;
  gap:4px;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  box-sizing:border-box;
}
.zf-phone-row input[type=ZF1]{
  flex:1 1 0% !important;
  min-width:0 !important;
  width:100% !important;
  padding:12px 14px !important;
  border:none !important;
  background:transparent !important;
  color:#000000 !important;
  -webkit-text-fill-color:#000000;
  font-size:16px !important;
  outline:none;
  font-family:inherit;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  box-sizing:border-box;
  line-height:normal;
}
.zf-phone-row input[type=ZF2]::placeholder{
  color:rgba(0,0,0,0.5) !important;
  -webkit-text-fill-color:rgba(0,0,0,0.5) !important;
  opacity:1 !important;
}
.zf-prefix-item{transition:background 0.15s}
.zf-prefix-item:hover{
  background:#035d5c15 !important;
}

.zf-agenda{
  font-family:'Inter', sans-serif;
  background:#ffffff;
  min-height:480px;
  width:100%;
  max-width:600px;
  margin:0 auto;
  padding-bottom:24px;
  display:flex;
  flex-direction:column;
  color:#000000;
  overflow:hidden;
  word-wrap:break-word;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  border-radius:16px;
  position:relative;
}

/* Progress bar — base (overridden per style in JS) */
.zf-progress-wrap{position:relative;width:100%;z-index:1;display:flex;flex-direction:column;align-items:center}
.zf-progress{height:6px;background:rgba(0,0,0,0.06)}
.zf-progress-fill{
  height:100%;
  background:#035d5c;
  border-radius:0 4px 4px 0;
  transition:width .5s ease;
  box-shadow:0 0 6px #035d5c20;
}
/* Card effect overrides */
.zf-card{animation:pulseGlow 3s ease-in-out infinite;box-shadow:0 0 15px #035d5c20,0 0 30px #035d5c10}
.zf-card{box-shadow:0 0 5px #035d5c30,0 0 15px #035d5c20,0 0 30px #035d5c15,0 0 60px #035d5c08,inset 0 0 10px #035d5c05;border-color:#035d5c40}
.zf-card{animation:neonPulse 2s ease-in-out infinite}
/* Button effect overrides */
.zf-btn{animation:shimmerSweep 2.5s ease-in-out infinite;background-size:400% 100%}

/* Title gradient text */
.zf-title{background:linear-gradient(135deg,#035d5c,#c4964c,#035d5c);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientShift 4s ease-in-out infinite}

/* Header */
.zf-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 24px 8px;
}
.zf-back{
  background:rgba(0,0,0,0.5)18;
  border:1.5px solid rgba(0,0,0,0.5)28;
  color:rgba(0,0,0,0.5);
  padding:8px 14px;
  border-radius:12px;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  font-family:'Inter',sans-serif;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  -webkit-tap-highlight-color:rgba(0,0,0,0) !important;
  -webkit-touch-callout:none !important;
  -webkit-user-select:none !important;
  outline:0 !important;
  transition: background .15s ease,border-color .15s ease !important;
}
.zf-back:hover{background: rgba(0,0,0,0.5)28 !important;border-color: rgba(0,0,0,0.5)40 !important;-webkit-tap-highlight-color:rgba(0,0,0,0) !important}
.zf-back:active{background: rgba(0,0,0,0.5)35 !important;border-color: rgba(0,0,0,0.5)50 !important;-webkit-tap-highlight-color:rgba(0,0,0,0) !important}
.zf-back:focus{outline:0 !important;box-shadow:none !important;-webkit-tap-highlight-color:rgba(0,0,0,0) !important}
.zf-back:disabled{opacity: 0 !important;cursor: default !important;pointer-events: none !important}
.zf-step-count{
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(0,0,0,0.5) !important;
  letter-spacing: .05em !important;
}

/* Main */
.zf-main{
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 24px !important;
  padding: clamp(12px,3vw,24px) !important;
  max-width: 100% !important;
}

/* Card */
.zf-card{
  width: 100% !important;
  max-width: 440px !important;
  padding: 32px !important;
  border-radius: 16px !important;
  background: #fbfbfbcc !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  backdrop-filter: blur(20px) !important;-webkit-backdrop-filter: blur(20px) !important;
  animation: zfSlideIn .2s ease-out !important;
  overflow-x: hidden !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}
.zf-title{font-size: 20px !important;font-weight: 700 !important;color: #000000 !important;margin-bottom: 8px !important;word-wrap: break-word !important;overflow-wrap: break-word !important}
.zf-desc{font-size: 14px !important;color: rgba(0,0,0,0.65) !important;margin-bottom: 20px !important;word-wrap: break-word !important;overflow-wrap: break-word !important;white-space: normal !important}

/* Inputs */
.zf-input{
  width: 100% !important;
  max-width: 100% !important;
  padding: 12px 16px !important;
  border-radius: 16px !important;
  background:#ffffff !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  color:#000000 !important;
  -webkit-text-fill-color: #000000 !important;
  font-size: 16px !important;
  outline: none !important;
  transition: border-color .2s !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
}
.zf-input:focus{border-color:#035d5c60 !important}
.zf-textarea{resize: none !important;min-height: 100px !important}

/* Select options */
.zf-option{
  width: 100% !important;
  padding: 12px 16px !important;
  border-radius: 16px !important;
  background:#ffffff !important;
  border: 2px solid rgba(0,0,0,0.1) !important;
  color:#000000 !important;
  -webkit-text-fill-color:#000000 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: all .12s ease-out !important;
  margin-bottom: 8px !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  line-height: 1.4 !important;
  hyphens: auto !important;
  will-change: transform,border-color !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance:none !important;
  font-family:inherit !important;
  outline:none !important;
  box-shadow:none !important;
  -webkit-tap-highlight-color:rgba(0,0,0,0) !important;
}
.zf-option:active{transform: scale(.97) !important}
.zf-option:focus{outline:none !important;box-shadow:none !important}
.zf-option.selected{
  background:#035d5c20 !important;
  border-color:#035d5c !important;
  color:#035d5c !important;
  -webkit-text-fill-color:#035d5c !important;
}

/* Multi-select pills */
.zf-pills{display: flex !important;flex-wrap: wrap !important;gap: 8px !important}
.zf-pill{
  padding: 8px 16px !important;
  border-radius: 20px !important;
  background:#ffffff !important;
  border: 2px solid rgba(0,0,0,0.1) !important;
  color:#000000 !important;
  -webkit-text-fill-color:#000000 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all .2s !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance:none !important;
  font-family:inherit !important;
  outline:none !important;
  box-shadow:none !important;
  -webkit-tap-highlight-color:rgba(0,0,0,0) !important;
}
.zf-pill:focus{outline:none !important;box-shadow:none !important}
.zf-pill.selected{
  background:#035d5c20 !important;
  border-color:#035d5c !important;
  color:#035d5c !important;
  -webkit-text-fill-color:#035d5c !important;
}

/* Button */
.zf-btn{
  width: 100% !important;
  padding: 14px 24px !important;
  border-radius: 16px !important;
  background:#035d5c !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border:none !important;
  cursor: pointer !important;
  margin-top: 20px !important;
  transition: transform .1s ease-out,opacity .1s !important;
  box-shadow: 0 4px 20px #035d5c30 !important;
  will-change: transform !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance:none !important;
  font-family:inherit !important;
  outline:none !important;
  -webkit-tap-highlight-color:rgba(0,0,0,0) !important;
  word-wrap:break-word !important;
  overflow-wrap:break-word !important;
  white-space:normal !important;
  text-align:center !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  line-height:1.3 !important;
  min-height:48px !important;
}
.zf-btn:hover{transform: scale(1.02) !important}
.zf-btn:active{transform: scale(.95) !important;transition: transform 0s !important}
.zf-btn:disabled{opacity: .5 !important;cursor: default !important;transform: none !important}
.zf-btn:focus{outline:none !important;box-shadow:0 4px 20px #035d5c30 !important}
.zf-btn-confirm{
  background:#035d5c !important;
  display: flex !important;align-items: center !important;justify-content: center !important;gap: 8px !important;
}

/* Calendar */
.zf-cal-header{display: flex !important;align-items: center !important;justify-content: space-between !important;margin-bottom: 16px !important}
.zf-cal-title{font-size: 14px !important;font-weight: 700 !important;color: #000000 !important;text-transform: capitalize !important}
.zf-cal-nav{
  background: rgba(0,0,0,0.06) !important;
  border: none !important;
  color: rgba(0,0,0,0.5) !important;
  padding: 8px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-size: 14px !important;
}
.zf-weekdays{display: grid !important;grid-template-columns: repeat(7,1fr) !important;gap: 4px !important;margin-bottom: 8px !important}
.zf-weekday{text-align: center !important;font-size: 11px !important;font-weight: 700 !important;color: rgba(0,0,0,0.65) !important;padding: 4px !important}
.zf-days{display: grid !important;grid-template-columns: repeat(7,1fr) !important;gap: 4px !important}
.zf-day{
  aspect-ratio: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border:none !important;
  background:transparent !important;
  color:rgba(0,0,0,0.2) !important;
  cursor: default !important;
  transition: transform .1s ease-out,background .1s !important;
  will-change: transform !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  font-family:inherit !important;
  outline:none !important;
  -webkit-tap-highlight-color:rgba(0,0,0,0) !important;
}
/* CRÍTICO: !important en .available/.selected porque .zf-day base usa
   !important en background/color (para protegerse de WordPress/landing CSS).
   Sin !important aquí, las reglas específicas PIERDEN contra la base aunque
   tengan más specificity → días disponibles saldrían transparentes en vez
   del color configurado. */
.zf-day.available{
  background:rgba(3,93,92,0.06) !important;
  color:#035d5c !important;
  cursor:pointer !important;
  font-weight:600 !important;
}
.zf-day.available:active{transform: scale(.9) !important;transition: transform 0s !important}
.zf-day.selected{
  background:#035d5c !important;
  color:#ffffff !important;
  font-weight:800 !important;
  transform: scale(1.1) !important;
  box-shadow: 0 2px 12px #035d5c40 !important;
}

/* Time slots */
.zf-times{display: grid !important;grid-template-columns: repeat(3,1fr) !important;gap: 8px !important}
.zf-time{
  padding: 10px 12px !important;
  border-radius: 12px !important;
  background:rgba(3,93,92,0.06) !important;
  color:#035d5c !important;
  -webkit-text-fill-color:#035d5c !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border:none !important;
  cursor: pointer !important;
  transition: transform .1s ease-out,background .1s,box-shadow .1s !important;
  will-change: transform !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  font-family:inherit !important;
  outline:none !important;
  -webkit-tap-highlight-color:rgba(0,0,0,0) !important;
}
.zf-time:hover{transform: scale(1.05) !important}
.zf-time:active{transform: scale(.93) !important;transition: transform 0s !important}
.zf-time.selected{
  background:#035d5c !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  box-shadow: 0 2px 12px #035d5c40 !important;
  transform: scale(1.05) !important;
}

/* Summary */
.zf-summary{
  padding: 20px !important;
  border-radius: 12px !important;
  background: #035d5c08 !important;
  border: 1px solid #035d5c15 !important;
  margin-bottom: 20px !important;
}
.zf-summary-row{margin-bottom: 12px !important}
.zf-summary-label{font-size: 10px !important;font-weight: 700 !important;text-transform: uppercase !important;letter-spacing: .05em !important;color: rgba(0,0,0,0.65) !important;margin-bottom: 2px !important}
.zf-summary-value{font-size: 14px !important;font-weight: 700 !important;color: #000000 !important}

/* Confirm alert banner (encima del botón Confirmar Reserva) */
.zf-confirm-alert{margin-bottom: 12px !important;padding: 12px 16px !important;border-radius: 12px !important;font-size: 14px !important;font-weight: 700 !important;text-align: center !important;line-height: 1.4 !important}
.zf-confirm-alert--warning{background: rgba(245,158,11,0.12) !important;color: #92400e !important;border: 1px solid rgba(245,158,11,0.4) !important}
.zf-confirm-alert--urgent{background: linear-gradient(135deg,#ef4444 0%,#dc2626 100%) !important;color: #fff !important;border: none !important;box-shadow: 0 4px 14px rgba(239,68,68,0.35) !important}
.zf-confirm-alert--info{background: rgba(59,130,246,0.12) !important;color: #1e40af !important;border: 1px solid rgba(59,130,246,0.3) !important}
.zf-confirm-alert--subtle{background: #035d5c10 !important;color: #000000 !important;border: 1px solid #035d5c30 !important}
.zf-confirm-alert--gold{background: linear-gradient(135deg,#fbbf24 0%,#f59e0b 100%) !important;color: #1f2937 !important;border: none !important;box-shadow: 0 4px 14px rgba(245,158,11,0.4) !important}

/* Completion */
.zf-complete{text-align: center !important;padding: 32px !important}
.zf-complete-icon{
  width: 64px !important;height: 64px !important;
  border-radius: 50% !important;
  background: #035d5c20 !important;
  display: flex !important;align-items: center !important;justify-content: center !important;
  margin: 0 auto 20px !important;
  font-size: 32px !important;
}
.zf-complete-title{font-size: 24px !important;font-weight: 700 !important;color: #000000 !important;margin-bottom: 8px !important}
.zf-complete-sub{font-size: 14px !important;color: rgba(0,0,0,0.5) !important;margin-bottom: 24px !important}
.zf-booking-details{
  padding: 16px !important;
  border-radius: 12px !important;
  background: #035d5c08 !important;
  border: 1px solid #035d5c20 !important;
  text-align: left !important;
}
.zf-booking-row{display: flex !important;align-items: flex-start !important;gap: 12px !important;margin-bottom: 12px !important}
.zf-booking-row:last-child{margin-bottom: 0 !important}

/* Error */
.zf-error{color: #FF5252 !important;font-size: 13px !important;font-weight: 500 !important;margin-top: 12px !important}

/* Timezone */
.zf-tz{text-align: center !important;font-size: 10px !important;color: rgba(0,0,0,0.5) !important;margin-top: 16px !important}

/* WhatsApp fallback */
.zf-wa-fallback{text-align: center !important;margin-top: 16px !important;padding: 12px 0 !important;border-top: 1px solid rgba(0,0,0,0.06) !important}
.zf-wa-fallback.zf-wa-above{margin-top: 0 !important;margin-bottom: 16px !important;padding: 0 0 12px !important;border-top: none !important;border-bottom: 1px solid rgba(0,0,0,0.06) !important}
.zf-wa-text{font-size: 16px !important;color: rgba(0,0,0,0.5) !important;opacity: .6 !important;font-weight: 400 !important;margin-bottom: 8px !important}
.zf-wa-btn{display: inline-flex !important;align-items: center !important;gap: 8px !important;padding: 10px 20px !important;border-radius: 50px !important;font-size: 13px !important;background: #00471a !important;color: #ffffff !important;border: none !important;font-weight: 600 !important;text-decoration: none !important;transition: transform 0.2s,box-shadow 0.2s !important;cursor: pointer !important;font-family: inherit !important;animation: zfWaPulse 2s ease-in-out infinite !important;}
.zf-wa-btn:hover{transform: scale(1.03) !important;box-shadow: 0 4px 15px #00471a66 !important}
.zf-wa-btn svg{width: 18px !important;height: 18px !important;fill: white !important}
@keyframes zfWaPulse{0%,100%{transform: scale(1) !important}50%{transform: scale(1.06) !important}}

/* Background effects */











/* Animations */
@keyframes zfSlideIn{from{opacity: 0 !important;transform: translateX(30px) !important}to{opacity: 1 !important;transform: translateX(0) !important}}
@keyframes zfSlideInLeft{from{opacity: 0 !important;transform: translateX(-30px) !important}to{opacity: 1 !important;transform: translateX(0) !important}}
@keyframes zfFadeIn{from{opacity: 0 !important;transform: translateY(20px) !important}to{opacity: 1 !important;transform: translateY(0) !important}}
@keyframes zfFadeOnly{from{opacity: 0 !important}to{opacity: 1 !important}}
@keyframes zfFadeOnlyR{from{opacity: 1 !important}to{opacity: 0 !important}}
@keyframes zfFlip{from{opacity: 0 !important;transform: perspective(600px) rotateY(90deg) !important}to{opacity: 1 !important;transform: perspective(600px) rotateY(0) !important}}
@keyframes zfFlipR{from{opacity: 0 !important;transform: perspective(600px) rotateY(-90deg) !important}to{opacity: 1 !important;transform: perspective(600px) rotateY(0) !important}}
@keyframes zfZoom{from{opacity: 0 !important;transform: scale(0.5) !important}to{opacity: 1 !important;transform: scale(1) !important}}
@keyframes zfZoomR{from{opacity: 0 !important;transform: scale(1.5) !important}to{opacity: 1 !important;transform: scale(1) !important}}
@keyframes zfBounce{0%{opacity: 0 !important;transform: translateY(40px) !important}60%{opacity: 1 !important;transform: translateY(-8px) !important}80%{transform: translateY(4px) !important}100%{transform: translateY(0) !important}}
@keyframes zfBounceR{0%{opacity: 0 !important;transform: translateY(-40px) !important}60%{opacity: 1 !important;transform: translateY(8px) !important}80%{transform: translateY(-4px) !important}100%{transform: translateY(0) !important}}
@keyframes zfSpin{to{transform: rotate(360deg) !important}}
@keyframes zfLabelPop{0%{opacity: 0 !important;transform: translateY(4px) scale(.95) !important}100%{opacity: 1 !important;transform: translateY(0) scale(1) !important}}
@keyframes plasmaShift{0%{background-position: 0% 50% !important}50%{background-position: 100% 50% !important}100%{background-position: 0% 50% !important}}
@keyframes shimmerSweep{0%{background-position: 200% 0 !important}100%{background-position: -200% 0 !important}}
@keyframes pulseGlow{0%,100%{box-shadow: 0 0 10px #035d5c15,0 0 20px #035d5c08 !important}50%{box-shadow: 0 0 20px #035d5c30,0 0 40px #035d5c15,0 0 60px #035d5c08 !important}}
@keyframes neonPulse{0%,100%{box-shadow: 0 0 5px #035d5c30,0 0 15px #035d5c20,0 0 30px #035d5c10 !important;opacity: 1 !important}50%{box-shadow: 0 0 10px #035d5c50,0 0 25px #035d5c35,0 0 50px #035d5c20,0 0 80px #035d5c10 !important;opacity: .95 !important}}
@keyframes gradientShift{0%,100%{background-position: 0% 50% !important}50%{background-position: 100% 50% !important}}

/* ── Mobile responsive — small phones (iPhone SE, Xiaomi Redmi, older Samsung) ── */
@media screen and (max-width:360px){
  .zf-agenda{padding: 8px !important}
  .zf-card{padding: 16px 12px !important}
  .zf-title{font-size: 18px !important}
  .zf-desc{font-size: 12px !important}
  .zf-btn{padding: 12px 12px !important;font-size: 13px !important;word-wrap:break-word !important;overflow-wrap:break-word !important;white-space:normal !important;line-height:1.3 !important;min-height:44px !important}
  .zf-input{font-size: 16px !important;padding: 10px !important}
  .zf-option{padding: 10px 12px !important;font-size: 13px !important}
  .zf-day{font-size: 12px !important}
  .zf-time{padding: 8px 10px !important;font-size: 12px !important}
  .zf-phone-row{gap:0 !important;flex-direction:row !important;flex-wrap:nowrap !important}
  #zf-prefix-btn{min-width:60px !important;max-width:80px !important;padding:8px 6px !important;font-size:13px !important}
  .zf-phone-row input[type="tel"]{font-size:16px !important;padding:10px 10px !important}
}
/* ── Extremely narrow screens (below 320px) — stack phone vertically ── */
@media screen and (max-width:300px){
  .zf-phone-row{flex-direction:column !important}
  .zf-phone-row input[type="tel"]{border-top: 1px solid rgba(0,0,0,0.1) !important}
  #zf-prefix-btn{width:100% !important;max-width:100% !important;justify-content: center !important;border-right:none !important;border-bottom: 1px solid rgba(0,0,0,0.1) !important}
}

/* ── Mobile responsive — medium phones (iPhone 12-15, Samsung S series) ── */
@media screen and (max-width:414px){
  .zf-card{max-width: 100% !important}
  .zf-title{font-size: 20px !important}
  .zf-progress-wrap{padding: 0 8px !important}
}

/* ── iOS Safari specific fixes ── */
@supports (-webkit-touch-callout:none){
  .zf-input,.zf-option,select,input[type="tel"]{
    font-size: 16px !important;
    -webkit-appearance: none !important;
  }
  .zf-agenda{-webkit-overflow-scrolling: touch !important}
}
/* ── Android / all mobile — prevent zoom on focus, normalize input ── */
@media screen and (max-width:768px){
  input[type="tel"],input[type="text"],input[type="email"],select,textarea{
    font-size: 16px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
  }
  .zf-phone-row{overflow: visible !important}
}

/* ── iPhone X+ notch/home bar safe areas ── */
@supports (padding:env(safe-area-inset-bottom)){
  .zf-agenda{padding-bottom: env(safe-area-inset-bottom) !important}
}

/* ── Prevent text scaling on orientation change ── */
.zf-agenda{-webkit-text-size-adjust: 100% !important;-moz-text-size-adjust: 100% !important;text-size-adjust: 100% !important}


/* ─── ZenithForm Inline Embed Overrides ─── */
#zf-inline-wrap{position:relative;width:100%;max-width:600px;margin:0 auto;overflow:hidden;border-radius:20px;box-shadow:0 0 0 1px #035d5c18,0 8px 40px -12px rgba(0,0,0,.35),0 0 20px -4px #035d5c15;isolation:isolate;animation:zfInlineReveal .6s cubic-bezier(.22,1,.36,1) both}
#zf-inline-accent{height:2px;background:linear-gradient(90deg,#035d5c,#035d5c80);position:relative;z-index:2;overflow:hidden}
#zf-inline-accent::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.45) 50%,transparent 100%);animation:zfAccentShimmer 3s ease-in-out infinite}
#zf-inline-wrap .zf-agenda{overflow:hidden;border-radius:0;max-width:100%;margin:0;min-height:auto}
@keyframes zfInlineReveal{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes zfAccentShimmer{0%,100%{transform:translateX(-100%)}50%{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){#zf-inline-wrap{animation:none}#zf-inline-accent::after{animation:none}.zf-card{animation:none!important}}



/* ══════════════════════════════════════════════
   ZenithForm™ Agenda — Form CSS
   ══════════════════════════════════════════════ */
/* ZenithForm™ Agenda — Auto-generated — ALL styles scoped to .zf-agenda */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Scoped reset — ONLY inside .zf-agenda — Cross-browser/device ── */
.zf-agenda,.zf-agenda *,.zf-agenda *::before,.zf-agenda *::after{
  box-sizing:border-box !important;margin:0;padding:0;
  -webkit-tap-highlight-color:rgba(0,0,0,0) !important;
  -webkit-touch-callout:none !important;
  -webkit-text-size-adjust:100% !important;
  text-size-adjust:100% !important;
}
.zf-agenda button{
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance:none !important;
  font-family:inherit !important;
  cursor:pointer !important;
  line-height:inherit !important;
  letter-spacing:inherit !important;
  -webkit-tap-highlight-color:rgba(0,0,0,0) !important;
  outline:none !important;
}
.zf-agenda button,.zf-agenda select,.zf-agenda input,.zf-agenda textarea{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  touch-action:manipulation;
}
.zf-agenda button{
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
}
.zf-agenda button:focus,.zf-agenda button:active,.zf-agenda button:hover,
.zf-agenda a:focus,.zf-agenda a:active,.zf-agenda a:hover,
.zf-agenda input:focus,.zf-agenda select:focus,.zf-agenda textarea:focus{
  -webkit-tap-highlight-color:rgba(0,0,0,0) !important;
  outline:0;
}

/* ── iOS Safari: force theme colors on ALL inputs ── */
.zf-agenda input,
.zf-agenda select,
.zf-agenda textarea{
  color:#000000 !important;
  -webkit-text-fill-color:#000000;
  caret-color:#000000;
  border-radius:0;
}
.zf-agenda .zf-input,
.zf-agenda .zf-option,
.zf-agenda .zf-pill,
.zf-agenda select{
  background-color:#ffffff !important;
}
.zf-agenda input::placeholder,
.zf-agenda textarea::placeholder{
  color:rgba(0,0,0,0.5) !important;
  -webkit-text-fill-color:rgba(0,0,0,0.5) !important;
  opacity:1 !important;
}
.zf-agenda input:-webkit-autofill,
.zf-agenda input:-webkit-autofill:hover,
.zf-agenda input:-webkit-autofill:focus,
.zf-agenda select:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color:#000000 !important;
  background-color:#ffffff !important;
  transition:background-color 5000s ease-in-out 0s;
}
/* Prevent iOS zoom on input focus (font-size >= 16px) */
@supports (-webkit-touch-callout:none){
  .zf-agenda input,.zf-agenda select,.zf-agenda textarea{font-size:16px !important}
}

/* ── Phone field — custom prefix dropdown (Android+iOS compatible) ── */
.zf-phone-container{position:relative;width:100%;box-sizing:border-box}
.zf-phone-row{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:stretch;
  width:100%;
  border-radius:16px;
  overflow:visible;
  border:1px solid rgba(0,0,0,0.1);
  background:#ffffff;
  box-sizing:border-box;
}
#zf-prefix-btn{
  flex:0 0 auto !important;
  min-width:70px;
  max-width:100px;
  padding:10px 10px !important;
  border:none !important;
  border-right:1px solid rgba(0,0,0,0.1) !important;
  background:transparent !important;
  color:#000000 !important;
  font-size:14px !important;
  cursor:pointer;
  white-space:nowrap;
  font-family:inherit;
  display:flex !important;
  align-items:center;
  gap:4px;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  box-sizing:border-box;
}
.zf-phone-row input[type=ZF1]{
  flex:1 1 0% !important;
  min-width:0 !important;
  width:100% !important;
  padding:12px 14px !important;
  border:none !important;
  background:transparent !important;
  color:#000000 !important;
  -webkit-text-fill-color:#000000;
  font-size:16px !important;
  outline:none;
  font-family:inherit;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  box-sizing:border-box;
  line-height:normal;
}
.zf-phone-row input[type=ZF2]::placeholder{
  color:rgba(0,0,0,0.5) !important;
  -webkit-text-fill-color:rgba(0,0,0,0.5) !important;
  opacity:1 !important;
}
.zf-prefix-item{transition:background 0.15s}
.zf-prefix-item:hover{
  background:#035d5c15 !important;
}

.zf-agenda{
  font-family:'Inter', sans-serif;
  background:#ffffff;
  min-height:480px;
  width:100%;
  max-width:600px;
  margin:0 auto;
  padding-bottom:24px;
  display:flex;
  flex-direction:column;
  color:#000000;
  overflow:hidden;
  word-wrap:break-word;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  border-radius:16px;
  position:relative;
}

/* Progress bar — base (overridden per style in JS) */
.zf-progress-wrap{position:relative;width:100%;z-index:1;display:flex;flex-direction:column;align-items:center}
.zf-progress{height:6px;background:rgba(0,0,0,0.06)}
.zf-progress-fill{
  height:100%;
  background:#035d5c;
  border-radius:0 4px 4px 0;
  transition:width .5s ease;
  box-shadow:0 0 6px #035d5c20;
}
/* Card effect overrides */
.zf-card{animation:pulseGlow 3s ease-in-out infinite;box-shadow:0 0 15px #035d5c20,0 0 30px #035d5c10}
.zf-card{box-shadow:0 0 5px #035d5c30,0 0 15px #035d5c20,0 0 30px #035d5c15,0 0 60px #035d5c08,inset 0 0 10px #035d5c05;border-color:#035d5c40}
.zf-card{animation:neonPulse 2s ease-in-out infinite}
/* Button effect overrides */
.zf-btn{animation:shimmerSweep 2.5s ease-in-out infinite;background-size:400% 100%}

/* Title gradient text */
.zf-title{background:linear-gradient(135deg,#035d5c,#c4964c,#035d5c);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientShift 4s ease-in-out infinite}

/* Header */
.zf-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 24px 8px;
}
.zf-back{
  background:rgba(0,0,0,0.5)18;
  border:1.5px solid rgba(0,0,0,0.5)28;
  color:rgba(0,0,0,0.5);
  padding:8px 14px;
  border-radius:12px;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  font-family:'Inter',sans-serif;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  -webkit-tap-highlight-color:rgba(0,0,0,0) !important;
  -webkit-touch-callout:none !important;
  -webkit-user-select:none !important;
  outline:0 !important;
  transition: background .15s ease,border-color .15s ease !important;
}
.zf-back:hover{background: rgba(0,0,0,0.5)28 !important;border-color: rgba(0,0,0,0.5)40 !important;-webkit-tap-highlight-color:rgba(0,0,0,0) !important}
.zf-back:active{background: rgba(0,0,0,0.5)35 !important;border-color: rgba(0,0,0,0.5)50 !important;-webkit-tap-highlight-color:rgba(0,0,0,0) !important}
.zf-back:focus{outline:0 !important;box-shadow:none !important;-webkit-tap-highlight-color:rgba(0,0,0,0) !important}
.zf-back:disabled{opacity: 0 !important;cursor: default !important;pointer-events: none !important}
.zf-step-count{
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(0,0,0,0.5) !important;
  letter-spacing: .05em !important;
}

/* Main */
.zf-main{
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 24px !important;
  padding: clamp(12px,3vw,24px) !important;
  max-width: 100% !important;
}

/* Card */
.zf-card{
  width: 100% !important;
  max-width: 440px !important;
  padding: 32px !important;
  border-radius: 16px !important;
  background: #fbfbfbcc !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  backdrop-filter: blur(20px) !important;-webkit-backdrop-filter: blur(20px) !important;
  animation: zfSlideIn .2s ease-out !important;
  overflow-x: hidden !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}
.zf-title{font-size: 20px !important;font-weight: 700 !important;color: #000000 !important;margin-bottom: 8px !important;word-wrap: break-word !important;overflow-wrap: break-word !important}
.zf-desc{font-size: 14px !important;color: rgba(0,0,0,0.65) !important;margin-bottom: 20px !important;word-wrap: break-word !important;overflow-wrap: break-word !important;white-space: normal !important}

/* Inputs */
.zf-input{
  width: 100% !important;
  max-width: 100% !important;
  padding: 12px 16px !important;
  border-radius: 16px !important;
  background:#ffffff !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  color:#000000 !important;
  -webkit-text-fill-color: #000000 !important;
  font-size: 16px !important;
  outline: none !important;
  transition: border-color .2s !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
}
.zf-input:focus{border-color:#035d5c60 !important}
.zf-textarea{resize: none !important;min-height: 100px !important}

/* Select options */
.zf-option{
  width: 100% !important;
  padding: 12px 16px !important;
  border-radius: 16px !important;
  background:#ffffff !important;
  border: 2px solid rgba(0,0,0,0.1) !important;
  color:#000000 !important;
  -webkit-text-fill-color:#000000 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: all .12s ease-out !important;
  margin-bottom: 8px !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  line-height: 1.4 !important;
  hyphens: auto !important;
  will-change: transform,border-color !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance:none !important;
  font-family:inherit !important;
  outline:none !important;
  box-shadow:none !important;
  -webkit-tap-highlight-color:rgba(0,0,0,0) !important;
}
.zf-option:active{transform: scale(.97) !important}
.zf-option:focus{outline:none !important;box-shadow:none !important}
.zf-option.selected{
  background:#035d5c20 !important;
  border-color:#035d5c !important;
  color:#035d5c !important;
  -webkit-text-fill-color:#035d5c !important;
}

/* Multi-select pills */
.zf-pills{display: flex !important;flex-wrap: wrap !important;gap: 8px !important}
.zf-pill{
  padding: 8px 16px !important;
  border-radius: 20px !important;
  background:#ffffff !important;
  border: 2px solid rgba(0,0,0,0.1) !important;
  color:#000000 !important;
  -webkit-text-fill-color:#000000 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all .2s !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance:none !important;
  font-family:inherit !important;
  outline:none !important;
  box-shadow:none !important;
  -webkit-tap-highlight-color:rgba(0,0,0,0) !important;
}
.zf-pill:focus{outline:none !important;box-shadow:none !important}
.zf-pill.selected{
  background:#035d5c20 !important;
  border-color:#035d5c !important;
  color:#035d5c !important;
  -webkit-text-fill-color:#035d5c !important;
}

/* Button */
.zf-btn{
  width: 100% !important;
  padding: 14px 24px !important;
  border-radius: 16px !important;
  background:#035d5c !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border:none !important;
  cursor: pointer !important;
  margin-top: 20px !important;
  transition: transform .1s ease-out,opacity .1s !important;
  box-shadow: 0 4px 20px #035d5c30 !important;
  will-change: transform !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance:none !important;
  font-family:inherit !important;
  outline:none !important;
  -webkit-tap-highlight-color:rgba(0,0,0,0) !important;
  word-wrap:break-word !important;
  overflow-wrap:break-word !important;
  white-space:normal !important;
  text-align:center !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  line-height:1.3 !important;
  min-height:48px !important;
}
.zf-btn:hover{transform: scale(1.02) !important}
.zf-btn:active{transform: scale(.95) !important;transition: transform 0s !important}
.zf-btn:disabled{opacity: .5 !important;cursor: default !important;transform: none !important}
.zf-btn:focus{outline:none !important;box-shadow:0 4px 20px #035d5c30 !important}
.zf-btn-confirm{
  background:#035d5c !important;
  display: flex !important;align-items: center !important;justify-content: center !important;gap: 8px !important;
}

/* Calendar */
.zf-cal-header{display: flex !important;align-items: center !important;justify-content: space-between !important;margin-bottom: 16px !important}
.zf-cal-title{font-size: 14px !important;font-weight: 700 !important;color: #000000 !important;text-transform: capitalize !important}
.zf-cal-nav{
  background: rgba(0,0,0,0.06) !important;
  border: none !important;
  color: rgba(0,0,0,0.5) !important;
  padding: 8px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-size: 14px !important;
}
.zf-weekdays{display: grid !important;grid-template-columns: repeat(7,1fr) !important;gap: 4px !important;margin-bottom: 8px !important}
.zf-weekday{text-align: center !important;font-size: 11px !important;font-weight: 700 !important;color: rgba(0,0,0,0.65) !important;padding: 4px !important}
.zf-days{display: grid !important;grid-template-columns: repeat(7,1fr) !important;gap: 4px !important}
.zf-day{
  aspect-ratio: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border:none !important;
  background:transparent !important;
  color:rgba(0,0,0,0.2) !important;
  cursor: default !important;
  transition: transform .1s ease-out,background .1s !important;
  will-change: transform !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  font-family:inherit !important;
  outline:none !important;
  -webkit-tap-highlight-color:rgba(0,0,0,0) !important;
}
/* CRÍTICO: !important en .available/.selected porque .zf-day base usa
   !important en background/color (para protegerse de WordPress/landing CSS).
   Sin !important aquí, las reglas específicas PIERDEN contra la base aunque
   tengan más specificity → días disponibles saldrían transparentes en vez
   del color configurado. */
.zf-day.available{
  background:rgba(3,93,92,0.06) !important;
  color:#035d5c !important;
  cursor:pointer !important;
  font-weight:600 !important;
}
.zf-day.available:active{transform: scale(.9) !important;transition: transform 0s !important}
.zf-day.selected{
  background:#035d5c !important;
  color:#ffffff !important;
  font-weight:800 !important;
  transform: scale(1.1) !important;
  box-shadow: 0 2px 12px #035d5c40 !important;
}

/* Time slots */
.zf-times{display: grid !important;grid-template-columns: repeat(3,1fr) !important;gap: 8px !important}
.zf-time{
  padding: 10px 12px !important;
  border-radius: 12px !important;
  background:rgba(3,93,92,0.06) !important;
  color:#035d5c !important;
  -webkit-text-fill-color:#035d5c !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border:none !important;
  cursor: pointer !important;
  transition: transform .1s ease-out,background .1s,box-shadow .1s !important;
  will-change: transform !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  font-family:inherit !important;
  outline:none !important;
  -webkit-tap-highlight-color:rgba(0,0,0,0) !important;
}
.zf-time:hover{transform: scale(1.05) !important}
.zf-time:active{transform: scale(.93) !important;transition: transform 0s !important}
.zf-time.selected{
  background:#035d5c !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  box-shadow: 0 2px 12px #035d5c40 !important;
  transform: scale(1.05) !important;
}

/* Summary */
.zf-summary{
  padding: 20px !important;
  border-radius: 12px !important;
  background: #035d5c08 !important;
  border: 1px solid #035d5c15 !important;
  margin-bottom: 20px !important;
}
.zf-summary-row{margin-bottom: 12px !important}
.zf-summary-label{font-size: 10px !important;font-weight: 700 !important;text-transform: uppercase !important;letter-spacing: .05em !important;color: rgba(0,0,0,0.65) !important;margin-bottom: 2px !important}
.zf-summary-value{font-size: 14px !important;font-weight: 700 !important;color: #000000 !important}

/* Confirm alert banner (encima del botón Confirmar Reserva) */
.zf-confirm-alert{margin-bottom: 12px !important;padding: 12px 16px !important;border-radius: 12px !important;font-size: 14px !important;font-weight: 700 !important;text-align: center !important;line-height: 1.4 !important}
.zf-confirm-alert--warning{background: rgba(245,158,11,0.12) !important;color: #92400e !important;border: 1px solid rgba(245,158,11,0.4) !important}
.zf-confirm-alert--urgent{background: linear-gradient(135deg,#ef4444 0%,#dc2626 100%) !important;color: #fff !important;border: none !important;box-shadow: 0 4px 14px rgba(239,68,68,0.35) !important}
.zf-confirm-alert--info{background: rgba(59,130,246,0.12) !important;color: #1e40af !important;border: 1px solid rgba(59,130,246,0.3) !important}
.zf-confirm-alert--subtle{background: #035d5c10 !important;color: #000000 !important;border: 1px solid #035d5c30 !important}
.zf-confirm-alert--gold{background: linear-gradient(135deg,#fbbf24 0%,#f59e0b 100%) !important;color: #1f2937 !important;border: none !important;box-shadow: 0 4px 14px rgba(245,158,11,0.4) !important}

/* Completion */
.zf-complete{text-align: center !important;padding: 32px !important}
.zf-complete-icon{
  width: 64px !important;height: 64px !important;
  border-radius: 50% !important;
  background: #035d5c20 !important;
  display: flex !important;align-items: center !important;justify-content: center !important;
  margin: 0 auto 20px !important;
  font-size: 32px !important;
}
.zf-complete-title{font-size: 24px !important;font-weight: 700 !important;color: #000000 !important;margin-bottom: 8px !important}
.zf-complete-sub{font-size: 14px !important;color: rgba(0,0,0,0.5) !important;margin-bottom: 24px !important}
.zf-booking-details{
  padding: 16px !important;
  border-radius: 12px !important;
  background: #035d5c08 !important;
  border: 1px solid #035d5c20 !important;
  text-align: left !important;
}
.zf-booking-row{display: flex !important;align-items: flex-start !important;gap: 12px !important;margin-bottom: 12px !important}
.zf-booking-row:last-child{margin-bottom: 0 !important}

/* Error */
.zf-error{color: #FF5252 !important;font-size: 13px !important;font-weight: 500 !important;margin-top: 12px !important}

/* Timezone */
.zf-tz{text-align: center !important;font-size: 10px !important;color: rgba(0,0,0,0.5) !important;margin-top: 16px !important}

/* WhatsApp fallback */
.zf-wa-fallback{text-align: center !important;margin-top: 16px !important;padding: 12px 0 !important;border-top: 1px solid rgba(0,0,0,0.06) !important}
.zf-wa-fallback.zf-wa-above{margin-top: 0 !important;margin-bottom: 16px !important;padding: 0 0 12px !important;border-top: none !important;border-bottom: 1px solid rgba(0,0,0,0.06) !important}
.zf-wa-text{font-size: 16px !important;color: rgba(0,0,0,0.5) !important;opacity: .6 !important;font-weight: 400 !important;margin-bottom: 8px !important}
.zf-wa-btn{display: inline-flex !important;align-items: center !important;gap: 8px !important;padding: 10px 20px !important;border-radius: 50px !important;font-size: 13px !important;background: #00471a !important;color: #ffffff !important;border: none !important;font-weight: 600 !important;text-decoration: none !important;transition: transform 0.2s,box-shadow 0.2s !important;cursor: pointer !important;font-family: inherit !important;animation: zfWaPulse 2s ease-in-out infinite !important;}
.zf-wa-btn:hover{transform: scale(1.03) !important;box-shadow: 0 4px 15px #00471a66 !important}
.zf-wa-btn svg{width: 18px !important;height: 18px !important;fill: white !important}
@keyframes zfWaPulse{0%,100%{transform: scale(1) !important}50%{transform: scale(1.06) !important}}

/* Background effects */











/* Animations */
@keyframes zfSlideIn{from{opacity: 0 !important;transform: translateX(30px) !important}to{opacity: 1 !important;transform: translateX(0) !important}}
@keyframes zfSlideInLeft{from{opacity: 0 !important;transform: translateX(-30px) !important}to{opacity: 1 !important;transform: translateX(0) !important}}
@keyframes zfFadeIn{from{opacity: 0 !important;transform: translateY(20px) !important}to{opacity: 1 !important;transform: translateY(0) !important}}
@keyframes zfFadeOnly{from{opacity: 0 !important}to{opacity: 1 !important}}
@keyframes zfFadeOnlyR{from{opacity: 1 !important}to{opacity: 0 !important}}
@keyframes zfFlip{from{opacity: 0 !important;transform: perspective(600px) rotateY(90deg) !important}to{opacity: 1 !important;transform: perspective(600px) rotateY(0) !important}}
@keyframes zfFlipR{from{opacity: 0 !important;transform: perspective(600px) rotateY(-90deg) !important}to{opacity: 1 !important;transform: perspective(600px) rotateY(0) !important}}
@keyframes zfZoom{from{opacity: 0 !important;transform: scale(0.5) !important}to{opacity: 1 !important;transform: scale(1) !important}}
@keyframes zfZoomR{from{opacity: 0 !important;transform: scale(1.5) !important}to{opacity: 1 !important;transform: scale(1) !important}}
@keyframes zfBounce{0%{opacity: 0 !important;transform: translateY(40px) !important}60%{opacity: 1 !important;transform: translateY(-8px) !important}80%{transform: translateY(4px) !important}100%{transform: translateY(0) !important}}
@keyframes zfBounceR{0%{opacity: 0 !important;transform: translateY(-40px) !important}60%{opacity: 1 !important;transform: translateY(8px) !important}80%{transform: translateY(-4px) !important}100%{transform: translateY(0) !important}}
@keyframes zfSpin{to{transform: rotate(360deg) !important}}
@keyframes zfLabelPop{0%{opacity: 0 !important;transform: translateY(4px) scale(.95) !important}100%{opacity: 1 !important;transform: translateY(0) scale(1) !important}}
@keyframes plasmaShift{0%{background-position: 0% 50% !important}50%{background-position: 100% 50% !important}100%{background-position: 0% 50% !important}}
@keyframes shimmerSweep{0%{background-position: 200% 0 !important}100%{background-position: -200% 0 !important}}
@keyframes pulseGlow{0%,100%{box-shadow: 0 0 10px #035d5c15,0 0 20px #035d5c08 !important}50%{box-shadow: 0 0 20px #035d5c30,0 0 40px #035d5c15,0 0 60px #035d5c08 !important}}
@keyframes neonPulse{0%,100%{box-shadow: 0 0 5px #035d5c30,0 0 15px #035d5c20,0 0 30px #035d5c10 !important;opacity: 1 !important}50%{box-shadow: 0 0 10px #035d5c50,0 0 25px #035d5c35,0 0 50px #035d5c20,0 0 80px #035d5c10 !important;opacity: .95 !important}}
@keyframes gradientShift{0%,100%{background-position: 0% 50% !important}50%{background-position: 100% 50% !important}}

/* ── Mobile responsive — small phones (iPhone SE, Xiaomi Redmi, older Samsung) ── */
@media screen and (max-width:360px){
  .zf-agenda{padding: 8px !important}
  .zf-card{padding: 16px 12px !important}
  .zf-title{font-size: 18px !important}
  .zf-desc{font-size: 12px !important}
  .zf-btn{padding: 12px 12px !important;font-size: 13px !important;word-wrap:break-word !important;overflow-wrap:break-word !important;white-space:normal !important;line-height:1.3 !important;min-height:44px !important}
  .zf-input{font-size: 16px !important;padding: 10px !important}
  .zf-option{padding: 10px 12px !important;font-size: 13px !important}
  .zf-day{font-size: 12px !important}
  .zf-time{padding: 8px 10px !important;font-size: 12px !important}
  .zf-phone-row{gap:0 !important;flex-direction:row !important;flex-wrap:nowrap !important}
  #zf-prefix-btn{min-width:60px !important;max-width:80px !important;padding:8px 6px !important;font-size:13px !important}
  .zf-phone-row input[type="tel"]{font-size:16px !important;padding:10px 10px !important}
}
/* ── Extremely narrow screens (below 320px) — stack phone vertically ── */
@media screen and (max-width:300px){
  .zf-phone-row{flex-direction:column !important}
  .zf-phone-row input[type="tel"]{border-top: 1px solid rgba(0,0,0,0.1) !important}
  #zf-prefix-btn{width:100% !important;max-width:100% !important;justify-content: center !important;border-right:none !important;border-bottom: 1px solid rgba(0,0,0,0.1) !important}
}

/* ── Mobile responsive — medium phones (iPhone 12-15, Samsung S series) ── */
@media screen and (max-width:414px){
  .zf-card{max-width: 100% !important}
  .zf-title{font-size: 20px !important}
  .zf-progress-wrap{padding: 0 8px !important}
}

/* ── iOS Safari specific fixes ── */
@supports (-webkit-touch-callout:none){
  .zf-input,.zf-option,select,input[type="tel"]{
    font-size: 16px !important;
    -webkit-appearance: none !important;
  }
  .zf-agenda{-webkit-overflow-scrolling: touch !important}
}
/* ── Android / all mobile — prevent zoom on focus, normalize input ── */
@media screen and (max-width:768px){
  input[type="tel"],input[type="text"],input[type="email"],select,textarea{
    font-size: 16px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
  }
  .zf-phone-row{overflow: visible !important}
}

/* ── iPhone X+ notch/home bar safe areas ── */
@supports (padding:env(safe-area-inset-bottom)){
  .zf-agenda{padding-bottom: env(safe-area-inset-bottom) !important}
}

/* ── Prevent text scaling on orientation change ── */
.zf-agenda{-webkit-text-size-adjust: 100% !important;-moz-text-size-adjust: 100% !important;text-size-adjust: 100% !important}/* End custom CSS */