/*
Theme Name: CELULANET MAIN WooCommerce
Theme URI: https://www.celulanet.cl/
Author: CELULANET
Description: CELULANET MAIN V12 — frontend premium adaptado a WordPress y WooCommerce.
Version: 12.3.4
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: celulanet-main
*/
:root{--cn-bg:#0A0A0A;--cn-panel:#111113;--cn-ink:#F2F0EF;--cn-muted:#A9A5B4;--cn-blue:#0085CA;--cn-blue-light:#57C7F5;--cn-violet:#3607A6;--cn-violet-light:#cabeff;}
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}body{margin:0;background:var(--cn-bg);color:var(--cn-ink);font-family:'Hanken Grotesk',system-ui,sans-serif}a{color:#A0CAFF;text-decoration:none}img{max-width:100%;height:auto}


/* v12.2.4 — MAIN fidelity responsive refinement.
   Desktop keeps the original MAIN animation stack. Mobile/tablet keeps motion and depth,
   but uses fail-safe native animation and a scroll-driven portfolio stage so content
   can never remain permanently hidden. */

.cn-mobile-hero-bg{display:none;pointer-events:none}
.cn-portfolio-mobile{display:none}
.cn-portfolio-desktop{display:block}
html,body,#page,.site,.site-content{margin:0!important;padding:0!important;border:0!important;outline:0!important}
.cn-main-header{box-sizing:border-box!important;border-top:0!important;border-left:0!important;border-right:0!important;outline:0!important;box-shadow:none!important;margin:0!important}

@keyframes cnFloatA{0%,100%{transform:translate3d(0,0,0) rotate(4deg)}50%{transform:translate3d(8px,-12px,0) rotate(1deg)}}
@keyframes cnFloatB{0%,100%{transform:translate3d(0,0,0) rotate(-5deg)}50%{transform:translate3d(-9px,13px,0) rotate(-2deg)}}
@keyframes cnOrbitA{0%,100%{transform:translate(-50%,-50%) rotate(0deg) scale(1)}50%{transform:translate(-50%,-50%) rotate(15deg) scale(1.045)}}
@keyframes cnOrbitB{0%,100%{transform:translate(-50%,-50%) rotate(0deg) scale(1)}50%{transform:translate(-50%,-50%) rotate(-19deg) scale(.965)}}
@keyframes cnCore{0%,100%{transform:translate(-50%,-50%) rotate(45deg) scale(1)}50%{transform:translate(-50%,-50%) rotate(102deg) scale(1.07)}}
@keyframes cnScan{0%{transform:translate3d(0,-120%,0);opacity:0}20%{opacity:.65}70%{opacity:.28}100%{transform:translate3d(0,520%,0);opacity:0}}
@keyframes cnFieldA{0%,100%{transform:translate3d(-4%,-3%,0) scale(1)}50%{transform:translate3d(8%,5%,0) scale(1.08)}}
@keyframes cnFieldB{0%,100%{transform:translate3d(5%,3%,0) scale(1)}50%{transform:translate3d(-7%,-5%,0) scale(1.1)}}

@media (max-width:1180px){
  html,body{overflow-x:hidden!important;background:#080808!important;width:100%!important;max-width:100%!important}
  body{-webkit-text-size-adjust:100%}
  .cn-main-header{left:0!important;right:0!important;top:0!important;width:100%!important;max-width:none!important;background:rgba(8,8,10,.88)!important;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08)!important}
  body.admin-bar .cn-main-header{top:46px!important}
  .cn-main-nav{width:100%!important;max-width:none!important;border:0!important;outline:0!important}

  /* Keep the visual language of the PC Hero, optimized for touch GPUs. */
  #estudio{min-height:100svh!important;overflow:hidden!important;padding-top:132px!important}
  #estudio>canvas{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
  .cn-mobile-hero-bg{display:block;position:absolute;inset:0;z-index:0;overflow:hidden;opacity:1;background:radial-gradient(circle at 50% 34%,rgba(53,34,130,.18),transparent 36%)}
  .cn-mobile-hero-bg:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%);background:linear-gradient(to bottom,transparent,rgba(0,133,202,.82) 16%,rgba(202,190,255,.42) 63%,transparent);box-shadow:0 0 22px rgba(0,133,202,.28)}
  .cn-mobile-hero-orbit{position:absolute;left:50%;top:36%;border:1px solid rgba(96,69,207,.34);border-radius:50%;box-shadow:0 0 70px rgba(54,7,166,.10) inset;will-change:transform}
  .cn-mobile-hero-orbit-a{width:min(104vw,700px);aspect-ratio:1;animation:cnOrbitA 13s ease-in-out infinite}
  .cn-mobile-hero-orbit-b{width:min(76vw,510px);aspect-ratio:1;border-color:rgba(0,133,202,.30);animation:cnOrbitB 11s ease-in-out infinite}
  .cn-mobile-hero-core{position:absolute;left:50%;top:36%;width:min(46vw,320px);aspect-ratio:1;border:1px solid rgba(87,199,245,.30);background:radial-gradient(circle,rgba(0,133,202,.18),rgba(54,7,166,.12) 46%,transparent 73%);box-shadow:0 0 90px rgba(0,133,202,.14);animation:cnCore 9s ease-in-out infinite;will-change:transform}
  .cn-mobile-hero-panel{position:absolute;border:1px solid rgba(87,199,245,.20);background:linear-gradient(135deg,rgba(0,133,202,.16),rgba(17,17,19,.46) 58%,rgba(54,7,166,.14));box-shadow:0 18px 55px rgba(0,0,0,.32);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:.72;will-change:transform}
  .cn-mobile-hero-panel:before{content:"";display:block;height:18%;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
  .cn-mobile-hero-panel span{display:block;height:4px;margin:8px 12px 0;background:rgba(87,199,245,.18);border-radius:8px}
  .cn-mobile-hero-panel span:nth-child(2){width:54%}.cn-mobile-hero-panel span:nth-child(3){width:72%}
  .cn-mobile-hero-panel-a{width:31vw;max-width:190px;aspect-ratio:1.55;left:-2%;top:17%;animation:cnFloatA 6.2s ease-in-out infinite}
  .cn-mobile-hero-panel-b{width:34vw;max-width:220px;aspect-ratio:1.4;right:-5%;top:30%;border-color:rgba(202,190,255,.22);animation:cnFloatB 6.8s ease-in-out infinite}
  .cn-mobile-hero-panel-c{width:35vw;max-width:230px;aspect-ratio:1.55;left:-3%;bottom:12%;border-color:rgba(96,69,207,.24);animation:cnFloatB 7.4s ease-in-out infinite reverse}


  /* Final CTA keeps the same technological depth as desktop on mobile. */
  #contacto{background:
    radial-gradient(circle at 50% 36%,rgba(0,133,202,.15),transparent 22%),
    radial-gradient(circle at 50% 46%,rgba(96,69,207,.22),transparent 48%),
    linear-gradient(115deg,rgba(0,133,202,.07),transparent 42%,rgba(54,7,166,.12))!important}
  #contacto:before,#contacto:after{content:"";position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:0}
  #contacto:before{width:min(104vw,760px);aspect-ratio:1;border:1px solid rgba(96,69,207,.26);box-shadow:0 0 90px rgba(54,7,166,.10) inset;animation:cnOrbitA 14s ease-in-out infinite}
  #contacto:after{width:min(72vw,520px);aspect-ratio:1;border:1px solid rgba(0,133,202,.24);box-shadow:0 0 72px rgba(0,133,202,.08);animation:cnOrbitB 11s ease-in-out infinite}
  #contacto canvas{opacity:.92!important;visibility:visible!important}

  /* Ambient background retains motion everywhere instead of becoming a flat gradient. */
  .cn-ambient-mobile-active [data-field="0"]{display:block!important;opacity:.20!important;filter:blur(46px)!important;animation:cnFieldA 15s ease-in-out infinite!important}
  .cn-ambient-mobile-active [data-field="1"]{display:block!important;opacity:.17!important;filter:blur(46px)!important;animation:cnFieldB 17s ease-in-out infinite!important}
  .cn-ambient-mobile-active [data-field="2"],.cn-ambient-mobile-active [data-field="3"]{display:none!important}
  .cn-ambient-mobile-active [data-grid]{opacity:.11!important}
  .cn-ambient-mobile-active [data-thread]{opacity:.34!important}

  /* Mobile/tablet now use the same WebGL scroll-depth portfolio concept as desktop.
     The HTML mobile deck remains available only as an automatic no-WebGL fallback. */
  .cn-portfolio-desktop{display:block!important}
  .cn-portfolio-mobile{display:none!important;position:relative!important;width:100%!important;margin:0!important;padding:0!important;background:#080808!important}
  .cn-portfolio-desktop>div{height:470svh!important}
  .cn-portfolio-desktop>div>div{top:102px!important;height:calc(100svh - 102px)!important;min-height:560px!important}
  .cn-portfolio-desktop canvas{width:100%!important;height:100%!important}
  .cn-portfolio-desktop [aria-live="polite"]{left:20px!important;right:20px!important;bottom:26px!important;max-width:calc(100% - 40px)!important;padding:0!important}
  .cn-portfolio-desktop [aria-live="polite"]>div{gap:8px!important}
  .cn-portfolio-desktop [aria-live="polite"] [role="img"]{width:104px!important;height:64px!important}
  .cn-portfolio-desktop [aria-live="polite"] h3{font-size:clamp(23px,7vw,34px)!important;max-width:12ch!important}
  .cn-portfolio-desktop [aria-live="polite"] p{font-size:9px!important;letter-spacing:.14em!important}
  .cn-portfolio-desktop [aria-live="polite"] a{padding:11px 15px!important;font-size:9px!important}
  .cn-portfolio-desktop>div>div>div[style*="right: clamp"]{right:14px!important}
  .cn-portfolio-desktop>div>div>div[style*="left: clamp"][style*="writing-mode"]{left:9px!important;font-size:8px!important}
  body.cn-no-webgl .cn-portfolio-desktop{display:none!important}
  body.cn-no-webgl .cn-portfolio-mobile{display:block!important}
  .cn-mobile-port-track{position:relative;height:340svh;min-height:2200px}
  .cn-mobile-port-sticky{position:sticky;top:102px;height:calc(100svh - 102px);min-height:600px;overflow:hidden;perspective:1300px;background:radial-gradient(ellipse 72% 56% at 50% 48%,rgba(41,27,91,.22),transparent 64%),#080808}
  .cn-mobile-port-sticky:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(transparent,rgba(0,133,202,.62) 16%,rgba(202,190,255,.26) 75%,transparent);opacity:.75}
  .cn-mobile-port-kicker{position:absolute;left:18px;top:24px;z-index:34;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.24em;color:#5D5966;writing-mode:vertical-rl;text-transform:uppercase}
  .cn-mobile-port-stage{position:absolute;inset:24px 20px 90px 42px;transform-style:preserve-3d}
  .cn-mobile-port-card{position:absolute;inset:0;display:grid;grid-template-rows:minmax(0,58%) auto;border:1px solid color-mix(in srgb,var(--cn-accent) 42%,rgba(255,255,255,.08));background:linear-gradient(155deg,rgba(12,20,27,.96),rgba(16,11,29,.97));box-shadow:0 34px 100px rgba(0,0,0,.55),0 0 70px rgba(54,7,166,.10);overflow:hidden;transform-origin:center center;will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden}
  .cn-mobile-port-frame{position:relative;min-height:0;overflow:hidden;background:#090a0d;border-bottom:1px solid rgba(255,255,255,.08)}
  .cn-mobile-port-frame img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:top center!important;display:block!important;filter:none!important;opacity:1!important}
  .cn-mobile-port-frame:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,transparent 55%,rgba(6,7,9,.56));box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)}
  .cn-mobile-port-scan{position:absolute;left:0;right:0;height:1px;top:0;z-index:3;background:linear-gradient(90deg,transparent,var(--cn-accent),transparent);box-shadow:0 0 14px var(--cn-accent);animation:cnScan 4.8s linear infinite}
  .cn-mobile-port-copy{position:relative;z-index:4;padding:20px 20px 22px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
  .cn-mobile-port-meta{margin:0 0 9px;font-family:'JetBrains Mono',monospace;font-size:10px;line-height:1.5;letter-spacing:.18em;text-transform:uppercase;color:#57C7F5}
  .cn-mobile-port-copy h3{margin:0;font-family:Syne,sans-serif;font-size:clamp(28px,8vw,42px);line-height:.96;letter-spacing:-.035em;text-transform:uppercase;color:#F2F0EF}
  .cn-mobile-port-domain{margin:10px 0 14px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#85818C}
  .cn-mobile-port-copy a{display:inline-flex;align-items:center;gap:8px;padding:11px 15px;border:1px solid rgba(255,255,255,.16);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:#E5E2E1;background:rgba(8,8,10,.38);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .cn-mobile-port-copy a .ms{font-size:15px}
  .cn-mobile-port-dots{position:absolute;right:16px;top:50%;transform:translateY(-50%);z-index:38;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
  .cn-mobile-port-dots span{display:block;width:18px;height:2px;background:rgba(255,255,255,.16);transition:width .3s ease,background .3s ease}
  .cn-mobile-port-dots span.is-active{width:34px;background:#57C7F5;box-shadow:0 0 10px rgba(87,199,245,.4)}
  .cn-mobile-port-counter{position:absolute;right:18px;bottom:30px;z-index:38;display:flex;gap:5px;align-items:baseline;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;color:#5D5966}
  .cn-mobile-port-counter [data-mobile-current]{font-size:18px;color:#57C7F5}

  [data-service] [data-tilt-inner]{transform-style:flat!important}
}

@media (max-width:782px){body.admin-bar .cn-main-header{top:46px!important}}
@media (max-width:767px){
  .cn-main-header{height:102px!important;min-height:102px!important}
  .cn-main-nav{padding-left:20px!important;padding-right:20px!important}
  .cn-main-nav>a:first-child img{height:64px!important;max-width:70vw!important;object-fit:contain}
  #estudio{padding-left:18px!important;padding-right:18px!important;padding-top:128px!important}
  .cn-mobile-hero-orbit-a{width:112vw}.cn-mobile-hero-orbit-b{width:82vw}
  .cn-mobile-hero-panel-a{left:-7%}.cn-mobile-hero-panel-b{right:-10%}.cn-mobile-hero-panel-c{left:-8%}
  .cn-mobile-port-stage{left:38px;right:14px;top:20px;bottom:82px}
  .cn-mobile-port-card{grid-template-rows:minmax(0,55%) auto}
  .cn-mobile-port-copy{padding:18px}
}

@media (max-width:430px){
  .cn-main-nav>a:first-child img{height:58px!important;max-width:68vw!important}
  .cn-mobile-port-sticky{top:102px;height:calc(100svh - 102px);min-height:560px}
  .cn-mobile-port-stage{left:34px;right:12px;top:16px;bottom:72px}
  .cn-mobile-port-copy h3{font-size:clamp(24px,8vw,34px)}
  .cn-mobile-port-meta{font-size:9px}.cn-mobile-port-domain{font-size:9px}
}

@media (prefers-reduced-motion:reduce){
  .cn-mobile-hero-panel,.cn-mobile-hero-core,.cn-mobile-hero-orbit,.cn-mobile-port-scan,.cn-ambient-mobile-active [data-field]{animation:none!important}
}