/* =========================
   GLOBAL BACKGROUND (Creasis)
   ========================= */

/* 1) Vars SOLO para esta landing (no afecta otras páginas) */
body.creasis-landing-page{
  --bg1:#fbf6ef;
  --bg2:#fbf6ef;
  --glow:#00E5FF;
  background: transparent !important;
}

/* 2) Divi wrappers transparentes (si no, te tapa el fondo) */
body.creasis-landing-page #page-container,
body.creasis-landing-page #et-main-area,
body.creasis-landing-page #main-content{
  background: transparent !important;
}

/* 3) Capa fija detrás de TODO */
.creasis-bg{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%);
  transform: translateZ(0);
}

.creasis-bg::before{
  content:"";
  position:absolute;
  inset:-15%;
  background: radial-gradient(900px circle at 18% 12%, var(--glow) 0%, transparent 60%);
  opacity: .22;
  filter: blur(10px);
  mix-blend-mode: screen;
  transform: translateZ(0);
}

/* 4) Tu app arriba del fondo */
.creasis-app{ position: relative; z-index: 1; }

/* 5) Menú y preloader arriba de todo */
.cx-topbar, .cx-menu{ position: relative; z-index: 50; }
#creasis-preloader{ z-index: 9999; }

/* 6) IMPORTANTE: deja que se vea el fondo global */
.cx-stage, .cx-ecos, .cx-section, .cx-footer{ background: transparent; }

/* Mobile perf */
@media (max-width: 768px){
  .creasis-bg::before{ opacity:.16; filter: blur(8px); }
}


:root{
  --paper:#f7f2ea;
  --ink:#111316;

  --dark:#070812;
  --txt:rgba(255,255,255,.92);

  --cyan:#23f7ff;
  --blue:#2b66ff;
  --violet:#7a2bff;

  --warm1:#ffbf0f;
  --warm2:#ff7a2b;

  --shadow: 0 20px 70px rgba(0,0,0,.25);
  --glass: rgba(255,255,255,.55);
}

.creasis-landing-page{
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Arial, sans-serif;
}

/* Oculta header/footer Divi */
.creasis-landing-page #main-header,
.creasis-landing-page #top-header,
.creasis-landing-page #main-footer{ display:none !important; }
.creasis-landing-page #et-main-area{ padding-top:0 !important; }
.creasis-landing-page #page-container{ background: var(--paper) !important; }
.creasis-landing-page #main-content{ padding-top:0 !important; background: transparent !important; }

.creasis-app{
  min-height:100vh;
  background: var(--paper);
  position:relative;
  overflow:hidden;
}

/* -------- Preloader -------- */
#creasis-preloader{
  position:fixed; inset:0; background:#000;
  display:grid; place-items:center;
  z-index:999999;
}
#creasis-preloader .preloader-inner{ width:min(520px, calc(100% - 44px)); text-align:center; }
.preloader-logo{
  width:min(320px, 72vw); height:auto;
  filter: drop-shadow(0 0 26px rgba(35,247,255,.18));
  animation: prePulse 1.6s ease-in-out infinite;
}
@keyframes prePulse{ 0%,100%{ transform:scale(1); opacity:.95; } 50%{ transform:scale(1.04); opacity:1; } }
.preloader-bar{
  margin:18px auto 10px; height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
}
.preloader-bar-fill{
  display:block; height:100%; width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(35,247,255,.95), rgba(43,102,255,.95), rgba(122,43,255,.9));
  position:relative;
}
.preloader-bar-fill::after{
  content:""; position:absolute; inset:-20px -30px -20px -30px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transform: translateX(-60%);
  animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer{ to{ transform: translateX(60%); } }
.preloader-meta{ display:flex; justify-content:space-between; font-size:.92rem; color: rgba(255,255,255,.75); }
.preloader-percent{ font-variant-numeric: tabular-nums; }

/* -------- Topbar (logo + burger) -------- */
.cx-topbar{
  position: fixed;
  top: 22px;
  left: 22px;
  right: 22px;
  z-index: 50;
  display:flex;
  justify-content:space-between;
  align-items:center;
  pointer-events:none; /* para que solo el logo/burger sean clickeables */
}
.cx-brand, .cx-burger{ pointer-events:auto; }

.cx-brand img{
  width: 64px; height: auto;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.18));
}

.cx-burger{
  width: 54px; height: 54px;
  border-radius: 999px;
  border: 0;
  background: rgba(17,19,22,.92);
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.cx-burger span{
  display:block;
  width: 22px;
  height: 2px;
  background: rgba(255,255,255,.92);
  border-radius: 99px;
  margin: 3px 0;
}

/* -------- Menu overlay -------- */
.cx-menu{
  position:fixed; inset:0;
  background: rgba(17,19,22,.92);
  z-index: 80;
  opacity:0;
  pointer-events:none;
  transition: opacity .25s ease;
}
.cx-menu-inner{
  height:100%;
  display:grid;
  align-content:center;
  padding: 42px;
}
.cx-close{
  position:absolute;
  top: 22px; right: 22px;
  width: 54px; height: 54px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 28px;
  cursor:pointer;
}
.cx-menu-links{
  display:grid;
  gap: 14px;
  margin-top: 40px;
}
.cx-menu-links a{
  font-size: clamp(2.0rem, 5vw, 4.2rem);
  color: rgba(255,255,255,.92);
  text-decoration:none;
  font-weight: 900;
  letter-spacing:-0.03em;
}
.cx-menu-cta{ margin-top: 22px; }
.cx-cta{
  display:inline-flex;
  padding: 1rem 1.2rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--blue), var(--violet));
  color: #071018;
  font-weight: 900;
  text-decoration:none;
}

body.cx-menu-open .cx-menu{
  opacity:1;
  pointer-events:auto;
}

/* -------- Stage (Tesoro-style pinned morph) -------- */
.cx-stage{
  height: 320vh;
  position:relative;
  background: var(--paper);
  overflow: hidden; /* clave: no scroll lateral aunque el shape se “salga” */
}

.cx-pin{
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 0;
  display: block;
  overflow: hidden;   /* clave */
}



/* Shape grande inicial (polígono “raro”) */
.cx-shape{
  position: absolute;
  inset: -10vh -10vw;     /* se sale de la pantalla para que NO haya márgenes */
  width: auto;
  height: auto;
  box-shadow: none;
  overflow: hidden;
  transform-origin: center;
  border-radius: 0;
  z-index: 1;

  clip-path: polygon(
    -10% -10%, 110% -10%,
    120% 45%, 112% 112%,
    50% 120%, -12% 112%,
    -20% 55%
  );
}


.cx-media{
  position:absolute;
  inset:0;
  overflow:hidden;
  background: #000; /* fallback */
}
.cx-bgvid{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;         /* clave */
  object-position: center;
  transform: scale(1.06);    /* igual que antes, leve zoom cinematic */
  filter: saturate(1.05) contrast(1.05);
}

.cx-shade{
  position:absolute; inset:0;
  background:
    radial-gradient(600px 380px at 22% 22%, rgba(35,247,255,.22), transparent 62%),
    radial-gradient(540px 420px at 78% 26%, rgba(122,43,255,.18), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.22) 45%, rgba(0,0,0,.35) 100%);
  pointer-events:none;
}

/* “CREASIS®” dentro del shape (sube y se hace hex con el GIF) */
.cx-insideMark{
  position:absolute;
  left: 50%;
  bottom: 8vh;                   /* SUBE: ya no lo muerde el hex */
  transform: translateX(-50%);
  font-weight: 950;
  letter-spacing: -0.06em;
  font-size: clamp(4.0rem, 15vw, 13rem);
  color: #fff;
  text-transform: uppercase;
  user-select:none;
  white-space: nowrap;
  z-index: 10;
  pointer-events:none;

  text-shadow:
    0 14px 44px rgba(0,0,0,.65),
    0 0 26px rgba(35,247,255,.18);
}




/* Copy aparece después */
.cx-copy{
  position: absolute;
  left: 50%;
  bottom: 9vh;
  transform: translateX(-50%) translateY(16px);
  z-index: 2;
}

.cx-h1{
  margin: 0 0 12px;
  font-size: clamp(2.2rem, 6vw, 5.4rem);
  line-height: .95;
  letter-spacing: -0.05em;
  font-weight: 950;
  color: rgba(17,19,22,.90);
}
.cx-line{ display:block; }

/* Palabra que “se rellena” con scroll (como Tesoro) */
.cx-fill{
  --fill: 0%;
  position:relative;
  display:inline-block;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg, var(--cyan), var(--blue), var(--violet));
  background-size: var(--fill) 100%;
  background-repeat:no-repeat;
  background-position:left center;
  -webkit-background-clip:text;
  background-clip:text;
}
.cx-fill::before{
  content: attr(data-text);
  position:absolute;
  inset:0;
  color: rgba(17,19,22,.20);
  -webkit-text-fill-color: rgba(17,19,22,.20);
  background:none;
}
.cx-fill.warm{
  background: linear-gradient(90deg, var(--warm1), var(--warm2));
  -webkit-background-clip:text;
  background-clip:text;
}

.cx-sub{
  margin: 0 auto 18px;
  max-width: 70ch;
  color: rgba(17,19,22,.70);
  font-size: 1.05rem;
  line-height: 1.45;
}

.cx-ctas{
  display:flex;
  gap: 12px;
  justify-content:center;
  flex-wrap:wrap;
}
.cx-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 1.05rem 1.25rem;
  border-radius: 999px;
  font-weight: 900;
  text-decoration:none;
  border:1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.cx-btn:active{ transform: translateY(1px) scale(.99); }

.cx-btn.primary{
  color:#071018;
  background: linear-gradient(90deg, var(--cyan), var(--blue), var(--violet));
  box-shadow: 0 0 26px rgba(35,247,255,.20);
}
.cx-btn.primary:hover{ transform: translateY(-2px); box-shadow: 0 0 40px rgba(35,247,255,.28); }

.cx-btn.ghost{
  background: rgba(17,19,22,.06);
  border-color: rgba(17,19,22,.12);
  color: rgba(17,19,22,.80);
}
.cx-btn.ghost:hover{ transform: translateY(-2px); border-color: rgba(35,247,255,.30); }

/* hint scroll */
.cx-scrollHint{
  position:absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 8px;
  color: rgba(17,19,22,.55);
  font-size: .9rem;
}
.cx-mouse{
  width: 22px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(17,19,22,.25);
  position:relative;
}
.cx-mouse::after{
  content:"";
  width: 4px; height: 6px;
  border-radius: 99px;
  background: rgba(17,19,22,.45);
  position:absolute;
  left:50%; top:7px;
  transform: translateX(-50%);
  animation: wheel 1.2s ease-in-out infinite;
}
@keyframes wheel{
  0%{ opacity:.2; transform: translate(-50%,0); }
  50%{ opacity:1; }
  100%{ opacity:.2; transform: translate(-50%,10px); }
}

/* -------- Sections below -------- */
.cx-section{ padding: 110px 0; }
.cx-wrap{ width:min(1180px, calc(100% - 40px)); margin-inline:auto; }
.cx-section.paper{ background: var(--paper); }

.cx-h2{
  margin:0 0 10px;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing:-0.03em;
  font-weight: 950;
}
.cx-p{ margin:0 0 22px; color: rgba(17,19,22,.70); }

.cx-cards{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 26px;
}
@media (min-width: 860px){
  .cx-cards{ grid-template-columns: repeat(4, 1fr); gap: 22px; }
}

.cx-card{
  border-radius: 26px;
  padding: 22px 18px 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.16);
  opacity:0;
  transform: translateY(18px);
}
.cx-card h3{ margin: 12px 0 8px; font-weight: 950; letter-spacing:-0.02em; }
.cx-card p{ margin:0; color: rgba(17,19,22,.70); }

.cx-ico{
  height: 200px;
  border-radius: 18px;
  background: rgba(255,255,255,.35);
  display:grid;
  place-items:center;
}
.cx-ico img{ width: 150px; height:auto; filter: drop-shadow(0 10px 24px rgba(0,0,0,.18)); }

.cx-card.c1{ background:#ff6738; }
.cx-card.c2{ background:#ffbf0f; }
.cx-card.c3{ background:#22c7c7; }
.cx-card.c4{ background:#21d37a; }

/* Dark section */
.cx-section.dark{
  background: var(--dark);
  color: var(--txt);
}
.cx-h2.light{ color: rgba(255,255,255,.92); }
.cx-p.light{ color: rgba(255,255,255,.72); }

.cx-section .grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items:center;
}
@media (min-width: 980px){
  .cx-section .grid{ grid-template-columns: 1.05fr .95fr; gap: 34px; }
}

.cx-device{
  display:grid;
  gap: 12px;
  justify-items:center;
}
.cx-mascot{
  width: min(420px, 94%);
  height:auto;
  filter: drop-shadow(0 0 30px rgba(35,247,255,.12));
}
.cx-screen{
  width: min(640px, 100%);
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 70px rgba(0,0,0,.40);
}
.cx-screen img{ width:100%; height:auto; display:block; }

/* Footer */
.cx-footer{
  padding: 90px 0 110px;
  background: #05060b;
  color: rgba(255,255,255,.92);
}
.cx-footBtns{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 14px;
}
.cx-fine{ margin-top:18px; color: rgba(255,255,255,.55); }

/* Responsive ajustes stage */
@media (max-width: 768px){
  .cx-insideMark{
    bottom: calc(12vh + env(safe-area-inset-bottom));
    font-size: clamp(3.2rem, 18vw, 9rem);
    letter-spacing: -0.05em;
  }
}

@media (max-width: 390px){
  .cx-insideMark{
    bottom: calc(14vh + env(safe-area-inset-bottom));
    font-size: clamp(3.0rem, 20vw, 8.3rem);
  }
}



/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* =========================
   TESORO-LIKE TILES (3D)
   ========================= */
.cx-tiles{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(16px, 2vw, 32px);
  align-items: start;
  perspective: 1200px;
  perspective-origin: 50% 30%;
}

.cx-tile{
  position:relative;
  border-radius: 34px;
  overflow:hidden;
  transform-style: preserve-3d;
  will-change: transform;
  box-shadow:
    0 24px 60px rgba(0,0,0,.18),
    0 8px 18px rgba(0,0,0,.10);
}

/* “borde” y glass shine */
.cx-tile:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  border: 2px solid rgba(255,255,255,.22);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
  pointer-events:none;
}

.cx-tile:after{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 30% 20%,
    rgba(255,255,255,.35),
    rgba(255,255,255,0) 55%);
  opacity:.22;
  transform: translateZ(20px);
  pointer-events:none;
}

/* Inner para POP 3D sin pelear con GSAP */
.cx-tileInner{
  position:relative;
  z-index:2;
  padding: clamp(18px, 2vw, 26px);
  transform: translateZ(0);
  transition: transform .25s ease;
}

.cx-tile:hover .cx-tileInner{
  transform: translateZ(42px) translateY(-4px);
}

/* Icono grande como Tesoro */
.cx-tileIcon{
  width: min(210px, 78%);
  height:auto;
  display:block;
  margin: 18px auto 14px;
  transform: translateZ(35px);
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.25));
}

.cx-tileTitle{
  margin: 10px 0 6px;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.cx-tileText{
  opacity:.86;
}

/* ESCALONADO (estado inicial visual) */
.cx-tile:nth-child(1){ --step:-26px; --rx:12deg; --ry:-7deg; }
.cx-tile:nth-child(2){ --step:-10px; --rx:12deg; --ry:-5deg; }
.cx-tile:nth-child(3){ --step: 10px; --rx:12deg; --ry:-3deg; }
.cx-tile:nth-child(4){ --step: 26px; --rx:12deg; --ry:-1deg; }

/* Responsive */
@media (max-width: 980px){
  .cx-tiles{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cx-tile:nth-child(1){ --step:-14px; }
  .cx-tile:nth-child(2){ --step: 10px; }
  .cx-tile:nth-child(3){ --step:-10px; }
  .cx-tile:nth-child(4){ --step: 14px; }
}
@media (max-width: 520px){
  .cx-tiles{ grid-template-columns: 1fr; }
  .cx-tile{ border-radius: 28px; }
  .cx-tile{ --step: 0px; --rx:0deg; --ry:0deg; } /* en cel se ve limpio */
}


/* ===== Ecosistema / Tiles ===== */
.cx-container{
  width: min(1240px, 92vw);
  margin-inline: auto;
}

.cx-ecos{ padding: clamp(36px, 5vw, 76px) 0; }
.cx-ecosHead h2{ font-weight: 900; letter-spacing: -.03em; margin: 0 0 8px; }
.cx-ecosHead p{ margin: 0 0 28px; opacity: .78; }

.cx-tiles{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: clamp(16px, 2vw, 30px);
  align-items: start;
  perspective: 1200px;
  perspective-origin: 50% 30%;
}

.cx-tile{
  position: relative;
  border-radius: 34px;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  background: rgba(255,255,255,.85);
  border: 2px solid rgba(0,0,0,.06);
  box-shadow: 0 24px 60px rgba(0,0,0,.14), 0 10px 18px rgba(0,0,0,.08);
}

/* panel color tipo Tesoro (arriba) */
.cx-tile:before{
  content:"";
  position:absolute;
  left: 18px; right: 18px; top: 18px;
  height: 185px;
  border-radius: 26px;
  background: var(--tileBg, linear-gradient(135deg,#23f7ff,#5b5dff));
  box-shadow: 0 18px 38px rgba(0,0,0,.18);
}

/* glow tech */
.cx-tile:after{
  content:"";
  position:absolute;
  inset:-35%;
  background: radial-gradient(circle at 35% 20%, rgba(35,247,255,.35), rgba(35,247,255,0) 55%);
  opacity:.35;
  pointer-events:none;
  transform: translateZ(20px);
}

.cx-tileInner{
  position: relative;
  z-index: 2;
  padding: 22px 22px 26px;
  transform: translateZ(0);
}

.cx-tileIcon{
  width: 130px;
  height: auto;
  display: block;
  margin: 34px auto 18px;
  transform: translateZ(36px);
  filter: drop-shadow(0 20px 26px rgba(0,0,0,.22));
}

.cx-tileTitle{
  margin: 6px 0 6px;
  font-weight: 900;
  letter-spacing: -.03em;
  font-size: 22px;
}

.cx-tileText{
  margin: 0;
  opacity: .82;
  line-height: 1.35;
}

/* Colores por tile (ajústalos a tu gusto) */
.cx-tile--admin{ --tileBg: linear-gradient(135deg,#ff6a3d,#ff3dbb); }
.cx-tile--bi   { --tileBg: linear-gradient(135deg,#ffd23a,#ff9f2a); }
.cx-tile--mkt  { --tileBg: linear-gradient(135deg,#23f7ff,#2dd4bf); }
.cx-tile--pos  { --tileBg: linear-gradient(135deg,#32ff7e,#18c964); }

/* ESCALONADO (estado inicial) */
.cx-tile:nth-child(1){ --step:-26px; --rx:12deg; --ry:-7deg; }
.cx-tile:nth-child(2){ --step:-10px; --rx:12deg; --ry:-5deg; }
.cx-tile:nth-child(3){ --step: 10px; --rx:12deg; --ry:-3deg; }
.cx-tile:nth-child(4){ --step: 26px; --rx:12deg; --ry:-1deg; }

/* Hover 3D */
.cx-tile:hover{
  transform: translateY(-6px) rotateX(2deg) rotateY(-2deg);
  box-shadow: 0 34px 80px rgba(0,0,0,.18), 0 14px 22px rgba(0,0,0,.10);
}

/* Responsive */
@media (max-width: 1100px){
  .cx-tiles{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 520px){
  .cx-tiles{ grid-template-columns: 1fr !important; }
  .cx-tile{ border-radius: 28px; }
  .cx-tile:before{ height: 170px; }
  .cx-tileIcon{ width: 120px; }
}


:root{
  --bg1:#fbf6ef;
  --bg2:#fbf6ef;
  --glow:#00E5FF;
}

body.creasis-landing-page{ overflow-x:hidden; }

/* Fondo fijo full-screen */
.creasis-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;

  background:
    radial-gradient(1200px 700px at 15% 20%, color-mix(in srgb, var(--glow) 24%, transparent) 0%, transparent 60%),
    radial-gradient(900px 600px at 85% 15%, color-mix(in srgb, var(--glow) 18%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%);
}

/* Todo el contenido arriba del fondo */
#creasis-preloader,
.creasis-app,
.cx-menu{ position:relative; z-index:1; }

/* Asegura overlays arriba */
#creasis-preloader{ z-index:99999; }
.cx-menu{ z-index:99998; }
.cx-topbar{ position:fixed; z-index:99997; }

/* Las secciones NO deben pintar su propio fondo */
.cx-stage, .cx-ecos, .cx-section, .cx-footer{
  background:transparent !important;
}

/* =========================
   CREASIS HOTFIX v6 (PEGAR AL FINAL)
   ========================= */

/* Fondo global (animado por variables) */
:root{
  --bg1:#fbf6ef;
  --bg2:#fbf6ef;
  --glowRgb: 0 229 255; /* lo setea el JS */
}

.creasis-landing-page{ background: transparent !important; }

.creasis-bg{
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(1200px 700px at 22% 8%, rgb(var(--glowRgb, 0 229 255) / .20) 0%, transparent 60%),
    radial-gradient(900px 650px at 82% 0%, rgb(var(--glowRgb, 0 229 255) / .12) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%) !important;
}

/* ARREGLA el bug: overlay/menu/preloader deben ser fixed (tu CSS los puso relative) */
#creasis-preloader{
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
}

.cx-menu{
  position: fixed !important;
  inset: 0 !important;
  z-index: 99998 !important;
}

.creasis-app{ position: relative !important; z-index: 1 !important; }
.cx-topbar{ position: fixed !important; z-index: 99997 !important; }

/* HERO full-screen real */
.cx-pin{ height: 100vh !important; overflow: hidden !important; }
.cx-shape{
  inset: 0 !important;          /* <- adiós corte por inset negativo */
  border-radius: 0 !important;
}

/* CREASIS® visible COMPLETO */
.cx-insideMark{
  opacity: 1 !important;
  bottom: calc(clamp(40px, 9vh, 120px) + env(safe-area-inset-bottom)) !important;
  font-size: clamp(44px, 8vw, 104px) !important;
  letter-spacing: -0.02em !important;
  text-shadow: 0 20px 70px rgba(0,0,0,.45) !important;
}

@media (max-width:520px){
  .cx-insideMark{ font-size: clamp(34px, 9vw, 72px) !important; }
  .cx-copy{ padding-inline: 18px !important; }
}
/* =========================
   CREASIS FINAL FIX v7
   ========================= */

:root {
  /* Valores iniciales por si acaso */
  --bg1: #fbf6ef;
  --bg2: #fbf6ef;
  --glowRgb: 0 229 255; /* RGB puro, sin comas */
}

/* Forzar transparencia en contenedores Divi */
.creasis-landing-page,
.creasis-landing-page #page-container,
.creasis-landing-page #main-content,
.creasis-landing-page .et_pb_section {
    background: transparent !important;
    background-color: transparent !important;
}

/* Fondo fijo mágico */
.creasis-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  
  /* Aquí ocurre la magia con --glowRgb */
  background:
    radial-gradient(1200px 700px at 22% 8%, rgb(var(--glowRgb, 0 229 255) / .20) 0%, transparent 60%),
    radial-gradient(900px 650px at 82% 0%, rgb(var(--glowRgb, 0 229 255) / .12) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%) !important;
    
  will-change: background; /* Optimización de rendimiento */
}

/* Asegurar capas superiores */
.creasis-app { position: relative !important; z-index: 1 !important; }
.cx-topbar, .cx-menu { position: fixed !important; z-index: 9999 !important; }

/* Corrección visual del texto gigante CREASIS */
.cx-insideMark {
    bottom: calc(clamp(40px, 9vh, 120px) + env(safe-area-inset-bottom)) !important;
    font-size: clamp(44px, 8vw, 104px) !important;
}
/* =========================
   ULTRA UPGRADE v1.4 — TECNOLOGÍA SECTION
   (sin romper lo existente)
   ========================= */

#tecnologia{
  position: relative;
  isolation: isolate;
  padding: clamp(96px, 10vw, 150px) 0;
}

/* textura + grid sutil + glows */
#tecnologia::before{
  content:"";
  position:absolute;
  inset: -2px;
  z-index: 0;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 18% 20%, rgb(var(--glowRgb, 0 229 255) / .22) 0%, transparent 60%),
    radial-gradient(760px 520px at 92% 12%, rgb(var(--glowRgb, 0 229 255) / .14) 0%, transparent 62%),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.05) 0,
      rgba(255,255,255,.05) 1px,
      transparent 1px,
      transparent 38px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.035) 0,
      rgba(255,255,255,.035) 1px,
      transparent 1px,
      transparent 38px
    );
  opacity: .55;
  mix-blend-mode: screen;
}

#tecnologia .cx-wrap{ position: relative; z-index: 1; }

/* copy en glass card */
.cx-techCopy{
  padding: clamp(18px, 2.2vw, 30px);
  border-radius: 28px;
  background: rgba(7,10,20,.52);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 90px rgba(0,0,0,.45);
}

.cx-techCopy .cx-h2{ line-height: 1.05; }

.cx-grad{
  background: linear-gradient(90deg, rgb(var(--glowRgb, 0 229 255) / 1), #2b66ff, #7a2bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cx-techPills{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin: 16px 0 14px;
}

.cx-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,.90);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
}

/* mini cards */
.cx-techMini{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 12px;
}

@media (min-width: 980px){
  .cx-techMini{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.cx-mini{
  position: relative;
  padding: 14px 14px 13px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  overflow:hidden;
}

.cx-mini::before{
  content:"";
  position:absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, rgb(var(--glowRgb, 0 229 255) / .9), rgba(43,102,255,.9), rgba(122,43,255,.9));
  opacity: .85;
}

.cx-mini h3{
  margin: 8px 0 4px;
  font-size: 1.02rem;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,.92);
}

.cx-mini p{
  margin: 0;
  color: rgba(255,255,255,.72);
  line-height: 1.32;
  font-size: .95rem;
}

.cx-techBtns{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  margin-top: 18px;
}

/* derecho: device ultra */
.cx-device{
  position: relative;
  padding: 18px;
  border-radius: 30px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  box-shadow: 0 34px 110px rgba(0,0,0,.55);
}

.cx-device::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 30px;
  padding: 1px;
  background: linear-gradient(135deg, rgb(var(--glowRgb, 0 229 255) / .55), rgba(43,102,255,.35), rgba(122,43,255,.38));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity: .75;
}

.cx-mascot{
  transform: translateY(-4px);
  animation: cxFloat 4.8s ease-in-out infinite;
}

@keyframes cxFloat{
  0%,100%{ transform: translateY(-4px); }
  50%{ transform: translateY(8px); }
}

.cx-screen{
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  box-shadow: 0 26px 90px rgba(0,0,0,.55);
  position: relative;
}

.cx-screen::after{
  content:"";
  position:absolute;
  inset:-40% -40% auto -40%;
  height: 140%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 45%);
  transform: rotate(10deg);
  pointer-events:none;
  opacity: .35;
}

/* mobile: reduce efectos */
@media (max-width: 520px){
  #tecnologia::before{ opacity:.35; }
  .cx-device{ padding: 14px; }
}

/* Respeto a accesibilidad */
@media (prefers-reduced-motion: reduce){
  .cx-mascot{ animation: none !important; }
}

/* =========================
   ULTRA UPGRADE v1.4 — UI CHROME (topbar + progress)
   ========================= */

#cxScrollProgress{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  z-index: 100000;
  pointer-events: none;
  background: rgba(255,255,255,.08);
}
#cxScrollProgress .cx-scrollProgress__fill{
  position:absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, rgba(35,247,255,.95), rgba(43,102,255,.95), rgba(122,43,255,.92));
  box-shadow: 0 0 18px rgba(35,247,255,.22);
}

.cx-topbar{ isolation:isolate; }
.cx-topbar::before{
  content:"";
  position:absolute;
  inset: -10px;
  border-radius: 28px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 50px rgba(0,0,0,.14);
  backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity .22s ease;
  z-index: -1;
}
.cx-topbar--scrolled::before{ opacity: 1; }

/* Contraste automático del burger según sección */
body.cx-ui-dark .cx-burger{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
body.cx-ui-dark .cx-burger span{ background: rgba(255,255,255,.92); }

@media (prefers-reduced-motion: reduce){
  .cx-topbar::before{ transition: none; }
}

/* =========================
   ULTRA UPGRADE v1.4 — ECOSISTEMA (más premium)
   ========================= */

.cx-ecos{ position: relative; }
.cx-ecos::before{
  content:"";
  position:absolute;
  inset:-20% -10% -15% -10%;
  pointer-events:none;
  background:
    radial-gradient(700px 420px at 20% 10%, rgb(var(--glowRgb, 0 229 255) / .14) 0%, transparent 62%),
    radial-gradient(640px 420px at 85% 25%, rgb(var(--glowRgb, 0 229 255) / .10) 0%, transparent 65%),
    repeating-linear-gradient(90deg, rgba(17,19,22,.05) 0, rgba(17,19,22,.05) 1px, transparent 1px, transparent 46px);
  opacity:.55;
  filter: blur(.2px);
}

.cx-ecosHead{
  position:relative;
  max-width: 760px;
}

.cx-ecosHead::before{
  content:"ECOSISTEMA";
  display:inline-flex;
  align-items:center;
  padding: 10px 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(var(--glowRgb, 0 229 255) / .22), rgba(43,102,255,.14), rgba(122,43,255,.16));
  border: 1px solid rgba(0,0,0,.08);
  font-weight: 950;
  letter-spacing: .08em;
  font-size: .78rem;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.cx-ecosHead h2{
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
}

/* =========================
   ULTRA BACKGROUND PARTICLES + MENU SPACING + FOOTER CONTRAST — v1.6
   ========================= */

/* Partículas / grid + glows (pro, sin verse 'ruidoso') */
.creasis-bg::after{
  content:"";
  position:absolute;
  inset:-10%;
  pointer-events:none;
  opacity:.35;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(17,19,22,.12) 1px, transparent 0),
    radial-gradient(circle at 1px 1px, rgb(var(--glowRgb, 0 229 255) / .22) 1px, transparent 0),
    radial-gradient(420px 300px at 15% 25%, rgb(var(--glowRgb, 0 229 255) / .10), transparent 60%),
    radial-gradient(520px 360px at 85% 18%, rgb(var(--glowRgb, 0 229 255) / .08), transparent 65%);
  background-size: 26px 26px, 56px 56px, 100% 100%, 100% 100%;
  background-position: 0 0, 12px 18px, 0 0, 0 0;
  filter: blur(.2px);
  animation: cxParticlesMove 22s linear infinite;
  mix-blend-mode: multiply;
}

@keyframes cxParticlesMove{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-60px,-90px,0); }
}

body.cx-ui-dark .creasis-bg::after{
  opacity:.18;
  mix-blend-mode: screen;
}

/* Botón sutil (para Páginas Web) */
.cx-btn.subtle{
  background: rgba(255,255,255,.42);
  border: 1px solid rgba(0,0,0,.08);
  color: rgba(17,19,22,.84);
  padding: .92rem 1.05rem;
}
.cx-btn.subtle:hover{ transform: translateY(-1px); filter: brightness(1.02); }

body.cx-ui-dark .cx-btn.subtle{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.88);
}

/* Menú: más aire, evita empalmes */
.cx-menu-inner{
  padding: clamp(28px, 6vw, 72px) !important;
}
.cx-menu-links{ gap: 18px !important; }
.cx-menu-links a{
  line-height: 1.04;
  padding: 6px 0;
}

/* Footer SIEMPRE legible aunque el background global quede claro */
.cx-footer{
  background: rgba(7,10,20,.82) !important;
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,.10);
}
.cx-footer .cx-btn.ghost{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
}

@media (max-width: 520px){
  .cx-topbar{ left:14px !important; right:14px !important; top:14px !important; }
  .cx-menu-inner{ padding: 26px !important; }
  .cx-menu-links{ gap: 14px !important; }
}

/* =========================
   WEB PACKAGES PAGE (ES/EN + USD/MXN) — v1.6
   ========================= */

.cx-webHero{ padding: 120px 0 70px; }
.cx-webHeroGrid{ display:grid; gap: 22px; align-items:center; }
@media(min-width:980px){ .cx-webHeroGrid{ grid-template-columns: 1.05fr .95fr; } }
.cx-webH1{ margin:0 0 10px; font-weight: 950; letter-spacing:-.04em; font-size: clamp(2.2rem, 5vw, 3.6rem); }
.cx-webSub{ margin:0 0 18px; opacity:.72; max-width: 60ch; }
.cx-webHeroImg{ width: min(680px, 100%); border-radius: 22px; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 22px 70px rgba(0,0,0,.18); }
.cx-webNote{ margin-top: 12px; font-weight: 800; opacity:.68; }

.cx-pricing{ padding: 96px 0 110px; }
.cx-pricingHead{ display:flex; flex-wrap:wrap; gap: 16px; align-items:flex-end; justify-content:space-between; }
.cx-pricingToggles{ display:flex; gap: 12px; flex-wrap:wrap; }
.cx-toggleGroup{ display:flex; gap: 10px; align-items:center; padding: 10px 12px; border-radius: 999px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); }
.cx-toggleLabel{ color: rgba(255,255,255,.72); font-weight: 900; }
.cx-toggle{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 950;
  cursor:pointer;
}
.cx-toggle.is-active{
  background: linear-gradient(90deg, rgba(35,247,255,.95), rgba(43,102,255,.92), rgba(122,43,255,.90));
  color:#071018;
  border-color: transparent;
}

.cx-priceGrid{ display:grid; gap: 18px; margin-top: 18px; }
@media(min-width:980px){ .cx-priceGrid{ grid-template-columns: repeat(3, 1fr); gap: 22px; } }

.cx-priceCard{
  position:relative;
  border-radius: 26px;
  padding: 22px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 28px 90px rgba(0,0,0,.35);
  backdrop-filter: blur(16px);
}
.cx-priceCard.featured{
  transform: translateY(-6px);
  border-color: rgba(35,247,255,.22);
}
.cx-badge{
  position:absolute;
  top: 16px; right: 16px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 950;
  font-size: .82rem;
  background: rgba(35,247,255,.18);
  border:1px solid rgba(35,247,255,.22);
  color: rgba(255,255,255,.92);
}

.cx-priceTitle{ margin:0 0 10px; font-weight: 950; letter-spacing:-.03em; color: rgba(255,255,255,.92); }
.cx-priceLine{ font-size: 2rem; font-weight: 950; letter-spacing:-.03em; color: rgba(255,255,255,.92); margin-bottom: 12px; }
.cx-priceCur{ font-size: .9rem; opacity:.75; margin-left: 6px; }

.cx-priceList{ margin: 0 0 16px; padding-left: 18px; color: rgba(255,255,255,.82); }
.cx-priceList li{ margin: 8px 0; }

.cx-priceBtns{ display:flex; gap: 10px; flex-wrap:wrap; }
.cx-priceFine{ margin-top: 14px; color: rgba(255,255,255,.60); }

@media(max-width:520px){
  .cx-webHero{ padding-top: 110px; }
  .cx-priceCard.featured{ transform:none; }
}