/* =====================================================================
   OLTIXA · landing y páginas públicas, identidad "Chakana" (ficha: /var/www/lab/.oxira/estilos/CHAKANA.md;
   antecedente: FIBRA-DE-LUZ.md). Blanco limpio + noche en laguna con textura de piedra, la luz roja del
   láser recorre la fibra, ginda de marca, óxido para la oferta y jade para "en línea".
   Colores y fuentes salen de marca.css (--ch-*); aquí solo hay alias con los nombres de siempre.
   Sirve para la landing (body.fx-home) y el marco de las páginas públicas (body.fx-inner).
   ===================================================================== */

:root{
  /* noche = laguna · luz = rojo láser · hielo = gris muy claro (nombres de "Fibra de luz") */
  --noche:var(--ch-laguna); --noche-2:var(--ch-laguna-2); --noche-3:var(--ch-laguna-3); --noche-4:var(--ch-laguna-4);
  --txt-noche:var(--ch-laguna-txt); --txt-noche-2:var(--ch-laguna-tt);
  --tinta:var(--ch-tinta); --tinta-2:#3B4442; --gris:var(--ch-gris); --gris-2:var(--ch-gris-2);
  --hielo:var(--ch-hielo); --hielo-2:var(--ch-hielo-2); --linea:var(--ch-linea);
  --ginda:var(--ch-ginda); --ginda-l:var(--ch-ginda-l); --ginda-d:var(--ch-ginda-d); --ginda-dd:var(--ch-ginda-dd);
  --luz:var(--ch-rojo); --luz-l:var(--ch-rojo-ll); --luz-t:var(--ch-rojo-l); --luz-d:var(--ch-rojo-d); --luz-dd:var(--ch-ginda);
  --oxido:var(--ch-oxido); --oxido-l:var(--ch-oxido-l); --oxido-d:var(--ch-oxido-d); --oxido-ll:var(--ch-oxido-ll);
  --jade:var(--ch-jade); --jade-d:var(--ch-jade-d); --jade-l:var(--ch-jade-l);
  --verde:var(--ch-jade-led); --rojo:var(--ch-error-led); --wa:#25d366;
  --sombra:2,31,33; /* rgb de la sombra (laguna honda) */
  --r:26px; --ease:cubic-bezier(.2,.7,.2,1);
  --font:var(--ch-f-texto); --font-marca:var(--ch-f-marca);
  --mono:var(--ch-f-mono);
}

/* ---------- textura de piedra/laguna en las secciones oscuras (no en paneles) ---------- */
.fx-hero,.fx-puente,.fx-cierre,.fx-foot{background-image:var(--ch-grano),var(--ch-veta),var(--ch-fondo);background-blend-mode:soft-light,soft-light,normal}

/* ---------- base ---------- */
.fx-body{font-family:var(--font);background:#fff;color:var(--tinta);min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
.fx-body h1,.fx-body h2,.fx-body h3,.fx-body h4{font-family:var(--font-marca)}
.fx-skip{position:absolute;left:-9999px;top:8px;z-index:2000;background:#fff;color:var(--tinta);padding:.6rem 1rem;border-radius:10px;font-weight:700}
.fx-skip:focus{left:12px}
.fx-body :focus-visible{outline:3px solid var(--luz);outline-offset:3px;border-radius:6px}
.fx-oculto{position:absolute;width:0;height:0;overflow:hidden}
.fx-svg-t{font-family:var(--font-marca);font-weight:700}
.fx-svg-t2{font-family:var(--font);font-weight:600}
.fx-svg-mono{font-family:var(--mono);font-weight:600}

/* ---------- logo ---------- */
.fx-logo{display:inline-flex;align-items:center;gap:.6rem;line-height:1}
.fx-logo__mark{flex:none}
.fx-logo__txt{font-family:var(--font-marca);font-weight:700;font-size:1.4rem;letter-spacing:.14em;color:var(--tinta);margin-right:-.14em}
.fx-logo--oscuro .fx-logo__txt{color:#fff}
.fx-logo__txt b{color:var(--luz);font-weight:700}
.fx-logo__luz{filter:drop-shadow(0 0 3px var(--luz))}

/* ---------- barra de navegación ---------- */
.fx-nav{background:#fff;padding:.7rem 0;position:relative;z-index:30;border-bottom:1px solid var(--linea)}
.fx-nav .navbar-brand{padding:0;margin-right:1.2rem}
.fx-nav .nav-link{color:var(--tinta-2);font-weight:600;border-radius:10px;padding:.5rem .8rem!important}
.fx-nav .nav-link:hover,.fx-nav .nav-link:focus-visible{color:var(--ginda);background:var(--ch-ginda-t)}
.fx-nav__in{color:var(--tinta)!important}
.fx-nav__toggle{border:0;width:46px;height:42px;padding:10px;display:flex;flex-direction:column;justify-content:space-between;border-radius:12px;background:var(--hielo)}
.fx-nav__toggle span{display:block;height:3px;border-radius:2px;background:var(--ginda);transition:transform .3s var(--ease),opacity .2s}
.fx-nav__toggle:not(.collapsed)[aria-expanded="true"] span:nth-child(1){transform:translateY(8.5px) rotate(45deg)}
.fx-nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.fx-nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}
.fx-nav__toggle:focus{box-shadow:none}
@media (max-width:991.98px){
  .fx-nav .navbar-collapse{margin-top:.6rem;padding:.6rem;border-radius:18px;background:#fff;border:1px solid var(--linea);box-shadow:0 20px 30px -20px rgba(var(--sombra),.35)}
  .fx-nav .navbar-nav .fx-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-weight:800;font-size:1.06rem;line-height:1.1;padding:.95rem 1.5rem;border-radius:16px;border:0;text-decoration:none;cursor:pointer;position:relative;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .2s;white-space:nowrap}
}

/* ---------- botones ---------- */
.fx-btn{--sh:var(--oxido-d);font-family:var(--font-marca);letter-spacing:.01em;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-weight:800;font-size:1.06rem;line-height:1.1;padding:.95rem 1.5rem;border-radius:16px;border:0;text-decoration:none;cursor:pointer;position:relative;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .2s;white-space:nowrap}
.fx-btn .bi{font-size:1.15em}
.fx-btn--go{background:linear-gradient(180deg,var(--ginda-l),var(--ginda) 60%);color:#fff;box-shadow:0 5px 0 var(--ginda-dd),0 16px 28px -12px rgba(142,27,46,.7)}
.fx-btn--go:hover{color:#fff;transform:translateY(-2px);box-shadow:0 7px 0 var(--ginda-dd),0 20px 30px -12px rgba(142,27,46,.75),0 0 0 2px rgba(255,42,61,.35)}
.fx-btn--go:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ginda-dd),0 6px 14px -8px rgba(142,27,46,.6)}
.fx-btn--sm{font-size:.95rem;padding:.6rem 1.05rem;border-radius:12px;box-shadow:0 4px 0 var(--ginda-dd)}
.fx-btn--ghost{color:#fff;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 2px rgba(213,230,227,.45)}
.fx-btn--ghost:hover{color:#fff;background:rgba(255,42,61,.14);box-shadow:inset 0 0 0 2px var(--luz)}
.fx-btn--blanco{background:#fff;color:var(--ginda);box-shadow:0 5px 0 var(--ginda-dd),0 16px 26px -12px rgba(var(--sombra),.7)}
.fx-btn--blanco:hover{color:var(--ginda);transform:translateY(-2px);box-shadow:0 7px 0 var(--ginda-dd),0 18px 28px -12px rgba(var(--sombra),.7)}
.fx-btn--blanco:active,.fx-btn--wa:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ginda-dd)}
.fx-btn--wa{background:var(--wa);color:#fff;box-shadow:0 5px 0 #128c4a,0 16px 26px -12px rgba(18,140,74,.7)}
.fx-btn--wa:hover{color:#fff;transform:translateY(-2px);box-shadow:0 7px 0 #128c4a,0 18px 28px -12px rgba(18,140,74,.7)}

/* ---------- títulos ---------- */
.fx-h1{margin:0 0 1rem;font-family:var(--font-marca);font-weight:700;line-height:1;letter-spacing:-.015em;font-size:clamp(2.4rem,9vw,4.5rem)}
.fx-h1 .fx-luz{white-space:nowrap}
.fx-h1>span{display:block}
.fx-3d{color:#fff;text-shadow:0 1px 0 #d5e6e3,0 2px 0 #a8c7c3,0 3px 0 #6f9f99,0 4px 0 #3f7570,0 5px 0 #1d4f4c,0 6px 0 #0b3335,0 16px 26px rgba(0,0,0,.5)}
.fx-luz{background:linear-gradient(180deg,#fff1f2 0%,#ff7b88 45%,#ff2a3d 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #b3001a) drop-shadow(0 3px 0 #8e1b2e) drop-shadow(0 0 22px rgba(255,42,61,.4));padding-bottom:.08em}
.fx-h2{font-family:var(--font-marca);font-weight:700;letter-spacing:-.015em;line-height:1.04;font-size:clamp(2rem,6vw,3.3rem);margin:0;color:var(--tinta)}
.fx-h2--claro{color:#fff}
.fx-marca{position:relative;display:inline-block;z-index:0;white-space:nowrap}
.fx-marca{color:var(--ginda)}
.fx-marca::after{content:"";position:absolute;left:-3%;right:-3%;bottom:.04em;height:.28em;background:var(--luz-l);border-radius:6px;transform:skewX(-12deg);z-index:-1}
.fx-marca-luz{color:var(--luz);text-shadow:0 0 22px rgba(255,42,61,.45)}
.fx-kicker{display:inline-block;font-family:var(--font-marca);font-weight:700;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--noche-4);background:#fff;border:2px solid #cfe2df;padding:.35rem .8rem;border-radius:999px;margin-bottom:.9rem;transform:skewX(-8deg)}
.fx-kicker--luz{color:var(--luz-t);background:rgba(255,42,61,.1);border-color:rgba(255,42,61,.35)}
.fx-head{text-align:center;margin-bottom:clamp(2rem,4vw,3.2rem)}
.fx-head__nota{margin:.9rem 0 0;color:var(--gris);font-weight:600;display:inline-flex;align-items:center;gap:.45rem}
.fx-center{text-align:center;margin-top:2.4rem}

/* ---------- secciones ---------- */
.fx-sec{position:relative;padding:clamp(3.5rem,8vw,6.5rem) 0}
.fx-sec--hielo{background:var(--hielo)}
.fx-ola{position:absolute;left:0;bottom:-1px;width:100%;height:clamp(40px,7vw,110px);display:block;z-index:3}
.fx-ola--top{top:-1px;bottom:auto}

/* ---------- HERO ---------- */
.fx-hero{position:relative;overflow:hidden;color:#fff;padding:clamp(1.6rem,4vw,2.6rem) 0 clamp(4rem,7vw,6rem);
  --ch-fondo:radial-gradient(90% 80% at 72% 30%,var(--noche-4) 0%,var(--noche-2) 40%,var(--noche) 80%);background-color:var(--noche)}
.fx-hero__sky{position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(1.4px 1.4px at 12% 20%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 32% 64%,#d5e6e3 50%,transparent 51%),radial-gradient(1.6px 1.6px at 48% 14%,#fff 50%,transparent 51%),radial-gradient(1.1px 1.1px at 6% 78%,#d5e6e3 50%,transparent 51%),radial-gradient(1.3px 1.3px at 26% 40%,#fff 50%,transparent 51%)}
.fx-hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem;align-items:center}
@media (min-width:992px){.fx-hero__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:2rem}}
.fx-hero__txt{text-align:center}
@media (min-width:992px){.fx-hero__txt{text-align:left}}
.fx-sticker{display:inline-flex;align-items:center;gap:.45rem;background:var(--oxido);color:#fff;font-family:var(--font-marca);font-weight:700;font-size:.95rem;padding:.45rem .95rem;border-radius:12px;transform:rotate(-2.5deg);box-shadow:0 4px 0 var(--oxido-d);margin-bottom:1.2rem}
.fx-hero__lead{font-size:clamp(1.08rem,2.4vw,1.3rem);color:var(--txt-noche-2);font-weight:500;max-width:30ch;margin:0 auto 1.6rem}
@media (min-width:992px){.fx-hero__lead{margin-left:0}}
.fx-hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}
@media (min-width:992px){.fx-hero .fx-hero__cta{justify-content:flex-start}}
.fx-hero__pills{list-style:none;padding:0;margin:1.6rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;justify-content:center;color:var(--txt-noche);font-weight:600;font-size:.95rem}
.fx-hero__pills i{color:var(--luz);margin-right:.35rem}
@media (min-width:992px){.fx-hero__pills{justify-content:flex-start}}
.fx-hero__art{position:relative;margin:0 -8px}
.fx-red{width:100%;height:auto;display:block;overflow:visible}

/* animaciones del dibujo del hero */
.fx-est circle{animation:fxTitila 3.4s ease-in-out infinite}
.fx-est circle:nth-child(3n){animation-delay:1.1s}.fx-est circle:nth-child(3n+1){animation-delay:2.2s}
@keyframes fxTitila{0%,100%{opacity:1}50%{opacity:.25}}
.fx-leds circle,.fx-parpadea{animation:fxParpadea 1.6s steps(2,jump-none) infinite}
@keyframes fxParpadea{0%,100%{opacity:1}50%{opacity:.35}}
.fx-pulso{stroke-dasharray:9 120;stroke-dashoffset:10;animation:fxViaja 4.2s linear infinite;filter:drop-shadow(0 0 5px var(--luz))}
@keyframes fxViaja{0%{stroke-dashoffset:10}28%{stroke-dashoffset:-100}100%{stroke-dashoffset:-100}}
.fx-win{fill:#0b3c3e;animation:fxEnciende .5s ease-out forwards;animation-delay:var(--d)}
.fx-casa .fx-win{animation-delay:var(--d)}
@keyframes fxEnciende{to{fill:#ffd36b}}
.fx-casa__halo{opacity:0;animation:fxHalo .8s ease-out forwards;animation-delay:var(--d)}
@keyframes fxHalo{to{opacity:1}}
.fx-onu-led{fill:#1d4a47;animation:fxLed .4s forwards,fxParpadea 2s 3s infinite;animation-delay:var(--d),calc(var(--d) + 1s)}
@keyframes fxLed{to{fill:#5bd083}}
.fx-aviso{opacity:0;transform-box:fill-box;transform-origin:50% 100%;animation:fxAviso .6s var(--ease) forwards;animation-delay:var(--d)}
@keyframes fxAviso{from{opacity:0;transform:translateY(12px) scale(.85)}to{opacity:1;transform:none}}
.fx-svg-tag text{font-family:var(--font);font-weight:800;letter-spacing:.12em}

/* ---------- PASOS ---------- */
.fx-pasos{padding-top:clamp(2.2rem,4vw,3.6rem)}
.fx-pasos__lista{list-style:none;padding:0;margin:0;display:grid;gap:2.4rem;position:relative;counter-reset:none}
@media (min-width:768px){.fx-pasos__lista{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem}}
.fx-pasos__lista::before{content:"";position:absolute;z-index:0;background:repeating-linear-gradient(90deg,var(--luz) 0 12px,transparent 12px 22px);height:4px;left:16%;right:16%;top:34px;border-radius:2px;opacity:.55}
@media (max-width:767.98px){.fx-pasos__lista::before{left:50%;right:auto;top:30px;bottom:30px;width:4px;height:auto;background:repeating-linear-gradient(180deg,var(--luz) 0 12px,transparent 12px 22px)}}
.fx-paso{position:relative;z-index:1;background:#fff;border-radius:var(--r);padding:3rem 1.4rem 1.6rem;text-align:center;box-shadow:0 26px 44px -30px rgba(var(--sombra),.5),0 0 0 1px rgba(var(--sombra),.06);transition:transform .45s var(--ease)}
.fx-paso:hover{transform:translateY(-6px) rotate(-.6deg)}
.fx-num{position:absolute;top:-28px;left:50%;margin-left:-30px;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-marca);font-weight:700;font-size:1.8rem;color:#fff;
  background:radial-gradient(circle at 32% 26%,#e0566a 0%,var(--ginda) 55%,var(--ginda-d) 100%);box-shadow:0 8px 0 -2px var(--ginda-dd),0 18px 26px -10px rgba(142,27,46,.6),inset 0 3px 6px rgba(255,255,255,.35)}
.fx-paso__ilus{width:100%;max-width:280px;height:auto;display:block;margin:0 auto .6rem}
.fx-paso__tit{font-family:var(--font-marca);font-weight:700;font-size:1.5rem;margin:0 0 .25rem;letter-spacing:-.01em}
.fx-paso__txt{margin:0;color:var(--gris);font-weight:500}
.fx-flota{animation:fxFlota 5s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes fxFlota{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.fx-pop{transform-box:fill-box;transform-origin:center;animation:fxPop 4s var(--ease) infinite;animation-delay:var(--d,0s)}
@keyframes fxPop{0%,12%{transform:scale(0)}22%,86%{transform:scale(1)}96%,100%{transform:scale(0)}}
.fx-tecleo{transform-box:fill-box;transform-origin:left center;animation:fxTeclea 4s steps(12) infinite}
@keyframes fxTeclea{0%{transform:scaleX(0)}45%,100%{transform:scaleX(1)}}
.fx-switch rect{animation:fxSwRect 4s infinite}
.fx-switch__bola{animation:fxSwBola 4s var(--ease) infinite}
@keyframes fxSwRect{0%,45%{fill:#cbd3d0}55%,100%{fill:#5bd083}}
@keyframes fxSwBola{0%,45%{transform:translateX(0)}55%,100%{transform:translateX(10px)}}
.fx-toque{transform-box:fill-box;transform-origin:center;animation:fxToque 4s infinite}
@keyframes fxToque{0%,40%{opacity:0;transform:scale(1.6)}48%{opacity:1;transform:scale(1)}60%,100%{opacity:0;transform:scale(1)}}

/* ---------- PANTALLAS (PC + celular) ---------- */
.fx-pantallas{background:#fff;overflow:hidden;padding-bottom:clamp(3rem,8vw,7rem)}
.fx-pantallas__banda{position:absolute;left:-5%;right:-5%;top:0;height:78%;background:var(--hielo);transform:skewY(-4deg);transform-origin:0 0;margin-top:3%}
.fx-pantallas .container{position:relative}
.fx-escena{position:relative;max-width:1000px;margin:0 auto;padding-right:clamp(40px,12%,130px)}
.fx-pc{width:100%;height:auto;display:block;filter:drop-shadow(0 40px 50px rgba(var(--sombra),.4))}
.fx-cel{position:absolute;right:0;bottom:-6%;width:clamp(120px,27%,260px);height:auto;filter:drop-shadow(0 30px 34px rgba(var(--sombra),.5))}
.fx-crece{transform-box:fill-box;transform-origin:bottom;animation:fxCrece 1.4s var(--ease) both;animation-delay:var(--d)}
@keyframes fxCrece{from{transform:scaleY(.1)}}
.fx-dedo{transform-box:fill-box;transform-origin:center;animation:fxToque 4.5s infinite}
.fx-toast{opacity:0;animation:fxToast 4.5s infinite}
@keyframes fxToast{0%,50%{opacity:0;transform:translateY(8px)}58%,92%{opacity:1;transform:none}100%{opacity:0}}
.fx-pin{position:absolute;left:var(--x);top:var(--y);width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-marca);font-weight:700;font-size:1.15rem;color:#fff;z-index:4;
  background:radial-gradient(circle at 32% 26%,#f3a57c,var(--oxido-l) 55%,var(--oxido));box-shadow:0 0 0 5px rgba(211,96,47,.28),0 10px 18px -6px rgba(0,0,0,.5)}
.fx-pin::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--oxido-l);animation:fxAnillo 2.2s ease-out infinite}
@keyframes fxAnillo{from{transform:scale(1);opacity:.8}to{transform:scale(1.8);opacity:0}}
.fx-pin--1{--x:31%;--y:13%}
.fx-pin--2{--x:65.5%;--y:36%}
.fx-pin--cel{left:auto;top:auto;right:1.5%;bottom:22%;margin:0}
.fx-pin--static{position:relative;left:auto;top:auto;margin:0;width:32px;height:32px;font-size:1rem;flex:none}
.fx-pin--static::after{display:none}
.fx-leyenda{list-style:none;padding:0;margin:clamp(3rem,7vw,4.5rem) auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem 1.2rem;max-width:900px}
.fx-leyenda li{display:flex;align-items:center;gap:.6rem;background:#fff;box-shadow:0 0 0 1px var(--linea);border-radius:999px;padding:.45rem 1.1rem .45rem .45rem;font-weight:500;color:var(--gris)}
.fx-leyenda b{color:var(--tinta);font-weight:800}
@media (max-width:575.98px){
  .fx-escena{padding-right:0;margin-bottom:37vw}
  .fx-cel{width:34%;bottom:auto;top:52%;right:-2%}
  .fx-pin:not(.fx-pin--static){width:28px;height:28px;margin:-14px 0 0 -14px;font-size:.9rem}
  .fx-pin--1{--x:36%;--y:14%}
  .fx-pin--2{--x:66%;--y:34%}
  .fx-pin--cel{margin:0!important;left:auto;top:auto;right:1%;bottom:-23%}
  .fx-leyenda{flex-direction:column;align-items:center;margin-top:1rem}
  .fx-leyenda li{width:100%;max-width:320px;font-size:.95rem}
}

/* pasos en celular: dibujo a la izquierda, texto a la derecha */
@media (max-width:767.98px){
  .fx-pasos__lista{gap:1.6rem}
  .fx-paso{display:grid;grid-template-columns:44% 1fr;align-items:center;text-align:left;padding:1.1rem 1rem 1.1rem .6rem;column-gap:.6rem}
  .fx-paso__ilus{grid-row:1 / span 2;margin:0}
  .fx-paso__tit{font-size:1.25rem;align-self:end}
  .fx-paso__txt{align-self:start;font-size:.95rem}
  .fx-num{top:-16px;left:-6px;margin:0;width:46px;height:46px;font-size:1.4rem}
  .fx-pasos__lista::before{left:22%}
}

/* ---------- FUNCIONES ---------- */
.fx-fichas{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media (min-width:768px){.fx-fichas{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem}}
.fx-ficha{position:relative;background:#fff;border-radius:var(--r);padding:1.6rem .9rem 1.3rem;text-align:center;box-shadow:0 20px 36px -28px rgba(var(--sombra),.5),0 0 0 1px rgba(var(--sombra),.06);transition:transform .45s var(--ease)}
.fx-ficha:hover{transform:translateY(-6px)}
.fx-ficha:hover .fx-ico{transform:translateY(-6px) rotate(-6deg)}
.fx-ficha__tit{font-family:var(--font-marca);font-weight:700;font-size:clamp(1.02rem,2.4vw,1.2rem);margin:.9rem 0 0;letter-spacing:-.01em;line-height:1.15;padding:0 .9rem}
.fx-ico{--c:#8e1b2e;--cl:#e0788a;--cd:#4a0e1a;display:inline-grid;place-items:center;width:clamp(64px,15vw,82px);height:clamp(64px,15vw,82px);border-radius:50%;color:#fff;font-size:clamp(1.7rem,4vw,2.2rem);
  background:radial-gradient(circle at 32% 26%,var(--cl) 0%,var(--c) 50%,var(--cd) 100%);box-shadow:0 18px 26px -12px var(--cd),inset 0 -7px 12px rgba(0,0,0,.22),inset 0 5px 9px rgba(255,255,255,.55);transition:transform .45s var(--ease)}
.fx-ico .bi{filter:drop-shadow(0 2px 1px rgba(0,0,0,.28))}
.fx-ico--verde{--c:#3c8858;--cl:#a6d6b4;--cd:#1b572a}
.fx-ico--rojo{--c:#ff2a3d;--cl:#ffc2c8;--cd:#b3001a}
.fx-ico--ambar{--c:#c95d2f;--cl:#f3b08c;--cd:#8a300a}
.fx-ico--luz{--c:#8e1b2e;--cl:#e0788a;--cd:#4a0e1a}
.fx-ico--laguna{--c:#0e5558;--cl:#6fb3ad;--cd:#032d2f}
/* globo "?" */
.fx-q{position:static}
.fx-q summary{position:absolute;top:.7rem;right:.7rem;list-style:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:.95rem;cursor:pointer;background:var(--hielo);color:var(--luz-dd);border:2px solid var(--hielo-2);transition:background .2s,color .2s}
.fx-q summary::-webkit-details-marker{display:none}
.fx-q summary:hover,.fx-q[open] summary{background:var(--noche-2);color:#fff;border-color:var(--noche-2)}
.fx-q__globo{position:absolute;z-index:20;top:3.2rem;right:.4rem;width:min(250px,72vw);background:var(--noche-2);color:var(--txt-noche-2);text-align:left;font-size:.95rem;line-height:1.45;font-weight:500;padding:.9rem 1rem;border-radius:16px;box-shadow:0 20px 34px -12px rgba(var(--sombra),.6);animation:fxGlobo .25s var(--ease)}
.fx-q__globo::before{content:"";position:absolute;top:-7px;right:18px;width:14px;height:14px;background:var(--noche-2);transform:rotate(45deg);border-radius:3px}
@keyframes fxGlobo{from{opacity:0;transform:translateY(-6px) scale(.96)}}
.fx-ficha:has(.fx-q[open]){z-index:10}
@media (max-width:767.98px){.fx-ficha:nth-child(odd) .fx-q__globo{right:auto;left:.4rem}.fx-ficha:nth-child(odd) .fx-q__globo::before{display:none}}
.fx-q-demo{width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;font-weight:900;font-size:.8rem;background:#fff;color:var(--luz-dd);border:2px solid var(--hielo-2)}

/* ---------- PUENTE VPN ---------- */
.fx-puente{--ch-fondo:radial-gradient(90% 70% at 50% 30%,var(--noche-4) 0%,var(--noche-2) 50%,var(--noche) 100%);background-color:var(--noche);color:#fff;padding-top:clamp(6rem,11vw,9rem);padding-bottom:clamp(5rem,10vw,8rem)}
.fx-puente__dibujo{max-width:1000px;margin:0 auto}
.fx-puente__h{display:block;width:100%;height:auto}
.fx-puente__v{display:none;width:100%;max-width:360px;height:auto;margin:0 auto}
@media (max-width:640px){.fx-puente__h{display:none}.fx-puente__v{display:block}}
.fx-paq{animation:fxPaq 3s linear infinite}
@keyframes fxPaq{from{transform:translateX(0)}to{transform:translateX(380px)}}
.fx-paq--vuelta{animation-direction:reverse}
.fx-paq-v{animation:fxPaqV 3s linear infinite}
@keyframes fxPaqV{from{transform:translateY(0)}to{transform:translateY(152px)}}
.fx-puente__pie{display:flex;flex-direction:column;align-items:center;gap:1.2rem;margin-top:2.2rem}
.fx-term{width:100%;max-width:720px;background:var(--ch-laguna-0);border-radius:16px;box-shadow:0 0 0 1px rgba(168,199,195,.2),0 24px 40px -20px rgba(0,0,0,.7);overflow:hidden}
.fx-term__bar{display:flex;align-items:center;gap:.4rem;padding:.55rem .9rem;background:var(--noche-2);color:var(--txt-noche);font-size:.8rem;font-weight:600}
.fx-term__bar i{width:10px;height:10px;border-radius:50%;background:#ff5b6e}.fx-term__bar i:nth-child(2){background:var(--oxido-l)}.fx-term__bar i:nth-child(3){background:var(--verde);margin-right:.5rem}
.fx-term code{display:block;padding:1rem 1.1rem;color:var(--txt-noche-2);font-family:var(--mono);font-size:.88rem;white-space:pre-wrap;overflow-wrap:anywhere;background:none}
.fx-term__p{color:var(--luz)}
.fx-term__tok{color:var(--oxido-ll)}
.fx-chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.fx-chips li{background:rgba(255,255,255,.06);border:1px solid rgba(168,199,195,.35);color:var(--txt-noche-2);font-weight:700;padding:.45rem .95rem;border-radius:999px}
.fx-chips i{color:var(--luz);margin-right:.35rem}

/* ---------- MARCAS ---------- */
.fx-marcas{background:#fff;padding:clamp(2.2rem,5vw,3.2rem) 0 calc(clamp(3rem,7vw,5rem) + 5vw);position:relative}
.fx-marcas__tit{color:var(--gris);text-align:center;font-family:var(--font-marca);font-weight:700;font-size:1rem;letter-spacing:.18em;text-transform:uppercase;margin:0 0 1.6rem}
.fx-marcas__lista{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
@media (min-width:768px){.fx-marcas__lista{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem}}
.fx-marca-ficha{--borde:var(--ginda);--halo:rgba(142,27,46,.35);background:#fff;border:2px solid var(--hielo-2);border-radius:14px;padding:1rem .8rem .85rem;text-align:center;transform:skewX(-8deg);box-shadow:0 6px 0 var(--borde),0 18px 28px -14px var(--halo)}
.fx-marca-ficha:nth-child(4n+2){--borde:var(--noche-4);--halo:rgba(14,85,88,.35)}
.fx-marca-ficha:nth-child(4n+3){--borde:var(--jade);--halo:rgba(60,136,88,.35)}
.fx-marca-ficha:nth-child(4n+4){--borde:var(--oxido);--halo:rgba(183,65,14,.35)}
.fx-marca-ficha>*{display:block;transform:skewX(8deg)}
.fx-marca-ficha b{font-family:var(--font-marca);font-weight:700;font-size:clamp(1.3rem,3.6vw,1.9rem);letter-spacing:.04em;color:var(--tinta);line-height:1.05}
.fx-marca-ficha span{font-family:var(--mono);font-size:.78rem;color:var(--gris);margin-top:.3rem}

/* ---------- CIERRE ---------- */
.fx-cierre{position:relative;padding:clamp(4rem,8vw,6rem) 0;--ch-fondo:radial-gradient(90% 120% at 15% 0%,var(--ginda-l) 0%,var(--ginda) 45%,var(--ginda-d) 100%);background-color:var(--ginda);color:#fff;clip-path:polygon(0 0,100% 5vw,100% 100%,0 100%);margin-top:-5vw;overflow:hidden}
.fx-cierre::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;background:repeating-linear-gradient(-55deg,#fff 0 2px,transparent 2px 26px)}
.fx-cierre__grid{position:relative;display:grid;gap:2.4rem;align-items:center}
@media (min-width:992px){.fx-cierre__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.fx-cierre__txt{text-align:center;position:relative}
@media (min-width:992px){.fx-cierre__txt{text-align:left}.fx-cierre .fx-hero__cta{justify-content:flex-start}}
.fx-cierre__h{color:#fff;font-size:clamp(2.2rem,6.4vw,3.8rem);text-shadow:0 2px 0 var(--ginda-d),0 4px 0 var(--ginda-dd),0 14px 24px rgba(0,0,0,.35)}
.fx-cierre__sub{font-size:1.25rem;font-weight:700;color:#ffe1e5;margin:.7rem 0 1.6rem}
.fx-sello{display:inline-grid;place-items:center;width:84px;height:84px;border-radius:50%;background:var(--oxido);color:#fff;font-size:2.3rem;transform:rotate(-12deg);box-shadow:0 0 0 6px rgba(255,255,255,.45),0 18px 24px -12px rgba(var(--sombra),.7);margin-bottom:1rem}
.fx-chat{background:#e9eeea;border-radius:24px;padding:0 0 1rem;max-width:400px;width:100%;margin:0 auto;box-shadow:0 30px 50px -24px rgba(var(--sombra),.6);overflow:hidden;transform:rotate(1.5deg)}
.fx-chat__top{display:flex;align-items:center;gap:.6rem;background:#075e54;color:#fff;padding:.8rem 1rem;margin-bottom:.9rem}
.fx-chat__top small{opacity:.8;margin-left:auto;font-size:.8rem}
.fx-chat__av{width:34px;height:34px;border-radius:50%;background:var(--noche-2);display:grid;place-items:center;color:var(--luz)}
.fx-burbuja{margin:.45rem 1rem;max-width:82%;background:#fff;color:var(--tinta);padding:.55rem .8rem;border-radius:4px 14px 14px 14px;font-size:.98rem;line-height:1.35;box-shadow:0 1px 1px rgba(0,0,0,.12)}
.fx-burbuja--yo{margin-left:auto;background:#d9fdd3;border-radius:14px 4px 14px 14px}

/* ---------- pie ---------- */
.fx-foot{--ch-fondo:linear-gradient(180deg,var(--noche-2),var(--noche) 40%);background-color:var(--noche);color:var(--txt-noche);padding:2.4rem 0 1.6rem;font-size:.95rem}
.fx-home .fx-foot{padding-top:3rem}
.fx-foot a{color:var(--txt-noche-2);text-decoration:none;font-weight:600}
.fx-foot a:hover{color:var(--luz-t)}
.fx-foot__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.2rem;padding-bottom:1.4rem;border-bottom:1px solid rgba(168,199,195,.18)}
.fx-foot__links{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.fx-foot__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1.2rem;padding-top:1.2rem}
.fx-foot__bottom a{color:var(--luz-t)}

/* ---------- páginas internas (registro, login, contacto, guías) ---------- */
.fx-inner main{background:radial-gradient(50% 40% at 100% 0%,rgba(14,85,88,.07),transparent 70%),#fff}
.fx-inner .card{border-radius:22px;box-shadow:0 24px 44px -30px rgba(var(--sombra),.55),0 0 0 1px rgba(var(--sombra),.06)!important}
.fx-inner .form-control:focus,.fx-inner .form-check-input:focus{border-color:var(--luz-d);box-shadow:0 0 0 .25rem rgba(255,42,61,.25)}
.fx-inner .form-check-input:checked{background-color:var(--luz-dd);border-color:var(--luz-dd)}
.fx-inner main a:not(.btn):not(.fx-btn){color:var(--luz-dd)}
.fx-inner .cx-wa{border-radius:16px!important;box-shadow:0 5px 0 #128c4a}
.fx-lado{--ch-fondo:radial-gradient(120% 90% at 80% 10%,var(--noche-4) 0%,var(--noche-2) 55%,var(--noche) 100%);background-color:var(--noche);background-image:var(--ch-grano),var(--ch-veta),var(--ch-fondo);background-blend-mode:soft-light,soft-light,normal;color:#fff;border-radius:26px;padding:2rem 1.8rem;box-shadow:0 30px 50px -30px rgba(var(--sombra),.8)}
.fx-lado__oferta{margin:1.4rem 0 1rem;font-family:var(--font-marca);font-weight:700;font-size:2rem;line-height:1.05;color:var(--luz);text-shadow:0 0 22px rgba(255,42,61,.4)}
.fx-lado__lista{list-style:none;padding:0;margin:0;color:var(--txt-noche-2);font-weight:600}
.fx-lado__lista li{margin:.55rem 0}.fx-lado__lista i{color:var(--verde);margin-right:.55rem}
.fx-inner h1{font-family:var(--font-marca);font-weight:700;letter-spacing:-.01em}
.fx-btn--full{width:100%}
.fx-ico-top{display:inline-grid;place-items:center;border-radius:50%;width:72px;height:72px;color:var(--luz);font-size:2rem;background:radial-gradient(circle at 32% 26%,#17686b,var(--noche-2) 60%,var(--noche));box-shadow:0 16px 24px -12px rgba(var(--sombra),.7),inset 0 4px 8px rgba(255,255,255,.18)}

/* ---------- entradas al hacer scroll (solo con JS y sin reducción de movimiento) ---------- */
@media (prefers-reduced-motion:no-preference){
  .fx-js .fx-rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
  .fx-js .fx-rv.is-in{opacity:1;transform:none}
  .fx-js .fx-pantallas .fx-crece{animation-play-state:paused}
  .fx-js .fx-pantallas.is-in .fx-crece{animation-play-state:running}
  .fx-hero__art{transform:translateY(calc(var(--py,0) * 1px))}
  .fx-logo__luz{animation:fxRespira 2.6s ease-in-out infinite}
  @keyframes fxRespira{0%,100%{opacity:1}50%{opacity:.55}}
}

/* ---------- sin movimiento: todo quieto y completo ---------- */
@media (prefers-reduced-motion:reduce){
  .fx-body *,.fx-body *::before,.fx-body *::after{animation:none!important;transition:none!important}
  .fx-pulso,.fx-dedo,.fx-toque,.fx-paquetes{display:none}
  .fx-win{fill:#ffd36b}
  .fx-casa__halo,.fx-aviso,.fx-toast{opacity:1}
  .fx-onu-led{fill:#5bd083}
  .fx-pin::after{display:none}
}

/* ---------- contacto ---------- */
.fx-contacto{padding:clamp(2.5rem,6vw,5rem) 0}
.fx-contacto__grid{display:grid;gap:1.5rem;align-items:center}
@media (min-width:992px){.fx-contacto__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:3rem}}
.fx-contacto__ilus{width:100%;max-width:520px;height:auto;display:block;margin:0 auto}
.fx-contacto__txt{text-align:center}
@media (min-width:992px){.fx-contacto__txt{text-align:left}}
.fx-contacto__lista{list-style:none;padding:0;margin:1.2rem 0 1.6rem;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
@media (min-width:992px){.fx-contacto__lista{justify-content:flex-start}}
.fx-contacto__lista li{background:var(--hielo);border-radius:999px;padding:.45rem .95rem;font-weight:700;color:var(--tinta)}
.fx-contacto__lista i{color:var(--ginda);margin-right:.4rem}
.fx-contacto__nota{margin:1.2rem 0 0;color:var(--gris);font-weight:500}

/* ---------- pie: enlaces a guías por marca (SEO interno) ---------- */
.fx-foot__guias{display:flex;flex-wrap:wrap;gap:.35rem 1rem;padding:1rem 0;border-bottom:1px solid rgba(168,199,195,.18);font-size:.88rem}
.fx-foot__guias span{color:var(--txt-noche)}
.fx-foot__guias a{font-weight:500;color:var(--txt-noche-2)}
/* Registro: enlace a la guía con video (/empezar) */
.fx-inner main a.fx-lado__guia:not(.btn):not(.fx-btn){display:inline-flex;align-items:center;gap:.5rem;margin-top:1.4rem;color:#fff;font-weight:800;text-decoration:none;border-bottom:2px solid var(--luz);padding-bottom:.15rem}
.fx-inner main a.fx-lado__guia .bi{color:var(--luz);font-size:1.3rem}

/* ---------- videos tutoriales (partials/home/videos.php) ---------- */
.fx-videos__grid{display:grid;gap:1.6rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:992px){.fx-videos__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}}
.fx-video{margin:0;background:#fff;border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;box-shadow:0 18px 40px -24px rgba(var(--sombra),.45)}
.fx-video video{display:block;width:100%;aspect-ratio:16/9;background:var(--noche)}
.fx-video figcaption{display:grid;grid-template-columns:1fr auto;gap:.15rem .8rem;padding:1rem 1.2rem 1.15rem}
.fx-video figcaption b{font-family:var(--font-marca);font-size:1.15rem;color:var(--tinta)}
.fx-video figcaption span{grid-column:1;color:var(--gris)}
.fx-video figcaption small{grid-column:2;grid-row:1;align-self:center;font-family:var(--mono);font-weight:600;color:var(--noche-4);background:var(--hielo);border-radius:999px;padding:.15rem .6rem}