/*
  NEON VELOCITY — visual restyle overlay
  Loaded last, on top of the original Elementor/theme CSS.
  Scope: color, type, spacing, effects, components only.
  No HTML structure, copy, images, video or carousel markup were touched —
  every rule below targets classes/IDs that already exist in index.html.
*/

/* ============================================================
   0. TOKENS
   ============================================================ */
:root{
  /* PresentaPRO brand palette */
  --nv-bg: #070E1E;             /* deep navy, darker than Azul Corporativo for background depth */
  --nv-navy: #0A1B33;           /* Azul Corporativo — on-accent text, logo-adjacent surfaces */
  --nv-bg-raised: #0B1620;      /* Teal Premium blended toward black */
  --nv-bg-raised-2: #101C28;
  --nv-accent: #00C2B3;         /* Teal Brillante */
  --nv-accent-2: #3EE6D6;       /* Aqua Acento — secondary/lighter accent */
  --nv-accent-soft: rgba(0,194,179,0.12);
  --nv-accent-dim: rgba(0,194,179,0.3);
  --nv-text: #FFFFFF;
  /* Spec calls for rgba(255,255,255,.4) secondary text; bumped to .68 so body
     copy clears WCAG AA (4.5:1) on the dark navy background — see ui-ux-pro-max a11y checklist. */
  --nv-text-secondary: rgba(255,255,255,0.68);
  --nv-text-meta: rgba(255,255,255,0.5);
  --nv-border: rgba(255,255,255,0.12);
  --nv-border-soft: rgba(255,255,255,0.08);
  --nv-ease: cubic-bezier(0.16,1,0.3,1);
  --nv-font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --nv-font-mono: 'JetBrains Mono', 'Geist Mono', monospace;
  --nv-font-body: 'Inter', -apple-system, sans-serif;

  /* Button-specific palette (buttons only — rest of the site stays on the
     teal brand accent above). */
  --btn-bg: #A3E635;
  --btn-bg-hover: #84CC16;
  --btn-bg-active: #65A30D;
  --btn-text: #07111F;
  --btn-border: rgba(190,242,100,0.65);
  --btn-shadow: 0 0 0 1px rgba(163,230,53,0.18), 0 0 24px rgba(163,230,53,0.38), 0 8px 24px rgba(0,0,0,0.28);
}

/* ============================================================
   1. GLOBAL SURFACE + AMBIENT EFFECTS
   ============================================================ */
html{ background: var(--nv-bg); }

body{
  background: var(--nv-bg) !important;
  color: var(--nv-text) !important;
  font-family: var(--nv-font-body) !important;
  font-weight: 300;
}

/* ambient neon glow — two soft corner blooms, purely decorative overlay */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 10%, rgba(0,194,179,0.15), transparent 42%),
    radial-gradient(circle at 85% 88%, rgba(0,194,179,0.10), transparent 38%);
}

/* fractal noise overlay, fixed to viewport, barely-there texture */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

@media (prefers-reduced-motion: reduce){
  body::before{ display:none; }
}

/* keep real content above the ambient overlay */
.elementor-8400{ position: relative; z-index: 2; }

/* selection color */
::selection{ background: var(--nv-accent); color: var(--nv-navy); }

/* focus visibility (accessibility) */
a:focus-visible, button:focus-visible, .elementor-button:focus-visible{
  outline: 2px solid var(--nv-accent) !important;
  outline-offset: 2px;
}

/* ============================================================
   2. TYPOGRAPHY
   ============================================================ */

/* Display headlines — keep each element's existing font-size (already sized
   per section by the original design); only swap face/weight/color so the
   established hierarchy and line-breaks are preserved. */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-image-box-title{
  font-family: var(--nv-font-display) !important;
  font-weight: 800 !important;
  color: var(--nv-text) !important;
  /* !important needed: several original per-ID rules set letter-spacing as
     tight as -2.5px / line-height 1.1em, which wins on specificity otherwise
     and crushes uppercase glyphs together. */
  letter-spacing: -0.01em !important; /* spec asks for -0.05em; loosened so long ES sentences stay legible */
  line-height: 1.28 !important;
  word-spacing: 0.05em;
}

.elementor-image-box-description,
.elementor-text-editor p,
.elementor-widget-text-editor p,
p{
  font-family: var(--nv-font-body) !important;
  color: var(--nv-text-secondary);
  line-height: 1.65;
}
/* Some sections reuse .elementor-image-box-description as a bold display
   statement (uppercase, 45px+) rather than plain body copy, carrying their
   own tight per-ID letter-spacing (as low as -1.8px) that otherwise wins on
   specificity — loosen it everywhere this class is used. */
.elementor-image-box-description{
  letter-spacing: -0.005em !important;
  line-height: 1.3 !important;
}

/* "vinila-condensed" is used as a bold display wrapper around whole phrases
   (e.g. "Transforma tu contenido", "infograficompanies es ideal para ti si:").
   It originally rendered as a dim grey→white→grey gradient clip — flattened
   to solid theme white so it reads as a punchy statement, not muted text. */
.vinila-condensed{
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: var(--nv-text) !important;
  -webkit-text-fill-color: var(--nv-text) !important;
}

/* short caption-style headlines (logo strip: PowerPoint / Keynote / Google Slides / Excel) */
.elementor-element-211f379 .elementor-image-box-title,
.elementor-element-3ee51fb .elementor-image-box-title,
.elementor-element-aecdda7 .elementor-image-box-title,
.elementor-element-dedb17c .elementor-image-box-title{
  font-family: var(--nv-font-mono) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--nv-text-meta) !important;
}

/* ============================================================
   3. LASER BUTTON (primary CTAs) — bright lime, high-contrast dark text
   ============================================================ */
.elementor-button{
  background: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  border: 1px solid var(--btn-border) !important;
  border-radius: 9999px !important;
  box-shadow: var(--btn-shadow) !important;
  font-family: var(--nv-font-mono) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  transition: background-color 180ms ease, filter 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.elementor-button .elementor-button-text,
.elementor-button-content-wrapper{ color: inherit !important; }
.elementor-button:hover{
  background: var(--btn-bg-hover) !important;
  transform: translateY(-1px);
  filter: brightness(1.08);
}
.elementor-button:active{
  background: var(--btn-bg-active) !important;
  transform: translateY(0);
  filter: none;
}
.elementor-button:focus-visible{
  outline: 2px solid var(--btn-border) !important;
  outline-offset: 2px;
}
@media (min-width: 48em){
  .elementor-button{ min-height: 48px; display:inline-flex; align-items:center; }
}

/* A handful of buttons (pricing CTA, mid-page CTAs) carry their own
   per-ID gradient + 6px bevel border as
   ".elementor-8400 .elementor-element.elementor-element-XXX .elementor-button"
   with !important — that's 4 classes of specificity, which beat the
   2-class version of this override that shipped earlier. Matching the full
   selector chain here so the lime style actually wins. */
.elementor-8400 .elementor-element.elementor-element-b4e82a3 .elementor-button,
.elementor-8400 .elementor-element.elementor-element-20d8d17 .elementor-button,
.elementor-8400 .elementor-element.elementor-element-510b807 .elementor-button,
.elementor-8400 .elementor-element.elementor-element-1cc364a .elementor-button,
.elementor-8400 .elementor-element.elementor-element-cc32ce3 .elementor-button,
.elementor-8400 .elementor-element.elementor-element-f6b68ce .elementor-button,
.elementor-8400 .elementor-element.elementor-element-1ea1d9a .elementor-button{
  background: var(--btn-bg) !important;
  border: 1px solid var(--btn-border) !important;
  box-shadow: var(--btn-shadow) !important;
}
.elementor-8400 .elementor-element.elementor-element-b4e82a3 .elementor-button:hover,
.elementor-8400 .elementor-element.elementor-element-20d8d17 .elementor-button:hover,
.elementor-8400 .elementor-element.elementor-element-510b807 .elementor-button:hover,
.elementor-8400 .elementor-element.elementor-element-1cc364a .elementor-button:hover,
.elementor-8400 .elementor-element.elementor-element-cc32ce3 .elementor-button:hover,
.elementor-8400 .elementor-element.elementor-element-f6b68ce .elementor-button:hover,
.elementor-8400 .elementor-element.elementor-element-1ea1d9a .elementor-button:hover{
  background: var(--btn-bg-hover) !important;
  border: 1px solid var(--btn-border) !important;
}
.elementor-8400 .elementor-element.elementor-element-b4e82a3 .elementor-button:active,
.elementor-8400 .elementor-element.elementor-element-20d8d17 .elementor-button:active,
.elementor-8400 .elementor-element.elementor-element-510b807 .elementor-button:active,
.elementor-8400 .elementor-element.elementor-element-1cc364a .elementor-button:active,
.elementor-8400 .elementor-element.elementor-element-cc32ce3 .elementor-button:active,
.elementor-8400 .elementor-element.elementor-element-f6b68ce .elementor-button:active,
.elementor-8400 .elementor-element.elementor-element-1ea1d9a .elementor-button:active{
  background: var(--btn-bg-active) !important;
}

/* "Ver todas las categorías" — kept on the teal brand accent instead of the
   lime button style, by request (it was teal before the lime pass). */
.elementor-element-41c8b05 .elementor-button{
  background: var(--nv-accent) !important;
  color: var(--nv-navy) !important;
  border: 1px solid rgba(62,230,214,0.5) !important;
  box-shadow: 0 0 0 1px rgba(0,194,179,0.18), 0 0 24px rgba(0,194,179,0.38), 0 8px 24px rgba(0,0,0,0.28) !important;
}
.elementor-element-41c8b05 .elementor-button:hover{
  background: var(--nv-accent-2) !important;
}
.elementor-element-41c8b05 .elementor-button:active{
  background: #009488 !important;
}
.elementor-element-41c8b05 .elementor-button svg path{ fill: var(--nv-navy) !important; }

/* sticky bar CTA — same lime button language, different bar */
#ic-sticky-bar{
  background: rgba(7,14,30,0.72) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  border-bottom: 1px solid var(--nv-border-soft) !important;
}
#ic-sticky-bar .ic-bar-text{
  font-family: var(--nv-font-body) !important;
  color: rgba(255,255,255,0.85) !important;
}
#ic-sticky-bar .ic-bar-text strong{ color: var(--nv-accent) !important; }
#ic-sticky-bar .ic-bar-btn{
  background: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  border: 1px solid var(--btn-border) !important;
  font-family: var(--nv-font-mono) !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: var(--btn-shadow) !important;
  transition: background-color 180ms ease, filter 180ms ease, transform 180ms ease !important;
}
#ic-sticky-bar .ic-bar-btn:hover{
  background: var(--btn-bg-hover) !important;
  transform: translateY(-1px) scale(1) !important;
  filter: brightness(1.08);
}
#ic-sticky-bar .ic-bar-btn:active{
  background: var(--btn-bg-active) !important;
  transform: translateY(0) !important;
  filter: none;
}
#ic-sticky-bar .ic-bar-close{
  background: rgba(255,255,255,0.06) !important;
  border-color: var(--nv-border) !important;
  color: rgba(255,255,255,0.6) !important;
}
#ic-sticky-bar .ic-bar-close:hover{ color: var(--nv-accent) !important; }

/* ============================================================
   4. SCROLL-REVEAL (existing site JS toggles .ativo — only retiming here)
   ============================================================ */
.scroll-bottom, .scroll-top, .scroll-left, .scroll-right{
  transition-timing-function: var(--nv-ease) !important;
}
@media (prefers-reduced-motion: reduce){
  .scroll-bottom, .scroll-top, .scroll-left, .scroll-right,
  .elementor-editor-active .scroll-left, .elementor-editor-active .scroll-right,
  .elementor-editor-active .scroll-top, .elementor-editor-active .scroll-bottom{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ============================================================
   5. SECTION RHYTHM — top-level containers only (".e-parent"),
   inner rows/grids keep their original gaps untouched.
   ============================================================ */
.e-parent:not(.elementor-element-55bbb49){
  /* Padding-bottom of section A stacks with padding-top of section B, so
     each side is kept small — a "big" gap is still their sum, not just one. */
  --padding-top: clamp(1.25rem, 4vw, 2.5rem) !important;
  --padding-bottom: clamp(1.25rem, 4vw, 2.5rem) !important;
  /* a few sections carry their own large --margin-top/bottom (up to 120px)
     from the original design, stacking on top of the padding above and
     doubling the gap between sections — capped here too. */
  --margin-top: clamp(0px, 2vw, 16px) !important;
  --margin-bottom: clamp(0px, 2vw, 16px) !important;
}
.e-parent.e-con-boxed{
  --container-max-width: 1600px !important;
}

/* fd0ff12 ("¡Editables en tu herramienta favorita!") carries its own
   4em top-margin on the widget wrapper, on top of the section padding
   above it — stacked, this created a very large empty gap. */
.elementor-element-fd0ff12 > .elementor-widget-container{
  margin-top: 0 !important;
  margin-bottom: 1.5rem !important;
}
/* same "big baked-in top margin" issue repeats on these headline blocks
   (up to 120px / 4em / 3em) — flattened to the section's own rhythm. */
.elementor-element-7cb9ada > .elementor-widget-container,
.elementor-element-e5787b3 > .elementor-widget-container{
  margin-top: 0 !important;
}
.elementor-element-a13c180 > .elementor-widget-container{
  margin-top: 1.75rem !important;
}

/* ============================================================
   5b. FEATURE CARDS ("Modifica cada elemento", "Vincúlala con tu hoja de
   cálculo", etc.) — 12 cards share a leftover teal/orange radial-gradient
   background from the original design; unified here to the Luminosity
   Card language (dark base, soft lime corner glow, lime border on hover).
   ============================================================ */
.elementor-element-5bb46fb,
.elementor-element-f62183a,
.elementor-element-b39e616,
.elementor-element-ce7fbbb,
.elementor-element-4f78f74,
.elementor-element-3b8283f,
.elementor-element-9eed8a6,
.elementor-element-5b3876b,
.elementor-element-393cd98,
.elementor-element-17d765e,
.elementor-element-2847801,
.elementor-element-c8004c2{
  background: radial-gradient(circle at top left, rgba(0,194,179,0.08), transparent 60%), var(--nv-bg-raised) !important;
  border-color: var(--nv-border) !important;
  transition: border-color .5s var(--nv-ease), background .5s var(--nv-ease);
  /* these cards have a screenshot/mockup image absolutely anchored to their
     bottom edge; the text above had ~0 bottom padding so it touched the
     image. Growing the card's own bottom padding pushes that anchor point
     (and the image with it) further down, away from the text. */
  --padding-bottom: 3.5rem !important;
}
.elementor-element-5bb46fb:hover,
.elementor-element-f62183a:hover,
.elementor-element-b39e616:hover,
.elementor-element-ce7fbbb:hover,
.elementor-element-4f78f74:hover,
.elementor-element-3b8283f:hover,
.elementor-element-9eed8a6:hover,
.elementor-element-5b3876b:hover,
.elementor-element-393cd98:hover,
.elementor-element-17d765e:hover,
.elementor-element-2847801:hover,
.elementor-element-c8004c2:hover{
  border-color: rgba(0,194,179,0.35) !important;
}

/* ============================================================
   6. HEADER ROW — compact bar, not full section rhythm
   ============================================================ */
.elementor-element-55bbb49{
  --padding-top: 14px !important;
  --padding-bottom: 14px !important;
  border-color: var(--nv-border) !important;
  background: rgba(7,14,30,0.6);
  backdrop-filter: blur(10px);
}
.elementor-element-55bbb49 .elementor-button{
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* PresentaPRO logo (replaces the old inline SVG wordmark). The original
   icon widget sized its SVG via font-size/height rules that don't apply to
   an <img>, so size it explicitly here instead. */
.elementor-element-50d5915 .elementor-icon img,
.elementor-element-a5a8e08 .elementor-icon img{
  height: 44px;
  width: auto;
  max-width: none;
  display: block;
}
.elementor-element-379a80c .elementor-icon img{
  height: 54px;
  width: auto;
  max-width: none;
  display: block;
}

/* ============================================================
   7. HERO HIGHLIGHT BOX ("selecao") — already sharp-cornered,
   perfect fit for the spec's un-rounded hero border-box.
   ============================================================ */
.selecao{
  border-color: var(--nv-accent) !important;
}
.quadrado{
  background: var(--nv-bg) !important;
  border-color: var(--nv-accent) !important;
}
.degrade9{
  background: linear-gradient(100deg, #00C2B3 10%, #3EE6D6 90%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
.laranjav4{
  color: var(--nv-accent) !important;
  -webkit-text-fill-color: var(--nv-accent) !important;
}
.vinila-condensed-amarelo{
  color: var(--nv-accent) !important;
  -webkit-text-fill-color: var(--nv-accent) !important;
}
.vinila-condensed-branco{ color: var(--nv-text) !important; }

/* eyebrow / pill labels — unify accent family to lime for brand coherence */
.tagverdev4, .tagroxov4{
  background: var(--nv-accent-soft) !important;
  color: var(--nv-accent) !important;
  font-family: var(--nv-font-mono) !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600 !important;
}

/* urgency tag ("Válido hasta hoy...") — kept semantically red, restyled as a pill */
.tag{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--nv-border);
  border-radius: 9999px;
  padding: 10px 20px;
  font-family: var(--nv-font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nv-text-secondary);
}
.tag-expirada{ color: #ff5c5c !important; font-weight: 600; }

/* decorative background blobs (icon widgets, fill="black") → subtle glow accents */
.elementor-widget-icon.elementor-absolute svg path[fill="black"]{
  fill: rgba(0,194,179,0.05) !important;
}
.elementor-widget-icon.elementor-absolute svg{ filter: blur(6px); }

/* ============================================================
   8. VIDEO MOCKUP CARD (.ic-browser)
   ============================================================ */
.ic-browser{
  background: var(--nv-bg-raised) !important;
  border: 1px solid var(--nv-border) !important;
  box-shadow: 0 0 40px rgba(0,194,179,0.08), 0 20px 60px rgba(0,0,0,0.5) !important;
}
.ic-browser-bar{
  background: rgba(255,255,255,0.03) !important;
  border-bottom: 1px solid var(--nv-border-soft) !important;
}
.ic-url-bar{
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--nv-border-soft) !important;
  color: var(--nv-text-secondary) !important;
  font-family: var(--nv-font-mono) !important;
}

/* ============================================================
   9. BEFORE / AFTER SLIDER (.ba-*)
   ============================================================ */
.ba-title{ color: var(--nv-text-meta) !important; font-family: var(--nv-font-mono) !important; letter-spacing: 0.14em; }
.ba-headline{ color: var(--nv-text) !important; font-family: var(--nv-font-display) !important; font-weight: 800 !important; }
.ba-sub{ color: var(--nv-text-secondary) !important; }
.ba-hint{ color: var(--nv-text-meta) !important; }
.ba-slider{ box-shadow: 0 0 0 1px var(--nv-border), 0 24px 70px rgba(0,0,0,0.55) !important; }
.ba-label-before{ background: rgba(7,14,30,0.75) !important; }
.ba-label-after{
  background: linear-gradient(90deg, var(--nv-accent), #8fe000) !important;
  color: var(--nv-navy) !important;
}
.ba-handle-circle{ background: var(--nv-accent) !important; }
.ba-handle-arrow{ color: var(--nv-navy) !important; }
.ba-badge{
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid var(--nv-border) !important;
  color: var(--nv-text-secondary) !important;
  backdrop-filter: blur(8px);
}

/* ============================================================
   10. SOCIAL PROOF — TESTIMONIAL GRID (.ds-*, .cc)
   ============================================================ */
.ds-lbl{ color: var(--nv-accent) !important; border-color: var(--nv-accent) !important; font-family: var(--nv-font-mono) !important; letter-spacing: 0.14em; }
.ds-ttl{ color: var(--nv-text) !important; font-family: var(--nv-font-display) !important; }
.ds-ttl em{
  background: linear-gradient(100deg, var(--nv-accent) 10%, #3EE6D6 90%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.ds-sub{ color: var(--nv-text-secondary) !important; }
.ds-stars{ color: var(--nv-accent) !important; }

.cc{
  background: radial-gradient(circle at top left, rgba(255,255,255,0.035), transparent 60%), var(--nv-bg-raised) !important;
  border: 1px solid var(--nv-border-soft) !important;
  box-shadow: none !important;
  border-radius: 1.25rem !important;
  transition: border-color .5s var(--nv-ease), background .5s var(--nv-ease) !important;
}
.cc::before{ background: var(--nv-accent) !important; }
.cc:hover{
  border-color: rgba(0,194,179,0.35) !important;
  background: radial-gradient(circle at top left, rgba(0,194,179,0.06), transparent 60%), var(--nv-bg-raised-2) !important;
}
.cav-wrap{ background: var(--nv-accent) !important; box-shadow: 0 0 12px rgba(0,194,179,0.4); }
.cn{ color: var(--nv-text) !important; }
.chr{ color: var(--nv-accent) !important; }
.ct{ color: var(--nv-text-secondary) !important; }
.ct .m{ color: var(--nv-accent) !important; }
.ctime{ color: var(--nv-text-meta) !important; }
.crep{ color: var(--nv-text-meta) !important; }

/* ============================================================
   11. PRICING / #buy
   ============================================================ */
.prefixo1{
  color: var(--nv-text-meta) !important;
  font-family: var(--nv-font-mono) !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.valor{ color: var(--nv-accent) !important; font-family: var(--nv-font-display) !important; font-variant-numeric: tabular-nums; }
.cents{ color: var(--nv-text) !important; font-variant-numeric: tabular-nums; }

.elementor-icon-list-icon svg path{ fill: var(--nv-accent) !important; }
.elementor-icon-list-text{ color: var(--nv-text-secondary) !important; }

/* ============================================================
   12. ACCORDION (FAQ)
   ============================================================ */
.elementor-accordion-item{
  border-color: var(--nv-border) !important;
  background: transparent !important;
}
.elementor-tab-title, .elementor-accordion-title{
  color: var(--nv-text) !important;
  font-family: var(--nv-font-display) !important;
  font-weight: 700 !important;
}
.elementor-tab-content, .elementor-tab-content p{
  color: var(--nv-text-secondary) !important;
}
.elementor-accordion-icon svg path{ fill: var(--nv-accent) !important; }
.elementor-tab-title[aria-expanded="true"]{ color: var(--nv-accent) !important; }

/* ============================================================
   13. LINKS
   ============================================================ */
a{ color: var(--nv-accent); }
a:hover{ color: #3EE6D6; }

/* ============================================================
   14. "CATEGORÍAS" POPUP — was white-on-white: the modal wrapper
   (popup.min.css) and its inner container both had a hardcoded white
   background, and the global heading/text color rules above turn all
   text white — invisible until the popup itself goes dark too.
   ============================================================ */
.elementor-popup-modal .dialog-widget-content{
  background-color: var(--nv-bg-raised) !important;
}
.elementor-popup-modal .dialog-close-button svg{
  fill: var(--nv-text) !important;
}
.elementor-element-5942113{
  background: var(--nv-bg-raised) !important;
  border: 1px solid var(--nv-border) !important;
}
.elementor-element-5942113 .elementor-heading-title{
  color: var(--nv-text) !important;
}

/* ============================================================
   15. PRICING / OFFER CARD — deliberately breaks from the dark theme:
   warm white card with an orange accent, floating on the navy page.
   ============================================================ */
.elementor-8400 .elementor-element.elementor-element-9de76ce{
  background: linear-gradient(145deg, #FFFFFF 0%, #FFF9F3 55%, #FFF4EA 100%) !important;
  border: 1px solid rgba(255,107,74,0.35) !important;
  border-radius: 36px !important;
  box-shadow:
    0 24px 70px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.65),
    0 0 28px rgba(255,107,74,0.12) !important;
}

/* eyebrow: "ACCESO VITALICIO", flanked by thin lines + a small spark */
.elementor-element-51388df .elementor-image-box-title{
  display: flex !important;
  align-items: center;
  gap: 14px;
  color: #FF6B4A !important;
  font-family: var(--nv-font-display) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em !important;
  text-align: center;
  line-height: 1.4 !important;
}
.elementor-element-51388df .elementor-image-box-title .vinila-condensed-branco{
  color: inherit !important;
  white-space: nowrap;
}
.elementor-element-51388df .elementor-image-box-title::before,
.elementor-element-51388df .elementor-image-box-title::after{
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,107,74,0.5));
}
.elementor-element-51388df .elementor-image-box-title::after{
  background: linear-gradient(90deg, rgba(255,107,74,0.5), transparent);
}
/* title: "OFERTA ESPECIAL" — navy-to-blue gradient */
.elementor-element-51388df .elementor-image-box-description,
.elementor-element-51388df .elementor-image-box-description .vinila-condensed-branco{
  background: linear-gradient(180deg, #0A1B33 0%, #163A66 55%, #1E5FD6 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-family: var(--nv-font-display) !important;
  font-size: clamp(44px, 8vw, 72px) !important;
  font-weight: 900 !important;
  line-height: 0.95 !important;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: -0.01em !important;
  display: block;
}

/* benefits list — real checkmark drawn in CSS, original "+" svg hidden */
.elementor-element-6976c39 .elementor-icon-list-items{
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.elementor-element-6976c39 .elementor-icon-list-icon svg{
  display: none !important;
}
.elementor-element-6976c39 .elementor-icon-list-icon{
  position: relative;
  width: 23px;
  height: 23px;
  flex-shrink: 0;
}
.elementor-element-6976c39 .elementor-icon-list-icon::before{
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid #FF6B4A;
  border-radius: 50%;
}
.elementor-element-6976c39 .elementor-icon-list-icon::after{
  content: "";
  position: absolute;
  left: 6px;
  top: 5px;
  width: 6px;
  height: 10px;
  border-right: 2px solid #FF6B4A;
  border-bottom: 2px solid #FF6B4A;
  transform: rotate(45deg);
}
.elementor-element-6976c39 .elementor-icon-list-text{
  color: #0A1B33 !important;
  font-family: var(--nv-font-body) !important;
  font-weight: 500;
}
.elementor-element-6976c39 .numero-oferta{
  color: #FF6B4A;
  font-family: var(--nv-font-display);
  font-weight: 800;
}

/* divider before the price block */
.elementor-element-5f1a803{
  position: relative;
  padding-top: 24px !important;
}
.elementor-element-5f1a803::before{
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: rgba(10,27,51,0.12);
}

/* price block */
.elementor-element-5f1a803 .elementor-image-box-title{
  color: #6B7280 !important;
  font-family: var(--nv-font-body) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.elementor-element-5f1a803 .elementor-image-box-title strike{
  font-family: inherit;
}
.elementor-element-5f1a803 .prefixo1{
  color: #FF6B4A !important;
  font-family: var(--nv-font-display) !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-size: 15px !important;
}
.elementor-element-5f1a803 .valor{
  display: inline-flex !important;
  align-items: flex-end;
  justify-content: center;
  color: #FF6B4A !important;
  font-family: var(--nv-font-display) !important;
  font-weight: 900 !important;
  font-size: clamp(64px, 16vw, 96px) !important;
  line-height: 1 !important;
  text-shadow: 0 4px 14px rgba(255,107,74,0.20);
}
.elementor-element-5f1a803 .cents{
  color: #FF6B4A !important;
  font-family: var(--nv-font-display) !important;
  font-weight: 700 !important;
  font-size: 0.5em !important;
}
.elementor-element-5f1a803 .cents.usd-label{
  display: block;
  font-size: 0.22em !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: right;
  margin-bottom: 0.35em;
}

/* CTA button — replaces the flat lime style with the offer card's own
   lime gradient + glow, at matching specificity to the rules above. */
.elementor-8400 .elementor-element.elementor-element-1ea1d9a .elementor-button{
  background: linear-gradient(180deg, #C8FF3D 0%, #A3E635 52%, #8FD320 100%) !important;
  color: #07111F !important;
  border: 1px solid rgba(217,249,157,0.85) !important;
  border-radius: 9999px !important;
  font-weight: 900 !important;
  box-shadow:
    0 0 0 1px rgba(163,230,53,0.18),
    0 0 28px rgba(163,230,53,0.42),
    0 12px 28px rgba(0,0,0,0.28),
    inset 0 -6px 10px rgba(0,80,10,0.18),
    inset 0 2px 0 rgba(255,255,255,0.35) !important;
}
.elementor-8400 .elementor-element.elementor-element-1ea1d9a .elementor-button::after{
  content: "›";
  margin-left: 8px;
  font-weight: 900;
}
.elementor-8400 .elementor-element.elementor-element-1ea1d9a .elementor-button:hover{
  background: linear-gradient(180deg, #D4FF5A 0%, #B4F238 52%, #96D92E 100%) !important;
  transform: translateY(-2px);
  box-shadow:
    0 0 36px rgba(163,230,53,0.52),
    0 14px 32px rgba(0,0,0,0.30),
    inset 0 -6px 10px rgba(0,80,10,0.18),
    inset 0 2px 0 rgba(255,255,255,0.4) !important;
}

/* microcopy row — icon + label triplets under the CTA */
.offer-microcopy{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}
.offer-microcopy-item{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0A1B33;
  font-family: var(--nv-font-body);
  font-size: 13px;
  font-weight: 600;
}
.offer-microcopy-item svg{ color: #FF6B4A; flex-shrink: 0; }
.offer-microcopy-dot{ color: #FF6B4A; opacity: 0.6; font-weight: 700; }

/* ============================================================
   16. "ARRIVAL" PULSE — plays once when a CTA scrolls the user to
   the offer card, to draw the eye to it.
   ============================================================ */
@keyframes ic-offer-pulse-kf{
  0%   { transform: scale(1);     box-shadow: 0 24px 70px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.65), 0 0 28px rgba(255,107,74,0.12); }
  30%  { transform: scale(1.025); box-shadow: 0 24px 70px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.65), 0 0 70px rgba(255,107,74,0.55); }
  100% { transform: scale(1);     box-shadow: 0 24px 70px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.65), 0 0 28px rgba(255,107,74,0.12); }
}
.elementor-8400 .elementor-element.elementor-element-9de76ce.ic-offer-pulse{
  animation: ic-offer-pulse-kf 1.1s cubic-bezier(0.16,1,0.3,1) !important;
}
@media (prefers-reduced-motion: reduce){
  .elementor-8400 .elementor-element.elementor-element-9de76ce.ic-offer-pulse{
    animation: none !important;
  }
}

.bono-cero{
  color: #07111F !important;
  font-weight: 700;
}

/* ============================================================
   17. COUNTDOWN — "Válido hasta hoy a las 23:59h", real per-visitor
   local-midnight deadline (no cookies, no fake reset on refresh).
   ============================================================ */
.ic-countdown{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--nv-border);
  border-radius: 9999px;
  padding: 10px 20px;
  text-decoration: none !important;
  transition: border-color .3s var(--nv-ease), background .3s var(--nv-ease);
}
.ic-countdown:hover{
  border-color: rgba(255,92,92,0.5);
  background: rgba(255,255,255,0.08);
}
.ic-countdown-label{
  color: var(--nv-text-secondary);
  font-family: var(--nv-font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.ic-countdown-units{
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.ic-countdown-unit{
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.ic-countdown-num{
  font-family: var(--nv-font-display);
  font-weight: 800;
  font-size: clamp(20px, 4vw, 26px);
  color: #ff5c5c;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  min-width: 1.15em;
  display: inline-block;
  text-align: center;
}
.ic-countdown-unit-label{
  font-family: var(--nv-font-mono);
  font-size: 11px;
  color: var(--nv-text-meta);
  text-transform: uppercase;
}
.ic-countdown-sep{
  color: #ff5c5c;
  font-weight: 800;
  font-size: clamp(18px, 3.5vw, 24px);
  opacity: 0.5;
}
@keyframes ic-countdown-tick-kf{
  0%   { transform: scale(1.18); opacity: 0.65; }
  100% { transform: scale(1); opacity: 1; }
}
.ic-countdown-tick{
  animation: ic-countdown-tick-kf .35s var(--nv-ease);
}
.ic-countdown-ended .ic-countdown-label{
  color: #ff5c5c;
  font-weight: 700;
}
@media (max-width: 480px){
  .ic-countdown{ padding: 8px 16px; gap: 8px; }
  .ic-countdown-label{ font-size: 11px; }
}
@media (prefers-reduced-motion: reduce){
  .ic-countdown-tick{ animation: none; }
}