/*
 * PushMarketing — visual enhancement layer.
 * Load after style.css, main.css and sections.css. No external dependencies.
 * Existing content, headings, layout and Elementor widgets stay in place.
 */

/* Brand and motion tokens --------------------------------------------- */
:root {
  --pm-ink: #080D1A;
  --pm-ink-2: #0B132B;
  --pm-heading: #0B132B;
  --pm-surface: #F8FAFC;
  --pm-green: #10B981;
  --pm-green-deep: #059669;
  --pm-on-green: #06291D;
  --pm-gradient: linear-gradient(115deg, #2B7FFF, #10B981);
  --pm-gradient-text: linear-gradient(105deg, #87B9FF, #5EE0B6);
  --pm-line: #E3EAF0;
  --pm-glow-green: 0 6px 22px -8px rgba(16, 185, 129, .42);
  --pm-dur-reveal: .72s;
  --pm-modern-ease: cubic-bezier(.22, 1, .36, 1);
  --pm-card-hover-shadow: 0 8px 18px -10px rgba(11, 19, 43, .12),
    0 26px 56px -28px rgba(5, 150, 105, .25);
}

.pm-btn--primary {
  background: var(--pm-green);
  color: var(--pm-on-green);
}
.pm-btn--primary:hover,
.pm-btn--primary:focus-visible {
  background: #19C791;
  color: var(--pm-on-green);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .1),
    0 10px 30px -10px rgba(16, 185, 129, .58);
}
.pm-icon--green { background: rgba(16, 185, 129, .1); color: #047857; }
.pm-icon--glass { color: #5EE0B6; }
.pm-eyebrow:not(.pm-eyebrow--dark) {
  background: rgba(5, 150, 105, .055);
  border-color: rgba(5, 150, 105, .14);
  color: #047857;
}
.pm-btn:focus-visible,
.pm-brand:focus-visible,
.pm-nav a:focus-visible,
.pm-burger:focus-visible,
.pm-lang:focus-visible,
.pm-channel:focus-visible,
.pm-faq__item summary:focus-visible {
  outline: 3px solid var(--pm-green);
  outline-offset: 4px;
}

/* 1. Persistent glass header ------------------------------------------ */
.pm-header {
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background-color .28s ease, border-color .28s ease,
    color .28s ease, box-shadow .28s ease;
}
.pm-header.is-scrolled {
  background: rgba(255, 255, 255, .96);
  border-bottom-color: rgba(11, 19, 43, .075);
  color: var(--pm-heading);
  box-shadow: 0 6px 24px -14px rgba(11, 19, 43, .2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
@supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
  .pm-header,
  .pm-header.is-scrolled { background: rgba(255, 255, 255, .85); }
}
.pm-header.is-hidden { transform: none; }
.pm-header__cta:hover,
.pm-header__cta:focus-visible {
  box-shadow: 0 0 0 5px rgba(16, 185, 129, .09),
    0 8px 26px -8px rgba(16, 185, 129, .55);
}
.pm-menu-open .pm-header {
  background: transparent;
  border-color: transparent;
  color: #fff;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.admin-bar .pm-header,
.admin-bar .pm-progress { top: var(--pm-admin-offset, 32px); }
@media (max-width: 782px) {
  .admin-bar .pm-header,
  .admin-bar .pm-progress { top: var(--pm-admin-offset, 46px); }
}

/* 2. Hero: quiet grid, ambient light, live dashboard -------------------- */
.pm-hero { background: var(--pm-ink); }
.pm-hero__grid {
  background-image: linear-gradient(rgba(181, 207, 237, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(181, 207, 237, .045) 1px, transparent 1px);
  background-size: 56px 56px;
}
/* Soft radial edges replace large animated blur filters. Only transform
   and opacity change while visible; no scroll-driven background repaint. */
.pm-hero__glow {
  filter: none;
  opacity: .6;
  animation: pmAmbient 16s ease-in-out infinite;
  pointer-events: none;
}
.pm-hero__glow--blue {
  width: min(70vw, 850px);
  height: min(70vw, 850px);
  max-width: none;
  max-height: none;
  top: -24%;
  right: -12%;
  background: radial-gradient(circle, rgba(43, 127, 255, .37), rgba(43, 127, 255, .1) 40%, transparent 70%);
}
.pm-hero__glow--green {
  width: min(60vw, 720px);
  height: min(60vw, 720px);
  max-width: none;
  max-height: none;
  bottom: -28%;
  left: 14%;
  background: radial-gradient(circle, rgba(16, 185, 129, .3), rgba(16, 185, 129, .07) 42%, transparent 70%);
  animation-delay: -8s;
}
.pm-dash {
  background: linear-gradient(145deg, rgba(21, 34, 59, .96), rgba(10, 19, 36, .96));
  border-color: rgba(183, 212, 235, .16);
  box-shadow: 0 32px 72px -30px rgba(0, 0, 0, .72),
    0 0 48px -32px rgba(16, 185, 129, .45),
    inset 0 1px 0 rgba(255, 255, 255, .07);
  animation: none;
}
.pm-dash__tag { color: #6EE7B7; background: rgba(16, 185, 129, .13); }
.pm-dash__point { fill: #5EE0B6; stroke: rgba(16, 185, 129, .22); }
.pm-dash__line { stroke-dasharray: 1; stroke-dashoffset: 0; }
.pm-dash__bar i {
  background: linear-gradient(90deg, #3785F0, #62ADFF);
  transform: scaleX(1);
  transform-origin: left;
  animation: none;
}
.pm-dash__bar--green i { background: linear-gradient(90deg, #059669, #34D399); }
.pm-dash__bar--orange i { background: linear-gradient(90deg, #D99825, #F6C564); }
.pm-dash__row .is-down,
.pm-dash__row .is-ok { color: #6EE7B7; }
.pm-js .pm-dash__line {
  animation: none;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.8s var(--pm-modern-ease) .2s;
}
.pm-js .pm-dash__bar i {
  transform: scaleX(0);
  transition: transform 1.25s var(--pm-modern-ease) .3s;
}
.pm-js .pm-dash__bar--green i { transition-delay: .42s; }
.pm-js .pm-dash__bar--orange i { transition-delay: .54s; }
.pm-js .pm-dash__area { opacity: 0; transition: opacity 1s ease .7s; }
.pm-js .pm-dash__point { opacity: 0; transition: opacity .4s ease 1.5s; }
.pm-js .pm-hero.is-ready .pm-dash__line { stroke-dashoffset: 0; }
.pm-js .pm-hero.is-ready .pm-dash__bar i { transform: scaleX(1); }
.pm-js .pm-hero.is-ready .pm-dash__area,
.pm-js .pm-hero.is-ready .pm-dash__point { opacity: 1; }
.pm-chip {
  border: 1px solid rgba(255, 255, 255, .75);
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 14px 32px -14px rgba(0, 0, 0, .45);
  animation: pmBadgeFloat 6.5s ease-in-out infinite;
}
.pm-chip--a { animation-delay: -1.8s; }
.pm-chip--b { animation-duration: 7.5s; animation-delay: -4s; }
.pm-chip__ico--green { background: #059669; }
.pm-js .pm-hero:not(.is-active) .pm-hero__glow,
.pm-js .pm-hero:not(.is-active) .pm-chip,
.pm-js .pm-hero:not(.is-active) .pm-live::after,
.pm-js .pm-hero:not(.is-active) .pm-hero__scroll span { animation-play-state: paused; }
@keyframes pmAmbient {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .6; }
  50% { transform: translate3d(-18px, 22px, 0) scale(1.07); opacity: .82; }
}
@keyframes pmBadgeFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -9px, 0); }
}

/* 3. Bento surfaces and process numbers ------------------------------- */
.pm-card,
.pm-step,
.pm-tool,
.pm-stat {
  translate: 0 0;
  transition: translate .35s var(--pm-modern-ease),
    border-color .25s ease, box-shadow .35s ease, background-color .25s ease;
}
/* Lift is separate from the reveal's transform to keep both effects smooth. */
.pm-card,
.pm-card.is-tilting { transform: none; }
.pm-card:hover { --lift: 0px; border-color: rgba(5, 150, 105, .32); box-shadow: var(--pm-card-hover-shadow); }
.pm-card::before {
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 0%), rgba(16, 185, 129, .065), transparent 62%);
}
.pm-service--featured {
  background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(140deg, rgba(16, 185, 129, .55), rgba(43, 127, 255, .2)) border-box;
}
.pm-service__num { transition: color .25s ease; }
.pm-card:hover .pm-service__num { color: #059669; }
.pm-step__num {
  color: #F0F4F8;
  -webkit-text-stroke: 1px rgba(11, 19, 43, .025);
  transition: color .35s ease, -webkit-text-stroke-color .35s ease,
    transform .5s var(--pm-modern-ease);
}
.pm-step--cta .pm-step__num {
  color: rgba(255, 255, 255, .045);
  -webkit-text-stroke-color: rgba(255, 255, 255, .08);
}
.pm-step:hover .pm-step__num,
.pm-step:focus-within .pm-step__num {
  color: rgba(16, 185, 129, .18);
  -webkit-text-stroke-color: rgba(5, 150, 105, .12);
  transform: translate3d(-4px, -3px, 0);
}
/* All four steps stay available in the normal page flow. Native scrolling
   needs no pinned section, horizontal translation or scroll interception. */
.pm-process .pm-process__layout { display: block; }
.pm-process .pm-head { margin-bottom: clamp(36px, 5vw, 56px); }
.pm-process .pm-pin__viewport { overflow: visible; padding: 8px 0 0; }
.pm-process .pm-pin__track { display: grid; width: auto; }
.pm-process .pm-step { width: auto; min-height: 0; }
@media (min-width: 701px) {
  .pm-process .pm-pin__track { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 0; }
  .pm-process .pm-pin__track::before,
  .pm-process .pm-step::before { display: none; }
  .pm-process .pm-step { display: flex; flex-direction: column; }
  .pm-process .pm-step--cta .pm-btn { margin-top: auto; align-self: flex-start; }
  .pm-process .pm-step--cta p { margin-bottom: 24px; }
}
@media (min-width: 1200px) {
  .pm-process .pm-pin__track { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .pm-process .pm-step { padding: 28px 24px; }
  .pm-process .pm-step__num { font-size: 4rem; right: 20px; }
}

/* 4. Comparison: emerald perimeter, small entrance check marks -------- */
.pm-compare__col--push {
  isolation: isolate;
  overflow: hidden;
  background: var(--pm-ink-2);
  border: 1px solid rgba(52, 211, 153, .45);
  box-shadow: 0 20px 48px -24px rgba(11, 19, 43, .45),
    0 0 40px -30px rgba(16, 185, 129, .5);
}
/* The rotating layer is composited; the inset cover exposes a 1px edge. */
.pm-compare__col--push::before {
  content: "";
  position: absolute;
  inset: -85%;
  z-index: -2;
  background: conic-gradient(from 30deg, transparent 0deg 85deg,
    rgba(16, 185, 129, .8) 120deg, #6EE7B7 145deg,
    rgba(70, 143, 240, .45) 170deg, transparent 220deg 360deg);
  animation: pmEmeraldBorder 12s linear infinite;
  pointer-events: none;
}
.pm-compare__col--push::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: calc(var(--pm-radius-lg) - 2px);
  background: linear-gradient(145deg, #101E32, #080D1A);
  pointer-events: none;
}
.pm-js .pm-compare__col--push:not(.is-active)::before { animation-play-state: paused; }
.pm-compare__col--push .pm-ico {
  color: #6EE7B7;
  background: rgba(16, 185, 129, .13);
  transform-origin: center;
}
.pm-js .pm-compare__col--push.is-in li .pm-ico {
  animation: pmCheckIn .5s var(--pm-modern-ease) .2s backwards;
}
.pm-js .pm-compare__col--push.is-in li:nth-child(2) .pm-ico { animation-delay: .28s; }
.pm-js .pm-compare__col--push.is-in li:nth-child(3) .pm-ico { animation-delay: .36s; }
.pm-js .pm-compare__col--push.is-in li:nth-child(4) .pm-ico { animation-delay: .44s; }
@media (min-width: 901px) {
  .pm-compare__col--push { scale: 1.02; }
}
@keyframes pmEmeraldBorder { to { transform: rotate(360deg); } }
@keyframes pmCheckIn {
  0% { opacity: 0; transform: scale(.65) rotate(-12deg); }
  65% { opacity: 1; transform: scale(1.12) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* 5. Results: restrained glass and stable counter metrics -------------- */
.pm-results__glow {
  background: radial-gradient(circle, rgba(43, 127, 255, .2),
    rgba(16, 185, 129, .1) 44%, transparent 70%);
  filter: none;
}
.pm-stat {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}
.pm-stat:hover {
  transform: none;
  border-color: rgba(16, 185, 129, .45);
  background: rgba(16, 185, 129, .045);
  box-shadow: 0 16px 36px -24px rgba(16, 185, 129, .4),
    inset 0 1px 0 rgba(255, 255, 255, .05);
}
.pm-stat__value { font-variant-numeric: tabular-nums; }

/* 6. Professional stack: brand-colour glows --------------------------- */
.pm-tool { --pm-tool-rgb: 16, 185, 129; }
.pm-tool:has(img[src*="google-ads"]) { --pm-tool-rgb: 66, 133, 244; }
.pm-tool:has(img[src*="meta-ads"]) { --pm-tool-rgb: 0, 129, 251; }
.pm-tool:has(img[src*="google-analytics"]) { --pm-tool-rgb: 224, 132, 20; }
.pm-tool:has(img[src*="tag-manager"]) { --pm-tool-rgb: 66, 133, 244; }
.pm-tool:has(img[src*="loker-studio"]),
.pm-tool:has(img[src*="looker-studio"]) { --pm-tool-rgb: 66, 133, 244; }
.pm-tool:has(img[src*="python"]) { --pm-tool-rgb: 55, 118, 171; }
.pm-tool:has(img[src*="tienda-nube"]) { --pm-tool-rgb: 0, 92, 255; }
.pm-tool:has(img[src*="wordpress"]) { --pm-tool-rgb: 33, 117, 155; }
.pm-tool:hover {
  transform: none;
  border-color: rgba(var(--pm-tool-rgb), .3);
  box-shadow: 0 12px 28px -18px rgba(var(--pm-tool-rgb), .4),
    0 3px 10px -6px rgba(11, 19, 43, .1);
}
.pm-tool img { transition: transform .35s var(--pm-modern-ease), background-color .25s ease; }
.pm-tool:hover img { transform: scale(1.1); background: rgba(var(--pm-tool-rgb), .06); }

@media (hover: hover) and (pointer: fine) {
  .pm-card:hover,
  .pm-step:hover { translate: 0 -6px; border-color: rgba(5, 150, 105, .32); box-shadow: var(--pm-card-hover-shadow); }
  .pm-tool:hover { translate: 0 -4px; }
  .pm-stat:hover { translate: 0 -5px; }
}
.pm-card:focus-within,
.pm-step:focus-within { border-color: rgba(5, 150, 105, .38); box-shadow: var(--pm-card-hover-shadow); }

/* 7. FAQ and contact focus -------------------------------------------- */
.pm-faq__item[open] {
  border-color: rgba(5, 150, 105, .3);
  box-shadow: 0 8px 24px -18px rgba(5, 150, 105, .2);
}
.pm-faq__icon { transition: transform .3s var(--pm-modern-ease), background-color .25s ease; }
.pm-faq__icon::before,
.pm-faq__icon::after { background: currentColor; }
.pm-faq__item[open] .pm-faq__icon {
  color: #047857;
  background: rgba(16, 185, 129, .1);
  transform: rotate(45deg);
}
.pm-faq__item.is-closing .pm-faq__icon {
  color: var(--pm-heading);
  background: var(--pm-surface);
  transform: rotate(0);
}
/* WAAPI animates the native details height where CSS intrinsic-size
   interpolation is unavailable. Never run both animations together. */
.pm-faq__item.pm-faq--animated::details-content {
  height: auto !important;
  overflow: visible;
  transition: none !important;
}
.pm-field input:focus,
.pm-field select:focus,
.pm-field textarea:focus,
.pm-form-card .wpforms-container .wpforms-form .wpforms-field input:focus,
.pm-form-card .wpforms-container .wpforms-form .wpforms-field select:focus,
.pm-form-card .wpforms-container .wpforms-form .wpforms-field textarea:focus {
  border-color: rgba(5, 150, 105, .65);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .2);
  outline: none;
}
.pm-form-card .wpforms-container {
  --wpforms-field-background-color: #F8FAFC;
  --wpforms-label-color: #0B132B;
  --wpforms-button-background-color: #10B981;
  --wpforms-button-text-color: #06291D;
}
.pm-form-card .wpforms-form button[type="submit"].wpforms-submit:hover {
  background: #19C791 !important;
}
.pm-channel:hover { border-color: rgba(5, 150, 105, .3); }

/* 8. Shared scroll reveal --------------------------------------------- */
/* Content is visible by default. Only initialized JS adds pm-js and
   .pm-reveal; IntersectionObserver removes the pending state once. */
.pm-reveal { --d: 0ms; }
.pm-motion-paused .pm-marquee__track { animation-play-state: paused; }
.pm-js :is([data-reveal], [data-split], .pm-reveal):not(.is-in) { opacity: 0; }
.pm-js :is([data-reveal], [data-split], .pm-reveal).is-in {
  opacity: 1;
  animation: pmFadeUp var(--pm-dur-reveal) var(--pm-modern-ease) var(--d, 0ms) backwards;
}
@keyframes pmFadeUp {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Narrow screens, authoring, reduced motion and print ------------------ */
@media (max-width: 600px) {
  .pm-hero__grid { background-size: 40px 40px; }
  .pm-hero__glow--blue { width: 110vw; height: 110vw; right: -40%; top: 3%; }
  .pm-hero__glow--green { width: 105vw; height: 105vw; left: -35%; bottom: -8%; }
  .pm-compare__col--push { scale: 1; }
  .pm-dash__top { gap: 8px; flex-wrap: wrap; }
  .pm-dash__title { font-size: .8125rem; }
}
.elementor-editor-active :is([data-reveal], [data-split], .pm-reveal),
.elementor-editor-active :is([data-reveal], [data-split], .pm-reveal):not(.is-in) {
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}
.elementor-editor-active .pm-hero__glow,
.elementor-editor-active .pm-chip,
.elementor-editor-active .pm-compare__col--push::before { animation: none !important; }
.elementor-editor-active .pm-dash__line { stroke-dashoffset: 0 !important; }
.elementor-editor-active .pm-dash__bar i { transform: scaleX(1) !important; }
.elementor-editor-active .pm-dash__area,
.elementor-editor-active .pm-dash__point { opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  .pm-js :is([data-reveal], [data-split], .pm-reveal),
  .pm-js :is([data-reveal], [data-split], .pm-reveal):not(.is-in) {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
  .pm-hero__glow,
  .pm-chip,
  .pm-compare__col--push::before,
  .pm-compare__col--push .pm-ico { animation: none !important; }
  .pm-js .pm-dash__line { stroke-dashoffset: 0; transition: none; }
  .pm-js .pm-dash__bar i { transform: scaleX(1); transition: none; }
  .pm-js .pm-dash__area,
  .pm-js .pm-dash__point { opacity: 1; transition: none; }
  .pm-card:hover,
  .pm-step:hover,
  .pm-tool:hover,
  .pm-stat:hover { translate: 0 0; }
  .pm-step:hover .pm-step__num,
  .pm-tool:hover img { transform: none; }
}
@media print {
  .pm-js :is([data-reveal], [data-split], .pm-reveal) { opacity: 1 !important; animation: none !important; transform: none !important; }
  .pm-hero__glow,
  .pm-chip,
  .pm-compare__col--push::before { animation: none !important; }
  .pm-js .pm-dash__line { stroke-dashoffset: 0; }
  .pm-js .pm-dash__bar i { transform: scaleX(1); }
  .pm-js .pm-dash__area,
  .pm-js .pm-dash__point { opacity: 1; }
}